{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stat-card",
  "type": "registry:ui",
  "title": "Stat Card",
  "description": "A KPI card with label, value, delta and an inline sparkline generated from your data points.",
  "files": [
    {
      "path": "registry/ui/stat-card.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\n\nexport interface StatCardProps {\n  label: string;\n  value: string;\n  delta?: string;\n  trend?: number[];\n  className?: string;\n}\n\nfunction toPath(points: number[], w = 120, h = 32) {\n  const max = Math.max(...points);\n  const min = Math.min(...points);\n  const range = max - min || 1;\n  return points\n    .map((p, i) => {\n      const x = (i / (points.length - 1)) * w;\n      const y = h - 4 - ((p - min) / range) * (h - 8);\n      return (i === 0 ? \"M\" : \"L\") + x.toFixed(1) + \" \" + y.toFixed(1);\n    })\n    .join(\" \");\n}\n\nexport function StatCard({ label, value, delta, trend, className = \"\" }: StatCardProps) {\n  return (\n    <div\n      className={[\n        \"w-full max-w-[240px] rounded-xl border border-white/10 bg-zinc-950 p-[18px]\",\n        className,\n      ].join(\" \")}\n    >\n      <div className=\"flex items-center justify-between\">\n        <span className=\"text-xs text-zinc-400\">{label}</span>\n        {delta && <span className=\"font-mono text-[11px] text-sky-300\">{delta}</span>}\n      </div>\n      <div className=\"mb-2.5 mt-0.5 text-[30px] font-medium tabular-nums tracking-[-0.04em] text-zinc-100\">\n        {value}\n      </div>\n      {trend && trend.length > 1 && (\n        <svg viewBox=\"0 0 120 32\" preserveAspectRatio=\"none\" className=\"h-8 w-full\">\n          <path d={toPath(trend)} fill=\"none\" stroke=\"#7dd3fc\" strokeWidth=\"1.5\" />\n        </svg>\n      )}\n    </div>\n  );\n}\n"
    }
  ]
}