@rakeyshgidwani/roger-ui-bank-theme-jeremy 0.5.3

package/dist/components/ui/navigation/pagination.esm.js

@@ -0,0 +1,155 @@
+/**
+ * Pagination Component
+ * Provides comprehensive pagination with theme support and responsive design
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
+// Simple icon components
+const ChevronDoubleLeftIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M11 19l-7-7 7-7m8 14l-7-7 7-7" }) }));
+const ChevronDoubleRightIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 5l7 7-7 7m-8-14l7 7-7 7" }) }));
+export const Pagination = ({ currentPage = 1, totalPages = 1, totalItems, itemsPerPage = 10, showFirstLast = true, showPrevNext = true, showPageNumbers = true, maxPageNumbers = 5, size = 'md', variant = 'default', onPageChange, onItemsPerPageChange, itemsPerPageOptions = [10, 25, 50, 100], showItemsPerPage = false, showTotal = false, totalLabel = 'Total', disabled = false, loading = false, className = '', 'data-testid': testId = 'pagination', }) => {
+    // Memoize pagination items to avoid unnecessary recalculations
+    const paginationItems = useMemo(() => {
+        const items = [];
+        if (showFirstLast) {
+            items.push({
+                type: 'first',
+                page: 1,
+                disabled: currentPage === 1 || disabled,
+                label: 'First',
+                onClick: () => onPageChange(1),
+            });
+        }
+        if (showPrevNext) {
+            items.push({
+                type: 'previous',
+                page: currentPage - 1,
+                disabled: currentPage === 1 || disabled,
+                label: 'Previous',
+                onClick: () => onPageChange(currentPage - 1),
+            });
+        }
+        if (showPageNumbers) {
+            const pageNumbers = generatePageNumbers(currentPage, totalPages, maxPageNumbers);
+            pageNumbers.forEach((pageNum) => {
+                if (pageNum === 'ellipsis') {
+                    items.push({
+                        type: 'ellipsis',
+                        label: '...',
+                        disabled: true,
+                    });
+                }
+                else {
+                    items.push({
+                        type: 'page',
+                        page: pageNum,
+                        active: pageNum === currentPage,
+                        disabled: disabled,
+                        label: pageNum.toString(),
+                        onClick: () => onPageChange(pageNum),
+                    });
+                }
+            });
+        }
+        if (showPrevNext) {
+            items.push({
+                type: 'next',
+                page: currentPage + 1,
+                disabled: currentPage === totalPages || disabled,
+                label: 'Next',
+                onClick: () => onPageChange(currentPage + 1),
+            });
+        }
+        if (showFirstLast) {
+            items.push({
+                type: 'last',
+                page: totalPages,
+                disabled: currentPage === totalPages || disabled,
+                label: 'Last',
+                onClick: () => onPageChange(totalPages),
+            });
+        }
+        return items;
+    }, [currentPage, totalPages, maxPageNumbers, showFirstLast, showPrevNext, showPageNumbers, disabled, onPageChange]);
+    function generatePageNumbers(current, total, max) {
+        if (total <= max) {
+            return Array.from({ length: total }, (_, i) => i + 1);
+        }
+        const half = Math.floor(max / 2);
+        const start = Math.max(1, current - half);
+        const end = Math.min(total, start + max - 1);
+        const numbers = [];
+        if (start > 1) {
+            numbers.push(1);
+            if (start > 2)
+                numbers.push('ellipsis');
+        }
+        for (let i = start; i <= end; i++) {
+            numbers.push(i);
+        }
+        if (end < total) {
+            if (end < total - 1)
+                numbers.push('ellipsis');
+            numbers.push(total);
+        }
+        return numbers;
+    }
+    const getSizeClasses = () => {
+        switch (size) {
+            case 'sm':
+                return 'pagination__button--sm';
+            case 'lg':
+                return 'pagination__button--lg';
+            default: // md
+                return 'pagination__button--md';
+        }
+    };
+    const getVariantClasses = () => {
+        switch (variant) {
+            case 'outlined':
+                return 'pagination__button--outlined';
+            case 'minimal':
+                return 'pagination__button--minimal';
+            default: // default
+                return 'pagination__button--default';
+        }
+    };
+    const getThemeClasses = () => {
+        return 'pagination pagination--stan-design';
+    };
+    const getButtonClasses = (item) => {
+        let classes = `pagination__button ${getSizeClasses()} ${getVariantClasses()}`;
+        if (item.disabled) {
+            classes += ' pagination__button--disabled';
+        }
+        else if (item.active) {
+            classes += ' pagination__button--active';
+        }
+        else {
+            classes += ' pagination__button--inactive';
+        }
+        return classes;
+    };
+    const handleItemsPerPageChange = (event) => {
+        const newItemsPerPage = parseInt(event.target.value, 10);
+        if (onItemsPerPageChange) {
+            onItemsPerPageChange(newItemsPerPage);
+        }
+    };
+    if (totalPages <= 1 && !showItemsPerPage && !showTotal) {
+        return null;
+    }
+    return (_jsxs("div", { className: `pagination__container ${getThemeClasses()} ${className}`, "data-testid": testId, children: [_jsxs("div", { className: "pagination__info", children: [showItemsPerPage && (_jsxs("div", { className: "pagination__items-per-page", children: [_jsx("label", { htmlFor: "items-per-page", className: "pagination__label", children: "Items per page:" }), _jsx("select", { id: "items-per-page", value: itemsPerPage, onChange: handleItemsPerPageChange, disabled: disabled || loading, className: "pagination__select", children: itemsPerPageOptions.map((option) => (_jsx("option", { value: option, children: option }, option))) })] })), showTotal && totalItems !== undefined && (_jsxs("div", { className: "pagination__total", children: [totalLabel, ": ", _jsx("span", { className: "pagination__total-count", children: totalItems.toLocaleString() })] }))] }), _jsx("div", { className: "pagination__navigation", children: paginationItems.map((item, index) => {
+                    if (item.type === 'ellipsis') {
+                        return (_jsx("span", { className: "pagination__ellipsis", "aria-hidden": "true", children: item.label }, `ellipsis-${index}`));
+                    }
+                    const icon = item.type === 'first' ? _jsx(ChevronDoubleLeftIcon, { className: "pagination__button-icon" }) :
+                        item.type === 'previous' ? _jsx(ChevronLeftIcon, { className: "pagination__button-icon" }) :
+                            item.type === 'next' ? _jsx(ChevronRightIcon, { className: "pagination__button-icon" }) :
+                                item.type === 'last' ? _jsx(ChevronDoubleRightIcon, { className: "pagination__button-icon" }) : null;
+                    return (_jsx("button", { onClick: item.onClick, disabled: item.disabled, className: getButtonClasses(item), "aria-label": item.label, "aria-current": item.active ? 'page' : undefined, children: icon || item.label }, `${item.type}-${item.page || index}`));
+                }) }), _jsx("div", { className: "pagination__status", children: `Page ${currentPage} of ${totalPages}` })] }));
+};
+export default Pagination;

package/dist/components/ui/navigation/pagination.js

@@ -0,0 +1,155 @@
+/**
+ * Pagination Component
+ * Provides comprehensive pagination with theme support and responsive design
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
+// Simple icon components
+const ChevronDoubleLeftIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M11 19l-7-7 7-7m8 14l-7-7 7-7" }) }));
+const ChevronDoubleRightIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 5l7 7-7 7m-8-14l7 7-7 7" }) }));
+export const Pagination = ({ currentPage = 1, totalPages = 1, totalItems, itemsPerPage = 10, showFirstLast = true, showPrevNext = true, showPageNumbers = true, maxPageNumbers = 5, size = 'md', variant = 'default', onPageChange, onItemsPerPageChange, itemsPerPageOptions = [10, 25, 50, 100], showItemsPerPage = false, showTotal = false, totalLabel = 'Total', disabled = false, loading = false, className = '', 'data-testid': testId = 'pagination', }) => {
+    // Memoize pagination items to avoid unnecessary recalculations
+    const paginationItems = useMemo(() => {
+        const items = [];
+        if (showFirstLast) {
+            items.push({
+                type: 'first',
+                page: 1,
+                disabled: currentPage === 1 || disabled,
+                label: 'First',
+                onClick: () => onPageChange(1),
+            });
+        }
+        if (showPrevNext) {
+            items.push({
+                type: 'previous',
+                page: currentPage - 1,
+                disabled: currentPage === 1 || disabled,
+                label: 'Previous',
+                onClick: () => onPageChange(currentPage - 1),
+            });
+        }
+        if (showPageNumbers) {
+            const pageNumbers = generatePageNumbers(currentPage, totalPages, maxPageNumbers);
+            pageNumbers.forEach((pageNum) => {
+                if (pageNum === 'ellipsis') {
+                    items.push({
+                        type: 'ellipsis',
+                        label: '...',
+                        disabled: true,
+                    });
+                }
+                else {
+                    items.push({
+                        type: 'page',
+                        page: pageNum,
+                        active: pageNum === currentPage,
+                        disabled: disabled,
+                        label: pageNum.toString(),
+                        onClick: () => onPageChange(pageNum),
+                    });
+                }
+            });
+        }
+        if (showPrevNext) {
+            items.push({
+                type: 'next',
+                page: currentPage + 1,
+                disabled: currentPage === totalPages || disabled,
+                label: 'Next',
+                onClick: () => onPageChange(currentPage + 1),
+            });
+        }
+        if (showFirstLast) {
+            items.push({
+                type: 'last',
+                page: totalPages,
+                disabled: currentPage === totalPages || disabled,
+                label: 'Last',
+                onClick: () => onPageChange(totalPages),
+            });
+        }
+        return items;
+    }, [currentPage, totalPages, maxPageNumbers, showFirstLast, showPrevNext, showPageNumbers, disabled, onPageChange]);
+    function generatePageNumbers(current, total, max) {
+        if (total <= max) {
+            return Array.from({ length: total }, (_, i) => i + 1);
+        }
+        const half = Math.floor(max / 2);
+        const start = Math.max(1, current - half);
+        const end = Math.min(total, start + max - 1);
+        const numbers = [];
+        if (start > 1) {
+            numbers.push(1);
+            if (start > 2)
+                numbers.push('ellipsis');
+        }
+        for (let i = start; i <= end; i++) {
+            numbers.push(i);
+        }
+        if (end < total) {
+            if (end < total - 1)
+                numbers.push('ellipsis');
+            numbers.push(total);
+        }
+        return numbers;
+    }
+    const getSizeClasses = () => {
+        switch (size) {
+            case 'sm':
+                return 'pagination__button--sm';
+            case 'lg':
+                return 'pagination__button--lg';
+            default: // md
+                return 'pagination__button--md';
+        }
+    };
+    const getVariantClasses = () => {
+        switch (variant) {
+            case 'outlined':
+                return 'pagination__button--outlined';
+            case 'minimal':
+                return 'pagination__button--minimal';
+            default: // default
+                return 'pagination__button--default';
+        }
+    };
+    const getThemeClasses = () => {
+        return 'pagination pagination--stan-design';
+    };
+    const getButtonClasses = (item) => {
+        let classes = `pagination__button ${getSizeClasses()} ${getVariantClasses()}`;
+        if (item.disabled) {
+            classes += ' pagination__button--disabled';
+        }
+        else if (item.active) {
+            classes += ' pagination__button--active';
+        }
+        else {
+            classes += ' pagination__button--inactive';
+        }
+        return classes;
+    };
+    const handleItemsPerPageChange = (event) => {
+        const newItemsPerPage = parseInt(event.target.value, 10);
+        if (onItemsPerPageChange) {
+            onItemsPerPageChange(newItemsPerPage);
+        }
+    };
+    if (totalPages <= 1 && !showItemsPerPage && !showTotal) {
+        return null;
+    }
+    return (_jsxs("div", { className: `pagination__container ${getThemeClasses()} ${className}`, "data-testid": testId, children: [_jsxs("div", { className: "pagination__info", children: [showItemsPerPage && (_jsxs("div", { className: "pagination__items-per-page", children: [_jsx("label", { htmlFor: "items-per-page", className: "pagination__label", children: "Items per page:" }), _jsx("select", { id: "items-per-page", value: itemsPerPage, onChange: handleItemsPerPageChange, disabled: disabled || loading, className: "pagination__select", children: itemsPerPageOptions.map((option) => (_jsx("option", { value: option, children: option }, option))) })] })), showTotal && totalItems !== undefined && (_jsxs("div", { className: "pagination__total", children: [totalLabel, ": ", _jsx("span", { className: "pagination__total-count", children: totalItems.toLocaleString() })] }))] }), _jsx("div", { className: "pagination__navigation", children: paginationItems.map((item, index) => {
+                    if (item.type === 'ellipsis') {
+                        return (_jsx("span", { className: "pagination__ellipsis", "aria-hidden": "true", children: item.label }, `ellipsis-${index}`));
+                    }
+                    const icon = item.type === 'first' ? _jsx(ChevronDoubleLeftIcon, { className: "pagination__button-icon" }) :
+                        item.type === 'previous' ? _jsx(ChevronLeftIcon, { className: "pagination__button-icon" }) :
+                            item.type === 'next' ? _jsx(ChevronRightIcon, { className: "pagination__button-icon" }) :
+                                item.type === 'last' ? _jsx(ChevronDoubleRightIcon, { className: "pagination__button-icon" }) : null;
+                    return (_jsx("button", { onClick: item.onClick, disabled: item.disabled, className: getButtonClasses(item), "aria-label": item.label, "aria-current": item.active ? 'page' : undefined, children: icon || item.label }, `${item.type}-${item.page || index}`));
+                }) }), _jsx("div", { className: "pagination__status", children: `Page ${currentPage} of ${totalPages}` })] }));
+};
+export default Pagination;

package/dist/components/ui/navigation/progressive-navigation.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Progressive Navigation Component
+ * Implements Phase 2 progressive navigation patterns as defined in the implementation plan
+ *
+ * Navigation Patterns:
+ * - mobile (xs-sm): hamburger menu pattern with 56px height
+ * - tablet (md): horizontal-compact pattern with 64px height
+ * - desktop (lg+): horizontal-full pattern with 72px height
+ */
+import * as React from 'react';
+import { NavigationItem, NavigationGroup } from './types.js';
+export interface ProgressiveNavigationProps {
+    items?: NavigationItem[];
+    groups?: NavigationGroup[];
+    logo?: React.ReactNode;
+    logoHref?: string;
+    hamburgerHeight?: string;
+    mobileLogoSize?: 'sm' | 'md' | 'lg';
+    mobileTouchTarget?: string;
+    tabletHeight?: string;
+    tabletLogoSize?: 'sm' | 'md' | 'lg';
+    desktopHeight?: string;
+    desktopLogoSize?: 'sm' | 'md' | 'lg';
+    showSecondaryActions?: boolean;
+    secondaryActions?: React.ReactNode[];
+    mobileBreakpoint?: string;
+    tabletBreakpoint?: string;
+    desktopBreakpoint?: string;
+    onItemClick?: (item: NavigationItem) => void;
+    onLogoClick?: () => void;
+    'aria-label'?: string;
+    'data-testid'?: string;
+    className?: string;
+}
+export declare const ProgressiveNavigation: React.FC<ProgressiveNavigationProps>;
+export default ProgressiveNavigation;
+//# sourceMappingURL=progressive-navigation.d.ts.map

