@umituz/react-native-design-system 1.3.5 → 1.4.0

package/lib/presentation/loading/presentation/components/LoadingState.d.ts

@@ -1,39 +0,0 @@
-/**
- * LoadingState - Dynamic Icon-Based Loading Component
- *
- * Universal loading component with configurable emoji/icon support
- * Inspired by meditation_timer's breathing animation pattern
- * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
- *
- * Features:
- * - ✅ Dynamic emoji/icon per screen (🏠 Home, ⚙️ Settings, 💪 Workout, etc.)
- * - ✅ Breathing animation effect (scale 1 → 1.15 → 1)
- * - ✅ Size variants (small, medium, large)
- * - ✅ Full screen or inline modes
- * - ✅ Optional loading message
- * - ✅ Theme-aware styling
- */
-import React from 'react';
-export type LoadingStateSize = 'small' | 'medium' | 'large';
-export interface LoadingStateProps {
-    /**
-     * Emoji/icon to display (changes per screen context)
-     * Examples: 🏠 Home, ⚙️ Settings, 💪 Workout, 🧘 Meditation, 📊 Analytics
-     */
-    icon?: string;
-    /**
-     * Optional loading message
-     */
-    message?: string;
-    /**
-     * Size variant
-     */
-    size?: LoadingStateSize;
-    /**
-     * Full screen overlay mode
-     */
-    fullScreen?: boolean;
-}
-export declare const LoadingState: React.FC<LoadingStateProps>;
-export default LoadingState;
-//# sourceMappingURL=LoadingState.d.ts.map

package/lib/presentation/loading/presentation/components/LoadingState.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LoadingState.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/loading/presentation/components/LoadingState.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAqC,MAAM,OAAO,CAAC;AAe1D,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE5D,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IAExB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAkCD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4EpD,CAAC;AAmCF,eAAe,YAAY,CAAC"}

package/lib/presentation/loading/presentation/components/LoadingState.js

@@ -1,123 +0,0 @@
-/**
- * LoadingState - Dynamic Icon-Based Loading Component
- *
- * Universal loading component with configurable emoji/icon support
- * Inspired by meditation_timer's breathing animation pattern
- * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
- *
- * Features:
- * - ✅ Dynamic emoji/icon per screen (🏠 Home, ⚙️ Settings, 💪 Workout, etc.)
- * - ✅ Breathing animation effect (scale 1 → 1.15 → 1)
- * - ✅ Size variants (small, medium, large)
- * - ✅ Full screen or inline modes
- * - ✅ Optional loading message
- * - ✅ Theme-aware styling
- */
-import React, { useRef, useEffect, useMemo } from 'react';
-import { View, StyleSheet, Animated, Easing, } from 'react-native';
-import { useAppDesignTokens } from '../../../hooks/useAppDesignTokens';
-import { AtomicText } from '../../../atoms/AtomicText';
-const SIZE_CONFIG = {
-    small: {
-        iconSize: 32,
-        showMessage: false,
-        containerPadding: 16,
-    },
-    medium: {
-        iconSize: 48,
-        showMessage: true,
-        containerPadding: 24,
-    },
-    large: {
-        iconSize: 64,
-        showMessage: true,
-        containerPadding: 32,
-    },
-};
-// =============================================================================
-// COMPONENT IMPLEMENTATION
-// =============================================================================
-export const LoadingState = ({ icon = '⏳', // Default hourglass icon
-message, size = 'large', fullScreen = false, }) => {
-    // ✅ Dynamic theme tokens
-    const tokens = useAppDesignTokens();
-    // Animation ref for breathing effect
-    const scaleAnim = useRef(new Animated.Value(1)).current;
-    // Size configuration
-    const config = SIZE_CONFIG[size];
-    /**
-     * Breathing Animation Effect
-     * Smoothly scales icon from 1 → 1.15 → 1 in continuous loop
-     * Creates calming, natural breathing sensation
-     */
-    useEffect(() => {
-        const breathingAnimation = Animated.loop(Animated.sequence([
-            // Expand (inhale)
-            Animated.timing(scaleAnim, {
-                toValue: 1.15,
-                duration: tokens.animations.slowest,
-                easing: Easing.inOut(Easing.ease),
-                useNativeDriver: true,
-            }),
-            // Contract (exhale)
-            Animated.timing(scaleAnim, {
-                toValue: 1,
-                duration: tokens.animations.slowest,
-                easing: Easing.inOut(Easing.ease),
-                useNativeDriver: true,
-            }),
-        ]));
-        breathingAnimation.start();
-        return () => {
-            breathingAnimation.stop();
-        };
-    }, [scaleAnim]);
-    // Dynamic styles based on theme
-    const styles = useMemo(() => getStyles(tokens, config, fullScreen), [tokens, config, fullScreen]);
-    return (<View style={styles.container}>
-      {/* Animated Icon/Emoji */}
-      <Animated.Text style={[
-            styles.icon,
-            {
-                fontSize: config.iconSize,
-                transform: [{ scale: scaleAnim }],
-            },
-        ]}>
-        {icon}
-      </Animated.Text>
-
-      {/* Optional Loading Message */}
-      {config.showMessage && message && (<AtomicText type="bodyMedium" style={styles.message}>
-          {message}
-        </AtomicText>)}
-    </View>);
-};
-// =============================================================================
-// STYLES
-// =============================================================================
-const getStyles = (tokens, config, fullScreen) => StyleSheet.create({
-    container: {
-        ...(fullScreen ? {
-            flex: 1,
-            justifyContent: 'center',
-            alignItems: 'center',
-            backgroundColor: tokens.colors.backgroundPrimary,
-        } : {
-            justifyContent: 'center',
-            alignItems: 'center',
-            padding: config.containerPadding,
-        }),
-    },
-    icon: {
-        textAlign: 'center',
-        marginBottom: tokens.spacing.md,
-    },
-    message: {
-        color: tokens.colors.textSecondary,
-        textAlign: 'center',
-        marginTop: tokens.spacing.sm,
-        maxWidth: 300,
-    },
-});
-export default LoadingState;
-//# sourceMappingURL=LoadingState.js.map

