{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox",
  "title": "Checkbox",
  "description": "Checkboxes with a self-drawing check mark and an indeterminate state.",
  "dependencies": [
    "class-variance-authority",
    "radix-ui"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.cuelark.com/r/theme.json",
    "https://ui.cuelark.com/r/motion.json"
  ],
  "files": [
    {
      "path": "src/registry/cuelark/ui/checkbox.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { gsap, motionScale, useAttributeCue, useMergedRef } from \"@/lib/motion\";\nimport { cn } from \"@/lib/utils\";\n\nconst checkboxVariants = cva(\n  \"group/checkbox peer inline-grid shrink-0 place-items-center border border-input bg-card text-primary-foreground shadow-well outline-none transition-[background-color,border-color,box-shadow] duration-150 ease-cue focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:shadow-control data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:shadow-control\",\n  {\n    variants: {\n      size: {\n        sm: \"size-3.5 rounded-[calc(var(--radius)*0.4)]\",\n        md: \"size-4 rounded-[calc(var(--radius)*0.5)]\",\n        lg: \"size-5 rounded-[calc(var(--radius)*0.6)]\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\ntype CheckboxProps = React.ComponentProps<typeof CheckboxPrimitive.Root> & VariantProps<typeof checkboxVariants>;\n\n/** Supports `checked=\"indeterminate\"`; the check mark draws itself in and the box pops (GSAP) when ticked. */\nfunction Checkbox({ className, size = \"md\", ref, ...props }: CheckboxProps) {\n  const rootRef = React.useRef<HTMLButtonElement>(null);\n  const mergedRef = useMergedRef(rootRef, ref);\n\n  useAttributeCue(rootRef, \"data-state\", (state, root) => {\n    const scale = motionScale(root);\n    if (!scale || state === \"unchecked\") return;\n    gsap.fromTo(root, { scale: 1 - 0.18 * scale }, { scale: 1, duration: 0.45, ease: \"cue-snap\" });\n  });\n\n  return (\n    <CheckboxPrimitive.Root ref={mergedRef} data-slot=\"checkbox\" className={cn(checkboxVariants({ size }), className)} {...props}>\n      <svg viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\" className=\"col-start-1 row-start-1 size-[85%]\">\n        <path\n          d=\"M3.5 8.5l3 3 6-7\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          className=\"[stroke-dasharray:15] [stroke-dashoffset:15] transition-[stroke-dashoffset] duration-200 ease-cue group-data-[state=checked]/checkbox:[stroke-dashoffset:0] motion-reduce:transition-none\"\n        />\n      </svg>\n      <svg viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\" className=\"col-start-1 row-start-1 size-[85%]\">\n        <path d=\"M4 8h8\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" className=\"opacity-0 group-data-[state=indeterminate]/checkbox:opacity-100\" />\n      </svg>\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport { Checkbox, checkboxVariants };\nexport type { CheckboxProps };\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Docs and examples: https://ui.cuelark.com/components/checkbox",
  "categories": [
    "forms"
  ],
  "type": "registry:ui"
}