import "./stack.css";
import type * as React from "react";
import { type ReactNode } from "react";
import { useRender } from "@base-ui/react/use-render";
import { type StyleProps } from "./style_props";
import { type SpaceName } from "./box";
interface StackBase extends StyleProps {
    children?: ReactNode;
    /** The gutter between children — a rung, never a number. On a grid
     *  (`columns`) and on a wrapping row it is BOTH axes; `gapX` / `gapY` override
     *  it on one. */
    gap?: SpaceName;
    /** The gutter BETWEEN COLUMNS, overriding `gap` on that axis — the same
     *  shorthand-then-axis pair `Box` spells as `padding` / `paddingX`. */
    gapX?: SpaceName;
    /**
     * The gutter BETWEEN ROWS, overriding `gap` on that axis.
     *
     * The two axes are not one question. A form grid wants a wide gutter between
     * its columns and NOTHING between its rows, because `FormField` already
     * carries the rhythm that separates one field from the next — with a single
     * knob, the only setting that opened the columns also paid that rhythm twice,
     * and the only setting that closed the rows also collided them.
     */
    gapY?: SpaceName;
    align?: "start" | "center" | "end" | "stretch" | "baseline";
    justify?: "start" | "center" | "end" | "between";
    testID?: string;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/**
 * ONE AXIS, OR EQUAL COLUMNS — never both, because a grid has no single
 * direction to run along, nothing to wrap, and no gap between siblings to draw a
 * hairline in: a `Divider` there would take a cell of its own.
 */
type StackFlow = {
    /** The axis. A row is the exception; a column is what a screen is made of. */
    direction?: "row" | "column";
    wrap?: boolean;
    /**
     * A hairline between children. The gap sits on BOTH sides of it, so a
     * divided stack needs no second spacing knob — set `gap` to the air you want.
     */
    divided?: boolean;
    columns?: never;
} | {
    /**
     * Lay the children out as equal COLUMNS — a card deck, a stat row, a
     * picker's tiles. A number fixes the count; `{ minWidth }` fits as many as
     * the CONTAINER affords and reflows on its own, which is what a deck
     * usually wants: a count set for a wide screen squeezes every cell on a
     * narrow one, and the reflow is free.
     */
    columns: number | {
        minWidth: number;
    };
    direction?: never;
    wrap?: never;
    divided?: never;
};
export type StackProps = StackBase & StackFlow;
/**
 * Linear layout: children on one axis, one gutter between them, optionally
 * separated by a hairline — or, with `columns`, as equal peers across a grid.
 *
 * Null/false children are dropped, so a conditional child never leaves a stray
 * hairline behind it.
 */
export declare function Stack({ children, direction, gap, gapX, gapY, align, justify, wrap, divided, columns, testID, render, ref, ...props }: StackProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
export {};