Metric

1import * as React from "react";
2import { ArrowDownRight, ArrowRight, ArrowUpRight } from "lucide-react";
3 
4import { cn } from "@/lib/utils";
5 
6export interface MetricProps extends React.HTMLAttributes<HTMLDivElement> {
7  label: React.ReactNode;
8  value: React.ReactNode;
9  /** Numerical delta. Positive renders green, negative red, 0 neutral. */
10  delta?: number;
11  /** Format the delta as a percent (appends %). */
12  deltaUnit?: "%" | "abs";
13  /** Reverse delta semantics — positive = bad, negative = good. */
14  invertDelta?: boolean;
15  hint?: React.ReactNode;
16}
17 
18const Metric = React.memo(function Metric({
19  className,
20  label,
21  value,
22  delta,
23  deltaUnit = "%",
24  invertDelta = false,
25  hint,
26  ...props
27}: MetricProps) {
28  const hasDelta = typeof delta === "number";
29  const sign = hasDelta && delta !== 0 ? (delta > 0 ? 1 : -1) : 0;
30  const tone =
31    sign === 0
32      ? "text-foreground-muted"
33      : sign > 0 !== invertDelta
34        ? "text-success"
35        : "text-danger";
36  const Arrow = sign === 0 ? ArrowRight : sign > 0 ? ArrowUpRight : ArrowDownRight;
37 
38  return (
39    <div className={cn("flex flex-col gap-1", className)} {...props}>
40      <span className="text-mono text-foreground-muted text-[10px] tracking-[0.1em] uppercase">
41        {label}
42      </span>
43      <div className="flex items-baseline gap-2">
44        <span className="text-xl leading-none font-semibold tracking-tight">{value}</span>
45        {hasDelta && (
46          <span className={cn("text-mono inline-flex items-center gap-0.5 text-[11px]", tone)}>
47            <Arrow className="size-3" />
48            {Math.abs(delta!)}
49            {deltaUnit === "%" ? "%" : ""}
50          </span>
51        )}
52      </div>
53      {hint && <span className="text-mono text-foreground-subtle text-[10px]">{hint}</span>}
54    </div>
55  );
56});
57 
58export { Metric };