{
  "$schema": "https://ethereal-ui.saefulrohman.dev/schema/registry-item.json",
  "name": "checkbox",
  "title": "Checkbox",
  "type": "registry:primitives",
  "description": "Accessible Radix UI checkbox control for forms, bulk table row selection, and filter lists.",
  "dependencies": [
    "@radix-ui/react-checkbox",
    "lucide-react"
  ],
  "usage": "import { Checkbox } from \"@etherealui/react\"\n\nexport function CheckboxDemo() {\n  return (\n    <div className=\"space-y-3\">\n      <label className=\"flex items-center gap-2.5 text-xs font-medium cursor-pointer\">\n        <Checkbox defaultChecked />\n        <span>Send weekly analytics digest via email</span>\n      </label>\n      <label className=\"flex items-center gap-2.5 text-xs font-medium cursor-pointer\">\n        <Checkbox />\n        <span>Require two-factor authentication for all members</span>\n      </label>\n    </div>\n  )\n}",
  "files": [
    {
      "path": "packages/ui/src/primitives/switch.tsx",
      "target": "components/ui/checkbox.tsx",
      "type": "registry:primitives",
      "content": "import * as React from \"react\"\nimport * as SwitchPrimitives from \"@radix-ui/react-switch\"\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\"\nimport { Check } from \"lucide-react\"\nimport { cn } from \"../utils/cn\"\n\nconst Switch = React.forwardRef<\n  React.ElementRef<typeof SwitchPrimitives.Root>,\n  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>\n>(({ className, ...props }, ref) => (\n  <SwitchPrimitives.Root\n    className={cn(\n      \"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/30 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-blue-600 data-[state=unchecked]:bg-zinc-200 dark:data-[state=unchecked]:bg-zinc-800\",\n      className\n    )}\n    {...props}\n    ref={ref}\n  >\n    <SwitchPrimitives.Thumb\n      className={cn(\n        \"pointer-events-none block h-4 w-4 rounded-full bg-white shadow-xs ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0.5\"\n      )}\n    />\n  </SwitchPrimitives.Root>\n))\nSwitch.displayName = SwitchPrimitives.Root.displayName\n\nconst Checkbox = React.forwardRef<\n  React.ElementRef<typeof CheckboxPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <CheckboxPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"peer h-4 w-4 shrink-0 rounded border border-zinc-300 bg-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/30 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-blue-600 data-[state=checked]:border-blue-600 data-[state=checked]:text-white dark:border-zinc-700 dark:bg-zinc-900 dark:data-[state=checked]:bg-blue-600 cursor-pointer\",\n      className\n    )}\n    {...props}\n  >\n    <CheckboxPrimitive.Indicator\n      className={cn(\"flex items-center justify-center text-current\")}\n    >\n      <Check className=\"h-3 w-3 stroke-[2.5]\" />\n    </CheckboxPrimitive.Indicator>\n  </CheckboxPrimitive.Root>\n))\nCheckbox.displayName = CheckboxPrimitive.Root.displayName\n\nexport interface RadioGroupOption {\n  value: string\n  label: string\n  description?: string\n}\n\nexport interface RadioGroupProps {\n  options: RadioGroupOption[]\n  value: string\n  onValueChange: (val: string) => void\n  className?: string\n}\n\nconst RadioGroup: React.FC<RadioGroupProps> = ({\n  options,\n  value,\n  onValueChange,\n  className,\n}) => (\n  <div role=\"radiogroup\" className={cn(\"space-y-2\", className)}>\n    {options.map((opt) => {\n      const checked = opt.value === value\n      return (\n        <label\n          key={opt.value}\n          onClick={() => onValueChange(opt.value)}\n          className={cn(\n            \"flex items-start gap-3 rounded-xl border p-3.5 transition-colors cursor-pointer\",\n            checked\n              ? \"border-blue-500/50 bg-blue-50/40 dark:border-blue-500/40 dark:bg-blue-500/10\"\n              : \"border-zinc-200 bg-white hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900/60 dark:hover:bg-zinc-800/50\"\n          )}\n        >\n          <span\n            className={cn(\n              \"mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border\",\n              checked\n                ? \"border-blue-600 bg-blue-600 text-white\"\n                : \"border-zinc-300 dark:border-zinc-700\"\n            )}\n          >\n            {checked && <span className=\"h-1.5 w-1.5 rounded-full bg-white\" />}\n          </span>\n          <div className=\"space-y-0.5 text-xs\">\n            <div className=\"font-medium text-zinc-900 dark:text-zinc-100\">\n              {opt.label}\n            </div>\n            {opt.description && (\n              <div className=\"text-zinc-500 dark:text-zinc-400\">\n                {opt.description}\n              </div>\n            )}\n          </div>\n        </label>\n      )\n    })}\n  </div>\n)\n\nexport interface SliderProps {\n  value: number\n  min?: number\n  max?: number\n  step?: number\n  onValueChange?: (val: number) => void\n  label?: string\n  className?: string\n}\n\nconst Slider: React.FC<SliderProps> = ({\n  value,\n  min = 0,\n  max = 100,\n  step = 1,\n  onValueChange,\n  label,\n  className,\n}) => (\n  <div className={cn(\"space-y-2\", className)}>\n    {label && (\n      <div className=\"flex items-center justify-between text-xs\">\n        <span className=\"font-medium text-zinc-700 dark:text-zinc-300\">{label}</span>\n        <span className=\"font-mono text-zinc-500\">{value}%</span>\n      </div>\n    )}\n    <input\n      type=\"range\"\n      min={min}\n      max={max}\n      step={step}\n      value={value}\n      onChange={(e) => onValueChange?.(Number(e.target.value))}\n      className=\"h-1.5 w-full cursor-pointer appearance-none rounded-lg bg-zinc-200 accent-blue-600 dark:bg-zinc-800\"\n    />\n  </div>\n)\n\nexport { Switch, Checkbox, RadioGroup, Slider }\n"
    }
  ]
}