import { TabSelectorItemProps } from "../TabSelector/TabSelector.js";
import "../TabSelector/index.js";
import { ReactElement, ReactNode } from "react";
import * as react_jsx_runtime17 from "react/jsx-runtime";

//#region src/components/Navbar/MobileNavbar.d.ts
/**
 * Props for the MobileNavbar component
 * @template T - The tab props type extending TabProps
 */
type MobileNavbarProps<T extends TabSelectorItemProps> = {
  /** Logo component or element displayed in the header */
  logo: ReactNode;
  /** Additional content displayed at the top of expanded mobile menu */
  topChildren?: ReactNode;
  /** Navigation sections displayed in the top area of expanded menu */
  topSections?: ReactElement<T>[];
  /** Additional content displayed at the bottom of expanded mobile menu */
  bottomChildren?: ReactNode;
  /** Navigation sections displayed in the bottom area of expanded menu */
  bottomSections?: ReactElement<T>[];
  /** Right-aligned items in the collapsed header (e.g., search, notifications) */
  rightItems?: ReactNode;
  /** Whether the navbar should be rollable (default: true) */
  rollable?: boolean;
};
/**
 * Mobile Navigation Bar Component
 *
 * A sophisticated mobile-first navigation component with rollable full-screen menu,
 * scroll-aware behavior, and smooth animations. Optimized for touch interactions and
 * mobile user experience patterns.
 *
 * Features:
 * - rollable hamburger menu with full-screen overlay
 * - Auto-hide on scroll down, show on scroll up for screen space optimization
 * - Background scroll prevention when menu is open
 * - Staggered animations for smooth menu item reveals
 * - Flexible content areas (top/bottom children and sections)
 * - Responsive layout with viewport-aware sizing
 * - Backdrop blur effects for modern glass-morphism design
 *
 * Layout Structure:
 * ```
 * [Logo] ----------- [Right Items] [Burger]
 *           (when expanded)
 * ┌─────────────────────────────────────────┐
 * │ [Top Children]                          │
 * │ [Top Sections - Navigation Items]       │
 * │ [Bottom Sections - Navigation Items]    │
 * │ [Bottom Children]                       │
 * └─────────────────────────────────────────┘
 * ```
 *
 * Behavioral Features:
 * - Sticky positioning with dynamic hide/show based on scroll direction
 * - Background scroll locking when menu is expanded
 * - Click outside to close expanded menu
 * - Smooth height animations with MaxHeightSmoother
 * - Intelligent burger button visibility (only shown if sections exist)
 *
 * Animation Details:
 * - Menu items animate in with staggered timing (70ms delay between items)
 * - Exit animations are reversed with 50ms stagger
 * - Initial delay of 200ms before items start animating in
 * - Full viewport height menu with dynamic height calculation
 *
 * @example
 * Basic mobile navbar:
 * ```tsx
 * <MobileNavbar
 *   logo={<MobileLogo />}
 *   topSections={primaryNavItems}
 *   rightItems={<SearchIcon />}
 * />
 * ```
 *
 * @example
 * Full-featured mobile navbar:
 * ```tsx
 * <MobileNavbar
 *   logo={<Logo />}
 *   topChildren={<WelcomeMessage />}
 *   topSections={mainNavItems}
 *   bottomSections={utilityNavItems}
 *   bottomChildren={<UserProfile />}
 *   rightItems={
 *     <>
 *       <NotificationIcon />
 *       <SearchIcon />
 *     </>
 *   }
 * />
 * ```
 *
 * Accessibility Features:
 * - Menu expanded state communicated via aria-expanded
 * - Focus management and keyboard navigation support
 * - Screen reader friendly with semantic nav structure
 *
 * @template T - Tab properties type extending TabProps for type safety
 * @param props - MobileNavbar component props
 * @returns Mobile navigation with rollable full-screen menu
 */
declare const MobileNavbar: <T extends TabSelectorItemProps>({
  logo,
  topChildren,
  topSections,
  bottomChildren,
  bottomSections,
  rightItems,
  rollable
}: MobileNavbarProps<T>) => react_jsx_runtime17.JSX.Element;
//#endregion
export { MobileNavbar };
//# sourceMappingURL=MobileNavbar.d.ts.map