import { type Except } from "type-fest";
import { type Styles } from "../core/styles.js";
import { type DOMElement } from "../core/dom.js";
/**
 * Props for the Box component.
 */
export type BoxProps = Except<Styles, "textWrap"> & {
    /**
     * A label for the element for screen readers.
     */
    readonly "aria-label"?: string;
    /**
     * Hide the element from screen readers.
     */
    readonly "aria-hidden"?: boolean;
    /**
     * The role of the element.
     */
    readonly "aria-role"?: "button" | "checkbox" | "combobox" | "list" | "listbox" | "listitem" | "menu" | "menuitem" | "option" | "progressbar" | "radio" | "radiogroup" | "tab" | "tablist" | "table" | "textbox" | "timer" | "toolbar";
    /**
     * The state of the element.
     */
    readonly "aria-state"?: {
        readonly busy?: boolean;
        readonly checked?: boolean;
        readonly disabled?: boolean;
        readonly expanded?: boolean;
        readonly multiline?: boolean;
        readonly multiselectable?: boolean;
        readonly readonly?: boolean;
        readonly required?: boolean;
        readonly selected?: boolean;
    };
};
/**
 * `<Box>` is an essential Tinky component to build your layout. It's like
 * `<div style="display: flex">` in the browser.
 *
 * @example
 * ```tsx
 * import {render, Box, Text} from 'tinky';
 *
 * render(
 *   <Box margin={2}>
 *     <Text>This is a box with margin</Text>
 *   </Box>
 * );
 * ```
 *
 * @example
 * ```tsx
 * import {render, Box, Text} from 'tinky';
 *
 * render(
 *   <Box flexDirection="column">
 *     <Text>Item 1</Text>
 *     <Text>Item 2</Text>
 *   </Box>
 * );
 * ```
 */
export declare const Box: import("react").ForwardRefExoticComponent<{
    readonly position?: "absolute" | "relative" | undefined;
    readonly columnGap?: number | undefined;
    readonly rowGap?: number | undefined;
    readonly gap?: number | undefined;
    readonly margin?: number | undefined;
    readonly marginX?: number | undefined;
    readonly marginY?: number | undefined;
    readonly marginTop?: number | undefined;
    readonly marginBottom?: number | undefined;
    readonly marginLeft?: number | undefined;
    readonly marginRight?: number | undefined;
    readonly padding?: number | undefined;
    readonly paddingX?: number | undefined;
    readonly paddingY?: number | undefined;
    readonly paddingTop?: number | undefined;
    readonly paddingBottom?: number | undefined;
    readonly paddingLeft?: number | undefined;
    readonly paddingRight?: number | undefined;
    readonly flexGrow?: number | undefined;
    readonly flexShrink?: number | undefined;
    readonly flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | undefined;
    readonly flexBasis?: number | string | undefined;
    readonly flexWrap?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
    readonly alignItems?: "flex-start" | "center" | "flex-end" | "stretch" | "start" | "end" | undefined;
    readonly alignSelf?: "flex-start" | "center" | "flex-end" | "auto" | "start" | "end" | undefined;
    readonly justifyContent?: "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | "center" | "start" | "end" | undefined;
    readonly alignContent?: "flex-start" | "flex-end" | "space-between" | "space-around" | "stretch" | "center" | "space-evenly" | "start" | "end" | undefined;
    readonly justifyItems?: "flex-start" | "end" | "flex-end" | "center" | "stretch" | undefined;
    readonly justifySelf?: "auto" | "flex-start" | "end" | "flex-end" | "center" | "stretch" | undefined;
    readonly width?: number | string | undefined;
    readonly height?: number | string | undefined;
    readonly minWidth?: number | string | undefined;
    readonly minHeight?: number | string | undefined;
    readonly display?: "flex" | "grid" | "none" | undefined;
    readonly borderStyle?: (keyof import("../index.js").Boxes | import("../index.js").BoxStyle) | undefined;
    readonly borderTop?: boolean | undefined;
    readonly borderBottom?: boolean | undefined;
    readonly borderLeft?: boolean | undefined;
    readonly borderRight?: boolean | undefined;
    readonly borderColor?: import("type-fest").LiteralUnion<import("ansi-styles").ForegroundColorName, string> | undefined;
    readonly borderTopColor?: import("type-fest").LiteralUnion<import("ansi-styles").ForegroundColorName, string> | undefined;
    readonly borderBottomColor?: import("type-fest").LiteralUnion<import("ansi-styles").ForegroundColorName, string> | undefined;
    readonly borderLeftColor?: import("type-fest").LiteralUnion<import("ansi-styles").ForegroundColorName, string> | undefined;
    readonly borderRightColor?: import("type-fest").LiteralUnion<import("ansi-styles").ForegroundColorName, string> | undefined;
    readonly borderDimColor?: boolean | undefined;
    readonly borderTopDimColor?: boolean | undefined;
    readonly borderBottomDimColor?: boolean | undefined;
    readonly borderLeftDimColor?: boolean | undefined;
    readonly borderRightDimColor?: boolean | undefined;
    readonly overflow?: "visible" | "hidden" | undefined;
    readonly overflowX?: "visible" | "hidden" | undefined;
    readonly overflowY?: "visible" | "hidden" | undefined;
    readonly backgroundColor?: import("type-fest").LiteralUnion<import("ansi-styles").ForegroundColorName, string> | undefined;
    readonly gridTemplateColumns?: (import("taffy-layout").GridTemplateComponent | number)[] | undefined;
    readonly gridTemplateRows?: (import("taffy-layout").GridTemplateComponent | number)[] | undefined;
    readonly gridAutoColumns?: (import("taffy-layout").TrackSizingFunction | number)[] | undefined;
    readonly gridAutoRows?: (import("taffy-layout").TrackSizingFunction | number)[] | undefined;
    readonly gridAutoFlow?: "row" | "column" | "row-dense" | "column-dense" | undefined;
    readonly gridRow?: import("taffy-layout").Line<import("taffy-layout").GridPlacement> | undefined;
    readonly gridColumn?: import("taffy-layout").Line<import("taffy-layout").GridPlacement> | undefined;
    readonly gridTemplateAreas?: import("taffy-layout").GridTemplateArea[] | undefined;
} & {
    /**
     * A label for the element for screen readers.
     */
    readonly "aria-label"?: string;
    /**
     * Hide the element from screen readers.
     */
    readonly "aria-hidden"?: boolean;
    /**
     * The role of the element.
     */
    readonly "aria-role"?: "button" | "checkbox" | "combobox" | "list" | "listbox" | "listitem" | "menu" | "menuitem" | "option" | "progressbar" | "radio" | "radiogroup" | "tab" | "tablist" | "table" | "textbox" | "timer" | "toolbar";
    /**
     * The state of the element.
     */
    readonly "aria-state"?: {
        readonly busy?: boolean;
        readonly checked?: boolean;
        readonly disabled?: boolean;
        readonly expanded?: boolean;
        readonly multiline?: boolean;
        readonly multiselectable?: boolean;
        readonly readonly?: boolean;
        readonly required?: boolean;
        readonly selected?: boolean;
    };
} & {
    children?: import("react").ReactNode | undefined;
} & import("react").RefAttributes<DOMElement>>;