{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "area-chart",
  "type": "registry:ui",
  "title": "Area chart",
  "description": "Dependency free SVG area chart for React with a smoothed line, dashed grid, gradient fill and an optional highlighted point. Strokes stay crisp at any size.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/area-chart.tsx",
      "type": "registry:ui",
      "target": "components/ui/area-chart.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\n// Monotone cubic interpolation: smooth without overshooting the data.\nfunction smoothPath(pts: readonly (readonly [number, number])[]) {\n  if (pts.length < 2) return pts.length ? `M${pts[0][0]},${pts[0][1]}` : \"\"\n  const n = pts.length\n  const dx: number[] = [], m: number[] = [], t: number[] = []\n  for (let i = 0; i < n - 1; i++) {\n    dx[i] = pts[i + 1][0] - pts[i][0]\n    m[i] = (pts[i + 1][1] - pts[i][1]) / (dx[i] || 1)\n  }\n  t[0] = m[0]\n  t[n - 1] = m[n - 2]\n  for (let i = 1; i < n - 1; i++) t[i] = m[i - 1] * m[i] <= 0 ? 0 : (m[i - 1] + m[i]) / 2\n  let d = `M${pts[0][0]},${pts[0][1]}`\n  for (let i = 0; i < n - 1; i++) {\n    const h = dx[i] / 3\n    d += ` C${pts[i][0] + h},${pts[i][1] + t[i] * h} ${pts[i + 1][0] - h},${pts[i + 1][1] - t[i + 1] * h} ${pts[i + 1][0]},${pts[i + 1][1]}`\n  }\n  return d\n}\n\nconst TONES = {\n  accent: \"text-accent\",\n  success: \"text-success\",\n  warning: \"text-warning\",\n  danger: \"text-danger\",\n  info: \"text-info\",\n  neutral: \"text-fg-muted\",\n} as const\n\n// Twelve weeks of Lumen revenue, in thousands.\nconst SAMPLE_DATA = [18, 22, 21, 27, 31, 29, 36, 40, 38, 45, 52, 49]\n\n/** A smooth area chart with a hairline grid and gradient wash; strokes stay 1.5px at any size and a highlight can pin one value. */\ntype AreaChartProps = {\n  /** Series values, left to right. */\n  data?: number[]\n  className?: string\n  label?: string\n  grid?: boolean\n  smooth?: boolean\n  /** Index of a point to mark with a dot and a hairline crosshair. */\n  highlight?: number\n  tone?: keyof typeof TONES\n}\n\nfunction AreaChart({\n  data = SAMPLE_DATA,\n  className,\n  label = \"Area chart\",\n  grid = true,\n  smooth = true,\n  highlight,\n  tone = \"accent\",\n}: AreaChartProps) {\n  const id = React.useId().replace(/:/g, \"\")\n  const max = Math.max(...data, 1)\n  const min = Math.min(...data, 0)\n  const w = 320\n  const h = 120\n  const pad = 6\n  const pts = data.map((v, i) => {\n    const x = (i / Math.max(data.length - 1, 1)) * w\n    const y = h - pad - ((v - min) / (max - min || 1)) * (h - pad * 2)\n    return [x, y] as const\n  })\n  const line = smooth ? smoothPath(pts) : pts.map(([x, y], i) => `${i === 0 ? \"M\" : \"L\"}${x},${y}`).join(\" \")\n  const area = `${line} L${w},${h} L0,${h} Z`\n  const hp = highlight != null ? pts[Math.max(0, Math.min(pts.length - 1, highlight))] : null\n  return (\n    <div data-slot=\"area-chart\" className={cn(\"relative h-32 w-full\", TONES[tone], className)}>\n      <svg role=\"img\" aria-label={label} viewBox={`0 0 ${w} ${h}`} preserveAspectRatio=\"none\" className=\"absolute inset-0 size-full overflow-visible\">\n        <defs>\n          <linearGradient id={`ag-${id}`} x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\n            <stop offset=\"0%\" stopColor=\"currentColor\" stopOpacity=\"0.22\" />\n            <stop offset=\"100%\" stopColor=\"currentColor\" stopOpacity=\"0\" />\n          </linearGradient>\n        </defs>\n        {grid\n          ? [0.25, 0.5, 0.75].map((f) => (\n              <line key={f} x1=\"0\" x2={w} y1={h * f} y2={h * f} className=\"stroke-border\" strokeWidth=\"1\" strokeDasharray=\"2 3\" vectorEffect=\"non-scaling-stroke\" />\n            ))\n          : null}\n        <path d={area} fill={`url(#ag-${id})`} />\n        <path d={line} fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinejoin=\"round\" strokeLinecap=\"round\" vectorEffect=\"non-scaling-stroke\" />\n        {hp ? <line x1={hp[0]} x2={hp[0]} y1=\"0\" y2={h} stroke=\"currentColor\" strokeOpacity=\"0.35\" strokeWidth=\"1\" vectorEffect=\"non-scaling-stroke\" /> : null}\n      </svg>\n      {hp ? (\n        <span\n          aria-hidden\n          className=\"absolute size-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-surface bg-current shadow-[0_0_0_4px_color-mix(in_oklch,currentColor_18%,transparent)]\"\n          style={{ left: `${(hp[0] / w) * 100}%`, top: `${(hp[1] / h) * 100}%` }}\n        />\n      ) : null}\n    </div>\n  )\n}\nexport { AreaChart, smoothPath }\nexport type { AreaChartProps }\n"
    }
  ]
}