import { ComponentPropsWithoutRef } from 'react';
import { GridSpecificProps } from './internal/GridSpecificProps';
/**
 * Props for the Grid component
 * @extends ComponentPropsWithoutRef<"div">
 * @extends GridSpecificProps
 */
export type GridProps = ComponentPropsWithoutRef<"div"> & {
    /**
     * Applies `display: inline-grid` instead of `grid`
     */
    inline?: boolean;
} & GridSpecificProps & {
    /**
     * Responsive props for small screens (sm breakpoint).
     */
    sm?: GridSpecificProps;
    /**
     * Responsive props for medium screens (md breakpoint).
     */
    md?: GridSpecificProps;
    /**
     * Responsive props for large screens (lg breakpoint).
     */
    lg?: GridSpecificProps;
    /**
     * Responsive props for extra large screens (xl breakpoint).
     */
    xl?: GridSpecificProps;
    /**
     * Responsive props for extra extra large screens (xxl breakpoint).
     */
    xxl?: GridSpecificProps;
};
/**
 * Grid component for creating CSS Grid layouts with responsive design.
 *
 * Features:
 * - CSS Grid layout with full control over grid properties
 * - Support for both grid and inline-grid display modes
 * - Responsive design with breakpoint-specific props (sm, md, lg, xl, xxl)
 * - Comprehensive layout utilities for spacing, alignment, and positioning
 * - Template columns, rows, and areas configuration
 * - Auto columns and rows sizing
 * - Automatic style generation and class management
 * - Support for all standard div element props
 * - Flexible grid template and auto-sizing controls
 * - Automatic tracking ID generation for analytics
 * - Compound component structure with Item sub-component
 *
 * @example
 * <Grid templateColumns="repeat(3, 1fr)" gap="4">
 *   <Grid.Item>Grid Item 1</Grid.Item>
 *   <Grid.Item>Grid Item 2</Grid.Item>
 *   <Grid.Item>Grid Item 3</Grid.Item>
 * </Grid>
 *
 * @example
 * <Grid
 *   templateColumns="repeat(1, 1fr)"
 *   gap="2"
 *   md={{ templateColumns: "repeat(3, 1fr)", gap: "4" }}
 * >
 *   <Grid.Item>Grid Item 1</Grid.Item>
 *   <Grid.Item>Grid Item 2</Grid.Item>
 *   <Grid.Item>Grid Item 3</Grid.Item>
 * </Grid>
 */
export declare const Grid: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
    /**
     * Applies `display: inline-grid` instead of `grid`
     */
    inline?: boolean;
} & import('..').LayoutUtilProps & {
    templateColumns?: import('react').CSSProperties["gridTemplateColumns"];
    templateRows?: import('react').CSSProperties["gridTemplateRows"];
    templateAreas?: import('react').CSSProperties["gridTemplateAreas"];
    autoColumns?: import('react').CSSProperties["gridAutoColumns"];
    autoRows?: import('react').CSSProperties["gridAutoRows"];
} & {
    /**
     * Responsive props for small screens (sm breakpoint).
     */
    sm?: GridSpecificProps;
    /**
     * Responsive props for medium screens (md breakpoint).
     */
    md?: GridSpecificProps;
    /**
     * Responsive props for large screens (lg breakpoint).
     */
    lg?: GridSpecificProps;
    /**
     * Responsive props for extra large screens (xl breakpoint).
     */
    xl?: GridSpecificProps;
    /**
     * Responsive props for extra extra large screens (xxl breakpoint).
     */
    xxl?: GridSpecificProps;
} & import('react').RefAttributes<HTMLDivElement>> & {
    /**
     * GridItem component for individual items within a CSS Grid layout.
     *
     * Features:
     * - Individual grid item with full layout utility support
     * - Automatic grid item styling and class management
     * - Comprehensive layout utilities for positioning and sizing
     * - Support for all standard div element props
     * - Flexible grid positioning and sizing controls
     * - Automatic style generation and class management
     * - Works seamlessly with Grid component
     * - Automatic tracking ID generation for analytics
     *
     * @example
     * <Grid templateColumns="repeat(2, 1fr)" gap="4">
     *   <Grid.Item>Grid Item 1</Grid.Item>
     *   <Grid.Item>Grid Item 2</Grid.Item>
     * </Grid>
     */
    Item: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('..').LayoutUtilProps & import('react').RefAttributes<HTMLDivElement>>;
};