KPI card

1import type { HTMLAttributes } from "react";2 3export type KpiCardProps = Omit<HTMLAttributes<HTMLElement>, "children"> & {4  /** What the number measures. */5  label: string;6  /** A formatted measurement; null shows the unavailable state. */7  value: string | number | null;8  description?: string;9  /** Signed percentage change. Omit to hide the comparison; null means unavailable. */10  change?: number | null;11  changeLabel?: string;12  /** Falling costs or churn can be good news. */13  goodDirection?: "up" | "down" | "none";14  /** History ordered oldest first, with a text equivalent of its meaning. */15  sparkline?: { values: readonly number[]; description: string };16  /** Measured progress towards a positive target. */17  goal?: { value: number; max: number; label: string };18  unavailableLabel?: string;19};20 21/** A readable measurement with its change, history, and optional target. No client boundary is required. */22export function KpiCard({23  label,24  value,25  description,26  change,27  changeLabel = "vs previous period",28  goodDirection = "up",