@papernote/ui/dist/components/ExpandablePanel.d.ts

A modern React component library with a paper notebook aesthetic - minimal, professional, and expressive

import { ReactNode } from 'react';
export interface ExpandablePanelProps {
    /** Content shown in the collapsed header bar */
    collapsedContent: ReactNode;
    /** Full content shown when expanded */
    children: ReactNode;
    /** Position of the panel */
    position?: 'bottom' | 'top';
    /**
     * Positioning mode:
     * - 'viewport': Fixed to viewport edges (default, for standalone use)
     * - 'container': Sticky within parent container (for use inside Page/AppLayout)
     */
    mode?: 'viewport' | 'container';
    /** Whether the panel is expanded (controlled) */
    expanded?: boolean;
    /** Default expanded state (uncontrolled) */
    defaultExpanded?: boolean;
    /** Callback when expanded state changes */
    onExpandedChange?: (expanded: boolean) => void;
    /** Height when expanded */
    expandedHeight?: string | number;
    /**
     * Maximum width of the panel (e.g., '1400px', '80%', 1200)
     * When set, the panel will be centered horizontally within its container/viewport
     */
    maxWidth?: string | number;
    /** Whether to show the expand/collapse toggle button */
    showToggle?: boolean;
    /** Custom toggle button content */
    toggleContent?: ReactNode;
    /** Additional actions to show in the header (right side) */
    headerActions?: ReactNode;
    /** Close on Escape key */
    closeOnEscape?: boolean;
    /** Visual variant */
    variant?: 'default' | 'elevated' | 'bordered';
    /** Size variant affecting header height */
    size?: 'sm' | 'md' | 'lg';
    /** Additional CSS classes for the container */
    className?: string;
    /** Additional CSS classes for the header */
    headerClassName?: string;
    /** Additional CSS classes for the content */
    contentClassName?: string;
    /** Z-index for the panel (only applies in viewport mode) */
    zIndex?: number;
}
/**
 * ExpandablePanel - A panel that sticks to the bottom (or top) and can expand/collapse
 *
 * For bottom position: expands UPWARD (content appears above header)
 * For top position: expands DOWNWARD (content appears below header)
 *
 * Two modes of operation:
 * - `viewport`: Fixed to the viewport (for standalone pages, covers StatusBar)
 * - `container`: Sticky within its parent container (for use inside Page/AppLayout, respects StatusBar)
 *
 * @example Basic usage (viewport mode - full page)
 * ```tsx
 * <ExpandablePanel
 *   mode="viewport"
 *   collapsedContent={<Text>3 items selected</Text>}
 *   expandedHeight="300px"
 * >
 *   {content}
 * </ExpandablePanel>
 * ```
 *
 * @example Inside Page/AppLayout (container mode - respects StatusBar)
 * ```tsx
 * <Page>
 *   <ExpandablePanelContainer>
 *     <div className="flex-1 overflow-auto">
 *       {pageContent}
 *     </div>
 *     <ExpandablePanel
 *       mode="container"
 *       collapsedContent={<Text>3 items selected</Text>}
 *       expandedHeight="300px"
 *     >
 *       {selectedItemsContent}
 *     </ExpandablePanel>
 *   </ExpandablePanelContainer>
 * </Page>
 * ```
 *
 * @example With maxWidth to match page content
 * ```tsx
 * <ExpandablePanel
 *   mode="container"
 *   maxWidth="1400px"
 *   collapsedContent={<Text>Generated SQL</Text>}
 *   expandedHeight="300px"
 * >
 *   {sqlContent}
 * </ExpandablePanel>
 * ```
 */
export default function ExpandablePanel({ collapsedContent, children, position, mode, expanded: controlledExpanded, defaultExpanded, onExpandedChange, expandedHeight, maxWidth, showToggle, toggleContent, headerActions, closeOnEscape, variant, size, className, headerClassName, contentClassName, zIndex, }: ExpandablePanelProps): import("react/jsx-runtime").JSX.Element;
/**
 * ExpandablePanelSpacer - Adds spacing to prevent content from being hidden behind the panel
 * Only needed in viewport mode. In container mode, the panel is part of the flex layout.
 *
 * @example
 * ```tsx
 * <div>
 *   <MainContent />
 *   <ExpandablePanelSpacer size="md" />
 * </div>
 * <ExpandablePanel mode="viewport" position="bottom" size="md" {...props} />
 * ```
 */
export declare function ExpandablePanelSpacer({ size }: {
    size?: 'sm' | 'md' | 'lg';
}): import("react/jsx-runtime").JSX.Element;
/**
 * ExpandablePanelContainer - Wrapper that sets up proper layout for container mode
 * Use this to wrap your page content when using ExpandablePanel with mode="container"
 *
 * This creates a relative container with full height so the panel can position absolutely
 * at the bottom while the content scrolls above it.
 *
 * @example
 * ```tsx
 * <Page>
 *   <ExpandablePanelContainer>
 *     <div className="flex-1 overflow-auto p-4">
 *       {pageContent}
 *     </div>
 *     <ExpandablePanel mode="container" {...props}>
 *       {panelContent}
 *     </ExpandablePanel>
 *   </ExpandablePanelContainer>
 * </Page>
 * ```
 */
export declare function ExpandablePanelContainer({ children, className, }: {
    children: ReactNode;
    className?: string;
}): import("react/jsx-runtime").JSX.Element;
//# sourceMappingURL=ExpandablePanel.d.ts.map