@umituz/react-native-ai-generation-content 1.17.135 → 1.17.137

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.17.135",
+  "version": "1.17.137",
   "description": "Provider-agnostic AI generation orchestration for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/features/image-to-video/domain/constants/animation.constants.ts

@@ -10,37 +10,37 @@ export const DEFAULT_ANIMATION_STYLES: AnimationStyle[] = [
     id: "ken_burns",
     name: "Ken Burns",
     description: "Slow zoom and pan effect",
-    icon: "Maximize2",
+    icon: "expand-outline",
   },
   {
     id: "zoom_in",
     name: "Zoom In",
     description: "Gradual zoom in effect",
-    icon: "ZoomIn",
+    icon: "add-circle-outline",
   },
   {
     id: "zoom_out",
     name: "Zoom Out",
     description: "Gradual zoom out effect",
-    icon: "ZoomOut",
+    icon: "remove-circle-outline",
   },
   {
     id: "slide_left",
     name: "Slide Left",
     description: "Pan from right to left",
-    icon: "ArrowLeft",
+    icon: "arrow-back-outline",
   },
   {
     id: "slide_right",
     name: "Slide Right",
     description: "Pan from left to right",
-    icon: "ArrowRight",
+    icon: "arrow-forward-outline",
   },
   {
     id: "parallax",
     name: "Parallax",
     description: "3D depth effect",
-    icon: "Layers",
+    icon: "layers-outline",
   },
 ];
 

package/src/features/image-to-video/presentation/components/AnimationStyleSelector.tsx

