From 81835d38c2e026939bb70dafb488f330bc6c4848 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Fri, 20 Jun 2025 16:51:40 +0100
Subject: [PATCH] Add Checkbox

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../src/components/Checkbox/Checkbox.tsx      |  5 +++-
 .../canon/src/utils/componentDefinitions.ts   | 25 ++++++++-----------
 2 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/packages/canon/src/components/Checkbox/Checkbox.tsx b/packages/canon/src/components/Checkbox/Checkbox.tsx
index 5bf6520891..8fbb4d40af 100644
--- a/packages/canon/src/components/Checkbox/Checkbox.tsx
+++ b/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}
diff --git a/packages/canon/src/utils/componentDefinitions.ts b/packages/canon/src/utils/componentDefinitions.ts
index 009b61c9f0..1c49a94b9c 100644
--- a/packages/canon/src/utils/componentDefinitions.ts
+++ b/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',