@umituz/react-native-ai-generation-content 1.17.46 → 1.17.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.17.46",
+  "version": "1.17.48",
   "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

@@ -25,6 +25,6 @@ export type {
 // export { HeroSection as ImageToVideoHeroSection } from "./HeroSection";
 // export type { HeroSectionProps as ImageToVideoHeroSectionProps } from "./HeroSection";
 
-// Generate Button
-export { GenerateButton as ImageToVideoGenerateButton } from "./GenerateButton";
-export type { GenerateButtonProps as ImageToVideoGenerateButtonProps } from "./GenerateButton";
+// Action Components
+export { GenerateButton as ImageToVideoGenerateButton } from "../../../presentation/components/buttons/GenerateButton";
+export type { GenerateButtonProps as ImageToVideoGenerateButtonProps } from "../../../presentation/components/buttons/GenerateButton";

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

@@ -4,41 +4,27 @@
  */
 
 // Input Components
-export { TextToImagePromptInput } from "./TextToImagePromptInput";
-export type { TextToImagePromptInputProps } from "./TextToImagePromptInput";
+export { PromptInput as TextToImagePromptInput } from "../../../presentation/components/PromptInput";
+export type { PromptInputProps as TextToImagePromptInputProps } from "../../../presentation/components/PromptInput";
 
-export { ExamplePrompts as TextToImageExamplePrompts } from "./ExamplePrompts";
-export type { ExamplePromptsProps as TextToImageExamplePromptsProps } from "./ExamplePrompts";
+export { ExamplePrompts as TextToImageExamplePrompts } from "../../../presentation/components/prompts/ExamplePrompts";
+export type { ExamplePromptsProps as TextToImageExamplePromptsProps } from "../../../presentation/components/prompts/ExamplePrompts";
 
 // Selector Components
-export { NumImagesSelector as TextToImageNumImagesSelector } from "./NumImagesSelector";
-export type { NumImagesSelectorProps as TextToImageNumImagesSelectorProps } from "./NumImagesSelector";
+export { StyleSelector as TextToImageStyleSelector } from "../../../presentation/components/selectors/StyleSelector";
+export type { StyleSelectorProps as TextToImageStyleSelectorProps } from "../../../presentation/components/selectors/StyleSelector";
 
-export { StyleSelector as TextToImageStyleSelector } from "./StyleSelector";
-export type { StyleSelectorProps as TextToImageStyleSelectorProps } from "./StyleSelector";
+export { AspectRatioSelector as TextToImageAspectRatioSelector } from "../../../presentation/components/selectors/AspectRatioSelector";
+export type { AspectRatioSelectorProps as TextToImageAspectRatioSelectorProps } from "../../../presentation/components/selectors/AspectRatioSelector";
 
-export { AspectRatioSelector as TextToImageAspectRatioSelector } from "./AspectRatioSelector";
-export type {
-  AspectRatioSelectorProps as TextToImageAspectRatioSelectorProps,
-  AspectRatioOption as TextToImageAspectRatioOption,
-} from "./AspectRatioSelector";
-
-export { ImageSizeSelector as TextToImageSizeSelector } from "./ImageSizeSelector";
-export type {
-  ImageSizeSelectorProps as TextToImageSizeSelectorProps,
-  ImageSizeOption as TextToImageSizeOption,
-} from "./ImageSizeSelector";
-
-export { OutputFormatSelector as TextToImageOutputFormatSelector } from "./OutputFormatSelector";
-export type {
-  OutputFormatSelectorProps as TextToImageOutputFormatSelectorProps,
-  OutputFormatOption as TextToImageOutputFormatOption,
-} from "./OutputFormatSelector";
+export { GridSelector as TextToImageSizeSelector } from "../../../presentation/components/selectors/GridSelector";
+export { GridSelector as TextToImageOutputFormatSelector } from "../../../presentation/components/selectors/GridSelector";
+export { GridSelector as TextToImageNumImagesSelector } from "../../../presentation/components/selectors/GridSelector";
 
 // Action Components
-export { TextToImageGenerateButton } from "./TextToImageGenerateButton";
-export type { TextToImageGenerateButtonProps } from "./TextToImageGenerateButton";
+export { GenerateButton as TextToImageGenerateButton } from "../../../presentation/components/buttons/GenerateButton";
+export type { GenerateButtonProps as TextToImageGenerateButtonProps } from "../../../presentation/components/buttons/GenerateButton";
 
 // Sheet Components
-export { SettingsSheet as TextToImageSettingsSheet } from "./SettingsSheet";
-export type { SettingsSheetProps as TextToImageSettingsSheetProps } from "./SettingsSheet";
+export { SettingsSheet as TextToImageSettingsSheet } from "../../../presentation/components/modals/SettingsSheet";
+export type { SettingsSheetProps as TextToImageSettingsSheetProps } from "../../../presentation/components/modals/SettingsSheet";

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

@@ -1,7 +1,7 @@
-export { TextToVoiceTextInput } from "./TextToVoiceTextInput";
-export { TextToVoiceOptionalInput } from "./TextToVoiceOptionalInput";
-export { TextToVoiceExamplePrompts } from "./TextToVoiceExamplePrompts";
-export { TextToVoiceGenerateButton } from "./TextToVoiceGenerateButton";
+export { PromptInput as TextToVoiceTextInput } from "../../../presentation/components/PromptInput";
+export { PromptInput as TextToVoiceOptionalInput } from "../../../presentation/components/PromptInput";
+export { ExamplePrompts as TextToVoiceExamplePrompts } from "../../../presentation/components/prompts/ExamplePrompts";
+export { GenerateButton as TextToVoiceGenerateButton } from "../../../presentation/components/buttons/GenerateButton";
+export { ErrorDisplay as TextToVoiceErrorMessage } from "../../../presentation/components/display/ErrorDisplay";
 export { TextToVoiceAudioPlayer } from "./TextToVoiceAudioPlayer";
-export { TextToVoiceErrorMessage } from "./TextToVoiceErrorMessage";
 // TextToVoiceHeader removed in favor of common AIGenerationHero

package/src/index.ts

@@ -295,6 +295,8 @@ export {
 
   // Photo Upload
   PhotoUploadCard,
+  // Modals
+  SettingsSheet,
   // Selectors
   StyleSelector,
   AspectRatioSelector,
@@ -351,6 +353,8 @@ export type {
   // Photo Upload
   PhotoUploadCardProps,
   PhotoUploadCardConfig,
+  // Modals
+  SettingsSheetProps,
   // Selectors
   StyleSelectorProps,
   AspectRatioSelectorProps,

package/src/presentation/components/PromptInput.tsx

@@ -18,7 +18,11 @@ export interface PromptInputProps {
   readonly placeholder?: string;
   readonly minHeight?: number;
   readonly maxLines?: number;
+  readonly maxLength?: number;
   readonly isDisabled?: boolean;
+  readonly showCharacterCount?: boolean;
+  readonly characterCountLabel?: string;
+  readonly style?: any;
 }
 
 export const PromptInput: React.FC<PromptInputProps> = ({
@@ -28,20 +32,34 @@ export const PromptInput: React.FC<PromptInputProps> = ({
   placeholder,
   minHeight = 120,
   maxLines = 6,
+  maxLength = 500,
   isDisabled = false,
+  showCharacterCount = false,
+  characterCountLabel,
+  style,
 }) => {
   const tokens = useAppDesignTokens();
 
   return (
-    <View style={styles.container}>
-      {title && (
-        <AtomicText
-          type="bodyMedium"
-          style={[styles.label, { color: tokens.colors.textPrimary }]}
-        >
-          {title}
-        </AtomicText>
-      )}
+    <View style={[styles.container, style]}>
+      <View style={styles.header}>
+        {title && (
+          <AtomicText
+            type="bodyMedium"
+            style={[styles.label, { color: tokens.colors.textPrimary }]}
+          >
+            {title}
+          </AtomicText>
+        )}
+        {showCharacterCount && (
+          <AtomicText
+            type="labelSmall"
+            style={[styles.count, { color: tokens.colors.textSecondary }]}
+          >
+            {characterCountLabel ?? `${value.length}/${maxLength}`}
+          </AtomicText>
+        )}
+      </View>
       <TextInput
         style={[
           styles.input,
@@ -57,8 +75,8 @@ export const PromptInput: React.FC<PromptInputProps> = ({
         value={value}
         onChangeText={onChangeText}
         multiline
-        numberOfLines={4}
-        maxLength={500}
+        numberOfLines={maxLines}
+        maxLength={maxLength}
         textAlignVertical="top"
         editable={!isDisabled}
       />
@@ -68,14 +86,24 @@ export const PromptInput: React.FC<PromptInputProps> = ({
 
 const styles = StyleSheet.create({
   container: {
-    padding: 16,
+    paddingVertical: 16,
     width: "100%",
   },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 8,
+    paddingHorizontal: 16,
+  },
   label: {
     fontWeight: "600",
-    marginBottom: 8,
+  },
+  count: {
+    opacity: 0.8,
   },
   input: {
+    marginHorizontal: 16,
     borderWidth: 1,
     borderRadius: 12,
     padding: 16,

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

@@ -5,7 +5,7 @@
  */
 
 import React from "react";
-import { View, StyleSheet, TouchableOpacity } from "react-native";
+import { View, StyleSheet, TouchableOpacity, ActivityIndicator } from "react-native";
 import {
   AtomicText,
   useAppDesignTokens,
@@ -23,6 +23,10 @@ export interface GenerateButtonProps {
   readonly gradientColors?: readonly [string, string, ...string[]];
   readonly icon?: string;
   readonly iconSize?: number;
+  readonly costLabel?: string;
+  readonly accessoryRight?: React.ReactNode;
+  readonly onAccessoryRightPress?: () => void;
+  readonly style?: any;
 }
 
 export const GenerateButton: React.FC<GenerateButtonProps> = ({
@@ -35,60 +39,94 @@ export const GenerateButton: React.FC<GenerateButtonProps> = ({
   gradientColors = ["#FF6B9D", "#C74375", "#FF6B9D"],
   icon = "sparkles",
   iconSize = 24,
+  costLabel,
+  accessoryRight,
+  onAccessoryRightPress,
+  style,
 }) => {
   const tokens = useAppDesignTokens();
   const disabled = isDisabled || isProcessing;
   const displayText = isProcessing && processingText ? processingText : text;
+  const finalDisplayText = costLabel ? `${displayText} (${costLabel})` : displayText;
 
   if (variant === "solid") {
     return (
-      <View style={[styles.solidContainer, { marginTop: tokens.spacing.xl }]}>
-        <TouchableOpacity
-          onPress={onPress}
-          disabled={disabled}
-          activeOpacity={0.8}
-          style={[
-            styles.solidButton,
-            {
-              backgroundColor: disabled
-                ? tokens.colors.surfaceSecondary
-                : tokens.colors.primary,
-            },
-          ]}
-        >
-          <View style={styles.buttonContent}>
-            <AtomicIcon name={icon} customSize={20} customColor="#FFFFFF" />
-            <AtomicText type="bodyLarge" style={styles.solidButtonText}>
-              {displayText}
-            </AtomicText>
-          </View>
-        </TouchableOpacity>
+      <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 ? (
+                <ActivityIndicator color="#FFFFFF" size="small" />
+              ) : (
+                <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 }]}>
-      <TouchableOpacity
-        onPress={onPress}
-        disabled={disabled}
-        activeOpacity={0.85}
-        style={styles.buttonWrapper}
-      >
-        <LinearGradient
-          colors={disabled ? ["#9CA3AF", "#6B7280"] : gradientColors}
-          start={[0, 0]}
-          end={[1, 0]}
-          style={[styles.gradientButton, disabled && styles.disabledButton]}
+    <View style={[styles.gradientContainer, { marginTop: tokens.spacing.xl }, style]}>
+      <View style={styles.row}>
+        <TouchableOpacity
+          onPress={onPress}
+          disabled={disabled}
+          activeOpacity={0.85}
+          style={[styles.buttonWrapper, accessoryRight && { flex: 1 }]}
         >
-          <View style={styles.buttonContent}>
-            <AtomicIcon name={icon} customSize={iconSize} customColor="#FFF" />
-            <AtomicText type="bodyLarge" style={styles.gradientButtonText}>
-              {displayText}
-            </AtomicText>
-          </View>
-        </LinearGradient>
-      </TouchableOpacity>
+          <LinearGradient
+            colors={disabled ? ["#9CA3AF", "#6B7280"] : gradientColors}
+            start={[0, 0]}
+            end={[1, 0]}
+            style={[styles.gradientButton, disabled && styles.disabledButton]}
+          >
+            <View style={styles.buttonContent}>
+            {isProcessing ? (
+              <ActivityIndicator color="#FFFFFF" size="small" />
+            ) : (
+              <AtomicIcon name={icon} customSize={iconSize} customColor="#FFF" />
+            )}
+              <AtomicText type="bodyLarge" style={styles.gradientButtonText}>
+                {finalDisplayText}
+              </AtomicText>
+            </View>
+          </LinearGradient>
+        </TouchableOpacity>
+        {accessoryRight && (
+          <TouchableOpacity
+            onPress={onAccessoryRightPress}
+            style={[styles.accessory, { backgroundColor: tokens.colors.surface, height: 56, width: 56 }]}
+          >
+            {accessoryRight}
+          </TouchableOpacity>
+        )}
+      </View>
     </View>
   );
 };
@@ -129,6 +167,19 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     gap: 12,
   },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    width: "100%",
+  },
+  accessory: {
+    width: 60,
+    height: 60,
+    borderRadius: 16,
+    alignItems: "center",
+    justifyContent: "center",
+  },
   gradientButtonText: {
     color: "#FFFFFF",
     fontWeight: "700",

package/src/presentation/components/index.ts

@@ -30,6 +30,16 @@ export type { AIGenerationHeroProps } from "./AIGenerationHero";
 
 export * from "./result";
 export * from "./photo-step";
+export * from "./modals/SettingsSheet";
+export * from "./selectors/AspectRatioSelector";
+export * from "./selectors/DurationSelector";
+export * from "./selectors/GridSelector";
+export * from "./selectors/StyleSelector";
+export * from "./selectors/factories";
+export * from "./selectors/types";
+export * from "./PromptInput";
+export * from "./ExamplePrompts";
+export * from "./ModerationSummary";
 export * from "./image-picker";
 export * from "./buttons";
 export * from "./display";

package/src/{features/text-to-image/presentation/components → presentation/components/modals}/SettingsSheet.tsx

@@ -1,6 +1,7 @@
 /**
- * Settings Sheet Component
- * Modal sheet for advanced image generation settings
+ * SettingsSheet Component
+ * Generic modal bottom sheet for settings or options
+ * Props-driven for 100+ apps compatibility
  */
 
 import React from "react";
@@ -20,11 +21,11 @@ import {
 } from "@umituz/react-native-design-system";
 
 export interface SettingsSheetProps {
-  visible: boolean;
-  onClose: () => void;
-  title: string;
-  doneLabel: string;
-  children: React.ReactNode;
+  readonly visible: boolean;
+  readonly onClose: () => void;
+  readonly title: string;
+  readonly doneLabel: string;
+  readonly children: React.ReactNode;
 }
 
 export const SettingsSheet: React.FC<SettingsSheetProps> = ({
@@ -129,11 +130,12 @@ const styles = StyleSheet.create({
   },
   doneButton: {
     paddingHorizontal: 0,
+    backgroundColor: "transparent",
   },
   doneText: {
     fontWeight: "600",
   },
   content: {
-    padding: 20,
+    paddingHorizontal: 4,
   },
 });

package/src/presentation/components/selectors/AspectRatioSelector.tsx

@@ -14,8 +14,8 @@ import type { AspectRatioOption } from "./types";
 
 export interface AspectRatioSelectorProps {
   ratios: AspectRatioOption[];
-  selectedRatio: "16:9" | "9:16" | "1:1";
-  onRatioSelect: (ratio: "16:9" | "9:16" | "1:1") => void;
+  selectedRatio: string;
+  onRatioSelect: (ratio: string) => void;
   title: string;
 }
 

package/src/presentation/components/selectors/GridSelector.tsx

@@ -19,6 +19,7 @@ export interface GridSelectorProps<T> {
   readonly title?: string;
   readonly columns?: number;
   readonly disabled?: boolean;
+  readonly style?: any;
 }
 
 export function GridSelector<T>({
@@ -26,12 +27,14 @@ export function GridSelector<T>({
   selectedValue,
   onSelect,
   title,
+  columns = 2,
   disabled = false,
+  style,
 }: GridSelectorProps<T>): JSX.Element {
   const tokens = useAppDesignTokens();
 
   return (
-    <View style={styles.section}>
+    <View style={[styles.section, style]}>
       {title && (
         <AtomicText
           type="bodyMedium"
@@ -53,6 +56,7 @@ export function GridSelector<T>({
               style={[
                 styles.card,
                 {
+                  width: `${100 / columns - 4}%`,
                   backgroundColor: isSelected
                     ? tokens.colors.primary + "15"
                     : tokens.colors.surface,
@@ -111,8 +115,6 @@ const styles = StyleSheet.create({
     gap: 12,
   },
   card: {
-    flex: 1,
-    minWidth: "45%",
     padding: 12,
     borderRadius: 12,
     borderWidth: 2,

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

@@ -1,95 +0,0 @@
-/**
- * Generate Button Component
- * Generic generate button with loading state
- */
-
-import React from "react";
-import { View, TouchableOpacity, ActivityIndicator, StyleSheet } from "react-native";
-import {
-  AtomicText,
-  AtomicIcon,
-  useAppDesignTokens,
-} from "@umituz/react-native-design-system";
-
-export interface GenerateButtonProps {
-  onPress: () => void;
-  isGenerating: boolean;
-  isDisabled?: boolean;
-  buttonText: string;
-  generatingText: string;
-}
-
-export const GenerateButton: React.FC<GenerateButtonProps> = ({
-  onPress,
-  isGenerating,
-  isDisabled = false,
-  buttonText,
-  generatingText,
-}) => {
-  const tokens = useAppDesignTokens();
-  const disabled = isGenerating || isDisabled;
-
-  return (
-    <View style={componentStyles.container}>
-      <TouchableOpacity
-        style={[
-          componentStyles.button,
-          {
-            backgroundColor: disabled
-              ? tokens.colors.primary + "60"
-              : tokens.colors.primary,
-          },
-        ]}
-        onPress={onPress}
-        disabled={disabled}
-        activeOpacity={0.8}
-      >
-        {isGenerating ? (
-          <>
-            <ActivityIndicator
-              size="small"
-              color={tokens.colors.textInverse}
-              style={componentStyles.loader}
-            />
-            <AtomicText
-              type="bodyMedium"
-              style={[componentStyles.text, { color: tokens.colors.textInverse }]}
-            >
-              {generatingText}
-            </AtomicText>
-          </>
-        ) : (
-          <>
-            <AtomicIcon name="videocam-outline" size="md" color="onSurface" />
-            <AtomicText
-              type="bodyMedium"
-              style={[componentStyles.text, { color: tokens.colors.textInverse }]}
-            >
-              {buttonText}
-            </AtomicText>
-          </>
-        )}
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-const componentStyles = StyleSheet.create({
-  container: {
-    padding: 16,
-  },
-  button: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    paddingVertical: 16,
-    borderRadius: 16,
-  },
-  loader: {
-    marginRight: 8,
-  },
-  text: {
-    fontWeight: "600",
-    marginLeft: 8,
-  },
-});