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

package/src/themes/navigation.ts

@@ -0,0 +1,238 @@
+/**
+ * Navigation Theme System
+ * Provides comprehensive navigation layout and style variations
+ */
+
+export interface NavigationThemeConfig {
+  layout: NavigationLayout;
+  style: NavigationStyle;
+  behavior: NavigationBehavior;
+  responsive: NavigationResponsive;
+  animations: NavigationAnimations;
+  spacing: NavigationSpacing;
+  colors: NavigationColors;
+  typography: NavigationTypography;
+  breakpoints: NavigationBreakpoints;
+}
+
+export type NavigationLayout = 'horizontal' | 'vertical' | 'sidebar' | 'tabs' | 'breadcrumb' | 'pagination';
+
+export type NavigationStyle = 'minimal' | 'standard' | 'enhanced' | 'enterprise' | 'creative';
+
+export type NavigationBehavior = 'static' | 'sticky' | 'floating' | 'overlay' | 'collapsible';
+
+export type NavigationResponsive = 'mobile-first' | 'desktop-first' | 'adaptive';
+
+export interface NavigationAnimations {
+  duration: NavigationDuration;
+  easing: NavigationEasing;
+  stagger: NavigationStagger;
+  transitions: NavigationTransitions;
+}
+
+export interface NavigationDuration {
+  fast: string;
+  normal: string;
+  slow: string;
+  instant: string;
+}
+
+export interface NavigationEasing {
+  linear: string;
+  ease: string;
+  easeIn: string;
+  easeOut: string;
+  easeInOut: string;
+  bounce: string;
+  elastic: string;
+}
+
+export interface NavigationStagger {
+  enabled: boolean;
+  delay: string;
+  direction: 'forward' | 'reverse' | 'random';
+}
+
+export interface NavigationTransitions {
+  enter: string;
+  exit: string;
+  move: string;
+  resize: string;
+}
+
+export interface NavigationSpacing {
+  container: string;
+  item: string;
+  group: string;
+  divider: string;
+  icon: string;
+  text: string;
+  padding: NavigationPadding;
+  margin: NavigationMargin;
+}
+
+export interface NavigationPadding {
+  horizontal: string;
+  vertical: string;
+  top: string;
+  right: string;
+  bottom: string;
+  left: string;
+}
+
+export interface NavigationMargin {
+  horizontal: string;
+  vertical: string;
+  top: string;
+  right: string;
+  bottom: string;
+  left: string;
+}
+
+export interface NavigationColors {
+  background: NavigationColorVariants;
+  text: NavigationColorVariants;
+  border: NavigationColorVariants;
+  accent: NavigationColorVariants;
+  hover: NavigationColorVariants;
+  active: NavigationColorVariants;
+  disabled: NavigationColorVariants;
+  focus: NavigationColorVariants;
+}
+
+export interface NavigationColorVariants {
+  primary: string;
+  secondary: string;
+  tertiary: string;
+  light: string;
+  dark: string;
+  contrast: string;
+}
+
+export interface NavigationTypography {
+  fontFamily: string;
+  fontSize: NavigationFontSizes;
+  fontWeight: NavigationFontWeights;
+  lineHeight: NavigationLineHeights;
+  letterSpacing: NavigationLetterSpacing;
+}
+
+export interface NavigationFontSizes {
+  xs: string;
+  sm: string;
+  base: string;
+  lg: string;
+  xl: string;
+  '2xl': string;
+}
+
+export interface NavigationFontWeights {
+  light: string;
+  normal: string;
+  medium: string;
+  semibold: string;
+  bold: string;
+}
+
+export interface NavigationLineHeights {
+  tight: string;
+  normal: string;
+  relaxed: string;
+  loose: string;
+}
+
+export interface NavigationLetterSpacing {
+  tight: string;
+  normal: string;
+  wide: string;
+  wider: string;
+}
+
+export interface NavigationBreakpoints {
+  mobile: string;
+  tablet: string;
+  desktop: string;
+  wide: string;
+  ultra: string;
+}
+
+// Navigation Component Configurations
+export interface NavigationComponentConfig {
+  type: NavigationLayout;
+  variant: NavigationStyle;
+  size: 'sm' | 'md' | 'lg' | 'xl';
+  fullWidth: boolean;
+  centered: boolean;
+  justified: boolean;
+  stacked: boolean;
+}
+
+// Navigation Item Configuration
+export interface NavigationItemConfig {
+  id: string;
+  label: string;
+  href?: string;
+  icon?: string;
+  badge?: NavigationBadge;
+  children?: NavigationItemConfig[];
+  disabled?: boolean;
+  hidden?: boolean;
+  active?: boolean;
+}
+
+export interface NavigationBadge {
+  text: string;
+  variant: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error';
+  size: 'sm' | 'md' | 'lg';
+}
+
+// Navigation State Management
+export interface NavigationState {
+  isOpen: boolean;
+  isCollapsed: boolean;
+  activeItem: string | null;
+  hoveredItem: string | null;
+  focusedItem: string | null;
+  expandedItems: string[];
+}
+
+// Navigation Events
+export interface NavigationEvents {
+  onItemClick: (item: NavigationItemConfig) => void;
+  onItemHover: (item: NavigationItemConfig) => void;
+  onItemFocus: (item: NavigationItemConfig) => void;
+  onToggle: (isOpen: boolean) => void;
+  onCollapse: (isCollapsed: boolean) => void;
+}
+
+// Navigation Accessibility
+export interface NavigationAccessibility {
+  ariaLabel: string;
+  ariaExpanded: boolean;
+  ariaHidden: boolean;
+  role: string;
+  tabIndex: number;
+  keyboardNavigation: boolean;
+  screenReaderSupport: boolean;
+}
+
+// Navigation Performance
+export interface NavigationPerformance {
+  lazyLoading: boolean;
+  virtualization: boolean;
+  debounceDelay: number;
+  throttleDelay: number;
+  cacheSize: number;
+}
+
+// Navigation Theme Presets
+export interface NavigationThemePreset {
+  name: string;
+  description: string;
+  config: NavigationThemeConfig;
+  preview: string;
+  tags: string[];
+  category: NavigationStyle;
+}
+
+

