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

package/src/features/text-to-video/presentation/components/OptionsPanel.tsx

@@ -35,7 +35,7 @@ export const OptionsPanel: React.FC<OptionsPanelProps> = ({
             <View
               style={[styles.badge, { backgroundColor: tokens.colors.success }]}
             >
-              <AtomicText type="labelSmall" style={styles.badgeText}>
+              <AtomicText type="labelSmall" style={[styles.badgeText, { color: tokens.colors.textInverse }]}>
                 {soundBadge}
               </AtomicText>
             </View>
@@ -55,7 +55,7 @@ export const OptionsPanel: React.FC<OptionsPanelProps> = ({
         <TouchableOpacity
           style={[
             styles.controlButton,
-            professionalMode && { backgroundColor: tokens.colors.surface },
+            { backgroundColor: professionalMode ? tokens.colors.surface : tokens.colors.surfaceVariant },
           ]}
           onPress={() => onProfessionalModeToggle(!professionalMode)}
         >
@@ -67,7 +67,7 @@ export const OptionsPanel: React.FC<OptionsPanelProps> = ({
           </AtomicText>
         </TouchableOpacity>
 
-        <TouchableOpacity style={[styles.controlButton, styles.durationButton]}>
+        <TouchableOpacity style={[styles.controlButton, styles.durationButton, { backgroundColor: tokens.colors.surfaceVariant }]}>
           <AtomicText type="labelMedium" color="textSecondary">
             {duration}s
           </AtomicText>
@@ -101,7 +101,6 @@ const styles = StyleSheet.create({
     borderRadius: 4,
   },
   badgeText: {
-    color: "#000",
     fontWeight: "bold",
     fontSize: 10,
   },
@@ -113,7 +112,6 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
     paddingVertical: 10,
     borderRadius: 8,
-    backgroundColor: "rgba(255, 255, 255, 0.05)",
     alignItems: "center",
     justifyContent: "center",
   },

package/src/presentation/components/AIGenerationForm.tsx

@@ -131,7 +131,6 @@ export const AIGenerationForm: React.FC<AIGenerationFormProps> = ({
               isDisabled={onPromptChange ? !prompt?.trim() : false}
               text={translations.generateButton}
               processingText={translations.generatingButton}
-              variant="solid"
               icon={generateButtonProps?.icon || "sparkles-outline"}
               costLabel={generateButtonProps?.costLabel}
               accessoryRight={generateButtonProps?.accessoryRight}

package/src/presentation/components/AIGenerationHero.tsx

@@ -1,12 +1,11 @@
 /**
  * HeroSection Component
- * Generic hero section with gradient background and optional icon
+ * Generic hero section with solid background and optional icon
  * Props-driven for 100+ apps compatibility
  */
 
 import React from "react";
 import { View, StyleSheet, type ViewStyle } from "react-native";
-import { LinearGradient } from "expo-linear-gradient";
 import {
   AtomicText,
   AtomicIcon,
@@ -17,7 +16,6 @@ export interface AIGenerationHeroProps {
   readonly title: string;
   readonly subtitle?: string;
   readonly iconName?: string;
-  readonly gradientColors?: readonly [string, string, ...string[]];
   readonly style?: ViewStyle;
 }
 
@@ -25,38 +23,47 @@ export const AIGenerationHero: React.FC<AIGenerationHeroProps> = ({
   title,
   subtitle,
   iconName,
-  gradientColors = ["#00FF88", "#10B981"],
   style,
 }) => {
   const tokens = useAppDesignTokens();
 
-  const finalColors = gradientColors || [
-    tokens.colors.secondary ?? tokens.colors.info,
-    tokens.colors.primary,
-  ];
-
   return (
     <View style={[styles.container, style]}>
-      <LinearGradient
-        colors={finalColors as [string, string, ...string[]]}
-        start={{ x: 0, y: 0 }}
-        end={{ x: 1, y: 1 }}
-        style={styles.gradient}
+      <View
+        style={[
+          styles.heroBackground,
+          { backgroundColor: tokens.colors.primary },
+        ]}
       >
         {iconName && (
-          <View style={styles.iconWrapper}>
-            <AtomicIcon name={iconName} size="xl" color="onSurface" />
+          <View
+            style={[
+              styles.iconWrapper,
+              { backgroundColor: tokens.colors.surface },
+            ]}
+          >
+            <AtomicIcon
+              name={iconName}
+              size="xl"
+              customColor={tokens.colors.primary}
+            />
           </View>
         )}
-        <AtomicText type="headlineSmall" style={styles.title}>
+        <AtomicText
+          type="headlineSmall"
+          style={[styles.title, { color: tokens.colors.textInverse }]}
+        >
           {title}
         </AtomicText>
         {subtitle && (
-          <AtomicText type="bodyMedium" style={styles.subtitle}>
+          <AtomicText
+            type="bodyMedium"
+            style={[styles.subtitle, { color: tokens.colors.textInverse }]}
+          >
             {subtitle}
           </AtomicText>
         )}
-      </LinearGradient>
+      </View>
     </View>
   );
 };
@@ -68,7 +75,7 @@ const styles = StyleSheet.create({
     borderRadius: 20,
     overflow: "hidden",
   },
-  gradient: {
+  heroBackground: {
     padding: 32,
     alignItems: "center",
     justifyContent: "center",
@@ -77,20 +84,16 @@ const styles = StyleSheet.create({
     width: 80,
     height: 80,
     borderRadius: 40,
-    backgroundColor: "rgba(255, 255, 255, 0.2)",
     alignItems: "center",
     justifyContent: "center",
     marginBottom: 16,
   },
   title: {
-    color: "#FFFFFF",
     textAlign: "center",
     fontWeight: "700",
   },
   subtitle: {
-    color: "#FFFFFF",
     textAlign: "center",
     marginTop: 8,
-    opacity: 0.9,
   },
 });

package/src/presentation/components/GenerationProgressContent.tsx

@@ -110,7 +110,10 @@ export const GenerationProgressContent: React.FC<
           ]}
           onPress={onDismiss}
         >
-          <AtomicText type="bodyMedium" style={styles.dismissText}>
+          <AtomicText
+            type="bodyMedium"
+            style={[styles.dismissText, { color: tokens.colors.textInverse }]}
+          >
             {dismissLabel || "OK"}
           </AtomicText>
         </TouchableOpacity>
@@ -155,7 +158,6 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   dismissText: {
-    color: "#FFFFFF",
     fontWeight: "600",
   },
 });

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

@@ -15,7 +15,6 @@ import {
   type ViewStyle,
   type StyleProp,
 } from "react-native";
-import { LinearGradient } from "expo-linear-gradient";
 import {
   AtomicText,
   AtomicIcon,
@@ -83,12 +82,12 @@ export const PhotoUploadCard: React.FC<PhotoUploadCardProps> = ({
 
   const borderColor = useMemo(() => {
     if (!cfg.showValidationStatus) {
-      return `${tokens.colors.primary}40`;
+      return tokens.colors.borderLight;
     }
     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`;
+    return tokens.colors.borderLight;
   }, [isValidating, isValid, tokens, cfg.showValidationStatus]);
 
   const styles = useMemo(
@@ -120,14 +119,8 @@ export const PhotoUploadCard: React.FC<PhotoUploadCardProps> = ({
           alignItems: "center",
           marginBottom: 20,
           borderWidth: 2,
-          borderColor: `${tokens.colors.primary}30`,
-        },
-        iconGradient: {
-          width: 88,
-          height: 88,
-          borderRadius: 44,
-          justifyContent: "center",
-          alignItems: "center",
+          borderColor: tokens.colors.borderLight,
+          backgroundColor: tokens.colors.surfaceSecondary,
         },
         title: {
           fontSize: 20,
@@ -150,7 +143,8 @@ export const PhotoUploadCard: React.FC<PhotoUploadCardProps> = ({
         },
         imageOverlay: {
           ...StyleSheet.absoluteFillObject,
-          backgroundColor: "rgba(0,0,0,0.15)",
+          backgroundColor: tokens.colors.modalOverlay,
+          opacity: 0.3,
         },
         changeButton: {
           position: "absolute",
@@ -185,7 +179,7 @@ export const PhotoUploadCard: React.FC<PhotoUploadCardProps> = ({
           height: 100,
           borderRadius: 50,
           borderWidth: 2,
-          borderColor: `${tokens.colors.primary}30`,
+          borderColor: tokens.colors.borderLight,
         },
       }),
     [tokens, imageUri, cfg],
@@ -226,19 +220,11 @@ export const PhotoUploadCard: React.FC<PhotoUploadCardProps> = ({
         ) : (
           <View style={styles.placeholder}>
             <View style={styles.iconCircle}>
-              <LinearGradient
-                colors={[
-                  `${tokens.colors.primary}20`,
-                  `${tokens.colors.primary}10`,
-                ]}
-                style={styles.iconGradient}
-              >
-                <AtomicIcon
-                  name={(icon as string) || "camera"}
-                  size={cfg.iconSize}
-                  customColor={tokens.colors.primary}
-                />
-              </LinearGradient>
+              <AtomicIcon
+                name={(icon as string) || "camera"}
+                size={cfg.iconSize}
+                customColor={tokens.colors.primary}
+              />
             </View>
             <AtomicText style={styles.title}>
               {title || translations.tapToUpload}

package/src/presentation/components/StylePresetsGrid.tsx

@@ -47,7 +47,10 @@ export const StylePresetsGrid: React.FC<StylePresetsGridProps> = ({
             key={preset.id}
             style={[
               styles.card,
-              { backgroundColor: tokens.colors.surface },
+              {
+                backgroundColor: tokens.colors.surface,
+                borderColor: tokens.colors.border,
+              },
             ]}
             onPress={() => onPresetPress(preset)}
             disabled={disabled}
@@ -58,7 +61,7 @@ export const StylePresetsGrid: React.FC<StylePresetsGridProps> = ({
                 <View
                   style={[
                     styles.badge,
-                    { backgroundColor: tokens.colors.primary + "20" },
+                    { backgroundColor: tokens.colors.surfaceVariant },
                   ]}
                 >
                   <AtomicText
@@ -109,7 +112,6 @@ const styles = StyleSheet.create({
     padding: 16,
     borderRadius: 16,
     borderWidth: 1,
-    borderColor: "rgba(0,0,0,0.05)",
   },
   cardHeader: {
     flexDirection: "row",

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

@@ -1,6 +1,6 @@
 /**
  * GenerateButton Component
- * Generic AI generation button with gradient/solid variants
+ * Generic AI generation button using design system tokens
  * Props-driven for 100+ apps compatibility
  */
 
@@ -12,7 +12,6 @@ import {
   AtomicIcon,
   AtomicSpinner,
 } from "@umituz/react-native-design-system";
-import { LinearGradient } from "expo-linear-gradient";
 
 export interface GenerateButtonProps {
   readonly isDisabled?: boolean;
@@ -20,8 +19,6 @@ export interface GenerateButtonProps {
   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;
   readonly costLabel?: string;
@@ -36,10 +33,8 @@ export const GenerateButton: React.FC<GenerateButtonProps> = ({
   onPress,
   text,
   processingText,
-  variant = "gradient",
-  gradientColors = ["#FF6B9D", "#C74375", "#FF6B9D"],
   icon = "sparkles",
-  iconSize = 24,
+  iconSize = 20,
   costLabel,
   accessoryRight,
   onAccessoryRightPress,
@@ -50,79 +45,48 @@ export const GenerateButton: React.FC<GenerateButtonProps> = ({
   const displayText = isProcessing && processingText ? processingText : text;
   const finalDisplayText = costLabel ? `${displayText} (${costLabel})` : displayText;
 
-  if (variant === "solid") {
-    return (
-      <View style={[styles.solidContainer, { marginTop: tokens.spacing.xl }, style]}>
-        <View style={styles.row}>
-          <TouchableOpacity
-            onPress={onPress}
-            disabled={disabled}
-            activeOpacity={0.8}
-            style={[
-              styles.solidButton,
-              {
-                backgroundColor: disabled
-                  ? tokens.colors.surfaceSecondary
-                  : tokens.colors.primary,
-                flex: 1,
-              },
-            ]}
-          >
-            <View style={styles.buttonContent}>
-              {isProcessing ? (
-                <AtomicSpinner size="sm" color="white" />
-              ) : (
-                <AtomicIcon name={icon} customSize={20} customColor="#FFFFFF" />
-              )}
-              <AtomicText type="bodyLarge" style={styles.solidButtonText}>
-                {finalDisplayText}
-              </AtomicText>
-            </View>
-          </TouchableOpacity>
-          {accessoryRight && (
-            <TouchableOpacity
-              onPress={onAccessoryRightPress}
-              style={[styles.accessory, { backgroundColor: tokens.colors.surfaceSecondary }]}
-            >
-              {accessoryRight}
-            </TouchableOpacity>
-          )}
-        </View>
-      </View>
-    );
-  }
-
   return (
-    <View style={[styles.gradientContainer, { marginTop: tokens.spacing.xl }, style]}>
+    <View style={[styles.container, { marginTop: tokens.spacing.xl }, style]}>
       <View style={styles.row}>
         <TouchableOpacity
           onPress={onPress}
           disabled={disabled}
-          activeOpacity={0.85}
-          style={[styles.buttonWrapper, accessoryRight ? { flex: 1 } : undefined]}
+          activeOpacity={0.8}
+          style={[
+            styles.button,
+            {
+              backgroundColor: disabled
+                ? tokens.colors.surfaceSecondary
+                : tokens.colors.primary,
+              borderRadius: tokens.borderRadius.lg,
+              flex: 1,
+            },
+          ]}
         >
-          <LinearGradient
-            colors={disabled ? ["#9CA3AF", "#6B7280"] : gradientColors}
-            start={[0, 0]}
-            end={[1, 0]}
-            style={[styles.gradientButton, disabled && styles.disabledButton]}
-          >
-            <View style={styles.buttonContent}>
-              {isProcessing ? (
-                <AtomicSpinner size="sm" color="white" />
-              ) : (
-                <AtomicIcon name={icon} customSize={iconSize} customColor="#FFF" />
-              )}
-              <AtomicText type="bodyLarge" style={styles.gradientButtonText}>
-                {finalDisplayText}
-              </AtomicText>
-            </View>
-          </LinearGradient>
+          <View style={styles.buttonContent}>
+            {isProcessing ? (
+              <AtomicSpinner size="sm" color={tokens.colors.textInverse} />
+            ) : (
+              <AtomicIcon name={icon} customSize={iconSize} customColor={tokens.colors.textInverse} />
+            )}
+            <AtomicText
+              type="bodyLarge"
+              style={[styles.buttonText, { color: tokens.colors.textInverse }]}
+            >
+              {finalDisplayText}
+            </AtomicText>
+          </View>
         </TouchableOpacity>
         {accessoryRight && (
           <TouchableOpacity
             onPress={onAccessoryRightPress}
-            style={[styles.accessory, { backgroundColor: tokens.colors.surface, height: 56, width: 56 }]}
+            style={[
+              styles.accessory,
+              {
+                backgroundColor: tokens.colors.surfaceSecondary,
+                borderRadius: tokens.borderRadius.lg,
+              },
+            ]}
           >
             {accessoryRight}
           </TouchableOpacity>
@@ -133,35 +97,15 @@ export const GenerateButton: React.FC<GenerateButtonProps> = ({
 };
 
 const styles = StyleSheet.create({
-  gradientContainer: {
-    alignItems: "center",
+  container: {
     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,
+  button: {
     paddingVertical: 16,
     paddingHorizontal: 24,
     alignItems: "center",
     justifyContent: "center",
   },
-  disabledButton: {
-    opacity: 0.5,
-  },
   buttonContent: {
     flexDirection: "row",
     alignItems: "center",
@@ -175,19 +119,12 @@ const styles = StyleSheet.create({
     width: "100%",
   },
   accessory: {
-    width: 60,
-    height: 60,
-    borderRadius: 16,
+    width: 56,
+    height: 56,
     alignItems: "center",
     justifyContent: "center",
   },
-  gradientButtonText: {
-    color: "#FFFFFF",
-    fontWeight: "700",
-    fontSize: 18,
-  },
-  solidButtonText: {
-    color: "#FFFFFF",
+  buttonText: {
     fontWeight: "600",
   },
 });

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

@@ -11,34 +11,41 @@ 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}>
+      <View
+        style={[
+          styles.headerContainer,
+          { borderColor: tokens.colors.border },
+        ]}
+      >
         <ImageBackground
           source={imageSource}
           style={[styles.heroImage, { minHeight }]}
           imageStyle={styles.heroImageStyle}
         >
-          <LinearGradient
-            colors={gradientColors}
-            style={[styles.gradient, { minHeight }]}
+          <View
+            style={[
+              styles.overlay,
+              {
+                minHeight,
+                backgroundColor: tokens.colors.modalOverlay,
+              },
+            ]}
           />
         </ImageBackground>
       </View>
@@ -65,7 +72,6 @@ const styles = StyleSheet.create({
     borderRadius: 20,
     overflow: "hidden",
     borderWidth: 1,
-    borderColor: "rgba(255, 255, 255, 0.1)",
   },
   heroImage: {
     width: "100%",
@@ -73,7 +79,7 @@ const styles = StyleSheet.create({
   heroImageStyle: {
     borderRadius: 20,
   },
-  gradient: {
+  overlay: {
     flex: 1,
   },
   description: {

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

@@ -17,8 +17,6 @@ export interface DualImagePickerProps {
   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";
 }
@@ -31,8 +29,6 @@ export const DualImagePicker: React.FC<DualImagePickerProps> = ({
   onSelectTarget,
   sourcePlaceholder,
   targetPlaceholder,
-  sourceGradient = ["#667eea", "#764ba2"],
-  targetGradient = ["#f093fb", "#f5576c"],
   variant = "portrait",
   layout = "horizontal",
 }) => {
@@ -53,7 +49,6 @@ export const DualImagePicker: React.FC<DualImagePickerProps> = ({
           isDisabled={isDisabled}
           onPress={onSelectSource}
           placeholderText={sourcePlaceholder}
-          gradientColors={sourceGradient}
           variant={variant}
         />
       </View>
@@ -64,7 +59,6 @@ export const DualImagePicker: React.FC<DualImagePickerProps> = ({
           isDisabled={isDisabled}
           onPress={onSelectTarget}
           placeholderText={targetPlaceholder}
-          gradientColors={targetGradient}
           variant={variant}
         />
       </View>