{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "playful-todolist",
  "type": "registry:ui",
  "title": "Playful Todolist",
  "description": "Playful Todolist Component",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://animate-ui.com/r/radix-checkbox"
  ],
  "files": [
    {
      "path": "registry/ui-elements/playful-todolist/index.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Transition } from 'motion/react';\nimport { Label } from '@/components/ui/label';\nimport { Checkbox } from '@/components/animate-ui/radix/checkbox';\n\nconst checkboxItems = [\n  {\n    id: 1,\n    label: 'Code in Assembly 💾',\n    defaultChecked: false,\n  },\n  {\n    id: 2,\n    label: 'Present a bug as a feature 🪲',\n    defaultChecked: false,\n  },\n  {\n    id: 3,\n    label: 'Push to prod on a Friday 🚀',\n    defaultChecked: false,\n  },\n];\n\nconst getPathAnimate = (isChecked: boolean) => ({\n  pathLength: isChecked ? 1 : 0,\n  opacity: isChecked ? 1 : 0,\n});\n\nconst getPathTransition = (isChecked: boolean): Transition => ({\n  pathLength: { duration: 1, ease: 'easeInOut' },\n  opacity: {\n    duration: 0.01,\n    delay: isChecked ? 0 : 1,\n  },\n});\n\nfunction PlayfulTodolist() {\n  const [checked, setChecked] = React.useState(\n    checkboxItems.map((i) => !!i.defaultChecked),\n  );\n\n  return (\n    <div className=\"bg-neutral-100 dark:bg-neutral-900 rounded-2xl p-6 space-y-6\">\n      {checkboxItems.map((item, idx) => (\n        <div key={item.id} className=\"space-y-6\">\n          <div className=\"flex items-center space-x-2\">\n            <Checkbox\n              checked={checked[idx]}\n              onCheckedChange={(val) => {\n                const updated = [...checked];\n                updated[idx] = val === true;\n                setChecked(updated);\n              }}\n              id={`checkbox-${item.id}`}\n            />\n            <div className=\"relative inline-block\">\n              <Label htmlFor={`checkbox-${item.id}`}>{item.label}</Label>\n              <motion.svg\n                width=\"340\"\n                height=\"32\"\n                viewBox=\"0 0 340 32\"\n                className=\"absolute left-0 top-1/2 -translate-y-1/2 pointer-events-none z-20 w-full h-10\"\n              >\n                <motion.path\n                  d=\"M 10 16.91 s 79.8 -11.36 98.1 -11.34 c 22.2 0.02 -47.82 14.25 -33.39 22.02 c 12.61 6.77 124.18 -27.98 133.31 -17.28 c 7.52 8.38 -26.8 20.02 4.61 22.05 c 24.55 1.93 113.37 -20.36 113.37 -20.36\"\n                  vectorEffect=\"non-scaling-stroke\"\n                  strokeWidth={2}\n                  strokeLinecap=\"round\"\n                  strokeMiterlimit={10}\n                  fill=\"none\"\n                  initial={false}\n                  animate={getPathAnimate(!!checked[idx])}\n                  transition={getPathTransition(!!checked[idx])}\n                  className=\"stroke-neutral-900 dark:stroke-neutral-100\"\n                />\n              </motion.svg>\n            </div>\n          </div>\n          {idx !== checkboxItems.length - 1 && (\n            <div className=\"border-t border-neutral-300 dark:border-neutral-700\" />\n          )}\n        </div>\n      ))}\n    </div>\n  );\n}\n\nexport { PlayfulTodolist };\n",
      "type": "registry:ui",
      "target": "components/animate-ui/ui-elements/playful-todolist.tsx"
    }
  ]
}