{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo <educlopez93@gmail.com>","css":{},"dependencies":["motion","radix-ui"],"description":"An animated Checkbox component for SmoothUI with checkmark and indeterminate state animations.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\";\nimport { SPRING_DEFAULT } from \"@/components/smoothui/lib/animation\";\n\nexport interface CheckboxProps {\n  /** Whether the checkbox is checked */\n  checked?: boolean;\n  /** Optional CSS class */\n  className?: string;\n  /** Whether the checkbox is disabled */\n  disabled?: boolean;\n  /** ID for label association */\n  id?: string;\n  /** Whether the checkbox is in an indeterminate state */\n  indeterminate?: boolean;\n  /** Accessible name for the checkbox */\n  name?: string;\n  /** Callback when the checked state changes */\n  onCheckedChange?: (checked: boolean) => void;\n  /** Whether the checkbox is required */\n  required?: boolean;\n  /** Value attribute for form submission */\n  value?: string;\n}\n\nconst CheckmarkPath = motion.path;\nconst MotionSvg = motion.svg;\n\nexport default function Checkbox({\n  checked = false,\n  indeterminate = false,\n  onCheckedChange,\n  disabled = false,\n  className,\n  name,\n  value,\n  id,\n  required,\n}: CheckboxProps) {\n  const shouldReduceMotion = useReducedMotion();\n\n  const derivedState = indeterminate\n    ? \"indeterminate\"\n    : checked\n      ? \"checked\"\n      : \"unchecked\";\n\n  const handleChange = (state: boolean | \"indeterminate\") => {\n    if (state === \"indeterminate\") {\n      return;\n    }\n    onCheckedChange?.(state);\n  };\n\n  return (\n    <CheckboxPrimitive.Root\n      aria-checked={indeterminate ? \"mixed\" : checked}\n      checked={indeterminate ? \"indeterminate\" : checked}\n      className={cn(\n        \"peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs outline-none transition-shadow focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-foreground data-[state=indeterminate]:border-foreground data-[state=checked]:bg-foreground data-[state=indeterminate]:bg-foreground data-[state=unchecked]:bg-background data-[state=checked]:text-background data-[state=indeterminate]:text-background dark:data-[state=unchecked]:bg-input/30 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      data-slot=\"checkbox\"\n      disabled={disabled}\n      id={id}\n      name={name}\n      onCheckedChange={handleChange}\n      required={required}\n      value={value}\n    >\n      <CheckboxPrimitive.Indicator\n        className=\"grid place-content-center text-current\"\n        data-slot=\"checkbox-indicator\"\n        forceMount\n      >\n        <AnimatePresence mode=\"wait\">\n          {derivedState === \"checked\" && (\n            <MotionSvg\n              animate={\n                shouldReduceMotion ? { opacity: 1 } : { opacity: 1, scale: 1 }\n              }\n              className=\"size-3.5\"\n              exit={\n                shouldReduceMotion\n                  ? { opacity: 0, transition: { duration: 0 } }\n                  : { opacity: 0, scale: 0.8 }\n              }\n              fill=\"none\"\n              initial={\n                shouldReduceMotion ? { opacity: 1 } : { opacity: 0, scale: 0.8 }\n              }\n              key=\"check\"\n              stroke=\"currentColor\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={3}\n              transition={shouldReduceMotion ? { duration: 0 } : SPRING_DEFAULT}\n              viewBox=\"0 0 24 24\"\n            >\n              <title>Checked</title>\n              <CheckmarkPath\n                animate={shouldReduceMotion ? {} : { pathLength: 1 }}\n                d=\"M20 6L9 17l-5-5\"\n                initial={shouldReduceMotion ? {} : { pathLength: 0 }}\n                transition={\n                  shouldReduceMotion\n                    ? { duration: 0 }\n                    : { ...SPRING_DEFAULT, delay: 0.05 }\n                }\n              />\n            </MotionSvg>\n          )}\n          {derivedState === \"indeterminate\" && (\n            <MotionSvg\n              animate={\n                shouldReduceMotion ? { opacity: 1 } : { opacity: 1, scale: 1 }\n              }\n              className=\"size-3.5\"\n              exit={\n                shouldReduceMotion\n                  ? { opacity: 0, transition: { duration: 0 } }\n                  : { opacity: 0, scale: 0.8 }\n              }\n              fill=\"none\"\n              initial={\n                shouldReduceMotion ? { opacity: 1 } : { opacity: 0, scale: 0.8 }\n              }\n              key=\"indeterminate\"\n              stroke=\"currentColor\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={3}\n              transition={shouldReduceMotion ? { duration: 0 } : SPRING_DEFAULT}\n              viewBox=\"0 0 24 24\"\n            >\n              <title>Indeterminate</title>\n              <CheckmarkPath\n                animate={shouldReduceMotion ? {} : { pathLength: 1 }}\n                d=\"M5 12h14\"\n                initial={shouldReduceMotion ? {} : { pathLength: 0 }}\n                transition={\n                  shouldReduceMotion\n                    ? { duration: 0 }\n                    : { ...SPRING_DEFAULT, delay: 0.05 }\n                }\n              />\n            </MotionSvg>\n          )}\n        </AnimatePresence>\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n}\n","path":"index.tsx","target":"components/smoothui/checkbox/index.tsx","type":"registry:ui"}],"name":"checkbox","registryDependencies":["https://smoothui.dev/r/lib.json"],"title":"Checkbox","type":"registry:ui"}