package/lib/presentation/loading/presentation/components/LoadingState.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"LoadingState.js","sourceRoot":"","sources":["../../../../../src/presentation/loading/presentation/components/LoadingState.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,EACL,IAAI,EACJ,UAAU,EACV,QAAQ,EACR,MAAM,GACP,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AAEvE,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAyCvD,MAAM,WAAW,GAAyC;IACxD,KAAK,EAAE;QACL,QAAQ,EAAE,EAAE;QACZ,WAAW,EAAE,KAAK;QAClB,gBAAgB,EAAE,EAAE;KACrB;IACD,MAAM,EAAE;QACN,QAAQ,EAAE,EAAE;QACZ,WAAW,EAAE,IAAI;QACjB,gBAAgB,EAAE,EAAE;KACrB;IACD,KAAK,EAAE;QACL,QAAQ,EAAE,EAAE;QACZ,WAAW,EAAE,IAAI;QACjB,gBAAgB,EAAE,EAAE;KACrB;CACF,CAAC;AAEF,gFAAgF;AAChF,2BAA2B;AAC3B,gFAAgF;AAEhF,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EACxD,IAAI,GAAG,GAAG,EAAE,yBAAyB;AACrC,OAAO,EACP,IAAI,GAAG,OAAO,EACd,UAAU,GAAG,KAAK,GACnB,EAAE,EAAE;IACH,yBAAyB;IACzB,MAAM,MAAM,GAAG,kBAAkB,EAAE,CAAC;IAEpC,qCAAqC;IACrC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAExD,qBAAqB;IACrB,MAAM,MAAM,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;IAEjC;;;;OAIG;IACH,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,kBAAkB,GAAG,QAAQ,CAAC,IAAI,CACtC,QAAQ,CAAC,QAAQ,CAAC;YAChB,kBAAkB;YAClB,QAAQ,CAAC,MAAM,CAAC,SAAS,EAAE;gBACzB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,MAAM,CAAC,UAAU,CAAC,OAAO;gBACnC,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;gBACjC,eAAe,EAAE,IAAI;aACtB,CAAC;YACF,oBAAoB;YACpB,QAAQ,CAAC,MAAM,CAAC,SAAS,EAAE;gBACzB,OAAO,EAAE,CAAC;gBACV,QAAQ,EAAE,MAAM,CAAC,UAAU,CAAC,OAAO;gBACnC,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;gBACjC,eAAe,EAAE,IAAI;aACtB,CAAC;SACH,CAAC,CACH,CAAC;QAEF,kBAAkB,CAAC,KAAK,EAAE,CAAC;QAE3B,OAAO,GAAG,EAAE;YACV,kBAAkB,CAAC,IAAI,EAAE,CAAC;QAC5B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,gCAAgC;IAChC,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC;IAElG,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC5B;MAAA,CAAC,yBAAyB,CAC1B;MAAA,CAAC,QAAQ,CAAC,IAAI,CACZ,KAAK,CAAC,CAAC;YACL,MAAM,CAAC,IAAI;YACX;gBACE,QAAQ,EAAE,MAAM,CAAC,QAAQ;gBACzB,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;aAClC;SACF,CAAC,CAEF;QAAA,CAAC,IAAI,CACP;MAAA,EAAE,QAAQ,CAAC,IAAI,CAEf;;MAAA,CAAC,8BAA8B,CAC/B;MAAA,CAAC,MAAM,CAAC,WAAW,IAAI,OAAO,IAAI,CAChC,CAAC,UAAU,CACT,IAAI,CAAC,YAAY,CACjB,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAEtB;UAAA,CAAC,OAAO,CACV;QAAA,EAAE,UAAU,CAAC,CACd,CACH;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,gFAAgF;AAChF,SAAS;AACT,gFAAgF;AAEhF,MAAM,SAAS,GAAG,CAChB,MAA6C,EAC7C,MAAkB,EAClB,UAAmB,EACnB,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC;IACrB,SAAS,EAAE;QACT,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC;YACf,IAAI,EAAE,CAAC;YACP,cAAc,EAAE,QAAQ;YACxB,UAAU,EAAE,QAAQ;YACpB,eAAe,EAAE,MAAM,CAAC,MAAM,CAAC,iBAAiB;SACjD,CAAC,CAAC,CAAC;YACF,cAAc,EAAE,QAAQ;YACxB,UAAU,EAAE,QAAQ;YACpB,OAAO,EAAE,MAAM,CAAC,gBAAgB;SACjC,CAAC;KACH;IACD,IAAI,EAAE;QACJ,SAAS,EAAE,QAAQ;QACnB,YAAY,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE;KAChC;IACD,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa;QAClC,SAAS,EAAE,QAAQ;QACnB,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE;QAC5B,QAAQ,EAAE,GAAG;KACd;CACF,CAAC,CAAC;AAEH,eAAe,YAAY,CAAC"}

