import { default as React } from 'react';
import { default as PropTypes } from 'prop-types';
/** Standard Narmi breakpoint names */
export type ResponsiveFlexSize = "s" | "m" | "l" | "xl";
export type ResponsiveFlexGap = "xs" | "s" | "m" | "l" | "xl";
export type ResponsiveFlexDirection = "row" | "column";
export type FlexDirection = ResponsiveFlexDirection | "row-reverse" | "column-reverse";
export interface GetFlexDirectionArgs {
    viewportMatches: Record<ResponsiveFlexSize, boolean>;
    direction: ResponsiveFlexDirection;
    toColumnAt?: ResponsiveFlexSize;
    toRowAt?: ResponsiveFlexSize;
    reverseAt?: ResponsiveFlexSize;
}
export declare const getFlexDirection: ({ viewportMatches, direction, toColumnAt, toRowAt, reverseAt, }: GetFlexDirectionArgs) => FlexDirection;
export interface ResponsiveFlexProps {
    /** Implicit flex children */
    children?: React.ReactNode;
    /** Size of flex gap by token size (e.g. "xl") */
    gapSize?: ResponsiveFlexGap;
    /** Initial flex direction  */
    direction?: ResponsiveFlexDirection;
    /** Breakpoint at which to reverse order of flex items */
    reverseAt?: ResponsiveFlexSize;
    /** Breakpoint at which to change flex direction to column */
    toColumnAt?: ResponsiveFlexSize;
    /** Breakpoint at which to change flex direction to row */
    toRowAt?: ResponsiveFlexSize;
}
/**
 * Responsive layout helper that allows developers to declaratively control
 * how flex items behave at different standard viewport sizes.
 */
declare const ResponsiveFlex: {
    ({ children, direction, gapSize, reverseAt, toColumnAt, toRowAt, }: ResponsiveFlexProps): React.JSX.Element;
    propTypes: {
        /** Implicit flex children */
        children: PropTypes.Requireable<PropTypes.ReactNodeLike[]>;
        /** Size of flex gap by token size (e.g. "xl") */
        gapSize: PropTypes.Requireable<string>;
        /** Initial flex direction  */
        direction: PropTypes.Requireable<string>;
        /** Breakpoint at which to reverse order of flex items */
        reverseAt: PropTypes.Requireable<string>;
        /** Breakpoint at which to change flex direction to column */
        toColumnAt: PropTypes.Requireable<string>;
        /** Breakpoint at which to change flex direction to row */
        toRowAt: PropTypes.Requireable<string>;
    };
};
export default ResponsiveFlex;
//# sourceMappingURL=index.d.ts.map