import React, { DetailedHTMLProps, Key, ReactElement } from "react";
export type TransitionTypeDefinitions = {
    transitionType?: TransitionAnimationTypes.SLIDE | TransitionAnimationTypes.POP_FROM_CLICK_ORIGIN | TransitionAnimationTypes.FADE | TransitionAnimationTypes.COIN_FLIP;
} | {
    transitionType?: TransitionAnimationTypes.POP_FROM_ELEMENT_ID;
    elementId: string;
} | {
    transitionType?: TransitionAnimationTypes.MASK;
    /**
     * It provides the transition container so you can create a dynamic svg to mask with
     */
    maskFactory: (container: HTMLDivElement) => string;
} | {
    transitionType?: TransitionAnimationTypes.CUSTOM;
    config: ReturnType<typeof TransitionClasses>;
};
export type TransitionProps = {
    step: number;
    className?: string;
    contentStyle?: React.CSSProperties;
    contentClassName?: string;
    children: (React.ReactElement | undefined)[];
    onDiscardStep?: (discardedKey: React.Key, startedAnimationAt: number) => void;
    lockTransitionWidth?: boolean;
    lockTransitionHeight?: boolean;
} & TransitionTypeDefinitions & Omit<DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, any>, "className" | "children">;
declare function TransitionClasses(type: NonNullable<Exclude<TransitionProps["transitionType"], TransitionAnimationTypes.CUSTOM>>): {
    /**
     * Applied to the element that was not visible and is now entering the screen
     */
    backward: {
        elementEntering: string;
        elementExiting: string;
    };
    /**
     * Applied to the element that was visible and now is exiting the screen
     */
    forward: {
        elementEntering: string;
        elementExiting: string;
    };
};
export declare enum TransitionAnimationTypes {
    SLIDE = 0,
    POP_FROM_CLICK_ORIGIN = 1,
    POP_FROM_ELEMENT_ID = 2,
    FADE = 3,
    COIN_FLIP = 4,
    MASK = 5,
    CUSTOM = 6
}
/**
 * A component that manages smooth transitions between different views or screens.
 * It handles animations and switching between multiple children elements.
 *
 * Simple explanation: This component controls how content changes from one screen to another,
 * making the transition look smooth and professional with various animation styles.
 */
declare const Transition: React.ForwardRefExoticComponent<(Omit<{
    step: number;
    className?: string | undefined;
    contentStyle?: React.CSSProperties | undefined;
    contentClassName?: string | undefined;
    children: (React.ReactElement | undefined)[];
    onDiscardStep?: ((discardedKey: React.Key, startedAnimationAt: number) => void) | undefined;
    lockTransitionWidth?: boolean | undefined;
    lockTransitionHeight?: boolean | undefined;
} & {
    transitionType?: TransitionAnimationTypes.SLIDE | TransitionAnimationTypes.POP_FROM_CLICK_ORIGIN | TransitionAnimationTypes.FADE | TransitionAnimationTypes.COIN_FLIP | undefined;
} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, any>, "children" | "className">, "ref"> | Omit<{
    step: number;
    className?: string | undefined;
    contentStyle?: React.CSSProperties | undefined;
    contentClassName?: string | undefined;
    children: (React.ReactElement | undefined)[];
    onDiscardStep?: ((discardedKey: React.Key, startedAnimationAt: number) => void) | undefined;
    lockTransitionWidth?: boolean | undefined;
    lockTransitionHeight?: boolean | undefined;
} & {
    transitionType?: TransitionAnimationTypes.POP_FROM_ELEMENT_ID | undefined;
    elementId: string;
} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, any>, "children" | "className">, "ref"> | Omit<{
    step: number;
    className?: string | undefined;
    contentStyle?: React.CSSProperties | undefined;
    contentClassName?: string | undefined;
    children: (React.ReactElement | undefined)[];
    onDiscardStep?: ((discardedKey: React.Key, startedAnimationAt: number) => void) | undefined;
    lockTransitionWidth?: boolean | undefined;
    lockTransitionHeight?: boolean | undefined;
} & {
    transitionType?: TransitionAnimationTypes.MASK | undefined;
    /**
     * It provides the transition container so you can create a dynamic svg to mask with
     */
    maskFactory: (container: HTMLDivElement) => string;
} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, any>, "children" | "className">, "ref"> | Omit<{
    step: number;
    className?: string | undefined;
    contentStyle?: React.CSSProperties | undefined;
    contentClassName?: string | undefined;
    children: (React.ReactElement | undefined)[];
    onDiscardStep?: ((discardedKey: React.Key, startedAnimationAt: number) => void) | undefined;
    lockTransitionWidth?: boolean | undefined;
    lockTransitionHeight?: boolean | undefined;
} & {
    transitionType?: TransitionAnimationTypes.CUSTOM | undefined;
    config: ReturnType<typeof TransitionClasses>;
} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, any>, "children" | "className">, "ref">) & React.RefAttributes<HTMLDivElement | null>>;
/**
 * A component that manages smooth transitions between different views or screens.
 * It handles animations and switching between multiple children elements.
 */
export default Transition;
