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

package/dist/components/ui/touch-friendly-interface.js

@@ -1,296 +1,118 @@
-import React, { forwardRef } from 'react'
-import { cn } from '../../lib/utils'
-import { useTouchFriendlyInterface } from '../../hooks/use-touch-friendly-interface'
-
-// Touch-Friendly Button Component
-export interface TouchFriendlyButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive'
-  size?: 'sm' | 'default' | 'lg' | 'xl'
-  feedback?: 'scale' | 'ripple' | 'color' | 'none'
-  children: React.ReactNode
-}
-
-export const TouchFriendlyButton = forwardRef<HTMLButtonElement, TouchFriendlyButtonProps>(
-  ({ className, variant = 'default', size = 'default', feedback = 'scale', children, ...props }, ref) => {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cn } from '../../lib/utils';
+import { useTouchFriendlyInterface } from '../../hooks/use-touch-friendly-interface';
+export const TouchFriendlyButton = forwardRef(({ className, variant = 'default', size = 'default', feedback = 'scale', children, ...props }, ref) => {
     const { isTouchTargetCompliant, getTouchTargetSize } = useTouchFriendlyInterface({
-      minSize: 44,
-      feedback
-    })
-
-    const baseClasses = 'touch-target touch-friendly-button touch-interaction touch-performance'
+        minSize: 44,
+        feedback
+    });
+    const baseClasses = 'touch-target touch-friendly-button touch-interaction touch-performance';
     const feedbackClasses = {
-      scale: 'touch-feedback',
-      ripple: 'touch-ripple',
-      color: 'touch-state-hover touch-state-active',
-      none: ''
-    }
-
+        scale: 'touch-feedback',
+        ripple: 'touch-ripple',
+        color: 'touch-state-hover touch-state-active',
+        none: ''
+    };
     const variantClasses = {
-      default: 'touch-friendly-button',
-      secondary: 'touch-friendly-button-secondary',
-      outline: 'touch-target touch-spacing bg-transparent border border-cs-border text-cs-text-primary hover:bg-cs-hover-bg',
-      ghost: 'touch-target touch-spacing bg-transparent text-cs-text-primary hover:bg-cs-hover-bg',
-      destructive: 'touch-target touch-spacing bg-cs-error text-white hover:bg-cs-error-hover'
-    }
-
+        default: 'touch-friendly-button',
+        secondary: 'touch-friendly-button-secondary',
+        outline: 'touch-target touch-spacing bg-transparent border border-cs-border text-cs-text-primary hover:bg-cs-hover-bg',
+        ghost: 'touch-target touch-spacing bg-transparent text-cs-text-primary hover:bg-cs-hover-bg',
+        destructive: 'touch-target touch-spacing bg-cs-error text-white hover:bg-cs-error-hover'
+    };
     const sizeClasses = {
-      sm: 'min-h-[44px] min-w-[44px] px-3 py-2 text-sm',
-      default: 'min-h-[48px] min-w-[48px] px-4 py-3 text-base',
-      lg: 'min-h-[56px] min-w-[56px] px-6 py-4 text-lg',
-      xl: 'min-h-[64px] min-w-[64px] px-8 py-5 text-xl'
-    }
-
-    return (
-      <button
-        ref={ref}
-        className={cn(
-          baseClasses,
-          feedbackClasses[feedback],
-          variantClasses[variant],
-          sizeClasses[size],
-          className
-        )}
-        style={{
-          minHeight: `${getTouchTargetSize()}px`,
-          minWidth: `${getTouchTargetSize()}px`
-        }}
-        {...props}
-      >
-        {children}
-        {!isTouchTargetCompliant() && (
-          <span className="text-xs text-cs-warning ml-2">
-            ⚠️ Target too small
-          </span>
-        )}
-      </button>
-    )
-  }
-)
-
-TouchFriendlyButton.displayName = 'TouchFriendlyButton'
-
-// Touch-Friendly Input Component
-export interface TouchFriendlyInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
-  touchSize?: 'sm' | 'default' | 'lg'
-  feedback?: 'scale' | 'ripple' | 'color' | 'none'
-}
-
-export const TouchFriendlyInput = forwardRef<HTMLInputElement, TouchFriendlyInputProps>(
-  ({ className, touchSize = 'default', feedback = 'scale', ...props }, ref) => {
+        sm: 'min-h-[44px] min-w-[44px] px-3 py-2 text-sm',
+        default: 'min-h-[48px] min-w-[48px] px-4 py-3 text-base',
+        lg: 'min-h-[56px] min-w-[56px] px-6 py-4 text-lg',
+        xl: 'min-h-[64px] min-w-[64px] px-8 py-5 text-xl'
+    };
+    return (_jsxs("button", { ref: ref, className: cn(baseClasses, feedbackClasses[feedback], variantClasses[variant], sizeClasses[size], className), style: {
+            minHeight: `${getTouchTargetSize()}px`,
+            minWidth: `${getTouchTargetSize()}px`
+        }, ...props, children: [children, !isTouchTargetCompliant() && (_jsx("span", { className: "text-xs text-cs-warning ml-2", children: "\u26A0\uFE0F Target too small" }))] }));
+});
+TouchFriendlyButton.displayName = 'TouchFriendlyButton';
+export const TouchFriendlyInput = forwardRef(({ className, touchSize = 'default', feedback = 'scale', ...props }, ref) => {
     const { getTouchTargetSize } = useTouchFriendlyInterface({
-      minSize: 44,
-      feedback
-    })
-
-    const baseClasses = 'touch-target touch-friendly-input touch-interaction touch-performance'
+        minSize: 44,
+        feedback
+    });
+    const baseClasses = 'touch-target touch-friendly-input touch-interaction touch-performance';
     const feedbackClasses = {
-      scale: 'touch-feedback',
-      ripple: 'touch-ripple',
-      color: 'touch-state-hover touch-state-focus',
-      none: ''
-    }
-
+        scale: 'touch-feedback',
+        ripple: 'touch-ripple',
+        color: 'touch-state-hover touch-state-focus',
+        none: ''
+    };
     const sizeClasses = {
-      sm: 'min-h-[44px] min-w-[44px] px-3 py-2 text-sm',
-      default: 'min-h-[48px] min-w-[48px] px-4 py-3 text-base',
-      lg: 'min-h-[56px] min-w-[56px] px-6 py-4 text-lg'
-    }
-
-    return (
-      <input
-        ref={ref}
-        className={cn(
-          baseClasses,
-          feedbackClasses[feedback],
-          sizeClasses[touchSize],
-          className
-        )}
-        style={{
-          minHeight: `${getTouchTargetSize()}px`,
-          minWidth: `${getTouchTargetSize()}px`
-        }}
-        {...props}
-      />
-    )
-  }
-)
-
-TouchFriendlyInput.displayName = 'TouchFriendlyInput'
-
-// Touch-Friendly Card Component
-export interface TouchFriendlyCardProps extends React.HTMLAttributes<HTMLDivElement> {
-  size?: 'sm' | 'default' | 'lg'
-  feedback?: 'scale' | 'ripple' | 'color' | 'none'
-  interactive?: boolean
-}
-
-export const TouchFriendlyCard = forwardRef<HTMLDivElement, TouchFriendlyCardProps>(
-  ({ className, size = 'default', feedback = 'scale', interactive = false, children, ...props }, ref) => {
+        sm: 'min-h-[44px] min-w-[44px] px-3 py-2 text-sm',
+        default: 'min-h-[48px] min-w-[48px] px-4 py-3 text-base',
+        lg: 'min-h-[56px] min-w-[56px] px-6 py-4 text-lg'
+    };
+    return (_jsx("input", { ref: ref, className: cn(baseClasses, feedbackClasses[feedback], sizeClasses[touchSize], className), style: {
+            minHeight: `${getTouchTargetSize()}px`,
+            minWidth: `${getTouchTargetSize()}px`
+        }, ...props }));
+});
+TouchFriendlyInput.displayName = 'TouchFriendlyInput';
+export const TouchFriendlyCard = forwardRef(({ className, size = 'default', feedback = 'scale', interactive = false, children, ...props }, ref) => {
     const { isTouchTargetCompliant, getTouchTargetSize } = useTouchFriendlyInterface({
-      minSize: 44,
-      feedback
-    })
-
-    const baseClasses = 'touch-friendly-card touch-interaction touch-performance'
+        minSize: 44,
+        feedback
+    });
+    const baseClasses = 'touch-friendly-card touch-interaction touch-performance';
     const feedbackClasses = interactive ? {
-      scale: 'touch-feedback',
-      ripple: 'touch-ripple',
-      color: 'touch-state-hover touch-state-active',
-      none: ''
-    } : { scale: '', ripple: '', color: '', none: '' }
-
+        scale: 'touch-feedback',
+        ripple: 'touch-ripple',
+        color: 'touch-state-hover touch-state-active',
+        none: ''
+    } : { scale: '', ripple: '', color: '', none: '' };
     const sizeClasses = {
-      sm: 'min-h-[44px] min-w-[44px] p-3',
-      default: 'min-h-[48px] min-w-[48px] p-4',
-      lg: 'min-h-[56px] min-w-[56px] p-6'
-    }
-
-    const interactiveClasses = interactive ? 'cursor-pointer' : ''
-
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          baseClasses,
-          feedbackClasses[feedback],
-          sizeClasses[size],
-          interactiveClasses,
-          className
-        )}
-        style={{
-          minHeight: `${getTouchTargetSize()}px`,
-          minWidth: `${getTouchTargetSize()}px`
-        }}
-        {...props}
-      >
-        {children}
-        {interactive && !isTouchTargetCompliant() && (
-          <div className="text-xs text-cs-warning mt-2">
-            ⚠️ Interactive target too small
-          </div>
-        )}
-      </div>
-    )
-  }
-)
-
-TouchFriendlyCard.displayName = 'TouchFriendlyCard'
-
-// Touch-Friendly Toggle Component
-export interface TouchFriendlyToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  checked?: boolean
-  onCheckedChange?: (checked: boolean) => void
-  size?: 'sm' | 'default' | 'lg'
-}
-
-export const TouchFriendlyToggle = forwardRef<HTMLButtonElement, TouchFriendlyToggleProps>(
-  ({ className, checked = false, onCheckedChange, size = 'default', ...props }, ref) => {
+        sm: 'min-h-[44px] min-w-[44px] p-3',
+        default: 'min-h-[48px] min-w-[48px] p-4',
+        lg: 'min-h-[56px] min-w-[56px] p-6'
+    };
+    const interactiveClasses = interactive ? 'cursor-pointer' : '';
+    return (_jsxs("div", { ref: ref, className: cn(baseClasses, feedbackClasses[feedback], sizeClasses[size], interactiveClasses, className), style: {
+            minHeight: `${getTouchTargetSize()}px`,
+            minWidth: `${getTouchTargetSize()}px`
+        }, ...props, children: [children, interactive && !isTouchTargetCompliant() && (_jsx("div", { className: "text-xs text-cs-warning mt-2", children: "\u26A0\uFE0F Interactive target too small" }))] }));
+});
+TouchFriendlyCard.displayName = 'TouchFriendlyCard';
+export const TouchFriendlyToggle = forwardRef(({ className, checked = false, onCheckedChange, size = 'default', ...props }, ref) => {
     const { isTouchTargetCompliant, getTouchTargetSize } = useTouchFriendlyInterface({
-      minSize: 44,
-      feedback: 'scale'
-    })
-
-    const baseClasses = 'touch-target touch-interaction touch-performance touch-feedback'
+        minSize: 44,
+        feedback: 'scale'
+    });
+    const baseClasses = 'touch-target touch-interaction touch-performance touch-feedback';
     const sizeClasses = {
-      sm: 'min-h-[44px] min-w-[44px]',
-      default: 'min-h-[48px] min-w-[48px]',
-      lg: 'min-h-[56px] min-w-[56px]'
-    }
-
+        sm: 'min-h-[44px] min-w-[44px]',
+        default: 'min-h-[48px] min-w-[48px]',
+        lg: 'min-h-[56px] min-w-[56px]'
+    };
     const handleClick = () => {
-      onCheckedChange?.(!checked)
-    }
-
-    return (
-      <button
-        ref={ref}
-        type="button"
-        role="switch"
-        aria-checked={checked}
-        className={cn(
-          baseClasses,
-          sizeClasses[size],
-          'relative inline-flex items-center justify-center rounded-full transition-colors',
-          checked ? 'bg-cs-primary' : 'bg-cs-border',
-          'focus:outline-none focus:ring-2 focus:ring-cs-primary focus:ring-offset-2',
-          className
-        )}
-        style={{
-          minHeight: `${getTouchTargetSize()}px`,
-          minWidth: `${getTouchTargetSize()}px`
-        }}
-        onClick={handleClick}
-        {...props}
-      >
-        <span
-          className={cn(
-            'inline-block rounded-full bg-white shadow transform transition-transform',
-            size === 'sm' ? 'w-5 h-5' : size === 'default' ? 'w-6 h-6' : 'w-7 h-7',
-            checked ? 'translate-x-full' : 'translate-x-0'
-          )}
-        />
-        {!isTouchTargetCompliant() && (
-          <span className="text-xs text-cs-warning absolute -bottom-6 left-1/2 transform -translate-x-1/2">
-            ⚠️ Target too small
-          </span>
-        )}
-      </button>
-    )
-  }
-)
-
-TouchFriendlyToggle.displayName = 'TouchFriendlyToggle'
-
-// Touch-Friendly Slider Component
-export interface TouchFriendlySliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
-  touchSize?: 'sm' | 'default' | 'lg'
-  showValue?: boolean
-}
-
-export const TouchFriendlySlider = forwardRef<HTMLInputElement, TouchFriendlySliderProps>(
-  ({ className, touchSize = 'default', showValue = true, ...props }, ref) => {
+        onCheckedChange?.(!checked);
+    };
+    return (_jsxs("button", { ref: ref, type: "button", role: "switch", "aria-checked": checked, className: cn(baseClasses, sizeClasses[size], 'relative inline-flex items-center justify-center rounded-full transition-colors', checked ? 'bg-cs-primary' : 'bg-cs-border', 'focus:outline-none focus:ring-2 focus:ring-cs-primary focus:ring-offset-2', className), style: {
+            minHeight: `${getTouchTargetSize()}px`,
+            minWidth: `${getTouchTargetSize()}px`
+        }, onClick: handleClick, ...props, children: [_jsx("span", { className: cn('inline-block rounded-full bg-white shadow transform transition-transform', size === 'sm' ? 'w-5 h-5' : size === 'default' ? 'w-6 h-6' : 'w-7 h-7', checked ? 'translate-x-full' : 'translate-x-0') }), !isTouchTargetCompliant() && (_jsx("span", { className: "text-xs text-cs-warning absolute -bottom-6 left-1/2 transform -translate-x-1/2", children: "\u26A0\uFE0F Target too small" }))] }));
+});
+TouchFriendlyToggle.displayName = 'TouchFriendlyToggle';
+export const TouchFriendlySlider = forwardRef(({ className, touchSize = 'default', showValue = true, ...props }, ref) => {
     const { isTouchTargetCompliant, getTouchTargetSize } = useTouchFriendlyInterface({
-      minSize: 44,
-      feedback: 'scale'
-    })
-
-    const baseClasses = 'touch-target touch-interaction touch-performance touch-feedback'
+        minSize: 44,
+        feedback: 'scale'
+    });
+    const baseClasses = 'touch-target touch-interaction touch-performance touch-feedback';
     const sizeClasses = {
-      sm: 'min-h-[44px] min-w-[44px]',
-      default: 'min-h-[48px] min-w-[48px]',
-      lg: 'min-h-[56px] min-w-[56px]'
-    }
-
-    return (
-      <div className="flex flex-col items-center space-y-2">
-        <input
-          ref={ref}
-          type="range"
-          className={cn(
-            baseClasses,
-            sizeClasses[touchSize],
-            'w-full h-2 bg-cs-border rounded-lg appearance-none cursor-pointer',
-            'focus:outline-none focus:ring-2 focus:ring-cs-primary',
-            className
-          )}
-          style={{
-            minHeight: `${getTouchTargetSize()}px`
-          }}
-          {...props}
-        />
-        {showValue && (
-          <span className="text-sm text-cs-text-secondary">
-            {props.value || props.defaultValue || 0}
-          </span>
-        )}
-        {!isTouchTargetCompliant() && (
-          <span className="text-xs text-cs-warning">
-            ⚠️ Slider target too small
-          </span>
-        )}
-      </div>
-    )
-  }
-)
-
-TouchFriendlySlider.displayName = 'TouchFriendlySlider'
+        sm: 'min-h-[44px] min-w-[44px]',
+        default: 'min-h-[48px] min-w-[48px]',
+        lg: 'min-h-[56px] min-w-[56px]'
+    };
+    return (_jsxs("div", { className: "flex flex-col items-center space-y-2", children: [_jsx("input", { ref: ref, type: "range", className: cn(baseClasses, sizeClasses[touchSize], 'w-full h-2 bg-cs-border rounded-lg appearance-none cursor-pointer', 'focus:outline-none focus:ring-2 focus:ring-cs-primary', className), style: {
+                    minHeight: `${getTouchTargetSize()}px`
+                }, ...props }), showValue && (_jsx("span", { className: "text-sm text-cs-text-secondary", children: props.value || props.defaultValue || 0 })), !isTouchTargetCompliant() && (_jsx("span", { className: "text-xs text-cs-warning", children: "\u26A0\uFE0F Slider target too small" }))] }));
+});
+TouchFriendlySlider.displayName = 'TouchFriendlySlider';

