{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bar-chart",
  "type": "registry:component",
  "title": "Bar Chart",
  "description": "Beautiful bar chart for data visualization with retro styling",
  "dependencies": [
    "recharts"
  ],
  "files": [
    {
      "path": "components/retroui/charts/BarChart.tsx",
      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport React from \"react\"\nimport {\n  Bar,\n  BarChart as RechartsBarChart,\n  CartesianGrid,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from \"recharts\"\n\ninterface BarChartProps extends React.HTMLAttributes<HTMLDivElement> {\n  data: Record<string, any>[]\n  index: string\n  categories: string[]\n  strokeColors?: string[]\n  fillColors?: string[]\n  tooltipBgColor?: string\n  tooltipBorderColor?: string\n  gridColor?: string\n  valueFormatter?: (value: number) => string\n  showGrid?: boolean\n  showTooltip?: boolean\n  stacked?: boolean\n  alignment?: \"vertical\" | \"horizontal\"\n  className?: string\n}\n\nconst BarChart = React.forwardRef<HTMLDivElement, BarChartProps>(\n  (\n    {\n      data = [],\n      index,\n      categories = [],\n      strokeColors = [\"var(--foreground)\"],\n      fillColors = [\"var(--primary)\", \"var(--secondary)\"],\n      tooltipBgColor = \"var(--background)\",\n      tooltipBorderColor = \"var(--border)\",\n      gridColor = \"var(--muted)\",\n      valueFormatter = (value: number) => value.toString(),\n      showGrid = true,\n      showTooltip = true,\n      stacked = false,\n      alignment = \"vertical\",\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div ref={ref} className={cn(\"h-80 w-full\", className)} {...props}>\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <RechartsBarChart\n            data={data}\n            layout={alignment === \"horizontal\" ? \"vertical\" : undefined}\n            margin={{ top: 10, right: 30, left: 0, bottom: 0 }}\n          >\n            {showGrid && (\n              <CartesianGrid strokeDasharray=\"3 3\" stroke={gridColor} />\n            )}\n\n            {alignment === \"horizontal\" ? (\n              <>\n                <XAxis\n                  type=\"number\"\n                  axisLine={false}\n                  tickLine={false}\n                  className=\"text-xs fill-muted-foreground\"\n                  tickFormatter={valueFormatter}\n                />\n\n                <YAxis\n                  type=\"category\"\n                  dataKey={index}\n                  axisLine={false}\n                  tickLine={false}\n                  className=\"text-xs fill-muted-foreground\"\n                  width={80}\n                />\n              </>\n            ) : (\n              <>\n                <XAxis\n                  dataKey={index}\n                  axisLine={false}\n                  tickLine={false}\n                  className=\"text-xs fill-muted-foreground\"\n                />\n\n                <YAxis\n                  axisLine={false}\n                  tickLine={false}\n                  className=\"text-xs fill-muted-foreground\"\n                  tickFormatter={valueFormatter}\n                />\n              </>\n            )}\n\n            {showTooltip && (\n              <Tooltip\n                content={({ active, payload, label }) => {\n                  if (!active || !payload?.length) return null\n\n                  return (\n                    <div\n                      className=\"border p-2 shadow\"\n                      style={{\n                        backgroundColor: tooltipBgColor,\n                        borderColor: tooltipBorderColor\n                      }}\n                    >\n                      <div className=\"grid grid-cols-2 gap-2\">\n                        <div className=\"flex flex-col\">\n                          <span className=\"text-[0.70rem] uppercase text-muted-foreground\">\n                            {index}\n                          </span>\n                          <span className=\"font-bold text-muted-foreground\">\n                            {label}\n                          </span>\n                        </div>\n                        {payload.map((entry, index) => (\n                          <div key={index} className=\"flex flex-col\">\n                            <span className=\"text-[0.70rem] uppercase text-muted-foreground\">\n                              {entry.dataKey}\n                            </span>\n                            <span className=\"font-bold\" style={{ color: strokeColors[0] }}>\n                              {valueFormatter(entry.value as number)}\n                            </span>\n                          </div>\n                        ))}\n                      </div>\n                    </div>\n                  )\n                }}\n              />\n            )}\n\n            {categories.map((category, index) => {\n              const fillColor = fillColors[index] || fillColors[0]\n              const strokeColor = strokeColors[index] || strokeColors[0]\n\n              return (\n                <Bar\n                  key={category}\n                  dataKey={category}\n                  fill={fillColor}\n                  stroke={strokeColor}\n                  strokeWidth={1}\n                  stackId={stacked ? \"strokeId\" : undefined} />\n              )\n            })}\n          </RechartsBarChart>\n        </ResponsiveContainer>\n      </div>\n    )\n  }\n)\n\nBarChart.displayName = \"BarChart\"\n\nexport { BarChart, type BarChartProps }",
      "type": "registry:component",
      "target": "components/retroui/charts/BarChart.tsx"
    }
  ]
}