@rakeyshgidwani/roger-ui-bank-theme-harvey 0.2.52 → 0.3.1

package/dist/components/ui/layout/responsive-grid.esm.js

@@ -0,0 +1,124 @@
+/**
+ * Responsive Grid Component
+ * Implements Phase 2 responsive grid system as defined in the implementation plan
+ *
+ * Grid Progression:
+ * - xs: 1 column (Single column mobile)
+ * - sm: 2 columns (2 columns small tablet)
+ * - md: 2 columns (2 columns tablet)
+ * - lg: 3 columns (3 columns desktop)
+ * - xl: 4 columns (4 columns large desktop)
+ * - 2xl: 4 columns (4 columns ultra-wide)
+ * - 3xl: 5 columns (5 columns large displays)
+ *
+ * Gap Progression:
+ * - xs: 16px, sm: 20px, md: 24px, lg: 28px, xl: 32px, 2xl: 36px, 3xl: 40px
+ */
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+// Pre-defined grid patterns
+const GRID_PATTERNS = {
+    default: {
+        columns: { xs: 1, sm: 2, md: 2, lg: 3, xl: 4, '2xl': 4, '3xl': 5 },
+        gaps: { xs: '16px', sm: '20px', md: '24px', lg: '28px', xl: '32px', '2xl': '36px', '3xl': '40px' }
+    },
+    content: {
+        columns: { xs: 1, sm: 1, md: 2, lg: 2, xl: 3, '2xl': 3, '3xl': 4 },
+        gaps: { xs: '16px', sm: '20px', md: '24px', lg: '28px', xl: '32px', '2xl': '36px', '3xl': '40px' }
+    },
+    dashboard: {
+        columns: { xs: 1, sm: 2, md: 3, lg: 4, xl: 5, '2xl': 6, '3xl': 7 },
+        gaps: { xs: '12px', sm: '16px', md: '20px', lg: '24px', xl: '28px', '2xl': '32px', '3xl': '36px' }
+    },
+    gallery: {
+        columns: { xs: 2, sm: 3, md: 4, lg: 5, xl: 6, '2xl': 7, '3xl': 8 },
+        gaps: { xs: '8px', sm: '12px', md: '16px', lg: '20px', xl: '24px', '2xl': '28px', '3xl': '32px' }
+    },
+    cards: {
+        columns: { xs: 1, sm: 1, md: 2, lg: 3, xl: 3, '2xl': 4, '3xl': 4 },
+        gaps: { xs: '20px', sm: '24px', md: '28px', lg: '32px', xl: '36px', '2xl': '40px', '3xl': '44px' }
+    }
+};
+export const ResponsiveGrid = ({ children, columns: customColumns, gaps: customGaps, pattern = 'default', autoFit = false, minItemWidth = '250px', alignItems = 'stretch', justifyItems = 'stretch', 'aria-label': ariaLabel, 'data-testid': testId = 'responsive-grid', className = '', }) => {
+    // Get pattern configuration
+    const patternConfig = GRID_PATTERNS[pattern];
+    // Use custom configuration or fall back to pattern
+    const columns = customColumns || patternConfig.columns;
+    const gaps = customGaps || patternConfig.gaps;
+    // Build CSS custom properties for responsive grid
+    const gridStyle = React.useMemo(() => {
+        const style = {};
+        // Set column configurations
+        Object.entries(columns).forEach(([breakpoint, columnCount]) => {
+            style[`--responsive-grid-columns-${breakpoint}`] = columnCount;
+        });
+        // Set gap configurations
+        Object.entries(gaps).forEach(([breakpoint, gapValue]) => {
+            style[`--responsive-grid-gap-${breakpoint}`] = gapValue;
+        });
+        // Set alignment
+        style['--responsive-grid-align-items'] = alignItems;
+        style['--responsive-grid-justify-items'] = justifyItems;
+        // Set auto-fit configuration
+        if (autoFit) {
+            style['--responsive-grid-min-item-width'] = minItemWidth;
+        }
+        return style;
+    }, [columns, gaps, alignItems, justifyItems, autoFit, minItemWidth]);
+    // Build CSS classes
+    const gridClasses = React.useMemo(() => {
+        const baseClass = 'responsive-grid';
+        const patternClass = `responsive-grid--${pattern}`;
+        const autoFitClass = autoFit ? 'responsive-grid--auto-fit' : '';
+        return [baseClass, patternClass, autoFitClass, className]
+            .filter(Boolean)
+            .join(' ');
+    }, [pattern, autoFit, className]);
+    return (_jsx("div", { className: gridClasses, style: gridStyle, "aria-label": ariaLabel, "data-testid": testId, children: children }));
+};
+export const ResponsiveGridItem = ({ children, colSpan, rowSpan, colStart, rowStart, alignSelf = 'auto', justifySelf = 'auto', className = '', 'data-testid': testId = 'responsive-grid-item', }) => {
+    // Build CSS custom properties for grid item
+    const itemStyle = React.useMemo(() => {
+        const style = {};
+        // Set column span configurations
+        if (colSpan) {
+            Object.entries(colSpan).forEach(([breakpoint, span]) => {
+                style[`--responsive-grid-item-col-span-${breakpoint}`] = span;
+            });
+        }
+        // Set row span configurations
+        if (rowSpan) {
+            Object.entries(rowSpan).forEach(([breakpoint, span]) => {
+                style[`--responsive-grid-item-row-span-${breakpoint}`] = span;
+            });
+        }
+        // Set column start configurations
+        if (colStart) {
+            Object.entries(colStart).forEach(([breakpoint, start]) => {
+                style[`--responsive-grid-item-col-start-${breakpoint}`] = start;
+            });
+        }
+        // Set row start configurations
+        if (rowStart) {
+            Object.entries(rowStart).forEach(([breakpoint, start]) => {
+                style[`--responsive-grid-item-row-start-${breakpoint}`] = start;
+            });
+        }
+        // Set alignment
+        style['--responsive-grid-item-align-self'] = alignSelf;
+        style['--responsive-grid-item-justify-self'] = justifySelf;
+        return style;
+    }, [colSpan, rowSpan, colStart, rowStart, alignSelf, justifySelf]);
+    // Build CSS classes
+    const itemClasses = React.useMemo(() => {
+        const baseClass = 'responsive-grid-item';
+        const spanClass = colSpan || rowSpan ? 'responsive-grid-item--has-span' : '';
+        const positionClass = colStart || rowStart ? 'responsive-grid-item--has-position' : '';
+        return [baseClass, spanClass, positionClass, className]
+            .filter(Boolean)
+            .join(' ');
+    }, [colSpan, rowSpan, colStart, rowStart, className]);
+    return (_jsx("div", { className: itemClasses, style: itemStyle, "data-testid": testId, children: children }));
+};
+export default ResponsiveGrid;

