@umituz/react-native-ai-generation-content 1.17.43 → 1.17.45

package/package.json

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

package/src/features/image-to-video/presentation/components/index.ts

@@ -21,9 +21,9 @@ export type {
   ImageSelectionGridTranslations as ImageToVideoSelectionGridTranslations,
 } from "./ImageSelectionGrid";
 
-// Hero Section
-export { HeroSection as ImageToVideoHeroSection } from "./HeroSection";
-export type { HeroSectionProps as ImageToVideoHeroSectionProps } from "./HeroSection";
+// Hero Section - Using AIGenerationHero from common components
+// export { HeroSection as ImageToVideoHeroSection } from "./HeroSection";
+// export type { HeroSectionProps as ImageToVideoHeroSectionProps } from "./HeroSection";
 
 // Generate Button
 export { GenerateButton as ImageToVideoGenerateButton } from "./GenerateButton";

package/src/features/text-to-voice/presentation/components/index.ts

@@ -4,4 +4,4 @@ export { TextToVoiceExamplePrompts } from "./TextToVoiceExamplePrompts";
 export { TextToVoiceGenerateButton } from "./TextToVoiceGenerateButton";
 export { TextToVoiceAudioPlayer } from "./TextToVoiceAudioPlayer";
 export { TextToVoiceErrorMessage } from "./TextToVoiceErrorMessage";
-export { TextToVoiceHeader } from "./TextToVoiceHeader";
+// TextToVoiceHeader removed in favor of common AIGenerationHero

package/src/presentation/components/AIGenerationHero.tsx

