@umituz/react-native-ai-generation-content 1.17.28 → 1.17.29

package/package.json

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

package/src/index.ts

@@ -275,6 +275,10 @@ export {
   FeatureHeader,
   // Photo Upload
   PhotoUploadCard,
+  // Selectors
+  StyleSelector,
+  AspectRatioSelector,
+  DurationSelector,
 } from "./presentation/components";
 
 export type {
@@ -314,6 +318,13 @@ export type {
   // Photo Upload
   PhotoUploadCardProps,
   PhotoUploadCardConfig,
+  // Selectors
+  StyleSelectorProps,
+  AspectRatioSelectorProps,
+  DurationSelectorProps,
+  StyleOption,
+  AspectRatioOption,
+  DurationValue,
 } from "./presentation/components";
 
 // =============================================================================

package/src/presentation/components/index.ts

@@ -28,3 +28,4 @@ export * from "./buttons";
 export * from "./display";
 export * from "./headers";
 export * from "./PhotoUploadCard";
+export * from "./selectors";

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

@@ -0,0 +1,105 @@
+/**
+ * Aspect Ratio Selector Component
+ * Generic, props-driven aspect ratio selection
+ */
+
+import React from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+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;
+  title: string;
+}
+
+export const AspectRatioSelector: React.FC<AspectRatioSelectorProps> = ({
+  ratios,
+  selectedRatio,
+  onRatioSelect,
+  title,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={componentStyles.section}>
+      <AtomicText
+        type="bodyMedium"
+        style={{
+          color: tokens.colors.textPrimary,
+          fontWeight: "600",
+          marginBottom: 12,
+        }}
+      >
+        {title}
+      </AtomicText>
+      <View style={componentStyles.aspectRatioGrid}>
+        {ratios.map((ratio) => (
+          <TouchableOpacity
+            key={ratio.id}
+            style={[
+              componentStyles.aspectRatioCard,
+              {
+                backgroundColor:
+                  selectedRatio === ratio.id
+                    ? tokens.colors.primary + "20"
+                    : tokens.colors.surface,
+                borderColor:
+                  selectedRatio === ratio.id
+                    ? tokens.colors.primary
+                    : tokens.colors.borderLight,
+              },
+            ]}
+            onPress={() => onRatioSelect(ratio.id)}
+          >
+            <AtomicIcon
+              name={ratio.icon as never}
+              size="lg"
+              color={selectedRatio === ratio.id ? "primary" : "secondary"}
+            />
+            <AtomicText
+              type="bodySmall"
+              style={{
+                color: tokens.colors.textPrimary,
+                fontWeight: selectedRatio === ratio.id ? "600" : "400",
+                marginTop: 8,
+              }}
+            >
+              {ratio.name}
+            </AtomicText>
+            <AtomicText
+              type="labelSmall"
+              style={{ color: tokens.colors.textSecondary, marginTop: 2 }}
+            >
+              {ratio.description}
+            </AtomicText>
+          </TouchableOpacity>
+        ))}
+      </View>
+    </View>
+  );
+};
+
+const componentStyles = StyleSheet.create({
+  section: {
+    padding: 16,
+    marginBottom: 8,
+  },
+  aspectRatioGrid: {
+    flexDirection: "row",
+    gap: 12,
+  },
+  aspectRatioCard: {
+    flex: 1,
+    padding: 16,
+    borderRadius: 12,
+    borderWidth: 2,
+    alignItems: "center",
+  },
+});

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