package/dist/hooks/index.esm.js

@@ -1,190 +1,32 @@
 // Performance monitoring hooks
-export { usePerformance } from './use-performance'
-export type {
-  PerformanceMetrics,
-  PerformanceThresholds,
-  PerformanceCallbacks,
-  PerformanceOptions
-} from './use-performance'
-
-export { useFrameRate } from './use-frame-rate'
-export type {
-  FrameRateMetrics,
-  FrameRateThresholds,
-  FrameRateCallbacks,
-  FrameRateOptions
-} from './use-frame-rate'
-
-export { useMemoryUsage } from './use-memory-usage'
-export type {
-  MemoryMetrics,
-  MemoryThresholds,
-  MemoryCallbacks,
-  MemoryOptions
-} from './use-memory-usage'
-
-export { useBatteryStatus } from './use-battery-status'
-export type {
-  BatteryMetrics,
-  BatteryThresholds,
-  BatteryCallbacks,
-  BatteryOptions
-} from './use-battery-status'
-
-export { usePerformanceThrottling } from './use-performance-throttling'
-export type {
-  PerformanceThrottlingConfig,
-  PerformanceThrottlingCallbacks
-} from './use-performance-throttling'
-
+export { usePerformance } from './use-performance';
+export { useFrameRate } from './use-frame-rate';
+export { useMemoryUsage } from './use-memory-usage';
+export { useBatteryStatus } from './use-battery-status';
+export { usePerformanceThrottling } from './use-performance-throttling';
 // Touch optimization & gesture support hooks
