import { ElementType, HTMLAttributes } from 'react';
import type { ValueOrArray } from '../../types';
export declare type FlexProps = {
    /** Element type to render. Defaults to `div`. */
    as?: ElementType;
    /** Direction of the flex layout. Can either be `row` or `column`. Defaults to `row`. */
    direction?: ValueOrArray<'row' | 'column' | null>;
    /** Whether flex items should wrap when there's not enough space on one line. Defaults to `false`. */
    wrap?: ValueOrArray<boolean | null>;
    /** Horizontal alignment if `direction` is `row`; vertical alignment if it's `column`. Defaults to `start`. */
    justify?: ValueOrArray<'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly' | null>;
    /** Vertical alignment if `direction` is `row`; horizontal alignment if it's `column`. Defaults to `stretch`. */
    align?: ValueOrArray<'stretch' | 'start' | 'center' | 'end' | 'baseline' | null>;
    /** Size of the gap between flex items (both horizontal and vertical). */
    gap?: ValueOrArray<string | number | null>;
    /** Size of the horizontal gap between flex items. */
    gapX?: ValueOrArray<string | number | null>;
    /** Size of the vertical gap between flex items. */
    gapY?: ValueOrArray<string | number | null>;
    inline?: ValueOrArray<boolean | null>;
} & HTMLAttributes<HTMLElement>;
/**
 * Base `Flex` component for laying out child elements/components either horizontally (row) or vertically (column),
 * with props to control their alignment, the gap between them, and whether they wrap.
 *
 * The following variants are available: `Flex.Row`, `Flex.Column`, and `Flex.Center`.
 */
export declare const Flex: import("react").ForwardRefExoticComponent<{
    /** Element type to render. Defaults to `div`. */
    as?: ElementType;
    /** Direction of the flex layout. Can either be `row` or `column`. Defaults to `row`. */
    direction?: ValueOrArray<'row' | 'column' | null>;
    /** Whether flex items should wrap when there's not enough space on one line. Defaults to `false`. */
    wrap?: ValueOrArray<boolean | null>;
    /** Horizontal alignment if `direction` is `row`; vertical alignment if it's `column`. Defaults to `start`. */
    justify?: ValueOrArray<'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly' | null>;
    /** Vertical alignment if `direction` is `row`; horizontal alignment if it's `column`. Defaults to `stretch`. */
    align?: ValueOrArray<'stretch' | 'start' | 'center' | 'end' | 'baseline' | null>;
    /** Size of the gap between flex items (both horizontal and vertical). */
    gap?: ValueOrArray<string | number | null>;
    /** Size of the horizontal gap between flex items. */
    gapX?: ValueOrArray<string | number | null>;
    /** Size of the vertical gap between flex items. */
    gapY?: ValueOrArray<string | number | null>;
    inline?: ValueOrArray<boolean | null>;
} & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>> & {
    /** Shorthand for `<Flex direction="row" />`. */
    Row: import("react").ForwardRefExoticComponent<Omit<FlexProps, "direction"> & import("react").RefAttributes<HTMLElement>>;
    /** Shorthand for `<Flex direction="column" />`. */
    Column: import("react").ForwardRefExoticComponent<Omit<FlexProps, "direction"> & import("react").RefAttributes<HTMLElement>>;
    /** Shorthand for `<Flex direction="column" justify="center" align="center" />`. */
    Center: import("react").ForwardRefExoticComponent<Omit<FlexProps, "direction" | "justify" | "align"> & import("react").RefAttributes<HTMLElement>>;
};
