@stihl-design-system/components/components/Stepper/Stepper.d.ts

Welcome to the STIHL Design System react component library.

import { default as React, JSX } from 'react';
import { SelectedAriaAttributes } from '../../types';
import { StepState } from './Step.utils';
import { StepperAlignment, StepperAriaAttributes, StepperLanguage, StepperOrientation, StepperTranslations } from './Stepper.utils';
export interface Step {
    /** Label text displayed for the Step. */
    label: string;
    /** Short descriptive text displayed beneath the label. */
    hint?: string;
    /** Disables the Step, preventing user interaction.
     * @default false
     */
    disabled?: boolean;
    /**
     * State of the Step. If set to 'current', the step is highlighted as the current step.
     * @default undefined
     */
    state?: StepState;
    /** Callback function called when the Step is clicked. */
    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
}
export interface StepperProps extends React.HTMLAttributes<HTMLElement> {
    /** ARIA attributes to enhance accessibility
     *  `{'aria-label'? string;`
     *  `'aria-labelledby'?: string;}`
     * */
    aria: SelectedAriaAttributes<StepperAriaAttributes>;
    /** An array of Step Objects containing the label and other optional parameters.
     * `{label: string; hint: string; disabled?: boolean; state?: 'current' | 'completed' | undefined; onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;}[]`*/
    steps: Step[];
    /** Callback function called when the selection of the Stepper changes. */
    onStepChange: (selectedStepIndex: number) => void;
    /** Alignment of the DSStepper.
     * @default 'left'
     */
    alignment?: StepperAlignment;
    /** Sets language to use for the screen reader messages, if no translations object is provided.
     * @default 'en'
     */
    lang?: StepperLanguage;
    /** Orientation of the DSStepper.
     * @default 'horizontal'
     */
    orientation?: StepperOrientation;
    /** Translations for the DSStepper. Use our [customization page](/?path=/story/components-stepper-translations--documentation) for creating custom translations. */
    translations?: StepperTranslations;
}
/**
 * The `<DSStepper />` component provides an accessible step-based navigation pattern following the `aria-current="step"` specification.
 * It is a **controlled component** and does not manage its own state.
 * It renders steps as buttons inside an ordered list (`<ol>`) wrapped in a semantic `<nav>` landmark.
 * Horizontal overflow is handled via `<DSScroller>` preventing line wrapping while enabling keyboard and pointer based scrolling.
 *
 * Design in Figma: [Stepper](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=26075-10497)
 */
export declare const DSStepper: ({ aria, className, steps, orientation, alignment, lang, translations, onStepChange, ...rest }: StepperProps) => JSX.Element;