@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.11 → 0.2.17

package/dist/hooks/use-mobile-form-layout.d.ts

@@ -1,462 +1,127 @@
 export interface LayoutConfig {
-  enableTouchOptimization: boolean
-  enableKeyboardOptimization: boolean
-  enableResponsiveBehavior: boolean
-  enablePerformanceOptimization: boolean
-  touchTargetSize: number
-  spacingMultiplier: number
-  maxFieldWidth: number
-  enableAutoFocus: boolean
+    enableTouchOptimization: boolean;
+    enableKeyboardOptimization: boolean;
+    enableResponsiveBehavior: boolean;
+    enablePerformanceOptimization: boolean;
+    touchTargetSize: number;
+    spacingMultiplier: number;
+    maxFieldWidth: number;
+    enableAutoFocus: boolean;
 }
-
 export interface LayoutState {
-  isMobile: boolean
-  isTablet: boolean
-  isDesktop: boolean
-  orientation: 'portrait' | 'landscape'
-  keyboardVisible: boolean
-  viewportHeight: number
-  viewportWidth: number
-  safeAreaInsets: {
-    top: number
-    bottom: number
-    left: number
-    right: number
-  }
+    isMobile: boolean;
+    isTablet: boolean;
+    isDesktop: boolean;
+    orientation: 'portrait' | 'landscape';
+    keyboardVisible: boolean;
+    viewportHeight: number;
+    viewportWidth: number;
+    safeAreaInsets: {
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+    };
 }
-
 export interface LayoutCallbacks {
-  onLayoutChange?: (layout: LayoutState) => void
-  onOrientationChange?: (orientation: 'portrait' | 'landscape') => void
-  onKeyboardVisibilityChange?: (visible: boolean) => void
-  onViewportChange?: (width: number, height: number) => void
+    onLayoutChange?: (layout: LayoutState) => void;
+    onOrientationChange?: (orientation: 'portrait' | 'landscape') => void;
+    onKeyboardVisibilityChange?: (visible: boolean) => void;
+    onViewportChange?: (width: number, height: number) => void;
 }