-export { useGestures, useSwipeGesture, usePinchGesture, useTapGesture, useLongPressGesture } from './use-gestures'
-export type {
-  GestureConfig,
-  SwipeGesture,
-  PinchGesture,
-  GestureCallbacks,
-  GestureState
-} from './use-gestures'
-
-export { useTouchOptimization, useBasicTouchOptimization, useBatteryAwareTouchOptimization } from './use-touch-optimization'
-export type {
-  TouchOptimizationConfig,
-  TouchPerformanceMetrics,
-  TouchOptimizationCallbacks,
-  TouchOptimizationState
-} from './use-touch-optimization'
-
-export { useMobileTouch, useBasicMobileTouch, useEnhancedMobileTouch } from './use-mobile-touch'
-export type {
-  MobileTouchConfig,
-  TouchFeedbackState,
-  GestureHint,
-  MobileTouchCallbacks,
-  MobileTouchState
-} from './use-mobile-touch'
-
+export { useGestures, useSwipeGesture, usePinchGesture, useTapGesture, useLongPressGesture } from './use-gestures';
+export { useTouchOptimization, useBasicTouchOptimization, useBatteryAwareTouchOptimization } from './use-touch-optimization';
+export { useMobileTouch, useBasicMobileTouch, useEnhancedMobileTouch } from './use-mobile-touch';
 // Animation hooks
