{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "radix-checkbox",
  "type": "registry:ui",
  "title": "Checkbox",
  "description": "A control that allows the user to toggle between checked and not checked.",
  "dependencies": [
    "motion",
    "radix-ui"
  ],
  "files": [
    {
      "path": "registry/radix/checkbox/index.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { Checkbox as CheckboxPrimitive } from 'radix-ui';\nimport { motion, type HTMLMotionProps } from 'motion/react';\n\nimport { cn } from '@/lib/utils';\n\ntype CheckboxProps = React.ComponentProps<typeof CheckboxPrimitive.Root> &\n  HTMLMotionProps<'button'>;\n\nfunction Checkbox({ className, onCheckedChange, ...props }: CheckboxProps) {\n  const [isChecked, setIsChecked] = React.useState(\n    props?.checked ?? props?.defaultChecked ?? false,\n  );\n\n  React.useEffect(() => {\n    if (props?.checked !== undefined) setIsChecked(props.checked);\n  }, [props?.checked]);\n\n  const handleCheckedChange = React.useCallback(\n    (checked: boolean) => {\n      setIsChecked(checked);\n      onCheckedChange?.(checked);\n    },\n    [onCheckedChange],\n  );\n\n  return (\n    <CheckboxPrimitive.Root\n      {...props}\n      onCheckedChange={handleCheckedChange}\n      asChild\n    >\n      <motion.button\n        data-slot=\"checkbox\"\n        className={cn(\n          'peer size-5 flex items-center justify-center shrink-0 rounded-sm bg-input transition-colors duration-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n          className,\n        )}\n        whileTap={{ scale: 0.95 }}\n        whileHover={{ scale: 1.05 }}\n        {...props}\n      >\n        <CheckboxPrimitive.Indicator forceMount asChild>\n          <motion.svg\n            data-slot=\"checkbox-indicator\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            strokeWidth=\"3.5\"\n            stroke=\"currentColor\"\n            className=\"size-3.5\"\n            initial=\"unchecked\"\n            animate={isChecked ? 'checked' : 'unchecked'}\n          >\n            <motion.path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              d=\"M4.5 12.75l6 6 9-13.5\"\n              variants={{\n                checked: {\n                  pathLength: 1,\n                  opacity: 1,\n                  transition: {\n                    duration: 0.2,\n                    delay: 0.2,\n                  },\n                },\n                unchecked: {\n                  pathLength: 0,\n                  opacity: 0,\n                  transition: {\n                    duration: 0.2,\n                  },\n                },\n              }}\n            />\n          </motion.svg>\n        </CheckboxPrimitive.Indicator>\n      </motion.button>\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport { Checkbox, type CheckboxProps };\n",
      "type": "registry:ui",
      "target": "components/animate-ui/radix/checkbox.tsx"
    }
  ]
}