{
  "name": "PackageGrid",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/PackageGrid.tsx",
  "chapterTag": "23 Workspace",
  "chapter": "23-workspace.html",
  "sectionId": null,
  "elName": null,
  "demoUrl": null,
  "hasLiveDemo": false,
  "description": "Radio-style \"pick one amount / tier / size\" grid. Six columns on\ndesktop, three on tablet. Each option is a `<button role=\"radio\">`\n(rendered by `<PackageOption>`) so the kit's row-hover token drives\nthe rest state and `selected` toggles to the accent-soft fill.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "PackageGrid",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "PackageOption",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "PackageGridProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "PackageOptionProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { PackageGrid } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "label",
      "optional": true,
      "type": "string",
      "doc": "Accessible label for the radio-group (e.g. \"Top-up amount\", \"Plan tier\", \"Retention window\"). Renders via `aria-label`."
    },
    {
      "name": "children",
      "optional": true,
      "type": "ReactNode",
      "doc": "`<PackageOption>` children — one per pickable value."
    },
    {
      "name": "className",
      "optional": true,
      "type": "string",
      "doc": ""
    }
  ],
  "classesUsed": [
    "st-package",
    "st-package-grid"
  ],
  "examples": {
    "react": "const [amount, setAmount] = useState(100);\n<PackageGrid label=\"Top-up amount\">\n  {[25, 50, 100, 200, 500, 1000].map(n => (\n    <PackageOption key={n} selected={amount === n} onClick={() => setAmount(n)}>\n      ${n}\n    </PackageOption>\n  ))}\n</PackageGrid>",
    "html": null,
    "css": ".st-package {\n  padding: var(--s-3) var(--s-2);\n  background: var(--bg-paper);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-md);\n  font: 600 16px/1 var(--f-display);\n  color: var(--fg);\n  cursor: pointer;\n  text-align: center;\n  transition: background var(--dur-2) var(--ease),\n              border-color var(--dur-2) var(--ease),\n              color var(--dur-2) var(--ease);\n}\n\n.st-package-grid {\n  display: grid;\n  grid-template-columns: repeat(6, 1fr);\n  gap: var(--s-2);\n}"
  }
}