import { JSX, ReactNode } from 'react';
type PaneSide = 'first' | 'second';
type SplitPaneDirection = 'horizontal' | 'vertical';
export interface SplitPaneProps {
    /** Content of the first (left in horizontal, top in vertical) pane. */
    first: ReactNode;
    /** Content of the second (right in horizontal, bottom in vertical) pane. */
    second: ReactNode;
    /** Layout axis: `horizontal` places panes side by side, `vertical` stacks them. */
    direction: SplitPaneDirection;
    /** Draws an accent ring around the given pane to mark it as active. */
    highlightedSide?: PaneSide;
    /** When provided, renders a close button on the divider. */
    onClose?: () => void;
    /**
     * Initial size of the first pane as a percentage of the container, clamped to `minRatio`–`maxRatio`.
     * @default 50
     */
    initialRatio?: number;
    /**
     * Minimum size of the first pane, as a percentage of the container.
     * @default 20
     */
    minRatio?: number;
    /**
     * Maximum size of the first pane, as a percentage of the container.
     * @default 80
     */
    maxRatio?: number;
    /** Called with the final ratio (%) when a drag or keyboard adjustment event ends. */
    onRatioChange?: (ratio: number) => void;
}
export declare const SplitPane: {
    (props: SplitPaneProps): JSX.Element;
    displayName: string;
};
export default SplitPane;