{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "radio-card",
  "type": "registry:ui",
  "title": "Option cards (MIAN)",
  "description": "Selectable cards for shipping, plans or payment, and pill options for sizes and variants.",
  "categories": [
    "forms",
    "radio card",
    "option card",
    "selectable card",
    "shipping options"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/radio-card.css",
      "type": "registry:file",
      "target": "mian/components/radio-card.css",
      "content": ".mn-choices { display: grid; gap: .6rem; min-inline-size: 0; margin: 0; padding: 0; border: 0; }\n.mn-choices > legend { grid-column: 1 / -1; float: left; width: 100%; margin: 0 0 .6rem; padding: 0; font: 500 var(--mn-text-sm)/1.3 var(--mn-font); }\n.mn-choice {\n  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .15rem .8rem; align-items: center;\n  padding: .9rem 1rem; border: var(--mn-border-w) solid var(--mn-input); border-radius: var(--mn-radius-box); background: var(--mn-surface); color: var(--mn-fg); cursor: pointer;\n  transition: border-color var(--mn-duration) var(--mn-ease), background-color var(--mn-duration) var(--mn-ease), box-shadow var(--mn-duration) var(--mn-ease);\n}\n.mn-choice > input { grid-row: span 2; }\n.mn-choice-title { font-weight: 600; font-size: .9375rem; }\n.mn-choice-desc { grid-column: 2; color: var(--mn-muted); font-size: var(--mn-text-sm); line-height: 1.45; }\n.mn-choice-meta { grid-column: 3; grid-row: 1 / span 2; font-weight: 600; font-variant-numeric: tabular-nums; }\n.mn-choice:hover { border-color: color-mix(in oklab, var(--mn-input), var(--mn-fg) 40%); }\n.mn-choice:has(input:checked) { border-color: var(--mn-primary); background: color-mix(in oklab, var(--mn-primary) 5%, var(--mn-surface)); box-shadow: 0 0 0 1px var(--mn-primary); }\n.mn-choice:has(input:disabled) { cursor: not-allowed; opacity: .55; }\n.mn-choices-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }\n.mn-choices-pills { display: flex; flex-wrap: wrap; gap: .5rem; }\n.mn-choices-pills > legend { flex: 0 0 100%; }\n.mn-choices-pills .mn-choice { display: inline-grid; grid-template-columns: auto; justify-items: center; min-width: 3rem; padding: .5rem .9rem; border-radius: var(--mn-radius-field); }\n.mn-choices-pills .mn-choice > input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: inherit; }\n.mn-choices-pills .mn-choice:has(input:focus-visible) { outline: 2px solid var(--mn-ring); outline-offset: 2px; }\n.mn-choices-pills .mn-choice:has(input:checked) { background: var(--mn-primary); color: var(--mn-primary-fg); }\n.mn-choices-pills .mn-choice:has(input:disabled) { text-decoration: line-through; }"
    },
    {
      "path": "mian/examples/radio-card.html",
      "type": "registry:file",
      "target": "mian/examples/radio-card.html",
      "content": "<!-- Shipping -->\n<fieldset class=\"mn-choices\" style=\"max-width:28rem\"><legend>Delivery</legend>\n  <label class=\"mn-choice\"><input class=\"mn-radio\" type=\"radio\" name=\"ship\" checked><span class=\"mn-choice-title\">Standard</span><span class=\"mn-choice-desc\">3–5 working days, tracked</span><span class=\"mn-choice-meta\">Free</span></label>\n  <label class=\"mn-choice\"><input class=\"mn-radio\" type=\"radio\" name=\"ship\"><span class=\"mn-choice-title\">Express</span><span class=\"mn-choice-desc\">Tomorrow before 12:00</span><span class=\"mn-choice-meta\">€9</span></label>\n  <label class=\"mn-choice\"><input class=\"mn-radio\" type=\"radio\" name=\"ship\" disabled><span class=\"mn-choice-title\">Pick up in Horezu</span><span class=\"mn-choice-desc\">Studio closed until 1 October</span><span class=\"mn-choice-meta\">—</span></label>\n</fieldset>\n\n<!-- Sizes -->\n<fieldset class=\"mn-choices mn-choices-pills\"><legend>Size</legend>\n  <label class=\"mn-choice\"><input type=\"radio\" name=\"size\" value=\"XS\">XS</label><label class=\"mn-choice\"><input type=\"radio\" name=\"size\" value=\"S\">S</label><label class=\"mn-choice\"><input type=\"radio\" name=\"size\" value=\"M\" checked>M</label><label class=\"mn-choice\"><input type=\"radio\" name=\"size\" value=\"L\">L</label><label class=\"mn-choice\"><input type=\"radio\" name=\"size\" value=\"XL\" disabled aria-label=\"XL, sold out\">XL</label>\n</fieldset>"
    }
  ],
  "docs": "MIAN components are HTML + CSS classes, not React components. The styles are already included in mian-base; this item adds the component's CSS section and example markup for reference. Docs: https://mian.ro/components/radio-card",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-choices",
        "mn-choice",
        "mn-choices-pills"
      ],
      "accessibility": [
        "Native radios: arrow keys move between options and the whole card is the click target.",
        "Disabled options stay visible and say why (“Sold out”)."
      ],
      "intents": [
        "shipping options",
        "choose a plan",
        "payment method",
        "size picker",
        "option cards",
        "delivery choice"
      ]
    }
  }
}