{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox",
  "title": "Checkbox",
  "description": "Checkbox on radix-ui with 4 tones (neutral, brand, success, danger) and 3 sizes (sm, md, lg). Invalid state via aria-invalid.",
  "dependencies": [
    "class-variance-authority@^0.7.1",
    "radix-ui@^1.6.1",
    "lucide-react@^1.23.0"
  ],
  "registryDependencies": [
    "@ai2/tokens",
    "@ai2/primitives"
  ],
  "files": [
    {
      "path": "registry/ai2/ui/checkbox.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\nimport { Check } from \"lucide-react\"\nimport { Checkbox as CheckboxPrimitive } from \"@/registry/ai2/ui/primitives\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst checkboxVariants = cva(\n  \"peer relative shrink-0 rounded-[0.28rem] border border-field-border shadow-xs outline-none transition-colors duration-(--motion-fast) after:absolute after:-inset-1.5 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger aria-invalid:ring-danger/20 dark:aria-invalid:ring-danger/40 dark:bg-input/30\",\n  {\n    variants: {\n      tone: {\n        neutral: \"data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\",\n        brand: \"data-[state=checked]:border-brand data-[state=checked]:bg-brand data-[state=checked]:text-brand-foreground\",\n        success: \"data-[state=checked]:border-success data-[state=checked]:bg-success data-[state=checked]:text-success-foreground\",\n        danger: \"data-[state=checked]:border-danger data-[state=checked]:bg-danger data-[state=checked]:text-danger-foreground\",\n      },\n      size: {\n        sm: \"size-3.5\",\n        md: \"size-4\",\n        lg: \"size-5\",\n      },\n    },\n    defaultVariants: { tone: \"neutral\", size: \"md\" },\n  }\n)\n\ninterface CheckboxProps\n  extends React.ComponentProps<typeof CheckboxPrimitive.Root>,\n    VariantProps<typeof checkboxVariants> {}\n\nfunction Checkbox({ className, tone, size, ...props }: CheckboxProps) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      data-tone={tone ?? \"neutral\"}\n      className={cn(checkboxVariants({ tone, size, className }))}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"flex items-center justify-center text-current\"\n      >\n        <Check className=\"size-[0.85em] stroke-[3]\" />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox, checkboxVariants, type CheckboxProps }\n",
      "type": "registry:ui"
    }
  ],
  "docs": "tone sets the checked fill color. Use inside a Label for a clickable row.",
  "categories": [
    "form"
  ],
  "type": "registry:ui"
}