import type { ComponentPropsWithoutRef } from 'react';
import { type Sprinkles } from '../../styles/sprinkles.css';
import type { SimpleAsProp } from '../../types';
export type FlexComponentProps<T> = Omit<ComponentPropsWithoutRef<'div'>, keyof Sprinkles | keyof T | 'className' | 'style'> & SimpleAsProp & T;
export interface FlexInlineProps {
    /**
     * Main-axis horizontal alignment of items (_responsive_)
     * @default start
     */
    align?: Sprinkles['justifyContent'];
    /** Shortcut center horizontal alignment */
    center?: boolean;
    /** Shortcut end/bottom alignment */
    end?: boolean;
    /** Child elements should fill available space */
    expand?: boolean;
    /** Adds 100% width */
    fullWidth?: boolean;
    /** Item horizontal spacing (_responsive_)*/
    gap?: Sprinkles['gap'];
    height?: Sprinkles['height'];
    /** Prevent items from wrapping to the next row */
    noWrap?: boolean;
    /** Cross-axis vertical alignment of items (_responsive_) */
    justify?: Sprinkles['alignItems'];
    /** Reverse item order */
    reverse?: boolean;
    /** Shortcut `space-between` justification */
    spaceBetween?: boolean;
    /** Shortcut start/top alignment */
    start?: boolean;
}
export declare const inlinePropMapping: ({ align, center, end, fullWidth, gap, height, noWrap, justify, reverse, spaceBetween, start, }?: FlexInlineProps) => {
    alignItems: ("stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart" | {
        mobile?: "stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart" | undefined;
        tablet?: "stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart" | undefined;
        desktop?: "stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart" | undefined;
        largeDesktop?: "stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart" | undefined;
    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart" | null>;
    display: "flex";
    flexDirection: "row" | "row-reverse";
    flexWrap: "nowrap" | "wrap";
    gap: ("1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none" | {
        mobile?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none" | undefined;
        tablet?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none" | undefined;
        desktop?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none" | undefined;
        largeDesktop?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none" | undefined;
    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none" | null>;
    height: ("1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "full" | "auto" | "fit-content" | "max-content" | "min-content" | {
        mobile?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "full" | "auto" | "fit-content" | "max-content" | "min-content" | undefined;
        tablet?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "full" | "auto" | "fit-content" | "max-content" | "min-content" | undefined;
        desktop?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "full" | "auto" | "fit-content" | "max-content" | "min-content" | undefined;
        largeDesktop?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "full" | "auto" | "fit-content" | "max-content" | "min-content" | undefined;
    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "full" | "auto" | "fit-content" | "max-content" | "min-content" | null>;
    justifyContent: "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "flexEnd" | "flexStart" | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "flexEnd" | "flexStart" | null> | {
        mobile?: "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "flexEnd" | "flexStart" | undefined;
        tablet?: "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "flexEnd" | "flexStart" | undefined;
        desktop?: "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "flexEnd" | "flexStart" | undefined;
        largeDesktop?: "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "flexEnd" | "flexStart" | undefined;
    };
    width: "full" | undefined;
};
/**
 * Creates a horizontal layout, convenience function for use with `className`.
 * Accepts responsive values
 *
 * @example
 * // Basic row with defaults
 * const simple = inline();
 *
 * // Centered row with responsive gap
 * const centered = inline({
 *   align: 'center',
 *   justify: 'center',
 *   gap: { mobile: '2', tablet: '4', desktop: '6' }
 * });
 */
export declare const inline: (props?: FlexInlineProps) => string;
export interface FlexStackProps {
    /** Cross-axis horizontal alignment of items (_responsive_) */
    align?: Sprinkles['alignItems'];
    /** Shortcut center horizontal alignment */
    center?: boolean;
    /** Shortcut end/right alignment */
    end?: boolean;
    /** Item vertical spacing (_responsive_)*/
    gap?: Sprinkles['gap'];
    /** Main-axis vertical alignment of items (_responsive_) */
    justify?: Sprinkles['justifyContent'];
    minWidth?: Sprinkles['minWidth'];
    /** Reverse item order */
    reverse?: boolean;
    /** Shortcut start/left alignment */
    start?: boolean;
    width?: Sprinkles['width'];
}
export declare const stackPropMapping: ({ align, center, end, gap, justify, minWidth, reverse, start, width, }?: FlexStackProps) => {
    alignItems: "stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart" | {
        mobile?: "stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart" | undefined;
        tablet?: "stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart" | undefined;
        desktop?: "stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart" | undefined;
        largeDesktop?: "stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart" | undefined;
    } | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart" | null> | undefined;
    display: "flex";
    flexDirection: "column" | "column-reverse";
    gap: ("1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none" | {
        mobile?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none" | undefined;
        tablet?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none" | undefined;
        desktop?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none" | undefined;
        largeDesktop?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none" | undefined;
    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none" | null>;
    justifyContent: import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "flexEnd" | "flexStart" | null> | ("space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "flexEnd" | "flexStart" | {
        mobile?: "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "flexEnd" | "flexStart" | undefined;
        tablet?: "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "flexEnd" | "flexStart" | undefined;
        desktop?: "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "flexEnd" | "flexStart" | undefined;
        largeDesktop?: "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "flexEnd" | "flexStart" | undefined;
    } | undefined);
    minWidth: ("auto" | "fit-content" | {
        mobile?: "auto" | "fit-content" | undefined;
        tablet?: "auto" | "fit-content" | undefined;
        desktop?: "auto" | "fit-content" | undefined;
        largeDesktop?: "auto" | "fit-content" | undefined;
    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "auto" | "fit-content" | null>;
    width: import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "full" | "auto" | "fit-content" | "max-content" | "min-content" | null> | ("1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "full" | "auto" | "fit-content" | "max-content" | "min-content" | {
        mobile?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "full" | "auto" | "fit-content" | "max-content" | "min-content" | undefined;
        tablet?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "full" | "auto" | "fit-content" | "max-content" | "min-content" | undefined;
        desktop?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "full" | "auto" | "fit-content" | "max-content" | "min-content" | undefined;
        largeDesktop?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "full" | "auto" | "fit-content" | "max-content" | "min-content" | undefined;
    } | undefined);
};
/**
 * Creates a vertical layout, convenience function for use with `className`.
 * Accepts responsive values
 *
 * @example
 * // Basic stack with defaults
 * const simple = stack();
 *
 * // Centered stack with responsive gap
 * const centered = stack({
 *   align: 'center',
 *   justify: 'center',
 *   gap: { mobile: '2', tablet: '4', desktop: '6' }
 * });
 *
 * // Full width stack items
 * const responsiveStack = stack({
 * 	 align: 'stretch',
 * });
 */
export declare const stack: (props?: FlexStackProps) => string;
//# sourceMappingURL=flex.d.ts.map