{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "analytics-chart-demo",
  "type": "registry:component",
  "registryDependencies": [
    "analytics-chart"
  ],
  "files": [
    {
      "path": "registry/default/example/analytics-chart-demo.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport {\n  AnalyticsLineChart,\n  DEFAULT_DATA,\n  DEFAULT_GRADIENT,\n  EASE_OUT,\n  type AnalyticsDataPoint,\n  type AnalyticsGradientStop,\n} from \"@/registry/default/ui/analytics-chart\"\n\nconst ANALYTICS_DEMO_SETS = {\n  ecommerce: {\n    title: \"Clicks\",\n    sub: \"Conversion analytics\",\n    data: DEFAULT_DATA,\n    valueLabel: \"clicks\",\n  },\n  signups: {\n    title: \"Signups\",\n    sub: \"Organic acquisition\",\n    data: [\n      { date: \"2024-01-07\", label: \"organic\", value: 340 },\n      { date: \"2024-01-14\", label: \"organic\", value: 520 },\n      { date: \"2024-01-21\", label: \"organic\", value: 480 },\n      { date: \"2024-01-28\", label: \"organic\", value: 710 },\n      { date: \"2024-02-04\", label: \"organic\", value: 890 },\n      { date: \"2024-02-11\", label: \"organic\", value: 1250 },\n    ],\n    valueLabel: \"signups\",\n  },\n  revenue: {\n    title: \"Revenue\",\n    sub: \"SaaS MRR growth\",\n    data: [\n      { date: \"2023-07-01\", label: \"saas-mrr\", value: 14_200 },\n      { date: \"2023-08-01\", label: \"saas-mrr\", value: 16_800 },\n      { date: \"2023-09-01\", label: \"saas-mrr\", value: 15_900 },\n      { date: \"2023-10-01\", label: \"saas-mrr\", value: 21_300 },\n      { date: \"2023-11-01\", label: \"saas-mrr\", value: 24_700 },\n      { date: \"2023-12-01\", label: \"saas-mrr\", value: 28_100 },\n      { date: \"2024-01-01\", label: \"saas-mrr\", value: 31_500 },\n      { date: \"2024-02-01\", label: \"saas-mrr\", value: 35_800 },\n    ],\n    valueLabel: \"USD\",\n    gradient: [\n      { offset: \"0%\", color: \"#c084fc\" },\n      { offset: \"50%\", color: \"#818cf8\" },\n      { offset: \"100%\", color: \"#6366f1\" },\n    ],\n  },\n} as const satisfies Record<\n  string,\n  {\n    title: string\n    sub: string\n    data: AnalyticsDataPoint[]\n    valueLabel: string\n    gradient?: AnalyticsGradientStop[]\n  }\n>\n\ntype AnalyticsDemoKey = keyof typeof ANALYTICS_DEMO_SETS\n\nfunction AnalyticsChartDemo() {\n  const [tab, setTab] = useState<AnalyticsDemoKey>(\"ecommerce\")\n  const [epoch, setEpoch] = useState(0)\n  const demo = ANALYTICS_DEMO_SETS[tab]\n\n  function pick(k: AnalyticsDemoKey) {\n    setTab(k)\n    setEpoch((e) => e + 1)\n  }\n\n  return (\n    <div\n      data-slot=\"analytics-chart-demo\"\n      style={{\n        minHeight: \"100vh\",\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        padding: 32,\n        WebkitFontSmoothing: \"antialiased\",\n      }}\n    >\n      <div style={{ width: \"100%\", maxWidth: 620 }}>\n        {/* Tabs */}\n        <div\n          style={{\n            display: \"flex\",\n            gap: 2,\n            padding: 4,\n            marginBottom: 16,\n            background: \"var(--card)\",\n            borderRadius: 11,\n            border: \"1px solid var(--border)\",\n            boxShadow: \"0 1px 3px rgba(0,0,0,0.04)\",\n          }}\n        >\n          {(\n            Object.entries(ANALYTICS_DEMO_SETS) as [\n              AnalyticsDemoKey,\n              (typeof ANALYTICS_DEMO_SETS)[AnalyticsDemoKey],\n            ][]\n          ).map(([k, v]) => {\n            const on = tab === k\n            return (\n              <button\n                data-slot=\"analytics-chart-demo-tab\"\n                key={k}\n                onClick={() => pick(k)}\n                onMouseDown={(e) => {\n                  if (!on) {\n                    e.currentTarget.style.transform = \"scale(0.97)\"\n                  }\n                }}\n                onMouseLeave={(e) => {\n                  e.currentTarget.style.transform = \"\"\n                }}\n                onMouseUp={(e) => {\n                  e.currentTarget.style.transform = \"\"\n                }}\n                style={{\n                  flex: 1,\n                  border: \"none\",\n                  cursor: \"pointer\",\n                  fontSize: 12,\n                  fontWeight: 600,\n                  padding: \"7px 14px\",\n                  borderRadius: 8,\n                  background: on ? \"var(--primary)\" : \"transparent\",\n                  color: on\n                    ? \"var(--primary-foreground)\"\n                    : \"var(--muted-foreground)\",\n                  boxShadow: on ? \"0 1px 4px rgba(0,0,0,0.18)\" : \"none\",\n                  transition: `all 200ms ${EASE_OUT}`,\n                  fontFamily: \"inherit\",\n                }}\n                type=\"button\"\n              >\n                {v.title}\n              </button>\n            )\n          })}\n        </div>\n\n        {/* Card */}\n        <div\n          style={{\n            background: \"var(--card)\",\n            borderRadius: 16,\n            padding: \"20px 24px 14px\",\n            border: \"1px solid var(--border)\",\n            boxShadow: [\n              \"0 1px 2px -1px rgba(0,0,0,0.06)\",\n              \"0 4px 12px rgba(0,0,0,0.04)\",\n              \"0 14px 32px -6px rgba(0,0,0,0.06)\",\n            ].join(\",\"),\n          }}\n        >\n          <div\n            style={{\n              display: \"flex\",\n              justifyContent: \"space-between\",\n              alignItems: \"baseline\",\n              padding: \"0 2px\",\n              marginBottom: 2,\n            }}\n          >\n            <div>\n              <h2\n                style={{\n                  margin: 0,\n                  fontSize: 14,\n                  fontWeight: 600,\n                  color: \"var(--foreground)\",\n                  lineHeight: 1.3,\n                  textWrap: \"balance\",\n                }}\n              >\n                {demo.title}\n              </h2>\n              <p\n                style={{\n                  margin: \"1px 0 0\",\n                  fontSize: 11,\n                  fontWeight: 500,\n                  color: \"var(--muted-foreground)\",\n                }}\n              >\n                {demo.sub}\n              </p>\n            </div>\n            <span\n              style={{\n                fontSize: 11,\n                fontWeight: 500,\n                color: \"var(--muted-foreground)\",\n                fontVariantNumeric: \"tabular-nums\",\n              }}\n            >\n              {demo.data.length} points\n            </span>\n          </div>\n\n          <AnalyticsLineChart\n            data={demo.data}\n            gradientStops={\n              \"gradient\" in demo ? demo.gradient : DEFAULT_GRADIENT\n            }\n            key={epoch}\n            valueLabel={demo.valueLabel}\n          />\n\n          <p\n            style={{\n              textAlign: \"center\",\n              fontSize: 11,\n              color: \"var(--muted-foreground)\",\n              margin: \"4px 0 0\",\n              fontWeight: 500,\n              opacity: 0.6,\n            }}\n          >\n            Hover points for details\n          </p>\n        </div>\n\n        {/* Props */}\n        <div\n          style={{\n            marginTop: 10,\n            background: \"var(--card)\",\n            borderRadius: 12,\n            padding: \"12px 16px\",\n            border: \"1px solid var(--border)\",\n          }}\n        >\n          <p\n            style={{\n              fontSize: 11,\n              fontWeight: 600,\n              color: \"var(--muted-foreground)\",\n              margin: \"0 0 5px\",\n            }}\n          >\n            Component API\n          </p>\n          <div\n            style={{\n              display: \"grid\",\n              gridTemplateColumns: \"1fr 1fr\",\n              gap: \"2px 18px\",\n              fontSize: 11,\n              color: \"var(--muted-foreground)\",\n            }}\n          >\n            {[\n              [\"data\", \"chart data points\"],\n              [\"gradientStops\", \"line color stops\"],\n              [\"dotColors\", \"per-dot overrides\"],\n              [\"gridLines\", \"grid line count\"],\n              [\"pinnedIndices\", \"pinned tooltips\"],\n              [\"valueLabel\", \"unit label\"],\n            ].map(([p, d]) => (\n              <span key={p}>\n                <code\n                  style={{\n                    color: \"var(--foreground)\",\n                    fontSize: 10.5,\n                    fontFamily: \"'Geist Mono',ui-monospace,monospace\",\n                  }}\n                >\n                  {p}\n                </code>\n                {\" — \"}\n                {d}\n              </span>\n            ))}\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default AnalyticsChartDemo\n",
      "type": "registry:component"
    }
  ]
}