package/dist/components/ui/navigation/progressive-navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progressive-navigation.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/navigation/progressive-navigation.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAqB7D,MAAM,WAAW,0BAA0B;IAEzC,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IACzB,MAAM,CAAC,EAAE,eAAe,EAAE,CAAC;IAG3B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACpC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAG3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAGpC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACrC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IAGrC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAG3B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAGzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IAGvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAsXtE,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/components/ui/navigation/progressive-navigation.esm.js

@@ -0,0 +1,145 @@
+/**
+ * Progressive Navigation Component
+ * Implements Phase 2 progressive navigation patterns as defined in the implementation plan
+ *
+ * Navigation Patterns:
+ * - mobile (xs-sm): hamburger menu pattern with 56px height
+ * - tablet (md): horizontal-compact pattern with 64px height
+ * - desktop (lg+): horizontal-full pattern with 72px height
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback, useRef, useEffect } from 'react';
+// Simple icon components for navigation
+const HamburgerIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" }) }));
+const XMarkIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }));
+const ChevronDownIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }));
+export const ProgressiveNavigation = ({ items = [], groups = [], logo, logoHref, hamburgerHeight = '56px', mobileLogoSize = 'sm', mobileTouchTarget = '48px', tabletHeight = '64px', tabletLogoSize = 'md', desktopHeight = '72px', desktopLogoSize = 'lg', showSecondaryActions = true, secondaryActions = [], mobileBreakpoint = '640px', tabletBreakpoint = '768px', // Currently unused - reserved for future tablet sub-patterns
+desktopBreakpoint = '1024px', onItemClick, onLogoClick, 'aria-label': ariaLabel = 'Main navigation', 'data-testid': testId = 'progressive-navigation', className = '', }) => {
+    // Suppress unused variable warning for tabletBreakpoint (reserved for future use)
+    void tabletBreakpoint;
+    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+    const [activeDropdown, setActiveDropdown] = useState(null);
+    const [screenSize, setScreenSize] = useState('desktop');
+    const navRef = useRef(null);
+    // Determine current screen size based on configurable breakpoints
+    // Default: mobile < 640px, tablet 640-1023px, desktop >= 1024px
+    // This ensures sm range (640-767px) uses tablet-compact pattern, not hamburger
+    useEffect(() => {
+        const handleResize = () => {
+            const width = window.innerWidth;
+            if (width < parseInt(mobileBreakpoint)) {
+                setScreenSize('mobile'); // < 640px: hamburger menu
+            }
+            else if (width < parseInt(desktopBreakpoint)) {
+                setScreenSize('tablet'); // 640-1023px: horizontal-compact
+            }
+            else {
+                setScreenSize('desktop'); // >= 1024px: horizontal-full
+            }
+        };
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [mobileBreakpoint, desktopBreakpoint]);
+    // Close mobile menu on escape key
+    useEffect(() => {
+        const handleEscape = (event) => {
+            if (event.key === 'Escape' && isMobileMenuOpen) {
+                setIsMobileMenuOpen(false);
+            }
+        };
+        if (isMobileMenuOpen) {
+            document.addEventListener('keydown', handleEscape);
+        }
+        return () => {
+            document.removeEventListener('keydown', handleEscape);
+        };
+    }, [isMobileMenuOpen]);
+    const handleItemClick = useCallback((item) => {
+        if (item.disabled)
+            return;
+        if (onItemClick) {
+            onItemClick(item);
+        }
+        if (item.onClick) {
+            item.onClick();
+        }
+        // Close mobile menu after item click
+        if (screenSize === 'mobile') {
+            setIsMobileMenuOpen(false);
+        }
+        // Close dropdown if open
+        setActiveDropdown(null);
+    }, [onItemClick, screenSize]);
+    const handleDropdownToggle = useCallback((groupId) => {
+        setActiveDropdown(activeDropdown === groupId ? null : groupId);
+    }, [activeDropdown]);
+    const handleLogoClick = useCallback(() => {
+        if (onLogoClick) {
+            onLogoClick();
+        }
+    }, [onLogoClick]);
+    const getNavigationHeight = () => {
+        switch (screenSize) {
+            case 'mobile':
+                return hamburgerHeight;
+            case 'tablet':
+                return tabletHeight;
+            case 'desktop':
+                return desktopHeight;
+            default:
+                return desktopHeight;
+        }
+    };
+    const getLogoSize = () => {
+        switch (screenSize) {
+            case 'mobile':
+                return mobileLogoSize;
+            case 'tablet':
+                return tabletLogoSize;
+            case 'desktop':
+                return desktopLogoSize;
+            default:
+                return desktopLogoSize;
+        }
+    };
+    const renderLogo = () => {
+        const logoContent = (_jsx("div", { className: `progressive-nav__logo progressive-nav__logo--${getLogoSize()}`, children: logo }));
+        if (logoHref) {
+            return (_jsx("a", { href: logoHref, className: "progressive-nav__logo-link", onClick: handleLogoClick, children: logoContent }));
+        }
+        return logoContent;
+    };
+    const renderNavigationItems = () => {
+        const allItems = groups.length > 0
+            ? groups.flatMap(group => group.items)
+            : items;
+        return allItems.map((item) => (_jsxs("button", { onClick: () => handleItemClick(item), disabled: item.disabled, className: `progressive-nav__item ${item.active ? 'progressive-nav__item--active' : ''} ${item.disabled ? 'progressive-nav__item--disabled' : ''}`, children: [item.icon && (_jsx("span", { className: "progressive-nav__item-icon", children: item.icon })), _jsx("span", { className: "progressive-nav__item-label", children: item.label }), item.badge && (_jsx("span", { className: "progressive-nav__item-badge", children: item.badge }))] }, item.id)));
+    };
+    const renderDropdownItems = (groupItems) => {
+        return groupItems.map((item) => (_jsxs("button", { onClick: () => handleItemClick(item), disabled: item.disabled, className: `progressive-nav__dropdown-item ${item.active ? 'progressive-nav__dropdown-item--active' : ''} ${item.disabled ? 'progressive-nav__dropdown-item--disabled' : ''}`, children: [item.icon && (_jsx("span", { className: "progressive-nav__dropdown-item-icon", children: item.icon })), _jsx("span", { className: "progressive-nav__dropdown-item-label", children: item.label }), item.badge && (_jsx("span", { className: "progressive-nav__dropdown-item-badge", children: item.badge }))] }, item.id)));
+    };
+    const renderNavigationGroups = () => {
+        return groups.map((group) => (_jsxs("div", { className: "progressive-nav__group", children: [_jsxs("button", { onClick: () => handleDropdownToggle(group.id), className: `progressive-nav__group-trigger ${activeDropdown === group.id ? 'progressive-nav__group-trigger--active' : ''}`, children: [_jsx("span", { className: "progressive-nav__group-title", children: group.title }), _jsx(ChevronDownIcon, { className: `progressive-nav__group-arrow ${activeDropdown === group.id ? 'progressive-nav__group-arrow--expanded' : ''}` })] }), activeDropdown === group.id && (_jsx("div", { className: "progressive-nav__dropdown", children: renderDropdownItems(group.items) }))] }, group.id)));
+    };
+    const renderSecondaryActions = () => {
+        if (!showSecondaryActions || !secondaryActions.length)
+            return null;
+        return (_jsx("div", { className: "progressive-nav__secondary-actions", children: secondaryActions.map((action, index) => (_jsx("div", { className: "progressive-nav__secondary-action", children: action }, index))) }));
+    };
+    // Mobile hamburger menu pattern
+    if (screenSize === 'mobile') {
+        return (_jsx("nav", { ref: navRef, className: `progressive-nav progressive-nav--mobile ${className}`, style: { height: getNavigationHeight() }, "aria-label": ariaLabel, "data-testid": testId, children: _jsxs("div", { className: "progressive-nav__mobile-container", children: [_jsxs("div", { className: "progressive-nav__mobile-header", children: [renderLogo(), _jsx("button", { onClick: () => setIsMobileMenuOpen(!isMobileMenuOpen), className: "progressive-nav__mobile-toggle", style: {
+                                    minHeight: mobileTouchTarget,
+                                    minWidth: mobileTouchTarget
+                                }, "aria-label": isMobileMenuOpen ? 'Close menu' : 'Open menu', "aria-expanded": isMobileMenuOpen, children: isMobileMenuOpen ? (_jsx(XMarkIcon, { className: "progressive-nav__mobile-toggle-icon" })) : (_jsx(HamburgerIcon, { className: "progressive-nav__mobile-toggle-icon" })) })] }), isMobileMenuOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "progressive-nav__mobile-overlay", onClick: () => setIsMobileMenuOpen(false) }), _jsx("div", { className: "progressive-nav__mobile-menu", children: _jsx("div", { className: "progressive-nav__mobile-content", children: groups.length > 0 ? (_jsx("div", { className: "progressive-nav__mobile-groups", children: groups.map((group) => (_jsxs("div", { className: "progressive-nav__mobile-group", children: [group.title && (_jsx("div", { className: "progressive-nav__mobile-group-title", children: group.title })), _jsx("div", { className: "progressive-nav__mobile-group-items", children: group.items.map((item) => (_jsxs("button", { onClick: () => handleItemClick(item), disabled: item.disabled, className: `progressive-nav__mobile-item ${item.active ? 'progressive-nav__mobile-item--active' : ''} ${item.disabled ? 'progressive-nav__mobile-item--disabled' : ''}`, children: [item.icon && (_jsx("span", { className: "progressive-nav__mobile-item-icon", children: item.icon })), _jsx("span", { className: "progressive-nav__mobile-item-label", children: item.label }), item.badge && (_jsx("span", { className: "progressive-nav__mobile-item-badge", children: item.badge }))] }, item.id))) })] }, group.id))) })) : (_jsx("div", { className: "progressive-nav__mobile-items", children: renderNavigationItems() })) }) })] }))] }) }));
+    }
+    // Tablet horizontal-compact pattern
+    if (screenSize === 'tablet') {
+        return (_jsx("nav", { ref: navRef, className: `progressive-nav progressive-nav--tablet ${className}`, style: { height: getNavigationHeight() }, "aria-label": ariaLabel, "data-testid": testId, children: _jsxs("div", { className: "progressive-nav__tablet-container", children: [renderLogo(), _jsx("div", { className: "progressive-nav__tablet-content", children: groups.length > 0 ? renderNavigationGroups() : (_jsx("div", { className: "progressive-nav__tablet-items", children: renderNavigationItems() })) })] }) }));
+    }
+    // Desktop horizontal-full pattern
+    return (_jsx("nav", { ref: navRef, className: `progressive-nav progressive-nav--desktop ${className}`, style: { height: getNavigationHeight() }, "aria-label": ariaLabel, "data-testid": testId, children: _jsxs("div", { className: "progressive-nav__desktop-container", children: [renderLogo(), _jsx("div", { className: "progressive-nav__desktop-content", children: groups.length > 0 ? renderNavigationGroups() : (_jsx("div", { className: "progressive-nav__desktop-items", children: renderNavigationItems() })) }), renderSecondaryActions()] }) }));
+};
+export default ProgressiveNavigation;