{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "meter-group",
  "title": "Meter Group",
  "description": "One bar split into labelled parts against a total, with a legend that carries the numbers, for storage, budgets and quotas.",
  "files": [
    {
      "path": "registry/tealmac/meter-group.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface MeterGroupItem {\n  label: string\n  value: number\n  /** A Tailwind background class, for example \"bg-sky-600\". Defaults cycle through chart colours. */\n  className?: string\n}\n\nexport interface MeterGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  items: MeterGroupItem[]\n  /** The total the bar represents. Default: the sum of the values. */\n  max?: number\n  /** Unit shown after the legend values, for example \"GB\". */\n  unit?: string\n  /** Names the whole bar, for example \"Storage used\". */\n  label: string\n}\n\nconst FALLBACK = [\n  \"bg-chart-1\",\n  \"bg-chart-2\",\n  \"bg-chart-3\",\n  \"bg-chart-4\",\n  \"bg-chart-5\",\n]\n\n/**\n * One bar split into several labelled parts, with a legend that carries the\n * numbers. The bar is a single `meter`-like image with a text summary, and the\n * legend is a list, so the values never depend on colour alone.\n */\nexport function MeterGroup({\n  items,\n  max,\n  unit = \"\",\n  label,\n  className,\n  ...props\n}: MeterGroupProps) {\n  const sum = items.reduce((a, b) => a + Math.max(0, b.value), 0)\n  const total = max ?? sum\n  const pct = (v: number) => (total > 0 ? Math.min(100, (v / total) * 100) : 0)\n  const summary = items.map((i) => `${i.label} ${i.value}${unit}`).join(\", \")\n  return (\n    <div className={cn(\"w-full space-y-3\", className)} {...props}>\n      <div\n        role=\"img\"\n        aria-label={`${label}: ${summary}${max ? ` of ${max}${unit}` : \"\"}`}\n        className=\"bg-muted flex h-3 w-full gap-0.5 overflow-hidden rounded-full\"\n      >\n        {items.map((item, i) => (\n          <div\n            key={item.label}\n            className={cn(\n              \"h-full first:rounded-s-full last:rounded-e-full\",\n              item.className ?? FALLBACK[i % FALLBACK.length]\n            )}\n            style={{ width: `${pct(item.value)}%` }}\n          />\n        ))}\n      </div>\n      <ul className=\"flex flex-wrap gap-x-5 gap-y-1.5 text-sm\">\n        {items.map((item, i) => (\n          <li key={item.label} className=\"flex items-center gap-2\">\n            <span\n              aria-hidden\n              className={cn(\n                \"size-2.5 rounded-full\",\n                item.className ?? FALLBACK[i % FALLBACK.length]\n              )}\n            />\n            <span>{item.label}</span>\n            <span className=\"text-muted-foreground tabular-nums\">\n              {item.value}\n              {unit}\n            </span>\n          </li>\n        ))}\n      </ul>\n    </div>\n  )\n}\n\nexport default MeterGroup\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}