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

package/package.json

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

package/src/presentation/components/GenerationProgressContent.tsx

@@ -1,123 +1,161 @@
 /**
  * GenerationProgressContent
  * Content for the AI generation progress modal
+ * Props-driven for 100+ apps compatibility
  */
 
 import React from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
-import { AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
 import { GenerationProgressBar } from "./GenerationProgressBar";
 
 export interface GenerationProgressContentProps {
-    progress: number;
-    title?: string;
-    message?: string;
-    hint?: string;
-    dismissLabel?: string;
-    onDismiss?: () => void;
-    backgroundColor?: string;
-    textColor?: string;
-    progressColor?: string;
-    progressBackgroundColor?: string;
-    dismissButtonColor?: string;
+  readonly progress: number;
+  readonly icon?: string;
+  readonly title?: string;
+  readonly message?: string;
+  readonly hint?: string;
+  readonly dismissLabel?: string;
+  readonly onDismiss?: () => void;
+  readonly backgroundColor?: string;
+  readonly textColor?: string;
+  readonly hintColor?: string;
+  readonly progressColor?: string;
+  readonly progressBackgroundColor?: string;
+  readonly dismissButtonColor?: string;
 }
 
 export const GenerationProgressContent: React.FC<
-    GenerationProgressContentProps
+  GenerationProgressContentProps
 > = ({
-    progress,
-    title,
-    message,
-    hint,
-    dismissLabel,
-    onDismiss,
-    backgroundColor,
-    textColor,
-    progressColor,
-    progressBackgroundColor,
-    dismissButtonColor,
+  progress,
+  icon,
+  title,
+  message,
+  hint,
+  dismissLabel,
+  onDismiss,
+  backgroundColor,
+  textColor,
+  hintColor,
+  progressColor,
+  progressBackgroundColor,
+  dismissButtonColor,
 }) => {
-        const tokens = useAppDesignTokens();
+  const tokens = useAppDesignTokens();
 
-        const activeTextColor = textColor || tokens.colors.textPrimary;
-        const activeBgColor = backgroundColor || tokens.colors.surface;
+  const activeTextColor = textColor || tokens.colors.textPrimary;
+  const activeBgColor = backgroundColor || tokens.colors.surface;
+  const activeHintColor = hintColor || tokens.colors.textTertiary;
 
-        return (
-            <View style={[styles.modal, { backgroundColor: activeBgColor }]}>
-                {title && (
-                    <AtomicText style={[styles.title, { color: activeTextColor }]}>{title}</AtomicText>
-                )}
+  return (
+    <View
+      style={[
+        styles.modal,
+        {
+          backgroundColor: activeBgColor,
+          borderColor: tokens.colors.borderLight,
+        },
+      ]}
+    >
+      {icon && (
+        <View style={styles.iconContainer}>
+          <AtomicIcon name={icon} size="xl" color="primary" />
+        </View>
+      )}
 
-                {message && (
-                    <AtomicText style={[styles.message, { color: activeTextColor }]}>
-                        {message}
-                    </AtomicText>
-                )}
+      {title && (
+        <AtomicText
+          type="headlineSmall"
+          style={[styles.title, { color: activeTextColor }]}
+        >
+          {title}
+        </AtomicText>
+      )}
 
-                <GenerationProgressBar
-                    progress={progress}
-                    textColor={activeTextColor}
-                    progressColor={progressColor}
-                    backgroundColor={progressBackgroundColor}
-                />
+      {message && (
+        <AtomicText
+          type="bodyMedium"
+          style={[styles.message, { color: tokens.colors.textSecondary }]}
+        >
+          {message}
+        </AtomicText>
+      )}
 
-                {hint && (
-                    <AtomicText style={[styles.hint, { color: activeTextColor }]}>{hint}</AtomicText>
-                )}
+      <GenerationProgressBar
+        progress={progress}
+        textColor={tokens.colors.primary}
+        progressColor={progressColor}
+        backgroundColor={progressBackgroundColor}
+      />
 
-                {onDismiss && (
-                    <TouchableOpacity
-                        style={[
-                            styles.dismissButton,
-                            { backgroundColor: dismissButtonColor || tokens.colors.primary },
-                        ]}
-                        onPress={onDismiss}
-                    >
-                        <AtomicText style={styles.dismissText}>{dismissLabel || "OK"}</AtomicText>
-                    </TouchableOpacity>
-                )}
-            </View>
-        );
-    };
+      {hint && (
+        <AtomicText
+          type="bodySmall"
+          style={[styles.hint, { color: activeHintColor }]}
+        >
+          {hint}
+        </AtomicText>
+      )}
+
+      {onDismiss && (
+        <TouchableOpacity
+          style={[
+            styles.dismissButton,
+            { backgroundColor: dismissButtonColor || tokens.colors.primary },
+          ]}
+          onPress={onDismiss}
+        >
+          <AtomicText type="bodyMedium" style={styles.dismissText}>
+            {dismissLabel || "OK"}
+          </AtomicText>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
 
 const styles = StyleSheet.create({
-    modal: {
-        width: "100%",
-        maxWidth: 400,
-        borderRadius: 24,
-        padding: 32,
-        alignItems: "center",
-    },
-    title: {
-        fontSize: 20,
-        fontWeight: "700",
-        marginBottom: 12,
-        textAlign: "center",
-    },
-    message: {
-        fontSize: 16,
-        marginBottom: 24,
-        textAlign: "center",
-        opacity: 0.8,
-    },
-    hint: {
-        fontSize: 14,
-        textAlign: "center",
-        fontStyle: "italic",
-        opacity: 0.6,
-        marginBottom: 16,
-    },
-    dismissButton: {
-        marginTop: 8,
-        paddingVertical: 14,
-        paddingHorizontal: 32,
-        borderRadius: 12,
-        minWidth: 140,
-        alignItems: "center",
-    },
-    dismissText: {
-        color: "#FFFFFF",
-        fontSize: 16,
-        fontWeight: "600",
-    },
+  modal: {
+    width: "100%",
+    maxWidth: 380,
+    borderRadius: 24,
+    padding: 32,
+    borderWidth: 1,
+    alignItems: "center",
+  },
+  iconContainer: {
+    marginBottom: 20,
+  },
+  title: {
+    fontWeight: "700",
+    marginBottom: 8,
+    textAlign: "center",
+  },
+  message: {
+    marginBottom: 28,
+    textAlign: "center",
+    lineHeight: 20,
+  },
+  hint: {
+    textAlign: "center",
+    lineHeight: 18,
+    paddingHorizontal: 8,
+  },
+  dismissButton: {
+    marginTop: 16,
+    paddingVertical: 14,
+    paddingHorizontal: 32,
+    borderRadius: 12,
+    minWidth: 140,
+    alignItems: "center",
+  },
+  dismissText: {
+    color: "#FFFFFF",
+    fontWeight: "600",
+  },
 });

package/src/presentation/components/GenerationProgressModal.tsx

@@ -1,6 +1,7 @@
 /**
  * GenerationProgressModal
  * Generic AI generation progress modal with customizable rendering
+ * Props-driven for 100+ apps compatibility
  */
 
 import React from "react";
@@ -8,23 +9,26 @@ import { Modal, View, StyleSheet } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import {
   GenerationProgressContent,
-  GenerationProgressContentProps,
+  type GenerationProgressContentProps,
 } from "./GenerationProgressContent";
 
 export interface GenerationProgressRenderProps {
-  progress: number;
-  title?: string;
-  message?: string;
-  hint?: string;
-  onDismiss?: () => void;
+  readonly progress: number;
+  readonly icon?: string;
+  readonly title?: string;
+  readonly message?: string;
+  readonly hint?: string;
+  readonly onDismiss?: () => void;
 }
 
 export interface GenerationProgressModalProps
   extends Omit<GenerationProgressContentProps, "backgroundColor"> {
-  visible: boolean;
-  overlayColor?: string;
-  modalBackgroundColor?: string;
-  renderContent?: (props: GenerationProgressRenderProps) => React.ReactNode;
+  readonly visible: boolean;
+  readonly overlayColor?: string;
+  readonly modalBackgroundColor?: string;
+  readonly renderContent?: (
+    props: GenerationProgressRenderProps
+  ) => React.ReactNode;
 }
 
 export const GenerationProgressModal: React.FC<
@@ -32,67 +36,73 @@ export const GenerationProgressModal: React.FC<
 > = ({
   visible,
   progress,
+  icon,
   title,
   message,
   hint,
   dismissLabel,
   onDismiss,
-  overlayColor = "rgba(0, 0, 0, 0.7)",
+  overlayColor = "rgba(0, 0, 0, 0.75)",
   modalBackgroundColor,
   textColor,
+  hintColor,
   progressColor,
   progressBackgroundColor,
   dismissButtonColor,
   renderContent,
 }) => {
-    const tokens = useAppDesignTokens();
-    const clampedProgress = Math.max(0, Math.min(100, progress));
+  const tokens = useAppDesignTokens();
+  const clampedProgress = Math.max(0, Math.min(100, progress));
 
-    const content = renderContent ? (
-      renderContent({
-        progress: clampedProgress,
-        title,
-        message,
-        hint,
-        onDismiss,
-      })
-    ) : (
-      <GenerationProgressContent
-        progress={clampedProgress}
-        title={title}
-        message={message}
-        hint={hint}
-        dismissLabel={dismissLabel}
-        onDismiss={onDismiss}
-        backgroundColor={modalBackgroundColor || tokens.colors.surface}
-        textColor={textColor || tokens.colors.textPrimary}
-        progressColor={progressColor || tokens.colors.primary}
-        progressBackgroundColor={
-          progressBackgroundColor || tokens.colors.borderLight
-        }
-        dismissButtonColor={dismissButtonColor || tokens.colors.primary}
-      />
-    );
+  const content = renderContent ? (
+    renderContent({
+      progress: clampedProgress,
+      icon,
+      title,
+      message,
+      hint,
+      onDismiss,
+    })
+  ) : (
+    <GenerationProgressContent
+      progress={clampedProgress}
+      icon={icon}
+      title={title}
+      message={message}
+      hint={hint}
+      dismissLabel={dismissLabel}
+      onDismiss={onDismiss}
+      backgroundColor={modalBackgroundColor || tokens.colors.surface}
+      textColor={textColor || tokens.colors.textPrimary}
+      hintColor={hintColor || tokens.colors.textTertiary}
+      progressColor={progressColor || tokens.colors.primary}
+      progressBackgroundColor={
+        progressBackgroundColor || tokens.colors.surfaceVariant
+      }
+      dismissButtonColor={dismissButtonColor || tokens.colors.primary}
+    />
+  );
 
-    return (
-      <Modal
-        visible={visible}
-        transparent
-        animationType="fade"
-        statusBarTranslucent
-      >
-        <View style={[styles.overlay, { backgroundColor: overlayColor }]}>
-          {content}
-        </View>
-      </Modal>
-    );
-  };
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="fade"
+      statusBarTranslucent
+      onRequestClose={onDismiss}
+    >
+      <View style={[styles.overlay, { backgroundColor: overlayColor }]}>
+        {content}
+      </View>
+    </Modal>
+  );
+};
 
 const styles = StyleSheet.create({
   overlay: {
     flex: 1,
     justifyContent: "center",
     alignItems: "center",
-    padding: 20,
+    padding: 24,
   },
 });

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

@@ -0,0 +1,141 @@
+/**
+ * GenerateButton Component
+ * Generic AI generation button with gradient/solid variants
+ * Props-driven for 100+ apps compatibility
+ */
+
+import React from "react";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+  AtomicIcon,
+} from "@umituz/react-native-design-system";
+import { LinearGradient } from "expo-linear-gradient";
+
+export interface GenerateButtonProps {
+  readonly isDisabled?: boolean;
+  readonly isProcessing?: boolean;
+  readonly onPress: () => void;
+  readonly text: string;
+  readonly processingText?: string;
+  readonly variant?: "gradient" | "solid";
+  readonly gradientColors?: readonly [string, string, ...string[]];
+  readonly icon?: string;
+  readonly iconSize?: number;
+}
+
+export const GenerateButton: React.FC<GenerateButtonProps> = ({
+  isDisabled = false,
+  isProcessing = false,
+  onPress,
+  text,
+  processingText,
+  variant = "gradient",
+  gradientColors = ["#FF6B9D", "#C74375", "#FF6B9D"],
+  icon = "sparkles",
+  iconSize = 24,
+}) => {
+  const tokens = useAppDesignTokens();
+  const disabled = isDisabled || isProcessing;
+  const displayText = isProcessing && processingText ? processingText : text;
+
+  if (variant === "solid") {
+    return (
+      <View style={[styles.solidContainer, { marginTop: tokens.spacing.xl }]}>
+        <TouchableOpacity
+          onPress={onPress}
+          disabled={disabled}
+          activeOpacity={0.8}
+          style={[
+            styles.solidButton,
+            {
+              backgroundColor: disabled
+                ? tokens.colors.surfaceSecondary
+                : tokens.colors.primary,
+            },
+          ]}
+        >
+          <View style={styles.buttonContent}>
+            <AtomicIcon name={icon} customSize={20} customColor="#FFFFFF" />
+            <AtomicText type="bodyLarge" style={styles.solidButtonText}>
+              {displayText}
+            </AtomicText>
+          </View>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+
+  return (
+    <View style={[styles.gradientContainer, { marginTop: tokens.spacing.xl }]}>
+      <TouchableOpacity
+        onPress={onPress}
+        disabled={disabled}
+        activeOpacity={0.85}
+        style={styles.buttonWrapper}
+      >
+        <LinearGradient
+          colors={disabled ? ["#9CA3AF", "#6B7280"] : gradientColors}
+          start={[0, 0]}
+          end={[1, 0]}
+          style={[styles.gradientButton, disabled && styles.disabledButton]}
+        >
+          <View style={styles.buttonContent}>
+            <AtomicIcon name={icon} customSize={iconSize} customColor="#FFF" />
+            <AtomicText type="bodyLarge" style={styles.gradientButtonText}>
+              {displayText}
+            </AtomicText>
+          </View>
+        </LinearGradient>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  gradientContainer: {
+    alignItems: "center",
+    paddingHorizontal: 16,
+  },
+  solidContainer: {
+    paddingHorizontal: 16,
+  },
+  buttonWrapper: {
+    width: "100%",
+    maxWidth: 320,
+    borderRadius: 30,
+  },
+  gradientButton: {
+    paddingVertical: 18,
+    paddingHorizontal: 32,
+    borderRadius: 30,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  solidButton: {
+    borderRadius: 16,
+    paddingVertical: 16,
+    paddingHorizontal: 24,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  disabledButton: {
+    opacity: 0.5,
+  },
+  buttonContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 12,
+  },
+  gradientButtonText: {
+    color: "#FFFFFF",
+    fontWeight: "700",
+    fontSize: 18,
+  },
+  solidButtonText: {
+    color: "#FFFFFF",
+    fontWeight: "600",
+  },
+});

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

@@ -0,0 +1 @@
+export { GenerateButton, type GenerateButtonProps } from "./GenerateButton";

package/src/presentation/components/display/ErrorDisplay.tsx

@@ -0,0 +1,111 @@
+/**
+ * ErrorDisplay Component
+ * Generic error display with retry action
+ * Props-driven for 100+ apps compatibility
+ */
+
+import React from "react";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+  AtomicIcon,
+} from "@umituz/react-native-design-system";
+
+export interface ErrorDisplayProps {
+  readonly error: string | null;
+  readonly onRetry?: () => void;
+  readonly retryText?: string;
+  readonly icon?: string;
+}
+
+export const ErrorDisplay: React.FC<ErrorDisplayProps> = ({
+  error,
+  onRetry,
+  retryText,
+  icon = "alert-circle",
+}) => {
+  const tokens = useAppDesignTokens();
+
+  if (!error) {
+    return null;
+  }
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: `${tokens.colors.error}15`,
+          borderColor: `${tokens.colors.error}30`,
+          padding: tokens.spacing.md,
+          marginTop: tokens.spacing.md,
+        },
+      ]}
+    >
+      <View style={styles.header}>
+        <AtomicIcon
+          name={icon}
+          customSize={20}
+          customColor={tokens.colors.error}
+        />
+        <AtomicText
+          type="bodyMedium"
+          style={[styles.errorText, { color: tokens.colors.error }]}
+        >
+          {error}
+        </AtomicText>
+      </View>
+      {onRetry && retryText && (
+        <TouchableOpacity
+          onPress={onRetry}
+          style={[
+            styles.retryButton,
+            {
+              backgroundColor: tokens.colors.error,
+              marginTop: tokens.spacing.sm,
+            },
+          ]}
+        >
+          <AtomicIcon
+            name="refresh"
+            customSize={16}
+            customColor={tokens.colors.onError}
+          />
+          <AtomicText
+            type="bodySmall"
+            style={{ color: tokens.colors.onError, fontWeight: "600" }}
+          >
+            {retryText}
+          </AtomicText>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 12,
+    borderWidth: 1,
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: 10,
+  },
+  errorText: {
+    flex: 1,
+    lineHeight: 20,
+  },
+  retryButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    borderRadius: 8,
+    alignSelf: "flex-start",
+  },
+});

