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 = "chapter" | "broad" | "ample" | "apart" | "page" | "panel" | "section" | "loose" | "generous" | "spacious" | "airy" | "relaxed" | "roomy" | "cozy" | "balanced" | "comfortable" | "nested" | "snug" | "close" | "compact" | "dense" | "tight" | "fine" | "flush";
export type Justify = "start" | "center" | "end" | "between" | "around" | "evenly";
export type Align = "alignStart" | "alignCenter" | "alignEnd" | "baseline" | "stretch";
export type Pad = "padTight" | "pad" | "padLoose";
export type Inset = "insetIdentity" | "insetActions" | "insetTheme" | "insetStatus" | "insetTabs";
export interface FlexProps {
    children?: ReactNode;
    rowsTight?: boolean;
    rowsComfortable?: boolean;
    rowsSnug?: boolean;
    rowsCozy?: boolean;
    rowsSection?: boolean;
    /**
     * A wrapped or stacked row's vertical gap of 28, apart from its main gap: the hand-off's
     * section hero (`gap:28px 40px`), whose halves sit 40 apart beside each other and 28
     * apart once stacked.
     */
    rowsPanel?: boolean;
    /** Application identity header inset. */
    insetIdentity?: boolean;
    /** Application action footer inset. */
    insetActions?: boolean;
    /** Theme controls inset. */
    insetTheme?: boolean;
    /** Status band inset. */
    insetStatus?: boolean;
    /** Navigation close controls inset. */
    insetTabs?: boolean;
    fine?: boolean;
    dense?: boolean;
    compact?: boolean;
    close?: boolean;
    nested?: boolean;
    comfortable?: boolean;
    balanced?: boolean;
    roomy?: boolean;
    airy?: boolean;
    spacious?: boolean;
    generous?: boolean;
    section?: boolean;
    panel?: boolean;
    page?: boolean;
    /** The step between side-by-side panels of one composition (32), the hand-off's widest grid gap. */
    apart?: boolean;
    /**
     * The step between a section page's hero and the body under it, and between the hero's
     * halves (40): the hand-off's section pages (`gap:28px 40px` on the hero,
     * `margin-bottom:40px` under it).
     */
    ample?: boolean;
    /** The gap between the two halves of a page-wide split (48): the hand-off's hero grid. */
    broad?: boolean;
    /**
     * The widest gap step (64): the space between a page's chapters, the major
     * sections of a long docs page (a component detail page's Playground, Props
     * and Examples), wider than `page` so each chapter reads as its own block.
     * Wins over every other gap step.
     */
    chapter?: boolean;
    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;
    /**
     * Let this box shrink below its own content width when the line runs out of
     * room (`flexShrink: 1`), so a long text child wraps instead of overflowing.
     *
     * React Native gives every box `flexShrink: 0`, which is the opposite of the
     * web's flex default: inside a Row, a Column holding a sentence keeps its
     * MAX-CONTENT width and spills past the row's edge, where the nearest
     * clipping ancestor cuts it mid-word. `shrink` is the opt-in that hands the
     * row's width back to the text. Reach for it on the copy in a
     * heading-beside-actions row, a label beside a control, any Row child whose
     * width should follow the row rather than its own longest line.
     *
     * It is not `fill`. `fill` (flex: 1) also zeroes the flex BASIS, so in a
     * `wrap` row every child then fits on one line and the actions stop wrapping
     * below the copy; `shrink` leaves the basis at the content size, so the row
     * still breaks where it did and only the over-wide child gives way.
     * Redundant alongside `fill`, which already shrinks.
     */
    shrink?: 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;
    /**
     * Width in twelfths of the parent Row (Bootstrap `.col-n`): `span={6}` is half
     * the row, `span={4}` a third, `span={12}` the full width. The Row measures its
     * own width and gives this box a px cell, gaps included in the arithmetic, so
     * two `span={6}` children plus the gap between them fill the row exactly. Spans
     * over twelve wrap onto the next line. A Row with `stacks` ignores spans once it
     * has stacked (every child is then full width). Only meaningful on a direct
     * child of a Row (DEV warns elsewhere); in a Column, a width is a Container
     * step. A child without a span, `fill`, or `grow` hugs its content
     * (`.col-auto`): a fill component inside it collapses, so give it one of those.
     */
    span?: number;
    /**
     * A share of the parent Row's free width, CSS grid's `minmax(0, Nfr)`: siblings with
     * `weight={1.7}` and `weight={1}` split the row 1.7 to 1 after the gap, whatever their
     * content, and neither holds a content floor. It is the split a ratio of twelfths cannot
     * name (the Canvas v4 component page's anatomy is 1.7 to 1, where `span` gives 7 to 5).
     * A positive number; it replaces `fill` and `grow` on the same box, and a box takes a
     * `span` or a `weight`, not both. Only meaningful on a direct child of a Row (DEV warns
     * elsewhere); once a `stacks` Row has stacked, the box is the whole line and the weight
     * is ignored.
     */
    weight?: number;
    /**
     * 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;
    /**
     * Layout containers are the exception to the no-sizing rule: for sizing and
     * composition only (a `maxWidth` on a shell, a `flex` inside an app frame),
     * 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`.
     * Prefer a Container step or a `span` where one fits.
     */
    style?: StyleProp<ViewStyle>;
}
export declare function gapOf(p: Pick<FlexProps, Gap>): Gap;
export declare function rowGapOf(props: FlexProps): number | null;
export declare function insetOf(p: FlexProps): Inset | null;
export declare function justifyOf(p: FlexProps): Justify;
export declare function alignOf(p: FlexProps): Align;
export declare function padOf(p: FlexProps): Pad | null;
/** 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