refactor: try to fit in useStyle

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

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

@@ -18,15 +18,13 @@ import clsx from 'clsx';
 import { forwardRef, Ref } from 'react';
 import { ToggleButtonGroup as AriaToggleButtonGroup } from 'react-aria-components';
 import type { ToggleButtonGroupProps } from './types';
-import { resolveResponsiveValue, useStyles } from '../../hooks/useStyles';
+import { useStyles } from '../../hooks/useStyles';
 import { ToggleButtonGroupDefinition } from './definition';
 import styles from './ToggleButtonGroup.module.css';
-import { useBreakpoint } from '../../hooks/useBreakpoint';
 
 /** @public */
 export const ToggleButtonGroup = forwardRef(
   (props: ToggleButtonGroupProps, ref: Ref<HTMLDivElement>) => {
-    const { breakpoint } = useBreakpoint();
     const { classNames, dataAttributes, cleanedProps } = useStyles(
       ToggleButtonGroupDefinition,
       {
@@ -35,13 +33,19 @@ export const ToggleButtonGroup = forwardRef(
       },
     );
 
-    const { className, children, orientation, ...rest } = cleanedProps;
+    const {
+      className,
+      children,
+      orientation: _orientation,
+      ...rest
+    } = cleanedProps;
+    const resolvedOrientation = dataAttributes['data-orientation'];
 
     return (
       <AriaToggleButtonGroup
         className={clsx(classNames.root, styles[classNames.root], className)}
         ref={ref}
-        orientation={resolveResponsiveValue(orientation, breakpoint)}
+        orientation={resolvedOrientation}
         {...dataAttributes}
         {...rest}
       >

packages/ui/src/hooks/useStyles.ts

@@ -17,13 +17,23 @@ 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
  */
-export function resolveResponsiveValue<T extends string>(
+function resolveResponsiveValue<T extends string>(
   value: T | Partial<Record<string, T>> | undefined,
   breakpoint: string,
 ): T | undefined {
@@ -69,7 +79,7 @@ export function useStyles<
   props: P = {} as P,
 ): {
   classNames: T['classNames'];
-  dataAttributes: Record<string, string>;
+  dataAttributes: DataAttributesOf<T> & Record<string, string>;
   utilityClasses: string;
   style: React.CSSProperties;
   cleanedProps: P;
@@ -91,6 +101,7 @@ 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];
@@ -197,7 +208,8 @@ export function useStyles<
 
   return {
     classNames,
-    dataAttributes,
+    dataAttributes: dataAttributes as DataAttributesOf<T> &
+      Record<string, string>,
     utilityClasses: utilityClassList.join(' '),
     style: mergedStyle,
     cleanedProps,