@umituz/react-native-ai-generation-content 1.17.35 → 1.17.37

package/package.json

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

package/src/index.ts

@@ -278,6 +278,10 @@ export {
   // Image Picker
   ImagePickerBox,
   DualImagePicker,
+  // New Generic Sections
+  AIGenerationProgressInline,
+  PromptInput,
+  HeroSection,
   // Buttons
   GenerateButton,
   // Display
@@ -319,6 +323,9 @@ export type {
   // Image Picker
   ImagePickerBoxProps,
   DualImagePickerProps,
+  AIGenerationProgressInlineProps,
+  PromptInputProps,
+  HeroSectionProps,
   // Buttons
   GenerateButtonProps,
   // Display
@@ -337,6 +344,20 @@ export type {
   StyleOption,
   AspectRatioOption,
   DurationValue,
+  // Selector Factories
+  AspectRatioTranslations,
+  DurationOption,
+  StyleTranslations,
+} from "./presentation/components";
+
+// Selector Factories
+export {
+  createAspectRatioOptions,
+  createDurationOptions,
+  createStyleOptions,
+  createStyleOptionsFromConfig,
+  ASPECT_RATIO_IDS,
+  COMMON_DURATIONS,
 } from "./presentation/components";
 
 // =============================================================================

package/src/presentation/components/AIGenerationProgressInline.tsx

@@ -0,0 +1,105 @@
+/**
+ * AIGenerationProgressInline Component
+ * Generic inline generation progress display
+ * Props-driven for 100+ apps compatibility
+ */
+
+import React from "react";
+import { View, ActivityIndicator, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+  AtomicProgress,
+} from "@umituz/react-native-design-system";
+
+export interface AIGenerationProgressInlineProps {
+  readonly progress: number;
+  readonly title?: string;
+  readonly message?: string;
+  readonly hint?: string;
+  readonly backgroundColor?: string;
+  readonly accentColor?: string;
+}
+
+export const AIGenerationProgressInline: React.FC<
+  AIGenerationProgressInlineProps
+> = ({
+  progress,
+  title,
+  message,
+  hint,
+  backgroundColor,
+  accentColor,
+}) => {
+  const tokens = useAppDesignTokens();
+  const primaryColor = accentColor || tokens.colors.primary;
+  const bgColor = backgroundColor || tokens.colors.surface;
+
+  const clampedProgress = Math.max(0, Math.min(100, progress));
+
+  return (
+    <View style={[styles.container, { backgroundColor: bgColor }]}>
+      <ActivityIndicator size="large" color={primaryColor} />
+      
+      {title && (
+        <AtomicText
+          type="bodyMedium"
+          style={[styles.title, { color: tokens.colors.textPrimary }]}
+        >
+          {title}
+        </AtomicText>
+      )}
+      
+      {message && (
+        <AtomicText
+          type="bodySmall"
+          style={[styles.message, { color: tokens.colors.textSecondary }]}
+        >
+          {message}
+        </AtomicText>
+      )}
+      
+      <View style={styles.progressBarWrapper}>
+        <AtomicProgress
+          value={clampedProgress}
+          height={8}
+          color={primaryColor}
+          backgroundColor={tokens.colors.surfaceVariant}
+          shape="rounded"
+          showPercentage={false}
+        />
+      </View>
+      
+      <AtomicText
+        type="labelSmall"
+        style={[styles.progressLabel, { color: tokens.colors.textSecondary }]}
+      >
+        {clampedProgress}%{hint ? ` • ${hint}` : ""}
+      </AtomicText>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    margin: 16,
+    padding: 24,
+    borderRadius: 16,
+    alignItems: "center",
+  },
+  title: {
+    marginTop: 16,
+    fontWeight: "600",
+  },
+  message: {
+    marginTop: 8,
+    textAlign: "center",
+  },
+  progressBarWrapper: {
+    width: "100%",
+    marginTop: 16,
+  },
+  progressLabel: {
+    marginTop: 8,
+  },
+});

package/src/presentation/components/HeroSection.tsx

@@ -0,0 +1,89 @@
+/**
+ * HeroSection Component
+ * Generic hero section with gradient background and optional icon
+ * Props-driven for 100+ apps compatibility
+ */
+
+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 {
+  readonly title: string;
+  readonly subtitle?: string;
+  readonly iconName?: string;
+  readonly gradientColors?: readonly [string, string, ...string[]];
+}
+
+export const HeroSection: React.FC<HeroSectionProps> = ({
+  title,
+  subtitle,
+  iconName,
+  gradientColors = ["#00FF88", "#10B981"],
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.container}>
+      <LinearGradient
+        colors={gradientColors}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 1, y: 1 }}
+        style={styles.gradient}
+      >
+        {iconName && (
+          <View style={styles.iconWrapper}>
+            <AtomicIcon name={iconName} size="xl" color="onSurface" />
+          </View>
+        )}
+        <AtomicText type="headlineSmall" style={styles.title}>
+          {title}
+        </AtomicText>
+        {subtitle && (
+          <AtomicText type="bodyMedium" style={styles.subtitle}>
+            {subtitle}
+          </AtomicText>
+        )}
+      </LinearGradient>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginHorizontal: 16,
+    marginBottom: 24,
+    borderRadius: 20,
+    overflow: "hidden",
+  },
+  gradient: {
+    padding: 32,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  iconWrapper: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    backgroundColor: "rgba(255, 255, 255, 0.2)",
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: 16,
+  },
+  title: {
+    color: "#FFFFFF",
+    textAlign: "center",
+    fontWeight: "700",
+  },
+  subtitle: {
+    color: "#FFFFFF",
+    textAlign: "center",
+    marginTop: 8,
+    opacity: 0.9,
+  },
+});

