{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": ["motion"],
  "devDependencies": [],
  "files": [
    {
      "path": "checkbox.tsx",
      "content": "\"use client\";\nimport { motion } from \"motion/react\";\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nconst componentThemeClassName =\n  \"[--ic-background:#ffffff] [--ic-foreground:#111111] [--ic-primary:#111111] [--ic-secondary:#646b75] [--ic-surface-border:#e9edf2] [--ic-border:#e3e7ec] [--ic-card:#ffffff] [--ic-card-foreground:#111111] [--ic-muted:#f5f7fa] [--ic-muted-foreground:#6d7480] [--ic-accent:#f3f5f8] [--color-accent:var(--ic-accent)] [--color-accent-foreground:var(--ic-accent-foreground)] [--ic-accent-foreground:#111111] [--ic-input:#e3e7ec] [--ic-ring:rgba(17,17,17,0.16)] [--ic-destructive:#dc2626] [--ic-paper:#fcfcfd] [--ic-popover-foreground:#111111] [--ic-brand:#0ea5e9] [--ic-brand-soft:#bae6fd] [--ic-shadow-soft:0_18px_38px_-24px_rgba(15,23,42,0.35)] [--ic-chart-1:oklch(0.52_0.19_254)] [--ic-chart-2:oklch(0.74_0.11_232)] [--ic-chart-3:oklch(0.42_0.16_262)] [--ic-chart-4:oklch(0.84_0.07_228)] [--ic-chart-5:oklch(0.62_0.14_240)] [--color-background:var(--ic-background)] [--color-foreground:var(--ic-foreground)] [--color-primary:var(--ic-primary)] [--color-secondary:var(--ic-secondary)] [--color-border:var(--ic-border)] [--color-card:var(--ic-card)] [--color-card-foreground:var(--ic-card-foreground)] [--color-muted:var(--ic-muted)] [--color-muted-foreground:var(--ic-muted-foreground)] [--color-accent:var(--ic-accent)] [--color-accent-foreground:var(--ic-accent-foreground)] [--color-input:var(--ic-input)] [--color-ring:var(--ic-ring)] [--color-destructive:var(--ic-destructive)] [--color-paper:var(--ic-paper)] [--color-popover-foreground:var(--ic-popover-foreground)] [--color-brand:var(--ic-brand)] [--color-brand-soft:var(--ic-brand-soft)] [--color-chart-1:var(--ic-chart-1)] [--color-chart-2:var(--ic-chart-2)] [--color-chart-3:var(--ic-chart-3)] [--color-chart-4:var(--ic-chart-4)] [--color-chart-5:var(--ic-chart-5)] dark:[--ic-background:#111111] dark:[--ic-foreground:#f6f3ec] dark:[--ic-primary:#f6f3ec] dark:[--ic-secondary:#cbc6bb] dark:[--ic-surface-border:#2a2a25] dark:[--ic-border:#2b2a25] dark:[--ic-card:#111111] dark:[--ic-card-foreground:#f6f3ec] dark:[--ic-muted:#171716] dark:[--ic-muted-foreground:#9a958a] dark:[--ic-accent:#1a1a18] [--color-accent:var(--ic-accent)] [--color-accent-foreground:var(--ic-accent-foreground)] dark:[--ic-accent-foreground:#f6f3ec] dark:[--ic-input:#2b2a25] dark:[--ic-ring:rgba(246,243,236,0.18)] dark:[--ic-destructive:#f87171] dark:[--ic-paper:#171716] dark:[--ic-popover-foreground:#f6f3ec] dark:[--ic-brand:#38bdf8] dark:[--ic-brand-soft:#0c4a6e] dark:[--ic-shadow-soft:0_20px_44px_-28px_rgba(0,0,0,0.6)] dark:[--ic-chart-1:oklch(0.68_0.17_250)] dark:[--ic-chart-2:oklch(0.82_0.09_225)] dark:[--ic-chart-3:oklch(0.58_0.15_260)] dark:[--ic-chart-4:oklch(0.75_0.12_235)] dark:[--ic-chart-5:oklch(0.88_0.06_220)]\";\n\ninterface CheckboxProps {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n  label?: string;\n  className?: string;\n  id?: string;\n}\n\nexport function Checkbox({\n  checked,\n  defaultChecked = false,\n  onCheckedChange,\n  label,\n  className,\n  id,\n}: CheckboxProps) {\n  const [internal, setInternal] = React.useState(defaultChecked);\n  const isControlled = checked !== undefined;\n  const value = isControlled ? checked : internal;\n\n  const toggle = () => {\n    const next = !value;\n    if (!isControlled) setInternal(next);\n    onCheckedChange?.(next);\n  };\n\n  return (\n    <label\n      className={cn(\n        componentThemeClassName,\n        \"inline-flex cursor-pointer select-none items-center gap-3\",\n        className\n      )}\n      htmlFor={id}\n    >\n      <input\n        checked={value}\n        className=\"sr-only\"\n        id={id}\n        onChange={toggle}\n        type=\"checkbox\"\n      />\n      <motion.span\n        animate={{\n          backgroundColor: value\n            ? \"var(--color-foreground)\"\n            : \"var(--color-background)\",\n          borderColor: value\n            ? \"var(--color-foreground)\"\n            : \"var(--color-border)\",\n        }}\n        aria-hidden\n        className=\"relative flex h-5 w-5 items-center justify-center rounded border\"\n        initial={false}\n        transition={{ type: \"spring\", stiffness: 500, damping: 30 }}\n        whileTap={{ scale: 0.96 }}\n      >\n        <motion.svg\n          animate={value ? \"checked\" : \"unchecked\"}\n          className=\"h-3.5 w-3.5\"\n          fill=\"none\"\n          initial={false}\n          stroke=\"var(--color-background)\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth={3}\n          viewBox=\"0 0 24 24\"\n        >\n          <motion.path\n            d=\"M5 12.5l4.5 4.5L19 7.5\"\n            variants={{\n              checked: {\n                pathLength: 1,\n                opacity: 1,\n                transition: {\n                  pathLength: { duration: 0.3, ease: [0.65, 0, 0.35, 1] },\n                  opacity: { duration: 0.05 },\n                },\n              },\n              unchecked: {\n                pathLength: 0,\n                opacity: 1,\n                transition: {\n                  pathLength: { duration: 0.25, ease: [0.65, 0, 0.35, 1] },\n                },\n              },\n            }}\n          />\n        </motion.svg>\n      </motion.span>\n      {label && (\n        <motion.span\n          animate={{ opacity: value ? 0.55 : 1 }}\n          className=\"text-foreground text-sm\"\n          transition={{ duration: 0.2 }}\n        >\n          {label}\n        </motion.span>\n      )}\n    </label>\n  );\n}\n",
      "type": "registry:ui"
    }
  ],
  "title": "Checkbox",
  "description": "Single checkbox with spring-pressed feedback, a line-drawn checkmark, and an optional inline label. Motion only."
}