stat

1import { cva, type VariantProps } from "class-variance-authority";
2import type * as React from "react";
3import { cn } from "@/lib/utils";
4import { Separator } from "@/registry/bases/radix/ui/separator";
5 
6function Stat({ className, ...props }: React.ComponentProps<"div">) {
7  return (
8    <div
9      data-slot="stat"
10      className={cn(
11        "grid grid-cols-[1fr_auto] gap-x-4 gap-y-1 rounded-lg border bg-card p-4 text-card-foreground shadow-sm",
12        "**:data-[slot=stat-label]:col-span-1 **:data-[slot=stat-value]:col-span-1",
13        "**:data-[slot=stat-indicator]:col-start-2 **:data-[slot=stat-indicator]:row-span-2 **:data-[slot=stat-indicator]:row-start-1 **:data-[slot=stat-indicator]:self-start",
14        "**:data-[slot=stat-description]:col-span-2 **:data-[slot=stat-separator]:col-span-2 **:data-[slot=stat-trend]:col-span-2",
15        className,
16      )}
17      {...props}
18    />
19  );
20}
21 
22function StatLabel({ className, ...props }: React.ComponentProps<"div">) {
23  return (
24    <div
25      data-slot="stat-label"
26      className={cn("font-medium text-muted-foreground text-sm", className)}
27      {...props}
28    />
29  );
30}
31 
32const statIndicatorVariants = cva(
33  "flex shrink-0 items-center justify-center [&_svg]:pointer-events-none",
34  {
35    variants: {
36      variant: {
37        default: "text-muted-foreground [&_svg:not([class*='size-'])]:size-5",
38        icon: "size-8 rounded-md border [&_svg:not([class*='size-'])]:size-3.5",
39        badge:
40          "h-6 min-w-6 rounded-sm border px-1.5 font-medium text-xs [&_svg:not([class*='size-'])]:size-3",
41        action:
42          "size-8 cursor-pointer rounded-md transition-colors hover:bg-muted/50 [&_svg:not([class*='size-'])]:size-4",
43      },
44      color: {
45        default: "bg-muted text-muted-foreground",
46        success:
47          "border-green-500/20 bg-green-500/10 text-green-600 dark:text-green-400",
48        info: "border-blue-500/20 bg-blue-500/10 text-blue-600 dark:text-blue-400",
49        warning:
50          "border-orange-500/20 bg-orange-500/10 text-orange-600 dark:text-orange-400",
51        error: "border-destructive/20 bg-destructive/10 text-destructive",
52      },
53    },
54    defaultVariants: {
55      variant: "default",
56      color: "default",
57    },
58  },
59);
60 
61interface StatIndicatorProps
62  extends Omit<React.ComponentProps<"div">, "color">,
63    VariantProps<typeof statIndicatorVariants> {}
64 
65function StatIndicator({
66  className,
67  variant = "default",
68  color = "default",
69  ...props
70}: StatIndicatorProps) {
71// … truncated