{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bar-chart",
  "type": "registry:ui",
  "title": "Bar Chart",
  "description": "Vertical capsule progress bar chart visualization.",
  "dependencies": [
    "clsx",
    "tailwind-merge"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/ui/bar-chart.tsx",
      "content": "import * as React from 'react'\nimport {\n  ResponsiveContainer,\n  BarChart as RechartsBarChart,\n  Bar,\n  XAxis,\n  YAxis,\n  Tooltip as RechartsTooltip,\n  Cell,\n  CartesianGrid,\n} from 'recharts'\nimport { cn } from '@/lib/utils'\n\nexport interface BarData {\n  label: string\n  value: number\n  color?: string\n}\n\nexport interface BarChartProps {\n  data: BarData[]\n  height?: number\n  className?: string\n  showGrid?: boolean\n  showValues?: boolean\n}\n\n// Pop-Brutalist ink color for chart strokes/ticks (matches --color-rk-ink)\nconst INK = 'var(--color-rk-ink, #18181b)'\n\n// Custom Pop-Brutalist Tooltip for Recharts\nfunction CustomTooltip({ active, payload, label }: any) {\n  if (active && payload && payload.length) {\n    const data = payload[0]\n    return (\n      <div className=\"bg-rk-surface rk-border-sm rounded-xl p-3 rk-shadow-sm font-mono\">\n        <p className=\"text-xs font-black uppercase text-rk-ink\">{label}</p>\n        <p className=\"text-sm font-black text-rk-secondary mt-0.5\">\n          {data.value.toLocaleString()}\n        </p>\n      </div>\n    )\n  }\n  return null\n}\n\nexport function BarChart({\n  data,\n  height = 200,\n  className,\n  showGrid = true,\n}: BarChartProps) {\n  const defaultColors = [\n    '#FB923C',\n    '#FDE047',\n    '#BBF7D0',\n    '#A78BFA',\n    '#BAE6FD',\n    '#FBCFE8',\n  ]\n\n  return (\n    <div\n      role=\"img\"\n      aria-label=\"Bar chart\"\n      className={cn(\n        'w-full bg-rk-surface rounded-2xl rk-border p-4 rk-shadow-sm font-sans',\n        className\n      )}\n    >\n      <div style={{ width: '100%', height: `${height}px` }}>\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <RechartsBarChart\n            data={data}\n            margin={{ top: 10, right: 10, left: -20, bottom: 0 }}\n          >\n            {showGrid && (\n              <CartesianGrid\n                strokeDasharray=\"3 3\"\n                stroke={INK}\n                strokeOpacity={0.15}\n                vertical={false}\n              />\n            )}\n            <XAxis\n              dataKey=\"label\"\n              tickLine={false}\n              axisLine={{ stroke: INK, strokeWidth: 2 }}\n              tick={{ fill: INK, fontSize: 11, fontWeight: 700, fontFamily: 'monospace' }}\n            />\n            <YAxis\n              tickLine={false}\n              axisLine={{ stroke: INK, strokeWidth: 2 }}\n              tick={{ fill: INK, fontSize: 10, fontWeight: 700, fontFamily: 'monospace' }}\n            />\n            <RechartsTooltip content={<CustomTooltip />} />\n            <Bar dataKey=\"value\" radius={[8, 8, 0, 0]} stroke={INK} strokeWidth={2}>\n              {data.map((entry, index) => (\n                <Cell\n                  key={`cell-${index}`}\n                  fill={entry.color || defaultColors[index % defaultColors.length]}\n                />\n              ))}\n            </Bar>\n          </RechartsBarChart>\n        </ResponsiveContainer>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:ui",
      "target": "components/ui/bar-chart.tsx"
    }
  ]
}