import React from "react";
import { BorderProps, ColorProps, SpaceProps } from "styled-system";
import { FlexBoxProps } from "../../../layout/Flex";
/**
 * The state of a progress bar step.
 */
export type StepState = "pending" | "current" | "completed" | "errored" | "disabled";
type LabelType = string | React.ComponentType<{
    state: StepState;
}>;
export interface Props extends FlexBoxProps {
    /**
     * An array of labels that will determine the progress bar steps.
     *  A label is either a string or a component that will be rendered with the
     *  prop `state: "pending" | "current" | "completed" | "errored"`.
     *  A styled StepText component is exported to allow easy styling of such a custom label.
     */
    steps: LabelType[];
    /**
     * Index of the active step, starting at zero and defaulting to 0 if omitted.
     */
    activeIndex?: number;
    /**
     * If true the current step is considered as a failure.
     */
    errored?: boolean;
    /**
     * Steps with indexes contained inside the array will be shown as disabled.
     */
    disabledIndexes?: number[];
    /**
     * Delete steps with same following labels
     */
    filterDuplicate?: boolean;
    /**
     * Complete all the steps
     */
    isOver?: boolean;
}
export type StepProps = {
    /**
     * State of the step.
     */
    state: StepState;
    /**
     * The label to display. To display more than text, this can be a component that will be rendered with the
     *  prop `state: "pending" | "current" | "completed" | "errored" | "disabled"`.
     *  A styled StepText component is exported to allow easy styling of such a custom Label
     */
    label: LabelType;
    /**
     * If true, hides the left "separator" bar that bridges the gap between the wider separator and the item.
     */
    hideLeftSeparator: boolean;
    /**
     * The next step state, or undefined if the current step is the last one.
     */
    nextState?: StepState;
};
export declare const Item: {
    Container: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
        mx: string;
    } & ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "mx">;
    Spacer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, never>;
    Current: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
        backgroundColor: string;
    } & ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "backgroundColor">;
    Pending: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
        backgroundColor: string;
    } & ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "backgroundColor">;
    Completed: () => JSX.Element;
    Disabled: () => JSX.Element;
    Errored: () => JSX.Element;
};
export declare const StepText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("../../../asorted/Text").TextProps & {
    state: StepState;
}, keyof import("../../../asorted/Text").TextProps>;
export declare const Step: React.NamedExoticComponent<StepProps>;
declare function Stepper({ steps, activeIndex, errored, disabledIndexes, filterDuplicate, isOver, ...extraProps }: Props): React.JSX.Element;
declare const _default: React.MemoExoticComponent<typeof Stepper>;
export default _default;
