import { HTMLProps, ReactNode } from 'react';
/**
 * A Stack is a layout primitive that ensures its children are stacked either horizontally next to each other or vertically, one below the other.
 * In addition a gap can be defined which the Stack injects between its children so they have some margin from one another.
 * @see https://cloudoperators.github.io/juno/?path=/docs/layout-stack--docs
 * @see {@link StackProps}
 */
export declare const Stack: ({ direction, gap, alignment, distribution, wrap, className, children, ...props }: StackProps) => ReactNode;
export type StackDirection = "horizontal" | "vertical";
export type StackAlignment = "start" | "end" | "center" | "baseline" | "stretch";
export type StackDistribution = "start" | "end" | "center" | "between" | "around" | "evenly";
export type StackGap = "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96";
export interface StackProps extends Omit<HTMLProps<HTMLDivElement>, "wrap"> {
    children?: ReactNode;
    /** Pass css class names */
    className?: string;
    /** Stack items horizontally or vertically */
    direction?: StackDirection;
    /** Specify how items should be aligned on the cross axis (in a horizontal Stack this is the vertical alignment, in a vertical Stack it is the horizontal alignment) */
    alignment?: StackAlignment;
    /** Specify how items should be distributed on the main axis (in a horizontal Stack this is the horizontal distribution, in a vertical Stack it is the vertical distribution) */
    distribution?: StackDistribution;
    /** Specify whether the Stack children should be allowed to wrap or not */
    wrap?: boolean;
    /** Can be any valid tailwind spacing. See here: https://tailwindcss.com/docs/customizing-spacing#default-spacing-scale */
    gap?: StackGap;
}
//# sourceMappingURL=Stack.component.d.ts.map