-
 export interface MobileFormLayoutState {
-  layout: LayoutState
-  isOptimized: boolean
-  currentSpacing: number
-  currentFieldWidth: number
-  performanceMetrics: {
-    layoutUpdates: number
-    lastUpdateTime: number
-    optimizationScore: number
-  }
-}
-
-export declare const useMobileFormLayout: (
-  callbacks: LayoutCallbacks = {},
-  config: Partial<LayoutConfig> = {}
-) => {
-  const defaultConfig: LayoutConfig = {
-    enableTouchOptimization: true,
-    enableKeyboardOptimization: true,
-    enableResponsiveBehavior: true,
-    enablePerformanceOptimization: true,
-    touchTargetSize: 44,
-    spacingMultiplier: 1.2,
-    maxFieldWidth: 400,
-    enableAutoFocus: true,
-    ...config
-  }
-
-  const [layoutState, setLayoutState] = useState<MobileFormLayoutState>({
-    layout: {
-      isMobile: false,
-      isTablet: false,
-      isDesktop: false,
-      orientation: 'portrait',
-      keyboardVisible: false,
-      viewportHeight: window.innerHeight,
-      viewportWidth: window.innerWidth,
-      safeAreaInsets: { top: 0, bottom: 0, left: 0, right: 0 }
-    },
-    isOptimized: false,
-    currentSpacing: defaultConfig.touchTargetSize * defaultConfig.spacingMultiplier,
-    currentFieldWidth: Math.min(window.innerWidth - 32, defaultConfig.maxFieldWidth),
+    layout: LayoutState;
+    isOptimized: boolean;
+    currentSpacing: number;
+    currentFieldWidth: number;
     performanceMetrics: {
-      layoutUpdates: 0,
-      lastUpdateTime: 0,
-      optimizationScore: 0
-    }
-  })
-
-  const resizeObserverRef = useRef<ResizeObserver | null>(null)
-  const layoutUpdateTimerRef = useRef<NodeJS.Timeout | null>(null)
-  const keyboardTimerRef = useRef<NodeJS.Timeout | null>(null)
-
-  // Detect device type
-  const detectDeviceType = useCallback(() => {
-    const width = window.innerWidth
-    const userAgent = navigator.userAgent.toLowerCase()
-
-    let isMobile = false
-    let isTablet = false
-    let isDesktop = false
-
-    // Check screen size
-    if (width < 768) {
-      isMobile = true
-    } else if (width < 1024) {
-      isTablet = true
-    } else {
-      isDesktop = true
-    }
-
-    // Check user agent for mobile devices
-    if (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent)) {
-      isMobile = true
-      isTablet = width >= 768 && width < 1024
-      isDesktop = false
-    }
-
-    return { isMobile, isTablet, isDesktop }
-  }, [])
-
-  // Detect orientation
-  const detectOrientation = useCallback((): 'portrait' | 'landscape' => {
-    if (window.innerHeight > window.innerWidth) {
-      return 'portrait'
-    }
-    return 'landscape'
-  }, [])
-
-  // Get safe area insets (for devices with notches)
-  const getSafeAreaInsets = useCallback(() => {
-    const style = getComputedStyle(document.documentElement)
-
-    return {
-      top: parseInt(style.getPropertyValue('--sat') || '0'),
-      bottom: parseInt(style.getPropertyValue('--sab') || '0'),
-      left: parseInt(style.getPropertyValue('--sal') || '0'),
-      right: parseInt(style.getPropertyValue('--sar') || '0')
-    }
-  }, [])
-
-  // Detect keyboard visibility
-  const detectKeyboardVisibility = useCallback(() => {
-    if (!defaultConfig.enableKeyboardOptimization) return false
-
-    const currentHeight = window.innerHeight
-    const currentWidth = window.innerWidth
-
-    // Simple heuristic: if height decreases significantly and width stays the same
-    // it's likely the keyboard appeared
-    const heightRatio = currentHeight / layoutState.layout.viewportHeight
-    const widthRatio = currentWidth / layoutState.layout.viewportWidth
-
-    return heightRatio < 0.8 && widthRatio > 0.95
-  }, [defaultConfig.enableKeyboardOptimization, layoutState.layout.viewportHeight, layoutState.layout.viewportWidth])
-
-  // Update layout state
-  const updateLayout = useCallback(() => {
-    const deviceType = detectDeviceType()
-    const orientation = detectOrientation()
-    const safeAreaInsets = getSafeAreaInsets()
-    const keyboardVisible = detectKeyboardVisibility()
-
-    const newLayout: LayoutState = {
-      ...deviceType,
-      orientation,
-      keyboardVisible,
-      viewportHeight: window.innerHeight,
-      viewportWidth: window.innerWidth,
-      safeAreaInsets
-    }
-
-    // Calculate optimal spacing and field width
-    let spacing = defaultConfig.touchTargetSize * defaultConfig.spacingMultiplier
-    let fieldWidth = Math.min(window.innerWidth - 32, defaultConfig.maxFieldWidth)
-
-    // Adjust for mobile devices
-    if (newLayout.isMobile) {
-      spacing = Math.max(spacing, 16) // Minimum spacing for mobile
-      fieldWidth = Math.min(fieldWidth, window.innerWidth - 24) // Account for safe areas
-    }
-
-    // Adjust for keyboard visibility
-    if (newLayout.keyboardVisible) {
-      spacing = Math.max(spacing * 0.8, 12) // Reduce spacing when keyboard is visible
-      fieldWidth = Math.min(fieldWidth, window.innerWidth - 16)
-    }
-
-    // Adjust for orientation
-    if (newLayout.orientation === 'landscape' && newLayout.isMobile) {
-      spacing = Math.max(spacing * 0.9, 14)
-      fieldWidth = Math.min(fieldWidth, window.innerHeight - 24)
-    }
-
-    setLayoutState(prev => {
-      const newState = {
-        ...prev,
-        layout: newLayout,
-        currentSpacing: spacing,
-        currentFieldWidth: fieldWidth,
-        performanceMetrics: {
-          ...prev.performanceMetrics,
-          layoutUpdates: prev.performanceMetrics.layoutUpdates + 1,
-          lastUpdateTime: Date.now()
-        }
-      }
-
-      // Calculate optimization score
-      const score = calculateOptimizationScore(newState)
-      newState.performanceMetrics.optimizationScore = score
-      newState.isOptimized = score >= 0.8
-
-      return newState
-    })
-
-    // Notify callbacks
-    callbacks.onLayoutChange?.(newLayout)
-    callbacks.onOrientationChange?.(orientation)
-    callbacks.onKeyboardVisibilityChange?.(keyboardVisible)
-    callbacks.onViewportChange?.(window.innerWidth, window.innerHeight)
-  }, [
-    detectDeviceType,
-    detectOrientation,
-    getSafeAreaInsets,
-    detectKeyboardVisibility,
-    defaultConfig.touchTargetSize,
-    defaultConfig.spacingMultiplier,
-    defaultConfig.maxFieldWidth,
-    callbacks
-  ])
-
-  // Calculate optimization score
-  const calculateOptimizationScore = useCallback((state: MobileFormLayoutState): number => {
-    let score = 0
-    const { layout, currentSpacing, currentFieldWidth } = state
-
-    // Touch target optimization (40% weight)
-    if (currentSpacing >= defaultConfig.touchTargetSize) {
-      score += 0.4
-    } else if (currentSpacing >= defaultConfig.touchTargetSize * 0.8) {
-      score += 0.3
-    } else if (currentSpacing >= defaultConfig.touchTargetSize * 0.6) {
-      score += 0.2
-    }
-
-    // Field width optimization (30% weight)
-    const optimalWidth = Math.min(layout.viewportWidth - 32, defaultConfig.maxFieldWidth)
-    const widthRatio = currentFieldWidth / optimalWidth
-    if (widthRatio >= 0.9) {
-      score += 0.3
-    } else if (widthRatio >= 0.7) {
-      score += 0.2
-    } else if (widthRatio >= 0.5) {
-      score += 0.1
-    }
-
-    // Responsive behavior (20% weight)
-    if (layout.isMobile && layout.orientation === 'portrait') {
-      score += 0.2
-    } else if (layout.isMobile && layout.orientation === 'landscape') {
-      score += 0.15
-    } else if (layout.isTablet) {
-      score += 0.1
-    }
-
-    // Performance optimization (10% weight)
-    if (state.performanceMetrics.layoutUpdates < 10) {
-      score += 0.1
-    } else if (state.performanceMetrics.layoutUpdates < 20) {
-      score += 0.05
-    }
-
-    return Math.min(score, 1)
-  }, [defaultConfig.touchTargetSize, defaultConfig.maxFieldWidth])
-
-  // Debounced layout update
-  const debouncedUpdateLayout = useCallback(() => {
-    if (layoutUpdateTimerRef.current) {
-      clearTimeout(layoutUpdateTimerRef.current)
-    }
-
-    layoutUpdateTimerRef.current = setTimeout(() => {
-      updateLayout()
-    }, 100) // 100ms debounce
-  }, [updateLayout])
-
-  // Handle window resize
-  const handleResize = useCallback(() => {
-    if (defaultConfig.enableResponsiveBehavior) {
-      debouncedUpdateLayout()
-    }
-  }, [defaultConfig.enableResponsiveBehavior, debouncedUpdateLayout])
-
-  // Handle orientation change
-  const handleOrientationChange = useCallback(() => {
-    if (defaultConfig.enableResponsiveBehavior) {
-      // Add delay for orientation change to complete
-      setTimeout(() => {
-        updateLayout()
-      }, 300)
-    }
-  }, [defaultConfig.enableResponsiveBehavior, updateLayout])
-
-  // Handle keyboard visibility changes
-  const handleKeyboardChange = useCallback(() => {
-    if (defaultConfig.enableKeyboardOptimization) {
-      if (keyboardTimerRef.current) {
-        clearTimeout(keyboardTimerRef.current)
-      }
-
-      keyboardTimerRef.current = setTimeout(() => {
-        updateLayout()
-      }, 150) // Small delay to detect keyboard changes
-    }
-  }, [defaultConfig.enableKeyboardOptimization, updateLayout])
-
-  // Set up resize observer for more precise layout detection
-  useEffect(() => {
-    if (defaultConfig.enablePerformanceOptimization && 'ResizeObserver' in window) {
-      resizeObserverRef.current = new ResizeObserver(() => {
-        handleResize()
-      })
-
-      resizeObserverRef.current.observe(document.body)
-    }
-
-    return () => {
-      if (resizeObserverRef.current) {
-        resizeObserverRef.current.disconnect()
-      }
-    }
-  }, [defaultConfig.enablePerformanceOptimization, handleResize])
-
-  // Set up window event listeners
-  useEffect(() => {
-    if (defaultConfig.enableResponsiveBehavior) {
-      window.addEventListener('resize', handleResize)
-      window.addEventListener('orientationchange', handleOrientationChange)
-
-      // Listen for visual viewport changes (better for mobile)
-      if ('visualViewport' in window) {
-        (window as any).visualViewport.addEventListener('resize', handleKeyboardChange)
-      }
-    }
-
-    return () => {
-      window.removeEventListener('resize', handleResize)
-      window.removeEventListener('orientationchange', handleOrientationChange)
-
-      if ('visualViewport' in window) {
-        (window as any).visualViewport.removeEventListener('resize', handleKeyboardChange)
-      }
-    }
-  }, [defaultConfig.enableResponsiveBehavior, handleResize, handleOrientationChange, handleKeyboardChange])
-
-  // Initial layout detection
-  useEffect(() => {
-    updateLayout()
-  }, [updateLayout])
-
-  // Get CSS classes for layout optimization
-  const getLayoutClasses = useCallback(() => {
-    const { layout, isOptimized } = layoutState
-    const classes = ['mobile-form-layout']
-
-    if (layout.isMobile) {
-      classes.push('layout-mobile')
-      if (layout.orientation === 'portrait') {
-        classes.push('layout-portrait')
-      } else {
-        classes.push('layout-landscape')
-      }
-    } else if (layout.isTablet) {
-      classes.push('layout-tablet')
-    } else {
-      classes.push('layout-desktop')
-    }
-
-    if (layout.keyboardVisible) {
-      classes.push('layout-keyboard-visible')
-    }
-
-    if (isOptimized) {
-      classes.push('layout-optimized')
-    }
-
-    return classes.join(' ')
-  }, [layoutState])
-
-  // Get CSS variables for dynamic styling
-  const getLayoutCSSVariables = useCallback(() => {
-    const { currentSpacing, currentFieldWidth } = layoutState
-
-    return {
-      '--mobile-spacing': `${currentSpacing}px`,
-      '--mobile-field-width': `${currentFieldWidth}px`,
-      '--touch-target-size': `${defaultConfig.touchTargetSize}px`,
-      '--safe-area-top': `${layoutState.layout.safeAreaInsets.top}px`,
-      '--safe-area-bottom': `${layoutState.layout.safeAreaInsets.bottom}px`,
-      '--safe-area-left': `${layoutState.layout.safeAreaInsets.left}px`,
-      '--safe-area-right': `${layoutState.layout.safeAreaInsets.right}px`
-    }
-  }, [layoutState, defaultConfig.touchTargetSize])
-
-  // Auto-focus first input when layout changes
-  const autoFocusFirstInput = useCallback(() => {
-    if (!defaultConfig.enableAutoFocus) return
-
-    const firstInput = document.querySelector('input, textarea, select') as HTMLElement
-    if (firstInput && layoutState.layout.isMobile) {
-      // Small delay to ensure layout is stable
-      setTimeout(() => {
-        firstInput.focus()
-      }, 100)
-    }
-  }, [defaultConfig.enableAutoFocus, layoutState.layout.isMobile])
-
-  // Clean up timers on unmount
-  useEffect(() => {
-    return () => {
-      if (layoutUpdateTimerRef.current) {
-        clearTimeout(layoutUpdateTimerRef.current)
-      }
-      if (keyboardTimerRef.current) {
-        clearTimeout(keyboardTimerRef.current)
-      }
-    }
-  }, [])
-
-  return {
-    layoutState,
-    updateLayout,
-    getLayoutClasses,
-    getLayoutCSSVariables,
-    autoFocusFirstInput,
-    isMobile: layoutState.layout.isMobile,
-    isTablet: layoutState.layout.isTablet,
-    isDesktop: layoutState.layout.isDesktop,
-    orientation: layoutState.layout.orientation,
-    keyboardVisible: layoutState.layout.keyboardVisible,
-    currentSpacing: layoutState.currentSpacing,
-    currentFieldWidth: layoutState.currentFieldWidth,
-    isOptimized: layoutState.isOptimized,
-    performanceMetrics: layoutState.performanceMetrics
-  }
+        layoutUpdates: number;
+        lastUpdateTime: number;
+        optimizationScore: number;
+    };
 }
