import { TagNameString } from '../../utils/type';
/**
 * This component provide a very simple state-based mechanism for handling element transitions on enter and exit.
 *
 * For more robust and feature-rich animation components, consider using libraries such as:
 * - [framer-motion](https://npm.im/framer-motion)
 * - [react-transition-group](https://npm.im/react-transition-group)
 *
 * If you prefer an imperative approach to animate DOM elements, this library uses the [Web Animations API](https://developer.mozilla.org/docs/Web/API/Web_Animations_API) internally to minimize dependencies. However, you might find [Motion One](https://npm.im/motion) to be a better fit for such needs.
 *
 * !WARNING: To activate CSS transitions, the `transition` property should be set to `entering` or `exiting`.
 * Alternatively, manage all transitions by setting the `transition` property in the `style` attribute.
 */
export declare const SodaTransition: import('react').ForwardRefExoticComponent<{
    as?: TagNameString;
    style?: React.CSSProperties;
    className?: string;
    entering?: React.CSSProperties;
    entered?: React.CSSProperties;
    exiting?: React.CSSProperties;
    exited?: React.CSSProperties;
    /**
     * `true` for enter, `false` for leave
     */
    in?: boolean;
    /**
     * By default the component does not perform the enter transition when it first mounts, regardless of the value of `in`. If you want this behavior, set both `appear` and `in` to `true`.
     */
    appear?: boolean;
    children?: React.ReactNode;
} & Omit<import('react').HTMLProps<HTMLElement>, "as" | "ref" | "className" | "style" | "children" | "entering" | "entered" | "exiting" | "exited" | "in" | "appear"> & import('react').RefAttributes<HTMLElement>>;
/**
 * A simple wrapper of `<SodaTransition>`, with default fade transition included.
 */
export declare const SodaSimpleTransition: import('react').ForwardRefExoticComponent<Omit<{
    as?: TagNameString;
    style?: React.CSSProperties;
    className?: string;
    entering?: React.CSSProperties;
    entered?: React.CSSProperties;
    exiting?: React.CSSProperties;
    exited?: React.CSSProperties;
    /**
     * `true` for enter, `false` for leave
     */
    in?: boolean;
    /**
     * By default the component does not perform the enter transition when it first mounts, regardless of the value of `in`. If you want this behavior, set both `appear` and `in` to `true`.
     */
    appear?: boolean;
    children?: React.ReactNode;
} & Omit<import('react').HTMLProps<HTMLElement>, "as" | "ref" | "className" | "style" | "children" | "entering" | "entered" | "exiting" | "exited" | "in" | "appear"> & import('react').RefAttributes<HTMLElement> & {
    enter?: React.CSSProperties;
    leave?: React.CSSProperties;
}, "ref"> & import('react').RefAttributes<HTMLElement>>;