import { default as React } from 'react';
export declare const KUMO_GRID_VARIANTS: {
    readonly variant: {
        readonly "2up": {
            readonly classes: "grid-cols-1 md:grid-cols-2";
            readonly description: "Grid items stack on small screens, display side-by-side on medium screens and up";
        };
        readonly "side-by-side": {
            readonly classes: "grid-cols-2";
            readonly description: "Grid items always displayed side-by-side";
        };
        readonly "2-1": {
            readonly classes: "grid-cols-1 md:grid-cols-[2fr_1fr]";
            readonly description: "Two-thirds / one-third split (66%/33%) on medium screens and up";
        };
        readonly "1-2": {
            readonly classes: "grid-cols-1 md:grid-cols-[1fr_2fr]";
            readonly description: "One-third / two-thirds split (33%/66%) on medium screens and up";
        };
        readonly "1-3up": {
            readonly classes: "grid-cols-1 lg:grid-cols-3";
            readonly description: "Grid items stack on small screens, expand to 3 across on large screens";
        };
        readonly "3up": {
            readonly classes: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3";
            readonly description: "Grid items stack on small screens, 2 across on medium, 3 across on large";
        };
        readonly "4up": {
            readonly classes: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4";
            readonly description: "Grid items stack on small screens, progressively increase columns at larger breakpoints";
        };
        readonly "6up": {
            readonly classes: "grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6";
            readonly description: "Grid items start at 2 across, expand to 6 across on XL";
        };
        readonly "1-2-4up": {
            readonly classes: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4";
            readonly description: "Grid items stack on small screens, 2 across on medium, 4 across on large";
        };
    };
    readonly gap: {
        readonly none: {
            readonly classes: "gap-0";
            readonly description: "No gap between grid items";
        };
        readonly sm: {
            readonly classes: "gap-3";
            readonly description: "Small gap between grid items";
        };
        readonly base: {
            readonly classes: "gap-2 md:gap-6 lg:gap-8";
            readonly description: "Default responsive gap between grid items";
        };
        readonly lg: {
            readonly classes: "gap-8";
            readonly description: "Large gap between grid items";
        };
    };
};
export declare const KUMO_GRID_DEFAULT_VARIANTS: {
    readonly gap: "base";
};
export type KumoGridVariant = keyof typeof KUMO_GRID_VARIANTS.variant;
export type KumoGridGap = keyof typeof KUMO_GRID_VARIANTS.gap;
export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * Child node(s) that can be nested inside component
     */
    children?: React.ReactNode;
    /**
     * CSS class names that can be appended to the component
     */
    className?: string;
    /**
     * Show dividers between grid items on mobile (only works with 4up variant)
     */
    mobileDivider?: boolean;
    /**
     * Gap size between grid items
     */
    gap?: KumoGridGap;
    /**
     * Stylistic variations of the Grid layout
     */
    variant?: KumoGridVariant;
}
export interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * Child node(s) that can be nested inside component
     */
    children?: React.ReactNode;
    /**
     * CSS class names that can be appended to the component
     */
    className?: string;
}
export declare function gridVariants({ variant, gap, }?: {
    variant?: KumoGridVariant;
    gap?: KumoGridGap;
}): string;
export declare function gridItemVariants({ variant, mobileDivider, }?: {
    variant?: KumoGridVariant;
    mobileDivider?: boolean;
}): string;
export declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
export declare const GridItem: React.ForwardRefExoticComponent<GridItemProps & React.RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=grid.d.ts.map