-
-// Convenience hook for basic mobile layout
+export declare const useMobileFormLayout: (callbacks?: LayoutCallbacks, config?: Partial<LayoutConfig>) => {
+    layoutState: MobileFormLayoutState;
+    updateLayout: () => void;
+    getLayoutClasses: () => string;
+    getLayoutCSSVariables: () => {
+        '--mobile-spacing': string;
+        '--mobile-field-width': string;
+        '--touch-target-size': string;
+        '--safe-area-top': string;
+        '--safe-area-bottom': string;
+        '--safe-area-left': string;
+        '--safe-area-right': string;
+    };
+    autoFocusFirstInput: () => void;
+    isMobile: boolean;
+    isTablet: boolean;
+    isDesktop: boolean;
+    orientation: "portrait" | "landscape";
+    keyboardVisible: boolean;
+    currentSpacing: number;
+    currentFieldWidth: number;
+    isOptimized: boolean;
+    performanceMetrics: {
+        layoutUpdates: number;
+        lastUpdateTime: number;
+        optimizationScore: number;
+    };
+};
 export declare const useBasicMobileLayout: () => {
-  return useMobileFormLayout({}, {
-    enableTouchOptimization: true,
-    enableKeyboardOptimization: false,
-    enableResponsiveBehavior: true,
-    enablePerformanceOptimization: false,
-    enableAutoFocus: false
-  })
-}
-
-// Convenience hook for enhanced mobile layout
+    layoutState: MobileFormLayoutState;
+    updateLayout: () => void;
+    getLayoutClasses: () => string;
+    getLayoutCSSVariables: () => {
+        '--mobile-spacing': string;
+        '--mobile-field-width': string;
+        '--touch-target-size': string;
+        '--safe-area-top': string;
+        '--safe-area-bottom': string;
+        '--safe-area-left': string;
+        '--safe-area-right': string;
+    };
+    autoFocusFirstInput: () => void;
+    isMobile: boolean;
+    isTablet: boolean;
+    isDesktop: boolean;
+    orientation: "portrait" | "landscape";
+    keyboardVisible: boolean;
+    currentSpacing: number;
+    currentFieldWidth: number;
+    isOptimized: boolean;
+    performanceMetrics: {
+        layoutUpdates: number;
+        lastUpdateTime: number;
+        optimizationScore: number;
+    };
+};
 export declare const useEnhancedMobileLayout: () => {
-  return useMobileFormLayout({}, {
-    enableTouchOptimization: true,
-    enableKeyboardOptimization: true,
-    enableResponsiveBehavior: true,
-    enablePerformanceOptimization: true,
-    enableAutoFocus: true
-  })
-}
+    layoutState: MobileFormLayoutState;
+    updateLayout: () => void;
+    getLayoutClasses: () => string;
+    getLayoutCSSVariables: () => {
+        '--mobile-spacing': string;
+        '--mobile-field-width': string;
+        '--touch-target-size': string;
+        '--safe-area-top': string;
+        '--safe-area-bottom': string;
+        '--safe-area-left': string;
+        '--safe-area-right': string;
+    };
+    autoFocusFirstInput: () => void;
+    isMobile: boolean;
+    isTablet: boolean;
+    isDesktop: boolean;
+    orientation: "portrait" | "landscape";
+    keyboardVisible: boolean;
+    currentSpacing: number;
+    currentFieldWidth: number;
+    isOptimized: boolean;
+    performanceMetrics: {
+        layoutUpdates: number;
+        lastUpdateTime: number;
+        optimizationScore: number;
+    };
+};
+//# sourceMappingURL=use-mobile-form-layout.d.ts.map