@@ -0,0 +1,98 @@
+/**
+ * Duration Selector Component
+ * Generic, props-driven duration selection for video/audio generation
+ */
+
+import React from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { DurationValue } from "./types";
+
+export interface DurationSelectorProps<T extends DurationValue> {
+  duration: T;
+  durationOptions: readonly T[];
+  onDurationSelect: (duration: T) => void;
+  title: string;
+  formatLabel?: (duration: T) => string;
+}
+
+export function DurationSelector<T extends DurationValue>({
+  duration,
+  durationOptions,
+  onDurationSelect,
+  title,
+  formatLabel = (d) => `${d}s`,
+}: DurationSelectorProps<T>): React.ReactElement {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={componentStyles.section}>
+      <AtomicText
+        type="bodyMedium"
+        style={{
+          color: tokens.colors.textPrimary,
+          fontWeight: "600",
+          marginBottom: 12,
+        }}
+      >
+        {title}
+      </AtomicText>
+      <View style={componentStyles.durationGrid}>
+        {durationOptions.map((sec) => (
+          <TouchableOpacity
+            key={sec}
+            style={[
+              componentStyles.durationButton,
+              {
+                backgroundColor:
+                  duration === sec
+                    ? tokens.colors.primary
+                    : tokens.colors.surface,
+                borderColor:
+                  duration === sec
+                    ? tokens.colors.primary
+                    : tokens.colors.borderLight,
+              },
+            ]}
+            onPress={() => onDurationSelect(sec)}
+          >
+            <AtomicText
+              type="bodyLarge"
+              style={{
+                color:
+                  duration === sec
+                    ? tokens.colors.textInverse
+                    : tokens.colors.textPrimary,
+                fontWeight: duration === sec ? "700" : "400",
+              }}
+            >
+              {formatLabel(sec)}
+            </AtomicText>
+          </TouchableOpacity>
+        ))}
+      </View>
+    </View>
+  );
+}
+
+const componentStyles = StyleSheet.create({
+  section: {
+    padding: 16,
+    marginBottom: 8,
+  },
+  durationGrid: {
+    flexDirection: "row",
+    gap: 12,
+  },
+  durationButton: {
+    flex: 1,
+    paddingVertical: 20,
+    borderRadius: 12,
+    borderWidth: 2,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

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

@@ -0,0 +1,131 @@
+/**
+ * Style Selector Component
+ * Generic, props-driven style selection for AI generation
+ */
+
+import React from "react";
+import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { StyleOption } from "./types";
+
+export interface StyleSelectorProps {
+  styles: StyleOption[];
+  selectedStyle: string;
+  onStyleSelect: (styleId: string) => void;
+  title: string;
+}
+
+export const StyleSelector: React.FC<StyleSelectorProps> = ({
+  styles,
+  selectedStyle,
+  onStyleSelect,
+  title,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={componentStyles.section}>
+      <AtomicText
+        type="bodyMedium"
+        style={{
+          color: tokens.colors.textPrimary,
+          fontWeight: "600",
+          marginBottom: 12,
+        }}
+      >
+        {title}
+      </AtomicText>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        style={componentStyles.stylesScroll}
+      >
+        {styles.map((style) => {
+          const isSelected = selectedStyle === style.id;
+
+          return (
+            <TouchableOpacity
+              key={style.id}
+              style={[
+                componentStyles.styleCard,
+                {
+                  backgroundColor: isSelected
+                    ? tokens.colors.primary
+                    : tokens.colors.surface,
+                  borderColor: isSelected
+                    ? tokens.colors.primary
+                    : tokens.colors.borderLight,
+                },
+              ]}
+              onPress={() => onStyleSelect(style.id)}
+            >
+              {style.thumbnail ? (
+                <AtomicText type="headlineLarge" style={{ marginBottom: 8 }}>
+                  {style.thumbnail}
+                </AtomicText>
+              ) : style.icon ? (
+                <AtomicIcon
+                  name={style.icon as never}
+                  size="lg"
+                  color={isSelected ? "primary" : "secondary"}
+                />
+              ) : null}
+              <AtomicText
+                type="bodySmall"
+                style={{
+                  color: isSelected
+                    ? tokens.colors.textInverse
+                    : tokens.colors.textPrimary,
+                  fontWeight: isSelected ? "600" : "400",
+                  textAlign: "center",
+                }}
+              >
+                {style.name}
+              </AtomicText>
+              {style.description && (
+                <AtomicText
+                  type="labelSmall"
+                  style={{
+                    color: isSelected
+                      ? tokens.colors.textInverse
+                      : tokens.colors.textSecondary,
+                    opacity: isSelected ? 0.9 : 0.7,
+                    textAlign: "center",
+                    marginTop: 4,
+                  }}
+                  numberOfLines={2}
+                >
+                  {style.description}
+                </AtomicText>
+              )}
+            </TouchableOpacity>
+          );
+        })}
+      </ScrollView>
+    </View>
+  );
+};
+
+const componentStyles = StyleSheet.create({
+  section: {
+    padding: 16,
+    marginBottom: 8,
+  },
+  stylesScroll: {
+    marginHorizontal: -16,
+    paddingHorizontal: 16,
+  },
+  styleCard: {
+    width: 120,
+    padding: 16,
+    borderRadius: 16,
+    borderWidth: 2,
+    marginRight: 12,
+    alignItems: "center",
+    minHeight: 140,
+  },
+});

package/src/presentation/components/selectors/index.ts

@@ -0,0 +1,18 @@
+/**
+ * Selector Components
+ * Generic, props-driven selection UI components
+ */
+
+export { StyleSelector } from "./StyleSelector";
+export { AspectRatioSelector } from "./AspectRatioSelector";
+export { DurationSelector } from "./DurationSelector";
+
+export type { StyleSelectorProps } from "./StyleSelector";
+export type { AspectRatioSelectorProps } from "./AspectRatioSelector";
+export type { DurationSelectorProps } from "./DurationSelector";
+
+export type {
+  StyleOption,
+  AspectRatioOption,
+  DurationValue,
+} from "./types";

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

@@ -0,0 +1,32 @@
+/**
+ * Selector Component Types
+ * Generic types for selector UI components
+ */
+
+/**
+ * Style option for StyleSelector
+ * All fields are required - app provides translated values
+ */
+export interface StyleOption {
+  id: string;
+  name: string;
+  description?: string;
+  thumbnail?: string;
+  icon?: string;
+}
+
+/**
+ * Aspect ratio option for AspectRatioSelector
+ * App provides translated name and description
+ */
+export interface AspectRatioOption {
+  id: "16:9" | "9:16" | "1:1";
+  name: string;
+  icon: string;
+  description: string;
+}
+
+/**
+ * Duration value type (seconds)
+ */
+export type DurationValue = number;