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

package/dist/components/ui/mobile-input.esm.js

@@ -0,0 +1,199 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { Input } from "./input.js";
+/**
+ * Mobile-optimized input component with smart keyboard handling
+ * Automatically configures input attributes for the best mobile experience
+ */
+export const MobileInput = React.forwardRef(({ className, type, mobileConfig = {}, ...props }, ref) => {
+    const { semanticType, enableAutocomplete = true, inputMode, spellCheck, autoCapitalize, autoCorrect } = mobileConfig;
+    // Get optimized input attributes based on semantic type
+    const getInputAttributes = () => {
+        const baseAttributes = {
+            spellCheck: spellCheck ?? false,
+            autoCapitalize: autoCapitalize ?? 'none',
+            autoCorrect: autoCorrect ?? 'off',
+            autoComplete: enableAutocomplete ? 'on' : 'off'
+        };
+        // If explicit type is provided, don't override it with semantic type
+        if (type) {
+            return {
+                ...baseAttributes,
+                type: type,
+                inputMode: inputMode || getDefaultInputMode(type)
+            };
+        }
+        // Override based on semantic type, but respect custom mobile config
+        switch (semanticType) {
+            case 'name':
+                return {
+                    ...baseAttributes,
+                    type: 'text',
+                    autoComplete: enableAutocomplete ? 'name' : 'off',
+                    autoCapitalize: autoCapitalize || 'words',
+                    inputMode: inputMode || 'text'
+                };
+            case 'username':
+                return {
+                    ...baseAttributes,
+                    type: 'text',
+                    autoComplete: enableAutocomplete ? 'username' : 'off',
+                    autoCapitalize: autoCapitalize || 'none',
+                    inputMode: inputMode || 'text'
+                };
+            case 'email':
+                return {
+                    ...baseAttributes,
+                    type: 'email',
+                    autoComplete: enableAutocomplete ? 'email' : 'off',
+                    autoCapitalize: autoCapitalize || 'none',
+                    inputMode: inputMode || 'email',
+                    spellCheck: spellCheck ?? false
+                };
+            case 'phone':
+                return {
+                    ...baseAttributes,
+                    type: 'tel',
+                    autoComplete: enableAutocomplete ? 'tel' : 'off',
+                    autoCapitalize: autoCapitalize || 'none',
+                    inputMode: inputMode || 'tel',
+                    spellCheck: spellCheck ?? false
+                };
+            case 'address':
+                return {
+                    ...baseAttributes,
+                    type: 'text',
+                    autoComplete: enableAutocomplete ? 'street-address' : 'off',
+                    autoCapitalize: autoCapitalize || 'words',
+                    inputMode: inputMode || 'text'
+                };
+            case 'city':
+                return {
+                    ...baseAttributes,
+                    type: 'text',
+                    autoComplete: enableAutocomplete ? 'address-level2' : 'off',
+                    autoCapitalize: autoCapitalize || 'words',
+                    inputMode: inputMode || 'text'
+                };
+            case 'zipcode':
+                return {
+                    ...baseAttributes,
+                    type: 'text',
+                    autoComplete: enableAutocomplete ? 'postal-code' : 'off',
+                    autoCapitalize: autoCapitalize || 'none',
+                    inputMode: inputMode || 'numeric',
+                    spellCheck: spellCheck ?? false
+                };
+            case 'creditcard':
+                return {
+                    ...baseAttributes,
+                    type: 'text',
+                    autoComplete: enableAutocomplete ? 'cc-number' : 'off',
+                    autoCapitalize: autoCapitalize || 'none',
+                    inputMode: inputMode || 'numeric',
+                    spellCheck: spellCheck ?? false
+                };
+            case 'amount':
+                return {
+                    ...baseAttributes,
+                    type: 'number',
+                    autoComplete: 'off',
+                    autoCapitalize: autoCapitalize || 'none',
+                    inputMode: inputMode || 'decimal',
+                    spellCheck: spellCheck ?? false
+                };
+            case 'age':
+                return {
+                    ...baseAttributes,
+                    type: 'text',
+                    autoComplete: enableAutocomplete ? 'bday-year' : 'off',
+                    autoCapitalize: autoCapitalize || 'none',
+                    inputMode: inputMode || 'numeric',
+                    spellCheck: spellCheck ?? false
+                };
+            case 'search':
+                return {
+                    ...baseAttributes,
+                    type: 'search',
+                    autoComplete: 'off',
+                    autoCapitalize: autoCapitalize || 'none',
+                    inputMode: inputMode || 'search'
+                };
+            case 'url':
+                return {
+                    ...baseAttributes,
+                    type: 'url',
+                    autoComplete: enableAutocomplete ? 'url' : 'off',
+                    autoCapitalize: autoCapitalize || 'none',
+                    inputMode: inputMode || 'url',
+                    spellCheck: spellCheck ?? false
+                };
+            case 'newPassword':
+                return {
+                    ...baseAttributes,
+                    type: 'password',
+                    autoComplete: enableAutocomplete ? 'new-password' : 'off',
+                    autoCapitalize: autoCapitalize || 'none',
+                    inputMode: inputMode || 'text',
+                    spellCheck: spellCheck ?? false
+                };
+            case 'currentPassword':
+                return {
+                    ...baseAttributes,
+                    type: 'password',
+                    autoComplete: enableAutocomplete ? 'current-password' : 'off',
+                    autoCapitalize: autoCapitalize || 'none',
+                    inputMode: inputMode || 'text',
+                    spellCheck: spellCheck ?? false
+                };
+            default:
+                // Use provided type or fallback settings
+                const finalInputMode = inputMode || getDefaultInputMode(type || 'text');
+                return {
+                    ...baseAttributes,
+                    type: type || 'text',
+                    inputMode: finalInputMode
+                };
+        }
+    };
+    const getDefaultInputMode = (inputType) => {
+        switch (inputType) {
+            case 'email': return 'email';
+            case 'tel': return 'tel';
+            case 'url': return 'url';
+            case 'number':
+            case 'decimal': return 'decimal';
+            case 'search': return 'search';
+            default: return 'text';
+        }
+    };
+    const inputAttributes = getInputAttributes();
+    return (_jsx(Input, { className: cn("coach-stan-mobile-input", 
+        // Add mobile-specific styling
+        "touch-manipulation", // Disable double-tap zoom
+        className), ref: ref, ...inputAttributes, 
+        // Ensure mobile config doesn't override explicit props
+        type: type || inputAttributes.type, inputMode: (props.inputMode || inputAttributes.inputMode), autoComplete: props.autoComplete || inputAttributes.autoComplete, autoCapitalize: props.autoCapitalize || inputAttributes.autoCapitalize, autoCorrect: props.autoCorrect || inputAttributes.autoCorrect, spellCheck: props.spellCheck ?? inputAttributes.spellCheck, ...props, size: "md" }));
+});
+MobileInput.displayName = "MobileInput";
+// Utility function to get optimal mobile input props for common scenarios
+export const getMobileInputProps = (semanticType) => {
+    return { semanticType, enableAutocomplete: true };
+};
+// Common mobile input configurations
+export const mobileInputConfigs = {
+    name: { semanticType: 'name' },
+    email: { semanticType: 'email' },
+    phone: { semanticType: 'phone' },
+    address: { semanticType: 'address' },
+    city: { semanticType: 'city' },
+    zipcode: { semanticType: 'zipcode' },
+    creditCard: { semanticType: 'creditcard' },
+    amount: { semanticType: 'amount' },
+    search: { semanticType: 'search' },
+    url: { semanticType: 'url' },
+    newPassword: { semanticType: 'newPassword' },
+    currentPassword: { semanticType: 'currentPassword' }
+};

