chore: remove Responsive orientation

Signed-off-by: Gabriel Dugny <gabriel.dugny@believe.com>

packages/ui/report.api.md

@@ -1829,7 +1829,6 @@ export const ToggleButtonDefinition: {
   };
   readonly dataAttributes: {
     readonly size: readonly ['small', 'medium'];
-    readonly variant: readonly ['primary', 'secondary'];
   };
 };
 
@@ -1852,9 +1851,7 @@ export const ToggleButtonGroupDefinition: {
 export interface ToggleButtonGroupProps
   extends Omit<ToggleButtonGroupProps_2, 'orientation'> {
   // (undocumented)
-  orientation?: Responsive<
-    NonNullable<ToggleButtonGroupProps_2['orientation']>
-  >;
+  orientation?: NonNullable<ToggleButtonGroupProps_2['orientation']>;
 }
 
 // @public
@@ -1868,11 +1865,6 @@ export interface ToggleButtonProps extends ToggleButtonProps_2 {
   onSurface?: Responsive<Surface>;
   // (undocumented)
   size?: 'small' | 'medium' | Partial<Record<Breakpoint, 'small' | 'medium'>>;
-  // (undocumented)
-  variant?:
-    | 'primary'
-    | 'secondary'
-    | Partial<Record<Breakpoint, 'primary' | 'secondary'>>;
 }
 
 // @public (undocumented)

packages/ui/src/components/ToggleButtonGroup/ToggleButtonGroup.stories.tsx

@@ -21,7 +21,6 @@ import { Flex } from '../Flex';
 import { Text } from '../Text';
 import { useState } from 'react';
 import type { Selection } from 'react-aria-components';
-import { useBreakpoint } from '../../hooks/useBreakpoint';
 import {
   RiCloudLine,
   RiStarLine,
@@ -209,30 +208,6 @@ export const Orientation = meta.story({
   ),
 });
 
-export const ResponsiveOrientation = meta.story({
-  render: () => {
-    const { breakpoint } = useBreakpoint(); // For testing purposes only (display breakpoint)
-
-    return (
-      <Flex direction="column" gap="3">
-        <Text>
-          Breakpoint: {breakpoint} (orientation: vertical on initial/sm,
-          horizontal from md+)
-        </Text>
-        <ToggleButtonGroup
-          selectionMode="single"
-          orientation={{ initial: 'vertical', md: 'horizontal' }}
-          defaultSelectedKeys={['morning']}
-        >
-          <ToggleButton id="morning">Morning</ToggleButton>
-          <ToggleButton id="afternoon">Afternoon</ToggleButton>
-          <ToggleButton id="evening">Evening</ToggleButton>
-        </ToggleButtonGroup>
-      </Flex>
-    );
-  },
-});
-
 export const ControlledGroup = meta.story({
   render: () => {
     const [selectedKeys, setSelectedKeys] = useState<Selection>(

packages/ui/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx

@@ -21,7 +21,6 @@ import type { ToggleButtonGroupProps } from './types';
 import { useStyles } from '../../hooks/useStyles';
 import { ToggleButtonGroupDefinition } from './definition';
 import styles from './ToggleButtonGroup.module.css';
-import type { Breakpoint } from '../..';
 
 /** @internal */
 export interface ToggleButtonGroupContextValue {}
@@ -44,18 +43,11 @@ export const ToggleButtonGroup = forwardRef(
     const { classNames, dataAttributes, cleanedProps } = useStyles(
       ToggleButtonGroupDefinition,
       {
-        orientation: 'horizontal' as const,
         ...props,
       },
     );
 
-    const {
-      className,
-      children,
-      orientation: _orientation,
-      ...rest
-    } = cleanedProps;
-    const resolvedOrientation = dataAttributes['data-orientation'];
+    const { className, children, ...rest } = cleanedProps;
 
     const contextValue: ToggleButtonGroupContextValue = {};
 
@@ -64,7 +56,6 @@ export const ToggleButtonGroup = forwardRef(
         <AriaToggleButtonGroup
           className={clsx(classNames.root, styles[classNames.root], className)}
           ref={ref}
-          orientation={resolvedOrientation}
           {...dataAttributes}
           {...rest}
         >

packages/ui/src/components/ToggleButtonGroup/types.ts

@@ -15,13 +15,9 @@
  */
 
 import type { ToggleButtonGroupProps as AriaToggleButtonGroupProps } from 'react-aria-components';
-import { Responsive } from '../../types';
-import type { Breakpoint } from '../..';
 
 /** @public */
 export interface ToggleButtonGroupProps
   extends Omit<AriaToggleButtonGroupProps, 'orientation'> {
-  orientation?: Responsive<
-    NonNullable<AriaToggleButtonGroupProps['orientation']>
-  >;
+  orientation?: NonNullable<AriaToggleButtonGroupProps['orientation']>;
 }

packages/ui/src/hooks/useStyles.ts

@@ -17,29 +17,16 @@ import { useBreakpoint, breakpoints } from './useBreakpoint';
 import type { ComponentDefinition } from '../types';
 import { utilityClassMap } from '../utils/utilityClassMap';
 
-type DataAttributeValue<V> = V extends string ? V : string;
-
-type DataAttributesOf<T extends ComponentDefinition> = T extends {
-  dataAttributes: infer D extends Record<string, readonly unknown[]>;
-}
-  ? {
-      [K in keyof D as `data-${K & string}`]?: DataAttributeValue<D[K][number]>;
-    }
-  : Record<string, string>;
-
 /**
  * Resolve a responsive value based on the current breakpoint
  * @param value - The responsive value (string or object with breakpoint keys)
  * @param breakpoint - The current breakpoint
  * @returns The resolved value for the current breakpoint
  */
-function resolveResponsiveValue<T extends string>(
-  value: T | Partial<Record<string, T>> | undefined,
+function resolveResponsiveValue(
+  value: string | Record<string, string>,
   breakpoint: string,
-): T | undefined {
-  if (value === undefined) {
-    return undefined;
-  }
+): string | undefined {
   if (typeof value === 'string') {
     return value;
   }
@@ -79,7 +66,7 @@ export function useStyles<
   props: P = {} as P,
 ): {
   classNames: T['classNames'];
-  dataAttributes: DataAttributesOf<T> & Record<string, string>;
+  dataAttributes: Record<string, string>;
   utilityClasses: string;
   style: React.CSSProperties;
   cleanedProps: P;
@@ -101,7 +88,6 @@ export function useStyles<
   const incomingStyle = props.style || {};
 
   // Generate data attributes from component definition
-  // Keep this writable without running into TS2862 ("generic and can only be indexed for reading")
   const dataAttributes: Record<string, string> = {};
   for (const key of dataAttributeNames) {
     const value = props[key];
@@ -208,8 +194,7 @@ export function useStyles<
 
   return {
     classNames,
-    dataAttributes: dataAttributes as DataAttributesOf<T> &
-      Record<string, string>,
+    dataAttributes,
     utilityClasses: utilityClassList.join(' '),
     style: mergedStyle,
     cleanedProps,