{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "line-chart",
  "type": "registry:component",
  "title": "Line Chart",
  "description": "Beautiful line chart for data visualization with retro styling",
  "dependencies": [
    "recharts"
  ],
  "files": [
    {
      "path": "components/retroui/charts/LineChart.tsx",
      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport React from \"react\"\nimport {\n  CartesianGrid,\n  Line,\n  LineChart as RechartsLineChart,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from \"recharts\"\n\ninterface LineChartProps extends React.HTMLAttributes<HTMLDivElement> {\n  data: Record<string, any>[]\n  index: string\n  categories: string[]\n  strokeColors?: string[]\n  tooltipBgColor?: string\n  tooltipBorderColor?: string\n  gridColor?: string\n  valueFormatter?: (value: number) => string\n  showGrid?: boolean\n  showTooltip?: boolean\n  strokeWidth?: number\n  dotSize?: number\n  className?: string\n}\n\nconst LineChart = React.forwardRef<HTMLDivElement, LineChartProps>(\n  (\n    {\n      data = [],\n      index,\n      categories = [],\n      strokeColors = [\"var(--foreground)\"],\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      strokeWidth = 2,\n      dotSize = 4,\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          <RechartsLineChart data={data} margin={{ top: 0, right: 30, left: 0, bottom: 0 }}>\n            {showGrid && (\n              <CartesianGrid strokeDasharray=\"3 3\" stroke={gridColor} />\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            {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: entry.color }}>\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 strokeColor = strokeColors[index] || strokeColors[0]\n              \n              return (\n                <Line\n                  key={category}\n                  dataKey={category}\n                  stroke={strokeColor}\n                  strokeWidth={strokeWidth}\n                  dot={{ r: dotSize, fill: strokeColor }}\n                  activeDot={{ r: dotSize + 2, fill: strokeColor }}\n                />\n              )\n            })}\n          </RechartsLineChart>\n        </ResponsiveContainer>\n      </div>\n    )\n  }\n)\n\nLineChart.displayName = \"LineChart\"\n\nexport { LineChart, type LineChartProps }",
      "type": "registry:component",
      "target": "components/retroui/charts/LineChart.tsx"
    }
  ]
}