{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stat-card",
  "type": "registry:ui",
  "title": "StatCard",
  "description": "Large key metric display card with optional trend indicator.",
  "registryDependencies": [
    "https://ui.arpitbhayani.me/r/aui.json"
  ],
  "files": [
    {
      "path": "ui/stat-card.tsx",
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type StatCardAccent =\n  | \"red\"\n  | \"rose\"\n  | \"green\"\n  | \"emerald\"\n  | \"blue\"\n  | \"amber\"\n  | \"violet\"\n  | \"pink\"\n  | \"cyan\";\n\nconst ACCENT_STYLES: Record<StatCardAccent, string> = {\n  green: \"text-emerald-600 dark:text-emerald-400\",\n  emerald: \"text-emerald-600 dark:text-emerald-400\",\n  red: \"text-rose-600 dark:text-rose-400\",\n  rose: \"text-rose-600 dark:text-rose-400\",\n  amber: \"text-amber-600 dark:text-amber-400\",\n  blue: \"text-sky-600 dark:text-sky-400\",\n  violet: \"text-purple-600 dark:text-purple-400\",\n  pink: \"text-pink-600 dark:text-pink-400\",\n  cyan: \"text-cyan-600 dark:text-cyan-400\",\n};\n\nexport interface StatCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  value: React.ReactNode;\n  label: React.ReactNode;\n  description?: React.ReactNode;\n  trend?: React.ReactNode;\n  accent?: StatCardAccent;\n}\n\nexport function StatCard({\n  value,\n  label,\n  description,\n  trend,\n  accent,\n  className,\n  ...props\n}: StatCardProps) {\n  return (\n    <div\n      className={cn(\n        \"rounded-xl border border-border bg-card p-6 shadow-xs flex flex-col justify-between my-3\",\n        className\n      )}\n      {...props}\n    >\n      <div>\n        <div\n          className={cn(\n            \"font-heading text-3xl md:text-4xl font-extrabold text-foreground tracking-tight tabular-nums\",\n            accent && ACCENT_STYLES[accent]\n          )}\n        >\n          {value}\n        </div>\n        <div className=\"font-sans text-sm font-semibold text-muted-foreground uppercase tracking-wider mt-1\">\n          {label}\n        </div>\n      </div>\n      {(description || trend) && (\n        <div className=\"mt-4 pt-3 border-t border-border flex items-center justify-between text-xs text-muted-foreground\">\n          {description && <div>{description}</div>}\n          {trend && <div className=\"font-mono text-emerald-500 font-medium\">{trend}</div>}\n        </div>\n      )}\n    </div>\n  );\n}\n",
      "type": "registry:ui"
    }
  ]
}