Improve styles props

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

packages/ui/src/components/Avatar/Avatar.tsx

@@ -26,16 +26,19 @@ export const Avatar = forwardRef<
   ElementRef<typeof AvatarPrimitive.Root>,
   AvatarProps
 >((props, ref) => {
-  const { className, src, name, size = 'medium', ...rest } = props;
-  const { classNames } = useStyles('Avatar', {
-    size,
+  // const { className, src, name, ...rest } = props;
+  const { classNames, dataAttributes, cleanedProps } = useStyles('Avatar', {
+    size: 'medium',
+    ...props,
   });
 
+  const { className, src, name, ...rest } = cleanedProps;
+
   return (
     <AvatarPrimitive.Root
       ref={ref}
       className={clsx(classNames.root, styles[classNames.root], className)}
-      data-size={size}
+      {...dataAttributes}
       {...rest}
     >
       <AvatarPrimitive.Image

packages/ui/src/components/Card/Card.module.css

@@ -33,6 +33,7 @@
     flex: 1;
     min-height: 0;
     overflow: auto;
+    padding-inline: var(--bui-space-3);
   }
 
   .bui-CardHeader {

packages/ui/src/components/Card/Card.tsx

@@ -15,7 +15,6 @@
  */
 
 import { forwardRef } from 'react';
-import { ScrollArea } from '../ScrollArea';
 import clsx from 'clsx';
 import { useStyles } from '../../hooks/useStyles';
 import type {
@@ -32,8 +31,8 @@ import styles from './Card.module.css';
  * @public
  */
 export const Card = forwardRef<HTMLDivElement, CardProps>((props, ref) => {
-  const { className, ...rest } = props;
-  const { classNames } = useStyles('Card');
+  const { classNames, cleanedProps } = useStyles('Card', props);
+  const { className, ...rest } = cleanedProps;
 
   return (
     <div
@@ -51,8 +50,8 @@ export const Card = forwardRef<HTMLDivElement, CardProps>((props, ref) => {
  */
 export const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(
   (props, ref) => {
-    const { className, ...rest } = props;
-    const { classNames } = useStyles('Card');
+    const { classNames, cleanedProps } = useStyles('Card', props);
+    const { className, ...rest } = cleanedProps;
 
     return (
       <div
@@ -75,25 +74,15 @@ export const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(
  */
 export const CardBody = forwardRef<HTMLDivElement, CardBodyProps>(
   (props, ref) => {
-    const { children, className, ...rest } = props;
-    const { classNames } = useStyles('Card');
+    const { classNames, cleanedProps } = useStyles('Card', props);
+    const { className, ...rest } = cleanedProps;
 
     return (
-      <ScrollArea.Root
+      <div
         ref={ref}
         className={clsx(classNames.body, styles[classNames.body], className)}
         {...rest}
-      >
-        <ScrollArea.Viewport style={{ paddingInline: 'var(--bui-space-3)' }}>
-          {children}
-        </ScrollArea.Viewport>
-        <ScrollArea.Scrollbar
-          orientation="vertical"
-          style={{ margin: '0 0.25rem' }}
-        >
-          <ScrollArea.Thumb />
-        </ScrollArea.Scrollbar>
-      </ScrollArea.Root>
+      />
     );
   },
 );
@@ -105,8 +94,8 @@ export const CardBody = forwardRef<HTMLDivElement, CardBodyProps>(
  */
 export const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(
   (props, ref) => {
-    const { className, ...rest } = props;
-    const { classNames } = useStyles('Card');
+    const { classNames, cleanedProps } = useStyles('Card', props);
+    const { className, ...rest } = cleanedProps;
 
     return (
       <div

packages/ui/src/components/Checkbox/Checkbox.tsx

@@ -25,31 +25,19 @@ import styles from './Checkbox.module.css';
 /** @public */
 export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
   (props, ref) => {
-    const {
-      label,
-      checked,
-      onChange,
-      disabled,
-      required,
-      className,
-      name,
-      value,
-      style,
-    } = props;
+    const { classNames, cleanedProps } = useStyles('Checkbox', props);
 
-    const { classNames } = useStyles('Checkbox');
+    const { label, onChange, className, ...rest } = props;
+
+    console.log('props', props);
+    console.log('cleanedProps', cleanedProps);
 
     const checkboxElement = (
       <CheckboxPrimitive.Root
         ref={ref}
         className={clsx(classNames.root, styles[classNames.root], className)}
-        checked={checked}
         onCheckedChange={onChange}
-        disabled={disabled}
-        required={required}
-        name={name}
-        value={value}
-        style={style}
+        {...rest}
       >
         <CheckboxPrimitive.Indicator
           className={clsx(classNames.indicator, styles[classNames.indicator])}

packages/ui/src/components/Collapsible/Collapsible.tsx

@@ -24,13 +24,13 @@ const CollapsibleRoot = forwardRef<
   React.ElementRef<typeof CollapsiblePrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root>
 >(({ className, ...props }, ref) => {
-  const { classNames } = useStyles('Collapsible');
+  const { classNames, cleanedProps } = useStyles('Collapsible', props);
 
   return (
     <CollapsiblePrimitive.Root
       ref={ref}
       className={clsx(classNames.root, styles[classNames.root], className)}
-      {...props}
+      {...cleanedProps}
     />
   );
 });
@@ -40,7 +40,7 @@ const CollapsibleTrigger = forwardRef<
   React.ElementRef<typeof CollapsiblePrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Trigger>
 >(({ className, ...props }, ref) => {
-  const { classNames } = useStyles('Collapsible');
+  const { classNames, cleanedProps } = useStyles('Collapsible', props);
 
   return (
     <CollapsiblePrimitive.Trigger
@@ -50,7 +50,7 @@ const CollapsibleTrigger = forwardRef<
         styles[classNames.trigger],
         className,
       )}
-      {...props}
+      {...cleanedProps}
     />
   );
 });
@@ -60,13 +60,13 @@ const CollapsiblePanel = forwardRef<
   React.ElementRef<typeof CollapsiblePrimitive.Panel>,
   React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Panel>
 >(({ className, ...props }, ref) => {
-  const { classNames } = useStyles('Collapsible');
+  const { classNames, cleanedProps } = useStyles('Collapsible', props);
 
   return (
     <CollapsiblePrimitive.Panel
       ref={ref}
       className={clsx(classNames.panel, styles[classNames.panel], className)}
-      {...props}
+      {...cleanedProps}
     />
   );
 });

packages/ui/src/components/Dialog/Dialog.tsx

@@ -41,8 +41,9 @@ export const DialogTrigger = (props: DialogTriggerProps) => {
 
 /** @public */
 export const Dialog = forwardRef<React.ElementRef<typeof Modal>, DialogProps>(
-  ({ className, children, width, height, style, ...props }, ref) => {
-    const { classNames } = useStyles('Dialog');
+  (props, ref) => {
+    const { classNames, cleanedProps } = useStyles('Dialog', props);
+    const { className, children, width, height, style, ...rest } = cleanedProps;
 
     return (
       <Modal
@@ -50,7 +51,7 @@ export const Dialog = forwardRef<React.ElementRef<typeof Modal>, DialogProps>(
         className={clsx(classNames.overlay, styles[classNames.overlay])}
         isDismissable
         isKeyboardDismissDisabled={false}
-        {...props}
+        {...rest}
       >
         <RADialog
           className={clsx(
@@ -82,14 +83,15 @@ Dialog.displayName = 'Dialog';
 export const DialogHeader = forwardRef<
   React.ElementRef<'div'>,
   DialogHeaderProps
->(({ className, children, ...props }, ref) => {
-  const { classNames } = useStyles('Dialog');
+>((props, ref) => {
+  const { classNames, cleanedProps } = useStyles('Dialog', props);
+  const { className, children, ...rest } = cleanedProps;
 
   return (
     <Flex
       ref={ref}
       className={clsx(classNames.header, styles[classNames.header], className)}
-      {...props}
+      {...rest}
     >
       <Heading
         slot="title"
@@ -107,14 +109,15 @@ DialogHeader.displayName = 'DialogHeader';
 
 /** @public */
 export const DialogBody = forwardRef<React.ElementRef<'div'>, DialogBodyProps>(
-  ({ className, children, ...props }, ref) => {
-    const { classNames } = useStyles('Dialog');
+  (props, ref) => {
+    const { classNames, cleanedProps } = useStyles('Dialog', props);
+    const { className, children, ...rest } = cleanedProps;
 
     return (
       <div
         className={clsx(classNames.body, styles[classNames.body], className)}
         ref={ref}
-        {...props}
+        {...rest}
       >
         {children}
       </div>
@@ -128,14 +131,15 @@ DialogBody.displayName = 'DialogBody';
 export const DialogFooter = forwardRef<
   React.ElementRef<'div'>,
   React.ComponentPropsWithoutRef<'div'>
->(({ className, children, ...props }, ref) => {
-  const { classNames } = useStyles('Dialog');
+>((props, ref) => {
+  const { classNames, cleanedProps } = useStyles('Dialog', props);
+  const { className, children, ...rest } = cleanedProps;
 
   return (
     <div
       ref={ref}
       className={clsx(classNames.footer, styles[classNames.footer], className)}
-      {...props}
+      {...rest}
     >
       {children}
     </div>

packages/ui/src/components/FieldError/FieldError.tsx

@@ -26,9 +26,8 @@ import { useStyles } from '../../hooks/useStyles';
 /** @public */
 export const FieldError = forwardRef<HTMLDivElement, FieldErrorProps>(
   (props: FieldErrorProps, ref) => {
-    const { className, ...rest } = props;
-
-    const { classNames } = useStyles('FieldError');
+    const { classNames, cleanedProps } = useStyles('FieldError', props);
+    const { className, ...rest } = cleanedProps;
 
     return (
       <AriaFieldError

packages/ui/src/components/FieldLabel/FieldLabel.tsx

@@ -23,9 +23,9 @@ import clsx from 'clsx';
 /** @public */
 export const FieldLabel = forwardRef<HTMLDivElement, FieldLabelProps>(
   (props: FieldLabelProps, ref) => {
-    const { label, secondaryLabel, description, htmlFor, id, ...rest } = props;
-
-    const { classNames } = useStyles('FieldLabel');
+    const { classNames, cleanedProps } = useStyles('FieldLabel', props);
+    const { label, secondaryLabel, description, htmlFor, id, ...rest } =
+      cleanedProps;
 
     if (!label) return null;
 

packages/ui/src/components/Header/Header.tsx

@@ -34,10 +34,9 @@ declare module 'react-aria-components' {
  * @public
  */
 export const Header = (props: HeaderProps) => {
+  const { classNames, cleanedProps } = useStyles('Header', props);
   const { tabs, icon, title, titleLink, customActions, onTabSelectionChange } =
-    props;
-
-  const { classNames } = useStyles('Header');
+    cleanedProps;
 
   const hasTabs = tabs && tabs.length > 0;
 

packages/ui/src/components/Header/HeaderToolbar.tsx

@@ -30,8 +30,8 @@ import clsx from 'clsx';
  * @internal
  */
 export const HeaderToolbar = (props: HeaderToolbarProps) => {
-  const { icon, title, titleLink, customActions, hasTabs } = props;
-  const { classNames } = useStyles('Header');
+  const { classNames, cleanedProps } = useStyles('Header', props);
+  const { icon, title, titleLink, customActions, hasTabs } = cleanedProps;
   let navigate = useNavigate();
 
   // Refs for collision detection

packages/ui/src/components/HeaderPage/HeaderPage.tsx

@@ -31,8 +31,8 @@ import clsx from 'clsx';
  * @public
  */
 export const HeaderPage = (props: HeaderPageProps) => {
-  const { title, tabs, customActions, breadcrumbs } = props;
-  const { classNames } = useStyles('HeaderPage');
+  const { classNames, cleanedProps } = useStyles('HeaderPage', props);
+  const { title, tabs, customActions, breadcrumbs } = cleanedProps;
 
   return (
     <Container className={clsx(classNames.root, styles[classNames.root])}>

packages/ui/src/components/Icon/Icon.tsx

@@ -23,7 +23,8 @@ import styles from './Icon.module.css';
 
 /** @public */
 export const Icon = (props: IconProps) => {
-  const { name, size, className, style, ...restProps } = props;
+  const { classNames, cleanedProps } = useStyles('Icon', props);
+  const { name, size, className, style, ...restProps } = cleanedProps;
   const { icons } = useIcons();
 
   const BckstageIcon = icons[name] as ComponentType<Omit<IconProps, 'name'>>;
@@ -33,8 +34,6 @@ export const Icon = (props: IconProps) => {
     return null;
   }
 
-  const { classNames } = useStyles('Icon');
-
   return (
     <BckstageIcon
       className={clsx(classNames.root, styles[classNames.root], className)}

packages/ui/src/components/Link/Link.tsx

@@ -27,23 +27,19 @@ import stylesText from '../Text/Text.module.css';
 /** @public */
 export const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
   const navigate = useNavigate();
+  const { classNames: classNamesLink } = useStyles('Link', props);
   const {
-    className,
-    variant = 'body',
-    weight = 'regular',
-    color = 'primary',
-    truncate,
-    href,
-    ...restProps
-  } = props;
-
-  const { classNames: linkClassNames } = useStyles('Link');
-  const { classNames: textClassNames, dataAttributes: textDataAttributes } =
-    useStyles('Text', {
-      variant,
-      weight,
-      color,
-    });
+    classNames: classNamesText,
+    dataAttributes: textDataAttributes,
+    cleanedProps,
+  } = useStyles('Text', {
+    variant: 'body',
+    weight: 'regular',
+    color: 'primary',
+    ...props,
+  });
+  const { className, variant, weight, color, truncate, href, ...restProps } =
+    cleanedProps;
 
   const isExternal = isExternalLink(href);
 
@@ -53,10 +49,10 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
       <AriaLink
         ref={ref}
         className={clsx(
-          textClassNames.root,
-          linkClassNames.root,
-          stylesText[textClassNames.root],
-          stylesLink[linkClassNames.root],
+          classNamesText.root,
+          classNamesLink.root,
+          stylesText[classNamesText.root],
+          stylesLink[classNamesLink.root],
           className,
         )}
         data-truncate={truncate}
@@ -73,10 +69,10 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
       <AriaLink
         ref={ref}
         className={clsx(
-          textClassNames.root,
-          linkClassNames.root,
-          stylesText[textClassNames.root],
-          stylesLink[linkClassNames.root],
+          classNamesText.root,
+          classNamesLink.root,
+          stylesText[classNamesText.root],
+          stylesLink[classNamesLink.root],
           className,
         )}
         data-truncate={truncate}

packages/ui/src/components/Menu/Menu.tsx

@@ -84,14 +84,15 @@ export const SubmenuTrigger = (props: SubmenuTriggerProps) => {
 
 /** @public */
 export const Menu = (props: MenuProps<object>) => {
+  const { classNames, cleanedProps } = useStyles('Menu', props);
   const {
     placement = 'bottom start',
     virtualized = false,
     maxWidth,
     maxHeight,
     ...rest
-  } = props;
-  const { classNames } = useStyles('Menu');
+  } = cleanedProps;
+
   const navigate = useNavigate();
   let newMaxWidth = maxWidth || (virtualized ? '260px' : 'undefined');
   const popoverRef = useRef<HTMLDivElement>(null);
@@ -159,6 +160,7 @@ export const Menu = (props: MenuProps<object>) => {
 
 /** @public */
 export const MenuListBox = (props: MenuListBoxProps<object>) => {
+  const { classNames, cleanedProps } = useStyles('Menu', props);
   const {
     selectionMode = 'single',
     placement = 'bottom start',
@@ -166,8 +168,7 @@ export const MenuListBox = (props: MenuListBoxProps<object>) => {
     maxWidth,
     maxHeight,
     ...rest
-  } = props;
-  const { classNames } = useStyles('Menu');
+  } = cleanedProps;
   let newMaxWidth = maxWidth || (virtualized ? '260px' : 'undefined');
 
   const listBoxContent = (
@@ -202,14 +203,14 @@ export const MenuListBox = (props: MenuListBoxProps<object>) => {
 
 /** @public */
 export const MenuAutocomplete = (props: MenuAutocompleteProps<object>) => {
+  const { classNames, cleanedProps } = useStyles('Menu', props);
   const {
     placement = 'bottom start',
     virtualized = false,
     maxWidth,
     maxHeight,
     ...rest
-  } = props;
-  const { classNames } = useStyles('Menu');
+  } = cleanedProps;
   const { contains } = useFilter({ sensitivity: 'base' });
   let newMaxWidth = maxWidth || (virtualized ? '260px' : 'undefined');
   const navigate = useNavigate();
@@ -275,6 +276,7 @@ export const MenuAutocomplete = (props: MenuAutocompleteProps<object>) => {
 export const MenuAutocompleteListbox = (
   props: MenuAutocompleteListBoxProps<object>,
 ) => {
+  const { classNames, cleanedProps } = useStyles('Menu', props);
   const {
     selectionMode = 'single',
     placement = 'bottom start',
@@ -282,8 +284,7 @@ export const MenuAutocompleteListbox = (
     maxWidth,
     maxHeight,
     ...rest
-  } = props;
-  const { classNames } = useStyles('Menu');
+  } = cleanedProps;
   const { contains } = useFilter({ sensitivity: 'base' });
   let newMaxWidth = maxWidth || (virtualized ? '260px' : 'undefined');
 
@@ -345,8 +346,14 @@ export const MenuAutocompleteListbox = (
 
 /** @public */
 export const MenuItem = (props: MenuItemProps) => {
-  const { iconStart, color = 'primary', children, href, ...rest } = props;
-  const { classNames } = useStyles('Menu');
+  const { classNames, cleanedProps } = useStyles('Menu', props);
+  const {
+    iconStart,
+    color = 'primary',
+    children,
+    href,
+    ...rest
+  } = cleanedProps;
 
   const isLink = href !== undefined;
   const isExternal = isExternalLink(href);
@@ -417,8 +424,8 @@ export const MenuItem = (props: MenuItemProps) => {
 
 /** @public */
 export const MenuListBoxItem = (props: MenuListBoxItemProps) => {
-  const { children, ...rest } = props;
-  const { classNames } = useStyles('Menu');
+  const { classNames, cleanedProps } = useStyles('Menu', props);
+  const { children, ...rest } = cleanedProps;
 
   return (
     <RAListBoxItem
@@ -454,12 +461,13 @@ export const MenuListBoxItem = (props: MenuListBoxItemProps) => {
 
 /** @public */
 export const MenuSection = (props: MenuSectionProps<object>) => {
-  const { classNames } = useStyles('Menu');
+  const { classNames, cleanedProps } = useStyles('Menu', props);
+  const { children, title, ...rest } = cleanedProps;
 
   return (
     <RAMenuSection
       className={clsx(classNames.section, styles[classNames.section])}
-      {...props}
+      {...rest}
     >
       <RAMenuHeader
         className={clsx(
@@ -467,21 +475,21 @@ export const MenuSection = (props: MenuSectionProps<object>) => {
           styles[classNames.sectionHeader],
         )}
       >
-        {props.title}
+        {title}
       </RAMenuHeader>
-      {props.children}
+      {children}
     </RAMenuSection>
   );
 };
 
 /** @public */
 export const MenuSeparator = (props: MenuSeparatorProps) => {
-  const { classNames } = useStyles('Menu');
+  const { classNames, cleanedProps } = useStyles('Menu', props);
 
   return (
     <RAMenuSeparator
       className={clsx(classNames.separator, styles[classNames.separator])}
-      {...props}
+      {...cleanedProps}
     />
   );
 };

packages/ui/src/components/PasswordField/PasswordField.tsx

@@ -47,18 +47,22 @@ export const PasswordField = forwardRef<HTMLDivElement, PasswordFieldProps>(
       }
     }, [label, ariaLabel, ariaLabelledBy]);
 
-    const { classNames: textFieldClassNames } = useStyles('TextField', {});
+    const { classNames: textFieldClassNames } = useStyles('TextField');
 
     const {
-      classNames: passwordFieldClassNames,
+      classNames: classNamesPasswordField,
       dataAttributes,
-      style,
       cleanedProps,
     } = useStyles('PasswordField', {
       size: 'small',
       ...props,
     });
 
+    console.log({
+      size: 'small',
+      ...props,
+    });
+
     const {
       className,
       description,
@@ -79,15 +83,14 @@ export const PasswordField = forwardRef<HTMLDivElement, PasswordFieldProps>(
     return (
       <AriaTextField
         className={clsx(
-          passwordFieldClassNames.root,
-          stylesPasswordField[passwordFieldClassNames.root],
+          classNamesPasswordField.root,
+          stylesPasswordField[classNamesPasswordField.root],
           className,
         )}
         {...dataAttributes}
         aria-label={ariaLabel}
         aria-labelledby={ariaLabelledBy}
         type="password"
-        style={style}
         {...rest}
         ref={ref}
       >
@@ -129,8 +132,8 @@ export const PasswordField = forwardRef<HTMLDivElement, PasswordFieldProps>(
               aria-expanded={isVisible}
               onPress={() => setIsVisible(v => !v)}
               className={clsx(
-                passwordFieldClassNames.inputVisibility,
-                stylesPasswordField[passwordFieldClassNames.inputVisibility],
+                classNamesPasswordField.inputVisibility,
+                stylesPasswordField[classNamesPasswordField.inputVisibility],
               )}
             >
               {isVisible ? <RiEyeLine /> : <RiEyeOffLine />}

packages/ui/src/components/RadioGroup/RadioGroup.tsx

@@ -30,6 +30,7 @@ import type { RadioGroupProps, RadioProps } from './types';
 /** @public */
 export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
   (props, ref) => {
+    const { classNames, cleanedProps } = useStyles('RadioGroup', props);
     const {
       className,
       label,
@@ -40,9 +41,7 @@ export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
       'aria-labelledby': ariaLabelledBy,
       children,
       ...rest
-    } = props;
-
-    const { classNames } = useStyles('RadioGroup');
+    } = cleanedProps;
 
     useEffect(() => {
       if (!label && !ariaLabel && !ariaLabelledBy) {

packages/ui/src/components/Select/Select.tsx

@@ -35,13 +35,20 @@ import stylesPopover from '../Popover/Popover.module.css';
 
 /** @public */
 export const Select = forwardRef<HTMLDivElement, SelectProps>((props, ref) => {
+  const { classNames: popoverClassNames } = useStyles('Popover');
+  const { classNames, dataAttributes, cleanedProps } = useStyles('Select', {
+    size: 'small',
+    placeholder: 'Select an option',
+    ...props,
+  });
+
   const {
     className,
     label,
     description,
     options,
-    placeholder = 'Select an option',
-    size = 'small',
+    placeholder,
+    size,
     icon,
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy,
@@ -49,12 +56,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>((props, ref) => {
     secondaryLabel,
     style,
     ...rest
-  } = props;
-
-  const { classNames: popoverClassNames } = useStyles('Popover');
-  const { classNames, dataAttributes } = useStyles('Select', {
-    size,
-  });
+  } = cleanedProps;
 
   useEffect(() => {
     if (!label && !ariaLabel && !ariaLabelledBy) {

packages/ui/src/components/Skeleton/Skeleton.tsx

@@ -21,8 +21,13 @@ import clsx from 'clsx';
 
 /** @public */
 export const Skeleton = (props: SkeletonProps) => {
-  const { width = 80, height = 24, rounded = false, ...rest } = props;
-  const { classNames } = useStyles('Skeleton');
+  const { classNames, cleanedProps } = useStyles('Skeleton', {
+    width: 80,
+    height: 24,
+    rounded: false,
+    ...props,
+  });
+  const { width, height, rounded, style, ...rest } = cleanedProps;
 
   return (
     <div
@@ -31,6 +36,7 @@ export const Skeleton = (props: SkeletonProps) => {
       style={{
         width,
         height,
+        ...style,
       }}
       {...rest}
     />

packages/ui/src/components/Switch/Switch.tsx

@@ -23,14 +23,15 @@ import clsx from 'clsx';
 
 /** @public */
 export const Switch = forwardRef<HTMLLabelElement, SwitchProps>(
-  ({ label, ...props }, ref) => {
-    const { classNames } = useStyles('Switch');
+  (props, ref) => {
+    const { classNames, cleanedProps } = useStyles('Switch', props);
+    const { label, ...rest } = cleanedProps;
 
     return (
       <AriaSwitch
         className={clsx(classNames.root, styles[classNames.root])}
         ref={ref}
-        {...props}
+        {...rest}
       >
         <div
           className={clsx(classNames.indicator, styles[classNames.indicator])}

packages/ui/src/components/Text/Text.tsx

@@ -22,32 +22,24 @@ import { useStyles } from '../../hooks/useStyles';
 import styles from './Text.module.css';
 
 function TextComponent<T extends ElementType = 'span'>(
-  {
-    as,
-    variant = 'body-medium',
-    weight = 'regular',
-    color = 'primary',
-    className,
-    truncate,
-    style,
-    ...restProps
-  }: TextProps<T>,
+  props: TextProps<T>,
   ref: React.Ref<any>,
 ) {
-  const Component = as || 'span';
+  const Component = props.as || 'span';
 
-  const { classNames, dataAttributes } = useStyles('Text', {
-    variant,
-    weight,
-    color,
+  const { classNames, dataAttributes, cleanedProps } = useStyles('Text', {
+    variant: 'body-medium',
+    weight: 'regular',
+    color: 'primary',
+    ...props,
   });
 
+  const { className, style, ...restProps } = cleanedProps;
+
   return (
     <Component
       ref={ref}
       className={clsx(classNames.root, styles[classNames.root], className)}
-      data-truncate={truncate}
-      data-as={as}
       {...dataAttributes}
       style={style}
       {...restProps}

packages/ui/src/components/Tooltip/Tooltip.tsx

@@ -35,8 +35,9 @@ export const TooltipTrigger = (props: TooltipTriggerComponentProps) => {
 
 /** @public */
 export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
-  ({ className, children, ...rest }, ref) => {
-    const { classNames } = useStyles('Tooltip');
+  (props, ref) => {
+    const { classNames, cleanedProps } = useStyles('Tooltip', props);
+    const { className, children, ...rest } = cleanedProps;
 
     return (
       <AriaTooltip

packages/ui/src/hooks/useStyles.ts

@@ -59,15 +59,18 @@ function resolveResponsiveValue(
  * @param props - All component props
  * @returns Object with classNames, dataAttributes, utilityClasses, style, and cleanedProps
  */
-export function useStyles<T extends ComponentDefinitionName>(
+export function useStyles<
+  T extends ComponentDefinitionName,
+  P extends Record<string, any> = Record<string, any>,
+>(
   componentName: T,
-  props: Record<string, any> = {},
+  props: P = {} as P,
 ): {
   classNames: ComponentClassNames<T>;
   dataAttributes: Record<string, string>;
   utilityClasses: string;
   style: React.CSSProperties;
-  cleanedProps: Record<string, any>;
+  cleanedProps: P;
 } {
   const { breakpoint } = useBreakpoint();
   const componentDefinition = componentDefinitions[componentName];
@@ -168,20 +171,16 @@ export function useStyles<T extends ComponentDefinitionName>(
     }
   }
 
-  // Create cleaned props by excluding data attributes, utility props, and style
-  // Component-specific props like 'as' and 'children' remain in cleanedProps
-  const processedKeys = new Set([
-    ...dataAttributeNames,
-    ...utilityPropNames,
-    'style',
-  ]);
+  // Create cleaned props by excluding only utility props
+  // All other props (including data attributes, style, children, etc.) remain
+  const utilityPropsSet = new Set<string>(utilityPropNames);
 
-  const cleanedProps = Object.keys(props).reduce((acc, key) => {
-    if (!processedKeys.has(key)) {
+  const cleanedPropsBase = Object.keys(props).reduce((acc, key) => {
+    if (!utilityPropsSet.has(key)) {
       acc[key] = props[key];
     }
     return acc;
-  }, {} as Record<string, any>);
+  }, {} as any);
 
   // Merge incoming style with generated styles (incoming styles take precedence)
   const mergedStyle = {
@@ -189,6 +188,12 @@ export function useStyles<T extends ComponentDefinitionName>(
     ...incomingStyle,
   };
 
+  // Add merged style to cleanedProps
+  const cleanedProps = {
+    ...cleanedPropsBase,
+    style: mergedStyle,
+  } as P;
+
   return {
     classNames,
     dataAttributes,