package/lib/presentation/loading/presentation/hooks/useLoading.d.ts

@@ -1,50 +0,0 @@
-/**
- * useLoading - Loading State Management Hook
- *
- * Centralized hook for managing loading states across the application
- * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
- *
- * Features:
- * - ✅ Simple boolean loading state
- * - ✅ Message management
- * - ✅ Icon configuration per context
- * - ✅ Type-safe loading control
- */
-export interface LoadingConfig {
-    isLoading: boolean;
-    message?: string;
-    icon?: string;
-}
-export interface UseLoadingReturn {
-    /**
-     * Current loading state
-     */
-    isLoading: boolean;
-    /**
-     * Current loading message
-     */
-    message: string | undefined;
-    /**
-     * Current loading icon
-     */
-    icon: string | undefined;
-    /**
-     * Start loading with optional message and icon
-     */
-    startLoading: (message?: string, icon?: string) => void;
-    /**
-     * Stop loading and clear message
-     */
-    stopLoading: () => void;
-    /**
-     * Update loading message without affecting state
-     */
-    setMessage: (message: string | undefined) => void;
-    /**
-     * Update loading icon without affecting state
-     */
-    setIcon: (icon: string | undefined) => void;
-}
-export declare const useLoading: (initialConfig?: LoadingConfig) => UseLoadingReturn;
-export default useLoading;
-//# sourceMappingURL=useLoading.d.ts.map

package/lib/presentation/loading/presentation/hooks/useLoading.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useLoading.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/loading/presentation/hooks/useLoading.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAQH,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAE5B;;OAEG;IACH,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEzB;;OAEG;IACH,YAAY,EAAE,CAAC,OAAO,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAExD;;OAEG;IACH,WAAW,EAAE,MAAM,IAAI,CAAC;IAExB;;OAEG;IACH,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAElD;;OAEG;IACH,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CAC7C;AAMD,eAAO,MAAM,UAAU,GAAI,gBAAgB,aAAa,KAAG,gBA+B1D,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/presentation/loading/presentation/hooks/useLoading.js

