{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stat",
  "title": "Stat",
  "description": "Key figures as a description list: label, value and a caption with an optional trend arrow.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@corsair-ui/utils"
  ],
  "files": [
    {
      "path": "registry/default/ui/stat.tsx",
      "content": "import { MinusIcon, TrendingDownIcon, TrendingUpIcon } from \"lucide-react\";\nimport type { ComponentProps } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\ntype StatTrend = \"up\" | \"down\" | \"flat\";\n\nconst TREND_ICONS = { up: TrendingUpIcon, down: TrendingDownIcon, flat: MinusIcon } as const;\n\nconst TREND_LABELS: Record<StatTrend, string> = {\n  up: \"Increase\",\n  down: \"Decrease\",\n  flat: \"No change\",\n};\n\n/**\n * A set of key figures, marked up as a description list so each value is\n * read together with its label. Lay it out with grid classes\n * (`sm:grid-cols-3`, …).\n *\n * @example\n * <StatGroup className=\"sm:grid-cols-3\">\n *   <Stat>\n *     <StatLabel>Revenue</StatLabel>\n *     <StatValue>$48,200</StatValue>\n *     <StatCaption trend=\"up\">12% since last month</StatCaption>\n *   </Stat>\n * </StatGroup>\n */\nfunction StatGroup({ className, ...props }: ComponentProps<\"dl\">) {\n  return <dl data-slot=\"stat-group\" className={cn(\"grid gap-6\", className)} {...props} />;\n}\n\n/** One figure: a StatLabel, a StatValue and optionally a StatCaption. Put it inside a StatGroup. */\nfunction Stat({ className, ...props }: ComponentProps<\"div\">) {\n  return <div data-slot=\"stat\" className={cn(\"flex flex-col gap-1\", className)} {...props} />;\n}\n\nfunction StatLabel({ className, ...props }: ComponentProps<\"dt\">) {\n  return (\n    <dt\n      data-slot=\"stat-label\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction StatValue({ className, ...props }: ComponentProps<\"dd\">) {\n  return (\n    <dd\n      data-slot=\"stat-value\"\n      className={cn(\"text-3xl font-semibold tracking-tight tabular-nums\", className)}\n      {...props}\n    />\n  );\n}\n\ninterface StatCaptionProps extends ComponentProps<\"dd\"> {\n  /** Adds an arrow for the direction of change and exposes it as `data-trend`. */\n  trend?: StatTrend;\n  /**\n   * Read to screen readers before the caption, since the arrow is only a\n   * picture. Defaults to \"Increase\", \"Decrease\" or \"No change\".\n   */\n  trendLabel?: string;\n}\n\n/**\n * A note under the value: a comparison, a period. With `trend` it gets an\n * arrow icon (hidden from screen readers, which hear `trendLabel` instead).\n * Up is tinted `text-success` and down `text-destructive`; restyle through\n * `data-trend` where a rise is bad news.\n */\nfunction StatCaption({ className, trend, trendLabel, children, ...props }: StatCaptionProps) {\n  const Icon = trend ? TREND_ICONS[trend] : null;\n\n  return (\n    <dd\n      data-slot=\"stat-caption\"\n      data-trend={trend}\n      className={cn(\n        \"text-muted-foreground flex items-center gap-1 text-xs\",\n        \"data-[trend=down]:[&>svg]:text-destructive data-[trend=up]:[&>svg]:text-success [&>svg]:size-3.5 [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {Icon ? <Icon aria-hidden=\"true\" data-slot=\"stat-trend-icon\" /> : null}\n      {trend ? <span className=\"sr-only\">{`${trendLabel ?? TREND_LABELS[trend]}: `}</span> : null}\n      {children}\n    </dd>\n  );\n}\n\nexport {\n  Stat,\n  StatCaption,\n  StatGroup,\n  StatLabel,\n  StatValue,\n  type StatCaptionProps,\n  type StatTrend,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}