{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stat-card",
  "type": "registry:component",
  "title": "Stat Card",
  "description": "Headline KPI card for metrics, trends, and supporting context.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "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 = React.forwardRef<HTMLDivElement, StatCardProps>(\n  (\n    {\n      change,\n      className,\n      description,\n      icon,\n      label,\n      meta,\n      tone,\n      trend = \"neutral\",\n      value,\n      ...props\n    },\n    reference,\n  ) => (\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 space-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);\n\nStatCard.displayName = \"StatCard\";\n\nexport { StatCard, statCardVariants };\n",
      "type": "registry:component"
    }
  ],
  "version": "0.2.1",
  "stability": "stable"
}