{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "quota-bar",
  "type": "registry:ui",
  "title": "Quota bar",
  "description": "Compact quota bar showing a label, used over max with locale formatting, and a thin accent progress track exposed as an ARIA progressbar for plan limits.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/quota-bar.tsx",
      "type": "registry:ui",
      "target": "components/ui/quota-bar.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\n/** QuotaBar — a labelled usage meter that reads \"used / max\" and fills to the percentage. */\n\ntype QuotaBarProps = {\n  label?: string\n  used?: number\n  max?: number\n  className?: string\n}\n\nfunction QuotaBar({\n  label = \"API requests\",\n  used = 72400,\n  max = 100000,\n  className,\n}: QuotaBarProps) {\n  const pct = max <= 0 ? 0 : Math.min(100, Math.round((used / max) * 100))\n  return (\n    <div data-slot=\"quota-bar\" className={cn(\"min-w-64 space-y-1.5\", className)}>\n      <div className=\"flex justify-between text-xs\">\n        <span className=\"font-medium text-fg\">{label}</span>\n        <span className=\"tabular-nums text-fg-muted\">{used.toLocaleString()} / {max.toLocaleString()}</span>\n      </div>\n      <div\n        className=\"h-1.5 overflow-hidden rounded-full bg-sunken\"\n        role=\"progressbar\"\n        aria-label={label}\n        aria-valuenow={pct}\n        aria-valuemin={0}\n        aria-valuemax={100}\n      >\n        <div className=\"h-full rounded-full bg-accent transition-[width] duration-[140ms]\" style={{ width: `${pct}%` }} />\n      </div>\n    </div>\n  )\n}\nexport { QuotaBar }\nexport type { QuotaBarProps }\n"
    }
  ]
}