{
  "title": "Checkbox",
  "description": "A control that allows the user to toggle between checked and not checked with tactile spring press physics and animated checkmark transitions.",
  "name": "motion-checkbox",
  "dependencies": [
    "motion",
    "@base-ui/react",
    "lucide-react"
  ],
  "registryDependencies": [],
  "type": "registry:ui",
  "files": [
    {
      "path": "components/paceui/motion/checkbox.tsx",
      "type": "registry:ui",
      "content": "import { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\";\nimport { AnimatePresence, type Transition, motion } from \"motion/react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport interface CheckboxProps extends CheckboxPrimitive.Root.Props {\n    transition?: Transition;\n}\n\nfunction Checkbox({\n    className,\n    transition = { type: \"spring\", stiffness: 500, damping: 25, mass: 0.8 },\n    disabled,\n    ...props\n}: CheckboxProps) {\n    return (\n        <CheckboxPrimitive.Root\n            data-slot=\"checkbox\"\n            disabled={disabled}\n            className={cn(\n                \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-foreground dark:data-indeterminate:bg-primary data-indeterminate:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border shadow-xs transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px]\",\n                className,\n            )}\n            render={\n                <motion.button\n                    whileHover={disabled ? undefined : { scale: 1.05 }}\n                    whileTap={disabled ? undefined : { scale: 0.92 }}\n                    transition={transition}\n                />\n            }\n            {...props}>\n            <CheckboxPrimitive.Indicator\n                        data-slot=\"checkbox-indicator\"\n                        keepMounted\n                        render={(_indicatorProps, indicatorState) => (\n                            <AnimatePresence initial={false} mode=\"wait\">\n                                {indicatorState.indeterminate ? (\n                                    <motion.svg\n                                        key=\"indeterminate\"\n                                        viewBox=\"0 0 24 24\"\n                                        fill=\"none\"\n                                        stroke=\"currentColor\"\n                                        strokeWidth=\"3.5\"\n                                        strokeLinecap=\"round\"\n                                        strokeLinejoin=\"round\"\n                                        className=\"size-3.5\">\n                                        <motion.path\n                                            d=\"M5 12h14\"\n                                            initial={{ pathLength: 0, opacity: 0 }}\n                                            animate={{ pathLength: 1, opacity: 1 }}\n                                            exit={{ pathLength: 0, opacity: 0 }}\n                                            transition={{\n                                                pathLength: {\n                                                    type: \"spring\",\n                                                    stiffness: 450,\n                                                    damping: 30,\n                                                    duration: 0.2,\n                                                },\n                                                opacity: { duration: 0.1 },\n                                            }}\n                                        />\n                                    </motion.svg>\n                                ) : indicatorState.checked ? (\n                                    <motion.svg\n                                        key=\"checked\"\n                                        viewBox=\"0 0 24 24\"\n                                        fill=\"none\"\n                                        stroke=\"currentColor\"\n                                        strokeWidth=\"3.5\"\n                                        strokeLinecap=\"round\"\n                                        strokeLinejoin=\"round\"\n                                        className=\"size-3.5\">\n                                        <motion.path\n                                            d=\"M4 12.5L9 17L20 6\"\n                                            initial={{ pathLength: 0, opacity: 0 }}\n                                            animate={{ pathLength: 1, opacity: 1 }}\n                                            exit={{ pathLength: 0, opacity: 0 }}\n                                            transition={{\n                                                pathLength: {\n                                                    type: \"spring\",\n                                                    stiffness: 450,\n                                                    damping: 30,\n                                                    duration: 0.25,\n                                                },\n                                                opacity: { duration: 0.08 },\n                                            }}\n                                        />\n                                    </motion.svg>\n                                ) : null}\n                            </AnimatePresence>\n                        )}\n                    />\n        </CheckboxPrimitive.Root>\n    );\n}\n\nexport { Checkbox };\n"
    }
  ],
  "mcp": {
    "description": "A control that allows the user to toggle between checked and unchecked states. Provides tactile spring press physics and animated checkmark/minus icon transitions.",
    "tags": [
      "component",
      "checkbox",
      "paceui",
      "animation",
      "toggle"
    ]
  }
}