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

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

import React from 'react';
/** State passed during breadcrumb navigation */
export interface BreadcrumbNavigationState {
    /** Unique timestamp to detect navigation, even to the same route */
    breadcrumbReset: number;
    /** Identifies the source of navigation */
    from: 'breadcrumb';
}
/**
 * Hook to detect breadcrumb navigation and trigger callbacks.
 * Use this in host components to reset state when a breadcrumb is clicked.
 *
 * Note: This hook requires React Router context. If used outside a Router,
 * it will be a no-op (the callback will never be called).
 *
 * @param onReset - Callback fired when breadcrumb navigation is detected
 *
 * @example
 * function ProductsPage() {
 *   const [viewMode, setViewMode] = useState<'list' | 'detail'>('list');
 *
 *   // Automatically reset to list view when breadcrumb is clicked
 *   useBreadcrumbReset(() => setViewMode('list'));
 *
 *   // ... rest of component
 * }
 */
export declare function useBreadcrumbReset(onReset: () => void): void;
export interface BreadcrumbItem {
    /** Display text for the breadcrumb */
    label: string;
    /** URL to navigate to. When provided, renders as a Link */
    href?: string;
    /**
     * Optional callback fired when breadcrumb is clicked.
     * Called in addition to navigation when href is provided.
     * Use for custom actions like analytics, state resets, etc.
     */
    onClick?: () => void;
    /** Optional icon to display before the label */
    icon?: React.ReactNode;
}
export interface BreadcrumbsProps {
    items: BreadcrumbItem[];
    /** Whether to show the home icon link at the start. Default: true */
    showHome?: boolean;
}
/**
 * Breadcrumbs navigation component.
 *
 * When a breadcrumb with href is clicked:
 * - If navigating to a different route: standard navigation occurs
 * - If navigating to the same route: navigation state is updated with a unique key,
 *   which can be used by host apps to detect "reset" navigation via useLocation().state
 *
 * @example
 * // Basic usage
 * <Breadcrumbs items={[
 *   { label: 'Home', href: '/' },
 *   { label: 'Products', href: '/products' },
 *   { label: 'Widget' }  // Current page (no href)
 * ]} />
 *
 * @example
 * // Host app detecting breadcrumb navigation for state reset
 * function ProductsPage() {
 *   const location = useLocation();
 *   const [viewMode, setViewMode] = useState<'list' | 'detail'>('list');
 *
 *   // Reset to list view when breadcrumb navigation occurs
 *   useEffect(() => {
 *     if (location.state?.breadcrumbReset) {
 *       setViewMode('list');
 *     }
 *   }, [location.state?.breadcrumbReset]);
 *
 *   // ... rest of component
 * }
 */
export default function Breadcrumbs({ items, showHome }: BreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
//# sourceMappingURL=Breadcrumbs.d.ts.map