{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox",
  "type": "registry:ui",
  "title": "Checkbox",
  "description": "Tactile checkbox control with yellow check fill.",
  "dependencies": [
    "clsx",
    "tailwind-merge",
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/ui/checkbox.tsx",
      "content": "import * as React from 'react'\nimport { motion, AnimatePresence } from 'motion/react'\nimport { Check } from 'lucide-react'\nimport { cn } from '@/lib/utils'\n\nexport interface CheckboxProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {\n  onCheckedChange?: (checked: boolean) => void\n  label?: string\n}\n\nconst Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(\n  ({ className, checked, onCheckedChange, label, ...props }, ref) => {\n    const [isChecked, setIsChecked] = React.useState(!!checked)\n\n    React.useEffect(() => {\n      if (checked !== undefined) {\n        setIsChecked(checked)\n      }\n    }, [checked])\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      setIsChecked(e.target.checked)\n      onCheckedChange?.(e.target.checked)\n    }\n\n    return (\n      <label className=\"inline-flex items-center gap-3 cursor-pointer select-none group\">\n        <div className=\"relative shrink-0\">\n          <input\n            type=\"checkbox\"\n            ref={ref}\n            checked={isChecked}\n            onChange={handleChange}\n            className=\"sr-only\"\n            {...props}\n          />\n          <motion.div\n            whileHover={{ scale: 1.05, x: -1, y: -1 }}\n            whileTap={{ scale: 0.95 }}\n            className={cn(\n              'w-6 h-6 rounded-lg rk-border-sm transition-colors duration-150 flex items-center justify-center rk-shadow-sm shrink-0 aspect-square p-0',\n              isChecked\n                ? 'bg-rk-primary text-rk-ink'\n                : 'bg-rk-surface text-transparent group-hover:bg-rk-canvas',\n              className\n            )}\n          >\n            <AnimatePresence>\n              {isChecked && (\n                <motion.div\n                  initial={{ scale: 0, rotate: -45 }}\n                  animate={{ scale: 1, rotate: 0 }}\n                  exit={{ scale: 0, rotate: 45 }}\n                  transition={{ type: 'spring', stiffness: 500, damping: 25 }}\n                >\n                  <Check className=\"w-4 h-4 stroke-[3.5] text-rk-ink\" />\n                </motion.div>\n              )}\n            </AnimatePresence>\n          </motion.div>\n        </div>\n        {label && <span className=\"font-extrabold text-sm text-rk-ink\">{label}</span>}\n      </label>\n    )\n  }\n)\nCheckbox.displayName = 'Checkbox'\n\nexport { Checkbox }\n",
      "type": "registry:ui",
      "target": "components/ui/checkbox.tsx"
    }
  ]
}