Function Stat

dashboard/lib/primitives.tsx:78–104

({
  label,
  value,
  hint,
  title,
  variant = "default",
  className,
}: {
  label: string;
  value: React.ReactNode;
  hint?: string;
  /** Native tooltip text for the whole tile; sets cursor: help when present. */
  title?: string;
  variant?: "default" | "compact";
  className?: string;
})

 * (and a `help` cursor) on the whole tile — used by holographic stat rows that
 * need to explain what a number means without adding visible chrome. */
export function Stat({
  label,
  value,
  hint,
  title,
  variant = "default",
  className,
}: {
  label: string;
  value: React.ReactNode;
  hint?: string;
  /** Native tooltip text for the whole tile; sets cursor: help when present. */
  title?: string;
  variant?: "default" | "compact";
  className?: string;
}) {
  return (
    <div
      className={cn("tdp-stat", variant === "compact" && "tdp-stat-compact", className)}
      title={title}
    >
      <div className="tdp-stat-value">{value}</div>
      <div className="tdp-stat-label">{label}</div>
      {hint && <div className="tdp-stat-hint">{hint}</div>}
    </div>
  );
}

/** Label/value bar list of optionally-pickable rows. */
export function BarList<Row extends Record<string, unknown>>({