import { CSSProperties, ElementType, HTMLAttributes, ReactNode } from 'react';
import { BaseColor, BorderColor, ElementBorder, ElementElevation, ElementFont, ElementShape, WrapperProps } from '../../utils';
/**
 * Layout mode for {@link BoxBase}.
 *
 * @remarks
 * Determines how children are arranged:
 * - `'flex'` — flex container
 * - `'grid'` — grid container
 * - `'block'` — block or inline-block element
 *
 * @category Box
 */
export type BoxType = 'flex' | 'grid' | 'block';
/**
 * Direction value used by layout-related props.
 *
 * @category Box
 */
export type BoxDirection = 'row' | 'col';
/**
 * Props for {@link BoxBase}.
 *
 * @remarks
 * Provides full control over layout, spacing, shape, elevation,
 * borders and flex/grid behaviour. All props are optional.
 *
 * @category Box
 */
export interface BoxBaseProps extends Omit<HTMLAttributes<HTMLElement>, 'color' | 'content'>, WrapperProps {
    /** Maps to `align-content` (grid/flex-wrap content alignment). */
    alignContent?: CSSProperties['alignContent'];
    /** Maps to `align-items` (cross-axis alignment). */
    alignItems?: CSSProperties['alignItems'];
    /** Custom HTML element/component. Default: `div`. */
    as?: ElementType;
    /** Border width (0–5). */
    border?: ElementBorder;
    /** Border color token. */
    borderColor?: BorderColor;
    /** React children inside the box. */
    children?: ReactNode;
    /** Surface background token. Default: `'surface'`. */
    color?: BaseColor;
    /** Grid template columns (`3` → `repeat(3, 1fr)`). */
    cols?: number | string;
    /** Layout direction (`row` or `col`) for flex. */
    direction?: BoxDirection;
    /** Native disabled attribute. Applied when supported by the rendered element. */
    disabled?: boolean;
    /** Semantic UUI element class (e.g. 'uui-section', 'uui-footer'). */
    elementClass?: string;
    /** Elevation level (0–5). */
    elevation?: ElementElevation;
    /** Auto-placement flow direction for grid layouts. */
    flow?: BoxDirection;
    /** Font token controlling typography (size, weight, line-height). */
    font?: ElementFont;
    /** Forces full height (100%). */
    fullHeight?: boolean;
    /** Forces full width (100%). */
    fullWidth?: boolean;
    /** Gap between children (flex/grid). */
    gap?: number | string;
    /** Horizontal gap (`column-gap`). */
    gapX?: number | string;
    /** Vertical gap (`row-gap`). */
    gapY?: number | string;
    /** Enables flex-grow (fills remaining space). */
    grow?: boolean;
    /** Height. */
    height?: number | string;
    /** Renders as `inline-flex`, `inline-grid` or `inline-block`. */
    inline?: boolean;
    /** Maps to `justify-content` (main-axis alignment). */
    justifyContent?: CSSProperties['justifyContent'];
    /** Maximum height. */
    maxHeight?: number | string;
    /** Maximum width. */
    maxWidth?: number | string;
    /** Minimum height. */
    minHeight?: number | string;
    /** Minimum width. */
    minWidth?: number | string;
    /** Maps to `overflow`. */
    overflow?: CSSProperties['overflow'];
    /** Maps to `overflow-x`. */
    overflowX?: CSSProperties['overflowX'];
    /** Maps to `overflow-y`. */
    overflowY?: CSSProperties['overflowY'];
    /** Padding (all sides). */
    p?: number | string;
    /** Padding bottom. */
    pb?: number | string;
    /** Padding left. */
    pl?: number | string;
    /** Maps to `place-items` (grid shortcut for align+justify items). */
    placeItems?: CSSProperties['placeItems'];
    /** Padding right. */
    pr?: number | string;
    /** Padding top. */
    pt?: number | string;
    /** Horizontal padding (`padding-left` + `padding-right`). */
    px?: number | string;
    /** Vertical padding (`padding-top` + `padding-bottom`). */
    py?: number | string;
    /** Grid template rows (`2` → `repeat(2, 1fr)`). */
    rows?: number | string;
    /** Shape/border-radius token (round, rounded, smooth, square). */
    shape?: ElementShape;
    /** Layout mode (`flex`, `grid`, `block`). Default: `flex`. */
    type?: BoxType;
    /** Width. */
    width?: number | string;
    /** Enables wrapping (`flex-wrap: wrap`). */
    wrap?: boolean;
}
/**
 * `BoxBase` — core layout primitive powering semantic containers
 * (`Box`, `Flex`, `Grid`, `Section`, `Article`, `Aside`, `Header`, `Footer`, `Nav`, …).
 *
 * Provides low-level control over layout (flex, grid, block),
 * spacing, alignment, wrapping, elevation, borders, shape, and surface color.
 * This component does **not** impose visual design — higher-level
 * components add semantics, but rely on `BoxBase` for structure.
 *
 * Accepts both semantic styling props (color, shape, elevation)
 * and layout utilities (padding, gap, direction, wrap, justify, align).
 *
 * @function
 * @param props - Component properties.
 *
 * @example
 * ```tsx
 * <BoxBase p={16} gap={8} direction="col" elevation={2}>
 *   <Item />
 *   <Item />
 * </BoxBase>
 * ```
 *
 * @category Box
 */
export declare const BoxBase: import('react').ForwardRefExoticComponent<BoxBaseProps & import('react').RefAttributes<HTMLElement>>;