Stats

import type { ReactNode } from "react";

// The parts every panel in this kit is made of. The corners of what is inside follow the panel's own.
const air = {
  panel: "flex w-(--tui-stat-width) max-w-full flex-col gap-(--tui-stat-gap) rounded-(--tui-stat-radius) bg-(--tui-stat-bg) p-(--tui-stat-padding) font-(family-name:--tui-font) text-(length:--tui-stat-font-size) leading-none text-(--tui-stat-fg) shadow-(--tui-stat-shadow)",
  head: "flex h-9 shrink-0 items-center justify-between gap-3 px-3 text-[0.93em] font-medium text-(--tui-stat-muted)",
  chip: "inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-md bg-(--tui-stat-well) px-1.5 text-[0.8em] font-medium text-(--tui-stat-muted) tabular-nums",
  well: "rounded-[calc(var(--tui-stat-radius)_-_var(--tui-stat-padding))] bg-(--tui-stat-well)",
  detail: "text-[0.93em] leading-snug text-(--tui-stat-muted)",
};

export interface StatsProps {
  /** A quiet label over the tiles: what the numbers are of, or when. */
  label?: ReactNode;
  /** A small word at the end of the label, such as the period. */
  period?: ReactNode;
  /** A Stat for each number. */
  children: ReactNode;
  className?: string;
}

/** A few numbers worth showing, a tile to each, in one floating panel. */
export function Stats({ label, period, children, className }: StatsProps) {
  return (
    <div data-slot="stats" className={[air.panel, className].filter(Boolean).join(" ")}>
      {(label || period) && (
        <div className={air.head}>
          {label}
          {period && <span className={air.chip}>{period}</span>}
        </div>
      )}
      <dl className="m-0 grid gap-(--tui-stat-gap) [grid-template-columns:repeat(var(--tui-stat-columns),minmax(0,1fr))]">{children}</dl>
    </div>
  );
}

export interface StatProps {
  /** The number, as it should be written: "12,400", "99.9%", "4.9". */
  value: ReactNode;
  /** What the number counts. */
  label: ReactNode;
  /** How it has moved: "+12%", "-3%". A leading minus points the mark down. */
  trend?: string;
}

/** One number: what it counts over it, and which way it is going under it. */
export function Stat({ value, label, trend }: StatProps) {
  const down = trend?.trim().startsWith("-") || trend?.trim().startsWith("−");
  return (
    <div data-slot="stat" className={"flex flex-col gap-3 p-(--tui-stat-tile-padding) " + air.well}>
      <dt className={air.detail + " leading-none!"}>{label}</dt>
      <dd className="m-0 flex flex-col gap-2.5">
        <span data-slot="stat-value" className="text-(length:--tui-stat-value-size) leading-none font-semibold tracking-[-0.03em] tabular-nums">
          {value}
        </span>
        {trend && (
          <span data-slot="stat-trend" className={"flex items-center gap-1 text-[0.93em] font-medium tabular-nums " + (down ? "text-(--tui-stat-down)" : "text-(--tui-stat-up)")}>
            <svg aria-hidden viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={"size-[0.95em] " + (down ? "rotate-180" : "")}>
              <path d="M8 12.500v-9M4 7.500l4-4 4 4" />
            </svg>
            <span className="sr-only">{down ? "Down" : "Up"}</span>
            {trend.replace(/^[\s+\-−]+/, "")}
          </span>
        )}
      </dd>
    </div>
  );
}

:root {
  color-scheme: light;
  --tui-bg: #ffffff;
  --tui-fg: #0a0a0a;
  --tui-muted: #f5f5f5;
  --tui-muted-fg: #737373;
  --tui-border: #e5e5e5;
  --tui-primary: #171717;
  --tui-primary-fg: #fafafa;
  --tui-ring: #a3a3a3;
  --tui-success: #16a34a;
  --tui-warning: #d97706;
  --tui-danger: #dc2626;
  --tui-radius: 8px;
  --tui-border-width: 1px;
  --tui-space: 4px;
  --tui-shadow: none;
  --tui-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --tui-text: 14px;
  --tui-duration: 150ms;

  /* Stats */
  --tui-stat-width: 480px;
  --tui-stat-padding: calc(var(--tui-space) * 2);
  --tui-stat-gap: calc(var(--tui-space) * 1.5);
  --tui-stat-radius: calc(var(--tui-radius) * 3.25);
  --tui-stat-font-size: var(--tui-text);
  --tui-stat-bg: light-dark(var(--tui-bg), color-mix(in oklab, var(--tui-bg) 90%, var(--tui-fg)));
  --tui-stat-shadow: 0 0 0 1px color-mix(in srgb, var(--tui-fg) 5%, transparent), 0 2px 6px rgb(0 0 0 / 0.04), 0 16px 40px rgb(0 0 0 / 0.1);
  --tui-stat-fg: var(--tui-fg);
  --tui-stat-muted: var(--tui-muted-fg);
  --tui-stat-well: color-mix(in srgb, light-dark(var(--tui-bg), color-mix(in oklab, var(--tui-bg) 90%, var(--tui-fg))) 94%, var(--tui-fg));
  --tui-stat-columns: 3;
  --tui-stat-tile-padding: calc(var(--tui-space) * 4);
  --tui-stat-value-size: 28px;
  --tui-stat-up: var(--tui-success);
  --tui-stat-down: var(--tui-danger);
}

.dark,
[data-theme="dark"] {
  color-scheme: dark;
  --tui-bg: #0a0a0a;
  --tui-fg: #fafafa;
  --tui-muted: #1c1c1c;
  --tui-muted-fg: #a3a3a3;
  --tui-border: #2a2a2a;
  --tui-primary: #fafafa;
  --tui-primary-fg: #171717;
  --tui-ring: #737373;
  --tui-success: #22c55e;
  --tui-warning: #f59e0b;
  --tui-danger: #ef4444;
}