{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bar-chart",
  "type": "registry:ui",
  "title": "Bar chart",
  "description": "Stacked / grouped bar chart with mono labels.",
  "dependencies": [
    "recharts"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "utils",
    "panel",
    "chart-tooltip"
  ],
  "files": [
    {
      "path": "registry/blacksite/charts/bar-chart.tsx",
      "type": "registry:ui",
      "target": "components/charts/bar-chart.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n  Bar,\n  BarChart as RBarChart,\n  CartesianGrid,\n  Legend,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from \"recharts\";\n\nimport { cn } from \"@/lib/utils\";\nimport { ChartTooltip } from \"./chart-tooltip\";\n\nexport interface BarChartSeries {\n  key: string;\n  label?: string;\n  color?: string;\n  stackId?: string;\n}\n\ninterface BarChartProps extends React.HTMLAttributes<HTMLDivElement> {\n  data: Array<Record<string, number | string>>;\n  series: BarChartSeries[];\n  xKey?: string;\n  height?: number;\n  showLegend?: boolean;\n}\n\nconst DEFAULT_COLORS = [\n  \"var(--color-chart-1)\",\n  \"var(--color-chart-2)\",\n  \"var(--color-chart-3)\",\n  \"var(--color-chart-4)\",\n  \"var(--color-chart-5)\",\n];\n\nconst BarChart = React.forwardRef<HTMLDivElement, BarChartProps>(\n  ({ className, data, series, xKey = \"x\", height = 220, showLegend = false, ...props }, ref) => {\n    return (\n      <div ref={ref} className={cn(\"w-full\", className)} style={{ height }} {...props}>\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <RBarChart\n            data={data}\n            margin={{ top: 8, right: 12, bottom: 8, left: 0 }}\n            barCategoryGap=\"20%\"\n          >\n            <CartesianGrid stroke=\"hsl(var(--border))\" strokeDasharray=\"2 4\" vertical={false} />\n            <XAxis\n              dataKey={xKey}\n              stroke=\"hsl(var(--foreground-subtle))\"\n              tick={{\n                fontFamily: \"var(--font-mono)\",\n                fontSize: 10,\n                fill: \"hsl(var(--foreground-muted))\",\n              }}\n              tickLine={false}\n              axisLine={{ stroke: \"hsl(var(--border))\" }}\n            />\n            <YAxis\n              stroke=\"hsl(var(--foreground-subtle))\"\n              tick={{\n                fontFamily: \"var(--font-mono)\",\n                fontSize: 10,\n                fill: \"hsl(var(--foreground-muted))\",\n              }}\n              tickLine={false}\n              axisLine={{ stroke: \"hsl(var(--border))\" }}\n              width={36}\n            />\n            <Tooltip cursor={{ fill: \"hsl(var(--accent) / 0.4)\" }} content={<ChartTooltip />} />\n            {showLegend && (\n              <Legend\n                wrapperStyle={{\n                  fontFamily: \"var(--font-mono)\",\n                  fontSize: 10,\n                  textTransform: \"uppercase\",\n                  letterSpacing: \"0.06em\",\n                }}\n                iconType=\"square\"\n                iconSize={8}\n              />\n            )}\n            {series.map((s, i) => (\n              <Bar\n                key={s.key}\n                dataKey={s.key}\n                name={s.label ?? s.key}\n                fill={s.color ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length]}\n                stackId={s.stackId}\n                radius={[1, 1, 0, 0]}\n              />\n            ))}\n          </RBarChart>\n        </ResponsiveContainer>\n      </div>\n    );\n  },\n);\nBarChart.displayName = \"BarChart\";\n\nexport { BarChart };\n"
    }
  ]
}