{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stat-card",
  "title": "Stat Card",
  "description": "KPI card: label, value and change against the previous period.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@ikas/status",
    "@ikas/utils"
  ],
  "files": [
    {
      "path": "registry/ikas/stat-card.tsx",
      "content": "import * as React from \"react\"\nimport { ArrowDownRightIcon, ArrowUpRightIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { statusTint } from \"@/lib/status\"\n\ntype StatCardProps = React.ComponentProps<\"div\"> & {\n  label: React.ReactNode\n  value: React.ReactNode\n  /** Change against the previous period, e.g. 12.4 for +12.4%. */\n  change?: number\n  /** Set when a decrease is good, e.g. refund rate or response time. */\n  invertChange?: boolean\n  /** Context for the change, e.g. \"vs last 30 days\". */\n  changeLabel?: React.ReactNode\n  /** Optional slot under the value, e.g. a sparkline. */\n  footer?: React.ReactNode\n}\n\n/** One KPI with its change against the previous period. */\nfunction StatCard({\n  className,\n  label,\n  value,\n  change,\n  invertChange = false,\n  changeLabel,\n  footer,\n  ...props\n}: StatCardProps) {\n  const hasChange = typeof change === \"number\" && Number.isFinite(change)\n  const isUp = hasChange && change > 0\n  const isFlat = hasChange && change === 0\n  const isGood = invertChange ? !isUp : isUp\n\n  return (\n    <div\n      data-slot=\"stat-card\"\n      className={cn(\"flex flex-col gap-2 rounded-xl bg-card p-5 shadow-card\", className)}\n      {...props}\n    >\n      <p className=\"text-[13px] font-medium text-muted-foreground\">{label}</p>\n      <p className=\"font-heading text-2xl font-semibold tracking-[-0.02em] text-foreground tabular-nums\">{value}</p>\n      {hasChange && (\n        <p className=\"flex items-center gap-1.5 text-[13px]\">\n          <span\n            className={cn(\n              \"inline-flex items-center gap-0.5 font-medium tabular-nums [&>svg]:size-3.5 [&>svg]:text-(--s-icon)\",\n              isFlat ? \"text-muted-foreground\" : cn(isGood ? statusTint.success : statusTint.danger, \"text-(--s-text)\")\n            )}\n          >\n            {!isFlat && (isUp ? <ArrowUpRightIcon /> : <ArrowDownRightIcon />)}\n            {/* Turkish percent: sign, then %, then the number (+%12,4). */}\n            {isUp ? \"+\" : change < 0 ? \"−\" : \"\"}%{Math.abs(change).toLocaleString(\"tr-TR\", { maximumFractionDigits: 1 })}\n          </span>\n          {changeLabel && <span className=\"text-muted-foreground\">{changeLabel}</span>}\n        </p>\n      )}\n      {footer}\n    </div>\n  )\n}\n\nexport { StatCard, type StatCardProps }\n",
      "type": "registry:component",
      "target": "@components/ikas/stat-card.tsx"
    }
  ],
  "docs": "https://builders.ikas.com/tr/docs/app-development/ui-kit/components/stat-card",
  "categories": [
    "data-display"
  ],
  "type": "registry:component"
}