import * as React_2 from 'react';
import { SlotComponentType } from '@fluentui/react-utilities';
import { SlotRenderFunction } from '@fluentui/react-utilities';

export declare type AtomMotion = {
    keyframes: Keyframe[];
} & KeyframeEffectOptions;

export declare type AtomMotionFn<MotionParams extends Record<string, MotionParam> = {}> = (params: {
    element: HTMLElement;
} & MotionParams) => AtomMotion | AtomMotion[];

/**
 * Creates a component that will animate the children using the provided motion.
 *
 * @param value - A motion definition.
 */
export declare function createMotionComponent<MotionParams extends Record<string, MotionParam> = {}>(value: AtomMotion | AtomMotion[] | AtomMotionFn<MotionParams>): React_2.FC<MotionComponentProps & MotionParams>;

export declare function createPresenceComponent<MotionParams extends Record<string, MotionParam> = {}>(value: PresenceMotion | PresenceMotionFn<MotionParams>): PresenceComponent<MotionParams>;

export declare function createPresenceComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(component: PresenceComponent<MotionParams>, override: PresenceOverride): PresenceComponent<MotionParams>;

export declare const curves: {
    readonly curveAccelerateMax: "cubic-bezier(0.9,0.1,1,0.2)";
    readonly curveAccelerateMid: "cubic-bezier(1,0,1,1)";
    readonly curveAccelerateMin: "cubic-bezier(0.8,0,0.78,1)";
    readonly curveDecelerateMax: "cubic-bezier(0.1,0.9,0.2,1)";
    readonly curveDecelerateMid: "cubic-bezier(0,0,0,1)";
    readonly curveDecelerateMin: "cubic-bezier(0.33,0,0.1,1)";
    readonly curveEasyEaseMax: "cubic-bezier(0.8,0,0.2,1)";
    readonly curveEasyEase: "cubic-bezier(0.33,0,0.67,1)";
    readonly curveLinear: "cubic-bezier(0,0,1,1)";
};

export declare const durations: {
    readonly durationUltraFast: 50;
    readonly durationFaster: 100;
    readonly durationFast: 150;
    readonly durationNormal: 200;
    readonly durationGentle: 250;
    readonly durationSlow: 300;
    readonly durationSlower: 400;
    readonly durationUltraSlow: 500;
};

/**
 * @internal A private symbol to store the motion definition on the component for variants.
 */
declare const MOTION_DEFINITION: unique symbol;

export declare type MotionComponentProps = {
    children: React_2.ReactElement;
    /** Provides imperative controls for the animation. */
    imperativeRef?: React_2.Ref<MotionImperativeRef | undefined>;
    /**
     * Callback that is called when the whole motion finishes.
     *
     * A motion definition can contain multiple animations and therefore multiple "finish" events. The callback is
     * triggered once all animations have finished with "null" instead of an event object to avoid ambiguity.
     */
    onMotionFinish?: (ev: null) => void;
    /**
     * Callback that is called when the whole motion is cancelled.
     *
     * A motion definition can contain multiple animations and therefore multiple "cancel" events. The callback is
     * triggered once all animations have been cancelled with "null" instead of an event object to avoid ambiguity.
     */
    onMotionCancel?: (ev: null) => void;
    /**
     * Callback that is called when the whole motion starts.
     *
     * A motion definition can contain multiple animations and therefore multiple "start" events. The callback is
     * triggered when the first animation is started. There is no official "start" event with the Web Animations API.
     * so the callback is triggered with "null".
     */
    onMotionStart?: (ev: null) => void;
};

export declare type MotionImperativeRef = {
    /** Sets the playback rate of the animation, where 1 is normal speed. */
    setPlaybackRate: (rate: number) => void;
    /** Sets the state of the animation to running or paused. */
    setPlayState: (state: 'running' | 'paused') => void;
};

/**
 * @internal
 *
 * A motion param should be a primitive value that can be serialized to JSON and could be potentially used a plain
 * dependency for React hooks.
 */
declare type MotionParam = boolean | number | string;

export declare const motionTokens: {
    curveAccelerateMax: "cubic-bezier(0.9,0.1,1,0.2)";
    curveAccelerateMid: "cubic-bezier(1,0,1,1)";
    curveAccelerateMin: "cubic-bezier(0.8,0,0.78,1)";
    curveDecelerateMax: "cubic-bezier(0.1,0.9,0.2,1)";
    curveDecelerateMid: "cubic-bezier(0,0,0,1)";
    curveDecelerateMin: "cubic-bezier(0.33,0,0.1,1)";
    curveEasyEaseMax: "cubic-bezier(0.8,0,0.2,1)";
    curveEasyEase: "cubic-bezier(0.33,0,0.67,1)";
    curveLinear: "cubic-bezier(0,0,1,1)";
    durationUltraFast: 50;
    durationFaster: 100;
    durationFast: 150;
    durationNormal: 200;
    durationGentle: 250;
    durationSlow: 300;
    durationSlower: 400;
    durationUltraSlow: 500;
};

export declare type PresenceComponent<MotionParams extends Record<string, MotionParam> = {}> = {
    (props: PresenceComponentProps & MotionParams): React_2.ReactElement | null;
    [MOTION_DEFINITION]: PresenceMotionFn<MotionParams>;
};

