{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sparkline-set",
  "type": "registry:ui",
  "title": "Sparkline set",
  "description": "Responsive grid of metric cards, each with a label, value, delta chip and a small area chart sparkline. Good for a KPI overview at the top of a React dashboard.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/area-chart.json",
    "https://ui.minidev.pro/r/metric-delta.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/sparkline-set.tsx",
      "type": "registry:ui",
      "target": "components/ui/sparkline-set.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { AreaChart } from \"@/components/ui/area-chart\"\nimport { MetricDelta } from \"@/components/ui/metric-delta\"\n\n/** A grid of KPI cards, each with a value, a delta and a small area sparkline, for dashboard overviews. */\ntype SparklineItem = { label: string; value: string; delta: number; data: number[] }\n\ntype SparklineSetProps = {\n  /** One card per metric. Defaults to Lumen's revenue, customer and churn trends. */\n  items?: SparklineItem[]\n  className?: string\n}\n\n// Deltas colour by sign, so the sample sticks to metrics where up is good.\nconst SAMPLE_ITEMS: SparklineItem[] = [\n  { label: \"Revenue\", value: \"$128,400\", delta: 12.4, data: [62, 68, 66, 74, 79, 77, 85, 90, 96, 101, 108, 118] },\n  { label: \"Active customers\", value: \"1,284\", delta: 3.1, data: [920, 948, 970, 1004, 1012, 1060, 1088, 1120, 1150, 1210, 1246, 1284] },\n  { label: \"Invoices sent\", value: \"312\", delta: -4.6, data: [180, 196, 210, 205, 228, 240, 236, 255, 270, 284, 327, 312] },\n]\n\nfunction SparklineSet({ items = SAMPLE_ITEMS, className }: SparklineSetProps) {\n  return (\n    <div data-slot=\"sparkline-set\" className={cn(\"grid w-full gap-3 sm:grid-cols-2 lg:grid-cols-3\", className)}>\n      {items.map((item) => (\n        <div key={item.label} className=\"rounded-xl border border-border bg-surface p-3\">\n          <div className=\"flex items-center justify-between gap-2\">\n            <span className=\"text-xs text-fg-muted\">{item.label}</span>\n            <MetricDelta value={item.delta} />\n          </div>\n          <p className=\"mt-1 text-lg font-medium tabular-nums text-fg\">{item.value}</p>\n          <AreaChart data={item.data} label={item.label} className=\"mt-2 h-16\" />\n        </div>\n      ))}\n    </div>\n  )\n}\nexport { SparklineSet }\nexport type { SparklineSetProps, SparklineItem }\n"
    }
  ]
}