package/src/presentation/components/display/ResultDisplay.tsx

@@ -0,0 +1,122 @@
+/**
+ * ResultDisplay Component
+ * Generic result display with save/reset actions
+ * Props-driven for 100+ apps compatibility
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicButton,
+  useAppDesignTokens,
+  AtomicIcon,
+} from "@umituz/react-native-design-system";
+
+export interface ResultDisplayAction {
+  readonly id: string;
+  readonly label: string;
+  readonly onPress: () => void;
+  readonly variant?: "primary" | "outline";
+  readonly icon?: string;
+}
+
+export interface ResultDisplayProps {
+  readonly visible?: boolean;
+  readonly successText: string;
+  readonly actions: ResultDisplayAction[];
+  readonly successIcon?: string;
+}
+
+export const ResultDisplay: React.FC<ResultDisplayProps> = ({
+  visible = true,
+  successText,
+  actions,
+  successIcon = "checkmark-circle",
+}) => {
+  const tokens = useAppDesignTokens();
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <View style={[styles.container, { marginTop: tokens.spacing.lg }]}>
+      <View style={styles.successHeader}>
+        <AtomicIcon
+          name={successIcon}
+          customSize={24}
+          customColor={tokens.colors.success}
+        />
+        <AtomicText
+          type="bodyMedium"
+          style={[styles.successText, { color: tokens.colors.success }]}
+        >
+          {successText}
+        </AtomicText>
+      </View>
+      <View style={[styles.actionButtons, { gap: tokens.spacing.sm }]}>
+        {actions.map((action) => (
+          <AtomicButton
+            key={action.id}
+            onPress={action.onPress}
+            variant={action.variant === "outline" ? "outline" : undefined}
+            style={styles.actionButton}
+          >
+            <View style={styles.buttonContent}>
+              {action.icon && (
+                <AtomicIcon
+                  name={action.icon}
+                  customSize={18}
+                  customColor={
+                    action.variant === "outline"
+                      ? tokens.colors.primary
+                      : tokens.colors.onPrimary
+                  }
+                />
+              )}
+              <AtomicText
+                type="bodyMedium"
+                style={{
+                  color:
+                    action.variant === "outline"
+                      ? tokens.colors.primary
+                      : tokens.colors.onPrimary,
+                }}
+              >
+                {action.label}
+              </AtomicText>
+            </View>
+          </AtomicButton>
+        ))}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+  },
+  successHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    marginBottom: 16,
+  },
+  successText: {
+    textAlign: "center",
+  },
+  actionButtons: {
+    width: "100%",
+    maxWidth: 280,
+  },
+  actionButton: {
+    flex: 1,
+  },
+  buttonContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+});

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

@@ -0,0 +1,6 @@
+export {
+  ResultDisplay,
+  type ResultDisplayProps,
+  type ResultDisplayAction,
+} from "./ResultDisplay";
+export { ErrorDisplay, type ErrorDisplayProps } from "./ErrorDisplay";

package/src/presentation/components/headers/FeatureHeader.tsx

@@ -0,0 +1,85 @@
+/**
+ * FeatureHeader Component
+ * Generic feature header with hero image and description
+ * Props-driven for 100+ apps compatibility
+ */
+
+import React from "react";
+import { View, StyleSheet, ImageBackground } from "react-native";
+import type { ImageSourcePropType } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import { LinearGradient } from "expo-linear-gradient";
+
+export interface FeatureHeaderProps {
+  readonly imageSource: ImageSourcePropType;
+  readonly description: string;
+  readonly gradientColors?: readonly [string, string, ...string[]];
+  readonly minHeight?: number;
+}
+
+export const FeatureHeader: React.FC<FeatureHeaderProps> = ({
+  imageSource,
+  description,
+  gradientColors = ["rgba(0,0,0,0.3)", "rgba(0,0,0,0.1)", "rgba(0,0,0,0.4)"],
+  minHeight = 200,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <>
+      <View style={styles.headerContainer}>
+        <ImageBackground
+          source={imageSource}
+          style={[styles.heroImage, { minHeight }]}
+          imageStyle={styles.heroImageStyle}
+        >
+          <LinearGradient
+            colors={gradientColors}
+            style={[styles.gradient, { minHeight }]}
+          />
+        </ImageBackground>
+      </View>
+      <AtomicText
+        type="bodyLarge"
+        style={[
+          styles.description,
+          {
+            color: tokens.colors.textSecondary,
+            marginTop: tokens.spacing.md,
+            marginBottom: tokens.spacing.md,
+          },
+        ]}
+      >
+        {description}
+      </AtomicText>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  headerContainer: {
+    marginBottom: 8,
+    borderRadius: 20,
+    overflow: "hidden",
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.1)",
+  },
+  heroImage: {
+    width: "100%",
+  },
+  heroImageStyle: {
+    borderRadius: 20,
+  },
+  gradient: {
+    flex: 1,
+  },
+  description: {
+    textAlign: "center",
+    lineHeight: 22,
+    paddingHorizontal: 16,
+    fontWeight: "500",
+  },
+});

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