package/dist/components/ui/layout/responsive-grid.js

@@ -0,0 +1,124 @@
+/**
+ * Responsive Grid Component
+ * Implements Phase 2 responsive grid system as defined in the implementation plan
+ *
+ * Grid Progression:
+ * - xs: 1 column (Single column mobile)
+ * - sm: 2 columns (2 columns small tablet)
+ * - md: 2 columns (2 columns tablet)
+ * - lg: 3 columns (3 columns desktop)
+ * - xl: 4 columns (4 columns large desktop)
+ * - 2xl: 4 columns (4 columns ultra-wide)
+ * - 3xl: 5 columns (5 columns large displays)
+ *
+ * Gap Progression:
+ * - xs: 16px, sm: 20px, md: 24px, lg: 28px, xl: 32px, 2xl: 36px, 3xl: 40px
+ */
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+// Pre-defined grid patterns
+const GRID_PATTERNS = {
+    default: {
+        columns: { xs: 1, sm: 2, md: 2, lg: 3, xl: 4, '2xl': 4, '3xl': 5 },
+        gaps: { xs: '16px', sm: '20px', md: '24px', lg: '28px', xl: '32px', '2xl': '36px', '3xl': '40px' }
+    },
+    content: {
+        columns: { xs: 1, sm: 1, md: 2, lg: 2, xl: 3, '2xl': 3, '3xl': 4 },
+        gaps: { xs: '16px', sm: '20px', md: '24px', lg: '28px', xl: '32px', '2xl': '36px', '3xl': '40px' }
+    },
+    dashboard: {
+        columns: { xs: 1, sm: 2, md: 3, lg: 4, xl: 5, '2xl': 6, '3xl': 7 },
+        gaps: { xs: '12px', sm: '16px', md: '20px', lg: '24px', xl: '28px', '2xl': '32px', '3xl': '36px' }
+    },
+    gallery: {
+        columns: { xs: 2, sm: 3, md: 4, lg: 5, xl: 6, '2xl': 7, '3xl': 8 },
+        gaps: { xs: '8px', sm: '12px', md: '16px', lg: '20px', xl: '24px', '2xl': '28px', '3xl': '32px' }
+    },
+    cards: {
+        columns: { xs: 1, sm: 1, md: 2, lg: 3, xl: 3, '2xl': 4, '3xl': 4 },
+        gaps: { xs: '20px', sm: '24px', md: '28px', lg: '32px', xl: '36px', '2xl': '40px', '3xl': '44px' }
+    }
+};
+export const ResponsiveGrid = ({ children, columns: customColumns, gaps: customGaps, pattern = 'default', autoFit = false, minItemWidth = '250px', alignItems = 'stretch', justifyItems = 'stretch', 'aria-label': ariaLabel, 'data-testid': testId = 'responsive-grid', className = '', }) => {
+    // Get pattern configuration
+    const patternConfig = GRID_PATTERNS[pattern];
+    // Use custom configuration or fall back to pattern
+    const columns = customColumns || patternConfig.columns;
+    const gaps = customGaps || patternConfig.gaps;
+    // Build CSS custom properties for responsive grid
+    const gridStyle = React.useMemo(() => {
+        const style = {};
+        // Set column configurations
+        Object.entries(columns).forEach(([breakpoint, columnCount]) => {
+            style[`--responsive-grid-columns-${breakpoint}`] = columnCount;
+        });
+        // Set gap configurations
+        Object.entries(gaps).forEach(([breakpoint, gapValue]) => {
+            style[`--responsive-grid-gap-${breakpoint}`] = gapValue;
+        });
+        // Set alignment
+        style['--responsive-grid-align-items'] = alignItems;
+        style['--responsive-grid-justify-items'] = justifyItems;
+        // Set auto-fit configuration
+        if (autoFit) {
+            style['--responsive-grid-min-item-width'] = minItemWidth;
+        }
+        return style;
+    }, [columns, gaps, alignItems, justifyItems, autoFit, minItemWidth]);
+    // Build CSS classes
+    const gridClasses = React.useMemo(() => {
+        const baseClass = 'responsive-grid';
+        const patternClass = `responsive-grid--${pattern}`;
+        const autoFitClass = autoFit ? 'responsive-grid--auto-fit' : '';
+        return [baseClass, patternClass, autoFitClass, className]
+            .filter(Boolean)
+            .join(' ');
+    }, [pattern, autoFit, className]);
+    return (_jsx("div", { className: gridClasses, style: gridStyle, "aria-label": ariaLabel, "data-testid": testId, children: children }));
+};
+export const ResponsiveGridItem = ({ children, colSpan, rowSpan, colStart, rowStart, alignSelf = 'auto', justifySelf = 'auto', className = '', 'data-testid': testId = 'responsive-grid-item', }) => {
+    // Build CSS custom properties for grid item
+    const itemStyle = React.useMemo(() => {
+        const style = {};
+        // Set column span configurations
+        if (colSpan) {
+            Object.entries(colSpan).forEach(([breakpoint, span]) => {
+                style[`--responsive-grid-item-col-span-${breakpoint}`] = span;
+            });
+        }
+        // Set row span configurations
+        if (rowSpan) {
+            Object.entries(rowSpan).forEach(([breakpoint, span]) => {
+                style[`--responsive-grid-item-row-span-${breakpoint}`] = span;
+            });
+        }
+        // Set column start configurations
+        if (colStart) {
+            Object.entries(colStart).forEach(([breakpoint, start]) => {
+                style[`--responsive-grid-item-col-start-${breakpoint}`] = start;
+            });
+        }
+        // Set row start configurations
+        if (rowStart) {
+            Object.entries(rowStart).forEach(([breakpoint, start]) => {
+                style[`--responsive-grid-item-row-start-${breakpoint}`] = start;
+            });
+        }
+        // Set alignment
+        style['--responsive-grid-item-align-self'] = alignSelf;
+        style['--responsive-grid-item-justify-self'] = justifySelf;
+        return style;
+    }, [colSpan, rowSpan, colStart, rowStart, alignSelf, justifySelf]);
+    // Build CSS classes
+    const itemClasses = React.useMemo(() => {
+        const baseClass = 'responsive-grid-item';
+        const spanClass = colSpan || rowSpan ? 'responsive-grid-item--has-span' : '';
+        const positionClass = colStart || rowStart ? 'responsive-grid-item--has-position' : '';
+        return [baseClass, spanClass, positionClass, className]
+            .filter(Boolean)
+            .join(' ');
+    }, [colSpan, rowSpan, colStart, rowStart, className]);
+    return (_jsx("div", { className: itemClasses, style: itemStyle, "data-testid": testId, children: children }));
+};
+export default ResponsiveGrid;