-export { 
-  useAnimationProfile,
-  useAnimationDuration,
-  useAnimationEasing,
-  useAnimationClasses,
-  usePerformanceMode
-} from './use-animation-profile'
-export type { 
-  AnimationProfile,
-  PerformanceMetrics as AnimationPerformanceMetrics
-} from './use-animation-profile'
-
+export { useAnimationProfile, useAnimationDuration, useAnimationEasing, useAnimationClasses, usePerformanceMode } from './use-animation-profile';
 // Device hook
-export { useDevice } from './use-device'
-export type { DeviceInfo } from './use-device'
-
+export { useDevice } from './use-device';
 // Battery-conscious animation hooks
-export { useBatteryAnimations } from './use-battery-animations'
-export type {
-  BatteryAnimationConfig,
-  BatteryAnimationState,
-  BatteryAnimationCallbacks
-} from './use-battery-animations'
-
+export { useBatteryAnimations } from './use-battery-animations';
 // Hardware acceleration hooks
-export { useHardwareAcceleration } from './use-hardware-acceleration'
-export type {
-  GPUInfo,
-  HardwareAccelerationMetrics,
-  HardwareAccelerationConfig,
-  HardwareAccelerationCallbacks
-} from './use-hardware-acceleration'
-
+export { useHardwareAcceleration } from './use-hardware-acceleration';
 // Battery optimization hooks
