@rakeyshgidwani/roger-ui-bank-theme-harvey 0.2.51 → 0.3.0

package/src/components/ui/navigation/progressive-navigation.tsx

@@ -0,0 +1,453 @@
+/**
+ * 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 * as React from 'react';
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { NavigationItem, NavigationGroup } from './types.js';
+
+// Simple icon components for navigation
+const HamburgerIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+  </svg>
+);
+
+const XMarkIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+  </svg>
+);
+
+const ChevronDownIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+  </svg>
+);
+
+export interface ProgressiveNavigationProps {
+  // Navigation content
+  items?: NavigationItem[];
+  groups?: NavigationGroup[];
+
+  // Logo configuration
+  logo?: React.ReactNode;
+  logoHref?: string;
+
+  // Mobile hamburger configuration
+  hamburgerHeight?: string; // Default: 56px
+  mobileLogoSize?: 'sm' | 'md' | 'lg'; // Default: sm
+  mobileTouchTarget?: string; // Default: 48px
+
+  // Tablet horizontal-compact configuration
+  tabletHeight?: string; // Default: 64px
+  tabletLogoSize?: 'sm' | 'md' | 'lg'; // Default: md
+
+  // Desktop horizontal-full configuration
+  desktopHeight?: string; // Default: 72px
+  desktopLogoSize?: 'sm' | 'md' | 'lg'; // Default: lg
+  showSecondaryActions?: boolean; // Default: true
+  secondaryActions?: React.ReactNode[];
+
+  // Responsive behavior
+  mobileBreakpoint?: string; // Default: 640px (sm) - Controls mobile/tablet cutoff
+  tabletBreakpoint?: string; // Default: 768px (md) - Reserved for future tablet sub-patterns
+  desktopBreakpoint?: string; // Default: 1024px (lg) - Controls tablet/desktop cutoff
+
+  // Event handlers
+  onItemClick?: (item: NavigationItem) => void;
+  onLogoClick?: () => void;
+
+  // Accessibility
+  'aria-label'?: string;
+  'data-testid'?: string;
+
+  // Styling
+  className?: string;
+}
+
+export const ProgressiveNavigation: React.FC<ProgressiveNavigationProps> = ({
+  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<string | null>(null);
+  const [screenSize, setScreenSize] = useState<'mobile' | 'tablet' | 'desktop'>('desktop');
+  const navRef = useRef<HTMLElement>(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: KeyboardEvent) => {
+      if (event.key === 'Escape' && isMobileMenuOpen) {
+        setIsMobileMenuOpen(false);
+      }
+    };
+
+    if (isMobileMenuOpen) {
+      document.addEventListener('keydown', handleEscape);
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [isMobileMenuOpen]);
+
+  const handleItemClick = useCallback((item: NavigationItem) => {
+    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: string) => {
+    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 = (
+      <div className={`progressive-nav__logo progressive-nav__logo--${getLogoSize()}`}>
+        {logo}
+      </div>
+    );
+
+    if (logoHref) {
+      return (
+        <a
+          href={logoHref}
+          className="progressive-nav__logo-link"
+          onClick={handleLogoClick}
+        >
+          {logoContent}
+        </a>
+      );
+    }
+
+    return logoContent;
+  };
+
+  const renderNavigationItems = () => {
+    const allItems = groups.length > 0
+      ? groups.flatMap(group => group.items)
+      : items;
+
+    return allItems.map((item) => (
+      <button
+        key={item.id}
+        onClick={() => handleItemClick(item)}
+        disabled={item.disabled}
+        className={`progressive-nav__item ${
+          item.active ? 'progressive-nav__item--active' : ''
+        } ${item.disabled ? 'progressive-nav__item--disabled' : ''}`}
+      >
+        {item.icon && (
+          <span className="progressive-nav__item-icon">
+            {item.icon}
+          </span>
+        )}
+        <span className="progressive-nav__item-label">{item.label}</span>
+        {item.badge && (
+          <span className="progressive-nav__item-badge">{item.badge}</span>
+        )}
+      </button>
+    ));
+  };
+
+  const renderDropdownItems = (groupItems: NavigationItem[]) => {
+    return groupItems.map((item) => (
+      <button
+        key={item.id}
+        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' : ''}`}
+      >
+        {item.icon && (
+          <span className="progressive-nav__dropdown-item-icon">
+            {item.icon}
+          </span>
+        )}
+        <span className="progressive-nav__dropdown-item-label">{item.label}</span>
+        {item.badge && (
+          <span className="progressive-nav__dropdown-item-badge">{item.badge}</span>
+        )}
+      </button>
+    ));
+  };
+
+  const renderNavigationGroups = () => {
+    return groups.map((group) => (
+      <div key={group.id} className="progressive-nav__group">
+        <button
+          onClick={() => handleDropdownToggle(group.id)}
+          className={`progressive-nav__group-trigger ${
+            activeDropdown === group.id ? 'progressive-nav__group-trigger--active' : ''
+          }`}
+        >
+          <span className="progressive-nav__group-title">{group.title}</span>
+          <ChevronDownIcon
+            className={`progressive-nav__group-arrow ${
+              activeDropdown === group.id ? 'progressive-nav__group-arrow--expanded' : ''
+            }`}
+          />
+        </button>
+
+        {activeDropdown === group.id && (
+          <div className="progressive-nav__dropdown">
+            {renderDropdownItems(group.items)}
+          </div>
+        )}
+      </div>
+    ));
+  };
+
+  const renderSecondaryActions = () => {
+    if (!showSecondaryActions || !secondaryActions.length) return null;
+
+    return (
+      <div className="progressive-nav__secondary-actions">
+        {secondaryActions.map((action, index) => (
+          <div key={index} className="progressive-nav__secondary-action">
+            {action}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  // Mobile hamburger menu pattern
+  if (screenSize === 'mobile') {
+    return (
+      <nav
+        ref={navRef}
+        className={`progressive-nav progressive-nav--mobile ${className}`}
+        style={{ height: getNavigationHeight() }}
+        aria-label={ariaLabel}
+        data-testid={testId}
+      >
+        <div className="progressive-nav__mobile-container">
+          {/* Mobile header */}
+          <div className="progressive-nav__mobile-header">
+            {renderLogo()}
+
+            <button
+              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+              className="progressive-nav__mobile-toggle"
+              style={{
+                minHeight: mobileTouchTarget,
+                minWidth: mobileTouchTarget
+              }}
+              aria-label={isMobileMenuOpen ? 'Close menu' : 'Open menu'}
+              aria-expanded={isMobileMenuOpen}
+            >
+              {isMobileMenuOpen ? (
+                <XMarkIcon className="progressive-nav__mobile-toggle-icon" />
+              ) : (
+                <HamburgerIcon className="progressive-nav__mobile-toggle-icon" />
+              )}
+            </button>
+          </div>
+
+          {/* Mobile menu overlay */}
+          {isMobileMenuOpen && (
+            <>
+              <div
+                className="progressive-nav__mobile-overlay"
+                onClick={() => setIsMobileMenuOpen(false)}
+              />
+              <div className="progressive-nav__mobile-menu">
+                <div className="progressive-nav__mobile-content">
+                  {groups.length > 0 ? (
+                    <div className="progressive-nav__mobile-groups">
+                      {groups.map((group) => (
+                        <div key={group.id} className="progressive-nav__mobile-group">
+                          {group.title && (
+                            <div className="progressive-nav__mobile-group-title">
+                              {group.title}
+                            </div>
+                          )}
+                          <div className="progressive-nav__mobile-group-items">
+                            {group.items.map((item) => (
+                              <button
+                                key={item.id}
+                                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' : ''}`}
+                              >
+                                {item.icon && (
+                                  <span className="progressive-nav__mobile-item-icon">
+                                    {item.icon}
+                                  </span>
+                                )}
+                                <span className="progressive-nav__mobile-item-label">{item.label}</span>
+                                {item.badge && (
+                                  <span className="progressive-nav__mobile-item-badge">{item.badge}</span>
+                                )}
+                              </button>
+                            ))}
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  ) : (
+                    <div className="progressive-nav__mobile-items">
+                      {renderNavigationItems()}
+                    </div>
+                  )}
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      </nav>
+    );
+  }
+
+  // Tablet horizontal-compact pattern
+  if (screenSize === 'tablet') {
+    return (
+      <nav
+        ref={navRef}
+        className={`progressive-nav progressive-nav--tablet ${className}`}
+        style={{ height: getNavigationHeight() }}
+        aria-label={ariaLabel}
+        data-testid={testId}
+      >
+        <div className="progressive-nav__tablet-container">
+          {renderLogo()}
+
+          <div className="progressive-nav__tablet-content">
+            {groups.length > 0 ? renderNavigationGroups() : (
+              <div className="progressive-nav__tablet-items">
+                {renderNavigationItems()}
+              </div>
+            )}
+          </div>
+        </div>
+      </nav>
+    );
+  }
+
+  // Desktop horizontal-full pattern
+  return (
+    <nav
+      ref={navRef}
+      className={`progressive-nav progressive-nav--desktop ${className}`}
+      style={{ height: getNavigationHeight() }}
+      aria-label={ariaLabel}
+      data-testid={testId}
+    >
+      <div className="progressive-nav__desktop-container">
+        {renderLogo()}
+
+        <div className="progressive-nav__desktop-content">
+          {groups.length > 0 ? renderNavigationGroups() : (
+            <div className="progressive-nav__desktop-items">
+              {renderNavigationItems()}
+            </div>
+          )}
+        </div>
+
+        {renderSecondaryActions()}
+      </div>
+    </nav>
+  );
+};
+
+export default ProgressiveNavigation;

package/src/components/ui/navigation/types.ts

@@ -215,6 +215,47 @@ export interface MenuProps extends NavigationBaseProps {
   onSelectionChange?: (selectedItems: string[]) => void;
 }
 
+// ============================================================================
+// PROGRESSIVE NAVIGATION COMPONENT TYPES (Phase 2 Enhancement)
+// ============================================================================
+
+export interface ProgressiveNavigationProps extends NavigationBaseProps {
+  // Navigation content
+  items?: NavigationItem[];
+  groups?: NavigationGroup[];
+
+  // Logo configuration
+  logo?: React.ReactNode;
+  logoHref?: string;
+
+  // Mobile hamburger configuration
+  hamburgerHeight?: string; // Default: 56px
+  mobileLogoSize?: 'sm' | 'md' | 'lg'; // Default: sm
+  mobileTouchTarget?: string; // Default: 48px
+
+  // Tablet horizontal-compact configuration
+  tabletHeight?: string; // Default: 64px
+  tabletLogoSize?: 'sm' | 'md' | 'lg'; // Default: md
+
+  // Desktop horizontal-full configuration
+  desktopHeight?: string; // Default: 72px
+  desktopLogoSize?: 'sm' | 'md' | 'lg'; // Default: lg
+  showSecondaryActions?: boolean; // Default: true
+  secondaryActions?: React.ReactNode[];
+
+  // Responsive behavior
+  mobileBreakpoint?: string; // Default: 640px (sm)
+  tabletBreakpoint?: string; // Default: 768px (md)
+  desktopBreakpoint?: string; // Default: 1024px (lg)
+
+  // Event handlers
+  onItemClick?: (item: NavigationItem) => void;
+  onLogoClick?: () => void;
+
+  // Accessibility
+  'aria-label'?: string;
+}
+
 // ============================================================================
 // SIDEBAR COMPONENT TYPES
 // ============================================================================

package/src/components/ui/theme-toggle.tsx

@@ -40,16 +40,16 @@ export const ThemeToggle: React.FC = () => {
   return (
     <Button
       variant="ghost"
-      size="sm"
+      size="icon"
       onClick={toggleTheme}
-      className="theme-toggle h-8 w-8 px-0"
+      style={{ borderRadius: 'var(--cs-border-radius-full)' }}
       aria-label={`Switch to ${isDark ? 'light' : 'dark'} mode`}
       aria-pressed={isDark}
     >
       {isDark ? (
-        <Sun className="h-4 w-4 sun-icon" />
+        <Sun style={{ width: 'var(--button-icon-size)', height: 'var(--button-icon-size)' }} />
       ) : (
-        <Moon className="h-4 w-4 moon-icon" />
+        <Moon style={{ width: 'var(--button-icon-size)', height: 'var(--button-icon-size)' }} />
       )}
     </Button>
   );

package/src/hooks/use-adaptive-layout.ts

@@ -2,7 +2,7 @@ import { useState, useEffect, useCallback, useMemo } from 'react'
 
 export type DeviceType = 'mobile' | 'tablet' | 'desktop'
 export type Orientation = 'portrait' | 'landscape'
-export type ScreenSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+export type ScreenSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
 
 export interface AdaptiveLayoutState {
   deviceType: DeviceType
@@ -28,6 +28,7 @@ export interface AdaptiveLayoutConfig {
     lg: number
     xl: number
     '2xl': number
+    '3xl': number
   }
 }
 
@@ -49,12 +50,13 @@ export const useAdaptiveLayout = (
     enableBatteryOptimization = true,
     enableMemoryOptimization = true,
     breakpoints = {
-      xs: 0,
-      sm: 640,
-      md: 768,
-      lg: 1024,
-      xl: 1280,
-      '2xl': 1536
+      xs: 475,     // Phase 1: Large phones (iPhone 14 Plus, etc.)
+      sm: 640,     // Small tablets, large phones landscape
+      md: 768,     // Tablets (iPad Mini, etc.)
+      lg: 1024,    // Desktop, large tablets
+      xl: 1280,    // Large desktop (MacBook Pro 13")
+      '2xl': 1536, // Ultra-wide (MacBook Pro 16", external monitors)
+      '3xl': 1920  // Large external monitors, TV displays
     }
   } = config
 
@@ -79,12 +81,14 @@ export const useAdaptiveLayout = (
 
   // Screen size detection
   const detectScreenSize = useCallback((width: number): ScreenSize => {
-    if (width < breakpoints.sm) return 'xs'
+    if (width < breakpoints.xs) return 'xs' // Small phones (< 475px)
+    if (width < breakpoints.sm) return 'xs' // Still xs for 475-640px range
     if (width < breakpoints.md) return 'sm'
     if (width < breakpoints.lg) return 'md'
     if (width < breakpoints.xl) return 'lg'
     if (width < breakpoints['2xl']) return 'xl'
-    return '2xl'
+    if (width < breakpoints['3xl']) return '2xl'
+    return '3xl'
   }, [breakpoints])
 
   // Touch device detection

package/src/hooks/use-device.tsx

@@ -6,16 +6,18 @@ export interface DeviceInfo {
   isMobile: boolean
   isTablet: boolean
   isDesktop: boolean
-  screenSize: 'mobile' | 'tablet' | 'desktop'
+  isLargeDisplay: boolean
+  screenSize: 'mobile' | 'tablet' | 'desktop' | 'largeDisplay'
   orientation: 'portrait' | 'landscape'
   touchDevice: boolean
 }
 
-// Breakpoints based on common device sizes
+// Updated breakpoints to align with Phase 1 Enhanced Breakpoint System
+// xs: 475px, sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px, 3xl: 1920px
 const BREAKPOINTS = {
-  mobile: 768,
-  tablet: 1024,
-  desktop: 1440
+  mobile: 768,      // xs-sm range (475-768px)
+  tablet: 1024,     // md range (768-1024px)
+  desktop: 1536     // lg-xl range (1024-1536px), largeDisplay starts at 1536px+ (2xl-3xl)
 } as const
 
 /**
@@ -27,6 +29,7 @@ export const useDevice = (): DeviceInfo => {
     isMobile: false,
     isTablet: false,
     isDesktop: false,
+    isLargeDisplay: false,
     screenSize: 'desktop',
     orientation: 'landscape',
     touchDevice: false
@@ -37,16 +40,18 @@ export const useDevice = (): DeviceInfo => {
       const width = window.innerWidth
       const height = window.innerHeight
       
-      // Determine device type based on width
+      // Determine device type based on width (aligned with new breakpoint system)
       const isMobile = width < BREAKPOINTS.mobile
       const isTablet = width >= BREAKPOINTS.mobile && width < BREAKPOINTS.tablet
-      const isDesktop = width >= BREAKPOINTS.tablet
-      
+      const isDesktop = width >= BREAKPOINTS.tablet && width < BREAKPOINTS.desktop
+      const isLargeDisplay = width >= BREAKPOINTS.desktop
+
       // Determine screen size category
       let screenSize: DeviceInfo['screenSize']
       if (isMobile) screenSize = 'mobile'
       else if (isTablet) screenSize = 'tablet'
-      else screenSize = 'desktop'
+      else if (isDesktop) screenSize = 'desktop'
+      else screenSize = 'largeDisplay'
       
       // Determine orientation
       const orientation: DeviceInfo['orientation'] = width > height ? 'landscape' : 'portrait'
@@ -61,6 +66,7 @@ export const useDevice = (): DeviceInfo => {
         isMobile,
         isTablet,
         isDesktop,
+        isLargeDisplay,
         screenSize,
         orientation,
         touchDevice
@@ -92,8 +98,9 @@ export const useDevice = (): DeviceInfo => {
 
 // Convenience hooks for specific use cases
 export const useIsMobile = () => useDevice().isMobile
-export const useIsTablet = () => useDevice().isTablet  
+export const useIsTablet = () => useDevice().isTablet
 export const useIsDesktop = () => useDevice().isDesktop
+export const useIsLargeDisplay = () => useDevice().isLargeDisplay
 export const useOrientation = () => useDevice().orientation
 export const useIsTouchDevice = () => useDevice().touchDevice