/**
 * Resizable split pane component
 *
 * Two-panel layout with draggable resize handle.
 * On mobile (<1024px), switches to tabs.
 */
import { type ReactNode } from 'react';
export type ResizableSplitPaneProps = {
    /**
     * Left panel content
     */
    left: ReactNode;
    /**
     * Right panel content
     */
    right: ReactNode;
    /**
     * Default split percentage (0-100)
     * @default 40
     */
    defaultSplit?: number;
    /**
     * Minimum left panel width in pixels
     * @default 300
     */
    minLeftWidth?: number;
    /**
     * Minimum right panel width in pixels
     * @default 400
     */
    minRightWidth?: number;
    /**
     * Left panel label (for mobile tabs)
     * @default 'Editor'
     */
    leftLabel?: string;
    /**
     * Right panel label (for mobile tabs)
     * @default 'Preview'
     */
    rightLabel?: string;
    /**
     * Default active tab on mobile
     * @default 'left'
     */
    defaultTab?: 'left' | 'right';
    /**
     * Container className
     */
    className?: string;
    /**
     * Optional className override for the desktop left pane container.
     */
    leftPaneClassName?: string;
    /**
     * Optional className override for the desktop right pane container.
     */
    rightPaneClassName?: string;
    /**
     * Callback when split percentage changes
     */
    onSplitChange?: (splitPercent: number) => void;
    /**
     * Controlled split percentage (makes component controlled)
     */
    splitPercent?: number;
};
export declare function ResizableSplitPane({ left, right, defaultSplit, minLeftWidth, minRightWidth, leftLabel, rightLabel, defaultTab, className, leftPaneClassName, rightPaneClassName, onSplitChange, splitPercent: controlledSplitPercent, }: ResizableSplitPaneProps): import("react/jsx-runtime").JSX.Element;
