import { type ComponentProps } from 'react';
import { easings, type GDSComponentProps, type GDSDuration } from '@graphprotocol/gds-css';
import type { TransitionMeta } from './Transition.meta.ts';
export interface TransitionProps extends ComponentProps<'div'>, GDSComponentProps<typeof TransitionMeta> {
    /**
     * Determines 3 things:
     *
     * - The element type to render (`div` if `block` or `flex-col`, `span` if `inline`)
     * - The outer `display` value (`block`, `flex`, or `inline-block`)
     * - If `animateSize` is `true` (the default), which axis to animate (`height` if `block` or
     *   `flex-col`, `width` if `inline`)
     *
     * @default 'block'
     */
    layout?: 'block' | 'flex-col' | 'inline' | undefined;
    /**
     * One of `cross`, `exit-enter`, `enter-exit`, or an object with `enter` and `exit` properties of
     * type `[start, end]`, where `start` and `end` are numbers between 0 and 1. Here are what the
     * keywords map to:
     *
     * - `cross`: { enter: [0, 1], exit: [0, 1] }
     * - `exit-enter`: { exit: [0, 0.5], enter: [0.5, 1] }
     * - `enter-exit`: { enter: [0, 0.5], exit: [0.5, 1] }
     *
     * @default 'cross'
     */
    mode?: 'cross' | 'exit-enter' | 'enter-exit' | {
        enter: [number, number];
        exit: [number, number];
    } | undefined;
    /**
     * The duration of the transition in milliseconds. Set to `0` to disable the transition.
     *
     * @default 300
     */
    duration?: GDSDuration | undefined;
    /**
     * The easing function to use for the transition.
     *
     * @default 'out'
     */
    ease?: keyof typeof easings | [number, number, number, number] | undefined;
    /**
     * Whether to animate the change in content height (if `layout` is `block` or `flex-col`) or width
     * (if `layout` is `inline`). If set to `clip`, any content that overflows during the transition
     * will be clipped, which is especially useful when transitioning the content of some container
     * with a background and/or border. This is better than setting `overflow-clip` permanently, as
     * that would prevent visual elements from "bleeding out" of the container when desired.
     *
     * @default true
     */
    animateSize?: boolean | 'clip' | undefined;
}
export declare function Transition({ ref: passedRef, layout, mode, duration, ease, animateSize, className, children, ...props }: TransitionProps): import("react/jsx-runtime").JSX.Element;
//# sourceMappingURL=Transition.d.ts.map