@@ -1,49 +0,0 @@
-/**
- * useLoading - Loading State Management Hook
- *
- * Centralized hook for managing loading states across the application
- * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
- *
- * Features:
- * - ✅ Simple boolean loading state
- * - ✅ Message management
- * - ✅ Icon configuration per context
- * - ✅ Type-safe loading control
- */
-import { useState, useCallback } from 'react';
-// =============================================================================
-// HOOK IMPLEMENTATION
-// =============================================================================
-export const useLoading = (initialConfig) => {
-    const [isLoading, setIsLoading] = useState(initialConfig?.isLoading ?? false);
-    const [message, setMessage] = useState(initialConfig?.message);
-    const [icon, setIcon] = useState(initialConfig?.icon);
-    /**
-     * Start loading with optional message and icon
-     */
-    const startLoading = useCallback((msg, ico) => {
-        setIsLoading(true);
-        if (msg !== undefined)
-            setMessage(msg);
-        if (ico !== undefined)
-            setIcon(ico);
-    }, []);
-    /**
-     * Stop loading and clear message
-     */
-    const stopLoading = useCallback(() => {
-        setIsLoading(false);
-        setMessage(undefined);
-    }, []);
-    return {
-        isLoading,
-        message,
-        icon,
-        startLoading,
-        stopLoading,
-        setMessage,
-        setIcon,
-    };
-};
-export default useLoading;
-//# sourceMappingURL=useLoading.js.map

package/lib/presentation/loading/presentation/hooks/useLoading.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useLoading.js","sourceRoot":"","sources":["../../../../../src/presentation/loading/presentation/hooks/useLoading.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAiD9C,gFAAgF;AAChF,sBAAsB;AACtB,gFAAgF;AAEhF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,aAA6B,EAAoB,EAAE;IAC5E,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,aAAa,EAAE,SAAS,IAAI,KAAK,CAAC,CAAC;IAC9E,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAqB,aAAa,EAAE,OAAO,CAAC,CAAC;IACnF,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAqB,aAAa,EAAE,IAAI,CAAC,CAAC;IAE1E;;OAEG;IACH,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,GAAY,EAAE,GAAY,EAAE,EAAE;QAC9D,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,IAAI,GAAG,KAAK,SAAS;YAAE,UAAU,CAAC,GAAG,CAAC,CAAC;QACvC,IAAI,GAAG,KAAK,SAAS;YAAE,OAAO,CAAC,GAAG,CAAC,CAAC;IACtC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP;;OAEG;IACH,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,UAAU,CAAC,SAAS,CAAC,CAAC;IACxB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,SAAS;QACT,OAAO;QACP,IAAI;QACJ,YAAY;QACZ,WAAW;QACX,UAAU;QACV,OAAO;KACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/src/presentation/loading/index.ts

@@ -1,40 +0,0 @@
-/**
- * Loading Domain - Public API
- *
- * Domain-Driven Design (DDD) Architecture
- * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
- *
- * This is the SINGLE SOURCE OF TRUTH for the Loading domain.
- * ALL imports from this domain MUST go through this file.
- *
- * Architecture:
- * - presentation/components: UI components (LoadingState, LoadingSpinner)
- * - presentation/hooks: React hooks (useLoading)
- *
- * Usage:
- *   import { LoadingState, LoadingSpinner, useLoading } from '@domains/design-system';
- */
-
-// =============================================================================
-// PRESENTATION LAYER - Components
-// =============================================================================
-
-export { LoadingState } from './presentation/components/LoadingState';
-export type { LoadingStateProps, LoadingStateSize } from './presentation/components/LoadingState';
-
-export { LoadingSpinner } from './presentation/components/LoadingSpinner';
-export type {
-  LoadingSpinnerProps,
-  LoadingSpinnerSize,
-  LoadingSpinnerColor,
-} from './presentation/components/LoadingSpinner';
-
-// =============================================================================
-// PRESENTATION LAYER - Hooks
-// =============================================================================
-
-export { useLoading } from './presentation/hooks/useLoading';
-export type {
-  LoadingConfig,
-  UseLoadingReturn,
-} from './presentation/hooks/useLoading';

package/src/presentation/loading/presentation/components/LoadingSpinner.tsx

