@umituz/react-native-ai-generation-content 1.17.42 → 1.17.43

package/package.json

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

package/src/index.ts

@@ -289,13 +289,17 @@ export {
   ErrorDisplay,
   // Headers
   FeatureHeader,
+  AIGenScreenHeader,
+
   // Photo Upload
   PhotoUploadCard,
   // Selectors
   StyleSelector,
   AspectRatioSelector,
   DurationSelector,
+  GridSelector,
   StylePresetsGrid,
+
 } from "./presentation/components";
 
 export type {
@@ -337,6 +341,9 @@ export type {
   ErrorDisplayProps,
   // Headers
   FeatureHeaderProps,
+  AIGenScreenHeaderProps,
+  NavigationButtonType,
+
   // Photo Upload
   PhotoUploadCardProps,
   PhotoUploadCardConfig,
@@ -344,6 +351,9 @@ export type {
   StyleSelectorProps,
   AspectRatioSelectorProps,
   DurationSelectorProps,
+  GridSelectorProps,
+  GridSelectorOption,
+
   StyleOption,
   AspectRatioOption,
   DurationValue,

package/src/presentation/components/headers/AIGenScreenHeader.tsx

@@ -0,0 +1,127 @@
+import React, { ReactNode } from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+
+export type NavigationButtonType = "back" | "close";
+
+export interface AIGenScreenHeaderProps {
+  readonly title: string;
+  readonly description?: string;
+  readonly navigationType?: NavigationButtonType;
+  readonly onNavigationPress: () => void;
+  readonly headerContent?: ReactNode;
+  readonly rightContent?: ReactNode;
+  readonly titleType?: "headlineLarge" | "titleLarge";
+  readonly showDescription?: boolean;
+}
+
+export const AIGenScreenHeader: React.FC<AIGenScreenHeaderProps> = ({
+  title,
+  description,
+  navigationType = "back",
+  onNavigationPress,
+  headerContent,
+  rightContent,
+  titleType = "titleLarge",
+  showDescription = !!description,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const isCloseButton = navigationType === "close";
+  const buttonStyle = isCloseButton
+    ? [
+        styles.navigationButton,
+        styles.closeButton,
+        {
+          backgroundColor: tokens.colors.surface,
+          borderColor: tokens.colors.borderLight,
+        },
+      ]
+    : [styles.navigationButton, styles.backButton];
+
+  const iconName = isCloseButton ? "close-circle" : "chevron-back";
+  const iconColor = isCloseButton ? "secondary" : "primary";
+
+  return (
+    <View style={styles.header}>
+      <View style={styles.headerTop}>
+        <View style={styles.leftContainer}>
+          <TouchableOpacity
+            onPress={onNavigationPress}
+            style={buttonStyle}
+            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+          >
+            <AtomicIcon name={iconName} size="md" color={iconColor} />
+          </TouchableOpacity>
+          <AtomicText
+            type={titleType}
+            style={{
+              color: tokens.colors.textPrimary,
+              fontWeight: "700",
+              marginLeft: navigationType === "back" ? 8 : 0,
+            }}
+          >
+            {title}
+          </AtomicText>
+        </View>
+        <View style={styles.headerActions}>{rightContent}</View>
+      </View>
+      {showDescription && description && (
+        <AtomicText
+          type="bodyMedium"
+          style={[
+            styles.description,
+            { color: tokens.colors.textSecondary, marginTop: 8 },
+          ]}
+        >
+          {description}
+        </AtomicText>
+      )}
+      {headerContent && <View style={styles.headerContent}>{headerContent}</View>}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  header: {
+    padding: 16,
+    paddingTop: 60,
+    width: "100%",
+  },
+  headerTop: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+  leftContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    flex: 1,
+  },
+  headerActions: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+  },
+  navigationButton: {
+    width: 40,
+    height: 40,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  backButton: {},
+  closeButton: {
+    borderRadius: 20,
+    borderWidth: 1,
+  },
+  description: {
+    lineHeight: 20,
+  },
+  headerContent: {
+    marginTop: 16,
+  },
+});

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

@@ -1 +1,2 @@
-export { FeatureHeader, type FeatureHeaderProps } from "./FeatureHeader";
+export * from "./FeatureHeader";
+export * from "./AIGenScreenHeader";

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

@@ -0,0 +1,130 @@
+import React from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+
+export interface GridSelectorOption<T> {
+  readonly value: T;
+  readonly label: string;
+  readonly description?: string;
+  readonly emoji?: string;
+}
+
+export interface GridSelectorProps<T> {
+  readonly options: readonly GridSelectorOption<T>[];
+  readonly selectedValue: T;
+  readonly onSelect: (value: T) => void;
+  readonly title?: string;
+  readonly columns?: number;
+  readonly disabled?: boolean;
+}
+
+export function GridSelector<T>({
+  options,
+  selectedValue,
+  onSelect,
+  title,
+  disabled = false,
+}: GridSelectorProps<T>): JSX.Element {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.section}>
+      {title && (
+        <AtomicText
+          type="bodyMedium"
+          style={{
+            color: tokens.colors.textPrimary,
+            fontWeight: "600",
+            marginBottom: 12,
+          }}
+        >
+          {title}
+        </AtomicText>
+      )}
+      <View style={styles.grid}>
+        {options.map((option, index) => {
+          const isSelected = selectedValue === option.value;
+          return (
+            <TouchableOpacity
+              key={index}
+              style={[
+                styles.card,
+                {
+                  backgroundColor: isSelected
+                    ? tokens.colors.primary + "15"
+                    : tokens.colors.surface,
+                  borderColor: isSelected
+                    ? tokens.colors.primary
+                    : tokens.colors.borderLight,
+                },
+              ]}
+              onPress={() => onSelect(option.value)}
+              disabled={disabled}
+            >
+              <View style={styles.cardContent}>
+                {option.emoji && (
+                  <AtomicText style={styles.emoji}>{option.emoji}</AtomicText>
+                )}
+                <AtomicText
+                  type="bodySmall"
+                  style={{
+                    color: tokens.colors.textPrimary,
+                    fontWeight: isSelected ? "600" : "400",
+                    textAlign: "center",
+                  }}
+                >
+                  {option.label}
+                </AtomicText>
+                {option.description && (
+                  <AtomicText
+                    type="labelSmall"
+                    style={{
+                      color: tokens.colors.textSecondary,
+                      marginTop: 4,
+                      textAlign: "center",
+                      fontSize: 10,
+                    }}
+                  >
+                    {option.description}
+                  </AtomicText>
+                )}
+              </View>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  section: {
+    padding: 16,
+    width: "100%",
+  },
+  grid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 12,
+  },
+  card: {
+    flex: 1,
+    minWidth: "45%",
+    padding: 12,
+    borderRadius: 12,
+    borderWidth: 2,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  cardContent: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  emoji: {
+    fontSize: 24,
+    marginBottom: 4,
+  },
+});

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

@@ -6,6 +6,7 @@
 export { StyleSelector } from "./StyleSelector";
 export { AspectRatioSelector } from "./AspectRatioSelector";
 export { DurationSelector } from "./DurationSelector";
+export { GridSelector, type GridSelectorProps, type GridSelectorOption } from "./GridSelector";
 
 export type { StyleSelectorProps } from "./StyleSelector";
 export type { AspectRatioSelectorProps } from "./AspectRatioSelector";