@@ -89,7 +89,7 @@ export const AnimationStyleSelector: React.FC<AnimationStyleSelectorProps> = ({
                 </AtomicText>
               </View>
               {isSelected && (
-                <AtomicIcon name="Check" size="md" color="primary" />
+                <AtomicIcon name="checkmark-outline" size="md" color="primary" />
               )}
             </View>
           </TouchableOpacity>

package/src/features/image-to-video/presentation/components/ImageSelectionGrid.tsx

@@ -61,7 +61,7 @@ export const ImageSelectionGrid: React.FC<ImageSelectionGridProps> = ({
           onPress={onSelectImages}
           activeOpacity={0.7}
         >
-          <AtomicIcon name="Upload" size="xl" color="primary" />
+          <AtomicIcon name="cloud-upload-outline" size="xl" color="primary" />
           <AtomicText
             type="bodyMedium"
             style={[

package/src/features/image-to-video/presentation/hooks/useImageToVideoForm.ts

@@ -4,6 +4,8 @@
  */
 
 import { useMemo, useCallback } from "react";
+
+declare const __DEV__: boolean;
 import { useFormState, type UseFormStateOptions } from "./useFormState";
 import { useGeneration } from "./useGeneration";
 import type {
@@ -60,10 +62,29 @@ export function useImageToVideoForm(
   );
 
   const handleSelectImages = useCallback(async () => {
+    if (__DEV__) {
+      console.log("[useImageToVideoForm] handleSelectImages called");
+    }
     if (callbacks.onSelectImages) {
-      const images = await callbacks.onSelectImages();
-      if (images.length > 0) {
-        actions.addImages(images);
+      try {
+        const images = await callbacks.onSelectImages();
+        if (__DEV__) {
+          console.log("[useImageToVideoForm] Images selected:", images.length);
+        }
+        if (images.length > 0) {
+          actions.addImages(images);
+          if (__DEV__) {
+            console.log("[useImageToVideoForm] Images added to state");
+          }
+        }
+      } catch (error) {
+        if (__DEV__) {
+          console.error("[useImageToVideoForm] Error selecting images:", error);
+        }
+      }
+    } else {
+      if (__DEV__) {
+        console.warn("[useImageToVideoForm] No onSelectImages callback provided");
       }
     }
   }, [callbacks, actions]);

package/src/features/script-generator/presentation/components/ScriptDisplay.tsx

@@ -37,7 +37,7 @@ export const ScriptDisplay: React.FC<ScriptDisplayProps> = ({
           📝 {title}
         </AtomicText>
         <TouchableOpacity onPress={onUseScript}>
-          <AtomicIcon name="Check" size="md" color="primary" />
+          <AtomicIcon name="checkmark-outline" size="md" color="primary" />
         </TouchableOpacity>
       </View>
 
@@ -102,7 +102,7 @@ export const ScriptDisplay: React.FC<ScriptDisplayProps> = ({
         ]}
         onPress={onUseScript}
       >
-        <AtomicIcon name="Check" size="md" color="textInverse" />
+        <AtomicIcon name="checkmark-outline" size="md" color="textInverse" />
         <AtomicText
           type="bodyLarge"
           style={[styles.useButtonText, { color: tokens.colors.textInverse }]}

package/src/index.ts

@@ -305,7 +305,6 @@ export {
   DEFAULT_RESULT_CONFIG,
   PhotoStep,
   // Image Picker
-  ImagePickerBox,
   DualImagePicker,
   // New Generic Sections
   PromptInput,
@@ -361,7 +360,6 @@ export type {
   ResultActionButton,
   PhotoStepProps,
   // Image Picker
-  ImagePickerBoxProps,
   DualImagePickerProps,
   PromptInputProps,
   AIGenerationHeroProps,

package/src/presentation/components/image-picker/DualImagePicker.tsx

@@ -7,7 +7,7 @@
 import React from "react";
 import { View, StyleSheet } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system";
-import { ImagePickerBox, type ImagePickerBoxProps } from "./ImagePickerBox";
+import { PhotoUploadCard } from "../PhotoUploadCard";
 
 export interface DualImagePickerProps {
   readonly sourceImageUri: string | null;
@@ -17,7 +17,6 @@ export interface DualImagePickerProps {
   readonly onSelectTarget: () => void;
   readonly sourcePlaceholder: string;
   readonly targetPlaceholder: string;
-  readonly variant?: ImagePickerBoxProps["variant"];
   readonly layout?: "horizontal" | "vertical";
 }
 
@@ -29,7 +28,6 @@ export const DualImagePicker: React.FC<DualImagePickerProps> = ({
   onSelectTarget,
   sourcePlaceholder,
   targetPlaceholder,
-  variant = "portrait",
   layout = "horizontal",
 }) => {
   const tokens = useAppDesignTokens();
@@ -44,22 +42,22 @@ export const DualImagePicker: React.FC<DualImagePickerProps> = ({
       ]}
     >
       <View style={isHorizontal ? styles.pickerHalf : styles.pickerFull}>
-        <ImagePickerBox
+        <PhotoUploadCard
           imageUri={sourceImageUri}
-          isDisabled={isDisabled}
+          disabled={isDisabled}
           onPress={onSelectSource}
-          placeholderText={sourcePlaceholder}
-          variant={variant}
+          title={sourcePlaceholder}
+          config={{ aspectRatio: 1, borderRadius: 20 }}
         />
       </View>
 
       <View style={isHorizontal ? styles.pickerHalf : styles.pickerFull}>
-        <ImagePickerBox
+        <PhotoUploadCard
           imageUri={targetImageUri}
-          isDisabled={isDisabled}
+          disabled={isDisabled}
           onPress={onSelectTarget}
-          placeholderText={targetPlaceholder}
-          variant={variant}
+          title={targetPlaceholder}
+          config={{ aspectRatio: 1, borderRadius: 20 }}
         />
       </View>
     </View>

package/src/presentation/components/image-picker/index.ts

@@ -1,2 +1 @@
-export { ImagePickerBox, type ImagePickerBoxProps } from "./ImagePickerBox";
 export { DualImagePicker, type DualImagePickerProps } from "./DualImagePicker";

package/src/presentation/components/image-picker/ImagePickerBox.tsx

@@ -1,176 +0,0 @@
-/**
- * ImagePickerBox Component
- * Generic image picker box with solid color design
- * Props-driven for 100+ apps compatibility
- */
-
-import React from "react";
-import {
-  View,
-  StyleSheet,
-  TouchableOpacity,
-  Image,
-  type ViewStyle,
-} from "react-native";
-import {
-  AtomicText,
-  useAppDesignTokens,
-  AtomicIcon,
-} from "@umituz/react-native-design-system";
-
-export interface ImagePickerBoxProps {
-  readonly imageUri: string | null;
-  readonly isDisabled?: boolean;
-  readonly onPress: () => void;
-  readonly placeholderText: string;
-  readonly variant?: "portrait" | "square" | "landscape";
-  readonly size?: "sm" | "md" | "lg";
-  readonly uploadIcon?: string;
-  readonly editIcon?: string;
-}
-
-const VARIANT_STYLES: Record<string, ViewStyle> = {
-  portrait: { width: 200, height: 280, borderRadius: 20 },
-  square: { width: "100%", aspectRatio: 1, borderRadius: 24 },
-  landscape: { width: "100%", aspectRatio: 16 / 9, borderRadius: 16 },
-};
-
-const SIZE_MULTIPLIERS = { sm: 0.7, md: 1, lg: 1.3 };
-
-export const ImagePickerBox: React.FC<ImagePickerBoxProps> = ({
-  imageUri,
-  isDisabled = false,
-  onPress,
-  placeholderText,
-  variant = "portrait",
-  size = "md",
-  uploadIcon = "cloud-upload-outline",
-  editIcon = "image-outline",
-}) => {
-  const tokens = useAppDesignTokens();
-  const multiplier = SIZE_MULTIPLIERS[size];
-  const baseStyle = VARIANT_STYLES[variant];
-  const iconSize = Math.round(32 * multiplier);
-
-  return (
-    <View style={styles.container}>
-      <TouchableOpacity
-        style={[
-          styles.box,
-          baseStyle,
-          { backgroundColor: tokens.colors.backgroundSecondary },
-        ]}
-        onPress={onPress}
-        disabled={isDisabled}
-        activeOpacity={0.8}
-      >
-        {imageUri ? (
-          <View style={styles.imageContainer}>
-            <Image source={{ uri: imageUri }} style={styles.image} />
-            <View
-              style={[
-                styles.imageOverlay,
-                { backgroundColor: tokens.colors.modalOverlay },
-              ]}
-            >
-              <View
-                style={[
-                  styles.editBadge,
-                  { backgroundColor: tokens.colors.primary },
-                ]}
-              >
-                <AtomicIcon
-                  name={editIcon}
-                  customSize={Math.round(16 * multiplier)}
-                  customColor={tokens.colors.textInverse}
-                />
-              </View>
-            </View>
-          </View>
-        ) : (
-          <View
-            style={[
-              styles.placeholder,
-              { backgroundColor: tokens.colors.primary },
-            ]}
-          >
-            <View style={styles.placeholderContent}>
-              <View
-                style={[
-                  styles.uploadIconContainer,
-                  { backgroundColor: tokens.colors.surface },
-                ]}
-              >
-                <AtomicIcon
-                  name={uploadIcon}
-                  customSize={iconSize}
-                  customColor={tokens.colors.primary}
-                />
-              </View>
-              <AtomicText
-                type="bodyMedium"
-                style={[
-                  styles.placeholderText,
-                  { color: tokens.colors.textInverse },
-                ]}
-              >
-                {placeholderText}
-              </AtomicText>
-            </View>
-          </View>
-        )}
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    marginVertical: 16,
-    alignItems: "center",
-  },
-  box: {
-    overflow: "hidden",
-  },
-  imageContainer: {
-    flex: 1,
-    position: "relative",
-  },
-  image: {
-    width: "100%",
-    height: "100%",
-  },
-  imageOverlay: {
-    position: "absolute",
-    bottom: 0,
-    left: 0,
-    right: 0,
-    height: "30%",
-    justifyContent: "flex-end",
-    alignItems: "flex-end",
-    padding: 12,
-  },
-  editBadge: {
-    borderRadius: 20,
-    padding: 8,
-  },
-  placeholder: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  placeholderContent: {
-    alignItems: "center",
-    justifyContent: "center",
-    paddingHorizontal: 16,
-  },
-  uploadIconContainer: {
-    borderRadius: 40,
-    padding: 16,
-    marginBottom: 12,
-  },
-  placeholderText: {
-    textAlign: "center",
-    fontWeight: "600",
-  },
-});