package/dist/hooks/use-mobile-form-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mobile-form-layout.d.ts","sourceRoot":"","sources":["../../src/hooks/use-mobile-form-layout.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,YAAY;IAC3B,uBAAuB,EAAE,OAAO,CAAA;IAChC,0BAA0B,EAAE,OAAO,CAAA;IACnC,wBAAwB,EAAE,OAAO,CAAA;IACjC,6BAA6B,EAAE,OAAO,CAAA;IACtC,eAAe,EAAE,MAAM,CAAA;IACvB,iBAAiB,EAAE,MAAM,CAAA;IACzB,aAAa,EAAE,MAAM,CAAA;IACrB,eAAe,EAAE,OAAO,CAAA;CACzB;AAED,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,OAAO,CAAA;IACjB,SAAS,EAAE,OAAO,CAAA;IAClB,WAAW,EAAE,UAAU,GAAG,WAAW,CAAA;IACrC,eAAe,EAAE,OAAO,CAAA;IACxB,cAAc,EAAE,MAAM,CAAA;IACtB,aAAa,EAAE,MAAM,CAAA;IACrB,cAAc,EAAE;QACd,GAAG,EAAE,MAAM,CAAA;QACX,MAAM,EAAE,MAAM,CAAA;QACd,IAAI,EAAE,MAAM,CAAA;QACZ,KAAK,EAAE,MAAM,CAAA;KACd,CAAA;CACF;AAED,MAAM,WAAW,eAAe;IAC9B,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAA;IAC9C,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,UAAU,GAAG,WAAW,KAAK,IAAI,CAAA;IACrE,0BAA0B,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IACvD,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;CAC3D;AAED,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,WAAW,CAAA;IACnB,WAAW,EAAE,OAAO,CAAA;IACpB,cAAc,EAAE,MAAM,CAAA;IACtB,iBAAiB,EAAE,MAAM,CAAA;IACzB,kBAAkB,EAAE;QAClB,aAAa,EAAE,MAAM,CAAA;QACrB,cAAc,EAAE,MAAM,CAAA;QACtB,iBAAiB,EAAE,MAAM,CAAA;KAC1B,CAAA;CACF;AAED,eAAO,MAAM,mBAAmB,GAC9B,YAAW,eAAoB,EAC/B,SAAQ,OAAO,CAAC,YAAY,CAAM;;;;;;;;;;;;;;;;;;;;;;;uBARjB,MAAM;wBACL,MAAM;2BACH,MAAM;;CA6Y5B,CAAA;AAGD,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;uBAlZd,MAAM;wBACL,MAAM;2BACH,MAAM;;CAwZ5B,CAAA;AAGD,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;uBA7ZjB,MAAM;wBACL,MAAM;2BACH,MAAM;;CAma5B,CAAA"}