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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Universal design system for React Native apps - Domain-Driven Design architecture with Material Design 3 components",
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",
@@ -33,6 +33,7 @@
   "peerDependencies": {
     "react": ">=18.2.0",
     "react-native": ">=0.74.0",
+    "react-native-reanimated": "~3.10.1",
     "react-native-svg": ">=13.0.0",
     "@react-native-community/datetimepicker": "8.0.1",
     "@expo/vector-icons": "^14.0.0",
@@ -43,9 +44,6 @@
     "@umituz/react-native-localization": "^1.0.0"
   },
   "peerDependenciesMeta": {
-    "@react-native-community/datetimepicker": {
-      "optional": true
-    },
     "expo-linear-gradient": {
       "optional": true
     },
@@ -62,6 +60,7 @@
     "@types/react-native": "^0.73.0",
     "react": ">=18.2.0",
     "react-native": ">=0.74.0",
+    "react-native-reanimated": "~3.10.1",
     "react-native-svg": "^15.0.0",
     "@expo/vector-icons": "^14.0.0",
     "lucide-react-native": "^0.468.0",

package/src/index.ts

@@ -11,11 +11,12 @@
  * - presentation/atoms: Primitive UI components (AtomicButton, AtomicText, etc.)
  * - presentation/molecules: Composite components (SearchBar, ListItem, etc.)
  * - presentation/organisms: Complex patterns (ScreenLayout, AppHeader, FormContainer)
+ * - presentation/loading: Loading states (LoadingState, LoadingSpinner)
  * - presentation/tokens: Design tokens (colors, typography, spacing, etc.)
  * - presentation/utils: Utility functions and helpers
  *
  * Usage:
- *   import { AtomicButton, AtomicFilter, AtomicTouchable, SearchBar, STATIC_TOKENS } from '@umituz/react-native-design-system';
+ *   import { AtomicButton, AtomicFilter, AtomicTouchable, SearchBar, LoadingState, STATIC_TOKENS } from '@umituz/react-native-design-system';
  */
 
 // =============================================================================
@@ -227,6 +228,12 @@ export {
 // Note: FeedbackModal moved to @domains/feedback
 // Import from feedback domain: import { FeedbackModal } from '@domains/feedback';
 
+// =============================================================================
+// LOADING - Loading States
+// =============================================================================
+// Loading components moved to separate package
+// Import from @umituz/react-native-loading when available
+
 // =============================================================================
 // TOKENS - Design Tokens (Refactored with ZERO duplication)
 // =============================================================================
@@ -248,6 +255,7 @@ export {
   // Individual base tokens
   spacing,
   typography,
+  animations,
   borders,
 
   // Type exports
@@ -256,6 +264,7 @@ export {
   type ColorPalette,
   type Spacing,
   type Typography,
+  type Animations,
   type Borders,
   type BaseTokens,
 } from './presentation/tokens/AppDesignTokens';

package/src/presentation/atoms/AtomicButton.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, StyleProp, ViewStyle, TextStyle, TouchableOpacity, View } from 'react-native';
+import { StyleSheet, StyleProp, ViewStyle, TextStyle, TouchableOpacity, ActivityIndicator, View } from 'react-native';
 import { AtomicText } from './AtomicText';
 import { Icon } from '../../domains/icons/presentation/components/Icon';
 import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
@@ -15,6 +15,7 @@ export interface AtomicButtonProps {
   variant?: ButtonVariant;
   size?: ButtonSize;
   disabled?: boolean;
+  loading?: boolean;
   icon?: IconName;
   fullWidth?: boolean;
   style?: StyleProp<ViewStyle>;
@@ -29,6 +30,7 @@ export const AtomicButton: React.FC<AtomicButtonProps> = ({
   variant = 'primary',
   size = 'md',
   disabled = false,
+  loading = false,
   icon,
   fullWidth = false,
   style,
@@ -38,7 +40,7 @@ export const AtomicButton: React.FC<AtomicButtonProps> = ({
   const tokens = useAppDesignTokens();
 
   const handlePress = () => {
-    if (!disabled) {
+    if (!disabled && !loading) {
       onPress();
     }
   };
@@ -179,7 +181,7 @@ export const AtomicButton: React.FC<AtomicButtonProps> = ({
   ];
 
   const buttonText = title || children;
-  const showIcon = !!icon;
+  const showIcon = icon && !loading;
   const iconColor = variantStyles.text.color;
 
   return (
@@ -187,11 +189,17 @@ export const AtomicButton: React.FC<AtomicButtonProps> = ({
       style={containerStyle}
       onPress={handlePress}
       activeOpacity={0.8}
-      disabled={disabled}
+      disabled={disabled || loading}
       testID={testID}
     >
       <View style={styles.content}>
-        {showIcon ? (
+        {loading ? (
+          <ActivityIndicator
+            size="small"
+            color={variantStyles.text.color}
+            style={styles.loader}
+          />
+        ) : showIcon ? (
           <Icon
             name={icon}
             customSize={config.iconSize}
@@ -231,6 +239,9 @@ const styles = StyleSheet.create({
   icon: {
     marginRight: 8,
   },
+  loader: {
+    marginRight: 8,
+  },
 });
 
 export type { AtomicButtonProps as ButtonProps };

package/src/presentation/atoms/AtomicDatePicker.tsx

@@ -215,7 +215,7 @@ export const AtomicDatePicker: React.FC<AtomicDatePickerProps> = ({
       {show && (
         <Modal
           transparent
-          animationType="none"
+          animationType={isTabletDevice ? 'fade' : 'slide'}
           visible={show}
           onRequestClose={() => setShow(false)}
         >

package/src/presentation/atoms/AtomicFab.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TouchableOpacity, StyleSheet } from 'react-native';
+import { TouchableOpacity, ActivityIndicator, StyleSheet } from 'react-native';
 import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
 import { useResponsive } from '../hooks/useResponsive';
 import { AtomicIcon } from './AtomicIcon';
@@ -40,6 +40,7 @@ export { FAB_SIZES, getFabVariants, getFabIconSize, getFabBorder };
  * - Material Design 3 sizes (sm: 40px, md: 56px, lg: 72px)
  * - Three variants: primary, secondary, surface
  * - Responsive positioning (above tab bar, safe area aware)
+ * - Loading state with spinner
  * - Disabled state with opacity
  * - Theme-aware colors from design tokens
  * - Border for depth (no shadows per CLAUDE.md)
@@ -50,13 +51,14 @@ export const AtomicFab: React.FC<AtomicFabProps> = ({
   variant = 'primary',
   size = 'md',
   disabled = false,
+  loading = false,
   style,
   testID,
   accessibilityLabel,
 }) => {
   const tokens = useAppDesignTokens();
   const responsive = useResponsive();
-  const isDisabled = disabled;
+  const isDisabled = disabled || loading;
 
   // Get configurations
   const sizeConfig = FAB_SIZES[size as 'sm' | 'md' | 'lg'];
@@ -92,7 +94,11 @@ export const AtomicFab: React.FC<AtomicFabProps> = ({
       accessibilityLabel={accessibilityLabel || `${icon} button`}
       accessibilityRole="button"
     >
-      <AtomicIcon name={icon} size={iconSize} customColor={variantConfig.iconColor} />
+      {loading ? (
+        <ActivityIndicator size="small" color={variantConfig.iconColor} />
+      ) : (
+        <AtomicIcon name={icon} size={iconSize} customColor={variantConfig.iconColor} />
+      )}
     </TouchableOpacity>
   );
 };

package/src/presentation/atoms/AtomicPicker.tsx

@@ -382,7 +382,7 @@ export const AtomicPicker: React.FC<AtomicPickerProps> = ({
       {/* Selection Modal */}
       <Modal
         visible={modalVisible}
-        animationType="none"
+        animationType="slide"
         transparent
         onRequestClose={closeModal}
         testID={`${testID}-modal`}

package/src/presentation/atoms/AtomicProgress.tsx

@@ -10,6 +10,7 @@
  * Usage:
  * - File upload progress
  * - Task completion progress
+ * - Loading progress
  * - Achievement progress
  * - Form completion
  */
@@ -41,6 +42,8 @@ export interface AtomicProgressProps {
   showValue?: boolean;
   /** Custom text color */
   textColor?: string;
+  /** Animation duration in milliseconds */
+  animationDuration?: number;
   /** Style overrides */
   style?: ViewStyle | ViewStyle[];
   /** Test ID for testing */
@@ -61,6 +64,7 @@ export const AtomicProgress: React.FC<AtomicProgressProps> = ({
   showPercentage = false,
   showValue = false,
   textColor,
+  animationDuration = 300,
   style,
   testID,
 }) => {

package/src/presentation/atoms/AtomicSkeleton.tsx

@@ -1,14 +1,14 @@
 /**
- * AtomicSkeleton - Universal Skeleton Placeholder Component
+ * AtomicSkeleton - Universal Skeleton Loading Component
  *
- * Displays skeleton placeholders for content
+ * Displays skeleton placeholders for loading states
  * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
  *
  * Atomic Design Level: ATOM
- * Purpose: Content placeholder
+ * Purpose: Loading state placeholder
  *
  * Usage:
- * - Content placeholders
+ * - Content loading placeholders
  * - List item skeletons
  * - Card skeletons
  * - Text line skeletons

package/src/presentation/atoms/AtomicTouchable.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import { Pressable, StyleSheet } from 'react-native';
+import { Pressable, View, ActivityIndicator, StyleSheet } from 'react-native';
 import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
 import { AtomicTouchableProps, TouchableFeedback, FeedbackStrength } from './touchable/types';
 import {
   getOpacityValue,
   getTouchableContainerStyle,
   getDisabledStyle,
+  getLoadingContainerStyle,
   normalizeHitSlop,
 } from './touchable/styles/touchableStyles';
 
@@ -20,6 +21,7 @@ export {
   getOpacityValue,
   getTouchableContainerStyle,
   getDisabledStyle,
+  getLoadingContainerStyle,
   normalizeHitSlop,
 } from './touchable/styles/touchableStyles';
 
@@ -32,6 +34,7 @@ export {
  * Features:
  * - Multiple feedback variants (opacity, highlight, ripple, none)
  * - Configurable feedback strength (subtle, normal, strong)
+ * - Loading state with indicator
  * - Disabled state with visual feedback
  * - Hit slop customization for small touch targets
  * - Minimum 48x48 touch target (iOS HIG compliance)
@@ -45,6 +48,15 @@ export {
  *   <AtomicText>Press Me</AtomicText>
  * </AtomicTouchable>
  *
+ * // With loading state
+ * <AtomicTouchable
+ *   onPress={handleSubmit}
+ *   loading={isSubmitting}
+ *   feedback="highlight"
+ * >
+ *   <AtomicText>Submit</AtomicText>
+ * </AtomicTouchable>
+ *
  * // With custom hit slop (extends touch area)
  * <AtomicTouchable
  *   onPress={handlePress}
@@ -64,6 +76,7 @@ export const AtomicTouchable: React.FC<AtomicTouchableProps> = ({
   feedback = 'opacity',
   strength = 'normal',
   disabled = false,
+  loading = false,
   hitSlop,
   style,
   pressedStyle,
@@ -79,7 +92,7 @@ export const AtomicTouchable: React.FC<AtomicTouchableProps> = ({
   const tokens = useAppDesignTokens();
 
   // Determine if touchable should be disabled
-  const isDisabled = disabled;
+  const isDisabled = disabled || loading;
 
   // Get opacity value based on strength
   const opacityValue = getOpacityValue(strength as 'subtle' | 'normal' | 'strong');
@@ -156,10 +169,21 @@ export const AtomicTouchable: React.FC<AtomicTouchableProps> = ({
       accessibilityRole={accessibilityRole}
       accessibilityState={{
         disabled: isDisabled,
+        busy: loading,
       }}
       testID={testID}
     >
-      {children}
+      {loading ? (
+        <View style={getLoadingContainerStyle()}>
+          <ActivityIndicator
+            size="small"
+            color={tokens.colors.primary}
+            testID={`${testID}-loading`}
+          />
+        </View>
+      ) : (
+        children
+      )}
     </Pressable>
   );
 };

package/src/presentation/atoms/fab/types/index.ts

@@ -65,6 +65,12 @@ export interface AtomicFabProps {
    */
   disabled?: boolean;
 
+  /**
+   * Whether to show loading state
+   * @default false
+   */
+  loading?: boolean;
+
   /**
    * Custom style for the FAB container
    */

package/src/presentation/atoms/touchable/styles/touchableStyles.ts

@@ -35,6 +35,15 @@ export const getDisabledStyle = (): ViewStyle => ({
   opacity: 0.5,
 });
 
+/**
+ * Get loading container style
+ * Centers the loading indicator
+ */
+export const getLoadingContainerStyle = (): ViewStyle => ({
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
 /**
  * Convert number to HitSlop object
  * If hitSlop is a number, apply it to all sides

package/src/presentation/atoms/touchable/types/index.ts

@@ -40,7 +40,8 @@ export interface HitSlop {
  *   onPress={handlePress}
  *   feedback="opacity"
  *   strength="normal"
- *   disabled={isDisabled}
+ *   disabled={isLoading}
+ *   loading={isLoading}
  *   hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
  *   style={styles.touchable}
  * >
@@ -92,6 +93,12 @@ export interface AtomicTouchableProps {
    */
   disabled?: boolean;
 
+  /**
+   * Show loading indicator (disables touch)
+   * @default false
+   */
+  loading?: boolean;
+
   /**
    * Hit slop - extends touchable area
    * Useful for small touch targets

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

@@ -0,0 +1,200 @@
+/**
+ * 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;

package/src/presentation/molecules/AtomicConfirmationModal.tsx

@@ -117,7 +117,7 @@ export const AtomicConfirmationModal: React.FC<AtomicConfirmationModalProps> = (
     <Modal
       visible={visible}
       transparent
-      animationType="none"
+      animationType="fade"
       onRequestClose={onCancel}
       statusBarTranslucent
       testID={testID}

package/src/presentation/organisms/ScreenLayout.tsx

@@ -4,6 +4,7 @@
  * Provides consistent layout structure for all screens:
  * - SafeAreaView with configurable edges
  * - Optional ScrollView for content
+ * - Loading state support
  * - Theme-aware background colors
  * - Optional header/footer slots
  * - Consistent spacing and padding
@@ -16,6 +17,7 @@
  * Advanced:
  * <ScreenLayout
  *   scrollable={false}
+ *   loading={isLoading}
  *   edges={['top', 'bottom']}
  *   header={<CustomHeader />}
  * >
@@ -27,6 +29,7 @@ import React, { useMemo } from 'react';
 import { View, ScrollView, StyleSheet, ViewStyle } from 'react-native';
 import { SafeAreaView, Edge } from 'react-native-safe-area-context';
 import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { LoadingState } from '../loading/presentation/components/LoadingState';
 
 export interface ScreenLayoutProps {
   /**
@@ -49,6 +52,22 @@ export interface ScreenLayoutProps {
    */
   edges?: Edge[];
 
+  /**
+   * Show loading state
+   * When true, displays LoadingState component
+   */
+  loading?: boolean;
+
+  /**
+   * Loading icon name (default: 'settings')
+   */
+  loadingIcon?: string;
+
+  /**
+   * Loading message (default: 'Loading...')
+   */
+  loadingMessage?: string;
+
   /**
    * Optional header component
    * Rendered above scrollable content
@@ -99,6 +118,9 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
   children,
   scrollable = true,
   edges = ['top'],
+  loading = false,
+  loadingIcon = 'settings',
+  loadingMessage = 'Loading...',
   header,
   footer,
   backgroundColor,
@@ -114,6 +136,24 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
 
   const bgColor = backgroundColor || tokens.colors.backgroundPrimary;
 
+  // Show loading state
+  if (loading) {
+    return (
+      <SafeAreaView
+        style={[styles.container, { backgroundColor: bgColor }, containerStyle]}
+        edges={edges}
+        testID={testID}
+      >
+        <LoadingState
+          icon={loadingIcon}
+          message={loadingMessage}
+          size="large"
+          fullScreen
+        />
+      </SafeAreaView>
+    );
+  }
+
   // Non-scrollable layout
   if (!scrollable) {
     return (