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

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

import React from 'react';
/**
 * MobileHeader component props
 */
export interface MobileHeaderProps {
    /** Page/section title */
    title: string;
    /** Subtitle or breadcrumb text */
    subtitle?: string;
    /** Handler for menu button click (hamburger) */
    onMenuClick?: () => void;
    /** Handler for back button click - shows back arrow instead of menu */
    onBackClick?: () => void;
    /** Handler for close button click - shows X instead of menu */
    onCloseClick?: () => void;
    /** Right side action element (button, icon, etc.) */
    rightAction?: React.ReactNode;
    /** Left side action element (overrides menu/back/close buttons) */
    leftAction?: React.ReactNode;
    /** Make header sticky at top */
    sticky?: boolean;
    /** Show border at bottom */
    bordered?: boolean;
    /** Background style */
    variant?: 'solid' | 'transparent' | 'blur';
    /** Additional CSS classes */
    className?: string;
    /** Safe area handling for notched devices */
    safeArea?: boolean;
}
/**
 * MobileHeader - Mobile app header with navigation controls
 *
 * A flexible mobile header component with support for:
 * - Hamburger menu button (default)
 * - Back navigation arrow
 * - Close button (X)
 * - Custom left/right actions
 * - Sticky positioning
 * - Blur/transparent variants
 *
 * @example Basic with menu button
 * ```tsx
 * <MobileHeader
 *   title="Dashboard"
 *   onMenuClick={() => setDrawerOpen(true)}
 * />
 * ```
 *
 * @example With back button
 * ```tsx
 * <MobileHeader
 *   title="User Details"
 *   subtitle="Profile"
 *   onBackClick={() => navigate(-1)}
 * />
 * ```
 *
 * @example With right action
 * ```tsx
 * <MobileHeader
 *   title="Settings"
 *   onMenuClick={openMenu}
 *   rightAction={
 *     <Button variant="ghost" iconOnly onClick={save}>
 *       <Check className="w-5 h-5" />
 *     </Button>
 *   }
 * />
 * ```
 *
 * @example Transparent with blur
 * ```tsx
 * <MobileHeader
 *   title="Photo Gallery"
 *   variant="blur"
 *   onBackClick={goBack}
 * />
 * ```
 */
export default function MobileHeader({ title, subtitle, onMenuClick, onBackClick, onCloseClick, rightAction, leftAction, sticky, bordered, variant, className, safeArea, }: MobileHeaderProps): import("react/jsx-runtime").JSX.Element;
/**
 * MobileHeaderSpacer - Spacer to prevent content from being hidden behind sticky MobileHeader
 *
 * Place this at the top of your content when NOT using sticky header
 * to maintain consistent spacing.
 *
 * @example
 * ```tsx
 * <MobileHeader title="Page" sticky={false} />
 * <MobileHeaderSpacer />
 * <main>Content here</main>
 * ```
 */
export declare function MobileHeaderSpacer({ safeArea }: {
    safeArea?: boolean;
}): import("react/jsx-runtime").JSX.Element;
//# sourceMappingURL=MobileHeader.d.ts.map