import React from 'react';
export type SplitPaneOrientation = 'horizontal' | 'vertical';
export type SplitPaneCollapse = 'tablet' | 'mobile' | 'never';
export interface SplitPaneProps {
    /** The first pane: the start side, or the top. Its size is the value. */
    start: React.ReactNode;
    /** The second pane, which takes the rest. */
    end: React.ReactNode;
    /**
     * `horizontal` puts the panes side by side with a vertical divider;
     * `vertical` stacks them with a horizontal one. A vertical split needs a
     * height from its container.
     */
    orientation?: SplitPaneOrientation;
    /**
     * The divider's name, and so the resize control's: "Resize the run list".
     * It names what moving it changes — the first pane.
     */
    label: string;
    /** The first pane's share, in percent, for an uncontrolled split. Default 50. */
    defaultSize?: number;
    /** The first pane's share, in percent, controlled. Pair with `onSizeChange`. */
    size?: number;
    /** Fires with the new share, in percent, rounded to a whole number. */
    onSizeChange?: (size: number) => void;
    /** The smallest share the first pane can be given. Default 20. */
    minSize?: number;
    /** The largest share. Default 80. */
    maxSize?: number;
    /**
     * The breakpoint at and below which a side-by-side split stacks, and the
     * divider goes: `mobile` (767px) by default, `tablet` (1023px), or
     * `never`. Grid's breakpoints. A vertical split never collapses.
     */
    collapse?: SplitPaneCollapse;
    className?: string;
    style?: React.CSSProperties;
}
/**
 * SplitPane — two panes and a divider between them that a person moves.
 *
 * THE WINDOW-SPLITTER PATTERN
 *
 * The divider is a focusable `separator` whose value is the first pane's
 * share, 0 to 100, bounded by `minSize` and `maxSize`, and it controls that
 * pane (`aria-controls`). The arrow keys along its axis move it, Shift for
 * a bigger step; Home and End go to the bounds; a double-click, or Enter,
 * puts it back where it started. The same handle Table's column resize is.
 *
 * PERCENT, NOT PIXELS
 *
 * The share survives the window being resized, and the value a screen
 * reader announces means something without knowing the width.
 *
 * ONE COLUMN ON A PHONE
 *
 * Side by side, two panes on a phone are two unreadable strips. At the
 * `collapse` breakpoint they stack and the divider is removed — from the
 * tab order too, since `display: none` takes it out.
 */
export declare function SplitPane({ start, end, orientation, label, defaultSize, size: sizeProp, onSizeChange, minSize, maxSize, collapse, className, style, }: SplitPaneProps): React.JSX.Element;
export declare namespace SplitPane {
    var displayName: string;
}
//# sourceMappingURL=SplitPane.d.ts.map