StepWizard

import { useState } from 'react';
import { Button, Card, Group, Stack, Typography } from '@ilomee/aura-react';
import { StepWizard, type WizardStep } from '@ilomee/aura-react';

const STEPS: (WizardStep & { body: string })[] = [
  { id: 'install', label: 'Install', body: 'One package, plus the stylesheet. Nothing to configure yet.' },
  { id: 'theme', label: 'Theme', body: 'Theme, accent, corners and density are four attributes on the root.' },
  { id: 'ship', label: 'Ship', body: 'Nothing else to set up — the classes are the API from here.' },
];

// The wizard is the header: a marker per step and which one you are on. What each step *is* —
// the panel below — belongs to the caller, which is why the recipe does not take it.
export default function Demo() {
  const [active, setActive] = useState(0);
  const step = STEPS[active]!;

  return (
    <Stack gap={4} style={{ width: '100%' }}>
      <StepWizard steps={STEPS} active={active} />
      <Card>
        <Stack gap={1}>
          <Typography variant="h3">{step.label}</Typography>
          <Typography variant="body" tone="muted">
            {step.body}
          </Typography>
        </Stack>
      </Card>
      <Group>
        <Button onClick={() => setActive((s) => Math.max(0, s - 1))} disabled={active === 0}>
          Back
        </Button>
        <Button
          variant="primary"
          onClick={() => setActive((s) => Math.min(STEPS.length - 1, s + 1))}
          disabled={active === STEPS.length - 1}
        >
          Next
        </Button>
      </Group>
    </Stack>
  );
}

<StepWizard :steps="steps" :active="active">
  <p>Step body</p>
</StepWizard>

<StepWizard {steps} {active}>
  <p>Step body</p>
</StepWizard>

<aura-step-wizard [steps]="steps" [active]="active">
  <p>Step body</p>
</aura-step-wizard>