import "./split_row.css";
import { type ReactNode } from "react";
import type * as React from "react";
import { useRender } from "@base-ui/react/use-render";
import { type StyleProps } from "./style_props";
export interface SplitRowProps extends StyleProps {
    /** `SplitPane`s. Anything else is laid out as an unweighted child. */
    children: ReactNode;
    /** Gap between panes, in both directions. Default 16 — the dashboard band gap. */
    gap?: number;
    /**
     * Keep the panes on one line no matter how narrow the container gets. For a
     * row whose halves are meaningless apart — a value beside the unit it is in,
     * a control beside the field it edits. Never for two cards.
     */
    never?: boolean;
    testID?: string;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
export interface SplitPaneProps extends StyleProps {
    children: ReactNode;
    /**
     * Share of the ROW's width, as `flex`. Dropped entirely once the row stacks,
     * which is the whole reason this component exists — see below.
     */
    weight?: number;
    testID?: string;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/**
 * Two or more panes side by side that STACK when the container is phone-narrow.
 *
 * It exists because the hand-rolled version has a failure mode that measures
 * clean and is invisible in review: `flex` distributes along the MAIN axis, so
 * the moment a `flex-direction: row` becomes `column`, `flex: 3` and `flex: 2`
 * stop dividing the WIDTH and start dividing the HEIGHT. The pane
 * that asked for less is clipped mid-content; the one that asked for more
 * carries a gap under it. Both read as bugs in the panes rather than in the
 * row, so the fix gets aimed at the wrong component.
 *
 * The second trap is the condition, and the sheet owns it so no caller has to
 * get it right: `medium` spans 768–1727 — an ordinary desktop, not a narrow one
 * — so a row that stacks on anything but `< 768px` collapses for nearly every
 * reader while measuring perfectly at the one width nobody uses.
 *
 *   <SplitRow>
 *     <SplitPane weight={3}><Card>…</Card></SplitPane>
 *     <SplitPane weight={2}><Card>…</Card></SplitPane>
 *   </SplitRow>
 *
 * Panes are `stretch`ed to equal height while side by side, which is what makes
 * a row of cards read as one band. A pane with far less content than its
 * neighbour will show that as white space — the answer is to give it the fact
 * it is missing (a denominator, a comparison), not to unstretch the row.
 */
export declare function SplitRow({ children, gap, never, testID, render, ref, ...props }: SplitRowProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
/**
 * One pane: a share of the row, and nothing else.
 *
 * It is NOT a `SizeBoundary`. A pane's width is the row's to divide, and only
 * the CALLER knows whether the row was given one — inline-size containment
 * zeroes what the contents contribute, so a row inside a shrink-wrapped box (a
 * popover panel, a menu, a `fit-content` card) collapses to its gaps: measured,
 * 285.9px of panes became 0 either side of a 16px gap. A component cannot make
 * that promise for its caller, so where a pane's contents must answer to the
 * PANE rather than to the enclosing region — a chart in a 2-of-5 pane, a nested
 * `SplitRow` — wrap them in a `SizeBoundary`, which is the caller saying this box
 * owns its width.
 */
export declare function SplitPane({ children, weight, testID, render, ref, ...props }: SplitPaneProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;