feat(checkbox): basic checkbox component, checkbox disabled and defau…

…lt checked examples

packages/components/checkbox/src/Checkbox.stories.mdx

@@ -28,6 +28,11 @@ import { Checkbox } from "@spark-ui/checkbox"
 
 <ArgsTable of={Checkbox} />
 
-<StoryHeading label="Variants" />
+<StoryHeading label="Usage" />
+<Story name="Usage" story={stories.Default} />
 
-<Story name="default" story={stories.Default} />
+<StoryHeading label="Disabled" />
+<Story name="Disabled" story={stories.Disabled} />
+
+<StoryHeading label="DefaultChecked" />
+<Story name="DefaultChecked" story={stories.DefaultChecked} />

packages/components/checkbox/src/Checkbox.stories.tsx

@@ -1,12 +1,21 @@
 import { ReactLiveBlock } from '@docs/helpers/ReactLiveBlock'
 
-import { Checkbox } from '.'
+import { Checkbox } from './Checkbox'
 
-export const Default = () => (
+export const Default = ({ id = 'c1', ...rest }) => (
   <ReactLiveBlock scope={{ Checkbox }}>
     <div className="flex items-center gap-sm">
-      <Checkbox id="c1" />
-      <label htmlFor="c1">Accept terms and conditions.</label>
+      <Checkbox id={id} {...rest} />
+      <label
+        htmlFor={id}
+        className="cursor-pointer pl-[4px] text-body-1 font-medium peer-disabled:cursor-not-allowed  peer-disabled:opacity-50"
+      >
+        Accept terms and conditions.
+      </label>
     </div>
   </ReactLiveBlock>
 )
+
+export const Disabled = () => <Default id={'c2'} disabled={true} />
+
+export const DefaultChecked = () => <Default id={'c3'} defaultChecked />

packages/components/checkbox/src/Checkbox.tsx

@@ -1,15 +1,28 @@
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
-import React from 'react'
+import React, { SVGProps } from 'react'
+
+import { styles } from './Checkbox.variants'
 
 export type CheckboxProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
 
 export const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
   CheckboxProps
->(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root ref={ref} {...props}>
-    <CheckboxPrimitive.Indicator>
-      <span>✅</span>
+>(({ ...props }, ref) => (
+  <CheckboxPrimitive.Root ref={ref} className={styles()} {...props}>
+    <CheckboxPrimitive.Indicator className="flex items-center justify-center text-surface">
+      <CheckIcon />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ))
+
+const CheckIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg width={14} height={10} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5.645 9.696a1.076 1.076 0 0 1-1.499 0L.288 5.956A1.023 1.023 0 0 1 .31 4.511a1.077 1.077 0 0 1 1.476-.022l3.061 2.998 7.319-7.16a1.075 1.075 0 0 1 1.037-.294c.374.094.666.38.763.747.096.367-.02.756-.301 1.015l-8.02 7.901Z"
+      fill="currentColor"
+    />
+  </svg>
+)

packages/components/checkbox/src/Checkbox.variants.tsx

@@ -0,0 +1,12 @@
+import { cva, VariantProps } from 'class-variance-authority'
+
+export const styles = cva([
+  'peer h-[20px] w-[20px] rounded-sm border-md border-outline bg-transparent items-center justify-center',
+  'radix-state-checked:bg-primary radix-state-checked:border-primary',
+  'radix-state-indeterminate:bg-primary radix-state-indeterminate:border-primary',
+  'focus:outline-none focus:ring-2 focus:ring focus:ring-offset-0 focus:ring-[#000000]',
+  'hover:outline-none hover:ring-2 hover:ring hover:ring-offset-0',
+  'radix-disabled:opacity-50 radix-disabled:cursor-not-allowed radix-disabled:hover:ring-0',
+])
+
+export type StylesProps = VariantProps<typeof styles>