package/dist/components/ui/mobile-input.js

@@ -0,0 +1,199 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { Input } from "./input.js";
+/**
+ * Mobile-optimized input component with smart keyboard handling
+ * Automatically configures input attributes for the best mobile experience
+ */
+export const MobileInput = React.forwardRef(({ className, type, mobileConfig = {}, ...props }, ref) => {
+    const { semanticType, enableAutocomplete = true, inputMode, spellCheck, autoCapitalize, autoCorrect } = mobileConfig;
+    // Get optimized input attributes based on semantic type
+    const getInputAttributes = () => {
+        const baseAttributes = {
+            spellCheck: spellCheck ?? false,
+            autoCapitalize: autoCapitalize ?? 'none',
+            autoCorrect: autoCorrect ?? 'off',
+            autoComplete: enableAutocomplete ? 'on' : 'off'
+        };
+        // If explicit type is provided, don't override it with semantic type
+        if (type) {
+            return {
+                ...baseAttributes,
+                type: type,
+                inputMode: inputMode || getDefaultInputMode(type)
+            };
+        }
+        // Override based on semantic type, but respect custom mobile config
+        switch (semanticType) {
+            case 'name':
+                return {
+                    ...baseAttributes,
+                    type: 'text',
+                    autoComplete: enableAutocomplete ? 'name' : 'off',
+                    autoCapitalize: autoCapitalize || 'words',
+                    inputMode: inputMode || 'text'
+                };
+            case 'username':
+                return {
+                    ...baseAttributes,
+                    type: 'text',
+                    autoComplete: enableAutocomplete ? 'username' : 'off',
+                    autoCapitalize: autoCapitalize || 'none',
+                    inputMode: inputMode || 'text'
+                };
+            case 'email':
+                return {
+                    ...baseAttributes,
+                    type: 'email',
+                    autoComplete: enableAutocomplete ? 'email' : 'off',
+                    autoCapitalize: autoCapitalize || 'none',
+                    inputMode: inputMode || 'email',
+                    spellCheck: spellCheck ?? false
+                };
+            case 'phone':
+                return {
+                    ...baseAttributes,
+                    type: 'tel',
+                    autoComplete: enableAutocomplete ? 'tel' : 'off',
+                    autoCapitalize: autoCapitalize || 'none',
+                    inputMode: inputMode || 'tel',
+                    spellCheck: spellCheck ?? false
+                };
+            case 'address':
+                return {
+                    ...baseAttributes,
+                    type: 'text',
+                    autoComplete: enableAutocomplete ? 'street-address' : 'off',
+                    autoCapitalize: autoCapitalize || 'words',
+                    inputMode: inputMode || 'text'
+                };
+            case 'city':
+                return {
+                    ...baseAttributes,
+                    type: 'text',
+                    autoComplete: enableAutocomplete ? 'address-level2' : 'off',
+                    autoCapitalize: autoCapitalize || 'words',
+                    inputMode: inputMode || 'text'
+                };
+            case 'zipcode':
+                return {
+                    ...baseAttributes,
+                    type: 'text',
+                    autoComplete: enableAutocomplete ? 'postal-code' : 'off',
+                    autoCapitalize: autoCapitalize || 'none',
+                    inputMode: inputMode || 'numeric',
+                    spellCheck: spellCheck ?? false
+                };
+            case 'creditcard':
+                return {
+                    ...baseAttributes,
+                    type: 'text',
+                    autoComplete: enableAutocomplete ? 'cc-number' : 'off',
+                    autoCapitalize: autoCapitalize || 'none',
+                    inputMode: inputMode || 'numeric',
+                    spellCheck: spellCheck ?? false
+                };
+            case 'amount':
+                return {
+                    ...baseAttributes,
+                    type: 'number',
+                    autoComplete: 'off',
+                    autoCapitalize: autoCapitalize || 'none',
+                    inputMode: inputMode || 'decimal',
+                    spellCheck: spellCheck ?? false
+                };
+            case 'age':
+                return {
+                    ...baseAttributes,
+                    type: 'text',
+                    autoComplete: enableAutocomplete ? 'bday-year' : 'off',
+                    autoCapitalize: autoCapitalize || 'none',
+                    inputMode: inputMode || 'numeric',
+                    spellCheck: spellCheck ?? false
+                };
+            case 'search':
+                return {
+                    ...baseAttributes,
+                    type: 'search',
+                    autoComplete: 'off',
+                    autoCapitalize: autoCapitalize || 'none',
+                    inputMode: inputMode || 'search'
+                };
+            case 'url':
+                return {
+                    ...baseAttributes,
+                    type: 'url',
+                    autoComplete: enableAutocomplete ? 'url' : 'off',
+                    autoCapitalize: autoCapitalize || 'none',
+                    inputMode: inputMode || 'url',
+                    spellCheck: spellCheck ?? false
+                };
+            case 'newPassword':
+                return {
+                    ...baseAttributes,
+                    type: 'password',
+                    autoComplete: enableAutocomplete ? 'new-password' : 'off',
+                    autoCapitalize: autoCapitalize || 'none',
+                    inputMode: inputMode || 'text',
+                    spellCheck: spellCheck ?? false
+                };
+            case 'currentPassword':
+                return {
+                    ...baseAttributes,
+                    type: 'password',
+                    autoComplete: enableAutocomplete ? 'current-password' : 'off',
+                    autoCapitalize: autoCapitalize || 'none',
+                    inputMode: inputMode || 'text',
+                    spellCheck: spellCheck ?? false
+                };
+            default:
+                // Use provided type or fallback settings
+                const finalInputMode = inputMode || getDefaultInputMode(type || 'text');
+                return {
+                    ...baseAttributes,
+                    type: type || 'text',
+                    inputMode: finalInputMode
+                };
+        }
+    };
+    const getDefaultInputMode = (inputType) => {
+        switch (inputType) {
+            case 'email': return 'email';
+            case 'tel': return 'tel';
+            case 'url': return 'url';
+            case 'number':
+            case 'decimal': return 'decimal';
+            case 'search': return 'search';
+            default: return 'text';
+        }
+    };
+    const inputAttributes = getInputAttributes();
+    return (_jsx(Input, { className: cn("coach-stan-mobile-input", 
+        // Add mobile-specific styling
+        "touch-manipulation", // Disable double-tap zoom
+        className), ref: ref, ...inputAttributes, 
+        // Ensure mobile config doesn't override explicit props
+        type: type || inputAttributes.type, inputMode: (props.inputMode || inputAttributes.inputMode), autoComplete: props.autoComplete || inputAttributes.autoComplete, autoCapitalize: props.autoCapitalize || inputAttributes.autoCapitalize, autoCorrect: props.autoCorrect || inputAttributes.autoCorrect, spellCheck: props.spellCheck ?? inputAttributes.spellCheck, ...props, size: "md" }));
+});
+MobileInput.displayName = "MobileInput";
+// Utility function to get optimal mobile input props for common scenarios
+export const getMobileInputProps = (semanticType) => {
+    return { semanticType, enableAutocomplete: true };
+};
+// Common mobile input configurations
+export const mobileInputConfigs = {
+    name: { semanticType: 'name' },
+    email: { semanticType: 'email' },
+    phone: { semanticType: 'phone' },
+    address: { semanticType: 'address' },
+    city: { semanticType: 'city' },
+    zipcode: { semanticType: 'zipcode' },
+    creditCard: { semanticType: 'creditcard' },
+    amount: { semanticType: 'amount' },
+    search: { semanticType: 'search' },
+    url: { semanticType: 'url' },
+    newPassword: { semanticType: 'newPassword' },
+    currentPassword: { semanticType: 'currentPassword' }
+};

