Steps

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-steps-width) max-w-full flex-col gap-(--tui-steps-gap) rounded-(--tui-steps-radius) bg-(--tui-steps-bg) p-(--tui-steps-padding) font-(family-name:--tui-font) text-(length:--tui-steps-font-size) leading-none text-(--tui-steps-fg) shadow-(--tui-steps-shadow)",
  head: "flex h-9 shrink-0 items-center justify-between gap-3 px-3 text-[0.93em] font-medium text-(--tui-steps-muted)",
  chip: "inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-md bg-(--tui-steps-well) px-1.5 text-[0.8em] font-medium text-(--tui-steps-muted) tabular-nums",
  row: "flex min-h-(--tui-steps-row-height) items-center gap-3 rounded-[calc(var(--tui-steps-radius)_-_var(--tui-steps-padding))] px-3 py-2 transition-colors duration-(--tui-duration)",
  meta: "ml-auto shrink-0 pl-2 text-[0.93em] text-(--tui-steps-muted) tabular-nums",
  detail: "text-[0.93em] leading-snug text-(--tui-steps-muted)",
};

export interface StepsProps {
  /** A quiet label over the steps. */
  label?: ReactNode;
  items: { title: ReactNode; body?: ReactNode; /** A quiet word at the end of the row: how long it takes, who does it. */ meta?: ReactNode }[];
  /** The step being done, counting from 0. Earlier steps are ticked and this row is picked out. Leave it out for a plain order. */
  current?: number;
  className?: string;
}

/**
 * How it works, in order, as rows in a floating panel: a number in a round
 * mark, a name for the step, and a quiet word at the end. Given the step
 * being done, the finished ones are ticked, that row is picked out, and the
 * label says how far along things are.
 */
export function Steps({ label, items, current, className }: StepsProps) {
  return (
    <div data-slot="steps" className={[air.panel, className].filter(Boolean).join(" ")}>
      {(label || current !== undefined) && (
        <div className={air.head}>
          {label}
          {current !== undefined && (
            <span className={air.chip}>
              {Math.min(current + 1, items.length)} of {items.length}
            </span>
          )}
        </div>
      )}
      <ol className="m-0 flex list-none flex-col gap-(--tui-steps-gap) p-0">
        {items.map((item, i) => {
          const state = current === undefined ? "plain" : i < current ? "done" : i === current ? "current" : "ahead";
          return (
            <li key={i} data-slot="step" data-state={state} aria-current={state === "current" ? "step" : undefined} className={air.row + " data-[state=current]:bg-(--tui-steps-well)"}>
              <span
                aria-hidden
                data-slot="step-mark"
                className={"flex size-7 shrink-0 items-center justify-center rounded-full text-[0.86em] font-semibold tabular-nums " + (state === "done" || state === "current" ? "bg-(--tui-steps-accent) text-(--tui-steps-accent-fg)" : "bg-(--tui-steps-well) text-(--tui-steps-muted)")}
              >
                {state === "done" ? (
                  <svg aria-hidden viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="size-3">
            <path d="M3.500 8.500l3 3 6-7" />
          </svg>
                ) : (
                  i + 1
                )}
              </span>
              <span className={"flex min-w-0 flex-col gap-1.5 " + (state === "ahead" ? "opacity-55" : "")}>
                <span className="font-medium">{item.title}</span>
                {item.body && <span className={air.detail}>{item.body}</span>}
              </span>
              {item.meta && <span className={air.meta}>{item.meta}</span>}
            </li>
          );
        })}
      </ol>
    </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;

  /* Steps */
  --tui-steps-width: 400px;
  --tui-steps-padding: calc(var(--tui-space) * 2);
  --tui-steps-gap: calc(var(--tui-space) * 0.5);
  --tui-steps-radius: calc(var(--tui-radius) * 3.25);
  --tui-steps-font-size: var(--tui-text);
  --tui-steps-bg: light-dark(var(--tui-bg), color-mix(in oklab, var(--tui-bg) 90%, var(--tui-fg)));
  --tui-steps-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-steps-fg: var(--tui-fg);
  --tui-steps-muted: var(--tui-muted-fg);
  --tui-steps-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-steps-accent: var(--tui-primary);
  --tui-steps-accent-fg: var(--tui-primary-fg);
  --tui-steps-row-height: calc(var(--tui-space) * 14);
}

.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;
}