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

package/dist/components/ui/mobile-skeleton-loading-demo.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;

package/dist/components/ui/navigation/breadcrumb.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Breadcrumb Component
+ * Provides navigation breadcrumbs with theme support and responsive design
+ */
+import * as React from 'react';
+import { BreadcrumbProps } from './types.js';
+export declare const Breadcrumb: React.FC<BreadcrumbProps>;
+export default Breadcrumb;
+//# sourceMappingURL=breadcrumb.d.ts.map

package/dist/components/ui/navigation/breadcrumb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/navigation/breadcrumb.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,eAAe,EAAkB,MAAM,YAAY,CAAC;AAE7D,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAiJhD,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/ui/navigation/breadcrumb.esm.js

@@ -0,0 +1,60 @@
+/**
+ * Breadcrumb Component
+ * Provides navigation breadcrumbs with theme support and responsive design
+ */
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from 'react';
+import { ChevronRightIcon, HomeIcon } from '@heroicons/react/24/outline';
+export const Breadcrumb = ({ items, separator = _jsx(ChevronRightIcon, { className: "w-4 h-4" }), maxItems = 5, showHome = true, homeIcon = _jsx(HomeIcon, { className: "w-4 h-4" }), onItemClick, truncate = true, responsive = true, className = '', 'data-testid': testId = 'breadcrumb', }) => {
+    const [isExpanded, setIsExpanded] = useState(false);
+    // Memoize processed items to avoid unnecessary recalculations
+    const processedItems = useMemo(() => {
+        if (!truncate || items.length <= maxItems) {
+            return items;
+        }
+        if (isExpanded) {
+            return items;
+        }
+        // Show first, last, and ellipsis in the middle
+        const firstItems = items.slice(0, 2);
+        const lastItems = items.slice(-2);
+        return [
+            ...firstItems,
+            { id: 'ellipsis', label: '...', disabled: true },
+            ...lastItems,
+        ];
+    }, [items, maxItems, truncate, isExpanded]);
+    const handleItemClick = (item) => {
+        if (item.disabled || item.id === 'ellipsis')
+            return;
+        if (onItemClick) {
+            onItemClick(item);
+        }
+    };
+    const handleExpandToggle = () => {
+        setIsExpanded(!isExpanded);
+    };
+    const getThemeClasses = () => {
+        return 'breadcrumb breadcrumb--stan-design';
+    };
+    const getItemClasses = (item, isLast) => {
+        const baseClasses = 'breadcrumb__item-button';
+        if (item.disabled) {
+            return `${baseClasses} breadcrumb__item-button--disabled`;
+        }
+        if (isLast) {
+            return `${baseClasses} breadcrumb__item-button--active`;
+        }
+        return baseClasses;
+    };
+    const getSeparatorClasses = () => {
+        return 'breadcrumb__separator breadcrumb__separator--semantic';
+    };
+    return (_jsxs("nav", { className: `${getThemeClasses()} ${className}`, "aria-label": "Breadcrumb", "data-testid": testId, children: [showHome && (_jsxs(_Fragment, { children: [_jsx("button", { onClick: () => handleItemClick({ id: 'home', label: 'Home', href: '/' }), className: `breadcrumb__home-button ${getItemClasses({ id: 'home', label: 'Home' }, false)}`, "aria-label": "Go to home page", children: _jsx("span", { className: "breadcrumb__icon", children: homeIcon }) }), separator && (_jsx("span", { className: getSeparatorClasses(), "aria-hidden": "true", children: separator }))] })), _jsx("ol", { className: "breadcrumb__list", children: processedItems.map((item, index) => {
+                    const isLast = index === processedItems.length - 1;
+                    const isEllipsis = item.id === 'ellipsis';
+                    return (_jsxs("li", { className: "breadcrumb__item", children: [index > 0 && separator && (_jsx("span", { className: getSeparatorClasses(), "aria-hidden": "true", children: separator })), isEllipsis ? (_jsx("button", { onClick: handleExpandToggle, className: "breadcrumb__ellipsis", "aria-label": isExpanded ? 'Collapse breadcrumbs' : 'Expand breadcrumbs', children: item.label })) : (_jsxs("button", { onClick: () => handleItemClick(item), className: getItemClasses(item, isLast), disabled: item.disabled, "aria-current": isLast ? 'page' : undefined, "aria-label": item.href ? `Navigate to ${item.label}` : item.label, children: [item.icon && _jsx("span", { className: "breadcrumb__icon", children: item.icon }), responsive && window.innerWidth < 640 ? (_jsx("span", { className: "breadcrumb__item-label", children: item.label })) : (_jsx("span", { className: "breadcrumb__item-label", children: item.label }))] }))] }, item.id));
+                }) }), truncate && items.length > maxItems && (_jsx("button", { onClick: handleExpandToggle, className: `breadcrumb__expand-toggle breadcrumb__expand-toggle--semantic`, "aria-label": isExpanded ? 'Show fewer breadcrumbs' : 'Show all breadcrumbs', children: isExpanded ? 'Show Less' : 'Show All' }))] }));
+};
+export default Breadcrumb;

