import * as React from 'react';
import type { AnyString } from '../../utils/types.js';
import type { PolymorphicForwardRefComponent } from '../../utils/props.js';
declare const sizeTokens: readonly ["3xs", "2xs", "xs", "s", "m", "l", "xl", "2xl", "3xl"];
/**
 * String literal shorthands that correspond to the size tokens in [itwinui-variables](https://github.com/iTwin/iTwinUI/blob/main/packages/itwinui-variables/src/sizes.scss).
 */
type SizeToken = (typeof sizeTokens)[number];
type FlexOwnProps = {
    /**
     * Value of the `display` property.
     * @default 'flex'
     */
    display?: 'flex' | 'inline-flex';
    /**
     * Value of the `justify-content` property.
     * @default 'flex-start'
     */
    justifyContent?: React.CSSProperties['justifyContent'];
    /**
     * Value of the `align-items` property. Defaults to 'center' but you
     * might want to use 'flex-start' in some cases.
     * @default 'center'
     */
    alignItems?: React.CSSProperties['alignItems'];
    /**
     * Value of the `gap` property.
     *
     * Supports aliases for iTwinUI size tokens:
     * 3xs, 2xs, xs, s, m, l, xl, 2xl, 3xl
     *
     * Also accepts any valid css value (e.g. "1rem" or "2px")
     *
     * @default 'xs'
     */
    gap?: SizeToken | AnyString;
    /**
     * Value of the `direction` property.
     * @default 'row'
     */
    flexDirection?: React.CSSProperties['flexDirection'];
    /**
     * Value of the `flex-wrap` property.
     * @default 'nowrap'
     */
    flexWrap?: React.CSSProperties['flexWrap'];
};
type FlexSpacerOwnProps = {
    /**
     * Value of the `flex` css property.
     *
     * This may need to be adjusted if you're also setting `flex` on
     * other `Flex.Item`s.
     *
     * @default 999
     */
    flex?: React.CSSProperties['flex'];
};
type FlexItemOwnProps = {
    /**
     * Gap before the flex item, if different from the `gap` set on `Flex` component.
     */
    gapBefore?: SizeToken | AnyString;
    /**
     * Gap after the flex item, if different from the `gap` set on `Flex` component.
     */
    gapAfter?: SizeToken | AnyString;
    /**
     * Value of the `flex` css property.
     * @default 'auto'
     */
    flex?: React.CSSProperties['flex'];
    /**
     * Value of the `align-self` css property.
     * @default 'auto'
     */
    alignSelf?: React.CSSProperties['alignSelf'];
};
/**
 * A utility component that makes it easier to work with CSS flexbox
 * and iTwinUI design tokens. Supports all flex properties.
 * Can be used with or without `Flex.Item` and `Flex.Spacer` subcomponents.
 *
 * @example
 * <Flex>
 *   <Icon>...</Icon>
 *   <Text>...</Text>
 *   <Flex.Spacer />
 *   <IconButton>...</IconButton>
 * </Flex>
 *
 * @example
 * <Flex gap='m' flexWrap='wrap'>
 *   <Flex.Item>...</Flex.Item>
 *   <Flex.Item>...</Flex.Item>
 *   ...
 * </Flex>
 *
 * @example
 * <Flex gap='l'>
 *   <Flex.Item>...</Flex.Item>
 *   <Flex.Item>...</Flex.Item>
 *   <Flex.Item gapBefore='s'>...</Flex.Item>
 *   <Flex.Item>...</Flex.Item>
 * </Flex>
 */
export declare const Flex: PolymorphicForwardRefComponent<"div", FlexOwnProps> & {
    /**
     * Subcomponent that allows customizing flex items through the
     * `flex`, `alignSelf` and `gapBefore`/`gapAfter` props.
     *
     * The `gapBefore`/`gapAfter` props can used to override the gap at an
     * individual level, for when you need a different gap than the one
     * set in the parent `Flex`.
     *
     * @example
     * <Flex gap='l'>
     *   <Flex.Item>...</Flex.Item>
     *   <Flex.Item>...</Flex.Item>
     *   <Flex.Item gapBefore='s'>...</Flex.Item>
     *   <Flex.Item>...</Flex.Item>
     * </Flex>
     */
    Item: PolymorphicForwardRefComponent<"div", FlexItemOwnProps>;
    /**
     * Subcomponent that fills up the available space using a really large `flex` value.
     * Useful when you want to push certain items to one edge.
     *
     * @example
     * <Flex>
     *   <div>this stays on the left</div>
     *   <Flex.Spacer /> // this fills up the available empty space
     *   <div>this gets pushed all the way to the end</div>
     * </Flex>
     */
    Spacer: PolymorphicForwardRefComponent<"div", FlexSpacerOwnProps>;
};
export {};