import { type DialogProps } from "../dialog";
import * as styles from "./drawer.css";
/**
 * Props for the {@link Drawer} component.
 *
 * @remarks
 * Extends {@link DialogProps} and adds drawer-specific configuration for orientation and sizing.
 */
export type DrawerProps = DialogProps & {
    /**
     * The size of the drawer.
     *
     * @remarks
     * - For `inlineStart` and `inlineEnd` variants, this sets the **width**.
     * - For `blockStart` and `blockEnd` variants, this sets the **height**.
     *
     * Expects a CSS length value (e.g., `"300px"`, `"50%"`).
     *
     * @defaultValue `"250px"` (defined in CSS)
     */
    size?: string | number;
    /**
     * The orientation and placement of the drawer.
     *
     * @remarks
     * Uses logical placement names to adapt to different writing modes:
     * - `inlineStart`: The start edge of the inline axis (e.g., Left in LTR).
     * - `inlineEnd`: The end edge of the inline axis (e.g., Right in LTR).
     * - `blockStart`: The start edge of the block axis (e.g., Top in horizontal).
     * - `blockEnd`: The end edge of the block axis (e.g., Bottom in horizontal).
     *
     * @defaultValue `"inlineStart"`
     */
    variant?: keyof typeof styles.drawerVariants;
};
/**
 * A sliding panel component that appears from the edge of the screen.
 *
 * @remarks
 * The `Drawer` component is built on top of the {@link Dialog} component. It automatically
 * calculates its entrance and exit animations based on its `variant` and the current
 * document writing mode provided by {@link useWritingMode}.
 *
 * @param props - The properties for the drawer.
 * @returns A React component representing the drawer.
 *
 * @example
 * ### Basic Usage
 * ```tsx
 * <Drawer open={isOpen} onClose={() => setIsOpen(false)}>
 *   <p>This is a drawer</p>
 * </Drawer>
 * ```
 *
 * @example
 * ### Right-side Drawer (inline-end)
 * ```tsx
 * <Drawer
 *   variant="inlineEnd"
 *   size="400px"
 *   open={isOpen}
 *   onClose={() => setIsOpen(false)}
 * >
 *   <p>A wider drawer on the right</p>
 * </Drawer>
 * ```
 *
 * @example
 * ### Top Drawer (block-start)
 * ```tsx
 * <Drawer
 *   variant="blockStart"
 *   size="20vh"
 *   open={isOpen}
 *   onClose={() => setIsOpen(false)}
 * >
 *   <p>A drawer sliding down from the top</p>
 * </Drawer>
 * ```
 */
export declare function Drawer({ size, variant, ...props }: DrawerProps): import("react").JSX.Element;