{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "horizontal-bar-chart",
  "type": "registry:ui",
  "title": "Horizontal bar chart",
  "description": "A lightweight horizontal bar chart where each row shows a label, a rounded bar scaled to the largest value and the number. No chart library, just Tailwind.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/horizontal-bar-chart.tsx",
      "type": "registry:ui",
      "target": "components/ui/horizontal-bar-chart.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\n/** Labelled horizontal bars scaled to the largest value, for ranking categories at a glance. */\ntype Bar = { label: string; value: number }\n\nconst SAMPLE_DATA: Bar[] = [\n  { label: \"Northwind\", value: 124 },\n  { label: \"Acme Robotics\", value: 98 },\n  { label: \"Umbrella\", value: 87 },\n  { label: \"Initech\", value: 64 },\n  { label: \"Globex\", value: 52 },\n  { label: \"Stark Industrial\", value: 41 },\n  { label: \"Wayne Freight\", value: 33 },\n  { label: \"Hooli\", value: 18 },\n]\n\ntype HorizontalBarChartProps = {\n  /** One bar per entry, in display order. Defaults to invoices per customer. */\n  data?: Bar[]\n  className?: string\n  /** Accessible name for the chart. */\n  label?: string\n}\n\nfunction HorizontalBarChart({\n  data = SAMPLE_DATA,\n  className,\n  label = \"Horizontal bar chart\",\n}: HorizontalBarChartProps) {\n  const max = Math.max(...data.map((d) => d.value), 1)\n  return (\n    <div data-slot=\"horizontal-bar-chart\" role=\"img\" aria-label={label} className={cn(\"w-full max-w-sm space-y-2\", className)}>\n      {data.map((d) => (\n        <div key={d.label} className=\"grid grid-cols-[88px_1fr_40px] items-center gap-2\">\n          <span className=\"truncate text-xs text-fg-muted\">{d.label}</span>\n          <div className=\"h-2 overflow-hidden rounded-full bg-sunken\">\n            <div className=\"h-full rounded-full bg-accent\" style={{ width: `${(d.value / max) * 100}%` }} />\n          </div>\n          <span className=\"text-right text-xs tabular-nums text-fg\">{d.value}</span>\n        </div>\n      ))}\n    </div>\n  )\n}\nexport { HorizontalBarChart }\nexport type { HorizontalBarChartProps, Bar as HorizontalBar }\n"
    }
  ]
}