{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox",
  "title": "Checkbox (Base UI)",
  "description": "Compact animated checkbox with checked, indeterminate, disabled, validation, and form states. Base UI flavor.",
  "dependencies": [
    "@base-ui/react",
    "framer-motion"
  ],
  "registryDependencies": [
    "https://zeron-ui.vercel.app/r/surfaces.json",
    "utils"
  ],
  "files": [
    {
      "path": "src/components/ui/checkbox.tsx",
      "content": "\"use client\";\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\";\nimport { motion, useReducedMotion } from \"framer-motion\";\nimport { cn } from \"@/lib/utils\";\n\nexport type CheckboxProps = Omit<\n  CheckboxPrimitive.Root.Props,\n  \"checked\" | \"indeterminate\"\n> & {\n  checked?: boolean | \"indeterminate\";\n  indeterminate?: boolean;\n};\n\n/**\n * A compact Base UI checkbox aligned with the controls used throughout\n * Zeron Design. Pass `checked=\"indeterminate\"` or `indeterminate` for a\n * mixed state.\n */\nfunction Checkbox({\n  checked,\n  className,\n  indeterminate,\n  ...props\n}: CheckboxProps) {\n  const isIndeterminate = checked === \"indeterminate\" || indeterminate;\n  const reduceMotion = useReducedMotion() ?? false;\n\n  return (\n    <CheckboxPrimitive.Root\n      checked={checked === \"indeterminate\" ? false : checked}\n      className={cn(\n        \"peer relative inline-flex size-5 shrink-0 cursor-pointer appearance-none items-center justify-center rounded-control border border-input bg-transparent p-0 text-fg-on-brand outline-none transition-[border-color,background-color,box-shadow,opacity,transform] duration-moderate active:scale-[.92] motion-reduce:active:scale-100\",\n        \"data-unchecked:hover:border-input-hover\",\n        \"data-checked:border-brand data-checked:bg-brand data-indeterminate:border-brand data-indeterminate:bg-brand\",\n        \"focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-base\",\n        \"aria-invalid:border-danger-border aria-invalid:ring-1 aria-invalid:ring-danger-border/30\",\n        \"data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50\",\n        className\n      )}\n      data-slot=\"checkbox\"\n      indeterminate={isIndeterminate}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        className=\"pointer-events-none absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center text-current transition-[opacity,transform,filter] duration-moderate data-starting-style:scale-50 data-starting-style:opacity-0 data-ending-style:scale-50 data-ending-style:opacity-0 data-ending-style:blur-[4px]\"\n        data-slot=\"checkbox-indicator\"\n      >\n        <motion.svg\n          aria-hidden=\"true\"\n          className=\"size-3\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n        >\n          <motion.path\n            animate={{ pathLength: 1 }}\n            d={isIndeterminate ? \"M6 12H18\" : \"M5 13L9 17L19 7\"}\n            initial={{ pathLength: reduceMotion ? 1 : 0 }}\n            stroke=\"currentColor\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={3}\n            transition={\n              reduceMotion\n                ? { duration: 0 }\n                : {\n                    duration: isIndeterminate ? 0.2 : 0.3,\n                    ease: \"easeOut\",\n                    delay: 0.04,\n                  }\n            }\n          />\n        </motion.svg>\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport { Checkbox };\n",
      "type": "registry:ui",
      "target": "components/ui/checkbox.tsx"
    }
  ],
  "type": "registry:ui"
}