package/dist/components/ui/navigation/breadcrumb.js

@@ -0,0 +1,60 @@
+/**
+ * Breadcrumb Component
+ * Provides navigation breadcrumbs with theme support and responsive design
+ */
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from 'react';
+import { ChevronRightIcon, HomeIcon } from '@heroicons/react/24/outline';
+export const Breadcrumb = ({ items, separator = _jsx(ChevronRightIcon, { className: "w-4 h-4" }), maxItems = 5, showHome = true, homeIcon = _jsx(HomeIcon, { className: "w-4 h-4" }), onItemClick, truncate = true, responsive = true, className = '', 'data-testid': testId = 'breadcrumb', }) => {
+    const [isExpanded, setIsExpanded] = useState(false);
+    // Memoize processed items to avoid unnecessary recalculations
+    const processedItems = useMemo(() => {
+        if (!truncate || items.length <= maxItems) {
+            return items;
+        }
+        if (isExpanded) {
+            return items;
+        }
+        // Show first, last, and ellipsis in the middle
+        const firstItems = items.slice(0, 2);
+        const lastItems = items.slice(-2);
+        return [
+            ...firstItems,
+            { id: 'ellipsis', label: '...', disabled: true },
+            ...lastItems,
+        ];
+    }, [items, maxItems, truncate, isExpanded]);
+    const handleItemClick = (item) => {
+        if (item.disabled || item.id === 'ellipsis')
+            return;
+        if (onItemClick) {
+            onItemClick(item);
+        }
+    };
+    const handleExpandToggle = () => {
+        setIsExpanded(!isExpanded);
+    };
+    const getThemeClasses = () => {
+        return 'breadcrumb breadcrumb--stan-design';
+    };
+    const getItemClasses = (item, isLast) => {
+        const baseClasses = 'breadcrumb__item-button';
+        if (item.disabled) {
+            return `${baseClasses} breadcrumb__item-button--disabled`;
+        }
+        if (isLast) {
+            return `${baseClasses} breadcrumb__item-button--active`;
+        }
+        return baseClasses;
+    };
+    const getSeparatorClasses = () => {
+        return 'breadcrumb__separator breadcrumb__separator--semantic';
+    };
+    return (_jsxs("nav", { className: `${getThemeClasses()} ${className}`, "aria-label": "Breadcrumb", "data-testid": testId, children: [showHome && (_jsxs(_Fragment, { children: [_jsx("button", { onClick: () => handleItemClick({ id: 'home', label: 'Home', href: '/' }), className: `breadcrumb__home-button ${getItemClasses({ id: 'home', label: 'Home' }, false)}`, "aria-label": "Go to home page", children: _jsx("span", { className: "breadcrumb__icon", children: homeIcon }) }), separator && (_jsx("span", { className: getSeparatorClasses(), "aria-hidden": "true", children: separator }))] })), _jsx("ol", { className: "breadcrumb__list", children: processedItems.map((item, index) => {
+                    const isLast = index === processedItems.length - 1;
+                    const isEllipsis = item.id === 'ellipsis';
+                    return (_jsxs("li", { className: "breadcrumb__item", children: [index > 0 && separator && (_jsx("span", { className: getSeparatorClasses(), "aria-hidden": "true", children: separator })), isEllipsis ? (_jsx("button", { onClick: handleExpandToggle, className: "breadcrumb__ellipsis", "aria-label": isExpanded ? 'Collapse breadcrumbs' : 'Expand breadcrumbs', children: item.label })) : (_jsxs("button", { onClick: () => handleItemClick(item), className: getItemClasses(item, isLast), disabled: item.disabled, "aria-current": isLast ? 'page' : undefined, "aria-label": item.href ? `Navigate to ${item.label}` : item.label, children: [item.icon && _jsx("span", { className: "breadcrumb__icon", children: item.icon }), responsive && window.innerWidth < 640 ? (_jsx("span", { className: "breadcrumb__item-label", children: item.label })) : (_jsx("span", { className: "breadcrumb__item-label", children: item.label }))] }))] }, item.id));
+                }) }), truncate && items.length > maxItems && (_jsx("button", { onClick: handleExpandToggle, className: `breadcrumb__expand-toggle breadcrumb__expand-toggle--semantic`, "aria-label": isExpanded ? 'Show fewer breadcrumbs' : 'Show all breadcrumbs', children: isExpanded ? 'Show Less' : 'Show All' }))] }));
+};
+export default Breadcrumb;

