{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"ui-motion-checkbox","type":"registry:component","title":"Motion Checkbox","description":"Checkbox primitive with motion-enhanced state transitions.","version":"1.0.0","status":"ga","files":[{"path":"src/components/ui/motion-checkbox.tsx","type":"registry:component","content":"'use client'\n\nimport * as React from 'react'\n\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport { motion, type HTMLMotionProps } from 'motion/react'\n\nimport { cn } from '@/lib/utils'\n\ntype CheckboxProps = React.ComponentProps<typeof CheckboxPrimitive.Root> & HTMLMotionProps<'button'>\n\nfunction Checkbox({ className, onCheckedChange, ...props }: CheckboxProps) {\n  const [isChecked, setIsChecked] = React.useState(props?.checked ?? props?.defaultChecked ?? false)\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 {...props} onCheckedChange={handleCheckedChange} asChild>\n      <motion.button\n        data-slot='checkbox'\n        className={cn(\n          'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-colors duration-500 outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',\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 }\n"}]}