Stat card

1import * as React from "react";
2 
3import { cn, clamp } from "@/lib/utils";
4import { StatusBadge, type StatusBadgeProps } from "@/registry/blacksite/ui/status-badge";
5import { Progress } from "@/registry/blacksite/ui/progress";
6 
7export interface StatCardProps extends React.HTMLAttributes<HTMLDivElement> {
8  label: React.ReactNode;
9  value: React.ReactNode;
10  status?: StatusBadgeProps["status"];
11  statusLabel?: string;
12  /** Progress / integrity value 0–100. */
13  progress?: number;
14  progressTone?: "primary" | "success" | "warning" | "danger" | "info" | "gold" | "neutral";
15  /** Text color tone for the value. */
16  valueTone?: "default" | "success" | "warning" | "danger" | "info" | "primary" | "gold";
17}
18 
19const valueToneClass: Record<NonNullable<StatCardProps["valueTone"]>, string> = {
20  default: "text-foreground",
21  success: "text-success",
22  warning: "text-warning",
23  danger: "text-danger",
24  info: "text-info",
25  primary: "text-primary",
26  gold: "text-gold",
27};
28 
29const StatCard = React.memo(
30  React.forwardRef<HTMLDivElement, StatCardProps>(
31    (
32      {
33        className,
34        label,
35        value,
36        status,
37        statusLabel,
38        progress,
39        progressTone = "primary",
40        valueTone = "default",
41        ...props
42      },
43      ref,
44    ) => {
45      return (
46        <div
47          ref={ref}
48          className={cn(
49            "border-border bg-card flex flex-col gap-2 rounded-md border px-3 py-2.5",
50            "shadow-[var(--shadow-panel)]",
51            className,
52          )}
53          {...props}
54        >
55          <div className="flex items-start justify-between gap-2">
56            <span className="text-mono text-foreground-muted truncate text-[10px] tracking-[0.1em] uppercase">
57              {label}
58            </span>
59            {status && <StatusBadge status={status}>{statusLabel}</StatusBadge>}
60          </div>
61          <div
62            className={cn(
63              "text-xl leading-tight font-semibold tracking-tight",
64              valueToneClass[valueTone],
65            )}
66          >
67            {value}
68          </div>
69          {typeof progress === "number" && (
70            <Progress value={clamp(progress, 0, 100)} tone={progressTone} size="xs" />
71          )}
72        </div>
73      );
74    },
75  ),
76);
77StatCard.displayName = "StatCard";
78 
79export { StatCard };