import { IStyle } from '@fluentui/react';
import React from 'react';
import { BaseCustomStyles } from '../types';
/**
 * Props for {@link GridLayout}.
 *
 * @public
 */
export interface GridLayoutProps {
    children: React.ReactNode;
    /**
     * Allows users to pass in an object contains custom CSS styles.
     * @Example
     * ```
     * <GridLayout styles={{ root: { background: 'blue' } }} />
     * ```
     */
    styles?: BaseCustomStyles;
}
/**
 * {@link GridLayout} Component Styles.
 * @public
 */
export interface GridLayoutStyles extends BaseCustomStyles {
    /** Styles for each child of {@link GridLayout} */
    children?: IStyle;
}
/**
 * A component to lay out audio / video participants tiles in a call.
 *
 * @public
 */
export declare const GridLayout: (props: GridLayoutProps) => JSX.Element;
/**
 * Properties to describe a grid. The number of rows, number of columns and whether it fills horizontally or vertically.
 *
 * @Example
 * ```
 *  ______________________
 * |_______|_______|______|
 * |___________|__________| This grid has 2 rows, 3 columns and fills horizontally.
 *  ______________
 * |    |    |    |
 * |____|____|    |
 * |    |    |    |
 * |____|____|____| This grid has 2 rows, 3 columns and fills vertically.
 *  _______________
 * |       |       |
 * |_______|_______|
 * |       |       | If all cells are equal, we default the fill direction as horizontal.
 * |_______|_______| This grid has 2 rows, 2 columns and fills horizontally.
 * ```
 */
type GridProps = {
    fillDirection: FillDirection;
    rows: number;
    columns: number;
};
type FillDirection = 'horizontal' | 'vertical';
/**
 * Get the best GridProps to place a number of items in a grid as evenly as possible given the width and height of the grid
 * @param numberOfItems - number of items to place in grid
 * @param width - width of grid
 * @param height - height of grid
 * @returns GridProps
 */
export declare const calculateGridProps: (numberOfItems: number, width: number, height: number) => GridProps;
/**
 * Creates a styles classname with CSS Grid related styles given GridProps and the number of items to distribute as evenly as possible.
 * @param numberOfItems - number of items to place in grid
 * @param gridProps - GridProps that define the number of rows, number of columns, and the fill direction
 * @returns - classname
 */
export declare const createGridStyles: (numberOfItems: number, gridProps: GridProps) => string;
export {};
//# sourceMappingURL=GridLayout.d.ts.map