@@ -1,116 +0,0 @@
-/**
- * LoadingSpinner - Theme-Aware Activity Indicator
- *
- * Refactored from AtomicLoadingSpinner - now part of Loading domain
- * Uses central useAppDesignTokens() hook for automatic theme switching
- * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
- *
- * Features:
- * - ✅ AUTOMATIC theme switching via useAppDesignTokens()
- * - ✅ Multiple size variants (small, medium, large)
- * - ✅ Dynamic color customization
- * - ✅ Overlay support
- * - ✅ Message display
- */
-
-import React from 'react';
-import { View, ActivityIndicator, ViewStyle } from 'react-native';
-import { useAppDesignTokens } from '../../../hooks/useAppDesignTokens';
-import { withAlpha } from '../../../tokens/AppDesignTokens';
-import { AtomicText } from '../../../atoms/AtomicText';
-
-// =============================================================================
-// TYPE DEFINITIONS
-// =============================================================================
-
-export type LoadingSpinnerSize = 'small' | 'medium' | 'large';
-export type LoadingSpinnerColor = 'primary' | 'secondary' | 'white';
-
-export interface LoadingSpinnerProps {
-  size?: LoadingSpinnerSize;
-  color?: LoadingSpinnerColor;
-  message?: string;
-  overlay?: boolean;
-  style?: ViewStyle;
-}
-
-// =============================================================================
-// SIZE VARIANTS
-// =============================================================================
-
-const sizeVariants: Record<LoadingSpinnerSize, 'small' | 'large'> = {
-  small: 'small',
-  medium: 'large',
-  large: 'large',
-};
-
-// =============================================================================
-// COMPONENT IMPLEMENTATION
-// =============================================================================
-
-export const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
-  size = 'medium',
-  color = 'primary',
-  message,
-  overlay = false,
-  style,
-}) => {
-  // ✅ DYNAMIC tokens from central hook
-  const tokens = useAppDesignTokens();
-
-  const spinnerSize = sizeVariants[size];
-
-  /**
-   * Get spinner color from dynamic theme
-   * ✅ Automatically updates when theme changes
-   */
-  const getSpinnerColor = (): string => {
-    switch (color) {
-      case 'primary':
-        return tokens.colors.primary;
-      case 'secondary':
-        return tokens.colors.secondary;
-      case 'white':
-        return tokens.colors.textInverse;
-      default:
-        return tokens.colors.primary;
-    }
-  };
-
-  const spinnerColor = getSpinnerColor();
-
-  const containerStyle: ViewStyle = overlay
-    ? {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        backgroundColor: withAlpha(tokens.colors.black, 0.5),
-        justifyContent: 'center',
-        alignItems: 'center',
-        zIndex: 9999,
-      }
-    : {
-        justifyContent: 'center',
-        alignItems: 'center',
-        padding: tokens.spacing.lg,
-      };
-
-  return (
-    <View style={[containerStyle, style]}>
-      <ActivityIndicator size={spinnerSize} color={spinnerColor} />
-      {message && (
-        <AtomicText
-          type="bodyMedium"
-          color={overlay ? 'inverse' : 'primary'}
-          style={{ marginTop: tokens.spacing.md, textAlign: 'center' }}
-        >
-          {message}
-        </AtomicText>
-      )}
-    </View>
-  );
-};
-
-export default LoadingSpinner;

package/src/presentation/loading/presentation/components/LoadingState.tsx

