{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-checkbox",
  "title": "Animated Checkbox",
  "description": "Animated checkbox with spring transitions and strike-through text effect.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/spell-ui/animated-checkbox.tsx",
      "content": "\"use client\";\n\nimport { motion } from \"motion/react\";\nimport { useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface AnimatedCheckboxProps {\n  title?: string;\n  defaultChecked?: boolean;\n  className?: string;\n  onCheckedChange?: (checked: boolean) => void;\n}\n\nconst springTransition = {\n  type: \"spring\" as const,\n  duration: 0.4,\n  bounce: 0.2,\n};\n\nexport function AnimatedCheckbox({\n  title = \"Implement Checkbox\",\n  defaultChecked = false,\n  className,\n  onCheckedChange,\n}: AnimatedCheckboxProps) {\n  const [checked, setChecked] = useState(defaultChecked);\n\n  const handleClick = () => {\n    const newChecked = !checked;\n    setChecked(newChecked);\n    onCheckedChange?.(newChecked);\n  };\n\n  return (\n    <div\n      className={cn(\"flex items-center gap-3 cursor-pointer select-none\", className)}\n      onClick={handleClick}\n    >\n      <div\n        className={cn(\n          \"size-4.5 rounded-[6px] flex items-center justify-center border-[1.5px] transition-colors duration-200\",\n          checked\n            ? \"bg-foreground border-transparent\"\n            : \"bg-transparent border-muted-foreground/40 hover:border-muted-foreground/60\"\n        )}\n      >\n        <svg viewBox=\"0 0 20 20\" className=\"size-full text-background\">\n          <motion.path\n            d=\"M 0 4.5 L 3.182 8 L 10 0\"\n            fill=\"transparent\"\n            stroke=\"currentColor\"\n            strokeWidth={1.5}\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            transform=\"translate(5 6)\"\n            initial={{ pathLength: defaultChecked ? 1 : 0, opacity: defaultChecked ? 1 : 0 }}\n            animate={{\n              pathLength: checked ? 1 : 0,\n              opacity: checked ? 1 : 0\n            }}\n            transition={{\n              pathLength: { ease: \"easeOut\", duration: 0.3 },\n              opacity: { duration: 0 }\n            }}\n          />\n        </svg>\n      </div>\n      <div className=\"relative\">\n        <span\n          className={cn(\n            \"text-base font-medium transition-colors duration-200\",\n            checked ? \"text-muted-foreground\" : \"text-foreground\"\n          )}\n        >\n          {title}\n        </span>\n        <motion.div\n          className=\"absolute left-0 top-1/2 h-[1.5px] bg-muted-foreground -translate-y-1/2\"\n          initial={{ width: defaultChecked ? \"100%\" : 0, opacity: defaultChecked ? 1 : 0 }}\n          animate={{\n            width: checked ? \"100%\" : 0,\n            opacity: checked ? 1 : 0,\n          }}\n          transition={springTransition}\n        />\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}