{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stat-sparkline",
  "type": "registry:ui",
  "title": "Stat sparkline",
  "description": "Metric card with a label, a large value, a signed delta and an edge-to-edge area sparkline that turns red when the trend is down. Built for React dashboards.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/area-chart.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/stat-sparkline.tsx",
      "type": "registry:ui",
      "target": "components/ui/stat-sparkline.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { AreaChart } from \"@/components/ui/area-chart\"\n\n/** A KPI card with a big number, a coloured delta and a trend sparkline bleeding off the bottom edge. */\ntype StatWithSparklineProps = {\n  label?: string\n  value?: string\n  /** A signed delta such as \"+12.4%\"; a leading minus turns the card red. */\n  delta?: string\n  /** Trend points, oldest first. Defaults to twelve months of Lumen revenue. */\n  points?: number[]\n  className?: string\n}\n\nconst SAMPLE_POINTS = [62, 68, 66, 74, 79, 77, 85, 90, 96, 101, 108, 118]\n\nfunction StatWithSparkline({\n  label = \"Monthly revenue\",\n  value = \"$128,400\",\n  delta = \"+12.4%\",\n  points = SAMPLE_POINTS,\n  className,\n}: StatWithSparklineProps) {\n  const up = delta ? !/^[-−▼]/.test(delta.trim()) : true\n  return (\n    <div data-slot=\"stat-with-sparkline\" className={cn(\"w-full max-w-xs overflow-hidden rounded-xl border border-border bg-surface shadow-raised\", className)}>\n      <div className=\"p-4 pb-0\">\n        <p className=\"text-[0.8125rem] text-fg-muted\">{label}</p>\n        <div className=\"mt-2 flex items-baseline gap-2\">\n          <p className=\"text-2xl font-medium tabular-nums tracking-[-0.025em] text-fg\">{value}</p>\n          {delta ? <span className={cn(\"text-xs font-medium tabular-nums\", up ? \"text-success\" : \"text-danger\")}>{delta}</span> : null}\n        </div>\n      </div>\n      <AreaChart data={points} grid={false} tone={up ? \"accent\" : \"danger\"} highlight={points.length - 1} className=\"mt-2 h-12\" label={`${label} trend`} />\n    </div>\n  )\n}\nexport { StatWithSparkline }\nexport type { StatWithSparklineProps }\n"
    }
  ]
}