Step Indicator

1'use client'
2 
3import React from 'react'
4 
5import { cn } from '@/lib/utils'
6 
7import { Link } from '@/components/link'
8import { IconCheck } from '@/icons/check'
9import { IconError } from '@/icons/error'
10import { IconMoreHoriz } from '@/icons/more-horiz'
11import { IconRemove } from '@/icons/remove'
12 
13/**
14 * Progress state of a single step in a multi-step journey.
15 *
16 * `'default'` is the unannotated baseline (a step with no `status` set) and
17 * renders identically to `'not-started'` — both exist because the nswds-app
18 * source distinguished them, and consumers may key behaviour off the
19 * difference even though the visual is shared.
20 */
21type StepStatus =
22  'default' | 'not-started' | 'in-progress' | 'completed' | 'saved' | 'error' | 'cannot-start'
23 
24/** One entry in a {@link StepIndicator} list. */
25type Step = {
26  /** Visible step name, e.g. "Your details". */
27  title: string
28  /** Optional second line under the title. */
29  description?: string
30  /** Navigation target; also the identity compared against `currentHref`. */
31  href: string
32  /** Progress state. Omitted = `'default'` (renders as not started). */
33  status?: StepStatus
34}
35 
36/**
37 * Per-status visual treatment, collapsed from the nswds-app source's seven
38 * copy-pasted JSX branches into one map. Every colour funnels through a single
39 * `--step-ink` custom property declared on the `<li>`, so the marker,
40 * connector, hover fill and focus ring all follow from one declaration per
41 * status (the same ink-token pattern as footer.tsx / link.tsx).
42 *
43 * Ink values use RAW @nswds/tokens custom properties (`--success-600`, not the
44 * `--color-success-600` Tailwind bridge alias): Tailwind v4 tree-shakes
45 * unreferenced `@theme` keys and an arbitrary-property reference is not a
46 * usage signal, but the raw tokens are plain `:root` declarations that always
47 * resolve — the same precedent as button.tsx's semantic colours.
48 *
49 * Token remapping from the nswds-app source (documented per §3 of AGENTS.md):
50 * - completed/saved: `success-450`/`-500`/`-550` → `--success-600` (dark:
51 *   `--success-500`). 450 (L≈0.63) gives the white check only ≈2.4:1; 600
52 *   (L≈0.55) clears the 3:1 non-text minimum (WCAG 2.2 1.4.11) and matches
53 *   Button's solid success.
54 * - in-progress: `primary-500` → `--primary-600` (dark: `--primary-450`).
55 *   Masterbrand primary-500 (L≈0.72) fails 3:1 against white for the marker
56 *   border and icon; 600 matches Button's tertiary. The dark override
57// … truncated