{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "usage-breakdown",
  "type": "registry:ui",
  "title": "Usage breakdown",
  "description": "Usage breakdown listing several metered items, each with its label, used over limit and a thin accent bar. Use it on billing pages to show where plan limits go.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/usage-breakdown.tsx",
      "type": "registry:ui",
      "target": "components/ui/usage-breakdown.tsx",
      "content": "\"use client\"\nimport { cn } from \"@/lib/utils\"\n\n/** A stack of labelled usage bars, each showing used against limit, for plan and billing pages. */\ntype UsageItem = { label: string; used: number; limit: number }\n\ntype UsageBreakdownProps = {\n  /** One bar per metered resource. Defaults to a Lumen workspace's monthly usage. */\n  items?: UsageItem[]\n  className?: string\n}\n\nconst SAMPLE_ITEMS: UsageItem[] = [\n  { label: \"API requests (K)\", used: 84.2, limit: 100 },\n  { label: \"Seats\", used: 18, limit: 25 },\n  { label: \"Storage (GB)\", used: 38, limit: 50 },\n  { label: \"Build minutes\", used: 2340, limit: 3000 },\n  { label: \"Environments\", used: 3, limit: 5 },\n]\n\nfunction UsageBreakdown({ items = SAMPLE_ITEMS, className }: UsageBreakdownProps) {\n  return (\n    <div data-slot=\"usage-breakdown\" className={cn(\"w-full max-w-sm space-y-3\", className)}>\n      {items.map((item) => {\n        const pct = Math.min(100, Math.round((item.used / item.limit) * 100))\n        return (\n          <div key={item.label}>\n            <div className=\"mb-1 flex justify-between text-xs\">\n              <span className=\"text-fg\">{item.label}</span>\n              <span className=\"tabular-nums text-fg-muted\">\n                {item.used}/{item.limit}\n              </span>\n            </div>\n            <div\n              className=\"h-1.5 overflow-hidden rounded-full bg-sunken\"\n              role=\"progressbar\"\n              aria-label={item.label}\n              aria-valuenow={pct}\n              aria-valuemin={0}\n              aria-valuemax={100}\n            >\n              <div className=\"h-full rounded-full bg-accent\" style={{ width: `${pct}%` }} />\n            </div>\n          </div>\n        )\n      })}\n    </div>\n  )\n}\nexport { UsageBreakdown }\nexport type { UsageBreakdownProps, UsageItem }\n"
    }
  ]
}