@umituz/react-native-ai-generation-content 1.17.136 → 1.17.138

package/package.json

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

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",
-  },
-});