/**
 * @file Drawer.tsx
 * @input Uses React, StyleX, theme tokens, Icon/IconButton, useScrollLock, BaseProps, mergeProps/mergeRefs, themeProps
 * @output Exports Drawer component and DrawerProps
 * @position Lab implementation; consumed by index.ts, tested by Drawer.test.tsx, demonstrated in Storybook
 *
 * Edge-anchored overlay panel for inspectors, detail views, and sheets —
 * the "click a table row, see its details" pattern. Slides in from any of
 * the four edges: inline start/end (side panels) or block top/bottom
 * (full-width sheets).
 *
 * Uses the native `<dialog>` element (same precedent as Dialog/MobileNav):
 * - `showModal()` when `hasScrim` (default) — top-layer rendering, focus
 *   trapping, `::backdrop`, no z-index management.
 * - `show()` when `hasScrim={false}` — non-modal overlay; the page behind
 *   stays interactive (e.g. master-detail inspectors).
 *
 * Entry animation uses `@starting-style` + `transition-behavior:
 * allow-discrete` (see CLAUDE.md dialog-entry pattern); exit slides out
 * before a delayed `dialog.close()` releases the top layer and restores
 * focus to the element that opened the drawer.
 *
 * Sibling drawers coordinate through a module-level LIFO registry: Escape
 * closes only the top (last-opened) drawer, and non-modal drawers stack
 * last-opened-on-top via registry-assigned z-indexes.
 *
 * SYNC: When modified, update these files to stay in sync:
 * - /packages/lab/src/Drawer/Drawer.doc.mjs (props table, features, usage)
 * - /packages/lab/src/Drawer/Drawer.test.tsx (tests for new/changed behavior)
 * - /packages/lab/src/Drawer/index.ts (exports if types change)
 * - /apps/storybook/stories/Drawer.stories.tsx (examples and visual coverage)
 */
import { type ReactNode } from 'react';
import type { BaseProps } from '@astryxdesign/core';
export interface DrawerProps extends BaseProps<HTMLDialogElement> {
    /** Ref forwarded to the root <dialog> element */
    ref?: React.Ref<HTMLDialogElement>;
    /**
     * Whether the drawer is open. Fully controlled — pair with `onClose`.
     */
    isOpen: boolean;
    /**
     * Called when the drawer requests to be closed
     * (Escape key, scrim click, built-in close button). The caller owns the
     * open state. When sibling drawers are open, Escape only closes the
     * top (last-opened) drawer.
     */
    onClose: () => void;
    /**
     * Which edge the drawer slides from.
     * - `'end'` — inline-end edge (right in LTR) — the inspector convention
     * - `'start'` — inline-start edge (left in LTR)
     * - `'top'` / `'bottom'` — full-width sheets on the block axis
     * @default 'end'
     */
    side?: 'start' | 'end' | 'top' | 'bottom';
    /**
     * Size budget of the panel along its slide axis: width for
     * `side="start"/"end"`, height for `side="top"/"bottom"`. A number is
     * pixels; a string is any CSS length (`'50%'`, `'40dvh'`). On viewports
     * smaller than the budget the drawer fills the axis.
     * @default 400
     */
    size?: number | string;
    /**
     * Accessible label for the drawer (required — the drawer has no
     * built-in heading to derive a name from). Also names the built-in
     * collapse/expand affordances.
     */
    label: string;
    /**
     * Whether to render a modal scrim behind the drawer.
     * - `true` (default) — `showModal()`: top layer, focus trap, body scroll
     *   lock, click-outside-to-close.
     * - `false` — `show()`: non-modal overlay; the page behind stays
     *   interactive. Escape still closes while focus is inside the drawer.
     * @default true
     */
    hasScrim?: boolean;
    /**
     * Whether to render the built-in close button in the top-trailing
     * corner. Defaults to the `hasScrim` value: modal drawers get a close
     * button, non-modal drawers don't.
     * @default hasScrim
     */
    hasCloseButton?: boolean;
    /**
     * Collapse the drawer to a narrow click-to-expand rail. Only supported
     * for non-modal (`hasScrim={false}`) drawers with `side="start"/"end"`;
     * ignored (with a dev warning) otherwise. Controlled — pair with
     * `onCollapsedChange`.
     */
    isCollapsed?: boolean;
    /**
     * Called when the built-in collapse/expand affordances are used.
     * Providing it renders a collapse toggle next to the close button while
     * expanded; the collapsed rail always expands on click.
     */
    onCollapsedChange?: (collapsed: boolean) => void;
    /**
     * Drawer content. Rendered inside a full-height scrollable area.
     * Focus the element with `data-autofocus` on open, if present.
     */
    children: ReactNode;
    /**
     * Test ID for the root element.
     */
    'data-testid'?: string;
}
/**
 * An edge-anchored overlay panel for inspectors, detail views, and sheets.
 *
 * Slides in from the logical start/end edge (side panel) or the top/bottom
 * edge (full-width sheet) using the native `<dialog>` element: modal with a
 * scrim by default, or a non-modal inline overlay with `hasScrim={false}`.
 * Escape closes the top-most open drawer; focus returns to the element that
 * opened the drawer. Non-modal side drawers can collapse to a rail via
 * `isCollapsed`/`onCollapsedChange`.
 *
 * @example
 * ```
 * const [selected, setSelected] = useState(null);
 * <Drawer
 *   isOpen={selected != null}
 *   onClose={() => setSelected(null)}
 *   label={`Details: ${selected?.name}`}>
 *   <HostDetails host={selected} />
 * </Drawer>
 * ```
 */
export declare function Drawer({ isOpen, onClose, side, size, label, hasScrim, hasCloseButton, isCollapsed, onCollapsedChange, children, xstyle, className, style, ref, ...props }: DrawerProps): import("react").JSX.Element;
export declare namespace Drawer {
    var displayName: string;
}
//# sourceMappingURL=Drawer.d.ts.map