package/src/presentation/components/PromptInput.tsx

@@ -0,0 +1,84 @@
+/**
+ * PromptInput Component
+ * Generic AI prompt input with customizable title and placeholder
+ * Props-driven for 100+ apps compatibility
+ */
+
+import React from "react";
+import { View, TextInput, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+
+export interface PromptInputProps {
+  readonly value: string;
+  readonly onChangeText: (text: string) => void;
+  readonly title?: string;
+  readonly placeholder?: string;
+  readonly minHeight?: number;
+  readonly maxLines?: number;
+  readonly isDisabled?: boolean;
+}
+
+export const PromptInput: React.FC<PromptInputProps> = ({
+  value,
+  onChangeText,
+  title,
+  placeholder,
+  minHeight = 120,
+  maxLines = 6,
+  isDisabled = false,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.container}>
+      {title && (
+        <AtomicText
+          type="bodyMedium"
+          style={[styles.label, { color: tokens.colors.textPrimary }]}
+        >
+          {title}
+        </AtomicText>
+      )}
+      <TextInput
+        style={[
+          styles.input,
+          {
+            backgroundColor: tokens.colors.surface,
+            color: tokens.colors.textPrimary,
+            borderColor: tokens.colors.borderLight,
+            minHeight,
+          },
+        ]}
+        placeholder={placeholder}
+        placeholderTextColor={tokens.colors.textSecondary}
+        value={value}
+        onChangeText={onChangeText}
+        multiline
+        numberOfLines={4}
+        maxLength={500}
+        textAlignVertical="top"
+        editable={!isDisabled}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+    width: "100%",
+  },
+  label: {
+    fontWeight: "600",
+    marginBottom: 8,
+  },
+  input: {
+    borderWidth: 1,
+    borderRadius: 12,
+    padding: 16,
+    fontSize: 16,
+  },
+});

package/src/presentation/components/index.ts

@@ -4,6 +4,9 @@ export { GenerationProgressBar } from "./GenerationProgressBar";
 export { PendingJobCard } from "./PendingJobCard";
 export { PendingJobProgressBar } from "./PendingJobProgressBar";
 export { PendingJobCardActions } from "./PendingJobCardActions";
+export { AIGenerationProgressInline } from "./AIGenerationProgressInline";
+export { PromptInput } from "./PromptInput";
+export { HeroSection } from "./HeroSection";
 
 export type {
   GenerationProgressModalProps,
@@ -20,6 +23,9 @@ export type {
 
 export type { PendingJobProgressBarProps } from "./PendingJobProgressBar";
 export type { PendingJobCardActionsProps } from "./PendingJobCardActions";
+export type { AIGenerationProgressInlineProps } from "./AIGenerationProgressInline";
+export type { PromptInputProps } from "./PromptInput";
+export type { HeroSectionProps } from "./HeroSection";
 
 export * from "./result";
 export * from "./photo-step";