{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stat-tile",
  "title": "Stat tile",
  "description": "one KPI with a signed change · `invert` when down is good",
  "dependencies": [
    "cn@^0.4.0",
    "lucide-react@^1.52.0"
  ],
  "registryDependencies": [
    "card"
  ],
  "files": [
    {
      "path": "components/kit/stat-tile.tsx",
      "content": "import { TrendingDownIcon, TrendingUpIcon } from 'lucide-react';\nimport { cn } from 'cn';\nimport { Card } from '@/components/ui/card';\n\ntype Props = {\n  label: string;\n  value: string;\n  /** Signed change, e.g. 12.5 or -3. Shown as a percentage with a trend icon. */\n  delta?: number;\n  /** What the delta compares against: \"vs last month\". */\n  deltaLabel?: string;\n  /** Whether going down is good (churn, costs): flips the colour, not the arrow. */\n  invert?: boolean;\n  className?: string;\n};\n\n/** One KPI: label, big value, and an optional signed change. Use 2–4 in a row on a dashboard. */\nexport function StatTile({ label, value, delta, deltaLabel, invert, className }: Props) {\n  const up = (delta ?? 0) >= 0;\n  const good = invert ? !up : up;\n  const Trend = up ? TrendingUpIcon : TrendingDownIcon;\n  return (\n    <Card className={cn('gap-2 p-5', className)}>\n      <p className=\"text-muted-foreground text-sm\">{label}</p>\n      <p className=\"text-3xl font-semibold tracking-tight tabular-nums\">{value}</p>\n      {delta !== undefined ? (\n        <p className=\"flex items-center gap-1.5 text-sm\">\n          <span className={cn('inline-flex items-center gap-1 font-medium', good ? 'text-success' : 'text-destructive')}>\n            <Trend className=\"size-4\" aria-hidden />\n            {up ? '+' : '−'}\n            {Math.abs(delta)}%\n          </span>\n          {deltaLabel ? <span className=\"text-muted-foreground\">{deltaLabel}</span> : null}\n        </p>\n      ) : null}\n    </Card>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/stat-tile.tsx"
    }
  ],
  "meta": {
    "exports": [
      "StatTile"
    ],
    "api": "<StatTile label value delta? deltaLabel? invert? />"
  },
  "docs": "Needs the kit theme (`@kit/theme`) and a next-themes ThemeProvider (attribute=\"class\") at the root.",
  "categories": [
    "data"
  ],
  "type": "registry:component"
}