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

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

@@ -1,6 +1,6 @@
 /**
  * ImagePickerBox Component
- * Generic image picker box with gradient design
+ * Generic image picker box with solid color design
  * Props-driven for 100+ apps compatibility
  */
 
@@ -17,14 +17,12 @@ import {
   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;
@@ -44,7 +42,6 @@ export const ImagePickerBox: React.FC<ImagePickerBoxProps> = ({
   isDisabled = false,
   onPress,
   placeholderText,
-  gradientColors = ["#667eea", "#764ba2"],
   variant = "portrait",
   size = "md",
   uploadIcon = "cloud-upload-outline",
@@ -70,42 +67,57 @@ export const ImagePickerBox: React.FC<ImagePickerBoxProps> = ({
         {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.imageOverlay,
+                { backgroundColor: tokens.colors.modalOverlay },
+              ]}
             >
               <View
                 style={[
                   styles.editBadge,
-                  { backgroundColor: `${gradientColors[1]}E6` },
+                  { backgroundColor: tokens.colors.primary },
                 ]}
               >
                 <AtomicIcon
                   name={editIcon}
                   customSize={Math.round(16 * multiplier)}
-                  customColor="#FFFFFF"
+                  customColor={tokens.colors.textInverse}
                 />
               </View>
-            </LinearGradient>
+            </View>
           </View>
         ) : (
-          <LinearGradient colors={gradientColors} style={styles.placeholder}>
+          <View
+            style={[
+              styles.placeholder,
+              { backgroundColor: tokens.colors.primary },
+            ]}
+          >
             <View style={styles.placeholderContent}>
-              <View style={styles.uploadIconContainer}>
+              <View
+                style={[
+                  styles.uploadIconContainer,
+                  { backgroundColor: tokens.colors.surface },
+                ]}
+              >
                 <AtomicIcon
                   name={uploadIcon}
                   customSize={iconSize}
-                  customColor="#FFFFFF"
+                  customColor={tokens.colors.primary}
                 />
               </View>
               <AtomicText
                 type="bodyMedium"
-                style={[styles.placeholderText, { color: "#FFFFFF" }]}
+                style={[
+                  styles.placeholderText,
+                  { color: tokens.colors.textInverse },
+                ]}
               >
                 {placeholderText}
               </AtomicText>
             </View>
-          </LinearGradient>
+          </View>
         )}
       </TouchableOpacity>
     </View>
@@ -153,7 +165,6 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
   },
   uploadIconContainer: {
-    backgroundColor: "rgba(255,255,255,0.2)",
     borderRadius: 40,
     padding: 16,
     marginBottom: 12,

package/src/presentation/components/modals/SettingsSheet.tsx

@@ -53,7 +53,10 @@ export const SettingsSheet: React.FC<SettingsSheetProps> = ({
       animationType="slide"
       onRequestClose={onClose}
     >
-      <Pressable style={styles.backdrop} onPress={handleBackdropPress}>
+      <Pressable
+        style={[styles.backdrop, { backgroundColor: tokens.colors.modalOverlay }]}
+        onPress={handleBackdropPress}
+      >
         <Pressable
           style={[
             styles.sheet,
@@ -102,7 +105,6 @@ export const SettingsSheet: React.FC<SettingsSheetProps> = ({
 const styles = StyleSheet.create({
   backdrop: {
     flex: 1,
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
     justifyContent: "flex-end",
   },
   sheet: {

package/src/presentation/components/result/ResultImageCard.tsx

@@ -11,7 +11,6 @@ import {
   AtomicIcon,
   useAppDesignTokens,
 } from "@umituz/react-native-design-system";
-import { LinearGradient } from "expo-linear-gradient";
 import type { ResultImageConfig } from "../../types/result-config.types";
 import { DEFAULT_RESULT_CONFIG } from "../../types/result-config.types";
 
@@ -45,12 +44,12 @@ export const ResultImageCard: React.FC<ResultImageCardProps> = ({
 
   const badgeBackground = useMemo(() => {
     if (cfg.badgeStyle === "light") {
-      return "rgba(255, 255, 255, 0.9)";
+      return tokens.colors.surface;
     } else if (cfg.badgeStyle === "dark") {
-      return "rgba(0, 0, 0, 0.6)";
+      return tokens.colors.modalOverlay;
     }
-    return null;
-  }, [cfg.badgeStyle]);
+    return tokens.colors.primary;
+  }, [cfg.badgeStyle, tokens]);
 
   const styles = useMemo(
     () =>
@@ -76,24 +75,17 @@ export const ResultImageCard: React.FC<ResultImageCardProps> = ({
           gap: 4,
           paddingHorizontal: 10,
           paddingVertical: 5,
-          backgroundColor: badgeBackground ?? undefined,
+          backgroundColor: badgeBackground,
           borderRadius: 12,
           overflow: "hidden",
         },
-        gradientBadge: {
-          flexDirection: "row",
-          alignItems: "center",
-          gap: 4,
-          paddingHorizontal: 10,
-          paddingVertical: 5,
-        },
         badgeText: {
           fontSize: 10,
           fontWeight: "700",
           color:
             cfg.badgeStyle === "light"
               ? tokens.colors.textPrimary
-              : "#FFFFFF",
+              : tokens.colors.textInverse,
           letterSpacing: 0.5,
         },
       }),
@@ -104,35 +96,20 @@ export const ResultImageCard: React.FC<ResultImageCardProps> = ({
     if (!cfg.showBadge) return null;
 
     const iconColor =
-      cfg.badgeStyle === "light" ? tokens.colors.primary : "#FFFFFF";
+      cfg.badgeStyle === "light"
+        ? tokens.colors.primary
+        : tokens.colors.textInverse;
 
-    const badgeContent = (
-      <>
+    return (
+      <View style={styles.badge}>
         <AtomicIcon
           name={cfg.badgeIcon ?? "sparkles"}
           size="xs"
           customColor={iconColor}
         />
         <AtomicText style={styles.badgeText}>{badgeText}</AtomicText>
-      </>
+      </View>
     );
-
-    if (cfg.badgeStyle === "gradient") {
-      return (
-        <View style={styles.badge}>
-          <LinearGradient
-            colors={[tokens.colors.primary, tokens.colors.secondary]}
-            start={{ x: 0, y: 0 }}
-            end={{ x: 1, y: 0 }}
-            style={styles.gradientBadge}
-          >
-            {badgeContent}
-          </LinearGradient>
-        </View>
-      );
-    }
-
-    return <View style={styles.badge}>{badgeContent}</View>;
   };
 
   return (

package/src/presentation/components/result/ResultStoryCard.tsx

@@ -10,7 +10,6 @@ import {
   AtomicText,
   useAppDesignTokens,
 } from "@umituz/react-native-design-system";
-import { LinearGradient } from "expo-linear-gradient";
 import type { ResultStoryConfig } from "../../types/result-config.types";
 import { DEFAULT_RESULT_CONFIG } from "../../types/result-config.types";
 
@@ -37,16 +36,24 @@ export const ResultStoryCard: React.FC<ResultStoryCardProps> = ({
         ...base,
         borderWidth: 1,
         borderColor: tokens.colors.primaryContainer,
-        backgroundColor: "transparent",
+        backgroundColor: tokens.colors.surface,
       };
     } else if (cfg.borderStyle === "filled") {
       return {
         ...base,
         backgroundColor: tokens.colors.primaryContainer,
       };
+    } else if (cfg.borderStyle === "gradient") {
+      return {
+        ...base,
+        backgroundColor: tokens.colors.primaryContainer,
+      };
     }
 
-    return base;
+    return {
+      ...base,
+      backgroundColor: tokens.colors.surface,
+    };
   }, [cfg.borderStyle, cfg.spacing, tokens]);
 
   const styles = useMemo(
@@ -102,19 +109,6 @@ export const ResultStoryCard: React.FC<ResultStoryCardProps> = ({
     </>
   );
 
-  if (cfg.borderStyle === "gradient") {
-    return (
-      <View style={styles.outer}>
-        <LinearGradient
-          colors={[tokens.colors.primaryContainer, tokens.colors.surface]}
-          style={styles.container}
-        >
-          {renderContent()}
-        </LinearGradient>
-      </View>
-    );
-  }
-
   return (
     <View style={styles.outer}>
       <View style={styles.container}>{renderContent()}</View>

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

@@ -1,56 +0,0 @@
-/**
- * Creations Provider
- * Context provider for creations configuration and localization
- */
-
-import React, { createContext, useContext, useMemo, type ReactNode } from "react";
-import type { CreationsConfig, CreationType } from "../../domain/value-objects/CreationsConfig";
-import { getTranslatedTypes } from "../utils/filterUtils";
-
-interface CreationsContextValue {
-  config: CreationsConfig;
-  t: (key: string) => string;
-  translatedTypes: readonly CreationType[];
-  getLocalizedTitle: (typeId: string) => string;
-}
-
-const CreationsContext = createContext<CreationsContextValue | null>(null);
-
-interface CreationsProviderProps {
-  config: CreationsConfig;
-  t: (key: string) => string;
-  children: ReactNode;
-}
-
-export function CreationsProvider({ config, t, children }: CreationsProviderProps) {
-  const translatedTypes = useMemo(() => getTranslatedTypes(config, t), [config, t]);
-
-  const getLocalizedTitle = (typeId: string): string => {
-    const typeConfig = translatedTypes.find((type) => type.id === typeId);
-    return typeConfig?.labelKey || typeId;
-  };
-
-  const value = useMemo<CreationsContextValue>(
-    () => ({
-      config,
-      t,
-      translatedTypes,
-      getLocalizedTitle,
-    }),
-    [config, t, translatedTypes]
-  );
-
-  return (
-    <CreationsContext.Provider value={value}>
-      {children}
-    </CreationsContext.Provider>
-  );
-}
-
-export function useCreationsProvider(): CreationsContextValue {
-  const context = useContext(CreationsContext);
-  if (!context) {
-    throw new Error("useCreationsProvider must be used within a CreationsProvider");
-  }
-  return context;
-}