import "./drawer.css";
import type * as React from "react";
import { type ReactNode } from "react";
import { Dialog as Base } from "@base-ui/react/dialog";
import { useRender } from "@base-ui/react/use-render";
import { type StyleProps } from "@lotics/ui/style_props";
/**
 * The one left edge header, `DrawerScrollArea` and footer share. `DrawerScrollArea` applies it;
 * exported for mixed or pinned bodies that cannot.
 */
export declare const DRAWER_GUTTER = 20;
export interface DrawerProps extends StyleProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    /** A string renders the standard title; a node as-is. */
    title?: ReactNode;
    /**
     * Rarely set: the standard 600 fits record panels and lighter detail. Full width on small
     * screens.
     */
    width?: number | `${number}%`;
    /**
     * Steps records without closing: chevrons in the header plus ←/→ and K/J (not while typing).
     * `undefined` disables that end.
     */
    onPrev?: () => void;
    onNext?: () => void;
    /** The pair, worded by the pack (`drawer.position`). `index` is 1-based. */
    position?: {
        index: number;
        total: number;
    };
    /** What the drawer shows has a page of its own: "Open page" before the close leaves for it. */
    onOpenPage?: () => void;
    /**
     * A bare flex column, so a full-bleed child reaches the edge. Wrap content in `DrawerScrollArea`
     * for the gutter; a `DrawerFooter` goes last.
     */
    children: ReactNode;
    testID?: string;
    /**
     * Unset, the nearest `PortalHost` (whose focus trap it belongs to), else the document. `null`
     * forces the document.
     */
    container?: HTMLElement | null;
    /** Absent, whatever had it. */
    finalFocus?: Base.Popup.Props["finalFocus"];
    ref?: React.Ref<HTMLDivElement>;
    render?: Base.Popup.Props["render"];
}
/**
 * Every drawer's width unless an exceptional `width` is passed. Exported for surfaces that must
 * keep clear of it.
 */
export declare const DRAWER_WIDTH = 600;
/**
 * A right-docked panel over a scrim, for secondary content beside the main surface (a comment
 * thread, a record side-panel) where a Dialog feels heavy. Full width on small screens. Focus opens
 * on the panel, never on a control that replaces the record; Tab then walks the pager, the close,
 * the record.
 */
export declare function Drawer(props: DrawerProps): React.JSX.Element;
export interface DrawerScrollAreaProps extends StyleProps {
    children: ReactNode;
    /**
     * For a drawer that swaps its body in place: a new key opens at the top and a returning one
     * restores its offset.
     */
    scrollKey?: string;
    ref?: React.Ref<HTMLDivElement>;
    render?: useRender.RenderProp;
}
/**
 * The scrolling, guttered body, counterpart of `DialogScrollArea`. It always scrolls: a padded box
 * around a `flex:1` scroller clips the list short. Pinned regions go in the `Drawer`'s bare slot.
 */
export declare function DrawerScrollArea(props: DrawerScrollAreaProps): React.JSX.Element;
export interface DrawerFooterProps extends StyleProps {
    /** Prepend a `flex: 1` hint to push the actions right. */
    children: ReactNode;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/** The pinned action band, last child after the scroll body. */
export declare function DrawerFooter(props: DrawerFooterProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;