{
  "name": "RateCard",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/RateCard.tsx",
  "chapterTag": "07 Data Display",
  "chapter": "08-data-display.html",
  "sectionId": "rate-card",
  "elName": "4-up rate strip",
  "demoUrl": "https://brand.magicblocks.ai/components/08-data-display#rate-card",
  "hasLiveDemo": false,
  "description": "Metric + tonal progress card — the \"rate strip\" pattern (worked-lead\nrate, opt-out, fail-error). Eyebrow + sub + tone-coloured big number\n+ optional 4 px tinted progress bar.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "RateCard",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "RateCardProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "RateCardTone",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { RateCard } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "label",
      "optional": false,
      "type": "ReactNode",
      "doc": "Eyebrow / label."
    },
    {
      "name": "sub",
      "optional": true,
      "type": "ReactNode",
      "doc": "Caption under the label. Optional."
    },
    {
      "name": "value",
      "optional": false,
      "type": "ReactNode",
      "doc": "Big tone-coloured value (typically `\"73%\"`, `\"2.1%\"`, etc.)."
    },
    {
      "name": "tone",
      "optional": true,
      "type": "RateCardTone",
      "doc": "Colour band for the value + progress bar. Default `\"neutral\"`."
    },
    {
      "name": "pct",
      "optional": true,
      "type": "number",
      "doc": "0–100. When set, renders a 4 px tinted progress bar below the value. Omit for non-rate metrics (counts, durations) — reach for `<KpiTile>` or `<KpiDeltaTile>` there."
    }
  ],
  "classesUsed": [
    "rate-card",
    "rate-card-bar",
    "rate-card-bar-fill",
    "rate-card-label",
    "rate-card-sub",
    "rate-card-value"
  ],
  "examples": {
    "react": "<RateCard label=\"Worked lead rate\" sub=\"of 248 leads\" value=\"73%\" tone=\"success\" pct={73} />\n<RateCard label=\"Fail-error\"      sub=\"last 24h\"     value=\"2.1%\" tone=\"danger\"  pct={2.1} />",
    "html": "<div style=\"display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3)\"><div class=\"rate-card rate-card-tone-success\"><div class=\"rate-card-label\">Worked lead rate</div><div class=\"rate-card-sub\">of 248 leads</div><div class=\"rate-card-value\">73%</div><div class=\"rate-card-bar\" role=\"progressbar\" aria-valuenow=\"73\" aria-valuemin=\"0\" aria-valuemax=\"100\"><div class=\"rate-card-bar-fill\" style=\"width:73%\"></div></div></div><div class=\"rate-card rate-card-tone-info\"><div class=\"rate-card-label\">Lead handover</div><div class=\"rate-card-sub\">this week</div><div class=\"rate-card-value\">34</div></div><div class=\"rate-card rate-card-tone-warning\"><div class=\"rate-card-label\">Opt-out</div><div class=\"rate-card-sub\">last 24h</div><div class=\"rate-card-value\">0.6%</div><div class=\"rate-card-bar\" role=\"progressbar\" aria-valuenow=\"1\" aria-valuemin=\"0\" aria-valuemax=\"100\"><div class=\"rate-card-bar-fill\" style=\"width:0.6%\"></div></div></div><div class=\"rate-card rate-card-tone-danger\"><div class=\"rate-card-label\">Fail-error</div><div class=\"rate-card-sub\">last 24h</div><div class=\"rate-card-value\">2.1%</div><div class=\"rate-card-bar\" role=\"progressbar\" aria-valuenow=\"2\" aria-valuemin=\"0\" aria-valuemax=\"100\"><div class=\"rate-card-bar-fill\" style=\"width:2.1%\"></div></div></div></div>",
    "css": ".rate-card {\n  background: var(--bg-paper);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-md);\n  padding: var(--s-4);\n  display: flex; flex-direction: column; gap: 2px;\n}\n\n.rate-card-bar {\n  height: 4px; background: var(--hair); border-radius: 2px;\n  overflow: hidden; margin-top: var(--s-2);\n}\n\n.rate-card-bar-fill { height: 100%; background: currentColor; transition: width 220ms ease-out; }\n\n.rate-card-label {\n  font: 500 11px/1 var(--f-mono);\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  color: var(--fg-soft);\n}\n\n.rate-card-sub { font-size: 12px; color: var(--fg-soft); margin-bottom: var(--s-2); }\n\n.rate-card-value {\n  font: 600 28px/1.1 var(--f-display);\n  letter-spacing: -0.01em;\n  margin-top: var(--s-1);\n  font-variant-numeric: tabular-nums;\n}"
  }
}