Progress through an import

// apps/docs/examples/ui/stepper.tsx'use client';
import {useState} from 'react';
import {FormActions} from '@workspace/active-ui/components/composed/form-actions';import {Stepper} from '@workspace/active-ui/components/composed/stepper';import {Button} from '@workspace/active-ui/components/primitives/button';
const STEPS = [  {id: 'file', label: 'Choose the file'},  {id: 'columns', label: 'Match the columns'},  {id: 'check', label: 'Check the rows'},  {id: 'import', label: 'Import'},];
/** * Progress through an import of four steps. The stepper only shows where * you are; the buttons below it move on and back. After the last step every * step counts as completed. */export default function StepperExample() {  const [step, setStep] = useState(1);  return (    <div className="grid w-full max-w-2xl gap-6">      <Stepper        steps={STEPS}        currentStep={step}        completedLabel="completed"        aria-label="Import progress"      />      <p className="text-muted-foreground text-sm" aria-live="polite">        {step < STEPS.length          ? `Step ${step + 1} of ${STEPS.length}: ${STEPS[step]!.label}`          : 'The import is done.'}      </p>      <FormActions>        <Button          variant="secondary"          disabled={step === 0}          onClick={() => setStep((current) => current - 1)}        >          Previous        </Button>        <Button          disabled={step === STEPS.length}          onClick={() => setStep((current) => current + 1)}        >          {step === STEPS.length - 1 ? 'Finish' : 'Next'}        </Button>      </FormActions>    </div>  );}