package/dist/components/ui/layouts/adaptive-layout.d.ts

@@ -7,6 +7,7 @@ export interface AdaptiveLayoutProps {
     description?: string;
     showHeader?: boolean;
     showSidebar?: boolean;
+    showFooter?: boolean;
     enableTouchOptimization?: boolean;
     enablePerformanceMonitoring?: boolean;
     enableAdvancedFeatures?: boolean;

package/dist/components/ui/layouts/adaptive-layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"adaptive-layout.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/layouts/adaptive-layout.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAKvD,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAA;AAExD,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,SAAS,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,2BAA2B,CAAC,EAAE,OAAO,CAAA;IACrC,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA6FxD,CAAA;AAED,eAAe,cAAc,CAAA"}
+{"version":3,"file":"adaptive-layout.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/layouts/adaptive-layout.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAKvD,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAA;AAExD,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,SAAS,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,2BAA2B,CAAC,EAAE,OAAO,CAAA;IACrC,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA8FxD,CAAA;AAED,eAAe,cAAc,CAAA"}

package/dist/components/ui/layouts/adaptive-layout.esm.js

@@ -4,7 +4,7 @@ import { useState, useEffect } from 'react';
 import { MobileLayout } from './mobile-layout.js';
 import { TabletLayout } from './tablet-layout.js';
 import { DesktopLayout } from './desktop-layout.js';
