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

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

@@ -35,15 +35,6 @@ 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,8 +40,7 @@ export interface HitSlop {
  *   onPress={handlePress}
  *   feedback="opacity"
  *   strength="normal"
- *   disabled={isLoading}
- *   loading={isLoading}
+ *   disabled={isDisabled}
  *   hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
  *   style={styles.touchable}
  * >
@@ -93,12 +92,6 @@ 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/organisms/ScreenLayout.tsx

@@ -4,7 +4,6 @@
  * 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
@@ -17,7 +16,6 @@
  * Advanced:
  * <ScreenLayout
  *   scrollable={false}
- *   loading={isLoading}
  *   edges={['top', 'bottom']}
  *   header={<CustomHeader />}
  * >
@@ -29,7 +27,6 @@ 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 {
   /**
@@ -52,22 +49,6 @@ 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
@@ -118,9 +99,6 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
   children,
   scrollable = true,
   edges = ['top'],
-  loading = false,
-  loadingIcon = 'settings',
-  loadingMessage = 'Loading...',
   header,
   footer,
   backgroundColor,
@@ -136,24 +114,6 @@ 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 (

package/src/presentation/tokens/AppDesignTokens.ts

@@ -31,14 +31,12 @@ export {
   BASE_TOKENS,
   spacing,
   typography,
-  animations,
   borders,
   iconSizes,
   opacity,
   avatarSizes,
   type Spacing,
   type Typography,
-  type Animations,
   type Borders,
   type IconSizes,
   type Opacity,

package/src/presentation/tokens/core/BaseTokens.ts

@@ -220,25 +220,9 @@ export const typography = {
 } as const;
 
 // =============================================================================
-// ANIMATION TOKENS
+// ANIMATION TOKENS - REMOVED (moved to separate package)
 // =============================================================================
 
-export const animations = {
-  // Duration scale (milliseconds)
-  fastest: 150,
-  fast: 150,
-  normal: 300,
-  slow: 500,
-  slower: 750,
-  slowest: 1000,
-
-  // Easing functions
-  easeInOut: 'ease-in-out' as const,
-  easeIn: 'ease-in' as const,
-  easeOut: 'ease-out' as const,
-  linear: 'linear' as const,
-} as const;
-
 // =============================================================================
 // OPACITY TOKENS
 // =============================================================================
@@ -371,7 +355,6 @@ export const avatarSizes = {
 export const BASE_TOKENS = {
   spacing,
   typography,
-  animations,
   opacity,
   borders,
   sizes,
@@ -385,7 +368,6 @@ export const BASE_TOKENS = {
 
 export type Spacing = typeof spacing;
 export type Typography = typeof typography;
-export type Animations = typeof animations;
 export type Opacity = typeof opacity;
 export type Borders = typeof borders;
 export type Sizes = typeof sizes;

package/src/presentation/tokens/core/TokenFactory.ts

@@ -18,13 +18,12 @@ import { getColorPalette, withAlpha, type ThemeMode, type ColorPalette } from '.
 
 /**
  * Complete design tokens shape
- * Combines static tokens (spacing, typography, animations, borders) + dynamic colors
+ * Combines static tokens (spacing, typography, borders) + dynamic colors
  */
 export type DesignTokens = {
   colors: ColorPalette;
   spacing: typeof BASE_TOKENS.spacing;
   typography: typeof BASE_TOKENS.typography;
-  animations: typeof BASE_TOKENS.animations;
   iconSizes: typeof BASE_TOKENS.iconSizes;
   opacity: typeof BASE_TOKENS.opacity;
   avatarSizes: typeof BASE_TOKENS.avatarSizes;
@@ -67,7 +66,6 @@ export const createDesignTokens = (mode: ThemeMode): DesignTokens => {
     // ✅ STATIC: These don't change with theme
     spacing: BASE_TOKENS.spacing,
     typography: BASE_TOKENS.typography,
-    animations: BASE_TOKENS.animations,
     iconSizes: BASE_TOKENS.iconSizes,
     opacity: BASE_TOKENS.opacity,
     avatarSizes: BASE_TOKENS.avatarSizes,
@@ -107,7 +105,7 @@ export const createDesignTokens = (mode: ThemeMode): DesignTokens => {
 export const STATIC_DESIGN_TOKENS = createDesignTokens('light');
 
 /**
- * STATIC TOKENS (spacing, typography, animations, borders)
+ * STATIC TOKENS (spacing, typography, borders)
  * These DON'T change with theme - safe to use anywhere
  */
 export const STATIC_TOKENS = BASE_TOKENS;

package/lib/presentation/atoms/AtomicSkeleton.d.ts

@@ -1,37 +0,0 @@
-/**
- * AtomicSkeleton - Universal Skeleton Loading Component
- *
- * Displays skeleton placeholders for loading states
- * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
- *
- * Atomic Design Level: ATOM
- * Purpose: Loading state placeholder
- *
- * Usage:
- * - Content loading placeholders
- * - List item skeletons
- * - Card skeletons
- * - Text line skeletons
- * - Image placeholders
- */
-import React from 'react';
-import { ViewStyle } from 'react-native';
-export interface AtomicSkeletonProps {
-    /** Skeleton width */
-    width?: number | string;
-    /** Skeleton height */
-    height?: number | string;
-    /** Skeleton shape */
-    shape?: 'rectangle' | 'circle' | 'rounded';
-    /** Border radius for rounded shapes */
-    borderRadius?: number;
-    /** Skeleton color */
-    color?: string;
-    /** Style overrides */
-    style?: ViewStyle;
-    /** Test ID for testing */
-    testID?: string;
-}
-export declare const AtomicSkeleton: React.FC<AtomicSkeletonProps>;
-export default AtomicSkeleton;
-//# sourceMappingURL=AtomicSkeleton.d.ts.map

package/lib/presentation/atoms/AtomicSkeleton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AtomicSkeleton.d.ts","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicSkeleton.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAoB,SAAS,EAAkB,MAAM,cAAc,CAAC;AAO3E,MAAM,WAAW,mBAAmB;IAClC,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,sBAAsB;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,qBAAqB;IACrB,KAAK,CAAC,EAAE,WAAW,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC3C,uCAAuC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAMD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA0CxD,CAAC;AAMF,eAAe,cAAc,CAAC"}

package/lib/presentation/atoms/AtomicSkeleton.js

@@ -1,53 +0,0 @@
-/**
- * AtomicSkeleton - Universal Skeleton Loading Component
- *
- * Displays skeleton placeholders for loading states
- * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
- *
- * Atomic Design Level: ATOM
- * Purpose: Loading state placeholder
- *
- * Usage:
- * - Content loading placeholders
- * - List item skeletons
- * - Card skeletons
- * - Text line skeletons
- * - Image placeholders
- */
-import React from 'react';
-import { View } from 'react-native';
-import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
-// =============================================================================
-// COMPONENT IMPLEMENTATION
-// =============================================================================
-export const AtomicSkeleton = ({ width = '100%', height = 20, shape = 'rectangle', borderRadius, color, style, testID, }) => {
-    const tokens = useAppDesignTokens();
-    // Default values
-    const skeletonColor = color || tokens.colors.surfaceVariant;
-    // Calculate border radius based on shape
-    const getBorderRadius = () => {
-        if (borderRadius !== undefined)
-            return borderRadius;
-        switch (shape) {
-            case 'circle':
-                return typeof height === 'number' ? height / 2 : 20;
-            case 'rounded':
-                return tokens.borders.radius.md;
-            case 'rectangle':
-            default:
-                return tokens.borders.radius.sm;
-        }
-    };
-    const skeletonStyle = {
-        width: width,
-        height: height,
-        backgroundColor: skeletonColor,
-        borderRadius: getBorderRadius(),
-    };
-    return (<View style={[skeletonStyle, style]} testID={testID}/>);
-};
-// =============================================================================
-// EXPORTS
-// =============================================================================
-export default AtomicSkeleton;
-//# sourceMappingURL=AtomicSkeleton.js.map

package/lib/presentation/atoms/AtomicSkeleton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AtomicSkeleton.js","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicSkeleton.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAyC,MAAM,cAAc,CAAC;AAC3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAuBjE,gFAAgF;AAChF,2BAA2B;AAC3B,gFAAgF;AAEhF,MAAM,CAAC,MAAM,cAAc,GAAkC,CAAC,EAC5D,KAAK,GAAG,MAAM,EACd,MAAM,GAAG,EAAE,EACX,KAAK,GAAG,WAAW,EACnB,YAAY,EACZ,KAAK,EACL,KAAK,EACL,MAAM,GACP,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,kBAAkB,EAAE,CAAC;IAEpC,iBAAiB;IACjB,MAAM,aAAa,GAAG,KAAK,IAAI,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC;IAE5D,yCAAyC;IACzC,MAAM,eAAe,GAAG,GAAW,EAAE;QACnC,IAAI,YAAY,KAAK,SAAS;YAAE,OAAO,YAAY,CAAC;QAEpD,QAAQ,KAAK,EAAE,CAAC;YACd,KAAK,QAAQ;gBACX,OAAO,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YACtD,KAAK,SAAS;gBACZ,OAAO,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;YAClC,KAAK,WAAW,CAAC;YACjB;gBACE,OAAO,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;QACpC,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,aAAa,GAAc;QAC/B,KAAK,EAAE,KAAuB;QAC9B,MAAM,EAAE,MAAwB;QAChC,eAAe,EAAE,aAAa;QAC9B,YAAY,EAAE,eAAe,EAAE;KAChC,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CACH,KAAK,CAAC,CAAC,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC,CAC9B,MAAM,CAAC,CAAC,MAAM,CAAC,EACf,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,gFAAgF;AAChF,UAAU;AACV,gFAAgF;AAEhF,eAAe,cAAc,CAAC"}

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":"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"}

package/src/presentation/atoms/AtomicSkeleton.tsx

@@ -1,95 +0,0 @@
-/**
- * AtomicSkeleton - Universal Skeleton Loading Component
- *
- * Displays skeleton placeholders for loading states
- * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
- *
- * Atomic Design Level: ATOM
- * Purpose: Loading state placeholder
- *
- * Usage:
- * - Content loading placeholders
- * - List item skeletons
- * - Card skeletons
- * - Text line skeletons
- * - Image placeholders
- */
-
-import React from 'react';
-import { View, StyleSheet, ViewStyle, DimensionValue } from 'react-native';
-import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
-
-// =============================================================================
-// TYPE DEFINITIONS
-// =============================================================================
-
-export interface AtomicSkeletonProps {
-  /** Skeleton width */
-  width?: number | string;
-  /** Skeleton height */
-  height?: number | string;
-  /** Skeleton shape */
-  shape?: 'rectangle' | 'circle' | 'rounded';
-  /** Border radius for rounded shapes */
-  borderRadius?: number;
-  /** Skeleton color */
-  color?: string;
-  /** Style overrides */
-  style?: ViewStyle;
-  /** Test ID for testing */
-  testID?: string;
-}
-
-// =============================================================================
-// COMPONENT IMPLEMENTATION
-// =============================================================================
-
-export const AtomicSkeleton: React.FC<AtomicSkeletonProps> = ({
-  width = '100%',
-  height = 20,
-  shape = 'rectangle',
-  borderRadius,
-  color,
-  style,
-  testID,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  // Default values
-  const skeletonColor = color || tokens.colors.surfaceVariant;
-
-  // Calculate border radius based on shape
-  const getBorderRadius = (): number => {
-    if (borderRadius !== undefined) return borderRadius;
-    
-    switch (shape) {
-      case 'circle':
-        return typeof height === 'number' ? height / 2 : 20;
-      case 'rounded':
-        return tokens.borders.radius.md;
-      case 'rectangle':
-      default:
-        return tokens.borders.radius.sm;
-    }
-  };
-
-  const skeletonStyle: ViewStyle = {
-    width: width as DimensionValue,
-    height: height as DimensionValue,
-    backgroundColor: skeletonColor,
-    borderRadius: getBorderRadius(),
-  };
-
-  return (
-    <View
-      style={[skeletonStyle, style]}
-      testID={testID}
-    />
-  );
-};
-
-// =============================================================================
-// EXPORTS
-// =============================================================================
-
-export default AtomicSkeleton;