export declare type PresenceComponentProps = {
    /**
     * By default, the child component won't execute the "enter" motion when it initially mounts, regardless of the value
     * of "visible". If you desire this behavior, ensure both "appear" and "visible" are set to "true".
     */
    appear?: boolean;
    /** A React element that will be cloned and will have motion effects applied to it. */
    children: React_2.ReactElement;
    /** Provides imperative controls for the animation. */
    imperativeRef?: React_2.Ref<MotionImperativeRef | undefined>;
    /**
     * Callback that is called when the whole motion finishes.
     *
     * A motion definition can contain multiple animations and therefore multiple "finish" events. The callback is
     * triggered once all animations have finished with "null" instead of an event object to avoid ambiguity.
     */
    onMotionFinish?: (ev: null, data: {
        direction: PresenceDirection;
    }) => void;
    /**
     * Callback that is called when the whole motion is cancelled. When a motion is cancelled it does not
     * emit a finish event but a specific cancel event
     *
     * A motion definition can contain multiple animations and therefore multiple "finish" events. The callback is
     * triggered once all animations have finished with "null" instead of an event object to avoid ambiguity.
     */
    onMotionCancel?: (ev: null, data: {
        direction: PresenceDirection;
    }) => void;
    /**
     * Callback that is called when the whole motion starts.
     *
     * A motion definition can contain multiple animations and therefore multiple "start" events. The callback is
     * triggered when the first animation is started. There is no official "start" event with the Web Animations API.
     * so the callback is triggered with "null".
     */
    onMotionStart?: (ev: null, data: {
        direction: PresenceDirection;
    }) => void;
    /** Defines whether a component is visible; triggers the "enter" or "exit" motions. */
    visible?: boolean;
    /**
     * By default, the child component remains mounted after it reaches the "finished" state. Set "unmountOnExit" if
     * you prefer to unmount the component after it finishes exiting.
     */
    unmountOnExit?: boolean;
};

export declare type PresenceDirection = 'enter' | 'exit';

export declare class PresenceGroup extends React_2.Component<PresenceGroupProps, PresenceGroupState> {
    private mounted;
    static getDerivedStateFromProps(nextProps: PresenceGroupProps, { childMapping: prevChildMapping, firstRender }: PresenceGroupState): {
        childMapping: PresenceGroupChildMapping;
        firstRender: boolean;
    };
    constructor(props: PresenceGroupProps, context: unknown);
    private handleExit;
    componentDidMount(): void;
    componentWillUnmount(): void;
    render(): JSX.Element;
}

declare type PresenceGroupChild = {
    element: React_2.ReactElement;
    appear: boolean;
    visible: boolean;
    unmountOnExit: boolean;
};

declare type PresenceGroupChildMapping = Record<string, PresenceGroupChild>;

declare type PresenceGroupProps = {
    children: React_2.ReactNode;
};

declare type PresenceGroupState = {
    childMapping: PresenceGroupChildMapping;
    firstRender: boolean;
};

export declare type PresenceMotion = Record<PresenceDirection, AtomMotion | AtomMotion[]>;

export declare type PresenceMotionFn<MotionParams extends Record<string, MotionParam> = {}> = (params: {
    element: HTMLElement;
} & MotionParams) => PresenceMotion;

export declare function presenceMotionSlot<MotionParams extends Record<string, MotionParam> = {}>(motion: PresenceMotionSlotProps<MotionParams> | null | undefined, options: {
    elementType: React_2.FC<PresenceComponentProps & MotionParams>;
    defaultProps: PresenceMotionSlotRenderProps & MotionParams;
}): SlotComponentType<PresenceMotionSlotRenderProps & MotionParams>;

export declare type PresenceMotionSlotProps<MotionParams extends Record<string, MotionParam> = {}> = Pick<PresenceComponentProps, 'imperativeRef' | 'onMotionFinish' | 'onMotionStart'> & {
    /**
     * @deprecated Do not use. Presence Motion Slots do not support intrinsic elements.
     *
     * If you want to override the animation, use the children render function instead.
     */
    as?: keyof JSX.IntrinsicElements;
    children?: SlotRenderFunction<PresenceMotionSlotRenderProps & MotionParams & {
        children: React_2.ReactElement;
    }>;
};

/**
 * @internal
 */
declare type PresenceMotionSlotRenderProps = Pick<PresenceComponentProps, 'appear' | 'onMotionFinish' | 'onMotionStart' | 'unmountOnExit' | 'visible'>;

/**
 * @internal
 *
 * Override properties for presence transitions.
 *
 * @example <caption>Override duration for all transitions</caption>
 * ```
 * const override: PresenceOverride = {
 *  all: { duration: 1000 },
 * };
 * ```
 *
 * @example <caption>Override easing for exit transition</caption>
 * ```
 * const override: PresenceOverride = {
 *  exit: { easing: 'ease-out' },
 * };
 * ```
 */
declare type PresenceOverride = Partial<Record<PresenceDirection | 'all', Partial<PresenceOverrideFields>>>;

/**
 * @internal
 */
declare type PresenceOverrideFields = {
    duration: KeyframeEffectOptions['duration'];
    easing: KeyframeEffectOptions['easing'];
};

export { }