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

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

import React from 'react';
/**
 * Bottom navigation item configuration
 */
export interface BottomNavItem {
    /** Unique identifier for the nav item */
    id: string;
    /** Display label */
    label: string;
    /** Icon element (use lucide-react icons) */
    icon: React.ReactNode;
    /** Navigation URL (optional) */
    href?: string;
    /** Badge count for notifications */
    badge?: number;
    /** Click handler (alternative to href) */
    onClick?: () => void;
    /** Disabled state */
    disabled?: boolean;
}
/**
 * BottomNavigation component props
 */
export interface BottomNavigationProps {
    /** Navigation items (max 5 recommended) */
    items: BottomNavItem[];
    /** Currently active item ID */
    activeId?: string;
    /** Navigation handler - receives item ID and href */
    onNavigate?: (id: string, href?: string) => void;
    /** Show labels below icons */
    showLabels?: boolean;
    /** Additional CSS classes */
    className?: string;
    /** Safe area handling for notched devices */
    safeArea?: boolean;
}
/**
 * BottomNavigation - Mobile-style bottom tab bar
 *
 * iOS/Android-style fixed bottom navigation with icons, labels, and badges.
 * Handles safe area insets for notched devices automatically.
 *
 * Best practices:
 * - Use 3-5 items maximum
 * - Keep labels short (1-2 words)
 * - Use consistent icon style
 *
 * @example Basic usage
 * ```tsx
 * import { BottomNavigation } from 'notebook-ui';
 * import { Home, Search, Bell, User } from 'lucide-react';
 *
 * const navItems = [
 *   { id: 'home', label: 'Home', icon: <Home />, href: '/' },
 *   { id: 'search', label: 'Search', icon: <Search />, href: '/search' },
 *   { id: 'notifications', label: 'Alerts', icon: <Bell />, badge: 3 },
 *   { id: 'profile', label: 'Profile', icon: <User />, href: '/profile' },
 * ];
 *
 * <BottomNavigation
 *   items={navItems}
 *   activeId="home"
 *   onNavigate={(id, href) => navigate(href)}
 * />
 * ```
 *
 * @example With onClick handlers
 * ```tsx
 * const navItems = [
 *   { id: 'home', label: 'Home', icon: <Home />, onClick: () => setTab('home') },
 *   { id: 'add', label: 'Add', icon: <Plus />, onClick: openAddModal },
 * ];
 *
 * <BottomNavigation items={navItems} activeId={currentTab} />
 * ```
 */
export default function BottomNavigation({ items, activeId, onNavigate, showLabels, className, safeArea, }: BottomNavigationProps): import("react/jsx-runtime").JSX.Element;
/**
 * BottomNavigationSpacer - Spacer to prevent content from being hidden behind BottomNavigation
 *
 * Place this at the bottom of your scrollable content when using BottomNavigation.
 *
 * @example
 * ```tsx
 * <div className="flex flex-col h-screen">
 *   <main className="flex-1 overflow-auto">
 *     {/* Your content *\/}
 *     <BottomNavigationSpacer />
 *   </main>
 *   <BottomNavigation items={navItems} />
 * </div>
 * ```
 */
export declare function BottomNavigationSpacer({ safeArea }: {
    safeArea?: boolean;
}): import("react/jsx-runtime").JSX.Element;
//# sourceMappingURL=BottomNavigation.d.ts.map