{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "demo-primitives-radix-checkbox",
  "title": "Radix Checkbox Demo",
  "description": "Demo showing an animated radix checkbox.",
  "registryDependencies": [
    "@animate-ui/primitives-radix-checkbox"
  ],
  "files": [
    {
      "path": "registry/demo/primitives/radix/checkbox/index.tsx",
      "content": "'use client';\n\nimport {\n  Checkbox,\n  CheckboxIndicator,\n} from '@/components/animate-ui/primitives/radix/checkbox';\nimport { Label } from '@/components/ui/label';\nimport { useEffect, useState } from 'react';\n\ntype RadixCheckboxDemoProps = {\n  checked: boolean | 'indeterminate';\n};\n\nexport const RadixCheckboxDemo = ({ checked }: RadixCheckboxDemoProps) => {\n  const [isChecked, setIsChecked] = useState(checked ?? false);\n\n  useEffect(() => {\n    setIsChecked(checked);\n  }, [checked]);\n\n  return (\n    <Label className=\"flex items-center gap-x-3\">\n      <Checkbox\n        checked={isChecked}\n        onCheckedChange={setIsChecked}\n        className=\"size-5 flex justify-center items-center border [&[data-state=checked],&[data-state=indeterminate]]:bg-primary [&[data-state=checked],&[data-state=indeterminate]]:text-primary-foreground transition-colors duration-500\"\n      >\n        <CheckboxIndicator className=\"size-3.5\" />\n      </Checkbox>\n      Accept terms and conditions\n    </Label>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/animate-ui/demo/primitives/radix/checkbox.tsx"
    }
  ],
  "meta": {
    "demoProps": {
      "Checkbox": {
        "checked": {
          "value": false,
          "options": {
            "true": true,
            "false": false,
            "indeterminate": "indeterminate"
          }
        }
      }
    }
  },
  "type": "registry:ui"
}