import { ICSSInJSStyle } from '@fluentui/styles';
import * as React from 'react';
import { UIComponentProps } from '../../utils';
import { FluentComponentStaticProps } from '../../types';
import { ComponentWithAs } from '@fluentui/react-bindings';
export interface LayoutSlotClassNames {
    start: string;
    main: string;
    end: string;
    gap: string;
    reducedStart: string;
    reducedMain: string;
    reducedEnd: string;
}
export interface LayoutProps extends UIComponentProps {
    debug?: boolean;
    renderStartArea?: (params: LayoutProps & {
        classes: Record<string, string>;
    }) => React.ReactNode;
    renderMainArea?: (params: LayoutProps & {
        classes: Record<string, string>;
    }) => React.ReactNode;
    renderEndArea?: (params: LayoutProps & {
        classes: Record<string, string>;
    }) => React.ReactNode;
    renderGap?: (params: LayoutProps & {
        classes: Record<string, string>;
    }) => React.ReactNode;
    /** Styled applied to the root element of the rendered component. */
    rootCSS?: ICSSInJSStyle;
    start?: any;
    startCSS?: ICSSInJSStyle;
    startSize?: string;
    main?: any;
    mainCSS?: ICSSInJSStyle;
    mainSize?: string;
    end?: any;
    endCSS?: ICSSInJSStyle;
    endSize?: string;
    /** How to align items on-axis within the layout (i.e. vertical or not). */
    justifyItems?: React.CSSProperties['justifyItems'];
    /** How to align cross-axis items within the layout (i.e. vertical or not). */
    alignItems?: React.CSSProperties['alignItems'];
    /** A layout can have gaps of whitespace between areas. */
    gap?: string;
    /** A layout can reduce to the minimum required areas. */
    reducing?: boolean;
    /** A layout can render its content directly if only one piece of content exists. */
    disappearing?: boolean;
    vertical?: boolean;
}
export declare const layoutClassName = "ui-layout";
export declare const layoutSlotClassNames: LayoutSlotClassNames;
export declare type LayoutStylesProps = Required<Pick<LayoutProps, 'alignItems' | 'debug' | 'gap' | 'justifyItems' | 'mainSize' | 'endSize' | 'startSize' | 'vertical'>> & {
    hasStart: boolean;
    hasMain: boolean;
    hasEnd: boolean;
};
/**
 * (DEPRECATED) A layout is a utility for arranging the content of a component.
 */
export declare const Layout: ComponentWithAs<'div', LayoutProps> & FluentComponentStaticProps<LayoutProps>;