package/src/themes/phase1-constants.ts

@@ -0,0 +1,189 @@
+/**
+ * Phase 1 Enhancement: Shared Constants
+ *
+ * This file contains shared constants for the Phase 1 mobile support enhancement
+ * to ensure consistency across themes and prevent duplication.
+ */
+
+import { BreakpointThemeConfig, ContentDensityThemeConfig, ResponsiveTypographyThemeConfig } from './types';
+
+// Enhanced Breakpoint System - Shared across all themes
+export const PHASE1_BREAKPOINTS: BreakpointThemeConfig = {
+  xs: '475px',   // Large phones (iPhone 14 Plus, etc.)
+  sm: '640px',   // Small tablets, large phones landscape
+  md: '768px',   // Tablets (iPad Mini, etc.)
+  lg: '1024px',  // Desktop, large tablets
+  xl: '1280px',  // Large desktop (MacBook Pro 13")
+  '2xl': '1536px', // Ultra-wide (MacBook Pro 16", external monitors)
+  '3xl': '1920px'  // Large external monitors, TV displays
+};
+
+// Content Density System - Shared across all themes
+export const PHASE1_CONTENT_DENSITY: ContentDensityThemeConfig = {
+  compact: {
+    spacing: {
+      section: '16px 24px',
+      component: '8px 12px',
+      element: '4px 8px'
+    },
+    typography: {
+      scale: 0.875, // 14px base instead of 16px
+      lineHeight: 1.4
+    },
+    touchTargets: {
+      minimum: '44px', // Apple/WCAG recommendation
+      preferred: '48px'
+    }
+  },
+  comfortable: {
+    spacing: {
+      section: '24px 32px',
+      component: '12px 16px',
+      element: '6px 12px'
+    },
+    typography: {
+      scale: 1.0, // 16px base
+      lineHeight: 1.5
+    },
+    touchTargets: {
+      minimum: '40px',
+      preferred: '44px'
+    }
+  },
+  spacious: {
+    spacing: {
+      section: '32px 48px',
+      component: '16px 24px',
+      element: '8px 16px'
+    },
+    typography: {
+      scale: 1.125, // 18px base for better readability
+      lineHeight: 1.6
+    },
+    interactions: {
+      hover: true,
+      tooltips: true,
+      shortcuts: true
+    }
+  }
+};
+
+// Responsive Typography System - Shared across all themes
+export const PHASE1_RESPONSIVE_TYPOGRAPHY: ResponsiveTypographyThemeConfig = {
+  heading1: {
+    xs: '28px',   // Large phone
+    sm: '32px',   // Small tablet
+    md: '36px',   // Tablet
+    lg: '42px',   // Desktop
+    xl: '48px',   // Large desktop
+    '2xl': '56px', // Ultra-wide
+    '3xl': '64px'  // Large displays
+  },
+  heading2: {
+    xs: '24px',
+    sm: '26px',
+    md: '28px',
+    lg: '32px',
+    xl: '36px',
+    '2xl': '40px',
+    '3xl': '44px'
+  },
+  heading3: {
+    xs: '20px',
+    sm: '22px',
+    md: '24px',
+    lg: '28px',
+    xl: '30px',
+    '2xl': '32px',
+    '3xl': '36px'
+  },
+  heading4: {
+    xs: '18px',
+    sm: '20px',
+    md: '22px',
+    lg: '24px',
+    xl: '26px',
+    '2xl': '28px',
+    '3xl': '30px'
+  },
+  heading5: {
+    xs: '16px',
+    sm: '18px',
+    md: '20px',
+    lg: '22px',
+    xl: '24px',
+    '2xl': '26px',
+    '3xl': '28px'
+  },
+  heading6: {
+    xs: '14px',
+    sm: '16px',
+    md: '18px',
+    lg: '20px',
+    xl: '22px',
+    '2xl': '24px',
+    '3xl': '26px'
+  },
+  body: {
+    xs: '14px',
+    sm: '15px',
+    md: '16px',
+    lg: '17px',
+    xl: '18px',
+    '2xl': '18px',
+    '3xl': '19px'
+  },
+  bodyLarge: {
+    xs: '16px',
+    sm: '17px',
+    md: '18px',
+    lg: '19px',
+    xl: '20px',
+    '2xl': '21px',
+    '3xl': '22px'
+  },
+  bodySmall: {
+    xs: '12px',
+    sm: '13px',
+    md: '14px',
+    lg: '15px',
+    xl: '16px',
+    '2xl': '16px',
+    '3xl': '17px'
+  },
+  caption: {
+    xs: '11px',
+    sm: '12px',
+    md: '13px',
+    lg: '14px',
+    xl: '15px',
+    '2xl': '15px',
+    '3xl': '16px'
+  }
+};
+
+/**
+ * Helper function to get complete Phase 1 configuration for any theme
+ */
+export function getPhase1ThemeExtensions() {
+  return {
+    breakpoints: PHASE1_BREAKPOINTS,
+    contentDensity: PHASE1_CONTENT_DENSITY,
+    responsiveTypography: PHASE1_RESPONSIVE_TYPOGRAPHY
+  };
+}
+
+/**
+ * Helper function to check if a theme has Phase 1 compliance
+ */
+export function isPhase1Compliant(theme: any): boolean {
+  return !!(
+    theme.breakpoints?.xs &&
+    theme.breakpoints?.['3xl'] &&
+    theme.contentDensity?.compact &&
+    theme.contentDensity?.comfortable &&
+    theme.contentDensity?.spacious &&
+    theme.responsiveTypography?.heading1?.xs &&
+    theme.responsiveTypography?.heading1?.['3xl']
+  );
+}