{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stat-card",
  "title": "Stat Card",
  "description": "Statistics card with trend indicators, icons, and optional progress bars",
  "dependencies": [
    "class-variance-authority",
    "lucide-react"
  ],
  "registryDependencies": [
    "@boldkit/utils",
    "@boldkit/card",
    "@boldkit/progress"
  ],
  "files": [
    {
      "path": "registry/default/ui/stat-card.tsx",
      "content": "/* eslint-disable react-refresh/only-export-components */\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Progress } from '@/components/ui/progress'\nimport { TrendingUp, TrendingDown, Minus } from 'lucide-react'\n\nconst statCardVariants = cva(\n  'relative overflow-hidden',\n  {\n    variants: {\n      variant: {\n        default: '',\n        compact: '[&_.stat-content]:p-4',\n        large: 'md:col-span-2',\n      },\n      colorScheme: {\n        primary: '[&_.stat-icon]:bg-primary [&_.stat-bg]:bg-primary',\n        secondary: '[&_.stat-icon]:bg-secondary [&_.stat-bg]:bg-secondary',\n        accent: '[&_.stat-icon]:bg-accent [&_.stat-bg]:bg-accent',\n        success: '[&_.stat-icon]:bg-success [&_.stat-bg]:bg-success',\n        warning: '[&_.stat-icon]:bg-warning [&_.stat-bg]:bg-warning',\n        info: '[&_.stat-icon]:bg-info [&_.stat-bg]:bg-info',\n        destructive: '[&_.stat-icon]:bg-destructive [&_.stat-bg]:bg-destructive',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      colorScheme: 'primary',\n    },\n  }\n)\n\nexport interface StatCardProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'color'>,\n    VariantProps<typeof statCardVariants> {\n  title: string\n  value: string | number\n  change?: string\n  trend?: 'up' | 'down' | 'neutral'\n  icon?: React.ReactNode\n  progress?: { value: number; label?: string }\n  comparison?: string\n  /** @deprecated Use colorScheme instead */\n  color?: 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'info' | 'destructive'\n}\n\nconst StatCard = React.forwardRef<HTMLDivElement, StatCardProps>(\n  (\n    {\n      className,\n      variant,\n      colorScheme,\n      color,\n      title,\n      value,\n      change,\n      trend = 'neutral',\n      icon,\n      progress,\n      comparison = 'vs last month',\n      ...props\n    },\n    ref\n  ) => {\n    // Support legacy color prop\n    const resolvedColorScheme = colorScheme ?? color ?? 'primary'\n\n    const TrendIcon = trend === 'up' ? TrendingUp : trend === 'down' ? TrendingDown : Minus\n    const trendColor = trend === 'up' ? 'text-success' : trend === 'down' ? 'text-destructive' : 'text-muted-foreground'\n\n    return (\n      <Card\n        ref={ref}\n        className={cn(statCardVariants({ variant, colorScheme: resolvedColorScheme }), className)}\n        {...props}\n      >\n        {/* Decorative background element */}\n        <div className=\"stat-bg absolute top-0 right-0 w-24 h-24 opacity-20 -translate-y-8 translate-x-8 rotate-12\" />\n\n        <CardContent className=\"stat-content p-6\">\n          <div className=\"flex items-start justify-between\">\n            <div>\n              <p className=\"text-sm font-bold uppercase tracking-wide text-muted-foreground mb-1\">\n                {title}\n              </p>\n              <p className=\"text-3xl font-black\">{value}</p>\n              {change && (\n                <div className={cn('flex items-center gap-1 mt-2', trendColor)}>\n                  <TrendIcon className=\"h-4 w-4\" />\n                  <span className=\"text-sm font-bold\">{change}</span>\n                  <span className=\"text-sm text-muted-foreground\">{comparison}</span>\n                </div>\n              )}\n            </div>\n            {icon && (\n              <div className=\"stat-icon w-12 h-12 border-3 border-foreground flex items-center justify-center shadow-[3px_3px_0px_hsl(var(--shadow-color))] text-foreground\">\n                {icon}\n              </div>\n            )}\n          </div>\n\n          {/* Progress section */}\n          {progress && (\n            <div className=\"mt-4 pt-4 border-t-2 border-foreground/10\">\n              <div className=\"flex items-center justify-between text-sm mb-2\">\n                <span className=\"text-muted-foreground\">\n                  {progress.label || 'Progress'}\n                </span>\n                <span className=\"font-bold\">{progress.value}%</span>\n              </div>\n              <Progress value={progress.value} className=\"h-3\" />\n            </div>\n          )}\n        </CardContent>\n      </Card>\n    )\n  }\n)\nStatCard.displayName = 'StatCard'\n\nexport { StatCard, statCardVariants }\n",
      "type": "registry:ui",
      "target": "components/ui/stat-card.tsx"
    }
  ],
  "type": "registry:ui"
}