Stepper

Root stepper component that manages step state

Usage

import { Stepper, StepperItem, StepperItemProps, StepperProps, StepperSize } from "@instruments/materia-ui/components/stepper";

Give each step a StepperItem child in order - progress is derived from child index, so conditionally rendering steps shifts the fill.
Control completion via value/onValueChange (or uncontrolled defaultValue); the fill reaches only the last *completed* step, not the current one.

Prop	Type	Default	Description
value	`number`		Current completed step index (controlled)
defaultValue	`number \| (number & readonly string[])`	`0`	Initial step index (uncontrolled)
onValueChange	`(value: number) => void`		Callback when step changes
size	`ResponsiveStepperSize`	`"base"`	Size variant - a single token or a per-breakpoint object like `{ base: "sm", md: "lg" }`.
className	`string`		Additional className
children(required)	`React.ReactNode`		StepperItem children

Prop	Type	Description
value(required)	`number`	Step index (required, determines order and completion)
label	`string`	Label text below the step (optional)
disabled	`boolean`	Whether this step is disabled
icon	`LucideIcon`	Custom icon - defaults to Check
className	`string`	Additional className

Builds on