{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox",
  "type": "registry:ui",
  "title": "Checkbox",
  "description": "Checkbox built on Base UI; the mark pops in with a spring.",
  "dependencies": [
    "@base-ui/react",
    "motion",
    "lucide-react"
  ],
  "registryDependencies": [
    "https://seamui.dev/r/utils.json",
    "https://seamui.dev/r/motion.json",
    "https://seamui.dev/r/haptics.json"
  ],
  "files": [
    {
      "path": "registry/seam/ui/checkbox.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\nimport { Checkbox as BaseCheckbox } from \"@base-ui/react/checkbox\"\nimport { motion } from \"motion/react\"\nimport { Check, Minus } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  springs,\n  fades,\n  depth,\n  reduced,\n  useMounted,\n  useReducedMotion,\n} from \"@/lib/motion\"\nimport { useHaptics } from \"@/lib/haptics\"\n\nfunction Checkbox({\n  className,\n  disabled,\n  onCheckedChange,\n  ...props\n}: React.ComponentProps<typeof BaseCheckbox.Root>) {\n  const reduceMotion = useReducedMotion()\n  const { trigger } = useHaptics()\n  // Defer the mark's entrance until after hydration: `initial` serializes\n  // `opacity:0;transform:scale(0)` on the server for a defaultChecked box,\n  // which the client's first paint doesn't match. `initial={false}` renders\n  // the settled mark during SSR/hydration; a genuine user-check (mounted, the\n  // indicator remounts) still pops in.\n  const mounted = useMounted()\n\n  return (\n    <BaseCheckbox.Root\n      data-slot=\"checkbox\"\n      disabled={disabled}\n      // the render element below IS a native <button> — tell Base UI, since a\n      // custom render flips its default to \"assume non-button\".\n      nativeButton\n      // tactile feedback: a tick as the state commits (no-op sans provider).\n      onCheckedChange={(\n        ...args: Parameters<NonNullable<typeof onCheckedChange>>\n      ) => {\n        trigger(\"tick\")\n        onCheckedChange?.(...args)\n      }}\n      // seam touch feedback: the box itself recedes on press (the mark's pop\n      // is state motion, not press motion — a control needs both).\n      render={\n        <motion.button\n          whileTap={\n            disabled\n              ? undefined\n              : reduceMotion\n                ? reduced.pressed\n                : depth.pressed\n          }\n          transition={reduceMotion ? fades.fast : springs.press}\n        />\n      }\n      className={cn(\n        // debossed well unchecked → embossed primary key when checked.\n        \"group/cb peer flex size-4.5 shrink-0 items-center justify-center rounded-[5px] squircle border border-border/60 bg-muted shadow-well outline-none\",\n        \"data-[checked]:bg-primary data-[checked]:border-primary data-[checked]:text-primary-foreground data-[checked]:shadow-resting\",\n        \"data-[indeterminate]:bg-primary data-[indeterminate]:border-primary data-[indeterminate]:text-primary-foreground data-[indeterminate]:shadow-resting\",\n        \"focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n        \"disabled:pointer-events-none disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <BaseCheckbox.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"flex items-center justify-center text-current\"\n        render={\n          // seam motion: the mark pops in with a snappy spring.\n          <motion.span\n            initial={\n              !mounted\n                ? false\n                : reduceMotion\n                  ? reduced.fadeIn.initial\n                  : { scale: 0, opacity: 0 }\n            }\n            animate={{ scale: 1, opacity: 1 }}\n            transition={reduceMotion ? fades.fast : springs.snappy}\n          />\n        }\n      >\n        <Check\n          className=\"size-3.5 group-data-[indeterminate]/cb:hidden\"\n          strokeWidth={3}\n        />\n        <Minus\n          className=\"hidden size-3.5 group-data-[indeterminate]/cb:block\"\n          strokeWidth={3}\n        />\n      </BaseCheckbox.Indicator>\n    </BaseCheckbox.Root>\n  )\n}\n\nexport { Checkbox }\n",
      "type": "registry:ui",
      "target": "components/ui/checkbox.tsx"
    }
  ]
}