{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stat-card",
  "type": "registry:ui",
  "title": "Stat Card",
  "description": "Metric card. Depends on shadcn's own card, on this registry's button, and on this registry's tokens.",
  "registryDependencies": [
    "card",
    "@alvkit/button",
    "@alvkit/tokens"
  ],
  "files": [
    {
      "path": "registry/ui/stat-card.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\"\nimport { cn } from \"@/lib/utils\"\n\nfunction StatCard({\n  label,\n  value,\n  delta,\n  actionLabel,\n  onAction,\n  className,\n  ...props\n}: React.ComponentProps<typeof Card> & {\n  label: string\n  value: string\n  delta?: string\n  actionLabel?: string\n  onAction?: () => void\n}) {\n  return (\n    <Card data-slot=\"stat-card\" className={cn(\"w-64\", className)} {...props}>\n      <CardHeader>\n        <CardTitle className=\"text-sm font-medium text-muted-foreground\">\n          {label}\n        </CardTitle>\n      </CardHeader>\n      <CardContent className=\"flex flex-col gap-3\">\n        <div className=\"text-3xl font-semibold tabular-nums\">{value}</div>\n        {delta ? (\n          <div\n            className=\"text-xs font-medium\"\n            style={{ color: \"var(--alvkit-accent)\" }}\n          >\n            {delta}\n          </div>\n        ) : null}\n        {actionLabel ? (\n          <Button size=\"sm\" variant=\"outline\" onClick={onAction}>\n            {actionLabel}\n          </Button>\n        ) : null}\n      </CardContent>\n    </Card>\n  )\n}\n\nexport { StatCard }\n"
    }
  ]
}