Add Checkbox

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

packages/canon/src/components/Checkbox/Checkbox.tsx

@@ -18,6 +18,7 @@ import { forwardRef } from 'react';
 import { Checkbox as CheckboxPrimitive } from '@base-ui-components/react/checkbox';
 import { Icon } from '@backstage/canon';
 import type { CheckboxProps } from './types';
+import { useStyles } from '../../hooks/useStyles';
 import clsx from 'clsx';
 
 /** @public */
@@ -35,10 +36,12 @@ export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
       style,
     } = props;
 
+    const { classNames } = useStyles('Checkbox');
+
     const checkboxElement = (
       <CheckboxPrimitive.Root
         ref={ref}
-        className={clsx('canon-CheckboxRoot', className)}
+        className={clsx(classNames.root, className)}
         checked={checked}
         onCheckedChange={onChange}
         disabled={disabled}

packages/canon/src/utils/componentDefinitions.ts

@@ -55,7 +55,16 @@ export const componentDefinitions = {
       root: 'canon-ButtonLink',
     },
   },
-
+  Checkbox: {
+    classNames: {
+      root: 'canon-CheckboxRoot',
+      label: 'canon-CheckboxLabel',
+      indicator: 'canon-CheckboxIndicator',
+    },
+    dataAttributes: {
+      checked: [true, false] as const,
+    },
+  },
   Container: {
     classNames: {
       root: 'canon-Container',
@@ -140,20 +149,6 @@ export const componentDefinitions = {
     },
   },
 
-  Checkbox: {
-    classNames: {
-      root: 'canon-Checkbox',
-      input: 'canon-Checkbox-input',
-      indicator: 'canon-Checkbox-indicator',
-      label: 'canon-Checkbox-label',
-    },
-    dataAttributes: {
-      checked: [true, false] as const,
-      indeterminate: [true, false] as const,
-      disabled: [true, false] as const,
-    },
-  },
-
   Switch: {
     classNames: {
       root: 'canon-Switch',