{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox-todo",
  "type": "registry:ui",
  "title": "Checkbox Todo",
  "description": "A todo-style checkbox with animated strikethrough effect when checked.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/ruixenui/checkbox-todo.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { motion, AnimatePresence } from \"motion/react\";\n\ninterface CheckboxTodoProps {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n  label: string;\n  animated?: boolean;\n  disabled?: boolean;\n  id?: string;\n  className?: string;\n}\n\nexport function CheckboxTodo({\n  checked,\n  defaultChecked = false,\n  onCheckedChange,\n  label,\n  animated = true,\n  disabled = false,\n  id,\n  className,\n}: CheckboxTodoProps) {\n  const [internalChecked, setInternalChecked] = React.useState(defaultChecked);\n  const isControlled = checked !== undefined;\n  const isChecked = isControlled ? checked : internalChecked;\n  const inputId = id || React.useId();\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const newChecked = e.target.checked;\n    if (!isControlled) {\n      setInternalChecked(newChecked);\n    }\n    onCheckedChange?.(newChecked);\n  };\n\n  return (\n    <label\n      htmlFor={inputId}\n      className={cn(\n        \"group inline-flex cursor-pointer items-center gap-3 py-0.5\",\n        disabled && \"pointer-events-none opacity-40\",\n        className,\n      )}\n    >\n      <div className=\"relative flex items-center justify-center\">\n        <input\n          type=\"checkbox\"\n          id={inputId}\n          checked={isChecked}\n          onChange={handleChange}\n          disabled={disabled}\n          className=\"peer sr-only\"\n        />\n        <motion.div\n          className={cn(\n            \"flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-full border transition-colors duration-150\",\n            isChecked\n              ? \"border-neutral-900 bg-neutral-900 text-white dark:border-neutral-100 dark:bg-neutral-100 dark:text-neutral-950\"\n              : \"border-neutral-300 bg-transparent dark:border-neutral-700\",\n            !disabled &&\n              !isChecked &&\n              \"group-hover:border-neutral-400 dark:group-hover:border-neutral-500\",\n            \"peer-focus-visible:ring-2 peer-focus-visible:ring-neutral-900/20 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-white dark:peer-focus-visible:ring-neutral-100/20 dark:peer-focus-visible:ring-offset-neutral-950\",\n          )}\n          whileTap={disabled ? undefined : { scale: 0.88 }}\n          transition={{ type: \"spring\", stiffness: 400, damping: 25 }}\n        >\n          <AnimatePresence initial={false}>\n            {isChecked && (\n              <motion.svg\n                key=\"check\"\n                viewBox=\"0 0 12 12\"\n                className=\"h-2.5 w-2.5\"\n                fill=\"none\"\n              >\n                <motion.path\n                  d=\"M2.5 6.5L5 9L9.5 3.5\"\n                  stroke=\"currentColor\"\n                  strokeWidth={2.5}\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  initial={{ pathLength: 0 }}\n                  animate={{ pathLength: 1 }}\n                  exit={{ pathLength: 0 }}\n                  transition={{ duration: 0.2, ease: \"easeOut\" }}\n                />\n              </motion.svg>\n            )}\n          </AnimatePresence>\n        </motion.div>\n      </div>\n      <span className=\"relative\">\n        <span\n          className={cn(\n            \"text-[14px] tracking-[-0.01em] transition-colors duration-200\",\n            isChecked\n              ? \"text-neutral-400 dark:text-neutral-600\"\n              : \"text-neutral-900 dark:text-neutral-100\",\n          )}\n        >\n          {label}\n        </span>\n        {animated && (\n          <motion.span\n            className=\"absolute left-0 top-1/2 h-px w-full origin-left bg-neutral-400 dark:bg-neutral-600\"\n            initial={false}\n            animate={{ scaleX: isChecked ? 1 : 0 }}\n            transition={{\n              duration: 0.25,\n              ease: [0.2, 0.8, 0.2, 1],\n              delay: isChecked ? 0.1 : 0,\n            }}\n          />\n        )}\n      </span>\n    </label>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/checkbox-todo.tsx"
    }
  ]
}