Migrate Switch component from useStyles to useDefinition

Signed-off-by: Johan Persson <johanopersson@gmail.com>

packages/ui/report.api.md

@@ -1904,16 +1904,29 @@ export const Switch: ForwardRefExoticComponent<
 
 // @public
 export const SwitchDefinition: {
+  readonly styles: {
+    readonly [key: string]: string;
+  };
   readonly classNames: {
     readonly root: 'bui-Switch';
     readonly indicator: 'bui-SwitchIndicator';
   };
+  readonly propDefs: {
+    readonly label: {};
+    readonly className: {};
+  };
 };
 
 // @public (undocumented)
-export interface SwitchProps extends SwitchProps_2 {
+export type SwitchOwnProps = {
   label?: string;
-}
+  className?: string;
+};
+
+// @public (undocumented)
+export interface SwitchProps
+  extends Omit<SwitchProps_2, 'className'>,
+    SwitchOwnProps {}
 
 // @public
 export const Tab: (props: TabProps) => JSX_2.Element;

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

@@ -17,26 +17,18 @@
 import { forwardRef } from 'react';
 import { Switch as AriaSwitch } from 'react-aria-components';
 import type { SwitchProps } from './types';
-import { useStyles } from '../../hooks/useStyles';
+import { useDefinition } from '../../hooks/useDefinition';
 import { SwitchDefinition } from './definition';
-import styles from './Switch.module.css';
-import clsx from 'clsx';
 
 /** @public */
 export const Switch = forwardRef<HTMLLabelElement, SwitchProps>(
   (props, ref) => {
-    const { classNames, cleanedProps } = useStyles(SwitchDefinition, props);
-    const { className, label, ...rest } = cleanedProps;
+    const { ownProps, restProps } = useDefinition(SwitchDefinition, props);
+    const { classes, label } = ownProps;
 
     return (
-      <AriaSwitch
-        className={clsx(classNames.root, styles[classNames.root], className)}
-        ref={ref}
-        {...rest}
-      >
-        <div
-          className={clsx(classNames.indicator, styles[classNames.indicator])}
-        />
+      <AriaSwitch className={classes.root} ref={ref} {...restProps}>
+        <div className={classes.indicator} />
         {label}
       </AriaSwitch>
     );

packages/ui/src/components/Switch/definition.ts

@@ -14,15 +14,22 @@
  * limitations under the License.
  */
 
-import type { ComponentDefinition } from '../../types';
+import { defineComponent } from '../../hooks/useDefinition';
+import type { SwitchOwnProps } from './types';
+import styles from './Switch.module.css';
 
 /**
  * Component definition for Switch
  * @public
  */
-export const SwitchDefinition = {
+export const SwitchDefinition = defineComponent<SwitchOwnProps>()({
+  styles,
   classNames: {
     root: 'bui-Switch',
     indicator: 'bui-SwitchIndicator',
   },
-} as const satisfies ComponentDefinition;
+  propDefs: {
+    label: {},
+    className: {},
+  },
+});

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

@@ -17,9 +17,15 @@
 import type { SwitchProps as AriaSwitchProps } from 'react-aria-components';
 
 /** @public */
-export interface SwitchProps extends AriaSwitchProps {
+export type SwitchOwnProps = {
   /**
    * The label of the switch
    */
   label?: string;
-}
+  className?: string;
+};
+
+/** @public */
+export interface SwitchProps
+  extends Omit<AriaSwitchProps, 'className'>,
+    SwitchOwnProps {}