import React from "react";
import { Props as StepperProps } from "../progress/Stepper";
import { FlexBoxProps as FlexProps } from "../../layout/Flex";
export type StepProps = {
    /**
     * A specific index, can be used to explicitely order steps.
     */
    index?: number;
    /**
     * Custom header for this step.
     */
    header?: React.ReactNode;
    /**
     * Custom footer for this step.
     */
    footer?: React.ReactNode;
    /**
     * The label of the step.
     */
    label: string;
    /**
     * Hides the step from the progress stepper.
     */
    hidden?: boolean;
    /**
     * The step contents.
     */
    children: React.ReactNode;
};
interface InnerProps {
    /**
     * The active index.
     */
    activeIndex: number;
    /**
     * The total number of steps.
     */
    stepsLength: number;
}
type StepChild = React.ReactElement<StepProps>;
type SectionRenderFunc<ExtraProps> = (props: InnerProps & ExtraProps) => React.ReactNode;
type SectionStepRenderFunc<ExtraProps> = (args: InnerProps & ExtraProps & {
    children: React.ReactNode;
}) => React.ReactNode;
export interface Props<ExtraProps> {
    /**
     * The index of the active step.
     */
    activeIndex: number;
    /**
     * An optional generic header displayed above the stepper.
     */
    header?: SectionRenderFunc<ExtraProps>;
    /**
     * Custom rendering function to wrap the header (only used if the `header` is defined
     * on the child for the current step.)
     */
    renderStepHeader?: SectionStepRenderFunc<ExtraProps>;
    /**
     * An optional generic footer displayed below the body.
     */
    footer?: SectionRenderFunc<ExtraProps>;
    /**
     * Custom rendering function to wrap the footer (only used if the `footer` is defined
     * on the child for the current step.)
     */
    renderStepFooter?: SectionStepRenderFunc<ExtraProps>;
    /**
     * Extra props that are passed to the header and footer render functions.
     */
    extraProps?: ExtraProps;
    /**
     * Extra props that are passed to the container `Flex` element.
     */
    extraContainerProps?: FlexProps;
    /**
     * Extra props that are passed to the stepper component.
     */
    extraStepperProps?: Partial<StepperProps>;
    /**
     * Extra props that are passed to the stepper `Flex` wrapper.
     */
    extraStepperContainerProps?: FlexProps;
    /**
     * Extra props that are passed to the children `Flex` wrapper.
     */
    extraChildrenContainerProps?: FlexProps;
    /**
     * Custom rendering function to wrap children.
     */
    renderChildren?: (args: InnerProps & ExtraProps & {
        children: React.ReactNode;
    }) => React.ReactNode;
    /**
     * A list of children representing each step of the flow.
     * Each child can have a prop `stepHeader` and/or `stepFooter` that will
     * associate a custom header/footer to this particular step.
     * The custom header/footer can be wrapped using the prop renderStepHeader/renderStepFooter.
     */
    children: StepChild | StepChild[];
}
declare function FlowStepper<ExtraProps>({ activeIndex, header, renderStepHeader, footer, renderStepFooter, extraProps, extraContainerProps, extraStepperProps, extraStepperContainerProps, extraChildrenContainerProps, renderChildren, children, }: Props<ExtraProps>): React.JSX.Element;
declare namespace FlowStepper {
    var Step: ({ children }: StepProps) => React.JSX.Element;
    var Indexed: typeof FlowStepperIndexed;
}
export default FlowStepper;
export type IndexedStepProps = StepProps & {
    /**
     * String to identify the step. Must be different from sibling steps's `key` prop.
     */
    itemKey: string;
};
type IndexedStepperChild = React.ReactElement<IndexedStepProps>;
export type IndexedProps<ExtraProps> = Omit<Props<ExtraProps>, "activeIndex" | "children"> & {
    /**
     * The key of the active step
     */
    activeKey: string;
    /**
     * A list of children representing each step of the flow.
     */
    children: IndexedStepperChild | IndexedStepperChild[];
};
/**
 * This is a FlowStepper where each child must have an `itemKey: string` prop
 * and the active step is defined by the `activeKey: string` prop.
 *
 * This allows for usages with a lot of steps where dealing with indices could be
 * painful and error prone (for instance inserting/removing a step somewhere would shift
 * the indices of the following steps and navigation would be impacted).
 *
 * By using string identifiers (`itemKey`) for each step, it's more "human readable"
 * and less error prone to setup a navigation logic between steps.
 */
declare function FlowStepperIndexed<ExtraProps>(props: IndexedProps<ExtraProps>): React.JSX.Element;
declare namespace FlowStepperIndexed {
    var Step: typeof IndexedStep;
}
declare function IndexedStep({ children }: IndexedStepProps): React.JSX.Element;
