/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { StepProps } from './StepProps';
import { StepperChangeEvent } from './StepperChangeEvent';
import { StepperFocusEvent } from './StepperFocusEvent';
import { SVGIcon, WebMcpProps } from '@progress/kendo-react-common';
import * as React from 'react';
/**
 * Represents the props of the [KendoReact Stepper component](https://www.telerik.com/kendo-react-ui/components/layout/stepper).
 */
export interface StepperProps {
    /**
     * Sets the Stepper animation duration in milliseconds.
     *
     * @default 400
     *
     * @example
     * ```jsx
     * <Stepper animationDuration={400} />
     * ```
     */
    animationDuration?: boolean | number;
    /**
     * Represents the child elements passed to the Stepper.
     *
     * @example
     * ```jsx
     * <Stepper>
     *   <Step label="Step 1" />
     *   <Step label="Step 2" />
     * </Stepper>
     * ```
     */
    children?: any;
    /**
     * Specifies a list of CSS classes that will be added to the Stepper.
     *
     * @example
     * ```jsx
     * <Stepper className="custom-stepper" />
     * ```
     */
    className?: string;
    /**
     * Represents the `dir` HTML attribute, used to switch between LTR and RTL.
     *
     * @example
     * ```jsx
     * <Stepper dir="rtl" />
     * ```
     */
    dir?: string;
    /**
     * Disables the entire Stepper.
     *
     * @default false
     *
     * @example
     * ```jsx
     * <Stepper disabled />
     * ```
     */
    disabled?: boolean;
    /**
     * Specifies a custom icon rendered inside the step for invalid steps.
     *
     * @example
     * ```jsx
     * <Stepper errorIcon="k-icon k-i-warning" />
     * ```
     */
    errorIcon?: string;
    /**
     * Specifies a custom SVG icon rendered inside the step for invalid steps.
     *
     * @example
     * ```jsx
     * import { gearIcon } from '@progress/kendo-svg-icons';
     *
     * <Stepper errorSVGIcon={gearIcon} />
     * ```
     */
    errorSVGIcon?: SVGIcon;
    /**
     * Overrides the default component responsible for rendering a single step ([see example](https://www.telerik.com/kendo-react-ui/components/layout/stepper/custom_rendering)).
     *
     * @example
     * ```jsx
     * const CustomStep = (props) => <div>{props.label}</div>;
     * <Stepper item={CustomStep} />
     * ```
     */
    item?: React.ComponentType<StepProps>;
    /**
     * The collection of steps rendered in the Stepper ([see example](https://www.telerik.com/kendo-react-ui/components/layout/stepper)).
     *
     * @example
     * ```jsx
     * <Stepper items={[{ label: 'Step 1' }, { label: 'Step 2' }]} />
     * ```
     */
    items: Array<StepProps>;
    /**
     * Specifies whether the Stepper enforces a linear flow ([see example](https://www.telerik.com/kendo-react-ui/components/layout/stepper/linear_mode)).
     *
     * @default false
     *
     * @example
     * ```jsx
     * <Stepper linear />
     * ```
     */
    linear?: boolean;
    /**
     * Specifies the Stepper display mode ([see example](https://www.telerik.com/kendo-react-ui/components/layout/stepper/display_modes)).
     *
     * The possible values are:
     * * (Default) `steps`&mdash;Renders step indicators and optional labels.
     * * `labels`&mdash;Renders labels only.
     *
     * @default steps
     *
     * @example
     * ```jsx
     * <Stepper mode="labels" />
     * ```
     */
    mode?: 'steps' | 'labels';
    /**
     * Specifies the Stepper orientation ([see example](https://www.telerik.com/kendo-react-ui/components/layout/stepper/orientation)).
     *
     * The possible values are:
     * * (Default) `horizontal`
     * * `vertical`
     *
     * @default horizontal
     *
     * @example
     * ```jsx
     * <Stepper orientation="vertical" />
     * ```
     */
    orientation?: 'horizontal' | 'vertical';
    /**
     * Indicates whether the selection changes upon focus change or requires additional action (Enter or Space key press) to select the focused step.
     *
     * @default false
     *
     * @example
     * ```jsx
     * <Stepper selectOnFocus />
     * ```
     */
    selectOnFocus?: boolean;
    /**
     * Sets additional CSS styles to the Stepper.
     *
     * @example
     * ```jsx
     * <Stepper style={{ backgroundColor: 'lightblue' }} />
     * ```
     */
    style?: React.CSSProperties;
    /**
     * Specifies a custom icon rendered inside the step for valid steps.
     *
     * @example
     * ```jsx
     * <Stepper successIcon="k-icon k-i-check" />
     * ```
     */
    successIcon?: string;
    /**
     * Specifies a custom SVG icon rendered inside the step for valid steps.
     *
     * @example
     * ```jsx
     * import { gearIcon } from '@progress/kendo-svg-icons';
     *
     * <Stepper successSVGIcon={gearIcon} />
     * ```
     */
    successSVGIcon?: SVGIcon;
    /**
     * Specifies the index of the selected step.
     *
     * @example
     * ```jsx
     * <Stepper value={1} />
     * ```
     */
    value: number;
    /**
     * Fires when the value is changed.
     *
     * @example
     * ```jsx
     * <Stepper onChange={(event) => console.log(event.value)} />
     * ```
     */
    onChange?: (event: StepperChangeEvent) => void;
    /**
     * Fires when a step is focused.
     *
     * @example
     * ```jsx
     * <Stepper onFocus={(event) => console.log(event.step)} />
     * ```
     */
    onFocus?: (event: StepperFocusEvent) => void;
    /**
     * Enables Web MCP tool registration so AI agents can interact with this Stepper.
     * Set to `true` to use the provider-level `dataName`, or pass a config object to override.
     *
     * Requires a `WebMcpProvider` ancestor from `@progress/kendo-react-webmcp`.
     */
    webMcp?: boolean | WebMcpProps;
}