{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stat-card",
  "type": "registry:ui",
  "title": "Stat card",
  "description": "Large number, one-line caption and optional delta chip.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@wibo/utils"
  ],
  "files": [
    {
      "path": "src/components/stat-card.tsx",
      "type": "registry:ui",
      "content": "import type { ComponentProps, ReactNode } from \"react\";\nimport { ArrowDownRight, ArrowUpRight, Minus } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\ntype DeltaTrend = \"up\" | \"down\" | \"flat\";\ntype DeltaSentiment = \"positive\" | \"negative\" | \"neutral\";\n\ninterface StatDeltaProps extends Omit<ComponentProps<\"span\">, \"children\"> {\n  /** Formatted change, for example \"+12.5%\". */\n  value: ReactNode;\n  trend: DeltaTrend;\n  /** Whether the change is good. Defaults: up positive, down negative, flat neutral. */\n  sentiment?: DeltaSentiment;\n  /** Screen-reader text for the trend. */\n  trendLabel?: string;\n}\n\nconst defaultSentiment: Record<DeltaTrend, DeltaSentiment> = {\n  up: \"positive\",\n  down: \"negative\",\n  flat: \"neutral\",\n};\n\nconst defaultTrendLabel: Record<DeltaTrend, string> = {\n  up: \"Increase\",\n  down: \"Decrease\",\n  flat: \"No change\",\n};\n\n/** Delta chip: arrow plus formatted change, coloured by sentiment (Mastra's change badge). */\nfunction StatDelta({ value, trend, sentiment, trendLabel, className, ...props }: StatDeltaProps) {\n  const tone = sentiment ?? defaultSentiment[trend];\n  const Icon = trend === \"up\" ? ArrowUpRight : trend === \"down\" ? ArrowDownRight : Minus;\n  return (\n    <span\n      data-slot=\"stat-delta\"\n      data-sentiment={tone}\n      className={cn(\n        \"inline-flex h-5 items-center gap-0.5 rounded-md px-1.5 font-mono text-xs tabular-nums inset-ring\",\n        tone === \"positive\" && \"bg-success/10 text-success inset-ring-success/20\",\n        tone === \"negative\" && \"bg-danger/10 text-danger inset-ring-danger/20\",\n        tone === \"neutral\" && \"bg-muted text-muted-foreground inset-ring-border\",\n        className,\n      )}\n      {...props}\n    >\n      <Icon aria-hidden=\"true\" className=\"size-3\" />\n      <span className=\"sr-only\">{trendLabel ?? defaultTrendLabel[trend]}</span>\n      {value}\n    </span>\n  );\n}\n\ninterface StatCardProps extends Omit<ComponentProps<\"div\">, \"title\"> {\n  label: ReactNode;\n  /** The formatted number. Rendered large, monospace, tabular. */\n  value: ReactNode;\n  /** One line under the number, for example \"in this range\". */\n  caption?: ReactNode;\n  delta?: StatDeltaProps;\n  /** Small Lucide icon at the top right. */\n  icon?: ReactNode;\n  /** Top-right action (for example an expand button); replaces the icon. */\n  action?: ReactNode;\n}\n\n/**\n * KPI tile in the Mastra console layout: label and a small icon on one row,\n * the number in mono below, then a hairline and a one-line caption.\n */\nfunction StatCard({ label, value, caption, delta, icon, action, className, ...props }: StatCardProps) {\n  return (\n    <div\n      data-slot=\"stat-card\"\n      className={cn(\n        \"flex flex-col gap-1.5 rounded-xl border border-border bg-card px-4 py-3 text-card-foreground shadow-card\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"flex items-start justify-between gap-2\">\n        <div className=\"text-sm font-medium text-foreground\">{label}</div>\n        {action ?? (icon ? <span aria-hidden=\"true\" className=\"text-muted-foreground [&_svg]:size-4\">{icon}</span> : null)}\n      </div>\n      <div className=\"flex min-h-7 flex-wrap items-center gap-2\">\n        <div className=\"font-mono text-lg font-medium tabular-nums\">{value}</div>\n        {delta ? <StatDelta {...delta} /> : null}\n      </div>\n      {caption ? (\n        <div className=\"mt-1 border-t border-border pt-2 text-label text-muted-foreground\">{caption}</div>\n      ) : null}\n    </div>\n  );\n}\n\nexport { StatCard, StatDelta };\nexport type { DeltaSentiment, DeltaTrend, StatCardProps, StatDeltaProps };\n"
    }
  ]
}