{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox",
  "type": "registry:component",
  "title": "Checkbox",
  "description": "Selects any number of options. A 44px target surrounds the check mark; indeterminate uses a minus.",
  "registryDependencies": [
    "https://vlak.dev/r/vlak-base.json",
    "https://vlak.dev/r/inter.json",
    "https://vlak.dev/r/vlak-lib.json",
    "https://vlak.dev/r/icons.json"
  ],
  "dependencies": [
    "@stylexjs/stylex"
  ],
  "devDependencies": [
    "@stylexjs/babel-plugin"
  ],
  "docs": "Vlak leaves are StyleX. Compile them with @stylexjs/babel-plugin (Vite: @stylexjs/unplugin, Next: @stylexjs/nextjs-plugin). If you would rather not run a compiler, import @noorddev/vlak-react instead: it ships precompiled with one stylesheet.",
  "files": [
    {
      "path": "vlak/checkbox.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport { vlak, mq } from \"./tokens.stylex\";\nimport { rs } from \"./rs\";\nimport { hidden } from \"./hidden.stylex\";\nimport { Icon } from \"./icons\";\nimport { useMergedRefs } from \"./merge-refs\";\n\nexport interface CheckboxProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"type\"> {\n  label?: React.ReactNode;\n  indeterminate?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n}\n\nconst styles = stylex.create({\n  choice: {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: {\n      default: \"0.5625rem\",\n      [mq.phone]: \"0.75rem\",\n    },\n    fontSize: {\n      default: \"0.875rem\",\n      [mq.phone]: \"1.0625rem\",\n    },\n    color: vlak.ink,\n    letterSpacing: \"-0.01em\",\n    minHeight: {\n      default: vlak.hit,\n      [mq.phone]: vlak.hit,\n    },\n    minWidth: vlak.hit,\n  },\n  check: {\n    width: {\n      default: \"1rem\",\n      [mq.phone]: \"1.375rem\",\n    },\n    height: {\n      default: \"1rem\",\n      [mq.phone]: \"1.375rem\",\n    },\n    borderRadius: {\n      default: 3,\n      [mq.phone]: 3,\n    },\n    borderWidth: 1.5,\n    borderStyle: \"solid\",\n    borderColor: {\n      default: vlak.controlBorder,\n      [mq.forcedColors]: \"CanvasText\",\n    },\n    flexShrink: 0,\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    color: vlak.paper,\n    boxSizing: \"border-box\",\n  },\n  on: {\n    backgroundColor: {\n      default: vlak.ink,\n      [mq.forcedColors]: \"Highlight\",\n    },\n    borderColor: {\n      default: vlak.ink,\n      [mq.forcedColors]: \"Highlight\",\n    },\n    color: {\n      default: vlak.paper,\n      [mq.forcedColors]: \"HighlightText\",\n    },\n    forcedColorAdjust: \"none\",\n  },\n});\n\n/** A real native checkbox; the visible 16px box mirrors its state. */\nexport const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  { label, className, style, checked, defaultChecked, indeterminate = false, onCheckedChange, onChange, ...props },\n  ref,\n) {\n  const [inner, setInner] = React.useState(defaultChecked ?? false);\n  const isControlled = checked !== undefined;\n  const on = isControlled ? checked : inner;\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const mergedRef = useMergedRefs(ref, inputRef);\n  React.useEffect(() => { if (inputRef.current) inputRef.current.indeterminate = indeterminate; }, [indeterminate]);\n  const row = rs([\"rs-choice\", className], styles.choice);\n  const sr = rs([\"rs-sr\"], hidden.sr);\n  const filled = on || indeterminate;\n  const box = rs([\"rs-check\", filled && \"rs-check-on\"], styles.check, filled && styles.on);\n  return (\n    <label className={row.className} style={{ ...row.style, ...style }}>\n      <input\n        ref={mergedRef}\n        type=\"checkbox\"\n        className={sr.className}\n        style={sr.style}\n        checked={on}\n        onChange={(e) => {\n          onChange?.(e);\n          if (e.defaultPrevented) return;\n          if (!isControlled) setInner(e.target.checked);\n          onCheckedChange?.(e.target.checked);\n        }}\n        {...props}\n      />\n      <span className={box.className} style={box.style} aria-hidden=\"true\">\n        {filled && <Icon name={indeterminate ? \"minus\" : \"check\"} size={12} />}\n      </span>\n      {label}\n    </label>\n  );\n});\n",
      "type": "registry:component",
      "target": "components/vlak/checkbox.tsx"
    },
    {
      "path": "vlak/styles/checkbox.css",
      "content": "/* ── checkbox: generated from packages/react/src/components/checkbox.tsx ── */\n.rs-choice{display:flex;align-items:center;gap:0.5625rem;font-size:0.875rem;color:var(--text);letter-spacing:-0.01em;min-height:var(--hit);min-width:var(--hit)}\n@media (max-width: 640px){.rs-choice{gap:0.75rem;font-size:1.0625rem;min-height:var(--hit)}}\n.rs-check{width:1rem;height:1rem;border-radius:3px;border-width:1.5px;border-style:solid;border-color:var(--control-border);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--bg);box-sizing:border-box}\n@media (max-width: 640px){.rs-check{width:1.375rem;height:1.375rem;border-radius:3px}}\n@media (forced-colors: active){.rs-check{border-color:CanvasText}}\n.rs-check-on{background-color:var(--text);border-color:var(--text);color:var(--bg);forced-color-adjust:none}\n@media (forced-colors: active){.rs-check-on{background-color:Highlight;border-color:Highlight;color:HighlightText}}\n",
      "type": "registry:file",
      "target": "styles/vlak/checkbox.css"
    }
  ],
  "meta": {
    "vlak": {
      "category": "forms",
      "classes": [
        "rs-choice",
        "rs-check",
        "rs-check-on"
      ],
      "snippet": "<label class=\"rs-choice\"><span class=\"rs-check rs-check-on\"><svg viewBox=\"0 0 16 16\" width=\"12\" height=\"12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 8.25 L6.25 11.5 L13 4.5\" vector-effect=\"non-scaling-stroke\"/></svg></span>Brand</label>",
      "cssOnly": false,
      "registryDependencies": [
        "vlak-lib",
        "icons"
      ],
      "aliases": [
        "Checkbox",
        "Check box",
        "Tick box"
      ],
      "example": "import { useState } from \"react\";\nimport { Checkbox } from \"@noorddev/vlak-react\";\n\nconst [opted, setOpted] = useState(false);\n\n<Checkbox label=\"Brand\" defaultChecked />\n<Checkbox label=\"Send me the newsletter\" checked={opted} onChange={(e) => setOpted(e.target.checked)} />",
      "usage": {
        "use": [
          "Independent on and off choices, alone or in a list.",
          "Consent and acknowledgement lines."
        ],
        "avoid": [
          "A setting that takes effect immediately; use Switch.",
          "One choice from many; use Radio."
        ]
      },
      "keyboard": [
        {
          "keys": "Tab",
          "does": "Moves focus to the checkbox"
        },
        {
          "keys": "Space",
          "does": "Toggles it"
        }
      ],
      "a11y": [
        "A native <input type=\"checkbox\"> hidden from view inside a <label>; the 16px box mirrors its state.",
        "label is the accessible name. Without one, pass aria-label.",
        "Controlled with checked and onCheckedChange or native onChange, or uncontrolled with defaultChecked. indeterminate sets the native mixed state."
      ]
    }
  }
}