@umituz/react-native-ai-generation-content 1.17.55 → 1.17.57

package/package.json

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

package/src/presentation/components/AIGenerationForm.tsx

@@ -1,34 +1,59 @@
-import React from "react";
+import React, { PropsWithChildren } from "react";
 import { StyleSelector } from "./selectors/StyleSelector";
 import { DurationSelector } from "./selectors/DurationSelector";
+import { AspectRatioSelector } from "./selectors/AspectRatioSelector";
 import { PromptInput } from "./PromptInput";
 import { GenerateButton } from "./buttons/GenerateButton";
+import { ExamplePrompts } from "./prompts/ExamplePrompts";
 import type { StyleOption } from "./selectors/types";
+import type { AspectRatioOption } from "./selectors/types";
 
 export interface AIGenerationFormTranslations {
   promptTitle: string;
   promptPlaceholder: string;
-  styleTitle: string;
-  durationTitle: string;
+  styleTitle?: string;
+  durationTitle?: string;
+  aspectRatioTitle?: string;
+  examplePromptsTitle?: string;
   generateButton: string;
   generatingButton: string;
 }
 
-export interface AIGenerationFormProps {
+export interface AIGenerationFormProps extends PropsWithChildren {
   prompt: string;
   onPromptChange: (text: string) => void;
   
-  styles: StyleOption[];
-  selectedStyle: string;
-  onStyleSelect: (styleId: string) => void;
+  // Optional: Example Prompts
+  examplePrompts?: readonly string[];
+  onExamplePromptSelect?: (prompt: string) => void;
   
-  duration: number;
-  durationOptions: readonly number[];
-  onDurationSelect: (duration: number) => void;
+  // Optional: Style Selection
+  styles?: StyleOption[];
+  selectedStyle?: string;
+  onStyleSelect?: (styleId: string) => void;
+  
+  // Optional: Duration Selection
+  duration?: number;
+  durationOptions?: readonly number[];
+  onDurationSelect?: (duration: number) => void;
+  formatDurationLabel?: (duration: number) => string;
+  
+  // Optional: Aspect Ratio Selection
+  aspectRatios?: AspectRatioOption[];
+  selectedAspectRatio?: string;
+  onAspectRatioSelect?: (ratio: string) => void;
   
   onGenerate: () => void;
   isGenerating: boolean;
   
+  // Custom Generate Button Props
+  generateButtonProps?: {
+    costLabel?: string;
+    accessoryRight?: React.ReactNode;
+    onAccessoryRightPress?: () => void;
+    icon?: string;
+  };
+  
   translations: AIGenerationFormTranslations;
 }
 
@@ -36,6 +61,9 @@ export const AIGenerationForm: React.FC<AIGenerationFormProps> = ({
   prompt,
   onPromptChange,
   
+  examplePrompts,
+  onExamplePromptSelect,
+  
   styles,
   selectedStyle,
   onStyleSelect,
@@ -43,11 +71,19 @@ export const AIGenerationForm: React.FC<AIGenerationFormProps> = ({
   duration,
   durationOptions,
   onDurationSelect,
+  formatDurationLabel,
+  
+  aspectRatios,
+  selectedAspectRatio,
+  onAspectRatioSelect,
   
   onGenerate,
   isGenerating,
   
+  generateButtonProps,
+  
   translations,
+  children,
 }) => {
   return (
     <>
@@ -58,19 +94,44 @@ export const AIGenerationForm: React.FC<AIGenerationFormProps> = ({
         onChangeText={onPromptChange}
       />
       
-      <StyleSelector
-        styles={styles}
-        selectedStyle={selectedStyle}
-        onStyleSelect={onStyleSelect}
-        title={translations.styleTitle}
-      />
+      {examplePrompts && examplePrompts.length > 0 && onExamplePromptSelect && (
+        <ExamplePrompts
+          prompts={examplePrompts}
+          onSelectPrompt={onExamplePromptSelect}
+          title={translations.examplePromptsTitle}
+        />
+      )}
       
-      <DurationSelector
-        duration={duration}
-        durationOptions={durationOptions}
-        onDurationSelect={onDurationSelect}
-        title={translations.durationTitle}
-      />
+      {styles && styles.length > 0 && selectedStyle && onStyleSelect && translations.styleTitle && (
+        <StyleSelector
+          styles={styles}
+          selectedStyle={selectedStyle}
+          onStyleSelect={onStyleSelect}
+          title={translations.styleTitle}
+        />
+      )}
+      
+      {aspectRatios && aspectRatios.length > 0 && selectedAspectRatio && onAspectRatioSelect && translations.aspectRatioTitle && (
+        <AspectRatioSelector
+          ratios={aspectRatios}
+          selectedRatio={selectedAspectRatio}
+          onRatioSelect={onAspectRatioSelect}
+          title={translations.aspectRatioTitle}
+        />
+      )}
+      
+      {duration && durationOptions && onDurationSelect && translations.durationTitle && (
+        <DurationSelector
+          duration={duration}
+          durationOptions={durationOptions}
+          onDurationSelect={onDurationSelect}
+          title={translations.durationTitle}
+          formatLabel={formatDurationLabel}
+        />
+      )}
+      
+      {/* Custom children injected here */}
+      {children}
       
       <GenerateButton
         onPress={onGenerate}
@@ -79,7 +140,10 @@ export const AIGenerationForm: React.FC<AIGenerationFormProps> = ({
         text={translations.generateButton}
         processingText={translations.generatingButton}
         variant="solid"
-        icon="sparkles-outline"
+        icon={generateButtonProps?.icon || "sparkles-outline"}
+        costLabel={generateButtonProps?.costLabel}
+        accessoryRight={generateButtonProps?.accessoryRight}
+        onAccessoryRightPress={generateButtonProps?.onAccessoryRightPress}
       />
     </>
   );