{
  "name": "RadioCardList",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/RadioCardList.tsx",
  "chapterTag": "04 Forms & Inputs",
  "chapter": "05-forms-and-inputs.html",
  "sectionId": "radio-card-list",
  "elName": "RadioCardList",
  "demoUrl": "https://brand.magicblocks.ai/components/05-forms-and-inputs#radio-card-list",
  "hasLiveDemo": false,
  "description": "Vertical radio list rendered as cards with label + description + optional\nreveal sub-form. The kit's standard \"pick one option from a few, each\nwith explanation\" shape — used for the per-block First Action picker\n(8 types), Form Interaction radio cards, Region select (US/EU/AU),\nOff/On config panels, and Credits top-up package picker.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "RadioCardList",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "RadioCardListProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "RadioCardItem",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { RadioCardList } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "items",
      "optional": false,
      "type": "RadioCardItem[]",
      "doc": "Available items."
    },
    {
      "name": "value",
      "optional": true,
      "type": "string | null",
      "doc": "Controlled selected id."
    },
    {
      "name": "defaultValue",
      "optional": true,
      "type": "string | null",
      "doc": "Uncontrolled initial selected id."
    },
    {
      "name": "onValueChange",
      "optional": true,
      "type": "(id: string | null) => void",
      "doc": "Fires when selection changes."
    },
    {
      "name": "name",
      "optional": true,
      "type": "string",
      "doc": "Group name (applied to every input). Auto-generated otherwise."
    },
    {
      "name": "disabled",
      "optional": true,
      "type": "boolean",
      "doc": "Disable the whole group."
    },
    {
      "name": "layout",
      "optional": true,
      "type": "\"list\" | \"grid\"",
      "doc": "Layout: vertical list (default) or a responsive tile grid."
    },
    {
      "name": "columns",
      "optional": true,
      "type": "number",
      "doc": "Grid column count (grid layout only). Default 2; collapses to 1 on narrow viewports."
    }
  ],
  "classesUsed": [
    "radio-card",
    "radio-card-body",
    "radio-card-description",
    "radio-card-icon",
    "radio-card-input",
    "radio-card-label",
    "radio-card-list",
    "radio-card-meta",
    "radio-card-radio",
    "radio-card-reveal",
    "radio-card-title"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"radio-card-list\" role=\"radiogroup\">\n  <div class=\"radio-card is-selected\">\n    <label class=\"radio-card-label\">\n      <input type=\"radio\" name=\"rcl-demo\" class=\"radio-card-input\" checked>\n      <span class=\"radio-card-radio\" aria-hidden=\"true\"></span>\n      <span class=\"radio-card-body\">\n        <span class=\"radio-card-title\">Send message</span>\n        <span class=\"radio-card-description\">Greet the contact with a custom message when the block fires.</span>\n      </span>\n    </label>\n  </div>\n  <div class=\"radio-card\">\n    <label class=\"radio-card-label\">\n      <input type=\"radio\" name=\"rcl-demo\" class=\"radio-card-input\">\n      <span class=\"radio-card-radio\" aria-hidden=\"true\"></span>\n      <span class=\"radio-card-body\">\n        <span class=\"radio-card-title\">Run task</span>\n        <span class=\"radio-card-description\">Trigger a Library task before responding.</span>\n      </span>\n    </label>\n  </div>\n  <div class=\"radio-card\">\n    <label class=\"radio-card-label\">\n      <input type=\"radio\" name=\"rcl-demo\" class=\"radio-card-input\">\n      <span class=\"radio-card-radio\" aria-hidden=\"true\"></span>\n      <span class=\"radio-card-body\">\n        <span class=\"radio-card-title\">Do nothing</span>\n        <span class=\"radio-card-description\">Wait silently for the user to say something first.</span>\n      </span>\n    </label>\n  </div>\n</div>",
    "css": ".radio-card {\n  border: 1px solid var(--hair);\n  border-radius: var(--r-md);\n  background: var(--bg-paper);\n  transition: border-color var(--dur-2) var(--ease),\n              background var(--dur-2) var(--ease);\n}\n\n.radio-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }\n\n.radio-card-description { font: 400 13px/1.4 var(--f-body); color: var(--fg-soft); }\n\n.radio-card-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--fg-soft);\n  width: 24px;\n  height: 24px;\n}\n\n.radio-card-input {\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n  width: 0; height: 0;\n}\n\n.radio-card-label {\n  display: grid;\n  grid-template-columns: auto auto 1fr auto;\n  align-items: center;\n  gap: var(--s-3);\n  padding: var(--s-3) var(--s-4);\n  cursor: pointer;\n}\n\n.radio-card-list { display: flex; flex-direction: column; gap: var(--s-2); }\n\n.radio-card-meta {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--s-2);\n}\n\n.radio-card-radio {\n  width: 16px;\n  height: 16px;\n  border-radius: 999px;\n  border: 1.5px solid var(--hair);\n  background: var(--bg-paper);\n  flex-shrink: 0;\n  position: relative;\n  transition: border-color var(--dur-2) var(--ease);\n}\n\n.radio-card-reveal {\n  padding: 0 var(--s-4) var(--s-3) calc(var(--s-3) + 24px);\n  border-top: 1px solid var(--hair-soft);\n  margin-top: -2px;\n  padding-top: var(--s-3);\n}\n\n.radio-card-title { font: 500 14px/1.3 var(--f-body); color: var(--fg); }"
  }
}