@payfit/unity-components/dist/esm/components/stepper/Stepper.d.ts

import { HTMLAttributes } from 'react';
export interface StepperProps extends Pick<HTMLAttributes<HTMLOListElement>, 'aria-label'> {
    /**
     * The current step number, it comes from the `useStepper` hook
     */
    currentStep: number;
}
/**
 * Use the `Stepper` component to navigate between a discrete number of steps in a linear fashion.
 *
 * The `Stepper` defines its list of steps as children using the `Step` component.
 *
 * The `Stepper` component is a controlled component by default. You can manage its state using the `useStepper` hook as a companion for this component.
 *
 * The type signature for this hook is the following:
 *
 * ```ts
 * interface StepperState {
 *   currentStep: number
 *   goNext: () => void
 *   goPrevious: () => void
 *   isLastStep: boolean
 *   isFirstStep: boolean
 * }
 * type useStepper = ({initialStep: number, totalSteps: number}) => StepperState
 * ```
 *
 * Where:
 * - `totalSteps`is the total number of steps in the stepper
 * - `initialStep` is the index of the step that should be shown on first render
 *
 * The returned state provides:
 * - `currentStep`: The currently active step.
 * - `goNext`: a callback to trigger navigation to the next step
 * - `goPrevious`: a callback to go to the previous step
 * - `isLastStep`: a boolean flag indicating if the current step is the last one
 * - `isFirstStep`: a boolean flag indicating if the current step is the first one
 *
 * Use these state variables to determine the `currenStep` property of the `Stepper` component.
 *
 */
declare const Stepper: import('react').ForwardRefExoticComponent<StepperProps & {
    children?: import('react').ReactNode | undefined;
} & import('react').RefAttributes<HTMLOListElement>>;
export { Stepper };