package/dist/components/ui/mobile-skeleton-loading-demo.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export declare const MobileSkeletonLoadingDemo: React.FC;
+export default MobileSkeletonLoadingDemo;
+//# sourceMappingURL=mobile-skeleton-loading-demo.d.ts.map

package/dist/components/ui/mobile-skeleton-loading-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mobile-skeleton-loading-demo.d.ts","sourceRoot":"","sources":["../../../src/components/ui/mobile-skeleton-loading-demo.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,EAinB7C,CAAA;AAED,eAAe,yBAAyB,CAAA"}

package/dist/components/ui/mobile-skeleton-loading-demo.esm.js

@@ -0,0 +1,145 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Card } from './card.js';
+import { Button } from './button.js';
+import { Badge } from './badge.js';
+import { useMobileSkeleton } from '../../hooks/use-mobile-skeleton.js';
+import { useDeviceLoadingStates } from '../../hooks/use-device-loading-states.js';
+import { useLoadingPerformance } from '../../hooks/use-loading-performance.js';
+import { useBatteryConsciousLoading } from '../../hooks/use-battery-conscious-loading.js';
+import { useLoadingAccessibility } from '../../hooks/use-loading-accessibility.js';
+export const MobileSkeletonLoadingDemo = () => {
+    const [activeTab, setActiveTab] = useState('overview');
+    const [isLoading, setIsLoading] = useState(false);
+    const [loadingProgress, setLoadingProgress] = useState(0);
+    const [showSkeletons, setShowSkeletons] = useState(true);
+    // Initialize all hooks
+    const mobileSkeleton = useMobileSkeleton({
+        enableMobileOptimization: true,
+        enablePerformanceOptimization: true,
+        enableBatteryOptimization: true,
+        enableAccessibilitySupport: true,
+        enableTouchOptimization: true
+    }, {
+        onSkeletonCreated: (variant) => console.log('Skeleton created:', variant),
+        onLoadingStateChanged: (state) => console.log('Loading state changed:', state),
+        onPerformanceOptimized: (optimization) => console.log('Performance optimized:', optimization),
+        onBatteryOptimized: (strategy) => console.log('Battery optimized:', strategy),
+        onAccessibilityEnhanced: (feature) => console.log('Accessibility enhanced:', feature)
+    });
+    const deviceLoadingStates = useDeviceLoadingStates({
+        enableMobileStates: true,
+        enableTabletStates: true,
+        enableDesktopStates: true,
+        enableAdaptiveBehavior: true,
+        enableOrientationSupport: true,
+        enablePerformanceAdaptation: true
+    }, {
+        onLoadingStateChanged: (state) => console.log('Device loading state changed:', state),
+        onDeviceStateChanged: (deviceState) => console.log('Device state changed:', deviceState),
+        onAdaptiveBehaviorEnabled: (behavior) => console.log('Adaptive behavior enabled:', behavior),
+        onPerformanceAdapted: (adaptation) => console.log('Performance adapted:', adaptation)
+    });
+    const loadingPerformance = useLoadingPerformance({
+        enableAnimationOptimization: true,
+        enableMemoryManagement: true,
+        enableBatteryOptimization: true,
+        enablePerformanceMonitoring: true,
+        enableAutoOptimization: true
+    }, {
+        onPerformanceOptimized: (strategy) => console.log('Loading performance optimized:', strategy),
+        onMemoryOptimized: (optimization) => console.log('Memory optimized:', optimization),
+        onBatteryOptimized: (strategy) => console.log('Battery optimized:', strategy),
+        onAnimationOptimized: (optimization) => console.log('Animation optimized:', optimization)
+    });
+    const batteryConsciousLoading = useBatteryConsciousLoading({
+        enableBatteryMonitoring: true,
+        enableLoadingOptimization: true,
+        enablePerformanceAdjustment: true,
+        enableUserNotification: true,
+        enableAutoOptimization: true
+    }, {
+        onBatteryLevelChanged: (batteryState) => console.log('Battery level changed:', batteryState),
+        onLoadingOptimized: (optimization) => console.log('Loading optimized for battery:', optimization),
+        onPerformanceAdjusted: (adjustment) => console.log('Performance adjusted:', adjustment),
+        onUserNotified: (notification) => console.log('User notified:', notification)
+    });
+    const loadingAccessibility = useLoadingAccessibility({
+        enableScreenReaderSupport: true,
+        enableReducedMotionSupport: true,
+        enableFocusManagement: true,
+        enableAriaSupport: true,
+        enableVoiceControl: true,
+        enableHighContrast: true,
+        enableKeyboardNavigation: true
+    }, {
+        onScreenReaderEnhanced: (feature) => console.log('Screen reader enhanced:', feature),
+        onReducedMotionApplied: (feature) => console.log('Reduced motion applied:', feature),
+        onFocusManaged: (feature) => console.log('Focus managed:', feature),
+        onAriaEnhanced: (feature) => console.log('ARIA enhanced:', feature),
+        onVoiceControlEnabled: (feature) => console.log('Voice control enabled:', feature),
+        onHighContrastApplied: (feature) => console.log('High contrast applied:', feature),
+        onKeyboardNavigationEnabled: (feature) => console.log('Keyboard navigation enabled:', feature)
+    });
+    // Simulate loading progress
+    useEffect(() => {
+        if (isLoading) {
+            const interval = setInterval(() => {
+                setLoadingProgress(prev => {
+                    if (prev >= 100) {
+                        setIsLoading(false);
+                        setLoadingProgress(0);
+                        return 0;
+                    }
+                    return prev + 10;
+                });
+            }, 200);
+            return () => clearInterval(interval);
+        }
+    }, [isLoading]);
+    // Start loading simulation
+    const startLoading = () => {
+        setIsLoading(true);
+        setLoadingProgress(0);
+    };
+    // Toggle skeleton visibility
+    const toggleSkeletons = () => {
+        setShowSkeletons(!showSkeletons);
+    };
+    // Get device-specific loading class
+    const getLoadingStateClass = () => {
+        switch (deviceLoadingStates.deviceState.deviceType) {
+            case 'mobile': return 'loading-state-mobile';
+            case 'tablet': return 'loading-state-tablet';
+            case 'desktop': return 'loading-state-desktop';
+            default: return 'loading-state-mobile';
+        }
+    };
+    // Get battery-conscious class
+    const getBatteryClass = () => {
+        const batteryStatus = batteryConsciousLoading.batteryState.status;
+        if (batteryStatus === 'critical')
+            return 'battery-critical';
+        if (batteryStatus === 'low')
+            return 'battery-low';
+        return '';
+    };
+    // Get performance class
+    const getPerformanceClass = () => {
+        const performanceHealth = loadingPerformance.performanceHealth;
+        if (performanceHealth === 'poor')
+            return 'performance-low';
+        if (performanceHealth === 'fair')
+            return 'performance-medium';
+        return 'performance-high';
+    };
+    // Get accessibility class
+    const getAccessibilityClass = () => {
+        if (loadingAccessibility.accessibilityScore >= 80)
+            return 'accessibility-enhanced';
+        return '';
+    };
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "text-center", children: [_jsx("h2", { className: "text-2xl font-bold text-gray-900 mb-2", children: "\uD83D\uDCF1 Mobile Skeleton & Loading State Sophistication" }), _jsx("p", { className: "text-gray-600 mb-4", children: "Advanced mobile-optimized skeleton components with device-specific loading states, performance optimization, battery consciousness, and accessibility support." }), _jsx(Badge, { variant: "secondary", children: "Story 11 Implementation" })] }), _jsxs(Card, { className: "p-6", children: [_jsxs("div", { className: "flex flex-wrap gap-2 mb-6", children: [_jsx(Button, { variant: activeTab === 'overview' ? 'default' : 'outline', onClick: () => setActiveTab('overview'), size: "sm", children: "Overview" }), _jsx(Button, { variant: activeTab === 'skeletons' ? 'default' : 'outline', onClick: () => setActiveTab('skeletons'), size: "sm", children: "Skeletons" }), _jsx(Button, { variant: activeTab === 'loading' ? 'default' : 'outline', onClick: () => setActiveTab('loading'), size: "sm", children: "Loading States" }), _jsx(Button, { variant: activeTab === 'performance' ? 'default' : 'outline', onClick: () => setActiveTab('performance'), size: "sm", children: "Performance" }), _jsx(Button, { variant: activeTab === 'accessibility' ? 'default' : 'outline', onClick: () => setActiveTab('accessibility'), size: "sm", children: "Accessibility" })] }), activeTab === 'overview' && (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4", children: [_jsxs("div", { className: "p-4 bg-blue-50 rounded-lg", children: [_jsx("h3", { className: "font-semibold text-blue-900 mb-2", children: "Device State" }), _jsxs("div", { className: "space-y-1 text-sm", children: [_jsxs("p", { children: [_jsx("span", { className: "font-medium", children: "Type:" }), " ", deviceLoadingStates.deviceState.deviceType] }), _jsxs("p", { children: [_jsx("span", { className: "font-medium", children: "Orientation:" }), " ", deviceLoadingStates.deviceState.orientation] }), _jsxs("p", { children: [_jsx("span", { className: "font-medium", children: "Screen:" }), " ", deviceLoadingStates.deviceState.screenSize] }), _jsxs("p", { children: [_jsx("span", { className: "font-medium", children: "Strategy:" }), " ", deviceLoadingStates.deviceState.loadingStates[0]?.type || 'skeleton'] })] })] }), _jsxs("div", { className: "p-4 bg-yellow-50 rounded-lg", children: [_jsx("h3", { className: "font-semibold text-yellow-900 mb-2", children: "Battery Status" }), _jsxs("div", { className: "space-y-1 text-sm", children: [_jsxs("p", { children: [_jsx("span", { className: "font-medium", children: "Level:" }), " ", batteryConsciousLoading.getBatteryPercentage(), "%"] }), _jsxs("p", { children: [_jsx("span", { className: "font-medium", children: "Status:" }), " ", batteryConsciousLoading.batteryState.status] }), _jsxs("p", { children: [_jsx("span", { className: "font-medium", children: "Mode:" }), " ", batteryConsciousLoading.performanceMode] }), _jsxs("p", { children: [_jsx("span", { className: "font-medium", children: "Savings:" }), " ", batteryConsciousLoading.batterySavings, "%"] })] })] }), _jsxs("div", { className: "p-4 bg-green-50 rounded-lg", children: [_jsx("h3", { className: "font-semibold text-green-900 mb-2", children: "Performance" }), _jsxs("div", { className: "space-y-1 text-sm", children: [_jsxs("p", { children: [_jsx("span", { className: "font-medium", children: "FPS:" }), " ", loadingPerformance.performanceMetrics.frameRate] }), _jsxs("p", { children: [_jsx("span", { className: "font-medium", children: "Render:" }), " ", Math.round(loadingPerformance.performanceMetrics.renderTime), "ms"] }), _jsxs("p", { children: [_jsx("span", { className: "font-medium", children: "Memory:" }), " ", loadingPerformance.performanceMetrics.memoryUsage, "MB"] }), _jsxs("p", { children: [_jsx("span", { className: "font-medium", children: "Health:" }), " ", loadingPerformance.performanceHealth] })] })] }), _jsxs("div", { className: "p-4 bg-purple-50 rounded-lg", children: [_jsx("h3", { className: "font-semibold text-purple-900 mb-2", children: "Accessibility" }), _jsxs("div", { className: "space-y-1 text-sm", children: [_jsxs("p", { children: [_jsx("span", { className: "font-medium", children: "Score:" }), " ", loadingAccessibility.accessibilityScore, "%"] }), _jsxs("p", { children: [_jsx("span", { className: "font-medium", children: "Features:" }), " ", loadingAccessibility.accessibilityFeatures.length] }), _jsxs("p", { children: [_jsx("span", { className: "font-medium", children: "Active:" }), " ", loadingAccessibility.activeFeatures.length] }), _jsxs("p", { children: [_jsx("span", { className: "font-medium", children: "Enhancing:" }), " ", loadingAccessibility.isEnhancing ? 'Yes' : 'No'] })] })] })] }), _jsxs("div", { className: "flex flex-wrap gap-4 justify-center", children: [_jsx(Button, { onClick: startLoading, disabled: isLoading, children: isLoading ? 'Loading...' : 'Start Loading Simulation' }), _jsxs(Button, { onClick: toggleSkeletons, variant: "outline", children: [showSkeletons ? 'Hide' : 'Show', " Skeletons"] }), _jsx(Button, { onClick: loadingPerformance.autoOptimize, variant: "outline", children: "Auto-Optimize Performance" }), _jsx(Button, { onClick: batteryConsciousLoading.optimizeLoadingForBattery, variant: "outline", children: "Optimize for Battery" }), _jsx(Button, { onClick: loadingAccessibility.autoEnableAccessibility, variant: "outline", children: "Enable All Accessibility" })] })] })), activeTab === 'skeletons' && (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "text-center mb-6", children: [_jsx("h3", { className: "text-xl font-semibold mb-2", children: "Mobile-Optimized Skeleton Components" }), _jsx("p", { className: "text-gray-600", children: "Device-specific skeleton variants with performance optimization and touch-friendly interactions" })] }), _jsx("div", { className: `${getLoadingStateClass()} ${getBatteryClass()} ${getPerformanceClass()} ${getAccessibilityClass()}`, children: showSkeletons && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "loading-skeleton", children: [_jsx("div", { className: "mobile-skeleton text-line animation-pulse touch-friendly", "aria-label": "Loading text line 1" }), _jsx("div", { className: "mobile-skeleton text-line animation-pulse touch-friendly", "aria-label": "Loading text line 2" }), _jsx("div", { className: "mobile-skeleton text-line animation-pulse touch-friendly", "aria-label": "Loading text line 3" })] }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "mobile-skeleton avatar animation-shimmer touch-friendly", "aria-label": "Loading avatar" }), _jsx("div", { className: "mobile-skeleton button animation-pulse touch-friendly", "aria-label": "Loading button" })] }), _jsx("div", { className: "mobile-skeleton card animation-wave touch-friendly", "aria-label": "Loading card content" })] })) }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "p-4 bg-gray-50 rounded-lg", children: [_jsx("h4", { className: "font-semibold mb-2", children: "Available Skeleton Variants" }), _jsx("div", { className: "space-y-2 text-sm", children: mobileSkeleton.skeletonVariants.map(variant => (_jsxs("div", { className: "flex justify-between items-center", children: [_jsx("span", { children: variant.name }), _jsx(Badge, { variant: variant.mobileOptimized ? "default" : "secondary", children: variant.animation })] }, variant.id))) })] }), _jsxs("div", { className: "p-4 bg-gray-50 rounded-lg", children: [_jsx("h4", { className: "font-semibold mb-2", children: "Device Optimizations" }), _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("p", { children: [_jsx("span", { className: "font-medium", children: "Mobile Optimized:" }), " ", mobileSkeleton.isMobileOptimized() ? 'Yes' : 'No'] }), _jsxs("p", { children: [_jsx("span", { className: "font-medium", children: "Loading Strategy:" }), " ", mobileSkeleton.getLoadingStrategy()] }), _jsxs("p", { children: [_jsx("span", { className: "font-medium", children: "Animation Intensity:" }), " ", mobileSkeleton.getAnimationIntensity()] }), _jsxs("p", { children: [_jsx("span", { className: "font-medium", children: "Touch Friendly:" }), " ", mobileSkeleton.skeletonVariants.some(v => v.touchFriendly) ? 'Yes' : 'No'] })] })] })] })] })), activeTab === 'loading' && (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "text-center mb-6", children: [_jsx("h3", { className: "text-xl font-semibold mb-2", children: "Device-Specific Loading States" }), _jsx("p", { className: "text-gray-600", children: "Adaptive loading states that automatically adjust based on device capabilities and battery level" })] }), isLoading && (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "loading-progress", children: _jsx("div", { className: "loading-progress-bar", style: { width: `${loadingProgress}%` }, "aria-label": `Loading progress: ${loadingProgress}%` }) }), _jsxs("p", { className: "text-center text-sm text-gray-600", children: ["Loading... ", loadingProgress, "%"] })] })), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "font-semibold", children: "Current Device State" }), _jsxs("div", { className: "p-4 bg-blue-50 rounded-lg space-y-2", children: [_jsxs("p", { children: [_jsx("span", { className: "font-medium", children: "Device:" }), " ", deviceLoadingStates.deviceState.deviceType] }), _jsxs("p", { children: [_jsx("span", { className: "font-medium", children: "Orientation:" }), " ", deviceLoadingStates.deviceState.orientation] }), _jsxs("p", { children: [_jsx("span", { className: "font-medium", children: "Performance:" }), " ", deviceLoadingStates.deviceState.performanceLevel] }), _jsxs("p", { children: [_jsx("span", { className: "font-medium", children: "Battery:" }), " ", deviceLoadingStates.deviceState.batteryLevel] }), _jsxs("p", { children: [_jsx("span", { className: "font-medium", children: "Adaptive:" }), " ", deviceLoadingStates.deviceState.adaptiveBehavior ? 'Yes' : 'No'] })] })] }), _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "font-semibold", children: "Available Loading States" }), _jsx("div", { className: "space-y-2", children: deviceLoadingStates.getLoadingStatesForDevice().map(state => (_jsxs("div", { className: "p-3 bg-gray-50 rounded-lg", children: [_jsxs("div", { className: "flex justify-between items-center mb-1", children: [_jsx("span", { className: "font-medium", children: state.name }), _jsx(Badge, { variant: "outline", children: state.type })] }), _jsxs("div", { className: "text-sm text-gray-600", children: [_jsxs("p", { children: ["Duration: ", state.duration, "ms"] }), _jsxs("p", { children: ["Complexity: ", state.complexity] }), _jsxs("p", { children: ["Performance: ", state.performance] })] })] }, state.id))) })] })] }), _jsxs("div", { className: "flex flex-wrap gap-4 justify-center", children: [_jsx(Button, { onClick: deviceLoadingStates.enableAdaptiveBehavior, variant: "outline", children: "Enable Adaptive Behavior" }), _jsx(Button, { onClick: deviceLoadingStates.adaptToPerformance, variant: "outline", children: "Adapt to Performance" }), _jsx(Button, { onClick: deviceLoadingStates.clearAdaptations, variant: "outline", children: "Clear Adaptations" })] })] })), activeTab === 'performance' && (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "text-center mb-6", children: [_jsx("h3", { className: "text-xl font-semibold mb-2", children: "Loading Performance Optimization" }), _jsx("p", { className: "text-gray-600", children: "Real-time performance monitoring with automatic optimization and battery-conscious strategies" })] }), _jsxs("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: [_jsxs("div", { className: "metric-item", children: [_jsx("div", { className: "metric-value", children: loadingPerformance.performanceMetrics.frameRate }), _jsx("div", { className: "metric-label", children: "FPS" })] }), _jsxs("div", { className: "metric-item", children: [_jsxs("div", { className: "metric-value", children: [Math.round(loadingPerformance.performanceMetrics.renderTime), "ms"] }), _jsx("div", { className: "metric-label", children: "Render Time" })] }), _jsxs("div", { className: "metric-item", children: [_jsxs("div", { className: "metric-value", children: [loadingPerformance.performanceMetrics.memoryUsage, "MB"] }), _jsx("div", { className: "metric-label", children: "Memory" })] }), _jsxs("div", { className: "metric-item", children: [_jsx("div", { className: "metric-value", children: loadingPerformance.getPerformanceScore() }), _jsx("div", { className: "metric-label", children: "Score" })] })] }), _jsxs("div", { className: "p-4 bg-gray-50 rounded-lg", children: [_jsxs("h4", { className: "font-semibold mb-3", children: ["Performance Health: ", loadingPerformance.performanceHealth] }), _jsx("div", { className: "space-y-2", children: loadingPerformance.getOptimizationRecommendations().map((recommendation, index) => (_jsxs("p", { className: "text-sm text-gray-600", children: ["\u2022 ", recommendation] }, index))) })] }), _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "font-semibold", children: "Applied Optimizations" }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: loadingPerformance.optimizationStrategies.map(strategy => (_jsxs("div", { className: "p-3 bg-green-50 rounded-lg", children: [_jsxs("div", { className: "flex justify-between items-center mb-1", children: [_jsx("span", { className: "font-medium", children: strategy.name }), _jsx(Badge, { variant: strategy.impact === 'high' ? 'default' : 'secondary', children: strategy.impact })] }), _jsx("p", { className: "text-sm text-gray-600", children: strategy.description })] }, strategy.id))) })] }), _jsxs("div", { className: "flex flex-wrap gap-4 justify-center", children: [_jsx(Button, { onClick: loadingPerformance.optimizeAnimations, variant: "outline", children: "Optimize Animations" }), _jsx(Button, { onClick: loadingPerformance.optimizeMemory, variant: "outline", children: "Optimize Memory" }), _jsx(Button, { onClick: loadingPerformance.optimizeBattery, variant: "outline", children: "Optimize Battery" }), _jsx(Button, { onClick: loadingPerformance.optimizePerformance, variant: "outline", children: "Optimize Overall" })] })] })), activeTab === 'accessibility' && (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "text-center mb-6", children: [_jsx("h3", { className: "text-xl font-semibold mb-2", children: "Loading Accessibility Support" }), _jsx("p", { className: "text-gray-600", children: "Comprehensive accessibility features including screen reader support, reduced motion, focus management, and ARIA" })] }), _jsxs("div", { className: "text-center p-6 bg-purple-50 rounded-lg", children: [_jsxs("div", { className: "text-4xl font-bold text-purple-600 mb-2", children: [loadingAccessibility.accessibilityScore, "%"] }), _jsx("p", { className: "text-purple-700 font-medium", children: "Accessibility Score" })] }), _jsxs("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: [_jsxs("div", { className: "metric-item", children: [_jsx("div", { className: "metric-value", children: loadingAccessibility.accessibilityState.screenReaderActive ? '✓' : '✗' }), _jsx("div", { className: "metric-label", children: "Screen Reader" })] }), _jsxs("div", { className: "metric-item", children: [_jsx("div", { className: "metric-value", children: loadingAccessibility.accessibilityState.reducedMotionEnabled ? '✓' : '✗' }), _jsx("div", { className: "metric-label", children: "Reduced Motion" })] }), _jsxs("div", { className: "metric-item", children: [_jsx("div", { className: "metric-value", children: loadingAccessibility.accessibilityState.ariaLabelsActive ? '✓' : '✗' }), _jsx("div", { className: "metric-label", children: "ARIA Labels" })] }), _jsxs("div", { className: "metric-item", children: [_jsx("div", { className: "metric-value", children: loadingAccessibility.accessibilityState.keyboardNavigationActive ? '✓' : '✗' }), _jsx("div", { className: "metric-label", children: "Keyboard Nav" })] })] }), _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "font-semibold", children: "Active Accessibility Features" }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: loadingAccessibility.accessibilityFeatures.map(feature => (_jsxs("div", { className: "p-3 bg-purple-50 rounded-lg", children: [_jsxs("div", { className: "flex justify-between items-center mb-1", children: [_jsx("span", { className: "font-medium", children: feature.name }), _jsx(Badge, { variant: feature.impact === 'high' ? 'default' : 'secondary', children: feature.impact })] }), _jsx("p", { className: "text-sm text-gray-600", children: feature.description })] }, feature.id))) })] }), _jsxs("div", { className: "p-4 bg-blue-50 rounded-lg", children: [_jsx("h4", { className: "font-semibold mb-3", children: "Accessibility Recommendations" }), _jsx("div", { className: "space-y-2", children: loadingAccessibility.getAccessibilityRecommendations().map((recommendation, index) => (_jsxs("p", { className: "text-sm text-gray-600", children: ["\u2022 ", recommendation] }, index))) })] }), _jsxs("div", { className: "flex flex-wrap gap-4 justify-center", children: [_jsx(Button, { onClick: loadingAccessibility.enableScreenReaderSupport, variant: "outline", children: "Enable Screen Reader" }), _jsx(Button, { onClick: loadingAccessibility.enableReducedMotionSupport, variant: "outline", children: "Enable Reduced Motion" }), _jsx(Button, { onClick: loadingAccessibility.enableAriaSupport, variant: "outline", children: "Enable ARIA Support" }), _jsx(Button, { onClick: loadingAccessibility.enableKeyboardNavigation, variant: "outline", children: "Enable Keyboard Nav" })] })] }))] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4", children: [_jsxs("div", { className: `loading-status ${getBatteryClass()}`, children: [_jsx("div", { className: "w-3 h-3 bg-current rounded-full" }), _jsxs("span", { className: "text-sm font-medium", children: ["Battery: ", batteryConsciousLoading.getBatteryStatus()] })] }), _jsxs("div", { className: `loading-status ${getPerformanceClass()}`, children: [_jsx("div", { className: "w-3 h-3 bg-current rounded-full" }), _jsxs("span", { className: "text-sm font-medium", children: ["Performance: ", loadingPerformance.performanceHealth] })] }), _jsxs("div", { className: `loading-status ${getAccessibilityClass()}`, children: [_jsx("div", { className: "w-3 h-3 bg-current rounded-full" }), _jsxs("span", { className: "text-sm font-medium", children: ["Accessibility: ", loadingAccessibility.accessibilityScore, "%"] })] }), _jsxs("div", { className: "loading-status", children: [_jsx("div", { className: "w-3 h-3 bg-current rounded-full" }), _jsxs("span", { className: "text-sm font-medium", children: ["Device: ", deviceLoadingStates.deviceState.deviceType] })] })] }), batteryConsciousLoading.notifications.length > 0 && (_jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "font-semibold", children: "Recent Notifications" }), batteryConsciousLoading.notifications.slice(-3).map((notification, index) => (_jsx("div", { className: "p-3 bg-blue-50 border border-blue-200 rounded-lg", children: _jsx("p", { className: "text-sm text-blue-800", children: notification }) }, index)))] }))] }));
+};
+export default MobileSkeletonLoadingDemo;