add new Checkbox component

Author: javiert-okta

src/features/common/components/checkbox/checkbox.component.tsx

@@ -0,0 +1,28 @@
+import { Checkbox, type CheckboxProps } from "react-aria-components";
+import styles from './checkbox.module.scss'
+
+export function CheckboxComponent({
+  children,
+  ...props
+}: Omit<CheckboxProps, "children"> & {
+  children?: React.ReactNode;
+}) {
+  return (
+    <Checkbox {...props} className={styles.checkbox__component}>
+      {({ isIndeterminate }) => (
+        <>
+          <div className={styles.checkbox}>
+            <svg viewBox="0 0 18 18" aria-hidden="true">
+              {isIndeterminate ? (
+                <rect x={1} y={7.5} width={15} height={3} />
+              ) : (
+                <polyline points="1 9 7 14 15 4" />
+              )}
+            </svg>
+          </div>
+          {children}
+        </>
+      )}
+    </Checkbox>
+  );
+}

src/features/common/components/checkbox/checkbox.module.scss

@@ -0,0 +1,66 @@
+.checkbox__component {
+  --selected-color: var(--color_bg_state_success);
+  --selected-color-pressed: var(--color_fg_on_state_success_subtle);
+  --checkmark-color: var(--color_border_state_success);
+
+  display: flex;
+  /* This is needed so the HiddenInput is positioned correctly */
+  position: relative;
+  align-items: center;
+  gap: 0.571rem;
+  font-size: 1.143rem;
+  color: white;
+  forced-color-adjust: none;
+
+  .checkbox {
+    width: 1.143rem;
+    height: 1.143rem;
+    border: 2px solid var(--color_fg_default);
+    border-radius: 4px;
+    transition: all 200ms;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+    fill: none;
+    stroke: var(--functional-gray-0);
+    stroke-width: 3px;
+    stroke-dasharray: 22px;
+    stroke-dashoffset: 66;
+    transition: all 200ms;
+  }
+
+  &[data-focus-visible] .checkbox {
+    outline: 2px solid var(--color_fg_selected);
+    outline-offset: 2px;
+  }
+
+  &[data-selected],
+  &[data-indeterminate] {
+    .checkbox {
+      border-color: var(--selected-color);
+      background: var(--selected-color);
+    }
+
+    &[data-pressed] .checkbox {
+      border-color: var(--selected-color-pressed);
+      background: var(--selected-color-pressed);
+    }
+
+    svg {
+      stroke-dashoffset: 44;
+    }
+  }
+
+  &[data-indeterminate] {
+    & svg {
+      stroke: none;
+      fill: var(--checkmark-color);
+    }
+  }
+}