import React__default from 'react'; /** * Progress state of a single step in a multi-step journey. * * `'default'` is the unannotated baseline (a step with no `status` set) and * renders identically to `'not-started'` — both exist because the nswds-app * source distinguished them, and consumers may key behaviour off the * difference even though the visual is shared. */ type StepStatus = 'default' | 'not-started' | 'in-progress' | 'completed' | 'saved' | 'error' | 'cannot-start'; /** One entry in a {@link StepIndicator} list. */ type Step = { /** Visible step name, e.g. "Your details". */ title: string; /** Optional second line under the title. */ description?: string; /** Navigation target; also the identity compared against `currentHref`. */ href: string; /** Progress state. Omitted = `'default'` (renders as not started). */ status?: StepStatus; }; /** * Per-status visual treatment, collapsed from the nswds-app source's seven * copy-pasted JSX branches into one map. Every colour funnels through a single * `--step-ink` custom property declared on the `
  • `, so the marker, * connector, hover fill and focus ring all follow from one declaration per * status (the same ink-token pattern as footer.tsx / link.tsx). * * Ink values use RAW @nswds/tokens custom properties (`--success-600`, not the * `--color-success-600` Tailwind bridge alias): Tailwind v4 tree-shakes * unreferenced `@theme` keys and an arbitrary-property reference is not a * usage signal, but the raw tokens are plain `:root` declarations that always * resolve — the same precedent as button.tsx's semantic colours. * * Token remapping from the nswds-app source (documented per §3 of AGENTS.md): * - completed/saved: `success-450`/`-500`/`-550` → `--success-600` (dark: * `--success-500`). 450 (L≈0.63) gives the white check only ≈2.4:1; 600 * (L≈0.55) clears the 3:1 non-text minimum (WCAG 2.2 1.4.11) and matches * Button's solid success. * - in-progress: `primary-500` → `--primary-600` (dark: `--primary-450`). * Masterbrand primary-500 (L≈0.72) fails 3:1 against white for the marker * border and icon; 600 matches Button's tertiary. The dark override * lightens the ink so it clears 3:1 against dark surfaces. * - error: `danger-450`/`-500` → `--danger-600` (dark: `--danger-500`), * matching Button's solid danger. * - not-started/default: border `grey-300` → `--grey-500` (dark: * `--grey-450`). grey-300 (L≈0.90) is ≈1.2:1 against white — invisible to * low-vision users; grey-500 clears 3:1 (1.4.11). * - cannot-start: `grey-600` kept (white glyph on it is ≈7:1 in both modes). * - marker fill `bg-white` → `bg-background` so outlined markers sit on the * page surface in dark mode instead of punching white holes in it. */ declare const stepStatusStyles: Record` so descendants inherit. */ ink: string; /** Connector line colour (the `aria-hidden` rule between markers). */ connector: string; /** Structural marker treatment. */ marker: 'solid' | 'outline' | 'dot'; /** Glyph rendered inside the marker (always `aria-hidden`). */ icon: React__default.ElementType | null; /** Default visually-hidden status announcement (see `statusLabels`). */ label?: string; /** Steps that must not be reachable yet. */ disabled?: boolean; }>; type StepIndicatorProps = Omit, 'children'> & { /** Steps to render, in journey order. `href` must be unique per step. */ steps: Step[]; /** * The href of the page being viewed. The matching step gets * `aria-current="step"` and — when its status carries no stronger visual * (default / not-started / in-progress) — the emphasised current treatment. * Replaces the source's internal next/navigation `usePathname()` coupling * so the component stays framework-free. */ currentHref?: string; /** Click handler applied to every enabled step link. */ onNavigate?: React__default.MouseEventHandler; /** * Visually-hidden status announcements appended to each title, merged over * the English defaults ("Completed", "Saved", …). Set a status to * `undefined` to suppress its announcement; supply strings to localise. */ statusLabels?: Partial>; ref?: React__default.Ref; }; /** * Vertical list of the steps in a multi-step journey — one link per step with * a status marker and connector line, as used beside long NSW Government * application forms. * * Accessibility contract: * - Renders an `
      ` — steps are a sequence, so an ordered list * conveys the ordering to assistive tech (the nswds-app source used `
        `); * the explicit `role` restores list semantics in Safari/VoiceOver where * `list-style: none` removes them. * - The step matching `currentHref` gets `aria-current="step"` whatever its * status (the source only set it on one of its seven branches). * - Markers and connectors are purely decorative (`aria-hidden`); status is * announced through a visually-hidden suffix after each title instead, * because colour and iconography alone would leave screen-reader users with * no status at all (WCAG 2.2 1.4.1 Use of Colour). See `statusLabels`. * - `cannot-start` steps are `aria-disabled`, removed from the tab order and * click-inert — the source left them fully clickable, which invited * navigation into pages that reject you. * - Links get a `focus-visible` outline drawn in the status ink (the source * relied on browser defaults), satisfying 2.4.7 Focus Visible with a 3:1 * indicator (2.4.13). * * All anchors render through `Link` (`variant="unstyled"`), so apps can inject * a framework link (e.g. next/link) via `LinkProvider`. */ declare function StepIndicator({ steps, currentHref, onNavigate, statusLabels, className, ref, ...props }: StepIndicatorProps): React__default.JSX.Element; /** A titled group of steps inside {@link StepNav}. */ type StepNavSection = { /** Section heading, e.g. "Before you start". */ title: string; steps: Step[]; }; type StepNavProps = Omit, 'children'> & { /** Titled groups of steps, rendered as heading + StepIndicator pairs. */ sections: StepNavSection[]; /** * Heading element for section titles. Defaults to 2; set it so the headings * slot into the surrounding page outline (WCAG 2.2 1.3.1). */ headingLevel?: 2 | 3 | 4 | 5 | 6; /** Forwarded to every section's {@link StepIndicator}. */ currentHref?: string; /** Forwarded to every section's {@link StepIndicator}. */ onNavigate?: React__default.MouseEventHandler; /** Forwarded to every section's {@link StepIndicator}. */ statusLabels?: Partial>; ref?: React__default.Ref; }; /** * Sectioned journey navigation: a `