import { default as React, ElementType, ComponentPropsWithoutRef, JSX } from 'react';
import { DOMContext, LayoutType, ContextAwareBoxProps } from './types';
/**
 * Props for polymorphic ContextAwareBox.
 */
export type PolymorphicContextAwareBoxProps<E extends ElementType> = ContextAwareBoxProps & {
    as?: E;
} & Omit<ComponentPropsWithoutRef<E>, keyof ContextAwareBoxProps>;
/**
 * Extended context information specific to the box.
 */
export interface BoxContext extends DOMContext {
    /** The box's own layout type */
    ownLayoutType: LayoutType;
    /** Whether this box is the nearest layout ancestor for children */
    isLayoutRoot: boolean;
    /** Depth in the context tree */
    contextDepth: number;
}
/**
 * Callback for context ready event.
 */
export type OnContextReadyCallback = (context: DOMContext, element: HTMLElement) => void;
/**
 * Forwarded ref version of ContextAwareBox.
 */
export declare const ContextAwareBox: <E extends ElementType = "div">(props: PolymorphicContextAwareBoxProps<E> & {
    ref?: React.ForwardedRef<HTMLElement>;
}) => JSX.Element;
/**
 * Props for FlexBox component.
 */
export interface FlexBoxProps extends Omit<ContextAwareBoxProps, 'layoutHint' | 'as'> {
    /** Flex direction */
    direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
    /** Justify content */
    justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
    /** Align items */
    align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline';
    /** Flex wrap */
    wrap?: boolean | 'reverse';
    /** Gap between items */
    gap?: number | string;
}
/**
 * Context-aware flex container.
 *
 * @example
 * ```tsx
 * <FlexBox direction="column" justify="center" gap={16}>
 *   <Item />
 *   <Item />
 * </FlexBox>
 * ```
 */
export declare function FlexBox({ direction, justify, align, wrap, gap, style, ...props }: FlexBoxProps): JSX.Element;
/**
 * Props for GridBox component.
 */
export interface GridBoxProps extends Omit<ContextAwareBoxProps, 'layoutHint' | 'as'> {
    /** Number of columns or template string */
    columns?: number | string;
    /** Number of rows or template string */
    rows?: number | string;
    /** Gap between items */
    gap?: number | string;
    /** Row gap */
    rowGap?: number | string;
    /** Column gap */
    columnGap?: number | string;
    /** Auto flow direction */
    autoFlow?: 'row' | 'column' | 'dense' | 'row dense' | 'column dense';
}
/**
 * Context-aware grid container.
 *
 * @example
 * ```tsx
 * <GridBox columns={3} gap={16}>
 *   <Item />
 *   <Item />
 *   <Item />
 * </GridBox>
 * ```
 */
export declare function GridBox({ columns, rows, gap, rowGap, columnGap, autoFlow, style, ...props }: GridBoxProps): JSX.Element;