{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stat-card",
  "type": "registry:ui",
  "title": "Stat Card",
  "description": "Metric tile with value, label, delta indicator, and status variants for dashboards.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "ui/stat-card/stat-card.tsx",
      "type": "registry:ui",
      "content": "import * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\n\nconst statCardVariants = cva(\n  [\n    'relative flex flex-col font-mono',\n    'border border-solid rounded-none',\n  ],\n  {\n    variants: {\n      variant: {\n        DEFAULT:  ['border-[var(--border)]'],\n        ACTIVE:   ['border-[var(--color-green)]'],\n        WARNING:  ['border-[var(--color-amber)]'],\n        CRITICAL: ['border-[var(--color-red)]'],\n      },\n    },\n    defaultVariants: { variant: 'DEFAULT' },\n  }\n)\n\nexport interface StatCardProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof statCardVariants> {\n  label: string\n  value: string | number\n  /** Delta text, e.g. \"+2.3%\" */\n  delta?: string\n  /** true = positive (▲ green), false = negative (▼ red), undefined = neutral */\n  deltaPositive?: boolean\n  /** Small status line shown at the bottom of the card */\n  sublabel?: string\n}\n\nconst StatCard = React.forwardRef<HTMLDivElement, StatCardProps>(\n  (\n    {\n      className,\n      variant = 'DEFAULT',\n      label,\n      value,\n      delta,\n      deltaPositive,\n      sublabel,\n      style,\n      ...props\n    },\n    ref\n  ) => {\n    const accentColor =\n      variant === 'ACTIVE'   ? 'var(--color-green)' :\n      variant === 'WARNING'  ? 'var(--color-amber)' :\n      variant === 'CRITICAL' ? 'var(--color-red)'   :\n      'var(--text-secondary)'\n\n    const accentGlow =\n      variant === 'ACTIVE'   ? 'var(--text-glow-green)' :\n      variant === 'WARNING'  ? 'var(--text-glow-amber)'  :\n      variant === 'CRITICAL' ? 'var(--text-glow-red)'    :\n      'none'\n\n    const deltaColor =\n      deltaPositive === true  ? 'var(--color-green)' :\n      deltaPositive === false ? 'var(--color-red)'   :\n      'var(--text-muted)'\n\n    const deltaSymbol =\n      deltaPositive === true  ? '▲ ' :\n      deltaPositive === false ? '▼ ' :\n      '— '\n\n    return (\n      <div\n        ref={ref}\n        className={cn(statCardVariants({ variant }), className)}\n        style={{\n          padding:    '1rem',\n          gap:        '0.4rem',\n          background: 'var(--surface)',\n          ...style,\n        }}\n        {...props}\n      >\n        {/* Label */}\n        <div\n          style={{\n            fontSize:      '0.6rem',\n            color:         'var(--text-muted)',\n            letterSpacing: '0.12em',\n            textTransform: 'uppercase',\n          }}\n        >\n          {label}\n        </div>\n\n        {/* Value */}\n        <div\n          style={{\n            fontSize:      '2rem',\n            fontWeight:    700,\n            color:         accentColor,\n            textShadow:    accentGlow,\n            lineHeight:    1,\n            letterSpacing: '-0.02em',\n          }}\n        >\n          {value}\n        </div>\n\n        {/* Delta */}\n        {delta !== undefined && (\n          <div\n            style={{\n              fontSize:      '0.7rem',\n              color:         deltaColor,\n              letterSpacing: '0.05em',\n            }}\n          >\n            {deltaSymbol}{delta}\n          </div>\n        )}\n\n        {/* Sublabel */}\n        {sublabel && (\n          <div\n            style={{\n              fontSize:      '0.6rem',\n              color:         'var(--text-muted)',\n              letterSpacing: '0.1em',\n              textTransform: 'uppercase',\n              marginTop:     'auto',\n              paddingTop:    '0.6rem',\n              borderTop:     '1px solid var(--border)',\n            }}\n          >\n            {sublabel}\n          </div>\n        )}\n      </div>\n    )\n  }\n)\nStatCard.displayName = 'StatCard'\n\nexport { StatCard, statCardVariants }\n"
    }
  ]
}