Stepper

In review

Live · web

Horizontal: advance / retreat, watch the connectors fill

1. Workspace
2. 2Provider
3. 3Model
4. 4Review

BackContinue

Vertical: step labels + descriptions

1. Connect repositorydizyx/nockerl linked via the credential store
2. Pick a branchmain · 3 sessions ahead
3. 3
   Configure CItypecheck · lint · build · test
4. 4
   DeployZero-downtime swap

Error: the current step failed (color + icon + text, never color alone)

1. CredentialsCredential scope confirmed
2. Allowlist scopegithub-token-dizyx
3. Push to remote Couldn’t verify, check and retry
4. 4
   Verify CI

Icons + clickable: done steps show a check; tab / click a completed step to jump back

1. Account
2. Billing
3. Confirm

Advance

Compact: dots-only pager indicator (onboarding / carousel)

Horizontal at step 2 of 4 · icons at step 3 · page 3 of 5. The island is live.

Code

TypeScript

// Web: React, consuming @dizyx/nockerl-tokens. (Web is the laggard platform;
// this is the canonical API the published @dizyx/nockerl-react package exposes.)
// The NockerlStepper shows STATUS only. The wizard owns step content + next/back.
import { NockerlStepper } from '@dizyx/nockerl-react';

export function SetupTracker({ step, onJump }: { step: number; onJump: (i: number) => void }) {
  return (
    <NockerlStepper
      current={step}
      orientation="horizontal"
      onStepClick={onJump}            // completed discs become clickable
      steps={[
        { label: 'Workspace' },
        { label: 'Provider' },
        { label: 'Model' },
        { label: 'Review' },
      ]}
    />
  );
}

// Vertical, with descriptions and an error stop (color + icon + text, never color alone):
<NockerlStepper
  current={2}
  errorAt={2}
  orientation="vertical"
  steps={[
    { label: 'Credentials', description: 'Credential scope confirmed' },
    { label: 'Allowlist scope', description: 'github-token-dizyx' },
    { label: 'Push to remote' },
    { label: 'Verify CI' },
  ]}
/>

Kotlin

// Android: Jetpack Compose. INTENDED API (com.nockerl.app.core.ui.NockerlStepper):
// no formal stepper ships yet. Modeled on NockerlSegmented (muted track, one active
// stop in cyan) + the depth helpers; the wizard container drives `current`.
import com.nockerl.app.core.ui.NockerlStep
import com.nockerl.app.core.ui.NockerlStepper
import com.nockerl.app.core.ui.NockerlStepperOrientation

NockerlStepper(
    steps = listOf(
        NockerlStep("Workspace"),
        NockerlStep("Provider"),
        NockerlStep("Model"),
        NockerlStep("Review"),
    ),
    current = step,
    orientation = NockerlStepperOrientation.HORIZONTAL,
    onStepClick = viewModel::jumpToStep,   // only completed stops invoke this
    modifier = Modifier.fillMaxWidth(),
)

// Vertical, with descriptions + an error stop:
NockerlStepper(
    steps = listOf(
        NockerlStep("Credentials", description = "Credential scope confirmed"),
        NockerlStep("Allowlist scope", description = "github-token-dizyx"),
        NockerlStep("Push to remote"),
        NockerlStep("Verify CI"),
    ),
    current = 2,
    errorStep = 2,
    orientation = NockerlStepperOrientation.VERTICAL,
)

Swift

// macOS: SwiftUI. INTENDED API (NockerlVoice/UI/NockerlStepper.swift): no formal
// stepper ships yet. The closest precedent is OnboardingView's status checklist
// (checkmark/x/circle + title + detail); this generalizes it into a tracker.
NockerlStepper(
    current: step,
    orientation: .horizontal,
    onStepTap: jumpToStep,            // only completed stops fire
    steps: [
        .init(label: "Workspace"),
        .init(label: "Provider"),
        .init(label: "Model"),
        .init(label: "Review"),
    ]
)

// Vertical, with descriptions + an error stop (icon + text carry it, not color alone):
NockerlStepper(
    current: 2,
    errorStep: 2,
    orientation: .vertical,
    steps: [
        .init(label: "Credentials", description: "Credential scope confirmed"),
        .init(label: "Allowlist scope", description: "github-token-dizyx"),
        .init(label: "Push to remote"),
        .init(label: "Verify CI"),
    ]
)

Parameters

TypeScript

Prop	Type	Default	Description
steps *	Step[]	n/a
current *	number	n/a	Index of the current (active) step.
orientation	NockerlStepperOrientation	'horizontal'
errorAt	number	n/a	Index that is in an error state (only when it is also the current step).
onStepClick	(index: number) => void	n/a	Jump handler - when set, DONE steps become real buttons.

Also accepts the native <ol> attributes (e.g. onClick, disabled, id, aria-*, data-*), forwarded straight through, plus a forwarded ref.

Kotlin

Parameter	Type	Default	Description
steps *	List<NockerlStep>	n/a	NockerlStep(label, description = null, icon = null). description renders in the vertical rail; icon is a leading @Composable slot shown until the stop is done/error.
current *	Int	n/a	Zero-based active stop. Drives the done / current / upcoming split and the connector fill.
orientation	NockerlStepperOrientation	HORIZONTAL	Layout axis: HORIZONTAL · VERTICAL.
errorStep	Int?	null	Stop to render in the error state (status error color + alert icon + state semantics). Honored when it equals current.
onStepClick	((Int) -> Unit)?	null	When non-null, completed stops are clickable (ripple + role = button). Null = a passive indicator.
modifier	Modifier	Modifier	Outer modifier. Pass Modifier.fillMaxWidth() for a full-width horizontal tracker.

Swift

SwiftUI exposes the tracker as a NockerlStepper view; status comes from current (+ optional errorStep), not per-stop flags. State styling reads from NockerlTheme (accent, success, error, surface highlight).

Style	Type	Default	Description
steps *	[NockerlStep]	n/a	NockerlStep(label:description:systemImage:). description shows in the vertical rail; systemImage is an optional SF Symbol shown until the stop is done/error.
current *	Int	n/a	Zero-based active stop. Earlier = done (success checkmark), later = upcoming (recessed, muted).
orientation	Axis	.horizontal	.horizontal (discs + connectors + labels under) or .vertical (rail + labels + descriptions).
errorStep	Int?	nil	Stop rendered with the error tint + exclamationmark symbol + accessibility state. Applied when it equals current.
onStepTap	((Int) -> Void)?	nil	When provided, completed stops become tappable buttons; otherwise the tracker is presentational.

Cross-platform drift (tracked for reconciliation)

The Stepper is the step indicator primitive, not a flow and not a bar:

• Stepper vs Wizard: the Wizard is the full guided container (renders each step’s content + next/back); the Stepper is only the discs + connectors it shows at the top. A Wizard uses a Stepper.
• Stepper vs progress bar: the bar is one continuous fill for indeterminate / percentage progress; the Stepper is discrete, named stops with per-step status.
• Web ships it; the native platforms don’t yet. Stepper is exported from @dizyx/nockerl-react (the TypeScript signature above). No formal stepper ships on Android or Swift, so those looks are designed from the laws + the real precedents (Android NockerlSegmented’s muted-track / one-cyan-stop treatment; Voice OnboardingView’s checkmark / x / circle status checklist), so the Kotlin + Swift signatures above are intended APIs pending implementation. A separate numeric +/- stepper input is a different control, queued under Inputs.