@furystack/shades-common-components/esm/components/drawer/index.d.ts

Common UI components for FuryStack Shades

import { type ScreenSize } from '@furystack/shades';
export { DrawerToggleButton, type DrawerToggleButtonProps } from './drawer-toggle-button.js';
/**
 * Props for the Drawer component.
 */
export type DrawerProps = {
    /** Position of the drawer */
    position: 'left' | 'right';
    /** Drawer behavior variant */
    variant: 'permanent' | 'collapsible' | 'temporary';
    /** Width of the drawer (CSS value). Default: '240px' */
    width?: string;
    /** Initial open state for collapsible/temporary drawers. Default: true for collapsible, false for temporary */
    defaultOpen?: boolean;
    /** Auto-collapse the drawer below this breakpoint (uses ScreenService) */
    collapseOnBreakpoint?: ScreenSize;
};
/**
 * Standalone Drawer component for sidebars and navigation panels.
 *
 * Works with LayoutService for state management and supports three variants:
 * - **permanent**: Always visible, cannot be closed
 * - **collapsible**: Can be toggled open/closed, pushes content
 * - **temporary**: Overlays content with backdrop, closes on backdrop click
 *
 * Supports responsive behavior via `collapseOnBreakpoint` prop which
 * auto-collapses the drawer below a specified screen size.
 *
 * @example
 * ```tsx
 * // Simple collapsible drawer
 * <Drawer position="left" variant="collapsible">
 *   <nav>Navigation items...</nav>
 * </Drawer>
 *
 * // Responsive drawer that collapses on mobile
 * <Drawer
 *   position="left"
 *   variant="collapsible"
 *   collapseOnBreakpoint="md"
 * >
 *   <nav>Navigation items...</nav>
 * </Drawer>
 *
 * // Temporary drawer (mobile navigation)
 * <Drawer position="left" variant="temporary">
 *   <nav>Mobile navigation...</nav>
 * </Drawer>
 * ```
 */
export declare const Drawer: (props: DrawerProps & Omit<Partial<HTMLElement>, "style"> & {
    style?: Partial<CSSStyleDeclaration>;
} & {
    ref?: import("@furystack/shades").RefObject<Element>;
}, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
//# sourceMappingURL=index.d.ts.map