import React from 'react';
export type SidePanelSize = 'sm' | 'md' | 'lg';
export interface SidePanelProps {
    isOpen?: boolean;
    defaultOpen?: boolean;
    /** `false` when the panel asks to close — its close button, or Escape. */
    onOpenChange?: (isOpen: boolean) => void;
    /** Required: names the region, and is where focus lands on open. */
    title: React.ReactNode;
    description?: React.ReactNode;
    /** Actions pinned to the bottom edge. */
    footer?: React.ReactNode;
    children?: React.ReactNode;
    /** 22rem, 30rem or 40rem — Drawer's sizes. */
    size?: SidePanelSize;
    /** The title's heading level. Default 2. */
    headingLevel?: 2 | 3 | 4;
    showClose?: boolean;
    closeLabel?: string;
    /**
     * Focus the title on open. Default `true`. `false` when the panel opens
     * because of where focus already is — a List whose selection follows focus,
     * where tabbing in selects the first row — so focus stays in the list and
     * the next ↓ still reaches the next row. Tab from the list reaches the
     * panel, which comes next in the DOM. Below `overlayBelow` it opens as a
     * Drawer, which is modal and always takes focus.
     */
    autoFocus?: boolean;
    /**
     * Below this viewport width, in px, there is no room beside the content and
     * the panel opens as a Drawer instead — modal, because it covers what it
     * would have sat beside. Default 768. `false` never switches.
     */
    overlayBelow?: number | false;
    id?: string;
    className?: string;
}
/**
 * SidePanel — detail that opens beside the content, and leaves it usable.
 *
 * WHY NOT A DRAWER
 *
 * A Drawer is a modal dialog: it traps focus, marks the page inert and tells
 * a screen reader the page behind is gone. A detail pane beside a list is the
 * opposite — the list stays live, the next row can be picked with the pane
 * open, and saying "dialog" about it would be a lie about where the user can
 * go. Same reasoning as ApprovalGate not being a Modal: the page is the
 * context.
 *
 * HOW IT BEHAVES
 *
 *   - A `<section>` region named by its title, rendered in place — not
 *     portalled — so it is part of the page's layout and reading order. Put
 *     it in a SidePanelLayout beside the content.
 *   - Opening focuses the title — unless `autoFocus={false}`, for a panel
 *     that follows a List's selection. Closing with focus inside returns it
 *     to the last thing focused outside the panel. Changing its content
 *     does neither.
 *   - Escape closes it from inside; Escape elsewhere is the page's own.
 *   - No focus trap, no scrim, nothing hidden. Closed, it renders nothing.
 *   - Below `overlayBelow` (768px) there is no "beside": the panel would
 *     cover the list, so it opens as a Drawer — modal, honestly so.
 */
export declare function SidePanel(props: SidePanelProps): React.JSX.Element | null;
export declare namespace SidePanel {
    var displayName: string;
}
export interface SidePanelLayoutProps {
    /** The content first, then the SidePanel — reading order is DOM order. */
    children: React.ReactNode;
    className?: string;
}
/**
 * The row a SidePanel sits in: content, then panel. The content column gets
 * `min-width: 0`, without which a wide Table beside the panel pushes it off
 * screen instead of scrolling inside its own container.
 */
export declare function SidePanelLayout({ children, className }: SidePanelLayoutProps): React.JSX.Element;
export declare namespace SidePanelLayout {
    var displayName: string;
}
//# sourceMappingURL=SidePanel.d.ts.map