{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stat-card",
  "title": "StatCard",
  "description": "One number, what it is, and how it moved.",
  "registryDependencies": [
    "https://creance.pages.dev/r/creance-base.json"
  ],
  "files": [
    {
      "path": "stat-card/StatCard.css",
      "content": ".cr-stat {\n  display: flex;\n  flex-direction: column;\n  gap: var(--cr-space-2);\n  box-sizing: border-box;\n  padding: var(--cr-space-4) var(--cr-space-5);\n  border-radius: var(--cr-radius-lg);\n  color: var(--cr-color-text-default);\n  font-family: var(--cr-font-family-sans);\n}\n\n.cr-stat__label {\n  color: var(--cr-color-text-muted);\n  font-size: var(--cr-font-size-xs);\n  font-weight: var(--cr-font-weight-semibold);\n}\n\n.cr-stat__row {\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: var(--cr-space-3);\n}\n\n.cr-stat__value {\n  font-family: var(--cr-font-family-display);\n  font-size: var(--cr-font-size-3xl);\n  font-weight: var(--cr-font-weight-bold);\n  font-variant-numeric: tabular-nums;\n  letter-spacing: var(--cr-font-tracking-tight);\n  line-height: 1.15;\n}\n\n.cr-stat__foot {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--cr-space-2);\n}\n\n.cr-stat__trend {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--cr-space-1);\n  padding: 2px var(--cr-space-2) 2px 6px;\n  border-radius: var(--cr-radius-full);\n  background: var(--cr-color-bg-subtle);\n  color: var(--cr-color-text-secondary);\n  font-size: var(--cr-font-size-xs);\n  font-weight: var(--cr-font-weight-semibold);\n}\n\n.cr-stat__trend[data-tone='bad'] {\n  background: var(--cr-color-status-failed-bg);\n  color: var(--cr-color-status-failed-fg);\n}\n\n.cr-stat__note {\n  color: var(--cr-color-text-muted);\n  font-size: var(--cr-font-size-xs);\n}\n",
      "type": "registry:file",
      "target": "@components/creance/stat-card/StatCard.css"
    },
    {
      "path": "stat-card/StatCard.tsx",
      "content": "import type { ReactNode } from 'react';\nimport { cx } from '@/lib/creance/cx';\nimport { ArrowDownIcon, ArrowUpIcon, MinusIcon } from '@/lib/creance/icons';\nimport { VisuallyHidden } from '@/lib/creance/VisuallyHidden';\nimport './StatCard.css';\n\nexport interface StatTrend {\n  direction: 'up' | 'down' | 'flat';\n  /** The amount of change: \"12%\", \"4\", \"No change\". */\n  label: ReactNode;\n  /** `bad` turns the chip red. Up is not always good: use it for a change that is bad news. */\n  tone?: 'neutral' | 'bad';\n}\n\nexport interface StatCardProps {\n  /** What the number is. */\n  label: ReactNode;\n  value: ReactNode;\n  trend?: StatTrend;\n  /** Beside the trend: what it is compared with, or a second fact. */\n  note?: ReactNode;\n  /** Beside the value, usually a Sparkline. */\n  chart?: ReactNode;\n  className?: string;\n}\n\nconst words = { up: 'Up', down: 'Down', flat: '' };\nconst icons = { up: <ArrowUpIcon />, down: <ArrowDownIcon />, flat: <MinusIcon /> };\n\n/** One number, what it is, and how it moved. The arrow carries the direction, and is read out in words. */\nexport function StatCard({ label, value, trend, note, chart, className }: StatCardProps) {\n  return (\n    <div className={cx('cr-stat cr-surface', className)}>\n      <span className=\"cr-stat__label\">{label}</span>\n      <span className=\"cr-stat__row\">\n        <span className=\"cr-stat__value\">{value}</span>\n        {chart}\n      </span>\n      {(trend || note) && (\n        <span className=\"cr-stat__foot\">\n          {trend && (\n            <span className=\"cr-stat__trend\" data-tone={trend.tone ?? 'neutral'}>\n              {icons[trend.direction]}\n              {words[trend.direction] && <VisuallyHidden>{words[trend.direction]} </VisuallyHidden>}\n              {trend.label}\n            </span>\n          )}\n          {note && <span className=\"cr-stat__note\">{note}</span>}\n        </span>\n      )}\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "@components/creance/stat-card/StatCard.tsx"
    }
  ],
  "categories": [
    "molecule",
    "charts"
  ],
  "type": "registry:ui"
}