@@ -0,0 +1 @@
+export { FeatureHeader, type FeatureHeaderProps } from "./FeatureHeader";

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

@@ -0,0 +1,95 @@
+/**
+ * DualImagePicker Component
+ * Two-image picker for face swap, AI hug/kiss features
+ * Props-driven for 100+ apps compatibility
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { ImagePickerBox, type ImagePickerBoxProps } from "./ImagePickerBox";
+
+export interface DualImagePickerProps {
+  readonly sourceImageUri: string | null;
+  readonly targetImageUri: string | null;
+  readonly isDisabled?: boolean;
+  readonly onSelectSource: () => void;
+  readonly onSelectTarget: () => void;
+  readonly sourcePlaceholder: string;
+  readonly targetPlaceholder: string;
+  readonly sourceGradient?: ImagePickerBoxProps["gradientColors"];
+  readonly targetGradient?: ImagePickerBoxProps["gradientColors"];
+  readonly variant?: ImagePickerBoxProps["variant"];
+  readonly layout?: "horizontal" | "vertical";
+}
+
+export const DualImagePicker: React.FC<DualImagePickerProps> = ({
+  sourceImageUri,
+  targetImageUri,
+  isDisabled = false,
+  onSelectSource,
+  onSelectTarget,
+  sourcePlaceholder,
+  targetPlaceholder,
+  sourceGradient = ["#667eea", "#764ba2"],
+  targetGradient = ["#f093fb", "#f5576c"],
+  variant = "portrait",
+  layout = "horizontal",
+}) => {
+  const tokens = useAppDesignTokens();
+  const isHorizontal = layout === "horizontal";
+
+  return (
+    <View
+      style={[
+        styles.container,
+        isHorizontal ? styles.horizontal : styles.vertical,
+        { gap: tokens.spacing.md },
+      ]}
+    >
+      <View style={isHorizontal ? styles.pickerHalf : styles.pickerFull}>
+        <ImagePickerBox
+          imageUri={sourceImageUri}
+          isDisabled={isDisabled}
+          onPress={onSelectSource}
+          placeholderText={sourcePlaceholder}
+          gradientColors={sourceGradient}
+          variant={variant}
+        />
+      </View>
+
+      <View style={isHorizontal ? styles.pickerHalf : styles.pickerFull}>
+        <ImagePickerBox
+          imageUri={targetImageUri}
+          isDisabled={isDisabled}
+          onPress={onSelectTarget}
+          placeholderText={targetPlaceholder}
+          gradientColors={targetGradient}
+          variant={variant}
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+  },
+  horizontal: {
+    flexDirection: "row",
+    justifyContent: "center",
+  },
+  vertical: {
+    flexDirection: "column",
+    alignItems: "center",
+  },
+  pickerHalf: {
+    flex: 1,
+    alignItems: "center",
+  },
+  pickerFull: {
+    width: "100%",
+    alignItems: "center",
+  },
+});

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

@@ -0,0 +1,165 @@
+/**
+ * ImagePickerBox Component
+ * Generic image picker box with gradient 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";
+import { LinearGradient } from "expo-linear-gradient";
+
+export interface ImagePickerBoxProps {
+  readonly imageUri: string | null;
+  readonly isDisabled?: boolean;
+  readonly onPress: () => void;
+  readonly placeholderText: string;
+  readonly gradientColors?: readonly [string, string, ...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,
+  gradientColors = ["#667eea", "#764ba2"],
+  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} />
+            <LinearGradient
+              colors={["transparent", "rgba(0,0,0,0.3)"]}
+              style={styles.imageOverlay}
+            >
+              <View
+                style={[
+                  styles.editBadge,
+                  { backgroundColor: `${gradientColors[1]}E6` },
+                ]}
+              >
+                <AtomicIcon
+                  name={editIcon}
+                  customSize={Math.round(16 * multiplier)}
+                  customColor="#FFFFFF"
+                />
+              </View>
+            </LinearGradient>
+          </View>
+        ) : (
+          <LinearGradient colors={gradientColors} style={styles.placeholder}>
+            <View style={styles.placeholderContent}>
+              <View style={styles.uploadIconContainer}>
+                <AtomicIcon
+                  name={uploadIcon}
+                  customSize={iconSize}
+                  customColor="#FFFFFF"
+                />
+              </View>
+              <AtomicText
+                type="bodyMedium"
+                style={[styles.placeholderText, { color: "#FFFFFF" }]}
+              >
+                {placeholderText}
+              </AtomicText>
+            </View>
+          </LinearGradient>
+        )}
+      </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: {
+    backgroundColor: "rgba(255,255,255,0.2)",
+    borderRadius: 40,
+    padding: 16,
+    marginBottom: 12,
+  },
+  placeholderText: {
+    textAlign: "center",
+    fontWeight: "600",
+  },
+});

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

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

package/src/presentation/components/index.ts

@@ -23,3 +23,7 @@ export type { PendingJobCardActionsProps } from "./PendingJobCardActions";
 
 export * from "./result";
 export * from "./photo-step";
+export * from "./image-picker";
+export * from "./buttons";
+export * from "./display";
+export * from "./headers";