@umituz/react-native-ai-generation-content 1.17.83 → 1.17.86

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.17.83",
+  "version": "1.17.86",
   "description": "Provider-agnostic AI generation orchestration for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -38,7 +38,6 @@
     "url": "git+https://github.com/umituz/react-native-ai-generation-content.git"
   },
   "dependencies": {
-    "@umituz/react-native-animation": "*",
     "@umituz/react-native-design-system": "*",
     "@umituz/react-native-firebase": "*",
     "@umituz/react-native-image": "*",
@@ -67,7 +66,6 @@
     "@types/react": "~19.1.10",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
-    "@umituz/react-native-animation": "*",
     "@umituz/react-native-design-system": "latest",
     "@umituz/react-native-firebase": "latest",
     "@umituz/react-native-haptics": "latest",

package/src/domains/creations/presentation/components/CreationActions.tsx

@@ -8,11 +8,11 @@ import {
   View,
   StyleSheet,
   TouchableOpacity,
-  ActivityIndicator,
 } from "react-native";
 import {
   useAppDesignTokens,
   AtomicIcon,
+  AtomicSpinner,
 } from "@umituz/react-native-design-system";
 
 export interface CreationAction {
@@ -102,8 +102,8 @@ export function CreationActions({
           activeOpacity={0.7}
         >
           {action.loading ? (
-            <ActivityIndicator
-              size="small"
+            <AtomicSpinner
+              size="sm"
               color={action.filled ? tokens.colors.textInverse : tokens.colors.primary}
             />
           ) : (

package/src/domains/creations/presentation/components/CreationPreview.tsx

@@ -4,10 +4,11 @@
  */
 
 import React, { useMemo } from "react";
-import { View, StyleSheet, Image, ActivityIndicator } from "react-native";
+import { View, StyleSheet, Image } from "react-native";
 import {
   useAppDesignTokens,
   AtomicIcon,
+  AtomicSpinner,
 } from "@umituz/react-native-design-system";
 import type { CreationStatus, CreationTypeId } from "../../domain/types";
 import { isInProgress } from "../../domain/utils";
@@ -86,7 +87,7 @@ export function CreationPreview({
       <View style={styles.container}>
         <View style={styles.loadingContainer}>
           <View style={styles.loadingIcon}>
-            <ActivityIndicator size="large" color={tokens.colors.primary} />
+            <AtomicSpinner size="lg" color="primary" />
           </View>
         </View>
       </View>

package/src/domains/face-detection/presentation/components/FaceValidationStatus.tsx

@@ -6,10 +6,11 @@
  */
 
 import * as React from "react";
-import { View, StyleSheet, ActivityIndicator } from "react-native";
+import { View, StyleSheet } from "react-native";
 import {
   AtomicText,
   AtomicIcon,
+  AtomicSpinner,
   useAppDesignTokens,
 } from "@umituz/react-native-design-system";
 import type { FaceValidationState } from "../../domain/entities/FaceDetection";
@@ -38,7 +39,7 @@ export const FaceValidationStatus: React.FC<FaceValidationStatusProps> = ({
       <View
         style={[styles.container, { backgroundColor: tokens.colors.surface }]}
       >
-        <ActivityIndicator size="small" color={tokens.colors.primary} />
+        <AtomicSpinner size="sm" color="primary" />
         <AtomicText
           style={[styles.text, { color: tokens.colors.textSecondary }]}
         >

package/src/features/meme-generator/presentation/screens/MemeGeneratorScreen.tsx

@@ -3,7 +3,6 @@ import {
   View,
   StyleSheet,
   Image,
-  ActivityIndicator,
   Alert,
 } from "react-native";
 import {
@@ -11,6 +10,7 @@ import {
   useAppDesignTokens,
   AtomicIcon,
   AtomicInput,
+  AtomicSpinner,
   ScreenLayout,
   ScreenHeader,
 } from "@umituz/react-native-design-system";
@@ -109,7 +109,7 @@ export const MemeGeneratorScreen: React.FC<MemeGeneratorScreenProps> = ({
       <View style={styles.content}>
         <View style={styles.previewContainer}>
           {isGenerating ? (
-            <ActivityIndicator size="large" color={tokens.colors.primary} />
+            <AtomicSpinner size="lg" color="primary" />
           ) : generatedImage ? (
             <Image
               source={{ uri: generatedImage }}

package/src/features/replace-background/domain/entities/component.types.ts

@@ -58,15 +58,6 @@ export interface ErrorDisplayProps {
     readonly error: string | null;
 }
 
-/**
- * Processing modal component props
- */
-export interface ProcessingModalProps {
-    readonly visible: boolean;
-    readonly progress?: number;
-    readonly title?: string;
-}
-
 /**
  * Feature header component props
  */

package/src/features/replace-background/domain/entities/index.ts

@@ -18,7 +18,6 @@ export type {
     GenerateButtonProps,
     ResultDisplayProps,
     ErrorDisplayProps,
-    ProcessingModalProps,
     FeatureHeaderProps,
     ModeSelectorProps,
     ComparisonSliderProps,

package/src/features/replace-background/index.ts

@@ -17,7 +17,6 @@ export type {
   GenerateButtonProps,
   ResultDisplayProps,
   ErrorDisplayProps,
-  ProcessingModalProps,
   FeatureHeaderProps,
   ModeSelectorProps,
   ComparisonSliderProps,
@@ -50,7 +49,6 @@ export {
   GenerateButton,
   ResultDisplay,
   ErrorDisplay,
-  ProcessingModal,
   FeatureHeader,
   ComparisonSlider,
   ModeSelector,

package/src/features/replace-background/presentation/components/BackgroundFeature.tsx

@@ -16,7 +16,6 @@ import { PromptInput } from "./PromptInput";
 import { GenerateButton } from "./GenerateButton";
 import { ResultDisplay } from "./ResultDisplay";
 import { ErrorDisplay } from "./ErrorDisplay";
-import { ProcessingModal } from "./ProcessingModal";
 import { FeatureHeader } from "./FeatureHeader";
 import { useBackgroundFeature } from "../hooks";
 import type { ImageSourcePropType } from "react-native";
@@ -35,6 +34,7 @@ export interface BackgroundFeatureProps {
     readonly resetButtonText?: string;
     readonly processingText?: string;
     readonly placeholderText?: string;
+    readonly renderProcessingModal?: (props: { visible: boolean; progress: number; title?: string }) => React.ReactNode;
 }
 
 export const BackgroundFeature: React.FC<BackgroundFeatureProps> = ({
@@ -51,6 +51,7 @@ export const BackgroundFeature: React.FC<BackgroundFeatureProps> = ({
     resetButtonText,
     processingText,
     placeholderText,
+    renderProcessingModal,
 }) => {
     const tokens = useAppDesignTokens();
     const [prompt, setPrompt] = useState("");
@@ -130,11 +131,7 @@ export const BackgroundFeature: React.FC<BackgroundFeatureProps> = ({
                 />
             </ScrollView>
 
-            <ProcessingModal
-                visible={feature.isProcessing}
-                progress={feature.progress}
-                title={processingText}
-            />
+            {renderProcessingModal?.({ visible: feature.isProcessing, progress: feature.progress, title: processingText })}
         </>
     );
 };

package/src/features/replace-background/presentation/components/GenerateButton.tsx

@@ -4,10 +4,11 @@
  */
 
 import React, { memo } from "react";
-import { StyleSheet, TouchableOpacity, ActivityIndicator } from "react-native";
+import { StyleSheet, TouchableOpacity } from "react-native";
 import {
     AtomicText,
     AtomicIcon,
+    AtomicSpinner,
     useAppDesignTokens,
 } from "@umituz/react-native-design-system";
 import type { GenerateButtonProps } from "../../domain/entities";
@@ -38,7 +39,7 @@ export const GenerateButton: React.FC<GenerateButtonProps> = memo(
                 ]}
             >
                 {isProcessing ? (
-                    <ActivityIndicator color={tokens.colors.backgroundPrimary} />
+                    <AtomicSpinner size="sm" color={tokens.colors.backgroundPrimary} />
                 ) : (
                     <>
                         <AtomicIcon

package/src/features/replace-background/presentation/components/index.ts

@@ -13,7 +13,6 @@ export { PromptInput } from "./PromptInput";
 export { GenerateButton } from "./GenerateButton";
 export { ResultDisplay } from "./ResultDisplay";
 export { ErrorDisplay } from "./ErrorDisplay";
-export { ProcessingModal } from "./ProcessingModal";
 export { FeatureHeader } from "./FeatureHeader";
 export { ComparisonSlider } from "./ComparisonSlider";
 export { ModeSelector } from "./ModeSelector";

package/src/presentation/components/AIGenerationProgressInline.tsx

@@ -5,11 +5,12 @@
  */
 
 import React from "react";
-import { View, ActivityIndicator, StyleSheet } from "react-native";
+import { View, StyleSheet } from "react-native";
 import {
   AtomicText,
   useAppDesignTokens,
   AtomicProgress,
+  AtomicSpinner,
 } from "@umituz/react-native-design-system";
 
 export interface AIGenerationProgressInlineProps {
@@ -39,8 +40,8 @@ export const AIGenerationProgressInline: React.FC<
 
   return (
     <View style={[styles.container, { backgroundColor: bgColor }]}>
-      <ActivityIndicator size="large" color={primaryColor} />
-      
+      <AtomicSpinner size="lg" color={primaryColor} />
+
       {title && (
         <AtomicText
           type="bodyMedium"

package/src/presentation/components/PendingJobCard.tsx

@@ -4,8 +4,8 @@
  */
 
 import React from "react";
-import { View, ActivityIndicator, StyleSheet } from "react-native";
-import { AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
+import { View, StyleSheet } from "react-native";
+import { AtomicText, AtomicSpinner, useAppDesignTokens } from "@umituz/react-native-design-system";
 import type { BackgroundJob } from "../../domain/entities/job.types";
 import { PendingJobProgressBar } from "./PendingJobProgressBar";
 import { PendingJobCardActions } from "./PendingJobCardActions";
@@ -96,9 +96,9 @@ export function PendingJobCard<TInput = unknown, TResult = unknown>({
         <View style={styles.thumbnailWrapper}>
           {renderThumbnail(job)}
           {!isFailed && (
-            <ActivityIndicator
-              color={tokens.colors.primary}
-              size="small"
+            <AtomicSpinner
+              size="sm"
+              color="primary"
               style={styles.loader}
             />
           )}

package/src/presentation/components/PhotoUploadCard/PhotoUploadCard.tsx

@@ -12,7 +12,6 @@ import {
   StyleSheet,
   Pressable,
   TouchableOpacity,
-  ActivityIndicator,
   type ViewStyle,
   type StyleProp,
 } from "react-native";
@@ -20,6 +19,7 @@ import { LinearGradient } from "expo-linear-gradient";
 import {
   AtomicText,
   AtomicIcon,
+  AtomicSpinner,
   useAppDesignTokens,
 } from "@umituz/react-native-design-system";
 
@@ -201,7 +201,7 @@ export const PhotoUploadCard: React.FC<PhotoUploadCardProps> = ({
         {isValidating ? (
           <View style={styles.validatingContainer}>
             <View style={styles.pulseRing} />
-            <ActivityIndicator size="large" color={tokens.colors.primary} />
+            <AtomicSpinner size="lg" color="primary" />
             <AtomicText style={styles.validatingText}>
               {translations.analyzing || "Analyzing..."}
             </AtomicText>

package/src/presentation/components/buttons/GenerateButton.tsx

@@ -5,11 +5,12 @@
  */
 
 import React from "react";
-import { View, StyleSheet, TouchableOpacity, ActivityIndicator, type ViewStyle } from "react-native";
+import { View, StyleSheet, TouchableOpacity, type ViewStyle } from "react-native";
 import {
   AtomicText,
   useAppDesignTokens,
   AtomicIcon,
+  AtomicSpinner,
 } from "@umituz/react-native-design-system";
 import { LinearGradient } from "expo-linear-gradient";
 
@@ -69,7 +70,7 @@ export const GenerateButton: React.FC<GenerateButtonProps> = ({
           >
             <View style={styles.buttonContent}>
               {isProcessing ? (
-                <ActivityIndicator color="#FFFFFF" size="small" />
+                <AtomicSpinner size="sm" color="white" />
               ) : (
                 <AtomicIcon name={icon} customSize={20} customColor="#FFFFFF" />
               )}
@@ -107,11 +108,11 @@ export const GenerateButton: React.FC<GenerateButtonProps> = ({
             style={[styles.gradientButton, disabled && styles.disabledButton]}
           >
             <View style={styles.buttonContent}>
-            {isProcessing ? (
-              <ActivityIndicator color="#FFFFFF" size="small" />
-            ) : (
-              <AtomicIcon name={icon} customSize={iconSize} customColor="#FFF" />
-            )}
+              {isProcessing ? (
+                <AtomicSpinner size="sm" color="white" />
+              ) : (
+                <AtomicIcon name={icon} customSize={iconSize} customColor="#FFF" />
+              )}
               <AtomicText type="bodyLarge" style={styles.gradientButtonText}>
                 {finalDisplayText}
               </AtomicText>

package/src/features/replace-background/presentation/components/ProcessingModal.tsx

@@ -1,113 +0,0 @@
-/**
- * Processing Modal Component
- * @description Modal shown during processing with progress
- */
-
-import React, { memo } from "react";
-import { Modal, View, StyleSheet, ActivityIndicator } from "react-native";
-import {
-    AtomicText,
-    useAppDesignTokens,
-} from "@umituz/react-native-design-system";
-import type { ProcessingModalProps } from "../../domain/entities";
-
-export const ProcessingModal: React.FC<ProcessingModalProps> = memo(
-    function ProcessingModal({ visible, progress = 0, title }) {
-        const tokens = useAppDesignTokens();
-
-        return (
-            <Modal
-                visible={visible}
-                transparent
-                animationType="fade"
-                statusBarTranslucent
-            >
-                <View style={styles.overlay}>
-                    <View
-                        style={[
-                            styles.content,
-                            { backgroundColor: tokens.colors.surface },
-                        ]}
-                    >
-                        <ActivityIndicator
-                            size="large"
-                            color={tokens.colors.primary}
-                        />
-                        {title && (
-                            <AtomicText
-                                
-                                style={[
-                                    styles.title,
-                                    { color: tokens.colors.textPrimary },
-                                ]}
-                            >
-                                {title}
-                            </AtomicText>
-                        )}
-                        {progress > 0 && (
-                            <View style={styles.progressContainer}>
-                                <View
-                                    style={[
-                                        styles.progressBar,
-                                        { backgroundColor: tokens.colors.surfaceSecondary },
-                                    ]}
-                                >
-                                    <View
-                                        style={[
-                                            styles.progressFill,
-                                            {
-                                                backgroundColor: tokens.colors.primary,
-                                                width: `${Math.min(progress, 100)}%`,
-                                            },
-                                        ]}
-                                    />
-                                </View>
-                                <AtomicText
-                                    
-                                    style={{ color: tokens.colors.textSecondary }}
-                                >
-                                    {Math.round(progress)}%
-                                </AtomicText>
-                            </View>
-                        )}
-                    </View>
-                </View>
-            </Modal>
-        );
-    }
-);
-
-const styles = StyleSheet.create({
-    overlay: {
-        flex: 1,
-        backgroundColor: "rgba(0, 0, 0, 0.7)",
-        justifyContent: "center",
-        alignItems: "center",
-    },
-    content: {
-        padding: 32,
-        borderRadius: 20,
-        alignItems: "center",
-        minWidth: 200,
-    },
-    title: {
-        marginTop: 16,
-        textAlign: "center",
-    },
-    progressContainer: {
-        marginTop: 16,
-        alignItems: "center",
-        width: "100%",
-    },
-    progressBar: {
-        width: "100%",
-        height: 6,
-        borderRadius: 3,
-        overflow: "hidden",
-        marginBottom: 8,
-    },
-    progressFill: {
-        height: "100%",
-        borderRadius: 3,
-    },
-});