{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "area-chart",
  "type": "registry:component",
  "title": "Area Chart",
  "description": "Beautiful area chart for data visualization with retro styling",
  "dependencies": [
    "recharts"
  ],
  "files": [
    {
      "path": "components/retroui/charts/AreaChart.tsx",
      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport React from \"react\"\nimport {\n  Area,\n  AreaChart as RechartsAreaChart,\n  CartesianGrid,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from \"recharts\"\n\ninterface AreaChartProps 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  fill?: \"gradient\" | \"solid\"\n  className?: string\n}\n\nconst AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>(\n  (\n    {\n      data = [],\n      index,\n      categories = [],\n      strokeColors = [\"var(--foreground)\"],\n      fillColors = [\"var(--primary)\"],\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      fill = \"gradient\",\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const chartId = React.useId()\n\n    return (\n      <div ref={ref} className={cn(\"h-80 w-full\", className)} {...props}>\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <RechartsAreaChart data={data} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>\n            <defs>\n              {categories.map((category, index) => {\n                const fillColor = fillColors[index] || fillColors[0]\n                const gradientId = `gradient-${chartId}-${category}`\n                return (\n                  <linearGradient key={category} id={gradientId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                    {fill === \"gradient\" ? (\n                      <>\n                        <stop offset=\"5%\" stopColor={fillColor} stopOpacity={0.8} />\n                        <stop offset=\"95%\" stopColor={fillColor} stopOpacity={0} />\n                      </>\n                    ) : (\n                      <stop stopColor={fillColor} stopOpacity={0.6} />\n                    )}\n                  </linearGradient>\n                )\n              })}\n            </defs>\n            \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: 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 strokeColor = strokeColors[index] || strokeColors[0]\n              const gradientId = `gradient-${chartId}-${category}`\n              \n              return (\n                <Area\n                  key={category}\n                  dataKey={category}\n                  stroke={strokeColor}\n                  fill={`url(#${gradientId})`}\n                  strokeWidth={2}\n                />\n              )\n            })}\n          </RechartsAreaChart>\n        </ResponsiveContainer>\n      </div>\n    )\n  }\n)\n\nAreaChart.displayName = \"AreaChart\"\n\nexport { AreaChart, type AreaChartProps }",
      "type": "registry:component",
      "target": "components/retroui/charts/AreaChart.tsx"
    }
  ]
}