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

package/dist/hooks/use-mobile-skeleton.js

@@ -0,0 +1,300 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+export const useMobileSkeleton = (config = {}, callbacks = {}) => {
+    const { enablePerformanceOptimization = true, enableBatteryOptimization = true, enableAccessibilitySupport = true, enableTouchOptimization = true, mobileBreakpoint = 768 } = config;
+    const [deviceState, setDeviceState] = useState({
+        deviceType: 'desktop',
+        orientation: 'landscape',
+        screenSize: 'large',
+        loadingStrategy: 'skeleton',
+        animationIntensity: 'medium'
+    });
+    const [skeletonVariants, setSkeletonVariants] = useState([]);
+    const [isOptimizing, setIsOptimizing] = useState(false);
+    const [optimizations, setOptimizations] = useState([]);
+    const [performanceMetrics, setPerformanceMetrics] = useState({
+        renderTime: 0,
+        animationFrameRate: 60,
+        memoryUsage: 0,
+        batteryImpact: 'low'
+    });
+    const animationFrameRef = useRef(null);
+    const performanceTimerRef = useRef(null);
+    // Device detection and loading state management
+    const detectDeviceAndSetLoadingState = useCallback(() => {
+        const width = window.innerWidth;
+        const height = window.innerHeight;
+        const isMobile = width <= mobileBreakpoint;
+        const isTablet = width > mobileBreakpoint && width <= 1024;
+        const isPortrait = height > width;
+        let deviceType;
+        let screenSize;
+        let loadingStrategy;
+        let animationIntensity;
+        if (isMobile) {
+            deviceType = 'mobile';
+            screenSize = 'small';
+            loadingStrategy = 'skeleton';
+            animationIntensity = 'low';
+        }
+        else if (isTablet) {
+            deviceType = 'tablet';
+            screenSize = 'medium';
+            loadingStrategy = 'skeleton-spinner';
+            animationIntensity = 'medium';
+        }
+        else {
+            deviceType = 'desktop';
+            screenSize = 'large';
+            loadingStrategy = 'skeleton';
+            animationIntensity = 'high';
+        }
+        const newState = {
+            deviceType,
+            orientation: isPortrait ? 'portrait' : 'landscape',
+            screenSize,
+            loadingStrategy,
+            animationIntensity
+        };
+        setDeviceState(newState);
+        callbacks.onLoadingStateChanged?.(newState);
+        return newState;
+    }, [mobileBreakpoint, callbacks]);
+    // Create skeleton variants
+    const createSkeletonVariant = useCallback((variant) => {
+        const id = `skeleton-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        const newVariant = {
+            ...variant,
+            id,
+            mobileOptimized: deviceState.deviceType === 'mobile',
+            touchFriendly: enableTouchOptimization && deviceState.deviceType === 'mobile'
+        };
+        setSkeletonVariants(prev => [...prev, newVariant]);
+        callbacks.onSkeletonCreated?.(newVariant);
+        return id;
+    }, [deviceState.deviceType, enableTouchOptimization, callbacks]);
+    // Generate default skeleton variants
+    const generateDefaultSkeletons = useCallback(() => {
+        const defaults = [
+            {
+                id: 'text-line',
+                name: 'Text Line',
+                width: '100%',
+                height: 16,
+                borderRadius: 4,
+                animation: 'pulse',
+                mobileOptimized: true,
+                touchFriendly: true
+            },
+            {
+                id: 'avatar',
+                name: 'Avatar',
+                width: 40,
+                height: 40,
+                borderRadius: '50%',
+                animation: 'shimmer',
+                mobileOptimized: true,
+                touchFriendly: true
+            },
+            {
+                id: 'card',
+                name: 'Card',
+                width: '100%',
+                height: 120,
+                borderRadius: 8,
+                animation: 'wave',
+                mobileOptimized: true,
+                touchFriendly: true
+            },
+            {
+                id: 'button',
+                name: 'Button',
+                width: 120,
+                height: 40,
+                borderRadius: 6,
+                animation: 'pulse',
+                mobileOptimized: true,
+                touchFriendly: true
+            }
+        ];
+        setSkeletonVariants(defaults);
+        return defaults;
+    }, []);
+    // Performance optimization
+    const optimizePerformance = useCallback(() => {
+        if (!enablePerformanceOptimization)
+            return;
+        setIsOptimizing(true);
+        setTimeout(() => {
+            const performanceOptimizations = [
+                'Animation frame rate optimized for mobile',
+                'Memory usage optimized for skeleton rendering',
+                'Render cycle optimization applied',
+                'Animation performance enhanced'
+            ];
+            setOptimizations(prev => [...prev, ...performanceOptimizations]);
+            setIsOptimizing(false);
+            performanceOptimizations.forEach(optimization => {
+                callbacks.onPerformanceOptimized?.(optimization);
+            });
+        }, 300);
+    }, [enablePerformanceOptimization, callbacks]);
+    // Battery-conscious loading
+    const optimizeBatteryConsumption = useCallback(() => {
+        if (!enableBatteryOptimization)
+            return;
+        setIsOptimizing(true);
+        setTimeout(() => {
+            const batteryOptimizations = [
+                'Battery-conscious animation intensity applied',
+                'Reduced animation complexity for mobile',
+                'Power-efficient loading states enabled',
+                'Battery level monitoring active'
+            ];
+            setOptimizations(prev => [...prev, ...batteryOptimizations]);
+            setIsOptimizing(false);
+            batteryOptimizations.forEach(optimization => {
+                callbacks.onBatteryOptimized?.(optimization);
+            });
+        }, 250);
+    }, [enableBatteryOptimization, callbacks]);
+    // Accessibility support
+    const enhanceAccessibility = useCallback(() => {
+        if (!enableAccessibilitySupport)
+            return;
+        setIsOptimizing(true);
+        setTimeout(() => {
+            const accessibilityEnhancements = [
+                'Screen reader support for loading states',
+                'Reduced motion support for animations',
+                'Focus management for skeleton elements',
+                'ARIA labels for loading indicators'
+            ];
+            setOptimizations(prev => [...prev, ...accessibilityEnhancements]);
+            setIsOptimizing(false);
+            accessibilityEnhancements.forEach(enhancement => {
+                callbacks.onAccessibilityEnhanced?.(enhancement);
+            });
+        }, 200);
+    }, [enableAccessibilitySupport, callbacks]);
+    // Touch optimization
+    const optimizeTouchInteractions = useCallback(() => {
+        if (!enableTouchOptimization || deviceState.deviceType !== 'mobile')
+            return;
+        setIsOptimizing(true);
+        setTimeout(() => {
+            const touchOptimizations = [
+                'Touch-friendly skeleton interactions enabled',
+                'Touch target sizes optimized for mobile',
+                'Touch feedback animations applied',
+                'Gesture recognition for skeleton elements'
+            ];
+            setOptimizations(prev => [...prev, ...touchOptimizations]);
+            setIsOptimizing(false);
+            touchOptimizations.forEach(optimization => {
+                callbacks.onPerformanceOptimized?.(optimization);
+            });
+        }, 200);
+    }, [enableTouchOptimization, deviceState.deviceType, callbacks]);
+    // Performance monitoring
+    const startPerformanceMonitoring = useCallback(() => {
+        if (!enablePerformanceOptimization)
+            return () => { };
+        const startTime = performance.now();
+        let frameCount = 0;
+        let lastTime = startTime;
+        const measurePerformance = () => {
+            const currentTime = performance.now();
+            frameCount++;
+            if (currentTime - lastTime >= 1000) {
+                const fps = Math.round((frameCount * 1000) / (currentTime - lastTime));
+                const renderTime = currentTime - startTime;
+                setPerformanceMetrics(prev => ({
+                    ...prev,
+                    renderTime,
+                    animationFrameRate: fps
+                }));
+                frameCount = 0;
+                lastTime = currentTime;
+            }
+            animationFrameRef.current = requestAnimationFrame(measurePerformance);
+        };
+        animationFrameRef.current = requestAnimationFrame(measurePerformance);
+        return () => {
+            if (animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+            }
+        };
+    }, [enablePerformanceOptimization]);
+    // Auto-optimize based on device state
+    const autoOptimize = useCallback(() => {
+        if (deviceState.deviceType === 'mobile') {
+            optimizePerformance();
+            optimizeBatteryConsumption();
+            enhanceAccessibility();
+            optimizeTouchInteractions();
+        }
+    }, [deviceState.deviceType, optimizePerformance, optimizeBatteryConsumption, enhanceAccessibility, optimizeTouchInteractions]);
+    // Initialize device detection and optimization
+    useEffect(() => {
+        detectDeviceAndSetLoadingState();
+        generateDefaultSkeletons();
+        // Set up resize listener
+        const handleResize = () => {
+            detectDeviceAndSetLoadingState();
+        };
+        window.addEventListener('resize', handleResize);
+        // Set up orientation change listener
+        const handleOrientationChange = () => {
+            setTimeout(detectDeviceAndSetLoadingState, 100);
+        };
+        window.addEventListener('orientationchange', handleOrientationChange);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+            window.removeEventListener('orientationchange', handleOrientationChange);
+        };
+    }, [detectDeviceAndSetLoadingState, generateDefaultSkeletons]);
+    // Auto-optimize when device state changes
+    useEffect(() => {
+        autoOptimize();
+    }, [autoOptimize]);
+    // Start performance monitoring
+    useEffect(() => {
+        const stopMonitoring = startPerformanceMonitoring();
+        return () => {
+            stopMonitoring();
+        };
+    }, [startPerformanceMonitoring]);
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            if (animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+            }
+            if (performanceTimerRef.current) {
+                clearInterval(performanceTimerRef.current);
+            }
+        };
+    }, []);
+    return {
+        // State
+        deviceState,
+        skeletonVariants,
+        isOptimizing,
+        optimizations,
+        performanceMetrics,
+        // Functions
+        createSkeletonVariant,
+        generateDefaultSkeletons,
+        optimizePerformance,
+        optimizeBatteryConsumption,
+        enhanceAccessibility,
+        optimizeTouchInteractions,
+        autoOptimize,
+        // Utility functions
+        isMobileOptimized: () => deviceState.deviceType === 'mobile',
+        getLoadingStrategy: () => deviceState.loadingStrategy,
+        getAnimationIntensity: () => deviceState.animationIntensity,
+        clearOptimizations: () => setOptimizations([])
+    };
+};
+export default useMobileSkeleton;

package/dist/hooks/use-mobile-touch.d.ts

@@ -0,0 +1,86 @@
+export interface MobileTouchConfig {
+    enableTouchFeedback: boolean;
+    enableGestureHints: boolean;
+    enableTouchSounds: boolean;
+    enableHapticFeedback: boolean;
+    touchFeedbackDelay: number;
+    gestureHintTimeout: number;
+    maxTouchPoints: number;
+}
+export interface TouchFeedbackState {
+    isPressed: boolean;
+    feedbackType: 'none' | 'scale' | 'ripple' | 'glow';
+    feedbackIntensity: 'light' | 'medium' | 'strong';
+    lastTouchPosition: {
+        x: number;
+        y: number;
+    } | null;
+}
+export interface GestureHint {
+    type: 'swipe' | 'pinch' | 'longPress' | 'doubleTap' | 'tap';
+    message: string;
+    position: {
+        x: number;
+        y: number;
+    };
+    timeout: number;
+}
+export interface MobileTouchCallbacks {
+    onTouchFeedback?: (state: TouchFeedbackState) => void;
+    onGestureHint?: (hint: GestureHint) => void;
+    onTouchStart?: (position: {
+        x: number;
+        y: number;
+    }) => void;
+    onTouchEnd?: (position: {
+        x: number;
+        y: number;
+    }) => void;
+    onTouchMove?: (position: {
+        x: number;
+        y: number;
+    }) => void;
+}
+export interface MobileTouchState {
+    isActive: boolean;
+    touchCount: number;
+    currentFeedback: TouchFeedbackState;
+    activeGestureHints: GestureHint[];
+    deviceCapabilities: {
+        supportsTouch: boolean;
+        supportsHaptics: boolean;
+        supportsAudio: boolean;
+        maxTouchPoints: number;
+    };
+}
+export declare const useMobileTouch: (elementRef: React.RefObject<HTMLElement>, callbacks?: MobileTouchCallbacks, config?: Partial<MobileTouchConfig>) => {
+    mobileTouchState: MobileTouchState;
+    updateTouchFeedback: (feedback: Partial<TouchFeedbackState>) => void;
+    addGestureHint: (hint: Omit<GestureHint, "timeout">) => void;
+    removeGestureHint: (type: string) => void;
+    clearAllGestureHints: () => void;
+    getTouchFeedbackClasses: () => string;
+    triggerHapticFeedback: (intensity?: "light" | "medium" | "strong") => void;
+    triggerTouchSound: (type?: "tap" | "press" | "release") => void;
+};
+export declare const useBasicMobileTouch: (elementRef: React.RefObject<HTMLElement>) => {
+    mobileTouchState: MobileTouchState;
+    updateTouchFeedback: (feedback: Partial<TouchFeedbackState>) => void;
+    addGestureHint: (hint: Omit<GestureHint, "timeout">) => void;
+    removeGestureHint: (type: string) => void;
+    clearAllGestureHints: () => void;
+    getTouchFeedbackClasses: () => string;
+    triggerHapticFeedback: (intensity?: "light" | "medium" | "strong") => void;
+    triggerTouchSound: (type?: "tap" | "press" | "release") => void;
+};
+export declare const useEnhancedMobileTouch: (elementRef: React.RefObject<HTMLElement>) => {
+    mobileTouchState: MobileTouchState;
+    updateTouchFeedback: (feedback: Partial<TouchFeedbackState>) => void;
+    addGestureHint: (hint: Omit<GestureHint, "timeout">) => void;
+    removeGestureHint: (type: string) => void;
+    clearAllGestureHints: () => void;
+    getTouchFeedbackClasses: () => string;
+    triggerHapticFeedback: (intensity?: "light" | "medium" | "strong") => void;
+    triggerTouchSound: (type?: "tap" | "press" | "release") => void;
+};
+//# sourceMappingURL=use-mobile-touch.d.ts.map

package/dist/hooks/use-mobile-touch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mobile-touch.d.ts","sourceRoot":"","sources":["../../src/hooks/use-mobile-touch.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,iBAAiB;IAChC,mBAAmB,EAAE,OAAO,CAAA;IAC5B,kBAAkB,EAAE,OAAO,CAAA;IAC3B,iBAAiB,EAAE,OAAO,CAAA;IAC1B,oBAAoB,EAAE,OAAO,CAAA;IAC7B,kBAAkB,EAAE,MAAM,CAAA;IAC1B,kBAAkB,EAAE,MAAM,CAAA;IAC1B,cAAc,EAAE,MAAM,CAAA;CACvB;AAED,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,OAAO,CAAA;IAClB,YAAY,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IAClD,iBAAiB,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAA;IAChD,iBAAiB,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAA;CACnD;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,OAAO,GAAG,OAAO,GAAG,WAAW,GAAG,WAAW,GAAG,KAAK,CAAA;IAC3D,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAClC,OAAO,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,WAAW,oBAAoB;IACnC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAA;IACrD,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAA;IAC3C,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IAC3D,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACzD,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;CAC3D;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,OAAO,CAAA;IACjB,UAAU,EAAE,MAAM,CAAA;IAClB,eAAe,EAAE,kBAAkB,CAAA;IACnC,kBAAkB,EAAE,WAAW,EAAE,CAAA;IACjC,kBAAkB,EAAE;QAClB,aAAa,EAAE,OAAO,CAAA;QACtB,eAAe,EAAE,OAAO,CAAA;QACxB,aAAa,EAAE,OAAO,CAAA;QACtB,cAAc,EAAE,MAAM,CAAA;KACvB,CAAA;CACF;AAED,eAAO,MAAM,cAAc,GACzB,YAAY,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,EACxC,YAAW,oBAAyB,EACpC,SAAQ,OAAO,CAAC,iBAAiB,CAAM;;oCA0GY,OAAO,CAAC,kBAAkB,CAAC;2BAUpC,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC;8BAuBzB,MAAM;;;wCAhFG,OAAO,GAAG,QAAQ,GAAG,QAAQ;+BAiBtC,KAAK,GAAG,OAAO,GAAG,SAAS;CA2QzE,CAAA;AAGD,eAAO,MAAM,mBAAmB,GAAI,YAAY,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC;;oCAhPvB,OAAO,CAAC,kBAAkB,CAAC;2BAUpC,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC;8BAuBzB,MAAM;;;wCAhFG,OAAO,GAAG,QAAQ,GAAG,QAAQ;+BAiBtC,KAAK,GAAG,OAAO,GAAG,SAAS;CAqRzE,CAAA;AAGD,eAAO,MAAM,sBAAsB,GAAI,YAAY,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC;;oCA1P1B,OAAO,CAAC,kBAAkB,CAAC;2BAUpC,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC;8BAuBzB,MAAM;;;wCAhFG,OAAO,GAAG,QAAQ,GAAG,QAAQ;+BAiBtC,KAAK,GAAG,OAAO,GAAG,SAAS;CA+RzE,CAAA"}