@umituz/react-native-ai-generation-content 1.17.4 → 1.17.6

package/package.json

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

package/src/index.ts

@@ -229,6 +229,18 @@ export {
   ResultActions,
   DEFAULT_RESULT_CONFIG,
   PhotoStep,
+  // Image Picker
+  ImagePickerBox,
+  DualImagePicker,
+  // Buttons
+  GenerateButton,
+  // Display
+  ResultDisplay,
+  ErrorDisplay,
+  // Headers
+  FeatureHeader,
+  // Photo Upload
+  PhotoUploadCard,
 } from "./presentation/components";
 
 export type {
@@ -254,6 +266,20 @@ export type {
   ResultLayoutConfig,
   ResultActionButton,
   PhotoStepProps,
+  // Image Picker
+  ImagePickerBoxProps,
+  DualImagePickerProps,
+  // Buttons
+  GenerateButtonProps,
+  // Display
+  ResultDisplayProps,
+  ResultDisplayAction,
+  ErrorDisplayProps,
+  // Headers
+  FeatureHeaderProps,
+  // Photo Upload
+  PhotoUploadCardProps,
+  PhotoUploadCardConfig,
 } from "./presentation/components";
 
 // =============================================================================

package/src/presentation/components/GenerationProgressModal.tsx

@@ -1,12 +1,15 @@
 /**
  * GenerationProgressModal
- * Generic AI generation progress modal with customizable rendering
+ * Generic AI generation progress modal using BaseModal
  * Props-driven for 100+ apps compatibility
  */
 
 import React from "react";
-import { Modal, View, StyleSheet } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { StyleSheet } from "react-native";
+import {
+  BaseModal,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
 import {
   GenerationProgressContent,
   type GenerationProgressContentProps,
@@ -24,7 +27,6 @@ export interface GenerationProgressRenderProps {
 export interface GenerationProgressModalProps
   extends Omit<GenerationProgressContentProps, "backgroundColor"> {
   readonly visible: boolean;
-  readonly overlayColor?: string;
   readonly modalBackgroundColor?: string;
   readonly renderContent?: (
     props: GenerationProgressRenderProps
@@ -42,7 +44,6 @@ export const GenerationProgressModal: React.FC<
   hint,
   dismissLabel,
   onDismiss,
-  overlayColor = "rgba(0, 0, 0, 0.75)",
   modalBackgroundColor,
   textColor,
   hintColor,
@@ -54,6 +55,10 @@ export const GenerationProgressModal: React.FC<
   const tokens = useAppDesignTokens();
   const clampedProgress = Math.max(0, Math.min(100, progress));
 
+  const handleClose = React.useCallback(() => {
+    onDismiss?.();
+  }, [onDismiss]);
+
   const content = renderContent ? (
     renderContent({
       progress: clampedProgress,
@@ -84,25 +89,25 @@ export const GenerationProgressModal: React.FC<
   );
 
   return (
-    <Modal
+    <BaseModal
       visible={visible}
-      transparent
-      animationType="fade"
-      statusBarTranslucent
-      onRequestClose={onDismiss}
+      onClose={handleClose}
+      dismissOnBackdrop={false}
+      contentStyle={styles.modalContent}
     >
-      <View style={[styles.overlay, { backgroundColor: overlayColor }]}>
-        {content}
-      </View>
-    </Modal>
+      {content}
+    </BaseModal>
   );
 };
 
 const styles = StyleSheet.create({
-  overlay: {
-    flex: 1,
+  modalContent: {
+    backgroundColor: "transparent",
+    borderWidth: 0,
+    padding: 24,
+    width: "100%",
+    height: "auto",
     justifyContent: "center",
     alignItems: "center",
-    padding: 24,
   },
 });

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

@@ -0,0 +1,243 @@
+/**
+ * PhotoUploadCard Component
+ * Beautiful photo upload card with validation status and responsive design
+ *
+ * @package @umituz/react-native-ai-generation-content
+ */
+
+import React, { useMemo } from "react";
+import {
+  View,
+  Image,
+  StyleSheet,
+  Pressable,
+  TouchableOpacity,
+  ActivityIndicator,
+  type ViewStyle,
+  type StyleProp,
+} from "react-native";
+import { LinearGradient } from "expo-linear-gradient";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+
+export interface PhotoUploadCardConfig {
+  aspectRatio?: number;
+  borderRadius?: number;
+  iconSize?: number;
+  showValidationStatus?: boolean;
+  allowChange?: boolean;
+  borderStyle?: "solid" | "dashed";
+}
+
+export interface PhotoUploadCardProps {
+  imageUri: string | null;
+  onPress: () => void;
+  isValidating?: boolean;
+  isValid?: boolean | null;
+  disabled?: boolean;
+  config?: PhotoUploadCardConfig;
+  translations: {
+    tapToUpload: string;
+    selectPhoto: string;
+    change: string;
+    analyzing?: string;
+  };
+  style?: StyleProp<ViewStyle>;
+}
+
+const DEFAULT_CONFIG: PhotoUploadCardConfig = {
+  aspectRatio: 1,
+  borderRadius: 28,
+  iconSize: 40,
+  showValidationStatus: true,
+  allowChange: true,
+  borderStyle: "dashed",
+};
+
+export const PhotoUploadCard: React.FC<PhotoUploadCardProps> = ({
+  imageUri,
+  onPress,
+  isValidating = false,
+  isValid = null,
+  disabled = false,
+  config = DEFAULT_CONFIG,
+  translations,
+  style,
+}) => {
+  const tokens = useAppDesignTokens();
+  const cfg = { ...DEFAULT_CONFIG, ...config };
+
+  const borderColor = useMemo(() => {
+    if (!cfg.showValidationStatus) {
+      return `${tokens.colors.primary}40`;
+    }
+    if (isValidating) return tokens.colors.primary;
+    if (isValid === true) return tokens.colors.success;
+    if (isValid === false) return tokens.colors.error;
+    return `${tokens.colors.primary}40`;
+  }, [isValidating, isValid, tokens, cfg.showValidationStatus]);
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          marginHorizontal: 24,
+          marginBottom: 24,
+        },
+        card: {
+          aspectRatio: cfg.aspectRatio,
+          backgroundColor: tokens.colors.surfaceSecondary,
+          borderRadius: cfg.borderRadius,
+          justifyContent: "center",
+          alignItems: "center",
+          overflow: "hidden",
+          borderWidth: 2,
+          borderStyle: imageUri ? "solid" : cfg.borderStyle,
+        },
+        placeholder: {
+          alignItems: "center",
+          padding: 32,
+        },
+        iconCircle: {
+          width: 88,
+          height: 88,
+          borderRadius: 44,
+          justifyContent: "center",
+          alignItems: "center",
+          marginBottom: 20,
+          borderWidth: 2,
+          borderColor: `${tokens.colors.primary}30`,
+        },
+        iconGradient: {
+          width: 88,
+          height: 88,
+          borderRadius: 44,
+          justifyContent: "center",
+          alignItems: "center",
+        },
+        title: {
+          fontSize: 20,
+          fontWeight: "700",
+          color: tokens.colors.textPrimary,
+          marginBottom: 8,
+          letterSpacing: 0.3,
+        },
+        subtitle: {
+          fontSize: 14,
+          color: tokens.colors.textSecondary,
+          textAlign: "center",
+          lineHeight: 20,
+          maxWidth: 240,
+        },
+        image: {
+          width: "100%",
+          height: "100%",
+          resizeMode: "cover",
+        },
+        imageOverlay: {
+          ...StyleSheet.absoluteFillObject,
+          backgroundColor: "rgba(0,0,0,0.15)",
+        },
+        changeButton: {
+          position: "absolute",
+          bottom: 20,
+          right: 20,
+          backgroundColor: tokens.colors.surface,
+          paddingHorizontal: 18,
+          paddingVertical: 12,
+          borderRadius: 28,
+          flexDirection: "row",
+          alignItems: "center",
+          gap: 8,
+        },
+        changeText: {
+          fontSize: 14,
+          fontWeight: "700",
+          color: tokens.colors.primary,
+        },
+        validatingContainer: {
+          alignItems: "center",
+          padding: 32,
+        },
+        validatingText: {
+          fontSize: 16,
+          fontWeight: "600",
+          color: tokens.colors.primary,
+          marginTop: 20,
+        },
+        pulseRing: {
+          position: "absolute",
+          width: 100,
+          height: 100,
+          borderRadius: 50,
+          borderWidth: 2,
+          borderColor: `${tokens.colors.primary}30`,
+        },
+      }),
+    [tokens, imageUri, cfg],
+  );
+
+  return (
+    <View style={[styles.container, style]}>
+      <Pressable
+        style={[styles.card, { borderColor }]}
+        onPress={onPress}
+        disabled={disabled || isValidating}
+      >
+        {isValidating ? (
+          <View style={styles.validatingContainer}>
+            <View style={styles.pulseRing} />
+            <ActivityIndicator size="large" color={tokens.colors.primary} />
+            <AtomicText style={styles.validatingText}>
+              {translations.analyzing || "Analyzing..."}
+            </AtomicText>
+          </View>
+        ) : imageUri ? (
+          <>
+            <Image source={{ uri: imageUri }} style={styles.image} />
+            <View style={styles.imageOverlay} />
+            {cfg.allowChange && (
+              <TouchableOpacity style={styles.changeButton} onPress={onPress}>
+                <AtomicIcon
+                  name="camera"
+                  size={18}
+                  customColor={tokens.colors.primary}
+                />
+                <AtomicText style={styles.changeText}>
+                  {translations.change}
+                </AtomicText>
+              </TouchableOpacity>
+            )}
+          </>
+        ) : (
+          <View style={styles.placeholder}>
+            <View style={styles.iconCircle}>
+              <LinearGradient
+                colors={[
+                  `${tokens.colors.primary}20`,
+                  `${tokens.colors.primary}10`,
+                ]}
+                style={styles.iconGradient}
+              >
+                <AtomicIcon
+                  name="camera"
+                  size={cfg.iconSize}
+                  customColor={tokens.colors.primary}
+                />
+              </LinearGradient>
+            </View>
+            <AtomicText style={styles.title}>
+              {translations.tapToUpload}
+            </AtomicText>
+            <AtomicText style={styles.subtitle}>
+              {translations.selectPhoto}
+            </AtomicText>
+          </View>
+        )}
+      </Pressable>
+    </View>
+  );
+};

package/src/presentation/components/PhotoUploadCard/index.ts

@@ -0,0 +1,5 @@
+export { PhotoUploadCard } from "./PhotoUploadCard";
+export type {
+  PhotoUploadCardProps,
+  PhotoUploadCardConfig,
+} from "./PhotoUploadCard";

package/src/presentation/components/index.ts

@@ -27,3 +27,4 @@ export * from "./image-picker";
 export * from "./buttons";
 export * from "./display";
 export * from "./headers";
+export * from "./PhotoUploadCard";