@buun_group/brutalist-ui/dist/react/drawer/Drawer.d.ts

A brutalist-styled component library

/**
 * @module Drawer
 * @description A slide-out panel component that appears from the edge of the screen. Perfect for navigation menus, forms, and supplementary content with full accessibility support.
 */
import React, { CSSProperties } from 'react';
/**
 * Props for the Drawer component
 */
interface DrawerProps {
    /**
     * Controlled open state
     */
    open?: boolean;
    /**
     * Default open state when uncontrolled
     * @default false
     */
    defaultOpen?: boolean;
    /**
     * Callback fired when the drawer opens or closes
     */
    onOpenChange?: (open: boolean) => void;
    /**
     * The edge of the screen from which the drawer appears
     * @default 'right'
     */
    direction?: 'left' | 'right' | 'top' | 'bottom';
    /**
     * The size of the drawer
     * @default 'md'
     */
    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
    /**
     * The visual style variant of the drawer
     * @default 'default'
     */
    variant?: 'default' | 'brutal' | 'outline';
    /**
     * Additional CSS class name for styling
     */
    className?: string;
    /**
     * Custom styles to apply to the drawer
     */
    style?: CSSProperties;
    /**
     * Drawer trigger and content components
     */
    children?: React.ReactNode;
}
/**
 * Props for the Drawer.Trigger component
 */
interface DrawerTriggerProps {
    /**
     * The trigger element content
     */
    children: React.ReactNode;
    /**
     * Additional CSS class name for styling
     */
    className?: string;
    /**
     * Custom styles to apply to the trigger
     */
    style?: CSSProperties;
    /**
     * Whether to render as a child element instead of a button
     * @default false
     */
    asChild?: boolean;
}
/**
 * Button or element that opens the drawer when clicked.
 */
declare const DrawerTrigger: React.ForwardRefExoticComponent<DrawerTriggerProps & React.RefAttributes<HTMLButtonElement>>;
/**
 * Props for the Drawer.Content component
 */
interface DrawerContentProps {
    /**
     * The drawer content (header, body, footer, etc.)
     */
    children: React.ReactNode;
    /**
     * Additional CSS class name for styling
     */
    className?: string;
    /**
     * Custom styles to apply to the content
     */
    style?: CSSProperties;
    /**
     * Whether to show a backdrop overlay
     * @default true
     */
    showOverlay?: boolean;
    /**
     * Whether clicking the overlay closes the drawer
     * @default true
     */
    closeOnOverlayClick?: boolean;
    /**
     * Whether pressing Escape closes the drawer
     * @default true
     */
    closeOnEscape?: boolean;
}
/**
 * The sliding panel content of the drawer.
 * Handles animations, focus management, and accessibility.
 */
declare const DrawerContent: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;
/**
 * Props for the Drawer.Header component
 */
interface DrawerHeaderProps {
    /**
     * Header content (typically title and close button)
     */
    children: React.ReactNode;
    /**
     * Additional CSS class name for styling
     */
    className?: string;
    /**
     * Custom styles to apply to the header
     */
    style?: CSSProperties;
}
/**
 * Header section of the drawer.
 * Typically contains the title and close button.
 */
declare const DrawerHeader: React.ForwardRefExoticComponent<DrawerHeaderProps & React.RefAttributes<HTMLDivElement>>;
/**
 * Props for the Drawer.Title component
 */
interface DrawerTitleProps {
    /**
     * The title text content
     */
    children: React.ReactNode;
    /**
     * Additional CSS class name for styling
     */
    className?: string;
    /**
     * Custom styles to apply to the title
     */
    style?: CSSProperties;
}
/**
 * Title element for the drawer header.
 * Renders as an h2 element.
 */
declare const DrawerTitle: React.ForwardRefExoticComponent<DrawerTitleProps & React.RefAttributes<HTMLHeadingElement>>;
/**
 * Props for the Drawer.Description component
 */
interface DrawerDescriptionProps {
    /**
     * The description text content
     */
    children: React.ReactNode;
    /**
     * Additional CSS class name for styling
     */
    className?: string;
    /**
     * Custom styles to apply to the description
     */
    style?: CSSProperties;
}
/**
 * Description text for the drawer.
 * Provides additional context below the title.
 */
declare const DrawerDescription: React.ForwardRefExoticComponent<DrawerDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
/**
 * Props for the Drawer.Body component
 */
interface DrawerBodyProps {
    /**
     * The main content of the drawer
     */
    children: React.ReactNode;
    /**
     * Additional CSS class name for styling
     */
    className?: string;
    /**
     * Custom styles to apply to the body
     */
    style?: CSSProperties;
}
/**
 * Main content area of the drawer.
 * Scrollable when content exceeds the drawer height.
 */
declare const DrawerBody: React.ForwardRefExoticComponent<DrawerBodyProps & React.RefAttributes<HTMLDivElement>>;
/**
 * Props for the Drawer.Footer component
 */
interface DrawerFooterProps {
    /**
     * Footer content (typically action buttons)
     */
    children: React.ReactNode;
    /**
     * Additional CSS class name for styling
     */
    className?: string;
    /**
     * Custom styles to apply to the footer
     */
    style?: CSSProperties;
}
/**
 * Footer section of the drawer.
 * Typically contains action buttons.
 */
declare const DrawerFooter: React.ForwardRefExoticComponent<DrawerFooterProps & React.RefAttributes<HTMLDivElement>>;
/**
 * Props for the Drawer.Close component
 */
interface DrawerCloseProps {
    /**
     * Custom close button content (defaults to X icon)
     */
    children?: React.ReactNode;
    /**
     * Additional CSS class name for styling
     */
    className?: string;
    /**
     * Custom styles to apply to the close button
     */
    style?: CSSProperties;
    /**
     * Whether to render as a child element instead of a button
     * @default false
     */
    asChild?: boolean;
}
/**
 * Close button for the drawer.
 * Typically placed in the drawer header.
 */
declare const DrawerClose: React.ForwardRefExoticComponent<DrawerCloseProps & React.RefAttributes<HTMLButtonElement>>;
interface DrawerCompound extends React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDivElement>> {
    Trigger: typeof DrawerTrigger;
    Content: typeof DrawerContent;
    Header: typeof DrawerHeader;
    Title: typeof DrawerTitle;
    Description: typeof DrawerDescription;
    Body: typeof DrawerBody;
    Footer: typeof DrawerFooter;
    Close: typeof DrawerClose;
}
declare const DrawerWithSubComponents: DrawerCompound;
export { DrawerWithSubComponents as Drawer };
export type { DrawerProps, DrawerTriggerProps, DrawerContentProps, DrawerHeaderProps, DrawerTitleProps, DrawerDescriptionProps, DrawerBodyProps, DrawerFooterProps, DrawerCloseProps };