{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comparison-bars",
  "title": "Comparison Bars",
  "description": "Readable comparison rows on a shared zero-based scale, with optional emphasis.",
  "registryDependencies": [
    "@jbm/tokens"
  ],
  "files": [
    {
      "path": "registry/jbm/ui/comparison-bars.tsx",
      "content": "import * as React from \"react\"\nimport { color, font } from \"../lib/tokens\"\n\nexport type ComparisonBarsProps = React.HTMLAttributes<HTMLDivElement> & {\n  items: { label: string; value: number; highlight?: boolean }[]\n  max?: number\n  formatValue?: (value: number) => string\n}\n\n/** Nonnegative values on a shared zero-based scale. Values remain readable without the bars. */\nexport function ComparisonBars({\n  items,\n  max,\n  formatValue = String,\n  style,\n  ...props\n}: ComparisonBarsProps) {\n  if (items.some((item) => !Number.isFinite(item.value) || item.value < 0))\n    throw new RangeError(\"ComparisonBars requires finite nonnegative values\")\n  const ceiling = max ?? Math.max(1, ...items.map((item) => item.value))\n  if (\n    !Number.isFinite(ceiling) ||\n    ceiling <= 0 ||\n    items.some((item) => item.value > ceiling)\n  )\n    throw new RangeError(\n      \"ComparisonBars max must be positive and cover every value\"\n    )\n  return (\n    <div\n      {...props}\n      style={{ fontFamily: font.sans, color: color.ink, minWidth: 0, ...style }}\n    >\n      <dl style={{ margin: 0, display: \"grid\", gap: 20 }}>\n        {items.map((item, i) => (\n          <div key={i}>\n            <div\n              style={{\n                display: \"flex\",\n                flexWrap: \"wrap\",\n                justifyContent: \"space-between\",\n                gap: \"4px 16px\",\n                marginBottom: 8,\n                overflowWrap: \"anywhere\",\n              }}\n            >\n              <dt style={{ fontSize: 15, fontWeight: 600 }}>{item.label}</dt>\n              <dd\n                style={{\n                  margin: 0,\n                  fontFamily: font.mono,\n                  fontSize: 14,\n                  fontWeight: 600,\n                  color: item.highlight ? color.accent : color.dim,\n                }}\n              >\n                {formatValue(item.value)}\n              </dd>\n            </div>\n            <div\n              aria-hidden=\"true\"\n              style={{\n                height: 14,\n                borderRadius: 7,\n                background: color.line,\n                overflow: \"hidden\",\n              }}\n            >\n              <div\n                style={{\n                  width: `${(item.value / ceiling) * 100}%`,\n                  height: \"100%\",\n                  borderRadius: 7,\n                  background: item.highlight ? color.accent : color.ink,\n                }}\n              />\n            </div>\n          </div>\n        ))}\n      </dl>\n    </div>\n  )\n}\n",
      "type": "registry:ui",
      "target": "src/jbm/ui/comparison-bars.tsx"
    }
  ],
  "type": "registry:ui"
}