-export { useBatteryOptimization } from './use-battery-optimization'
-export type {
-  BatteryStatus,
-  BatteryOptimizationConfig,
-  BatteryOptimizationCallbacks
-} from './use-battery-optimization'
-
+export { useBatteryOptimization } from './use-battery-optimization';
 // Advanced component architecture hooks
-export { useAdvancedPatterns } from './use-advanced-patterns'
-export type {
-  AdvancedPatternsConfig,
-  AdvancedPatternsCallbacks,
-  CompoundComponentContext,
-  RenderPropsConfig,
-  HigherOrderComponentConfig
-} from './use-advanced-patterns'
-
-export { useComponentPerformance } from './use-component-performance'
-export type {
-  ComponentPerformanceConfig,
-  ComponentPerformanceCallbacks,
-  PerformanceMetrics as ComponentPerformanceMetrics
-} from './use-component-performance'
-
-export { useMobileOptimization } from './use-mobile-optimization'
-export type {
-  MobileOptimizationConfig,
-  MobileOptimizationCallbacks,
-  MobileOptimizationState
-} from './use-mobile-optimization'
-
-export { useReusableArchitecture } from './use-reusable-architecture'
-export type {
-  ReusableArchitectureConfig,
-  ReusableArchitectureCallbacks,
-  ComponentTemplate,
-  SharedPattern,
-  SharedStyle,
-  SharedBehavior
-} from './use-reusable-architecture'
-
-export { useAccessibilitySupport } from './use-accessibility-support'
-export type {
-  AccessibilitySupportConfig,
-  AccessibilitySupportCallbacks,
-  AccessibilityState,
-  AccessibilityFeatures
-} from './use-accessibility-support'
-
+export { useAdvancedPatterns } from './use-advanced-patterns';
+export { useComponentPerformance } from './use-component-performance';
+export { useMobileOptimization } from './use-mobile-optimization';
+export { useReusableArchitecture } from './use-reusable-architecture';
+export { useAccessibilitySupport } from './use-accessibility-support';
 // Mobile skeleton and loading states hooks
