{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "demo-primitives-headless-checkbox",
  "title": "Headless Checkbox Demo",
  "description": "Demo showing an animated headless checkbox.",
  "registryDependencies": [
    "@animate-ui/primitives-headless-checkbox"
  ],
  "files": [
    {
      "path": "registry/demo/primitives/headless/checkbox/index.tsx",
      "content": "import {\n  Checkbox,\n  CheckboxIndicator,\n} from '@/components/animate-ui/primitives/headless/checkbox';\nimport { Field, Label } from '@headlessui/react';\n\ntype HeadlessCheckboxDemoProps = {\n  indeterminate: boolean;\n};\n\nexport const HeadlessCheckboxDemo = ({\n  indeterminate,\n}: HeadlessCheckboxDemoProps) => {\n  return (\n    <Field>\n      <Label className=\"flex items-center gap-x-3\">\n        <Checkbox\n          indeterminate={indeterminate}\n          className=\"size-5 flex justify-center items-center border [&[data-checked],&[data-indeterminate]]:bg-primary [&[data-checked],&[data-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    </Field>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/animate-ui/demo/primitives/headless/checkbox.tsx"
    }
  ],
  "meta": {
    "demoProps": {
      "Checkbox": {
        "indeterminate": {
          "value": false
        }
      }
    }
  },
  "type": "registry:ui"
}