{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stat-card",
  "title": "Stat Card",
  "description": "Headline KPI card for metrics, trends, and supporting context.",
  "dependencies": [
    "@vllnt/ui@^0.3.0"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/stat-card/stat-card.tsx",
      "content": "import * as React from \"react\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { ArrowDownRight, ArrowRight, ArrowUpRight } from \"lucide-react\";\n\nimport { cn } from \"@vllnt/ui\";\nimport { Card, CardContent, CardDescription, CardHeader } from \"@vllnt/ui\";\n\nconst statCardVariants = cva(\"overflow-hidden border shadow-sm\", {\n  defaultVariants: {\n    tone: \"neutral\",\n  },\n  variants: {\n    tone: {\n      danger: \"border-red-200/70 dark:border-red-950/70\",\n      neutral: \"\",\n      success: \"border-emerald-200/70 dark:border-emerald-950/70\",\n      warning: \"border-amber-200/70 dark:border-amber-950/70\",\n    },\n  },\n});\n\nconst accentVariants = cva(\"h-1 w-full\", {\n  defaultVariants: {\n    tone: \"neutral\",\n  },\n  variants: {\n    tone: {\n      danger: \"bg-red-500/80\",\n      neutral: \"bg-primary/70\",\n      success: \"bg-emerald-500/80\",\n      warning: \"bg-amber-500/80\",\n    },\n  },\n});\n\nconst changeVariants = cva(\n  \"inline-flex items-center gap-1 text-xs font-medium\",\n  {\n    defaultVariants: {\n      trend: \"neutral\",\n    },\n    variants: {\n      trend: {\n        down: \"text-red-600 dark:text-red-400\",\n        neutral: \"text-muted-foreground\",\n        up: \"text-emerald-600 dark:text-emerald-400\",\n      },\n    },\n  },\n);\n\ntype StatCardTrend = \"down\" | \"neutral\" | \"up\";\n\nexport type StatCardProps = React.HTMLAttributes<HTMLDivElement> &\n  VariantProps<typeof statCardVariants> & {\n    change?: React.ReactNode;\n    description?: React.ReactNode;\n    icon?: React.ReactNode;\n    label: React.ReactNode;\n    meta?: React.ReactNode;\n    trend?: StatCardTrend;\n    value: React.ReactNode;\n  };\n\nfunction TrendIcon({ trend }: { trend: StatCardTrend }) {\n  if (trend === \"up\") {\n    return <ArrowUpRight className=\"size-3.5\" />;\n  }\n\n  if (trend === \"down\") {\n    return <ArrowDownRight className=\"size-3.5\" />;\n  }\n\n  return <ArrowRight className=\"size-3.5\" />;\n}\n\nconst StatCard = ({\n  change,\n  className,\n  description,\n  icon,\n  label,\n  meta,\n  ref: reference,\n  tone,\n  trend = \"neutral\",\n  value,\n  ...props\n}: StatCardProps & { ref?: React.Ref<HTMLDivElement> }) => (\n  <Card\n    className={cn(statCardVariants({ tone }), className)}\n    ref={reference}\n    {...props}\n  >\n    <div className={accentVariants({ tone })} />\n    <CardHeader className=\"flex flex-row items-start justify-between gap-4 gap-y-0 pb-3\">\n      <div className=\"space-y-1\">\n        <CardDescription className=\"text-xs font-medium uppercase tracking-[0.14em]\">\n          {label}\n        </CardDescription>\n        <div className=\"text-3xl font-semibold tracking-tight\">{value}</div>\n      </div>\n      {icon ? (\n        <div className=\"rounded-lg border bg-muted/50 p-2 text-muted-foreground\">\n          {icon}\n        </div>\n      ) : null}\n    </CardHeader>\n    {description || change || meta ? (\n      <CardContent className=\"space-y-3\">\n        {description ? (\n          <p className=\"text-sm text-muted-foreground\">{description}</p>\n        ) : null}\n        {change || meta ? (\n          <div className=\"flex flex-wrap items-center justify-between gap-3\">\n            {change ? (\n              <div className={changeVariants({ trend })}>\n                <TrendIcon trend={trend} />\n                <span>{change}</span>\n              </div>\n            ) : null}\n            {meta ? (\n              <div className=\"text-xs text-muted-foreground\">{meta}</div>\n            ) : null}\n          </div>\n        ) : null}\n      </CardContent>\n    ) : null}\n  </Card>\n);\n\nStatCard.displayName = \"StatCard\";\n\nexport { StatCard, statCardVariants };\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.3.0",
  "stability": "stable"
}