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

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

import { ReactNode } from 'react';
import { BreadcrumbItem } from './Breadcrumbs';
export interface PageHeaderAction {
    /** Unique identifier for the action */
    id: string;
    /** Button label text */
    label: string;
    /** Icon to display (from lucide-react) */
    icon?: ReactNode;
    /** Click handler */
    onClick: () => void;
    /** Button variant */
    variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'outline';
    /** Disabled state */
    disabled?: boolean;
    /** Loading state */
    loading?: boolean;
    /** Hide on mobile */
    hideOnMobile?: boolean;
}
export interface PageHeaderProps {
    /** Page title */
    title: string;
    /** Optional subtitle/description */
    subtitle?: string;
    /** Breadcrumb navigation items */
    breadcrumbs?: BreadcrumbItem[];
    /** Show home icon in breadcrumbs (default: true) */
    showHomeBreadcrumb?: boolean;
    /** Action buttons to display on the right */
    actions?: PageHeaderAction[];
    /** Custom content to render on the right (instead of actions) */
    rightContent?: ReactNode;
    /** Custom content to render below title */
    belowTitle?: ReactNode;
    /** Additional CSS classes */
    className?: string;
    /** Make header sticky at top */
    sticky?: boolean;
    /** Back button configuration */
    backButton?: {
        label?: string;
        onClick: () => void;
    };
}
/**
 * PageHeader - Standard page header with title, breadcrumbs, and actions
 *
 * A consistent header component for pages that provides:
 * - Page title and optional subtitle
 * - Breadcrumb navigation
 * - Action buttons (Create, Export, etc.)
 * - Optional back button
 * - Sticky positioning option
 *
 * @example Basic usage
 * ```tsx
 * <PageHeader
 *   title="Products"
 *   subtitle="Manage your product catalog"
 *   breadcrumbs={[{ label: 'Inventory' }, { label: 'Products' }]}
 *   actions={[
 *     { id: 'export', label: 'Export', icon: <Download />, onClick: handleExport, variant: 'ghost' },
 *     { id: 'add', label: 'Add Product', icon: <Plus />, onClick: handleAdd, variant: 'primary' },
 *   ]}
 * />
 * ```
 *
 * @example With back button
 * ```tsx
 * <PageHeader
 *   title="Edit Product"
 *   backButton={{ label: 'Back to Products', onClick: () => navigate('/products') }}
 * />
 * ```
 *
 * @example With custom right content
 * ```tsx
 * <PageHeader
 *   title="Dashboard"
 *   rightContent={<DateRangePicker value={range} onChange={setRange} />}
 * />
 * ```
 */
export default function PageHeader({ title, subtitle, breadcrumbs, showHomeBreadcrumb, actions, rightContent, belowTitle, className, sticky, backButton, }: PageHeaderProps): import("react/jsx-runtime").JSX.Element;
//# sourceMappingURL=PageHeader.d.ts.map