import { ComponentPropsWithoutRef, MouseEvent, RefObject } from 'react';
import { DisableCloseOnEscapeOrClickProps, Size } from '../../types';
import { OpenCloseTransitionStateEffects } from '../../hooks/useOpenCloseTransitionStates';
/**
 * Props for the Drawer component
 * @extends ComponentPropsWithoutRef<"dialog">
 * @extends DialogTransitionStateEffects
 * @extends DisableCloseOnEscapeOrClickProps
 */
export type DrawerProps = ComponentPropsWithoutRef<"dialog"> & OpenCloseTransitionStateEffects & DisableCloseOnEscapeOrClickProps & {
    /**
     * The size of the drawer.
     * @default "medium"
     */
    size?: Extract<Size, "medium" | "large">;
    /**
     * Controls whether the drawer is open or closed.
     * @default false
     */
    open?: boolean;
    /**
     * Callback function called after the drawer is animated closed.
     */
    onClose?: () => void;
    /**
     * Callback function called when the drawer opens.
     * @deprecated Use onOpenAnimationStart or onOpenAnimationComplete instead
     */
    onOpen?: () => void;
    /**
     * Callback when clicking outside the drawer
     */
    onClickOutside?: (e: globalThis.MouseEvent) => void;
    /**
     * Enables scroll chaining behavior.
     * @link https://developer.mozilla.org/en-US/docs/Glossary/Scroll_chaining
     */
    enableScrollChaining?: boolean;
};
/**
 * Context props for the Drawer component
 */
export type DrawerContextProps = {
    /**
     * Function to close the drawer.
     */
    close: (e?: MouseEvent<HTMLElement>) => void;
    /**
     * Reference to the drawer dialog element.
     */
    ref?: RefObject<HTMLDialogElement>;
};
export declare const DrawerContext: import('react').Context<DrawerContextProps | null>;
export declare const DrawerElement: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement>, "ref"> & OpenCloseTransitionStateEffects & DisableCloseOnEscapeOrClickProps & {
    /**
     * The size of the drawer.
     * @default "medium"
     */
    size?: Extract<Size, "medium" | "large">;
    /**
     * Controls whether the drawer is open or closed.
     * @default false
     */
    open?: boolean;
    /**
     * Callback function called after the drawer is animated closed.
     */
    onClose?: () => void;
    /**
     * Callback function called when the drawer opens.
     * @deprecated Use onOpenAnimationStart or onOpenAnimationComplete instead
     */
    onOpen?: () => void;
    /**
     * Callback when clicking outside the drawer
     */
    onClickOutside?: (e: globalThis.MouseEvent) => void;
    /**
     * Enables scroll chaining behavior.
     * @link https://developer.mozilla.org/en-US/docs/Glossary/Scroll_chaining
     */
    enableScrollChaining?: boolean;
} & import('react').RefAttributes<HTMLDialogElement>>;
/**
 * Hook to access the drawer context.
 *
 * @returns The drawer context containing close function and ref
 * @throws Error if used outside of a DrawerContextProvider
 */
export declare function useDrawerContext(): DrawerContextProps;
/**
 * A slide-out drawer component that provides a modal-like experience from the side of the screen.
 *
 * Features:
 * - Slide-in animation from the side of the screen
 * - Keyboard navigation with focus trapping
 * - Escape key and click outside to close
 * - Configurable size variants (medium, large)
 * - Built-in toast support for notifications
 * - Automatic scroll locking when open
 * - Accessible with proper ARIA attributes
 * - Compound component structure with Header, Footer, Content, and CancelButton
 * - Transition state callbacks for animation control
 * - Optional scroll chaining support
 *
 * @example
 * <Drawer open={isOpen} onClose={handleClose} size="medium">
 *   <Drawer.Header>Settings</Drawer.Header>
 *   <Drawer.Content>Drawer content goes here</Drawer.Content>
 *   <Drawer.Footer>
 *     <Button onClick={handleSave}>Save</Button>
 *     <Drawer.CancelButton>Cancel</Drawer.CancelButton>
 *   </Drawer.Footer>
 * </Drawer>
 */
export declare const Drawer: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement>, "ref"> & OpenCloseTransitionStateEffects & DisableCloseOnEscapeOrClickProps & {
    /**
     * The size of the drawer.
     * @default "medium"
     */
    size?: Extract<Size, "medium" | "large">;
    /**
     * Controls whether the drawer is open or closed.
     * @default false
     */
    open?: boolean;
    /**
     * Callback function called after the drawer is animated closed.
     */
    onClose?: () => void;
    /**
     * Callback function called when the drawer opens.
     * @deprecated Use onOpenAnimationStart or onOpenAnimationComplete instead
     */
    onOpen?: () => void;
    /**
     * Callback when clicking outside the drawer
     */
    onClickOutside?: (e: globalThis.MouseEvent) => void;
    /**
     * Enables scroll chaining behavior.
     * @link https://developer.mozilla.org/en-US/docs/Glossary/Scroll_chaining
     */
    enableScrollChaining?: boolean;
} & import('react').RefAttributes<HTMLDialogElement>> & {
    /**
     * Header component for the drawer that displays a title and close button.
     *
     * Features:
     * - Displays the drawer title as a headline
     * - Includes an accessible close button
     * - Sticky positioning at the top of the drawer
     * - Proper semantic HTML structure
     * - Accessible with proper ARIA attributes
     * - Consistent styling with the design system
     * - Automatic close functionality
     *
     * @example
     * <Drawer.Header>Settings</Drawer.Header>
     */
    Header: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import('react').RefAttributes<HTMLHeadElement>>;
    /**
     * Footer component for the drawer that displays action buttons and controls.
     *
     * Features:
     * - Flexible layout for action buttons and controls
     * - Optional sticky positioning at the bottom
     * - Proper semantic HTML structure
     * - Accessible with proper ARIA attributes
     * - Consistent styling with the design system
     * - Supports all standard footer element props
     * - Responsive design that adapts to content
     *
     * @example
     * <Drawer.Footer sticky>
     *   <Button onClick={handleSave}>Save</Button>
     *   <Drawer.CancelButton>Cancel</Drawer.CancelButton>
     * </Drawer.Footer>
     */
    Footer: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
        sticky?: boolean;
    } & import('react').RefAttributes<HTMLElement>>;
    /**
     * Content container for the drawer that holds the main content area.
     *
     * Features:
     * - Flexible content area with proper spacing
     * - Scrollable content when needed
     * - Proper semantic HTML structure
     * - Accessible with proper ARIA attributes
     * - Consistent styling with the design system
     * - Supports all standard div element props
     * - Responsive design that adapts to content
     * - Proper focus management
     *
     * @example
     * <Drawer.Content>
     *   <p>This is the main content of the drawer.</p>
     *   <p>It can contain any type of content.</p>
     * </Drawer.Content>
     */
    Content: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
    /**
     * A button component that automatically closes the drawer when clicked.
     *
     * Features:
     * - Automatically closes the drawer when clicked
     * - Extends Button component functionality
     * - Accessible with proper ARIA attributes
     * - Consistent styling with the design system
     * - Supports all standard button props
     * - Proper focus management
     * - Can be used anywhere within the drawer context
     *
     * @example
     * <Drawer.CancelButton appearance="ghost" size="small">
     *   Cancel
     * </Drawer.CancelButton>
     */
    CancelButton: import('react').ForwardRefExoticComponent<import('..').ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
};