import { CSSProperties, ComponentPropsWithRef, ReactNode } from 'react';
import { Spacing } from '../shared/types';
type AsProp = keyof HTMLElementTagNameMap;
export type DrawerProps = ComponentPropsWithRef<'div'> & {
    isOpen: boolean;
    onOpenChange: () => void;
    /** HTML element of the content container */
    as?: AsProp;
    /** The content of the Drawer */
    children?: ReactNode;
    /** Target content container (background color, shadow, border radius, padding, etc.) */
    containerStyle?: Readonly<CSSProperties>;
    /** Where to mount the Drawer portal */
    mountNodeId?: string;
    /** Offset from the edge of the viewport/window, using spacing design tokens (`s`, `m`, `l`, etc.) */
    offset?: Spacing;
    /** Target the backdrop container if `shouldShowBackdrop` */
    backDropStyle?: Readonly<CSSProperties>;
    /** Side of screen the drawer is anchored to */
    placement?: 'top' | 'bottom' | 'left' | 'right';
    /** Whether to show the backdrop and trap focus inside drawer */
    shouldShowBackdrop?: boolean;
    /** Must be a button */
    triggerButton?: ReactNode;
};
/**
 * - A modal/dialog styled to appear from the side of the screen and overlay page content. Built with [Floating UI](https://floating-ui.com/docs/usefloating).
 * - Drawer is a controlled component. You must provide `isOpen` and `onOpenChange` props.
 * - Always use a button as the optional `triggerButton`.
 *
 * ## Hello, World!
 *
 * ```tsx
 * import { useState } from 'react';
 * import { Drawer } from '@companycam/slab-web';
 *
 * const [isOpen, setIsOpen] = useState(false);
 *
 * const toggleIsOpen = () => {
 *  setIsOpen((prevIsOpen) => !prevIsOpen);
 * };
 *
 * const handleClose = () => {
 *  setIsOpen(false);
 * };
 *
 * return (
 *  <Drawer isOpen={isOpen} onOpenChange={toggleIsOpen} placement="right">
 *    Drawer content
 *    <button type="button" onClick={handleClose}>Close</button>
 *  </Drawer>
 * );
 * ```
 *
 * ### shouldShowBackdrop
 * - When `shouldShowBackdrop` is `true`, a backdrop will appear over the page's content. Scrolling the page will be disabled until the drawer is closed, and focus will also be trapped inside the drawer.
 * - Set `shouldShowBackdrop` to `false` when you want the user to be able to interact with the page _and_ the drawer content: No backdrop will appear and focus will not be trapped inside the drawer.
 *
 * ### offset
 * - Use the `offset` prop to add equal space between the drawer and the edge of the viewport.
 * - The `offset` prop accepts all `spacing` design token values (e.g., `offset="xl"`).
 */
export declare function Drawer({ as, backDropStyle, children, containerStyle, isOpen, onOpenChange, mountNodeId, placement, offset, shouldShowBackdrop, triggerButton, ...props }: DrawerProps): import("react/jsx-runtime").JSX.Element;
export {};