Inputs & flows

The generic primitives an experience audit found missing — the building blocks for the lead-magnet calculators, multi-step wizards, list bulk-ops, and impersonation. (Experience-specific compositions — the quiz engine, calculators, pricing table, flag console — stay app-level, built from these.)

Live

Acting as Acme Foods

Exit

Loaded labor rate$32/hr

Lines / order

−+

By statusBy assignee

1. 1ERP
2. 2Credentials
3. 3Verify

Step 1 — pick your ERP.

Cancel

BackNext

None25

2 orders selectedClear

ArchiveDelete

Form inputs

• Slider (@repo/ui/form) — native range tinted to the brand; min/max/step, format. Powers the calculator inputs.
• NumberStepper — number input with −/+ steppers, clamped to min/max.
• SegmentedControl — exclusive view/option toggle (radiogroup); the “by status / by assignee” pattern.

import { Slider, NumberStepper, SegmentedControl } from '@repo/ui/form';
<Slider label="Rate" value={rate} onChange={setRate} min={20} max={80} format={(v) => `$${v}/hr`} />
<NumberStepper value={qty} onChange={setQty} min={1} max={50} />
<SegmentedControl value={view} onChange={setView} options={[{value:'status',label:'By status'},…]} />

WizardShell

import WizardShell, { type WizardStep } from '@repo/ui/WizardShell';
<WizardShell steps={steps} canAdvance={(i) => validate(i)} onComplete={save} onCancel={close} />

Multi-step container: Stepper indicator + active step content + Back/Next/Finish footer, with canAdvance validation gating. The ERP-connection, provision, and onboarding wizards build on this (Stepper alone was indicator-only).

BulkActionToolbar

<BulkActionToolbar count={n} onClear={…} noun={['order','orders']}>…actions…</BulkActionToolbar> — appears when rows are selected; shows the count + clear and hosts bulk actions. For inbox / action-items list ops.

Banner

<Banner variant="info|warning|danger|brand|impersonation" action={…} onDismiss={…}> — full-width page banner (vs the inline Alert). The impersonation variant is the hazard-tape overlay for “acting as another org”.