{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing",
  "type": "registry:ui",
  "title": "Pricing (MIAN)",
  "description": "Plan tiers with a featured plan, feature lists and a monthly/yearly switch in pure CSS.",
  "categories": [
    "sections",
    "pricing",
    "plans",
    "tiers",
    "pricing table"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/pricing.css",
      "type": "registry:file",
      "target": "mian/components/pricing.css",
      "content": ".mn-plans { display: grid; gap: 2rem; }\n.mn-billing { justify-self: start; min-inline-size: 0; max-width: 100%; flex-wrap: wrap; }\n.mn-plans > * { min-width: 0; }\n.mn-billing input { position: absolute; opacity: 0; pointer-events: none; }\n.mn-billing label:has(input:focus-visible) { box-shadow: var(--mn-focus); }\n.mn-pricing { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: stretch; }\n@container mn (min-width: 48rem) { .mn-pricing { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }\n.mn-tier { position: relative; display: flex; flex-direction: column; gap: 1.25rem; padding: clamp(1.5rem, 3cqi, 2rem); overflow: visible; }\n.mn-tier > * { margin: 0; }\n.mn-tier-name { font: 600 1rem/1.3 var(--mn-font); color: var(--mn-fg); }\n.mn-tier-desc { color: var(--mn-muted); font-size: .9375rem; line-height: 1.55; }\n.mn-tier .mn-checklist { font-size: .9375rem; }\n.mn-tier-action { width: 100%; }\n.mn-tier-featured { outline: 2px solid var(--mn-primary); outline-offset: -1px; }\n.mn-tier-badge { position: absolute; top: 1.25rem; right: 1.25rem; }\n.mn-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem; }\n.mn-price-amount { font: var(--mn-heading-weight) clamp(2.25rem, 1.8rem + 1.5cqi, 3rem)/1 var(--mn-font-heading); letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--mn-fg); }\n.mn-price-period { color: var(--mn-muted); font-size: .875rem; }\n.mn-plans [data-period=\"yearly\"], .mn-plans:has(input[value=\"yearly\"]:checked) [data-period=\"monthly\"] { display: none; }\n.mn-plans:has(input[value=\"yearly\"]:checked) [data-period=\"yearly\"] { display: inline; }"
    },
    {
      "path": "mian/examples/pricing.html",
      "type": "registry:file",
      "target": "mian/examples/pricing.html",
      "content": "<!-- Pricing -->\n<section class=\"mn-section mn-section-sm\"><div class=\"mn-container mn-plans\">\n  <fieldset class=\"mn-toggle-group mn-billing\" style=\"border:0;margin:0\"><legend class=\"mn-sr-only\">Billing period</legend>\n    <label><input type=\"radio\" name=\"billing-ex\" value=\"monthly\" checked>Monthly</label>\n    <label><input type=\"radio\" name=\"billing-ex\" value=\"yearly\">Yearly · 2 months free</label>\n  </fieldset>\n  <div class=\"mn-pricing\">\n    <article class=\"mn-card mn-tier\"><h3 class=\"mn-tier-name\">Starter</h3><p class=\"mn-tier-desc\">One entity, up to 5 accounts.</p>\n      <p class=\"mn-price\"><span class=\"mn-price-amount\"><span data-period=\"monthly\">€49</span><span data-period=\"yearly\">€41</span></span><span class=\"mn-price-period\">per month</span></p>\n      <a class=\"mn-btn mn-btn-outline mn-tier-action\" href=\"#\">Start free</a>\n      <ul class=\"mn-checklist\"><li>Nightly reconciliation</li><li>2 users</li><li class=\"mn-off\"><span class=\"mn-sr-only\">Not included: </span>Multi-entity</li></ul></article>\n    <article class=\"mn-card mn-tier mn-tier-featured\"><span class=\"mn-badge mn-tier-badge\">Most teams</span><h3 class=\"mn-tier-name\">Team</h3><p class=\"mn-tier-desc\">Up to 5 entities and 50 accounts.</p>\n      <p class=\"mn-price\"><span class=\"mn-price-amount\"><span data-period=\"monthly\">€190</span><span data-period=\"yearly\">€158</span></span><span class=\"mn-price-period\">per month</span></p>\n      <a class=\"mn-btn mn-tier-action\" href=\"#\">Start free</a>\n      <ul class=\"mn-checklist\"><li>Everything in Starter</li><li>Multi-entity and currency</li><li>10 users</li></ul></article>\n    <article class=\"mn-card mn-tier\"><h3 class=\"mn-tier-name\">Scale</h3><p class=\"mn-tier-desc\">Unlimited entities, SSO and an auditor seat.</p>\n      <p class=\"mn-price\"><span class=\"mn-price-amount\">Custom</span></p>\n      <a class=\"mn-btn mn-btn-outline mn-tier-action\" href=\"#\">Talk to us</a>\n      <ul class=\"mn-checklist\"><li>Everything in Team</li><li>SAML SSO and audit log export</li><li>Named support</li></ul></article>\n  </div>\n</div></section>"
    }
  ],
  "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/pricing",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-plans",
        "mn-billing",
        "mn-pricing",
        "mn-tier",
        "mn-tier-name · mn-tier-desc · mn-tier-action",
        "mn-price"
      ],
      "accessibility": [
        "The billing switch is a real radio group inside a <fieldset> with a <legend> (visually hidden if you like).",
        "Hidden prices use display:none, so screen readers read only the current period.",
        "Say what “featured” means in text (the badge), not only with the outline."
      ],
      "intents": [
        "saas pricing",
        "pricing plans",
        "subscription tiers",
        "monthly yearly toggle",
        "compare plans",
        "tickets"
      ]
    }
  }
}