audit: checkbox

apps/web/vibes/soul/examples.ts

@@ -5,6 +5,13 @@ import 'server-only';
 import { Components } from '@/vibes/schema';
 
 export const examples = [
+  {
+    name: 'checkbox-example',
+    dependencies: [],
+    registryDependencies: ['checkbox'],
+    files: ['examples/form/checkbox/index.tsx'],
+    component: lazy(() => import('./examples/form/checkbox')),
+  },
   {
     name: 'accordion-example',
     dependencies: [],
@@ -194,27 +201,13 @@ export const examples = [
     files: ['examples/sections/cart/luxury.tsx'],
     component: lazy(() => import('./examples/sections/cart/luxury')),
   },
-  {
-    name: 'checkbox-example',
-    dependencies: [],
-    registryDependencies: ['checkbox'],
-    files: ['examples/primitives/checkbox/index.tsx'],
-    component: lazy(() => import('./examples/primitives/checkbox')),
-  },
   {
     name: 'chip-example',
     dependencies: [],
     registryDependencies: ['chip'],
     files: ['examples/primitives/chip/index.tsx'],
     component: lazy(() => import('./examples/primitives/chip')),
   },
-  {
-    name: 'checkout-example',
-    dependencies: [],
-    registryDependencies: ['checkout'],
-    files: ['examples/sections/checkout/index.tsx'],
-    component: lazy(() => import('./examples/sections/checkout')),
-  },
   {
     name: 'compare-section-electric-example',
     dependencies: [],

apps/web/vibes/soul/examples/form/checkbox/index.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import { Checkbox } from '@/vibes/soul/form/checkbox';
+
+export default function Preview() {
+  return (
+    <div className="flex h-screen flex-col justify-center gap-4 p-10">
+      <Checkbox label="Checkbox" />
+      <Checkbox
+        errors={['You must accept the Terms & Conditions']}
+        label="Accept Terms & Conditions"
+      />
+    </div>
+  );
+}

apps/web/vibes/soul/form/checkbox/index.tsx

@@ -4,15 +4,15 @@ import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { clsx } from 'clsx';
 import { Check } from 'lucide-react';
-import * as React from 'react';
+import { ComponentPropsWithoutRef, ReactNode, useId } from 'react';
 
 import { FieldError } from '@/vibes/soul/form/field-error';
 
-type Props = Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, 'id'> & {
-  label?: React.ReactNode;
+export interface CheckboxProps extends ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
+  label?: ReactNode;
   errors?: string[];
   colorScheme?: 'light' | 'dark';
-};
+}
 
 /**
  * This component supports various CSS variables for theming. Here's a comprehensive list, along
@@ -41,19 +41,31 @@ type Props = Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
  *    --checkbox-dark-checked-border-hover: hsl(var(--background));
  *    --checkbox-dark-checked-background: hsl(var(--foreground));
  *    --checkbox-dark-checked-icon: hsl(var(--foreground));
+ *    --checkbox-font-family: var(--font-family-body);
  *  }
  * ```
  */
-export function Checkbox({ label, errors, className, colorScheme = 'light', ...rest }: Props) {
-  const id = React.useId();
-  const labelId = `${id}-label`;
+export function Checkbox({
+  id,
+  label,
+  errors,
+  className,
+  colorScheme = 'light',
+  ...props
+}: CheckboxProps) {
+  const generatedId = useId();
 
   return (
     <div className="space-y-2">
-      <div className={clsx('flex items-center gap-3', className)}>
+      <div
+        className={clsx(
+          'flex items-center gap-2 font-[family-name:var(--checkbox-font-family,var(--font-family-body))]',
+          className,
+        )}
+      >
         <CheckboxPrimitive.Root
-          {...rest}
-          aria-labelledby={labelId}
+          {...props}
+          aria-labelledby={id !== undefined ? `${id}-label` : `${generatedId}-label`}
           className={clsx(
             'flex h-5 w-5 items-center justify-center rounded-md border transition-colors duration-150 focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-[var(--checkbox-focus,hsl(var(--primary)))]',
             {
@@ -67,7 +79,7 @@ export function Checkbox({ label, errors, className, colorScheme = 'light', ...r
                   : 'data-[state=checked]:border-[var(--checkbox-dark-checked-border,hsl(var(--background)))] data-[state=unchecked]:border-[var(--checkbox-dark-unchecked-border,hsl(var(--contrast-400)))] data-[state=checked]:bg-[var(--checkbox-dark-checked-background,hsl(var(--foreground)))] data-[state=unchecked]:bg-[var(--checkbox-dark-unchecked-background,hsl(var(--foreground)))] data-[state=checked]:text-[var(--checkbox-dark-checked-text,hsl(var(--background)))] data-[state=unchecked]:text-[var(--checkbox-dark-unchecked-text,hsl(var(--background)))] data-[state=checked]:hover:border-[var(--checkbox-dark-checked-border-hover,hsl(var(--background)))] data-[state=unchecked]:hover:border-[var(--checkbox-dark-unchecked-border-hover,hsl(var(--contrast-300)))]',
             }[colorScheme],
           )}
-          id={id}
+          id={id ?? generatedId}
         >
           <CheckboxPrimitive.Indicator>
             <Check className="h-4 w-4" color="currentColor" />
@@ -77,14 +89,14 @@ export function Checkbox({ label, errors, className, colorScheme = 'light', ...r
         {label != null && label !== '' && (
           <LabelPrimitive.Root
             className={clsx(
-              'cursor-pointer font-body text-sm',
+              'cursor-pointer text-sm',
               {
                 light: 'text-[var(--checkbox-light-label,hsl(var(--foreground)))]',
                 dark: 'text-[var(--checkbox-dark-label,hsl(var(--background)))]',
               }[colorScheme],
             )}
-            htmlFor={id}
-            id={labelId}
+            htmlFor={id ?? generatedId}
+            id={id !== undefined ? `${id}-label` : `${generatedId}-label`}
           >
             {label}
           </LabelPrimitive.Root>

apps/web/vibes/soul/navigation.ts

@@ -87,7 +87,6 @@ export const navigation = [
         file: 'docs/carousel.mdx',
         component: 'carousel',
       },
-      { title: 'Checkbox', slug: 'checkbox', file: 'docs/checkbox.mdx', component: 'checkbox' },
       { title: 'Chip', slug: 'chip', file: 'docs/chip.mdx', component: 'chip' },
       { title: 'Countdown', slug: 'countdown', file: 'docs/countdown.mdx', component: 'countdown' },
       { title: 'Counter', slug: 'counter', file: 'docs/counter.mdx', component: 'counter' },
@@ -164,6 +163,13 @@ export const navigation = [
       },
     ],
   },
+  {
+    title: 'Form',
+    pages: [
+      { title: 'Example', slug: 'form', file: 'docs/form.mdx' },
+      { title: 'Checkbox', slug: 'checkbox', file: 'docs/checkbox.mdx' },
+    ],
+  },
   {
     title: 'Sections',
     pages: [
@@ -186,7 +192,6 @@ export const navigation = [
         file: 'docs/card-carousel.mdx',
         component: 'card-carousel',
       },
-      { title: 'Checkout', slug: 'checkout', file: 'docs/checkout.mdx', component: 'checkout' },
       {
         title: 'Compare Section',
         slug: 'compare-section',
@@ -357,8 +362,4 @@ export const navigation = [
       },
     ],
   },
-  {
-    title: 'Form',
-    pages: [{ title: 'Example', slug: 'form', file: 'docs/form.mdx' }],
-  },
 ] satisfies Navigation;

apps/web/vibes/soul/primitives.ts

@@ -75,9 +75,9 @@ export const primitives = [
   },
   {
     name: 'checkbox',
-    dependencies: ['clsx', 'lucide-react', '@radix-ui/react-checkbox'],
+    dependencies: ['@radix-ui/react-checkbox', '@radix-ui/react-label', 'lucide-react', 'clsx'],
     registryDependencies: [],
-    files: ['primitives/checkbox/index.tsx'],
+    files: ['form/checkbox/index.tsx'],
   },
   {
     name: 'counter',

apps/web/vibes/soul/sections.ts

@@ -37,12 +37,6 @@ export const sections = [
     registryDependencies: ['button', 'counter'],
     files: ['sections/cart/index.tsx'],
   },
-  {
-    name: 'checkout',
-    dependencies: [],
-    registryDependencies: [],
-    files: ['sections/checkout/index.tsx'],
-  },
   {
     name: 'countdown',
     dependencies: ['clsx', 'lucide-react'],