import type { ReactNode, Ref } from 'react';
import type { BaseProps, AsProp, RequireAtLeastOne } from '../../types';
export interface GridContainerProps {
    /**
     * Display the grid as an inline-grid.
     * @default false
     */
    inline?: boolean;
    /** Padding on the container represented as a multiplier or set of multipliers to the base spacing value in the theme. */
    pad?: number | [topRightBottomLeft: number] | [topBottom: number, rightLeft: number] | [top: number, rightLeft: number, bottom: number] | [top: number, right: number, bottom: number, left: number];
    /** [grid-template-columns](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-template-columns-rows) */
    cols?: string;
    /** [grid-auto-columns](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-auto-columns-rows) */
    autoCols?: string;
    /** [grid-template-rows](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-template-columns-rows) */
    rows?: string;
    /** [grid-auto-rows](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-auto-columns-rows) */
    autoRows?: string;
    /** [grid-auto-flow](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-auto-flow) */
    autoFlow?: 'row' | 'column' | 'row dense' | 'column dense';
    /** [grid-template-area](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-template-areas) */
    areas?: string;
    /** [grid-template](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-template) */
    template?: string;
    /**
     * Defines how much equal space to place between columns represented as a multiplier to the base spacing value in the theme.
     * [column-gap](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-column-row-gap)
     */
    colGap?: number;
    /**
     * Defines how much equal space to place between rows represented as a multiplier to the base spacing value in the theme.
     * [row-gap](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-column-row-gap)
     */
    rowGap?: number;
    /**
     * Defines how much equal space to place between both rows and columns represented as a multiplier to the base spacing value in the theme.
     * [gap](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-gap)
     */
    gap?: number;
    /**
     * [justify-items](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-justify-items)
     * @default 'stretch'
     */
    justifyItems?: 'start' | 'end' | 'center' | 'stretch';
    /**
     * [justify-content](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-justify-content)
     * @default 'start'
     */
    justifyContent?: 'start' | 'end' | 'center' | 'stretch' | 'around' | 'between' | 'evenly';
    /**
     * [align-items](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-align-items)
     * @default 'stretch'
     */
    alignItems?: 'stretch' | 'start' | 'end' | 'center';
    /**
     * [align-content](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-align-content)
     * @default 'start'
     */
    alignContent?: 'start' | 'end' | 'center' | 'stretch' | 'around' | 'between' | 'evenly';
}
export interface GridItemProps {
    /** [grid-column-start](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-column-row-start-end) */
    colStart?: string;
    /** [grid-column-end](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-column-row-start-end) */
    colEnd?: string;
    /** [grid-column](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-column-row) */
    colStartEnd?: string;
    /** [grid-row-start](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-column-row-start-end) */
    rowStart?: string;
    /** [grid-row-end](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-column-row-start-end) */
    rowEnd?: string;
    /** [grid-row](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-column-row) */
    rowStartEnd?: string;
    /** [grid-area](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-area) */
    area?: string;
    /**
     * [justify-self](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-justify-self)
     * @default 'stretch'
     */
    justifySelf?: 'start' | 'end' | 'center' | 'stretch';
    /**
     * [align-self](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-align-self)
     * @default 'stretch'
     */
    alignSelf?: 'stretch' | 'start' | 'end' | 'center';
}
export interface BaseGridProps {
    /** Creates a [grid container.](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-display) */
    container?: GridContainerProps | true;
    /** Designate as a Grid item to leverage grid item props. */
    item?: GridItemProps;
}
type BreakpointGridProps = RequireAtLeastOne<BaseGridProps, 'container' | 'item'>;
type GridProps = RequireAtLeastOne<BaseGridProps & BaseProps & AsProp & {
    /** Any ReactNode to use as grid items. To leverage item based props, use Grid with "item" prop. */
    children?: ReactNode;
    /** Ref for the grid element. */
    ref?: Ref<Element>;
    /** Override props for the grid at extra small screen size. */
    xs?: BreakpointGridProps;
    /** Override props for the grid at small screen size. */
    sm?: BreakpointGridProps;
    /** Override props for the grid at medium screen size. */
    md?: BreakpointGridProps;
    /** Override props for the grid at large screen size. */
    lg?: BreakpointGridProps;
    /** Override props for the grid at extra large screen size. */
    xl?: BreakpointGridProps;
}, 'container' | 'item' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'>;
export type { GridProps as default };
//# sourceMappingURL=Grid.types.d.ts.map