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

package/package.json

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

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

@@ -7,8 +7,8 @@
 export { TextToImagePromptInput } from "./TextToImagePromptInput";
 export type { TextToImagePromptInputProps } from "./TextToImagePromptInput";
 
-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";

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

@@ -1,6 +1,6 @@
 export { TextToVoiceTextInput } from "./TextToVoiceTextInput";
 export { TextToVoiceOptionalInput } from "./TextToVoiceOptionalInput";
-export { TextToVoiceExamplePrompts } from "./TextToVoiceExamplePrompts";
+export { ExamplePrompts as TextToVoiceExamplePrompts } from "../../../presentation/components/prompts/ExamplePrompts";
 export { TextToVoiceGenerateButton } from "./TextToVoiceGenerateButton";
 export { TextToVoiceAudioPlayer } from "./TextToVoiceAudioPlayer";
 export { TextToVoiceErrorMessage } from "./TextToVoiceErrorMessage";

package/src/index.ts

@@ -282,6 +282,8 @@ export {
   AIGenerationProgressInline,
   PromptInput,
   AIGenerationHero,
+  ExamplePrompts,
+  ModerationSummary,
   // Buttons
   GenerateButton,
   // Display
@@ -331,6 +333,8 @@ export type {
   AIGenerationProgressInlineProps,
   PromptInputProps,
   AIGenerationHeroProps,
+  ExamplePromptsProps,
+  ModerationSummaryProps,
   StylePresetsGridProps,
   StylePreset,
   // Buttons

package/src/presentation/components/index.ts

@@ -36,3 +36,5 @@ export * from "./display";
 export * from "./headers";
 export * from "./PhotoUploadCard";
 export * from "./selectors";
+export * from "./prompts/ExamplePrompts";
+export * from "./moderation/ModerationSummary";

package/src/presentation/components/moderation/ModerationSummary.tsx

@@ -0,0 +1,104 @@
+/**
+ * ModerationSummary Component
+ * Displays content moderation results including age rating and warnings
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+
+export interface ModerationSummaryProps {
+  readonly ageRating?: string;
+  readonly contentWarnings: readonly string[];
+  readonly title?: string;
+  readonly style?: any;
+}
+
+export const ModerationSummary: React.FC<ModerationSummaryProps> = ({
+  ageRating,
+  contentWarnings,
+  title = "Safety Check",
+  style,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  if (!ageRating && (!contentWarnings || contentWarnings.length === 0)) {
+    return null;
+  }
+
+  return (
+    <View style={[styles.container, style]}>
+      {title && (
+        <AtomicText
+          type="bodyMedium"
+          style={[styles.label, { color: tokens.colors.textPrimary }]}
+        >
+          {title}
+        </AtomicText>
+      )}
+      {ageRating && (
+        <View
+          style={[
+            styles.badge,
+            {
+              backgroundColor: tokens.colors.surface,
+              borderColor: tokens.colors.borderLight,
+            },
+          ]}
+        >
+          <AtomicText
+            type="bodySmall"
+            style={[styles.badgeText, { color: tokens.colors.textPrimary }]}
+          >
+            Age Rating: {ageRating}
+          </AtomicText>
+        </View>
+      )}
+      {contentWarnings && contentWarnings.length > 0 && (
+        <View style={styles.warningsContainer}>
+          {contentWarnings.map((warning, index) => (
+            <AtomicText
+              key={`${warning}-${index}`}
+              type="labelSmall"
+              style={[styles.warningText, { color: tokens.colors.textSecondary }]}
+            >
+              • {warning}
+            </AtomicText>
+          ))}
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+    width: "100%",
+  },
+  label: {
+    fontWeight: "600",
+    marginBottom: 12,
+  },
+  badge: {
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderRadius: 12,
+    borderWidth: 1,
+    alignSelf: "flex-start",
+    marginBottom: 8,
+  },
+  badgeText: {
+    fontWeight: "600",
+  },
+  warningsContainer: {
+    marginTop: 4,
+  },
+  warningText: {
+    marginBottom: 4,
+    lineHeight: 16,
+  },
+});

package/src/{features/text-to-image/presentation/components → presentation/components/prompts}/ExamplePrompts.tsx

@@ -1,6 +1,7 @@
 /**
- * Example Prompts Component
+ * ExamplePrompts Component
  * Horizontal scrollable list of example prompts
+ * Props-driven for 100+ apps compatibility
  */
 
 import React from "react";
@@ -11,17 +12,19 @@ import {
 } from "@umituz/react-native-design-system";
 
 export interface ExamplePromptsProps {
-  prompts: string[];
-  onSelectPrompt: (prompt: string) => void;
-  label: string;
-  cardWidth?: number;
+  readonly prompts: readonly string[];
+  readonly onSelectPrompt: (prompt: string) => void;
+  readonly title?: string;
+  readonly cardWidth?: number;
+  readonly style?: any;
 }
 
 export const ExamplePrompts: React.FC<ExamplePromptsProps> = ({
   prompts,
   onSelectPrompt,
-  label,
+  title = "✨ Example Prompts",
   cardWidth = 180,
+  style,
 }) => {
   const tokens = useAppDesignTokens();
 
@@ -30,17 +33,20 @@ export const ExamplePrompts: React.FC<ExamplePromptsProps> = ({
   }
 
   return (
-    <View style={styles.container}>
-      <AtomicText
-        type="bodyMedium"
-        style={[styles.label, { color: tokens.colors.textPrimary }]}
-      >
-        {label}
-      </AtomicText>
+    <View style={[styles.container, style]}>
+      {title && (
+        <AtomicText
+          type="bodyMedium"
+          style={[styles.label, { color: tokens.colors.textPrimary }]}
+        >
+          {title}
+        </AtomicText>
+      )}
       <ScrollView
         horizontal
         showsHorizontalScrollIndicator={false}
         contentContainerStyle={styles.scrollContent}
+        style={styles.scrollView}
       >
         {prompts.map((prompt, index) => (
           <TouchableOpacity
@@ -57,7 +63,7 @@ export const ExamplePrompts: React.FC<ExamplePromptsProps> = ({
           >
             <AtomicText
               type="bodySmall"
-              style={{ color: tokens.colors.textPrimary }}
+              style={[styles.promptText, { color: tokens.colors.textPrimary }]}
               numberOfLines={2}
             >
               {prompt}
@@ -71,18 +77,29 @@ export const ExamplePrompts: React.FC<ExamplePromptsProps> = ({
 
 const styles = StyleSheet.create({
   container: {
-    marginBottom: 24,
+    paddingVertical: 16,
+    width: "100%",
   },
   label: {
     fontWeight: "600",
     marginBottom: 12,
+    marginHorizontal: 16,
+  },
+  scrollView: {
+    marginHorizontal: 0,
   },
   scrollContent: {
-    paddingRight: 16,
+    paddingHorizontal: 16,
+    paddingRight: 32,
   },
   card: {
-    padding: 12,
-    borderRadius: 8,
+    padding: 16,
+    borderRadius: 12,
     marginRight: 12,
+    minHeight: 60,
+    justifyContent: "center",
+  },
+  promptText: {
+    lineHeight: 18,
   },
 });

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

@@ -1,77 +0,0 @@
-/**
- * TextToVoiceExamplePrompts Component
- * Horizontal scrolling example prompts
- */
-
-import React from "react";
-import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
-import { useLocalization } from "@umituz/react-native-localization";
-import {
-  AtomicText,
-  useAppDesignTokens,
-} from "@umituz/react-native-design-system";
-import type { TextToVoiceExamplePromptsProps } from "../../domain/types";
-
-export const TextToVoiceExamplePrompts: React.FC<
-  TextToVoiceExamplePromptsProps
-> = ({ prompts, onSelectPrompt, labelKey, style }) => {
-  const { t } = useLocalization();
-  const tokens = useAppDesignTokens();
-
-  if (prompts.length === 0) {
-    return null;
-  }
-
-  return (
-    <View style={[styles.section, style]}>
-      <AtomicText
-        type="bodyMedium"
-        style={[styles.label, { color: tokens.colors.textPrimary }]}
-      >
-        {t(labelKey)}
-      </AtomicText>
-      <ScrollView
-        horizontal
-        showsHorizontalScrollIndicator={false}
-        style={styles.scrollView}
-      >
-        {prompts.map((prompt, index) => (
-          <TouchableOpacity
-            key={index}
-            style={[styles.promptCard, { backgroundColor: tokens.colors.surface }]}
-            onPress={() => onSelectPrompt(prompt)}
-          >
-            <AtomicText
-              type="bodySmall"
-              style={{ color: tokens.colors.textPrimary }}
-              numberOfLines={2}
-            >
-              {prompt}
-            </AtomicText>
-          </TouchableOpacity>
-        ))}
-      </ScrollView>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  section: {
-    marginBottom: 24,
-  },
-  label: {
-    fontWeight: "600",
-    marginBottom: 12,
-  },
-  scrollView: {
-    marginHorizontal: -16,
-    paddingHorizontal: 16,
-  },
-  promptCard: {
-    padding: 12,
-    borderRadius: 8,
-    marginRight: 12,
-    minWidth: 150,
-    maxWidth: 200,
-  },
-});