import * as react from 'react';
import { HTMLAttributes, ReactNode } from 'react';

/** Which edge the drawer is anchored to, and therefore slides in from. */
type DrawerSide = "left" | "right" | "top" | "bottom";
/**
 * How large the drawer is along its own axis.
 *
 * `size` controls WIDTH for `left`/`right` and HEIGHT for `top`/`bottom` — the
 * cross-axis always fills its anchor. One scale, two meanings, so `size="md"`
 * reads the same whichever edge you attach to.
 */
type DrawerSize = "sm" | "md" | "lg" | "xl" | "full";
/**
 * Where the drawer is anchored.
 *
 * - `viewport` (default) — portalled, `fixed`, covers the screen, locks body
 *   scroll and traps focus. The classic app-level drawer.
 * - `container` — `absolute` inside the nearest positioned ancestor, no portal,
 *   no scroll lock, no focus trap. Attach it to a Card, a layout region, or the
 *   shell around a prompt input and it stays inside that box.
 */
type DrawerAttach = "viewport" | "container";
interface DrawerContextValue {
    open: boolean;
    close: () => void;
    side: DrawerSide;
}
interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
    children: ReactNode;
    open: boolean;
    onClose: () => void;
    /** Edge to anchor to. Default `right`. */
    side?: DrawerSide;
    /** Extent along the drawer's own axis. Default `md`. */
    size?: DrawerSize;
    /** Viewport-level or scoped to a container. Default `viewport`. */
    attach?: DrawerAttach;
    /** Render the scrim behind the panel. Default `true`. */
    backdrop?: boolean;
    /** Clicking the scrim closes. Default `true`. */
    dismissOnBackdrop?: boolean;
    /** Escape closes. Default `true`. */
    dismissOnEscape?: boolean;
    className?: string;
}
interface DrawerHeaderProps {
    children: ReactNode;
    /** Show the close button. Default `true`. */
    closable?: boolean;
    className?: string;
}
interface DrawerBodyProps {
    children: ReactNode;
    className?: string;
}
interface DrawerFooterProps {
    children: ReactNode;
    className?: string;
}
interface DrawerContainerProps extends HTMLAttributes<HTMLDivElement> {
    children: ReactNode;
    className?: string;
}

declare function DrawerHeader({ children, closable, className }: DrawerHeaderProps): react.JSX.Element;
declare namespace DrawerHeader {
    var displayName: string;
}

declare function DrawerBody({ children, className }: DrawerBodyProps): react.JSX.Element;
declare namespace DrawerBody {
    var displayName: string;
}

declare function DrawerFooter({ children, className }: DrawerFooterProps): react.JSX.Element;
declare namespace DrawerFooter {
    var displayName: string;
}

/**
 * The anchor for `<Drawer attach="container">`.
 *
 * A container-attached drawer positions itself `absolute`, which resolves
 * against the nearest *positioned* ancestor — so without `relative` somewhere
 * above it, the drawer silently escapes to the viewport and looks like it
 * ignored `attach` entirely. This wrapper supplies `relative` + `overflow-hidden`
 * so the panel slides within the box rather than out of it.
 *
 *   <Drawer.Container className="h-80 rounded-xl border">
 *     <YourContent />
 *     <Drawer attach="container" side="bottom" open={open} onClose={close}>
 *       <Drawer.Body>Filters</Drawer.Body>
 *     </Drawer>
 *   </Drawer.Container>
 *
 * Any element works as long as it is positioned — this is the shortcut, not a
 * requirement. Wrapping a Card, a layout pane, or a prompt-input shell in
 * `relative overflow-hidden` does the same job.
 */
declare function DrawerContainer({ children, className, ...rest }: DrawerContainerProps): react.JSX.Element;
declare namespace DrawerContainer {
    var displayName: string;
}

declare function DrawerRoot({ children, open, onClose, side, size, attach, backdrop, dismissOnBackdrop, dismissOnEscape, className, ...rest }: DrawerProps): react.JSX.Element | null;
declare const Drawer: typeof DrawerRoot & {
    Header: typeof DrawerHeader;
    Body: typeof DrawerBody;
    Footer: typeof DrawerFooter;
    Container: typeof DrawerContainer;
};

declare function useDrawer(): DrawerContextValue;

export { Drawer, type DrawerAttach, type DrawerBodyProps, type DrawerContainerProps, type DrawerContextValue, type DrawerFooterProps, type DrawerHeaderProps, type DrawerProps, type DrawerSide, type DrawerSize, useDrawer };