Stepper

Usage

import { useState } from "react";
import { Stepper, type StepItem } from "@vesture/react";

const steps: StepItem[] = [
  { id: "cart", label: "Cart" },
  { id: "shipping", label: "Shipping", description: "Address & method" },
  { id: "payment", label: "Payment" },
  { id: "confirm", label: "Confirm" },
];

function Checkout() {
  const [activeStep, setActiveStep] = useState(1);
  return <Stepper steps={steps} activeStep={activeStep} onStepClick={setActiveStep} />;
}

Behavior

• Controlled-only, display-only: activeStep is required and there's no internal state, since Stepper doesn't own wizard navigation — the consuming app decides which step is active and how Back/Next work.
• completedSteps defaults to every index before activeStep, but accepts an explicit Set<number> override for non-linear completion (e.g. a later step already done while an earlier one is still active).
• onStepClick is optional. When provided, completed and active steps become real focusable buttons; upcoming steps deliberately stay non-interactive — the default disallows jumping ahead of progress, matching the common linear wizard pattern.