Stepper and step rail
The six import steps with done / current / error / locked, and the step rail's second job: the long-form section nav for the 130 A03 pages (scroll-spy, an error count per section, jump to the first error).
Covers: stepper primitive, stepper designer, step-rail primitive, step-rail designer. Exports: Stepper, SectionNav.
Anatomy
The component as it sits in the product: English, compact, real data shapes.
States
6 states, left to right, top to bottom. A mock poll never finishes, so each state is drawn on purpose.
Density
Compact (2b ultra, the default) and comfortable, side by side. Same markup, only the density tokens change.
English · 中文
Staff pick en or cn (T001 Q25). Labels arrive localised; CJK falls back to PingFang SC / Noto Sans SC.
Long string · permission denied
The long-string case (PL-063) and what a role without the permission sees (the server decides; T003).
Both apps
One @rj/admin-kit component, two themes: the Laravel admin (navy pinned) and the DTC admin (kit v4 Midnight green), by token swap only.
Contract
The @rj/admin-kit API for this family. Mirrored in CONTRACT.md.
- Export
Stepper·@rj/admin-kit- Props
steps·current·errorAt·locked- States
- done · current · error · locked
- shadcn / Radix
- none
- Accessibility
- ol with aria-current=step
- Phone variant
- compact “Step 3 of 6” title + bar
- Export
SectionNav·@rj/admin-kit- Props
sections{id, label, errors} ·active- States
- active · done · errors
- Package underneath
- IntersectionObserver (scroll-spy)
- Accessibility
- nav of in-page links; ⌥↓ jumps to the first error