/** Layout tier — themed containers (W2 §The Kit). */
import { type PropsWithChildren, type ReactNode } from "react";
import { type KitDensity, type KitStyled, type KitTone } from "./tokens.js";
export interface StackProps extends KitStyled {
    gap?: number;
    density?: KitDensity;
    grow?: boolean | number;
}
/** Vertical flow. */
export declare function Stack({ gap, density, grow, style, children }: PropsWithChildren<StackProps>): import("react").JSX.Element;
export interface RowProps extends KitStyled {
    gap?: number;
    align?: "start" | "center" | "end" | "stretch";
    justify?: "start" | "center" | "end" | "between";
    wrap?: boolean;
    density?: KitDensity;
    grow?: boolean | number;
}
/** Horizontal flow. */
export declare function Row({ gap, align, justify, wrap, density, grow, style, children }: PropsWithChildren<RowProps>): import("react").JSX.Element;
export interface GridProps extends KitStyled {
    /** A FIXED column count, kept at every width — which is what CLIPS on a narrow
     *  screen. Name it only where the layout genuinely needs the count; left out,
     *  the cells wrap. */
    columns?: number;
    /** Narrowest a cell may get, in px. Wins over `columns`, and
     *  {@link BARE_MIN_CHILD_WIDTH} is what a bare Grid uses. */
    minChildWidth?: number;
    gap?: number;
    density?: KitDensity;
    grow?: boolean | number;
}
/** Equal-width columns, wrapping to fit. */
export declare function Grid({ columns, minChildWidth, gap, density, grow, style, children }: PropsWithChildren<GridProps>): import("react").JSX.Element;
export interface SplitPaneProps extends KitStyled {
    /** The first pane's width: a CSS length ("40%", "18rem", "280px"), or px as a
     *  bare number. A number below 1 is still read as a share of the split. */
    size?: number | string;
}
/**
 * Two panes side by side, at any width.
 *
 * The one arrangement the Kit could not express: Row and Grid both WRAP, which
 * is right for stats and buttons and wrong for a list beside the thing it opens
 * — the pair a screen is asked for whenever the ask says "and". Asked for one on
 * a narrow frame, a screen wrote raw CSS instead, or stacked the two and lost
 * the layout the person described.
 *
 * So this one never wraps: the panes are grid TRACKS, and an extra child becomes
 * another column rather than a second row. Each track is floored at 0 — the
 * `minmax(0, …)` CodeBlock's block needs for the same reason — so a long line or
 * a wide table inside one pane scrolls in ITS OWN pane instead of pushing the
 * other one off the frame.
 *
 * The one width where side-by-side is the wrong answer is a frame too narrow to
 * hold both: there the second pane was squeezed to a sliver and CLIPPED, so the
 * detail half of "a list beside the thing it opens" simply was not on screen.
 * Under {@link STACK_BELOW} the panes flow as rows instead — the same content,
 * one above the other, still each in its own scrolling box.
 */
export declare function SplitPane({ size, style, children }: PropsWithChildren<SplitPaneProps>): import("react").JSX.Element;
export interface SurfaceProps extends KitStyled {
    title?: string;
    tone?: KitTone;
    density?: KitDensity;
    /** Kit elements along the top edge, beside the title. */
    header?: ReactNode;
    /** Kit elements under the content — the buttons a region ends with. */
    footer?: ReactNode;
    grow?: boolean | number;
}
/** A bordered, elevated container; optional title. */
export declare function Surface({ title, tone, density, header, footer, grow, style, children }: PropsWithChildren<SurfaceProps>): import("react").JSX.Element;
export interface CardProps extends KitStyled {
    title?: string;
    /** A subtitle under the title — a string, or Kit marks where the value needs
     *  their type (a mono `branch·sha` pair rather than hand-rolled text). */
    description?: ReactNode;
    tone?: KitTone;
    density?: KitDensity;
    /** Kit elements along the top edge, beside the title. */
    header?: ReactNode;
    /** Kit elements under the content — the buttons a card ends with. */
    footer?: ReactNode;
    grow?: boolean | number;
}
/** A titled content block; Surface is the untitled/plain container. */
export declare function Card({ title, description, tone, density, header, footer, grow, style, children }: PropsWithChildren<CardProps>): import("react").JSX.Element;
export interface DividerProps extends KitStyled {
    /** A Kit mark centred in the rule, which then reads as a section break
     *  rather than as decoration. */
    label?: ReactNode;
}
/** A horizontal rule. */
export declare function Divider({ label, style }: DividerProps): import("react").JSX.Element;