@@ -1,200 +0,0 @@
-/**
- * LoadingState - Dynamic Icon-Based Loading Component
- *
- * Universal loading component with configurable emoji/icon support
- * Inspired by meditation_timer's breathing animation pattern
- * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
- *
- * Features:
- * - ✅ Dynamic emoji/icon per screen (🏠 Home, ⚙️ Settings, 💪 Workout, etc.)
- * - ✅ Breathing animation effect (scale 1 → 1.15 → 1)
- * - ✅ Size variants (small, medium, large)
- * - ✅ Full screen or inline modes
- * - ✅ Optional loading message
- * - ✅ Theme-aware styling
- */
-
-import React, { useRef, useEffect, useMemo } from 'react';
-import {
-  View,
-  StyleSheet,
-  Animated,
-  Easing,
-} from 'react-native';
-import { useAppDesignTokens } from '../../../hooks/useAppDesignTokens';
-import { STATIC_TOKENS } from '../../../tokens/AppDesignTokens';
-import { AtomicText } from '../../../atoms/AtomicText';
-
-// =============================================================================
-// TYPE DEFINITIONS
-// =============================================================================
-
-export type LoadingStateSize = 'small' | 'medium' | 'large';
-
-export interface LoadingStateProps {
-  /**
-   * Emoji/icon to display (changes per screen context)
-   * Examples: 🏠 Home, ⚙️ Settings, 💪 Workout, 🧘 Meditation, 📊 Analytics
-   */
-  icon?: string;
-
-  /**
-   * Optional loading message
-   */
-  message?: string;
-
-  /**
-   * Size variant
-   */
-  size?: LoadingStateSize;
-
-  /**
-   * Full screen overlay mode
-   */
-  fullScreen?: boolean;
-}
-
-// =============================================================================
-// SIZE CONFIGURATION
-// =============================================================================
-
-interface SizeConfig {
-  iconSize: number;
-  showMessage: boolean;
-  containerPadding: number;
-}
-
-const SIZE_CONFIG: Record<LoadingStateSize, SizeConfig> = {
-  small: {
-    iconSize: 32,
-    showMessage: false,
-    containerPadding: 16,
-  },
-  medium: {
-    iconSize: 48,
-    showMessage: true,
-    containerPadding: 24,
-  },
-  large: {
-    iconSize: 64,
-    showMessage: true,
-    containerPadding: 32,
-  },
-};
-
-// =============================================================================
-// COMPONENT IMPLEMENTATION
-// =============================================================================
-
-export const LoadingState: React.FC<LoadingStateProps> = ({
-  icon = '⏳', // Default hourglass icon
-  message,
-  size = 'large',
-  fullScreen = false,
-}) => {
-  // ✅ Dynamic theme tokens
-  const tokens = useAppDesignTokens();
-
-  // Animation ref for breathing effect
-  const scaleAnim = useRef(new Animated.Value(1)).current;
-
-  // Size configuration
-  const config = SIZE_CONFIG[size];
-
-  /**
-   * Breathing Animation Effect
-   * Smoothly scales icon from 1 → 1.15 → 1 in continuous loop
-   * Creates calming, natural breathing sensation
-   */
-  useEffect(() => {
-    const breathingAnimation = Animated.loop(
-      Animated.sequence([
-        // Expand (inhale)
-        Animated.timing(scaleAnim, {
-          toValue: 1.15,
-          duration: tokens.animations.slowest,
-          easing: Easing.inOut(Easing.ease),
-          useNativeDriver: true,
-        }),
-        // Contract (exhale)
-        Animated.timing(scaleAnim, {
-          toValue: 1,
-          duration: tokens.animations.slowest,
-          easing: Easing.inOut(Easing.ease),
-          useNativeDriver: true,
-        }),
-      ])
-    );
-
-    breathingAnimation.start();
-
-    return () => {
-      breathingAnimation.stop();
-    };
-  }, [scaleAnim]);
-
-  // Dynamic styles based on theme
-  const styles = useMemo(() => getStyles(tokens, config, fullScreen), [tokens, config, fullScreen]);
-
-  return (
-    <View style={styles.container}>
-      {/* Animated Icon/Emoji */}
-      <Animated.Text
-        style={[
-          styles.icon,
-          {
-            fontSize: config.iconSize,
-            transform: [{ scale: scaleAnim }],
-          },
-        ]}
-      >
-        {icon}
-      </Animated.Text>
-
-      {/* Optional Loading Message */}
-      {config.showMessage && message && (
-        <AtomicText
-          type="bodyMedium"
-          style={styles.message}
-        >
-          {message}
-        </AtomicText>
-      )}
-    </View>
-  );
-};
-
-// =============================================================================
-// STYLES
-// =============================================================================
-
-const getStyles = (
-  tokens: ReturnType<typeof useAppDesignTokens>,
-  config: SizeConfig,
-  fullScreen: boolean
-) => StyleSheet.create({
-  container: {
-    ...(fullScreen ? {
-      flex: 1,
-      justifyContent: 'center',
-      alignItems: 'center',
-      backgroundColor: tokens.colors.backgroundPrimary,
-    } : {
-      justifyContent: 'center',
-      alignItems: 'center',
-      padding: config.containerPadding,
-    }),
-  },
-  icon: {
-    textAlign: 'center',
-    marginBottom: tokens.spacing.md,
-  },
-  message: {
-    color: tokens.colors.textSecondary,
-    textAlign: 'center',
-    marginTop: tokens.spacing.sm,
-    maxWidth: 300,
-  },
-});
-
-export default LoadingState;