{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "aurora-checkbox",
  "title": "Aurora Checkbox & Radio",
  "author": "jmagar <https://github.com/jmagar>",
  "description": "Aurora-styled native checkbox with mixed-state support, focus glow, and label-friendly semantics.",
  "dependencies": [
    "lucide-react@^0.487.0"
  ],
  "registryDependencies": [
    "@aurora/aurora-tokens",
    "@aurora/aurora-input"
  ],
  "files": [
    {
      "path": "registry/aurora/ui/checkbox.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, Minus } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\nimport { Input } from \"./input\"\n\nexport interface CheckboxProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"children\" | \"onChange\" | \"size\" | \"type\"> {\n  checked?: boolean\n  defaultChecked?: boolean\n  /** Tri-state: render a dash instead of a tick (e.g. a partially-selected group). Visually overrides `checked`. */\n  indeterminate?: boolean\n  onChange?: React.ChangeEventHandler<HTMLInputElement>\n  onCheckedChange?: (checked: boolean) => void\n  /** Label content rendered next to the box. */\n  children?: React.ReactNode\n}\n\nfunction Checkbox({\n  ref,\n  checked,\n  defaultChecked = false,\n  indeterminate = false,\n  onCheckedChange,\n  children,\n  className,\n  disabled,\n  id,\n  style,\n  onFocus,\n  onBlur,\n  onChange,\n  ...props\n}: CheckboxProps & { ref?: React.Ref<HTMLInputElement> }) {\n  const generatedId = React.useId()\n  const resolvedId = id ?? generatedId\n  const isControlled = checked !== undefined\n  const [internalChecked, setInternalChecked] = React.useState(defaultChecked)\n  const [focused, setFocused] = React.useState(false)\n  const inputRef = React.useRef<HTMLInputElement | null>(null)\n\n  const setRefs = React.useCallback(\n    (node: HTMLInputElement | null) => {\n      inputRef.current = node\n      if (typeof ref === \"function\") {\n        ref(node)\n      } else if (ref) {\n        ;(ref as React.MutableRefObject<HTMLInputElement | null>).current = node\n      }\n    },\n    [ref]\n  )\n\n  const currentChecked = Boolean(isControlled ? checked : internalChecked)\n  const state = indeterminate ? \"indeterminate\" : currentChecked ? \"checked\" : \"unchecked\"\n\n  React.useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = indeterminate\n    }\n  }, [indeterminate])\n\n  const input = (\n    <Input\n      {...props}\n      id={resolvedId}\n      ref={setRefs}\n      unstyled\n      type=\"checkbox\"\n      disabled={disabled}\n      className=\"sr-only\"\n      checked={isControlled ? currentChecked : undefined}\n      defaultChecked={isControlled ? undefined : defaultChecked}\n      onChange={(event) => {\n        if (!isControlled) {\n          setInternalChecked(event.target.checked)\n        }\n        onCheckedChange?.(event.target.checked)\n        onChange?.(event)\n      }}\n      onFocus={(event) => {\n        setFocused(true)\n        onFocus?.(event)\n      }}\n      onBlur={(event) => {\n        setFocused(false)\n        onBlur?.(event)\n      }}\n    />\n  )\n\n  const indicator = (\n    <span\n      aria-hidden=\"true\"\n      data-state={state}\n      className=\"inline-grid size-[19px] shrink-0 place-items-center rounded-[5px]\"\n      style={{\n        background:\n          indeterminate || currentChecked\n            ? \"color-mix(in srgb, var(--aurora-accent-primary) 30%, var(--aurora-control-surface))\"\n            : \"var(--aurora-control-surface)\",\n        border: `1px solid ${\n          indeterminate || currentChecked\n            ? \"color-mix(in srgb, var(--aurora-accent-primary) 60%, var(--aurora-border-strong))\"\n            : \"var(--aurora-border-strong)\"\n        }`,\n        boxShadow: focused\n          ? \"0 0 0 3px color-mix(in srgb, var(--aurora-accent-primary) 22%, transparent)\"\n          : indeterminate || currentChecked\n            ? \"0 0 0 1px color-mix(in srgb, var(--aurora-accent-primary) 22%, transparent)\"\n            : \"var(--aurora-highlight-medium)\",\n        color: \"var(--aurora-accent-strong)\",\n        opacity: disabled ? 0.45 : 1,\n        transition: \"background 140ms ease, border-color 140ms ease, box-shadow 140ms ease\",\n      }}\n    >\n      <Check\n        className={cn(\"h-[13px] w-[13px]\", indeterminate ? \"hidden\" : currentChecked ? \"block\" : \"hidden\")}\n        strokeWidth=\"2.4\"\n      />\n      <Minus\n        className={cn(\"h-[13px] w-[13px]\", indeterminate ? \"block\" : \"hidden\")}\n        strokeWidth=\"2.4\"\n      />\n    </span>\n  )\n\n  if (!children) {\n    return (\n      <label\n        htmlFor={resolvedId}\n        className={cn(\n          \"inline-flex items-center\",\n          disabled ? \"cursor-not-allowed\" : \"cursor-pointer\",\n          className\n        )}\n        style={style}\n      >\n        {input}\n        {indicator}\n      </label>\n    )\n  }\n\n  return (\n    <label\n      htmlFor={resolvedId}\n      className={cn(\n        \"inline-flex items-center gap-[10px]\",\n        disabled ? \"cursor-not-allowed\" : \"cursor-pointer\",\n        className\n      )}\n      style={style}\n    >\n      {input}\n      {indicator}\n      <span\n        style={{\n          color: disabled ? \"var(--aurora-disabled-text)\" : \"var(--aurora-text-primary)\",\n          fontFamily: \"var(--aurora-font-sans)\",\n          fontSize: \"var(--aurora-type-control)\",\n          fontWeight: \"var(--aurora-weight-body)\",\n          letterSpacing: \"var(--aurora-letter-ui)\",\n          lineHeight: \"var(--aurora-line-ui)\",\n          userSelect: \"none\",\n        }}\n      >\n        {children}\n      </span>\n    </label>\n  )\n}\n\nexport { Checkbox }\nexport default Checkbox\n",
      "type": "registry:ui",
      "target": "@ui/aurora/checkbox.tsx"
    }
  ],
  "meta": {
    "namespace": "@aurora",
    "style": "aurora",
    "family": "ui",
    "requiresTokens": true,
    "sourcePath": "registry/aurora/ui/checkbox.tsx",
    "installTarget": "@ui/aurora/checkbox.tsx"
  },
  "docs": "Aurora UI component that installs Aurora Checkbox.\n\nInstall `aurora-tokens` and `aurora-input` first; the shadcn CLI resolves these automatically through the @aurora registry namespace.\n\nDefault install target: `@ui/aurora/checkbox.tsx`.\n\nRegistry dependencies: `aurora-tokens`, `aurora-input`.",
  "categories": [
    "aurora",
    "ui",
    "forms"
  ],
  "type": "registry:ui"
}