package/dist/components/ui/navigation/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Navigation Components Index
+ * Exports all navigation components for easy importing
+ */
+export { Breadcrumb } from './breadcrumb';
+export { Pagination } from './pagination';
+export { Tabs } from './tabs';
+export { Stepper } from './stepper';
+export { Menu } from './menu';
+export { Sidebar } from './sidebar';
+export { ProgressiveNavigation } from './progressive-navigation';
+export { UserMenu } from './user-menu.js';
+export { UserAvatar } from './user-avatar.js';
+export { SubscriptionBadge } from './subscription-badge.js';
+export type { NavigationBaseProps, NavigationItem, NavigationGroup, BreadcrumbProps, BreadcrumbItem, PaginationProps, PaginationItem, TabsProps, TabItem, StepperProps, StepItem, StepAction, MenuProps, SidebarProps, ProgressiveNavigationProps, NavigationState, NavigationContextValue, NavigationAction, NavigationBreakpoint, NavigationSpacing, NavigationAnimation, NavigationAccessibility, UserMenuProps, UserMenuUser, UserMenuSubscription, UserMenuItem, UserMenuGroup, UserAvatarProps, SubscriptionBadgeProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/navigation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/navigation/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAGjE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAG5D,YAAY,EACV,mBAAmB,EACnB,cAAc,EACd,eAAe,EACf,eAAe,EACf,cAAc,EACd,eAAe,EACf,cAAc,EACd,SAAS,EACT,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,SAAS,EACT,YAAY,EACZ,0BAA0B,EAC1B,eAAe,EACf,sBAAsB,EACtB,gBAAgB,EAChB,oBAAoB,EACpB,iBAAiB,EACjB,mBAAmB,EACnB,uBAAuB,EAEvB,aAAa,EACb,YAAY,EACZ,oBAAoB,EACpB,YAAY,EACZ,aAAa,EACb,eAAe,EACf,sBAAsB,EACvB,MAAM,SAAS,CAAC"}

package/dist/components/ui/navigation/index.esm.js

@@ -0,0 +1,15 @@
+/**
+ * Navigation Components Index
+ * Exports all navigation components for easy importing
+ */
+export { Breadcrumb } from './breadcrumb';
+export { Pagination } from './pagination';
+export { Tabs } from './tabs';
+export { Stepper } from './stepper';
+export { Menu } from './menu';
+export { Sidebar } from './sidebar';
+export { ProgressiveNavigation } from './progressive-navigation';
+// User Menu Components
+export { UserMenu } from './user-menu.js';
+export { UserAvatar } from './user-avatar.js';
+export { SubscriptionBadge } from './subscription-badge.js';

package/dist/components/ui/navigation/index.js

@@ -0,0 +1,15 @@
+/**
+ * Navigation Components Index
+ * Exports all navigation components for easy importing
+ */
+export { Breadcrumb } from './breadcrumb';
+export { Pagination } from './pagination';
+export { Tabs } from './tabs';
+export { Stepper } from './stepper';
+export { Menu } from './menu';
+export { Sidebar } from './sidebar';
+export { ProgressiveNavigation } from './progressive-navigation';
+// User Menu Components
+export { UserMenu } from './user-menu.js';
+export { UserAvatar } from './user-avatar.js';
+export { SubscriptionBadge } from './subscription-badge.js';

package/dist/components/ui/navigation/menu.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Menu Component
+ * Provides comprehensive menu functionality with theme support and multiple variants
+ */
+import * as React from 'react';
+import { MenuProps } from './types.js';
+export declare const Menu: React.FC<MenuProps>;
+export default Menu;
+//# sourceMappingURL=menu.d.ts.map

package/dist/components/ui/navigation/menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/navigation/menu.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,SAAS,EAAmC,MAAM,YAAY,CAAC;AA2BxE,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAiVpC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/ui/navigation/menu.esm.js

@@ -0,0 +1,192 @@
+/**
+ * Menu Component
+ * Provides comprehensive menu functionality with theme support and multiple variants
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useMemo, useRef, useEffect } from 'react';
+// Simple icon components
+const ChevronDownIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }));
+const ChevronRightIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }));
+const MagnifyingGlassIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }));
+const FunnelIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z" }) }));
+export const Menu = ({ items = [], groups, variant = 'dropdown', size = 'md', 
+// TODO: Implement orientation, trigger, showArrow, and fullWidth in future version
+// orientation = 'horizontal',
+// trigger = 'click',
+placement = 'bottom', offset = 8, 
+// showArrow = false,
+// fullWidth = false,
+disabled = false, loading = false, searchable = false, onSearch, filterable = false, onFilter, selectable = false, multiSelect = false, selectedItems = [], onSelectionChange, className = '', 'data-testid': testId = 'menu', }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [filterValue, setFilterValue] = useState('');
+    const [internalSelectedItems, setInternalSelectedItems] = useState(selectedItems || []);
+    // TODO: Implement group expansion functionality in future version
+    // const [expandedGroups, setExpandedGroups] = useState<string[]>([]);
+    const menuRef = useRef(null);
+    const triggerRef = useRef(null);
+    // Use controlled or uncontrolled selected items
+    const currentSelectedItems = selectedItems !== undefined ? selectedItems : internalSelectedItems;
+    // Handle click outside to close menu
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (menuRef.current && !menuRef.current.contains(event.target) &&
+                triggerRef.current && !triggerRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen]);
+    // Handle escape key to close menu
+    useEffect(() => {
+        const handleEscape = (event) => {
+            if (event.key === 'Escape') {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('keydown', handleEscape);
+        }
+        return () => {
+            document.removeEventListener('keydown', handleEscape);
+        };
+    }, [isOpen]);
+    const handleToggle = useCallback(() => {
+        if (disabled || loading)
+            return;
+        setIsOpen(!isOpen);
+    }, [disabled, loading, isOpen]);
+    const handleItemClick = useCallback((item) => {
+        if (item.disabled)
+            return;
+        if (selectable) {
+            let newSelectedItems;
+            if (multiSelect) {
+                if (currentSelectedItems.includes(item.id)) {
+                    newSelectedItems = currentSelectedItems.filter(id => id !== item.id);
+                }
+                else {
+                    newSelectedItems = [...currentSelectedItems, item.id];
+                }
+            }
+            else {
+                newSelectedItems = [item.id];
+            }
+            if (selectedItems === undefined) {
+                setInternalSelectedItems(newSelectedItems);
+            }
+            if (onSelectionChange) {
+                onSelectionChange(newSelectedItems);
+            }
+        }
+        if (item.onClick) {
+            item.onClick();
+        }
+        // Close menu for single select or non-selectable menus
+        if (!multiSelect || !selectable) {
+            setIsOpen(false);
+        }
+    }, [selectable, multiSelect, currentSelectedItems, selectedItems, onSelectionChange]);
+    // TODO: Implement group toggle functionality in future version
+    // const handleGroupToggle = useCallback((groupId: string) => {
+    //   setExpandedGroups(prev => 
+    //     prev.includes(groupId) 
+    //       ? prev.filter(id => id !== groupId)
+    //       : [...prev, groupId]
+    //   );
+    // }, []);
+    const handleSearch = useCallback((query) => {
+        setSearchQuery(query);
+        if (onSearch) {
+            onSearch(query);
+        }
+    }, [onSearch]);
+    const handleFilter = useCallback((filter) => {
+        setFilterValue(filter);
+        if (onFilter) {
+            onFilter(filter);
+        }
+    }, [onFilter]);
+    // Filter items based on search and filter
+    const filteredItems = useMemo(() => {
+        let filtered = items;
+        if (searchQuery) {
+            filtered = filtered.filter(item => item.label.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                item.description?.toLowerCase().includes(searchQuery.toLowerCase()));
+        }
+        if (filterValue) {
+            filtered = filtered.filter(item => item.label.toLowerCase().includes(filterValue.toLowerCase()));
+        }
+        return filtered;
+    }, [items, searchQuery, filterValue]);
+    const getSizeClasses = () => {
+        switch (size) {
+            case 'sm':
+                return 'menu__trigger--sm';
+            case 'lg':
+                return 'menu__trigger--lg';
+            default: // md
+                return 'menu__trigger--md';
+        }
+    };
+    const getVariantClasses = () => {
+        switch (variant) {
+            case 'dropdown':
+                return 'menu__content--dropdown';
+            case 'context':
+                return 'menu__content--context';
+            case 'command':
+                return 'menu__content--command';
+            default: // default
+                return 'menu__content--default';
+        }
+    };
+    const getThemeClasses = () => {
+        return 'menu menu--stan-design';
+    };
+    const getItemClasses = (item) => {
+        let classes = `menu__item ${getSizeClasses()}`;
+        if (item.disabled) {
+            classes += ' menu__item--disabled';
+        }
+        else if (selectable && currentSelectedItems.includes(item.id)) {
+            classes += ' menu__item--selected';
+        }
+        else {
+            classes += ' menu__item--default';
+        }
+        return classes;
+    };
+    const getPlacementClasses = () => {
+        switch (placement) {
+            case 'top':
+                return 'menu__content--placement-top';
+            case 'bottom':
+                return 'menu__content--placement-bottom';
+            case 'left':
+                return 'menu__content--placement-left';
+            case 'right':
+                return 'menu__content--placement-right';
+            default:
+                return 'menu__content--placement-bottom';
+        }
+    };
+    const renderMenuItem = (item) => (_jsxs("button", { onClick: () => handleItemClick(item), disabled: item.disabled, className: getItemClasses(item), children: [_jsxs("div", { className: "menu__item-content", children: [item.icon && _jsx("span", { className: "menu__item-icon", children: item.icon }), _jsxs("div", { className: "menu__item-text", children: [_jsx("div", { className: "menu__item-label", children: item.label }), item.description && (_jsx("div", { className: "menu__item-description", children: item.description }))] })] }), item.badge && _jsx("span", { className: "menu__item-badge", children: item.badge }), item.children && item.children.length > 0 && (_jsx(ChevronRightIcon, { className: "menu__item-arrow" }))] }, item.id));
+    const renderMenuGroup = (group) => (_jsxs("div", { className: "menu__group", children: [group.title && (_jsx("div", { className: "menu__group-title", children: group.title })), group.items.map(renderMenuItem)] }, group.id));
+    return (_jsxs("div", { className: `menu__container ${getThemeClasses()}`, "data-testid": testId, children: [_jsxs("button", { ref: triggerRef, onClick: handleToggle, disabled: disabled || loading, className: `menu__trigger ${getSizeClasses()} ${className}`, "aria-expanded": isOpen, "aria-haspopup": "true", children: ["Menu", _jsx(ChevronDownIcon, { className: "menu__trigger-icon" })] }), isOpen && (_jsxs("div", { ref: menuRef, role: "menu", className: `menu__content ${getVariantClasses()} ${getPlacementClasses()}`, style: { marginTop: placement === 'bottom' ? offset : undefined }, children: [searchable && (_jsx("div", { className: "menu__search", children: _jsxs("div", { className: "menu__search-container", children: [_jsx(MagnifyingGlassIcon, { className: "menu__search-icon" }), _jsx("input", { type: "text", placeholder: "Search...", value: searchQuery, onChange: (e) => handleSearch(e.target.value), className: "menu__search-input" })] }) })), filterable && (_jsx("div", { className: "menu__filter", children: _jsxs("div", { className: "menu__filter-container", children: [_jsx(FunnelIcon, { className: "menu__filter-icon" }), _jsxs("select", { value: filterValue, onChange: (e) => handleFilter(e.target.value), className: "menu__filter-select", children: [_jsx("option", { value: "", children: "All" }), _jsx("option", { value: "featured", children: "Featured" }), _jsx("option", { value: "recent", children: "Recent" })] })] }) })), _jsx("div", { className: "menu__items", children: groups ? groups.map(renderMenuGroup) : filteredItems.map(renderMenuItem) }), selectable && multiSelect && currentSelectedItems.length > 0 && (_jsx("div", { className: "menu__selection-actions", children: _jsxs("div", { className: "menu__selection-info", children: [_jsxs("span", { className: "menu__selection-count", children: [currentSelectedItems.length, " selected"] }), _jsx("button", { onClick: () => {
+                                        const newSelectedItems = [];
+                                        if (selectedItems === undefined) {
+                                            setInternalSelectedItems(newSelectedItems);
+                                        }
+                                        if (onSelectionChange) {
+                                            onSelectionChange(newSelectedItems);
+                                        }
+                                    }, className: "menu__selection-clear", children: "Clear" })] }) }))] }))] }));
+};
+export default Menu;