{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "price-chart",
  "title": "Price Chart",
  "description": "An area chart for displaying token price history over time using Recharts.",
  "dependencies": [
    "recharts"
  ],
  "registryDependencies": [
    "chart"
  ],
  "files": [
    {
      "path": "src/registry/sol/price-chart.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport { Area, AreaChart, CartesianGrid, XAxis, YAxis } from \"recharts\";\nimport {\n  type ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/components/ui/chart\";\nimport { cn } from \"@/lib/utils\";\n\ninterface PriceChartProps {\n  title?: string;\n  description?: string;\n  series: {\n    time: string;\n    value: number;\n  }[];\n  className?: string;\n}\n\nconst POSITIVE_COLOR = \"hsl(160 84% 39%)\";\nconst NEGATIVE_COLOR = \"hsl(0 84% 67%)\";\n\nconst chartConfig = {\n  value: {\n    label: \"Value\",\n  },\n} satisfies ChartConfig;\n\nconst PriceChart = ({\n  title,\n  description,\n  series,\n  className,\n}: PriceChartProps) => {\n  const gradientId = React.useId();\n\n  if (!series.length) return null;\n\n  const firstValue = series[0].value;\n  const lastValue = series[series.length - 1].value;\n  const isPositive = lastValue >= firstValue;\n  const chartColor = isPositive ? POSITIVE_COLOR : NEGATIVE_COLOR;\n\n  const minValue = Math.min(...series.map((s) => s.value));\n  const maxValue = Math.max(...series.map((s) => s.value));\n  const padding = (maxValue - minValue) * 0.1;\n\n  return (\n    <div\n      className={cn(\n        \"flex min-h-0 flex-1 flex-col gap-4 rounded-lg border bg-card p-4\",\n        className,\n      )}\n    >\n      {(title || description) && (\n        <div className=\"flex flex-col gap-0.5\">\n          {title && (\n            <h3 className=\"text-base font-semibold tracking-tight\">{title}</h3>\n          )}\n          {description && (\n            <p className=\"text-sm text-muted-foreground\">{description}</p>\n          )}\n        </div>\n      )}\n      <ChartContainer config={chartConfig} className=\"min-h-0 flex-1 w-full\">\n        <AreaChart accessibilityLayer data={series}>\n          <defs>\n            <linearGradient id={gradientId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n              <stop offset=\"0%\" stopColor={chartColor} stopOpacity={0.2} />\n              <stop offset=\"100%\" stopColor={chartColor} stopOpacity={0} />\n            </linearGradient>\n          </defs>\n          <CartesianGrid\n            vertical={false}\n            strokeDasharray=\"3 3\"\n            stroke=\"var(--border)\"\n          />\n          <XAxis\n            dataKey=\"time\"\n            tickLine={false}\n            axisLine={false}\n            tickMargin={8}\n            tickFormatter={(value: string) => {\n              const date = new Date(value);\n              return date.toLocaleDateString(\"en-US\", {\n                month: \"short\",\n                day: \"numeric\",\n              });\n            }}\n          />\n          <YAxis\n            domain={[minValue - padding, maxValue + padding]}\n            tickLine={false}\n            axisLine={false}\n            tickMargin={8}\n            tickFormatter={(value: number) =>\n              value >= 1\n                ? `$${value.toLocaleString(undefined, { maximumFractionDigits: 0 })}`\n                : `$${value.toFixed(6)}`\n            }\n            width={60}\n          />\n          <ChartTooltip\n            content={\n              <ChartTooltipContent\n                labelFormatter={(value: string) => {\n                  return new Date(value).toLocaleDateString(\"en-US\", {\n                    month: \"short\",\n                    day: \"numeric\",\n                    year: \"numeric\",\n                  });\n                }}\n                formatter={(value) => {\n                  const num = Number(value);\n                  const formatted =\n                    num >= 1\n                      ? `$${num.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`\n                      : `$${num.toFixed(8)}`;\n                  return (\n                    <span className=\"font-mono text-foreground\">\n                      {formatted}\n                    </span>\n                  );\n                }}\n              />\n            }\n          />\n          <Area\n            dataKey=\"value\"\n            type=\"monotone\"\n            stroke={chartColor}\n            strokeWidth={2}\n            fill={`url(#${gradientId})`}\n            dot={false}\n          />\n        </AreaChart>\n      </ChartContainer>\n    </div>\n  );\n};\n\nexport type { PriceChartProps };\nexport { PriceChart };\n",
      "type": "registry:component",
      "target": "components/sol/price-chart.tsx"
    }
  ],
  "type": "registry:component"
}