{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bar-chart",
  "type": "registry:ui",
  "title": "Bar chart",
  "description": "Lightweight React bar chart with rounded bars, dashed gridlines and labels. Hovering a bar dims the rest and shows its value; the peak is highlighted first.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/bar-chart.tsx",
      "type": "registry:ui",
      "target": "components/ui/bar-chart.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\n/** Rounded-top bars on a hairline baseline; hovering one bar dims its siblings and surfaces the value, and the peak is marked by default. */\ntype BarChartProps = {\n  data?: { label: string; value: number }[]\n  className?: string\n  label?: string\n  format?: (n: number) => string\n}\n\n// Monthly revenue for the last twelve months.\nconst SAMPLE_DATA: { label: string; value: number }[] = [\n  { label: \"Nov\", value: 31200 },\n  { label: \"Dec\", value: 36400 },\n  { label: \"Jan\", value: 28900 },\n  { label: \"Feb\", value: 33100 },\n  { label: \"Mar\", value: 39800 },\n  { label: \"Apr\", value: 42600 },\n  { label: \"May\", value: 38200 },\n  { label: \"Jun\", value: 47500 },\n  { label: \"Jul\", value: 51300 },\n  { label: \"Aug\", value: 44700 },\n  { label: \"Sep\", value: 56100 },\n  { label: \"Oct\", value: 61400 },\n]\n\nfunction BarChart({\n  data = SAMPLE_DATA,\n  className,\n  label = \"Bar chart\",\n  format = (n: number) => n.toLocaleString(),\n}: BarChartProps) {\n  const max = Math.max(...data.map((d) => d.value), 1)\n  const peak = data.findIndex((d) => d.value === max)\n  const [hover, setHover] = React.useState<number | null>(null)\n  const active = hover ?? peak\n  return (\n    <div data-slot=\"bar-chart\" role=\"img\" aria-label={label} className={cn(\"flex h-40 w-full flex-col pt-7\", className)} onMouseLeave={() => setHover(null)}>\n      <div className=\"relative flex flex-1 items-end gap-1.5 border-b border-border\">\n        {[0.25, 0.5, 0.75].map((f) => (\n          <span key={f} aria-hidden className=\"pointer-events-none absolute inset-x-0 border-t border-dashed border-border/70\" style={{ bottom: `${f * 100}%` }} />\n        ))}\n        {data.map((d, i) => (\n          <div key={d.label} className=\"relative flex h-full flex-1 items-end\" onMouseEnter={() => setHover(i)}>\n            <div\n              className={cn(\n                \"relative w-full rounded-t-[5px] transition-[opacity,background-color] duration-[140ms] ease-hairline\",\n                i === active ? \"bg-accent\" : \"bg-accent/35\",\n                hover != null && i !== hover && \"opacity-60\"\n              )}\n              style={{ height: `${Math.max(2, (d.value / max) * 100)}%` }}\n            >\n              <span className=\"absolute inset-x-0 top-0 h-px rounded-t-[5px] bg-white/30\" />\n              {i === active ? (\n                <span className=\"absolute -top-7 left-1/2 -translate-x-1/2 rounded-md bg-ink px-1.5 py-0.5 font-mono text-[10px] font-medium whitespace-nowrap text-on-ink shadow-md\">\n                  {format(d.value)}\n                </span>\n              ) : null}\n            </div>\n          </div>\n        ))}\n      </div>\n      <div className=\"flex gap-1.5 pt-2\">\n        {data.map((d, i) => (\n          <span key={d.label} className={cn(\"flex-1 truncate text-center font-mono text-[10px]\", i === active ? \"text-fg\" : \"text-fg-subtle\")}>\n            {d.label}\n          </span>\n        ))}\n      </div>\n    </div>\n  )\n}\nexport { BarChart }\nexport type { BarChartProps }\n"
    }
  ]
}