import { ElementType, HTMLAttributes } from 'react';
import type { ValueOrArray } from '../../types';
export declare type GridProps = {
    /** Element type to render. Defaults to `div`. */
    as?: ElementType;
    /** Minimum column width. */
    width?: ValueOrArray<string | number | null>;
    /** Mode for column sizing, used in conjunction with the `width` prop. Can either be `fit` or `fill`. Defaults to `fit`. */
    repeat?: 'fit' | 'fill';
    /** Number of equally-sized columns, or string with grid layout syntax (e.g. `200px auto 200px`). Cannot be used in conjunction with the `width` prop. */
    columns?: ValueOrArray<string | number | null>;
    /** Horizontal alignment of items in their cell. Defaults to `stretch`. */
    justify?: ValueOrArray<'stretch' | 'start' | 'end' | 'center' | null>;
    /** Vertical alignment of items in their cell. Defaults to `stretch`. */
    align?: ValueOrArray<'stretch' | 'start' | 'end' | 'center' | 'baseline' | null>;
    /** Size of the gap between grid cells (both between columns and between rows). */
    gap?: ValueOrArray<string | number | null>;
    /** Size of the gap between columns of the grid. */
    gapX?: ValueOrArray<string | number | null>;
    /** Size of the gap between rows of the grid. */
    gapY?: ValueOrArray<string | number | null>;
} & HTMLAttributes<HTMLElement>;
/**
 * Base `Grid` component for laying out child elements/components in a CSS Grid layout,
 * with props to control the minimum column width (`width`) or the number of columns (`columns`),
 * the alignment of items in their cell, and the gap between them.
 */
export declare const Grid: import("react").ForwardRefExoticComponent<{
    /** Element type to render. Defaults to `div`. */
    as?: ElementType;
    /** Minimum column width. */
    width?: ValueOrArray<string | number | null>;
    /** Mode for column sizing, used in conjunction with the `width` prop. Can either be `fit` or `fill`. Defaults to `fit`. */
    repeat?: 'fit' | 'fill';
    /** Number of equally-sized columns, or string with grid layout syntax (e.g. `200px auto 200px`). Cannot be used in conjunction with the `width` prop. */
    columns?: ValueOrArray<string | number | null>;
    /** Horizontal alignment of items in their cell. Defaults to `stretch`. */
    justify?: ValueOrArray<'stretch' | 'start' | 'end' | 'center' | null>;
    /** Vertical alignment of items in their cell. Defaults to `stretch`. */
    align?: ValueOrArray<'stretch' | 'start' | 'end' | 'center' | 'baseline' | null>;
    /** Size of the gap between grid cells (both between columns and between rows). */
    gap?: ValueOrArray<string | number | null>;
    /** Size of the gap between columns of the grid. */
    gapX?: ValueOrArray<string | number | null>;
    /** Size of the gap between rows of the grid. */
    gapY?: ValueOrArray<string | number | null>;
} & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
