import { CSSProperties, ComponentPropsWithoutRef } from 'react';
import { LayoutUtilProps } from '../../types';
/**
 * Flex-specific props that extend layout utilities
 * @extends Omit<LayoutUtilProps, "flexBasis" | "flexGrow" | "flexDirection" | "flexWrap" | "flexShrink">
 */
type FlexSpecificProps = Omit<LayoutUtilProps, "flexBasis" | "flexGrow" | "flexDirection" | "flexWrap" | "flexShrink"> & {
    /**
     * Applies `display: inline-flex` instead of `flex`
     */
    inline?: boolean;
    /**
     * The flex direction of the container.
     */
    direction?: CSSProperties["flexDirection"];
    /**
     * The flex grow value for the container.
     */
    grow?: CSSProperties["flexGrow"];
    /**
     * The flex shrink value for the container.
     */
    shrink?: CSSProperties["flexShrink"];
    /**
     * The flex basis value for the container.
     */
    basis?: CSSProperties["flexBasis"];
    /**
     * The flex wrap value for the container.
     */
    wrap?: CSSProperties["flexWrap"];
    /** @deprecated use shrink prop instead */
    flexShrink?: CSSProperties["flexShrink"];
};
/**
 * Props for the Flex component
 * @extends ComponentPropsWithoutRef<"div">
 * @extends FlexSpecificProps
 */
export type FlexProps = ComponentPropsWithoutRef<"div"> & FlexSpecificProps & {
    /**
     * Responsive props for small screens (sm breakpoint).
     */
    sm?: FlexSpecificProps;
    /**
     * Responsive props for medium screens (md breakpoint).
     */
    md?: FlexSpecificProps;
    /**
     * Responsive props for large screens (lg breakpoint).
     */
    lg?: FlexSpecificProps;
    /**
     * Responsive props for extra large screens (xl breakpoint).
     */
    xl?: FlexSpecificProps;
    /**
     * Responsive props for extra extra large screens (xxl breakpoint).
     */
    xxl?: FlexSpecificProps;
};
/**
 * Flex component for creating flexible layouts using CSS Flexbox.
 *
 * Features:
 * - CSS Flexbox layout with full control over flex properties
 * - Support for both flex and inline-flex display modes
 * - Responsive design with breakpoint-specific props (sm, md, lg, xl, xxl)
 * - Comprehensive layout utilities for spacing, alignment, and positioning
 * - Automatic style generation and class management
 * - Support for all standard div element props
 * - Flexible direction, grow, shrink, basis, and wrap controls
 * - Deprecated flexShrink prop with modern shrink alternative
 *
 * @example
 * <Flex direction="row" gap="4" alignItems="center">
 *   <div>Item 1</div>
 *   <div>Item 2</div>
 *   <div>Item 3</div>
 * </Flex>
 *
 * @example
 * <Flex
 *   direction="column"
 *   gap="2"
 *   md={{ direction: "row", gap: "4" }}
 * >
 *   <div>Item 1</div>
 *   <div>Item 2</div>
 *   <div>Item 3</div>
 * </Flex>
 */
export declare const Flex: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & Omit<LayoutUtilProps, "flexDirection" | "flexGrow" | "flexShrink" | "flexBasis" | "flexWrap"> & {
    /**
     * Applies `display: inline-flex` instead of `flex`
     */
    inline?: boolean;
    /**
     * The flex direction of the container.
     */
    direction?: CSSProperties["flexDirection"];
    /**
     * The flex grow value for the container.
     */
    grow?: CSSProperties["flexGrow"];
    /**
     * The flex shrink value for the container.
     */
    shrink?: CSSProperties["flexShrink"];
    /**
     * The flex basis value for the container.
     */
    basis?: CSSProperties["flexBasis"];
    /**
     * The flex wrap value for the container.
     */
    wrap?: CSSProperties["flexWrap"];
    /** @deprecated use shrink prop instead */
    flexShrink?: CSSProperties["flexShrink"];
} & {
    /**
     * Responsive props for small screens (sm breakpoint).
     */
    sm?: FlexSpecificProps;
    /**
     * Responsive props for medium screens (md breakpoint).
     */
    md?: FlexSpecificProps;
    /**
     * Responsive props for large screens (lg breakpoint).
     */
    lg?: FlexSpecificProps;
    /**
     * Responsive props for extra large screens (xl breakpoint).
     */
    xl?: FlexSpecificProps;
    /**
     * Responsive props for extra extra large screens (xxl breakpoint).
     */
    xxl?: FlexSpecificProps;
} & import('react').RefAttributes<HTMLDivElement>>;
export {};