-export { default as useMobileSkeleton } from './use-mobile-skeleton'
-export type {
-  MobileSkeletonConfig,
-  SkeletonVariant,
-  DeviceLoadingState,
-  MobileSkeletonCallbacks
-} from './use-mobile-skeleton'
-
-export { default as useDeviceLoadingStates } from './use-device-loading-states'
-export type {
-  DeviceLoadingStatesConfig,
-  LoadingState,
-  DeviceSpecificState,
-  DeviceLoadingStatesCallbacks
-} from './use-device-loading-states'
-
-export { default as useLoadingPerformance } from './use-loading-performance'
-export type {
-  LoadingPerformanceConfig,
-  PerformanceMetrics as LoadingPerformanceMetrics,
-  OptimizationStrategy as LoadingOptimizationStrategy,
-  LoadingPerformanceCallbacks
-} from './use-loading-performance'
-
-export { default as useBatteryConsciousLoading } from './use-battery-conscious-loading'
-export type {
-  BatteryConsciousLoadingConfig,
-  BatteryState as BatteryLoadingState,
-  LoadingOptimization,
-  BatteryConsciousLoadingCallbacks
-} from './use-battery-conscious-loading'
-
-export { default as useLoadingAccessibility } from './use-loading-accessibility'
-export type {
-  LoadingAccessibilityConfig,
-  AccessibilityFeature,
-  AccessibilityState as LoadingAccessibilityState,
-  LoadingAccessibilityCallbacks
-} from './use-loading-accessibility'
+export { default as useMobileSkeleton } from './use-mobile-skeleton';
+export { default as useDeviceLoadingStates } from './use-device-loading-states';
+export { default as useLoadingPerformance } from './use-loading-performance';
+export { default as useBatteryConsciousLoading } from './use-battery-conscious-loading';
+export { default as useLoadingAccessibility } from './use-loading-accessibility';