-export const AdaptiveLayout = ({ children, title = 'Adaptive Layout', description = 'Automatically adapts to different device types with optimal layouts', showHeader = true, showSidebar = true, enableTouchOptimization = true, enablePerformanceMonitoring = true, enableAdvancedFeatures = true, className = '' }) => {
+export const AdaptiveLayout = ({ children, title = 'Adaptive Layout', description = 'Automatically adapts to different device types with optimal layouts', showHeader = true, showSidebar = true, showFooter = false, enableTouchOptimization = true, enablePerformanceMonitoring = true, enableAdvancedFeatures = true, className = '' }) => {
     const [deviceType, setDeviceType] = useState('desktop');
     // Device detection and adaptation
     useEffect(() => {
@@ -40,7 +40,7 @@ export const AdaptiveLayout = ({ children, title = 'Adaptive Layout', descriptio
         };
         switch (deviceType) {
             case 'mobile':
-                return (_jsx(MobileLayout, { ...commonProps, showFooter: true, enableTouchOptimization: enableTouchOptimization, children: children }));
+                return (_jsx(MobileLayout, { ...commonProps, showFooter: showFooter, enableTouchOptimization: enableTouchOptimization, children: children }));
             case 'tablet':
                 return (_jsx(TabletLayout, { ...commonProps, showSidebar: showSidebar, enableTouchOptimization: enableTouchOptimization, children: children }));
             case 'desktop':

package/dist/components/ui/layouts/adaptive-layout.js

@@ -4,7 +4,7 @@ import { useState, useEffect } from 'react';
 import { MobileLayout } from './mobile-layout.js';
 import { TabletLayout } from './tablet-layout.js';
 import { DesktopLayout } from './desktop-layout.js';
-export const AdaptiveLayout = ({ children, title = 'Adaptive Layout', description = 'Automatically adapts to different device types with optimal layouts', showHeader = true, showSidebar = true, enableTouchOptimization = true, enablePerformanceMonitoring = true, enableAdvancedFeatures = true, className = '' }) => {
+export const AdaptiveLayout = ({ children, title = 'Adaptive Layout', description = 'Automatically adapts to different device types with optimal layouts', showHeader = true, showSidebar = true, showFooter = false, enableTouchOptimization = true, enablePerformanceMonitoring = true, enableAdvancedFeatures = true, className = '' }) => {
     const [deviceType, setDeviceType] = useState('desktop');
     // Device detection and adaptation
     useEffect(() => {
@@ -40,7 +40,7 @@ export const AdaptiveLayout = ({ children, title = 'Adaptive Layout', descriptio
         };
         switch (deviceType) {
             case 'mobile':
-                return (_jsx(MobileLayout, { ...commonProps, showFooter: true, enableTouchOptimization: enableTouchOptimization, children: children }));
+                return (_jsx(MobileLayout, { ...commonProps, showFooter: showFooter, enableTouchOptimization: enableTouchOptimization, children: children }));
             case 'tablet':
                 return (_jsx(TabletLayout, { ...commonProps, showSidebar: showSidebar, enableTouchOptimization: enableTouchOptimization, children: children }));
             case 'desktop':

package/dist/components/ui/navigation/index.d.ts

@@ -8,8 +8,9 @@ export { Tabs } from './tabs';
 export { Stepper } from './stepper';
 export { Menu } from './menu';
 export { Sidebar } from './sidebar';
+export { ProgressiveNavigation } from './progressive-navigation';
 export { UserMenu } from './user-menu.js';
 export { UserAvatar } from './user-avatar.js';
 export { SubscriptionBadge } from './subscription-badge.js';
-export type { NavigationBaseProps, NavigationItem, NavigationGroup, BreadcrumbProps, BreadcrumbItem, PaginationProps, PaginationItem, TabsProps, TabItem, StepperProps, StepItem, StepAction, MenuProps, SidebarProps, NavigationState, NavigationContextValue, NavigationAction, NavigationBreakpoint, NavigationSpacing, NavigationAnimation, NavigationAccessibility, UserMenuProps, UserMenuUser, UserMenuSubscription, UserMenuItem, UserMenuGroup, UserAvatarProps, SubscriptionBadgeProps } from './types';
+export type { NavigationBaseProps, NavigationItem, NavigationGroup, BreadcrumbProps, BreadcrumbItem, PaginationProps, PaginationItem, TabsProps, TabItem, StepperProps, StepItem, StepAction, MenuProps, SidebarProps, ProgressiveNavigationProps, NavigationState, NavigationContextValue, NavigationAction, NavigationBreakpoint, NavigationSpacing, NavigationAnimation, NavigationAccessibility, UserMenuProps, UserMenuUser, UserMenuSubscription, UserMenuItem, UserMenuGroup, UserAvatarProps, SubscriptionBadgeProps } from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ui/navigation/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/navigation/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAGpC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAG5D,YAAY,EACV,mBAAmB,EACnB,cAAc,EACd,eAAe,EACf,eAAe,EACf,cAAc,EACd,eAAe,EACf,cAAc,EACd,SAAS,EACT,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,SAAS,EACT,YAAY,EACZ,eAAe,EACf,sBAAsB,EACtB,gBAAgB,EAChB,oBAAoB,EACpB,iBAAiB,EACjB,mBAAmB,EACnB,uBAAuB,EAEvB,aAAa,EACb,YAAY,EACZ,oBAAoB,EACpB,YAAY,EACZ,aAAa,EACb,eAAe,EACf,sBAAsB,EACvB,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/navigation/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAGjE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAG5D,YAAY,EACV,mBAAmB,EACnB,cAAc,EACd,eAAe,EACf,eAAe,EACf,cAAc,EACd,eAAe,EACf,cAAc,EACd,SAAS,EACT,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,SAAS,EACT,YAAY,EACZ,0BAA0B,EAC1B,eAAe,EACf,sBAAsB,EACtB,gBAAgB,EAChB,oBAAoB,EACpB,iBAAiB,EACjB,mBAAmB,EACnB,uBAAuB,EAEvB,aAAa,EACb,YAAY,EACZ,oBAAoB,EACpB,YAAY,EACZ,aAAa,EACb,eAAe,EACf,sBAAsB,EACvB,MAAM,SAAS,CAAC"}

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

@@ -8,6 +8,7 @@ export { Tabs } from './tabs';
 export { Stepper } from './stepper';
 export { Menu } from './menu';
 export { Sidebar } from './sidebar';
+export { ProgressiveNavigation } from './progressive-navigation';
 // User Menu Components
 export { UserMenu } from './user-menu.js';
 export { UserAvatar } from './user-avatar.js';

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

@@ -8,6 +8,7 @@ export { Tabs } from './tabs';
 export { Stepper } from './stepper';
 export { Menu } from './menu';
 export { Sidebar } from './sidebar';
+export { ProgressiveNavigation } from './progressive-navigation';
 // User Menu Components
 export { UserMenu } from './user-menu.js';
 export { UserAvatar } from './user-avatar.js';

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;