{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stat-card",
  "title": "Stat Card",
  "author": "Zubeyr <https://zubeyr.dev>",
  "description": "A compact metric card: uppercase label with an optional info hint, the value, a supporting line, an optional change and an optional bar sparkline.",
  "files": [
    {
      "path": "registry/dashboard/components/stat-card/stat-card.tsx",
      "content": "import { cn } from '@/lib/utils'\n\ntype StatCardProps = {\n  label: React.ReactNode\n  value: React.ReactNode\n  hint?: React.ReactNode\n  info?: string\n  change?: number\n  spark?: number[]\n  className?: string\n}\n\nexport function StatCard({ label, value, hint, info, change, spark, className }: StatCardProps) {\n  return (\n    <article\n      className={cn(\n        'relative isolate flex flex-col gap-3 overflow-hidden rounded-xl bg-card p-4 text-card-foreground shadow-(--shadow-card)',\n        className,\n      )}\n    >\n      {spark && <Spark values={spark} />}\n      <header className=\"flex items-center gap-1.5 text-[11px] leading-none font-medium tracking-wider text-muted-foreground uppercase\">\n        <span className=\"truncate\">{label}</span>\n        {info && (\n          <span title={info} className=\"flex cursor-help\">\n            <svg viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden className=\"size-3.5\">\n              <circle cx=\"8\" cy=\"8\" r=\"6.25\" stroke=\"currentColor\" strokeWidth=\"1.25\" />\n              <path\n                d=\"M8 7.25v3.5M8 5.25v.01\"\n                stroke=\"currentColor\"\n                strokeWidth=\"1.5\"\n                strokeLinecap=\"round\"\n              />\n            </svg>\n            <span className=\"sr-only\">{info}</span>\n          </span>\n        )}\n      </header>\n      <div className=\"flex min-w-0 flex-col gap-1\">\n        <span className=\"flex items-baseline gap-2\">\n          <span className=\"text-2xl leading-none font-medium tracking-tight tabular-nums\">\n            {value}\n          </span>\n          {change !== undefined && (\n            <span\n              className={cn(\n                'text-xs font-semibold whitespace-nowrap tabular-nums',\n                change >= 0\n                  ? 'text-emerald-600 dark:text-emerald-400'\n                  : 'text-red-600 dark:text-red-400',\n              )}\n            >\n              {change >= 0 ? '↗' : '↘'} {Math.abs(change)}%\n            </span>\n          )}\n        </span>\n        {hint && <span className=\"truncate text-xs text-muted-foreground\">{hint}</span>}\n      </div>\n    </article>\n  )\n}\n\nfunction Spark({ values }: { values: number[] }) {\n  const max = Math.max(...values, 1)\n  return (\n    <span\n      aria-hidden\n      className=\"absolute inset-x-0 bottom-0 -z-10 flex h-3/5 items-end gap-0.5 px-2\"\n    >\n      {values.map((v, i) => (\n        <span\n          key={i}\n          className=\"flex-1 rounded-t-[2px] bg-chart-1\"\n          style={{ height: `${(v / max) * 100}%`, opacity: 0.15 + (i / values.length) * 0.35 }}\n        />\n      ))}\n    </span>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/dashboard/stat-card.tsx"
    }
  ],
  "cssVars": {
    "light": {
      "shadow-card": "0 1px 2px rgb(0 0 0 / 0.04), 0 0 0 1px rgb(0 0 0 / 0.07)"
    },
    "dark": {
      "shadow-card": "0 4px 4px rgb(42 42 42 / 0.32), 0 0 0 1px #0e0e0e, inset 0 1px 0 rgb(255 255 255 / 0.08), inset 0 0 0 1px rgb(255 255 255 / 0.08)"
    }
  },
  "meta": {
    "scenario": "dashboard",
    "kind": "components"
  },
  "categories": [
    "dashboard",
    "metrics",
    "cards"
  ],
  "type": "registry:component"
}