Scoped

const Stepper = defineStepper(
  { id: "first", title: "First" },
  { id: "second", title: "Second" },
  { id: "last", title: "Last" }
);
 
export const MyScopedStepper = () => (
  <Stepper.Scoped>
    <StepContent />
    <StepNavigation />
  </Stepper.Scoped>
);
 
const StepContent = () => {
  const { when } = useStepper();
  return (
    <>
      {when("first", step => <p>Starting with {step.title}</p>)}
      {when("second", step => <p>In the middle: {step.title}</p>)}
      {when("last", step => <p>Ending with {step.title}</p>)}
    </>
  );
};
 
const StepNavigation = () => {
  const { isLast, reset, next, when } = useStepper();
  return (
    <button onClick={isLast ? reset : next}>
      {when("last", () => "Reset", () => "Next")}
    </button>
  );
};

const GlobalStepper = defineStepper(
  { id: "start", title: "Start" },
  { id: "middle", title: "Middle" },
  { id: "end", title: "End" }
);
 
const LocalStepper = defineStepper(
  { id: "sub1", title: "Sub-step 1" },
  { id: "sub2", title: "Sub-step 2" }
);
 
export const NestedSteppers = () => (
  <GlobalStepper.Scoped>
    <GlobalStepContent />
    <GlobalNavigation />
    <LocalStepper.Scoped>
      <LocalStepContent />
      <LocalNavigation />
    </LocalStepper.Scoped>
  </GlobalStepper.Scoped>
);
 
// Use GlobalStepper.useStepper() for global scope
// Use LocalStepper.useStepper() for local scope