import { ReactElement } from 'react'; import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types'; export interface StepperProps extends NativeElementPropsWithoutKeyAndRef<'div'> { /** * Three or more `` components. */ children: ReactElement | ReactElement[]; /** * Set the processing step index to replace step status. * Index is zero-based (0 = first step, 1 = second step, etc.). * @default 0 */ currentStep?: number; /** * Callback fired when the step changes. * @param stepIndex The current step index after change. */ onStepChange?: (stepIndex: number) => void; /** * The orientation of the stepper. * - 'horizontal': Steps arranged horizontally * - 'vertical': Steps arranged vertically * @default 'horizontal' */ orientation?: 'horizontal' | 'vertical'; /** * The type of step indicator. * - 'dot': Display as dots * - 'number': Display as numbers * @default 'number' */ type?: 'dot' | 'number'; } export interface StepProps extends Omit, 'title' | 'children'> { /** * The step description, visible if value is not empty. */ description?: string; /** * Whether the step is disabled. * Only applies when status is not 'processing'. */ disabled?: boolean; /** * Whether the step is in error state. * Only applies when status is not 'processing'. */ error?: boolean; /** * Step index, automatically set by the parent . * Zero-based index (0 = first step, 1 = second step, etc.). */ index?: number; /** * The orientation of the step, inherited from parent Stepper. * - 'horizontal': Step arranged horizontally * - 'vertical': Step arranged vertically */ orientation?: 'horizontal' | 'vertical'; /** * The current status of the step, automatically set by the parent . * - 'processing': Currently active/in progress * - 'pending': Waiting to be processed (default for future steps) * - 'succeeded': Successfully completed */ status?: 'processing' | 'pending' | 'succeeded'; /** * The step title. */ title?: string; /** * The type of step indicator, inherited from parent Stepper. * - 'dot': Display as dot * - 'number': Display as number */ type?: 'dot' | 'number'; }