{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox",
  "title": "Checkbox",
  "description": "Soft-rect checkbox with Motion check path draw on Base UI.",
  "dependencies": [
    "@base-ui/react",
    "motion"
  ],
  "registryDependencies": [
    "@atroui/utils",
    "@atroui/motion"
  ],
  "files": [
    {
      "path": "registry/default/ui/checkbox.tsx",
      "content": "\"use client\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\nimport { motion, useReducedMotion } from \"motion/react\"\n\nimport { easeOutExpo } from \"@/lib/motion\"\nimport { cn } from \"@/lib/utils\"\n\n/** Check path draw + soft scale — ~160ms easeOutExpo, no spring. */\nconst checkTween = {\n  duration: 0.16,\n  ease: easeOutExpo,\n} as const\n\nconst CHECK_PATH = \"M4.5 8.2 7.1 10.8 11.6 5.2\"\n\nfunction withoutDomAnimationHandlers<T extends Record<string, unknown>>(\n  props: T\n) {\n  const {\n    onAnimationStart: _onAnimationStart,\n    onDrag: _onDrag,\n    onDragStart: _onDragStart,\n    onDragEnd: _onDragEnd,\n    ...rest\n  } = props\n  return rest\n}\n\nfunction Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {\n  const reduce = useReducedMotion()\n\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      {...props}\n      className={cn(\n        \"peer group/checkbox relative inline-flex size-4 shrink-0 items-center justify-center rounded-[calc(var(--atro-control-radius,var(--radius))-2px)] border border-border-subtle bg-background text-primary-foreground outline-none transition-[background-color,border-color,box-shadow] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)]\",\n        \"focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/20\",\n        \"data-checked:border-primary data-checked:bg-primary\",\n        \"data-indeterminate:border-primary data-indeterminate:bg-primary\",\n        \"data-disabled:cursor-not-allowed data-disabled:opacity-50\",\n        \"aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20\",\n        \"motion-reduce:transition-none\",\n        className\n      )}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        keepMounted\n        className=\"flex size-full items-center justify-center text-current\"\n        render={\n          reduce\n            ? (htmlProps, state) => {\n                const show = state.checked || state.indeterminate\n                return (\n                  <span\n                    {...htmlProps}\n                    className={cn(htmlProps.className, !show && \"opacity-0\")}\n                  >\n                    <svg\n                      viewBox=\"0 0 16 16\"\n                      fill=\"none\"\n                      className=\"size-3.5\"\n                      aria-hidden\n                    >\n                      {state.indeterminate ? (\n                        <path\n                          d=\"M4 8h8\"\n                          stroke=\"currentColor\"\n                          strokeWidth=\"1.75\"\n                          strokeLinecap=\"round\"\n                        />\n                      ) : (\n                        <path\n                          d={CHECK_PATH}\n                          stroke=\"currentColor\"\n                          strokeWidth=\"1.75\"\n                          strokeLinecap=\"round\"\n                          strokeLinejoin=\"round\"\n                        />\n                      )}\n                    </svg>\n                  </span>\n                )\n              }\n            : (htmlProps, state) => {\n                const show = state.checked || state.indeterminate\n                return (\n                  <motion.span\n                    {...withoutDomAnimationHandlers(\n                      htmlProps as Record<string, unknown>\n                    )}\n                    initial={false}\n                    animate={{\n                      opacity: show ? 1 : 0,\n                      scale: show ? 1 : 0.82,\n                    }}\n                    transition={checkTween}\n                  >\n                    <svg\n                      viewBox=\"0 0 16 16\"\n                      fill=\"none\"\n                      className=\"size-3.5\"\n                      aria-hidden\n                    >\n                      {state.indeterminate ? (\n                        <motion.path\n                          d=\"M4 8h8\"\n                          stroke=\"currentColor\"\n                          strokeWidth=\"1.75\"\n                          strokeLinecap=\"round\"\n                          initial={false}\n                          animate={{ pathLength: show ? 1 : 0 }}\n                          transition={checkTween}\n                        />\n                      ) : (\n                        <motion.path\n                          d={CHECK_PATH}\n                          stroke=\"currentColor\"\n                          strokeWidth=\"1.75\"\n                          strokeLinecap=\"round\"\n                          strokeLinejoin=\"round\"\n                          initial={false}\n                          animate={{ pathLength: state.checked ? 1 : 0 }}\n                          transition={checkTween}\n                        />\n                      )}\n                    </svg>\n                  </motion.span>\n                )\n              }\n        }\n      />\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
      "type": "registry:ui",
      "target": "components/ui/checkbox.tsx"
    }
  ],
  "type": "registry:ui"
}