/**
 * @file Grid.tsx
 * @input Uses React, stylex, spacing tokens
 * @output Exports Grid component, GridProps, and GridColumns
 * @position Grid component; provides CSS Grid-based layout
 *
 * SYNC: When modified, update these files to stay in sync:
 * - /packages/core/src/Grid/Grid.doc.mjs
 * - /packages/core/src/Grid/Grid.test.tsx
 * - /apps/storybook/stories/Grid.stories.tsx
 * - /packages/cli/assets/templates/blocks/components/Grid/ (showcase blocks)
 */
import type { ReactNode } from 'react';
import type { BaseProps } from '../BaseProps';
import type { SpacingStep } from '../utils/types';
import type { SizeValue } from '../utils/types';
/**
 * Grid alignment options for align-items and justify-items.
 */
export type GridAlignment = 'start' | 'center' | 'end' | 'stretch';
/**
 * Column configuration for Grid.
 *
 * - `number` — fixed equal-width columns (e.g. `columns={3}`)
 * - `object` — responsive columns based on minimum child width:
 *   - `minWidth` — minimum width (px) for each column track
 *   - `repeat` — `'fill'` (default) preserves empty tracks for consistent widths;
 *     `'fit'` collapses empty tracks so items stretch to fill
 *   - `max` — caps the maximum number of columns. The grid stretches to 100%
 *     of its parent and the columns that are present always fill the row, so a
 *     layout collapsing to a single column on mobile stretches to full width
 *     (no dead space on the right).
 */
export type GridColumns = number | {
    minWidth: number;
    max?: number;
    repeat?: 'fill' | 'fit';
};
export interface GridProps extends BaseProps<HTMLDivElement> {
    /** Ref forwarded to the root element */
    ref?: React.Ref<HTMLDivElement>;
    /**
     * Column configuration.
     * - `number` — fixed equal-width columns
     * - `{minWidth, max?, repeat?}` — responsive columns
     *
     * @see GridColumns
     */
    columns?: GridColumns;
    /**
     * Width of the grid container.
     * Numbers are treated as pixels, strings are used as-is (e.g., '100%').
     */
    width?: SizeValue;
    /**
     * Height of the grid container.
     * Numbers are treated as pixels, strings are used as-is (e.g., '100%').
     */
    height?: SizeValue;
    /**
     * Maximum width of the grid container.
     * Numbers are treated as pixels, strings are used as-is (e.g., '100%').
     */
    maxWidth?: SizeValue;
    /**
     * Minimum height of the grid container.
     * Numbers are treated as pixels, strings are used as-is (e.g., '100%').
     */
    minHeight?: SizeValue;
    /**
     * Spacing between all grid items (both row and column).
     * Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10.
     */
    gap?: SpacingStep;
    /**
     * Spacing between rows. Overrides gap for rows.
     * Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10.
     */
    rowGap?: SpacingStep;
    /**
     * Spacing between columns. Overrides gap for columns.
     * Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10.
     */
    columnGap?: SpacingStep;
    /**
     * Height of each implicit row track in pixels.
     * Sets `grid-auto-rows` — use with `GridSpan rows={N}` to create
     * masonry-style layouts where items span varying numbers of rows.
     *
     * @example
     * ```
     * <Grid columns={3} rowHeight={80} gap={3}>
     *   <GridSpan rows={4}>Tall</GridSpan>
     *   <GridSpan rows={2}>Short</GridSpan>
     * </Grid>
     * ```
     */
    rowHeight?: number;
    /**
     * Vertical alignment of grid items (align-items).
     * @default 'stretch'
     */
    align?: GridAlignment;
    /**
     * Horizontal alignment of grid items (justify-items).
     * @default 'stretch'
     */
    justify?: GridAlignment;
    /**
     * Content to render inside the grid.
     */
    children?: ReactNode;
}
/**
 * Grid component for CSS Grid-based layouts.
 *
 * Supports fixed-column and responsive layouts via the `columns` prop:
 * - `columns={3}` — fixed 3-column grid
 * - `columns={{minWidth: 280}}` — responsive auto-fill (consistent widths)
 * - `columns={{minWidth: 280, repeat: 'fit'}}` — responsive auto-fit (stretch)
 * - `columns={{minWidth: 280, max: 4}}` — responsive, capped at 4 columns
 *
 * @example
 * ```
 * <Grid columns={3} gap={4}>
 *   <Item />
 *   <Item />
 *   <Item />
 * </Grid>
 * ```
 */
export declare function Grid({ columns, rowHeight, width, height, maxWidth, minHeight, gap, rowGap, columnGap, align, justify, xstyle, className, style, children, ref, ...props }: GridProps): import("react").JSX.Element;
export declare namespace Grid {
    var displayName: string;
}
//# sourceMappingURL=Grid.d.ts.map