import { type ReactNode } from "react";
import { type BreakpointKey, type StyleProp, type ViewStyle } from "../../style/index.js";
import { type FlexSkin } from "./layout.styles.js";
export type Direction = "row" | "column";
export type Gap = "flush" | "tight" | "snug" | "cozy" | "relaxed" | "loose";
export type Justify = "start" | "center" | "end" | "between" | "around" | "evenly";
export type Align = "alignStart" | "alignCenter" | "alignEnd" | "baseline" | "stretch";
export type Pad = "padTight" | "pad" | "padLoose";
export interface FlexProps {
    children?: ReactNode;
    flush?: boolean;
    tight?: boolean;
    snug?: boolean;
    cozy?: boolean;
    relaxed?: boolean;
    loose?: boolean;
    start?: boolean;
    center?: boolean;
    end?: boolean;
    between?: boolean;
    around?: boolean;
    evenly?: boolean;
    alignStart?: boolean;
    alignCenter?: boolean;
    alignEnd?: boolean;
    baseline?: boolean;
    stretch?: boolean;
    wrap?: boolean;
    fill?: boolean;
    grow?: boolean;
    /**
     * Responsive (Row only): render as a Column when the row's own CONTAINER is
     * at or below `stackBreakpoint` (default `sm` = 640). Container-measured with
     * a viewport seed for the first frame, so a Row inside a narrow desktop
     * column stacks too, not just on phones. When stacked, the Row IS the Column
     * with the same props: gap, justify, align, and padding apply to the new
     * axes, the default `stretch` cross-axis makes children full width, and
     * `wrap` is inert. Ignored (with a DEV warning) on Column: a Column that
     * must become a Row is a Row that stacks.
     */
    stacks?: boolean;
    /** The breakpoint at and below which `stacks` flips to a column (default
     *  `"sm"`). Only meaningful with `stacks` (DEV warns without it). */
    stackBreakpoint?: BreakpointKey;
    /**
     * Indent the whole stack by one control gutter (24: a control box plus the row
     * gap), so a nested option group lines up under its parent control's label
     * instead of its box. For nesting checkboxes/radios under a "select all" parent.
     */
    indent?: boolean;
    padTight?: boolean;
    pad?: boolean;
    padLoose?: boolean;
    /** E2E hook forwarded to the root element. */
    testID?: string;
    /**
     * For sizing/composition only (e.g. `maxWidth` to bound a responsive block),
     * never for styling or spacing: gap, margin, padding, and flex layout come from
     * the props above, and the codegen guardrail rejects those keys in `style`.
     */
    style?: StyleProp<ViewStyle>;
}
export declare function gapOf(p: Pick<FlexProps, Gap>): Gap;
/** Build a Row or Column component from a platform skin and a fixed direction. */
export declare function createFlex(skin: FlexSkin, direction: Direction): (props: FlexProps) => import("react").JSX.Element;
//# sourceMappingURL=layout.shared.d.ts.map