ProgressStepper

BetaRSC-safe

Indicateur d'étapes multi-step (ex. wizard fiscal, flux /import). Étapes done / active / pending via tokens sémantiques. Clamp hors-bornes confirmé (current'<'0 → première étape, current≥length → dernière), aucune exception. RSC-safe.

import { ProgressStepper } from "@lyra/tokens/components";

Playground

current=2 — étape 3/5 active (nominal)

Revenus (terminée)
Déductions (terminée)
REER / CELI
Crédits
Résultat

current=-1 (hors-bornes bas) — clampé → étape 0 active

Revenus
Déductions
REER / CELI
Crédits
Résultat

current=99 (hors-bornes haut) — clampé → dernière étape active

Revenus (terminée)
Déductions (terminée)
REER / CELI (terminée)
Crédits (terminée)
Résultat

Démo interactive — réglages du playground (props ajustables en direct) à venir.

<ProgressStepper
  steps={[{ label: "Revenus" }, { label: "Déductions" }, { label: "Résultat" }]}
  current={1}
/>

// Hors-bornes — clampé sans exception :
<ProgressStepper steps={steps} current={-1} />  // → étape 0 active
<ProgressStepper steps={steps} current={99} />  // → dernière étape active

Documentation

étape 3/5 active
1. Revenus (terminée)
2. Déductions (terminée)
3. REER / CELI
4. Crédits
5. Résultat
clamp current=-1
1. Revenus
2. Déductions
3. REER / CELI
4. Crédits
5. Résultat
clamp current=99
1. Revenus (terminée)
2. Déductions (terminée)
3. REER / CELI (terminée)
4. Crédits (terminée)
5. Résultat

steps, current

<ProgressStepper
  steps={[{ label: "Revenus" }, { label: "Déductions" }, { label: "Résultat" }]}
  current={1}
/>

// Hors-bornes — clampé sans exception :
<ProgressStepper steps={steps} current={-1} />  // → étape 0 active
<ProgressStepper steps={steps} current={99} />  // → dernière étape active