@@ -18,6 +18,7 @@ export interface AIGenerationHeroProps {
   readonly subtitle?: string;
   readonly iconName?: string;
   readonly gradientColors?: readonly [string, string, ...string[]];
+  readonly style?: any;
 }
 
 export const AIGenerationHero: React.FC<AIGenerationHeroProps> = ({
@@ -25,13 +26,19 @@ export const AIGenerationHero: React.FC<AIGenerationHeroProps> = ({
   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}>
+    <View style={[styles.container, style]}>
       <LinearGradient
-        colors={gradientColors}
+        colors={finalColors as any}
         start={{ x: 0, y: 0 }}
         end={{ x: 1, y: 1 }}
         style={styles.gradient}

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

@@ -26,7 +26,7 @@ export const AIGenScreenHeader: React.FC<AIGenScreenHeaderProps> = ({
   onNavigationPress,
   headerContent,
   rightContent,
-  titleType = "titleLarge",
+  titleType = "headlineLarge",
   showDescription = !!description,
 }) => {
   const tokens = useAppDesignTokens();
@@ -49,33 +49,34 @@ export const AIGenScreenHeader: React.FC<AIGenScreenHeaderProps> = ({
   return (
     <View style={styles.header}>
       <View style={styles.headerTop}>
-        <View style={styles.leftContainer}>
-          <TouchableOpacity
-            onPress={onNavigationPress}
-            style={buttonStyle}
-            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-          >
-            <AtomicIcon name={iconName} size="md" color={iconColor} />
-          </TouchableOpacity>
+        <View style={styles.titleContainer}>
           <AtomicText
             type={titleType}
             style={{
               color: tokens.colors.textPrimary,
               fontWeight: "700",
-              marginLeft: navigationType === "back" ? 8 : 0,
             }}
           >
             {title}
           </AtomicText>
         </View>
-        <View style={styles.headerActions}>{rightContent}</View>
+        <View style={styles.headerActions}>
+          {rightContent}
+          <TouchableOpacity
+            onPress={onNavigationPress}
+            style={buttonStyle}
+            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+          >
+            <AtomicIcon name={iconName} size="md" color={iconColor} />
+          </TouchableOpacity>
+        </View>
       </View>
       {showDescription && description && (
         <AtomicText
           type="bodyMedium"
           style={[
             styles.description,
-            { color: tokens.colors.textSecondary, marginTop: 8 },
+            { color: tokens.colors.textSecondary, marginTop: 4 },
           ]}
         >
           {description}
@@ -88,34 +89,37 @@ export const AIGenScreenHeader: React.FC<AIGenScreenHeaderProps> = ({
 
 const styles = StyleSheet.create({
   header: {
-    padding: 16,
+    paddingHorizontal: 16,
     paddingTop: 60,
     width: "100%",
+    marginBottom: 24,
   },
   headerTop: {
     flexDirection: "row",
-    alignItems: "center",
+    alignItems: "flex-start",
     justifyContent: "space-between",
   },
-  leftContainer: {
-    flexDirection: "row",
-    alignItems: "center",
+  titleContainer: {
     flex: 1,
+    marginRight: 12,
   },
   headerActions: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 12,
+    gap: 8,
   },
   navigationButton: {
-    width: 40,
-    height: 40,
+    width: 36,
+    height: 36,
+    borderRadius: 18,
     alignItems: "center",
     justifyContent: "center",
   },
-  backButton: {},
+  backButton: {
+    width: 40,
+    height: 40,
+  },
   closeButton: {
-    borderRadius: 20,
     borderWidth: 1,
   },
   description: {

package/src/features/image-to-video/presentation/components/HeroSection.tsx

@@ -1,89 +0,0 @@
-/**
- * Hero Section Component
- * Generic hero section with gradient background
- */
-
-import React from "react";
-import { View, StyleSheet } from "react-native";
-import { LinearGradient } from "expo-linear-gradient";
-import {
-  AtomicText,
-  AtomicIcon,
-  useAppDesignTokens,
-} from "@umituz/react-native-design-system";
-
-export interface HeroSectionProps {
-  title: string;
-  subtitle: string;
-  iconName?: string;
-}
-
-export const HeroSection: React.FC<HeroSectionProps> = ({
-  title,
-  subtitle,
-  iconName = "image-outline",
-}) => {
-  const tokens = useAppDesignTokens();
-
-  return (
-    <View style={componentStyles.container}>
-      <LinearGradient
-        colors={[
-          tokens.colors.secondary ?? tokens.colors.info,
-          tokens.colors.primary,
-        ]}
-        start={{ x: 0, y: 0 }}
-        end={{ x: 1, y: 1 }}
-        style={componentStyles.gradient}
-      >
-        <View style={componentStyles.iconContainer}>
-          <AtomicIcon name={iconName as never} size="xl" color="onSurface" />
-        </View>
-        <AtomicText
-          type="headlineSmall"
-          style={[componentStyles.title, { color: tokens.colors.textInverse }]}
-        >
-          {title}
-        </AtomicText>
-        <AtomicText
-          type="bodyMedium"
-          style={[componentStyles.subtitle, { color: tokens.colors.textInverse }]}
-        >
-          {subtitle}
-        </AtomicText>
-      </LinearGradient>
-    </View>
-  );
-};
-
-const componentStyles = StyleSheet.create({
-  container: {
-    marginHorizontal: 16,
-    marginBottom: 24,
-    borderRadius: 20,
-    overflow: "hidden",
-  },
-  gradient: {
-    padding: 32,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  iconContainer: {
-    width: 80,
-    height: 80,
-    borderRadius: 40,
-    backgroundColor: "rgba(255, 255, 255, 0.2)",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  title: {
-    textAlign: "center",
-    marginTop: 16,
-    fontWeight: "700",
-  },
-  subtitle: {
-    textAlign: "center",
-    marginTop: 8,
-    opacity: 0.9,
-  },
-});

package/src/features/text-to-voice/presentation/components/TextToVoiceHeader.tsx

@@ -1,73 +0,0 @@
-/**
- * TextToVoiceHeader Component
- * Header with icon and description
- */
-
-import React from "react";
-import { View, StyleSheet } from "react-native";
-import {
-  AtomicText,
-  AtomicIcon,
-  useAppDesignTokens,
-} from "@umituz/react-native-design-system";
-import { useLocalization } from "@umituz/react-native-localization";
-import type { TextToVoiceHeaderProps } from "../../domain/types";
-
-export const TextToVoiceHeader: React.FC<TextToVoiceHeaderProps> = ({
-  descriptionKey,
-  iconName,
-  headerContent,
-  style,
-}) => {
-  const { t } = useLocalization();
-  const tokens = useAppDesignTokens();
-
-  return (
-    <View style={[styles.container, style]}>
-      {headerContent || (
-        <View style={styles.content}>
-          <View
-            style={[
-              styles.iconContainer,
-              { backgroundColor: `${tokens.colors.primary}20` },
-            ]}
-          >
-            <AtomicIcon
-              name={iconName as "Mic"}
-              size="lg"
-              color="primary"
-            />
-          </View>
-          <AtomicText
-            type="bodySmall"
-            style={[styles.description, { color: tokens.colors.textSecondary }]}
-          >
-            {t(descriptionKey)}
-          </AtomicText>
-        </View>
-      )}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: "center",
-    marginBottom: 16,
-  },
-  content: {
-    alignItems: "center",
-  },
-  iconContainer: {
-    width: 56,
-    height: 56,
-    borderRadius: 28,
-    alignItems: "center",
-    justifyContent: "center",
-    marginBottom: 12,
-  },
-  description: {
-    marginTop: 8,
-    textAlign: "center",
-  },
-});