@umituz/react-native-ai-generation-content 1.17.65 → 1.17.66

package/package.json

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

package/src/index.ts

@@ -373,6 +373,8 @@ export type {
   AspectRatioTranslations,
   DurationOption,
   StyleTranslations,
+  AIGenerationFormProps,
+  AIGenerationFormTranslations,
 } from "./presentation/components";
 
 // Selector Factories

package/src/presentation/components/AIGenerationForm.tsx

@@ -1,4 +1,10 @@
-import React, { PropsWithChildren } from "react";
+import React from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
 import { StyleSelector } from "./selectors/StyleSelector";
 import { DurationSelector } from "./selectors/DurationSelector";
 import { AspectRatioSelector } from "./selectors/AspectRatioSelector";
@@ -6,143 +12,134 @@ import { PromptInput } from "./PromptInput";
 import { GenerateButton } from "./buttons/GenerateButton";
 import { ExamplePrompts } from "./prompts/ExamplePrompts";
 import { AIGenerationProgressInline } from "./AIGenerationProgressInline";
-import type { StyleOption } from "./selectors/types";
-import type { AspectRatioOption } from "./selectors/types";
-
-export interface AIGenerationFormTranslations {
-  promptTitle?: string;
-  promptPlaceholder?: string;
-  styleTitle?: string;
-  durationTitle?: string;
-  aspectRatioTitle?: string;
-  examplePromptsTitle?: string;
-  generateButton: string;
-  generatingButton: string;
-  progressTitle?: string;
-  progressHint?: string;
-}
-
-export interface AIGenerationFormProps extends PropsWithChildren {
-  prompt?: string;
-  onPromptChange?: (text: string) => void;
-  
-  // Optional: Example Prompts
-  examplePrompts?: readonly string[];
-  onExamplePromptSelect?: (prompt: string) => 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;
-  hideGenerateButton?: boolean;
-  
-  // Optional: Generation Progress
-  progress?: number;
-  
-  // Custom Generate Button Props
-  generateButtonProps?: {
-    costLabel?: string;
-    accessoryRight?: React.ReactNode;
-    onAccessoryRightPress?: () => void;
-    icon?: string;
-  };
-  
-  translations: AIGenerationFormTranslations;
-}
+import { StylePresetsGrid } from "./StylePresetsGrid";
+import type { AIGenerationFormProps } from "./AIGenerationForm.types";
 
 export const AIGenerationForm: React.FC<AIGenerationFormProps> = ({
   prompt,
   onPromptChange,
-  
   examplePrompts,
   onExamplePromptSelect,
-  
-  styles,
+  styles: styleOptions,
   selectedStyle,
   onStyleSelect,
-  
   duration,
   durationOptions,
   onDurationSelect,
   formatDurationLabel,
-  
   aspectRatios,
   selectedAspectRatio,
   onAspectRatioSelect,
-  
   onGenerate,
   isGenerating,
   hideGenerateButton,
   progress,
-  
   generateButtonProps,
-  
+  showAdvanced,
+  onAdvancedToggle,
+  presets,
+  onPresetPress,
   translations,
   children,
 }) => {
+  const tokens = useAppDesignTokens();
+  const isAdvancedVisible = showAdvanced !== undefined ? showAdvanced : true;
+
   return (
     <>
-      {onPromptChange && translations.promptTitle && (
-        <PromptInput
-          title={translations.promptTitle}
-          placeholder={translations.promptPlaceholder}
-          value={prompt || ""}
-          onChangeText={onPromptChange}
-        />
-      )}
-      
-      {examplePrompts && examplePrompts.length > 0 && onExamplePromptSelect && (
-        <ExamplePrompts
-          prompts={examplePrompts}
-          onSelectPrompt={onExamplePromptSelect}
-          title={translations.examplePromptsTitle}
+      {presets && presets.length > 0 && onPresetPress && (
+        <StylePresetsGrid
+          presets={presets}
+          onPresetPress={onPresetPress}
+          disabled={isGenerating}
+          title={translations.presetsTitle}
         />
       )}
-      
-      {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}
-        />
+
+      {onAdvancedToggle && (
+        <TouchableOpacity
+          style={[
+            styles.toggleButton,
+            { backgroundColor: tokens.colors.backgroundSecondary },
+          ]}
+          onPress={() => onAdvancedToggle(!showAdvanced)}
+        >
+          <AtomicText type="bodyMedium" style={{ color: tokens.colors.textPrimary }}>
+            {showAdvanced ? translations.hideAdvancedLabel : translations.showAdvancedLabel}
+          </AtomicText>
+          <AtomicIcon
+            name={showAdvanced ? "chevron-up" : "chevron-down"}
+            size="sm"
+            color={tokens.colors.textSecondary}
+          />
+        </TouchableOpacity>
       )}
-      
-      {duration && durationOptions && onDurationSelect && translations.durationTitle && (
-        <DurationSelector
-          duration={duration}
-          durationOptions={durationOptions}
-          onDurationSelect={onDurationSelect}
-          title={translations.durationTitle}
-          formatLabel={formatDurationLabel}
-        />
+
+      {isAdvancedVisible && (
+        <>
+          {onPromptChange && translations.promptTitle && (
+            <PromptInput
+              title={translations.promptTitle}
+              placeholder={translations.promptPlaceholder}
+              value={prompt || ""}
+              onChangeText={onPromptChange}
+            />
+          )}
+
+          {examplePrompts && examplePrompts.length > 0 && onExamplePromptSelect && (
+            <ExamplePrompts
+              prompts={examplePrompts}
+              onSelectPrompt={onExamplePromptSelect}
+              title={translations.examplePromptsTitle}
+            />
+          )}
+
+          {styleOptions && styleOptions.length > 0 && selectedStyle && onStyleSelect && translations.styleTitle && (
+            <StyleSelector
+              styles={styleOptions}
+              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}
+            />
+          )}
+
+          {children}
+
+          {!hideGenerateButton && (
+            <GenerateButton
+              onPress={onGenerate}
+              isProcessing={isGenerating}
+              isDisabled={onPromptChange ? !prompt?.trim() : false}
+              text={translations.generateButton}
+              processingText={translations.generatingButton}
+              variant="solid"
+              icon={generateButtonProps?.icon || "sparkles-outline"}
+              costLabel={generateButtonProps?.costLabel}
+              accessoryRight={generateButtonProps?.accessoryRight}
+              onAccessoryRightPress={generateButtonProps?.onAccessoryRightPress}
+            />
+          )}
+        </>
       )}
-      
-      {/* Custom children injected here */}
-      {children}
 
       {isGenerating && progress !== undefined && (
         <AIGenerationProgressInline
@@ -151,21 +148,19 @@ export const AIGenerationForm: React.FC<AIGenerationFormProps> = ({
           hint={translations.progressHint}
         />
       )}
-      
-      {!hideGenerateButton && (
-        <GenerateButton
-          onPress={onGenerate}
-          isProcessing={isGenerating}
-          isDisabled={onPromptChange ? !prompt?.trim() : false}
-          text={translations.generateButton}
-          processingText={translations.generatingButton}
-          variant="solid"
-          icon={generateButtonProps?.icon || "sparkles-outline"}
-          costLabel={generateButtonProps?.costLabel}
-          accessoryRight={generateButtonProps?.accessoryRight}
-          onAccessoryRightPress={generateButtonProps?.onAccessoryRightPress}
-        />
-      )}
     </>
   );
 };
+
+const styles = StyleSheet.create({
+  toggleButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 12,
+    marginHorizontal: 16,
+    borderRadius: 12,
+    gap: 8,
+    marginVertical: 12,
+  },
+});

package/src/presentation/components/AIGenerationForm.types.ts

@@ -0,0 +1,74 @@
+import React, { PropsWithChildren } from "react";
+import type { StyleOption, AspectRatioOption, StylePreset } from "./selectors/types";
+
+/**
+ * Translations for AIGenerationForm
+ */
+export interface AIGenerationFormTranslations {
+  promptTitle?: string;
+  promptPlaceholder?: string;
+  styleTitle?: string;
+  durationTitle?: string;
+  aspectRatioTitle?: string;
+  examplePromptsTitle?: string;
+  generateButton: string;
+  generatingButton: string;
+  progressTitle?: string;
+  progressHint?: string;
+  presetsTitle?: string;
+  showAdvancedLabel?: string;
+  hideAdvancedLabel?: string;
+}
+
+/**
+ * Props for AIGenerationForm
+ */
+export interface AIGenerationFormProps extends PropsWithChildren {
+  prompt?: string;
+  onPromptChange?: (text: string) => void;
+  
+  // Optional: Example Prompts
+  examplePrompts?: readonly string[];
+  onExamplePromptSelect?: (prompt: string) => 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;
+  hideGenerateButton?: boolean;
+  
+  // Optional: Generation Progress
+  progress?: number;
+  
+  // Custom Generate Button Props
+  generateButtonProps?: {
+    costLabel?: string;
+    accessoryRight?: React.ReactNode;
+    onAccessoryRightPress?: () => void;
+    icon?: string;
+  };
+  
+  // Optional: Advanced Options Toggle
+  showAdvanced?: boolean;
+  onAdvancedToggle?: (show: boolean) => void;
+  
+  // Optional: Style Presets
+  presets?: readonly StylePreset[];
+  onPresetPress?: (preset: StylePreset) => void;
+  
+  translations: AIGenerationFormTranslations;
+}

package/src/presentation/components/index.ts

@@ -9,6 +9,7 @@ export { PromptInput } from "./PromptInput";
 export { AIGenerationHero } from "./AIGenerationHero";
 export * from "./StylePresetsGrid";
 export * from "./AIGenerationForm";
+export * from "./AIGenerationForm.types";
 
 export type {
   GenerationProgressModalProps,