Migrate Checkbox component from useStyles to useDefinition

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

packages/ui/report.api.md

@@ -5,7 +5,7 @@
 ```ts
 import type { ButtonProps as ButtonProps_2 } from 'react-aria-components';
 import { CellProps as CellProps_2 } from 'react-aria-components';
-import { CheckboxProps as CheckboxProps_2 } from 'react-aria-components';
+import type { CheckboxProps as CheckboxProps_2 } from 'react-aria-components';
 import { ColumnProps as ColumnProps_2 } from 'react-aria-components';
 import type { ColumnSize } from '@react-types/table';
 import type { ColumnStaticSize } from '@react-types/table';
@@ -730,21 +730,39 @@ export const Checkbox: ForwardRefExoticComponent<
 
 // @public
 export const CheckboxDefinition: {
+  readonly styles: {
+    readonly [key: string]: string;
+  };
   readonly classNames: {
     readonly root: 'bui-Checkbox';
     readonly indicator: 'bui-CheckboxIndicator';
   };
-  readonly dataAttributes: {
-    readonly selected: readonly [true, false];
-    readonly indeterminate: readonly [true, false];
+  readonly propDefs: {
+    readonly selected: {
+      readonly dataAttribute: true;
+    };
+    readonly indeterminate: {
+      readonly dataAttribute: true;
+    };
+    readonly children: {};
+    readonly className: {};
+    readonly style: {};
   };
 };
 
 // @public (undocumented)
-export interface CheckboxProps extends CheckboxProps_2 {
-  // (undocumented)
+export type CheckboxOwnProps = {
+  selected?: boolean;
+  indeterminate?: boolean;
   children: React.ReactNode;
-}
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+// @public (undocumented)
+export interface CheckboxProps
+  extends Omit<CheckboxProps_2, 'children' | 'className' | 'style'>,
+    CheckboxOwnProps {}
 
 // @public
 export type ClassNamesMap = Record<string, string>;

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

@@ -17,32 +17,29 @@
 import { forwardRef } from 'react';
 import { Checkbox as RACheckbox } from 'react-aria-components';
 import type { CheckboxProps } from './types';
-import { useStyles } from '../../hooks/useStyles';
+import { useDefinition } from '../../hooks/useDefinition';
 import { CheckboxDefinition } from './definition';
-import clsx from 'clsx';
-import styles from './Checkbox.module.css';
 import { RiCheckLine, RiSubtractLine } from '@remixicon/react';
 
 /** @public */
 export const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(
   (props, ref) => {
-    const { classNames } = useStyles(CheckboxDefinition);
-    const { className, children, ...rest } = props;
+    const { ownProps, restProps, dataAttributes } = useDefinition(
+      CheckboxDefinition,
+      props,
+    );
+    const { classes, children } = ownProps;
 
     return (
       <RACheckbox
         ref={ref}
-        className={clsx(classNames.root, styles[classNames.root], className)}
-        {...rest}
+        className={classes.root}
+        {...dataAttributes}
+        {...restProps}
       >
         {({ isIndeterminate }) => (
           <>
-            <div
-              className={clsx(
-                classNames.indicator,
-                styles[classNames.indicator],
-              )}
-            >
+            <div className={classes.indicator}>
               {isIndeterminate ? (
                 <RiSubtractLine size={12} />
               ) : (

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

@@ -14,19 +14,25 @@
  * limitations under the License.
  */
 
-import type { ComponentDefinition } from '../../types';
+import { defineComponent } from '../../hooks/useDefinition';
+import type { CheckboxOwnProps } from './types';
+import styles from './Checkbox.module.css';
 
 /**
  * Component definition for Checkbox
  * @public
  */
-export const CheckboxDefinition = {
+export const CheckboxDefinition = defineComponent<CheckboxOwnProps>()({
+  styles,
   classNames: {
     root: 'bui-Checkbox',
     indicator: 'bui-CheckboxIndicator',
   },
-  dataAttributes: {
-    selected: [true, false] as const,
-    indeterminate: [true, false] as const,
+  propDefs: {
+    selected: { dataAttribute: true },
+    indeterminate: { dataAttribute: true },
+    children: {},
+    className: {},
+    style: {},
   },
-} as const satisfies ComponentDefinition;
+});

packages/ui/src/components/Checkbox/index.ts

@@ -15,4 +15,4 @@
  */
 export { Checkbox } from './Checkbox';
 export { CheckboxDefinition } from './definition';
-export type { CheckboxProps } from './types';
+export type { CheckboxOwnProps, CheckboxProps } from './types';

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

@@ -13,9 +13,18 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { CheckboxProps as RACheckboxProps } from 'react-aria-components';
+import type { CheckboxProps as RACheckboxProps } from 'react-aria-components';
 
 /** @public */
-export interface CheckboxProps extends RACheckboxProps {
+export type CheckboxOwnProps = {
+  selected?: boolean;
+  indeterminate?: boolean;
   children: React.ReactNode;
-}
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+/** @public */
+export interface CheckboxProps
+  extends Omit<RACheckboxProps, 'children' | 'className' | 'style'>,
+    CheckboxOwnProps {}