{
  "name": "UsageMeter",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/UsageMeter.tsx",
  "chapterTag": "22 Billing",
  "chapter": "22-billing.html",
  "sectionId": "usage-meter",
  "elName": "Three meters — healthy, approaching, over",
  "demoUrl": "https://brand.magicblocks.ai/components/22-billing#usage-meter",
  "hasLiveDemo": false,
  "description": "Labeled progress bar with current/limit numbers, an overage indicator,\nand an optional projection line. Pure presentational — the consumer\npasses the data, the component decides the visual state from the\n`current/limit` ratio:",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "UsageMeter",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "UsageMeterProps",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { UsageMeter } from \"@magicblocksai/ui\";",
  "props": [],
  "classesUsed": [
    "usage-meter",
    "usage-meter-bar",
    "usage-meter-fill",
    "usage-meter-head",
    "usage-meter-label",
    "usage-meter-numbers",
    "usage-meter-overage",
    "usage-meter-overage-icon",
    "usage-meter-projection"
  ],
  "examples": {
    "react": "<UsageMeter\n  label=\"Storage\"\n  current={8.8}\n  limit={10}\n  unit=\"GB\"\n  format={(n) => n.toFixed(1)}\n/>",
    "html": "<div class=\"usage-meter-stack\">\n  <div class=\"usage-meter\">\n    <div class=\"usage-meter-head\">\n      <span class=\"usage-meter-label\">API calls this month</span>\n      <span class=\"usage-meter-numbers\">31,247 / 100,000 calls</span>\n    </div>\n    <div class=\"usage-meter-bar\">\n      <span class=\"usage-meter-fill\" style=\"width:31.247%\"></span>\n    </div>\n  </div>\n  <div class=\"usage-meter is-approaching\">\n    <div class=\"usage-meter-head\">\n      <span class=\"usage-meter-label\">Storage</span>\n      <span class=\"usage-meter-numbers\">8.8 / 10.0 GB</span>\n    </div>\n    <div class=\"usage-meter-bar\">\n      <span class=\"usage-meter-fill\" style=\"width:88%\"></span>\n    </div>\n  </div>\n  <div class=\"usage-meter is-over\">\n    <div class=\"usage-meter-head\">\n      <span class=\"usage-meter-label\">Seats</span>\n      <span class=\"usage-meter-numbers\">26 / 20 seats</span>\n    </div>\n    <div class=\"usage-meter-bar\">\n      <span class=\"usage-meter-fill\" style=\"width:100%\"></span>\n    </div>\n    <span class=\"usage-meter-overage\"><svg viewBox=\"0 0 16 16\" aria-hidden=\"true\" class=\"usage-meter-overage-icon\"><path d=\"M8 2.5L14.5 13.5H1.5L8 2.5Z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/><path d=\"M8 6.75V9.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/><circle cx=\"8\" cy=\"11.5\" r=\"0.85\" fill=\"currentColor\"/></svg>Over by 6 seats</span>\n  </div>\n</div>",
    "css": ".usage-meter {\n  display: flex;\n  flex-direction: column;\n  gap: var(--s-2);\n}\n\n.usage-meter-bar {\n  position: relative;\n  height: 8px;\n  border-radius: 999px;\n  background: var(--bg-sunk);\n  overflow: hidden;\n}\n\n.usage-meter-fill {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  width: 0;\n  background: var(--accent);\n  border-radius: 999px;\n  transition: width var(--dur-3) var(--ease);\n}\n\n.usage-meter-head {\n  display: flex;\n  flex-direction: row;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--s-2);\n}\n\n.usage-meter-label {\n  font: 500 14px/1.3 var(--f-body);\n  color: var(--fg);\n}\n\n.usage-meter-numbers {\n  font: 500 13px/1.3 var(--f-mono);\n  color: var(--fg-soft);\n  font-variant-numeric: tabular-nums;\n}\n\n.usage-meter-overage {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font: 500 12px/1.3 var(--f-body);\n  color: var(--error-text);\n}\n\n.usage-meter-overage-icon {\n  flex-shrink: 0;\n  width: 14px;\n  height: 14px;\n  color: var(--error-text);\n}\n\n.usage-meter-projection {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 1px;\n  border-left: 1px dashed var(--fg-dim);\n  pointer-events: none;\n}"
  }
}