import { HTMLAttributes, JSX, ReactNode } from 'react';
type ColCount = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
type AlignItems = "start" | "center" | "end" | "stretch" | "baseline";
type JustifyItems = "start" | "center" | "end" | "stretch";
export type GridProps = HTMLAttributes<HTMLElement> & {
    as?: keyof JSX.IntrinsicElements;
    className?: string;
    /** Number of columns (1-12). */
    cols?: ColCount;
    /** Number of rows (1-12). */
    rows?: ColCount;
    /** Grid auto-flow direction. */
    flow?: "row" | "col" | "row-dense" | "col-dense";
    /** Gap between grid items (inline style, e.g., 8 or "1rem"). */
    gap?: string | number;
    /** Gap between rows (inline style, e.g., 8 or "1rem"). */
    rowGap?: string | number;
    /** Gap between columns (inline style, e.g., 8 or "1rem"). */
    columnGap?: string | number;
    /** Set inline grid instead of block grid. */
    inline?: boolean;
    /** Apply full width utility. */
    fullWidth?: boolean;
    /** Optional CSS grid template columns via inline style. */
    templateCols?: string;
    /** Optional CSS grid template rows via inline style. */
    templateRows?: string;
    /** Vertical alignment of items within grid cells. */
    alignItems?: AlignItems;
    /** Horizontal alignment of items within grid cells. */
    justifyItems?: JustifyItems;
    children: ReactNode;
};
export declare function Grid({ as, className, cols, rows, flow, gap, rowGap, columnGap, inline, fullWidth, templateCols, templateRows, alignItems, justifyItems, children, ...rest }: GridProps): import("react/jsx-runtime").JSX.Element;
type GridHeaderProps = {
    headers: string[];
    className?: string;
    cols?: ColCount;
    rows?: ColCount;
    flow?: GridProps["flow"];
    gap?: string | number;
    rowGap?: string | number;
    columnGap?: string | number;
    inline?: boolean;
    fullWidth?: boolean;
    templateCols?: string;
    templateRows?: string;
    alignItems?: AlignItems;
    justifyItems?: JustifyItems;
};
export declare function GridHeader({ headers, className, cols, rows, flow, gap, rowGap, columnGap, inline, fullWidth, templateCols, templateRows, alignItems, justifyItems, }: GridHeaderProps): import("react/jsx-runtime").JSX.Element;
type GridRowProps = {
    children: ReactNode;
    className?: string;
    cols?: ColCount;
    rows?: ColCount;
    flow?: GridProps["flow"];
    gap?: string | number;
    rowGap?: string | number;
    columnGap?: string | number;
    inline?: boolean;
    fullWidth?: boolean;
    templateCols?: string;
    templateRows?: string;
    alignItems?: AlignItems;
    justifyItems?: JustifyItems;
};
export declare function GridRow({ children, className, cols, rows, flow, gap, rowGap, columnGap, inline, fullWidth, templateCols, templateRows, alignItems, justifyItems, }: GridRowProps): import("react/jsx-runtime").JSX.Element;
export {};