@umituz/react-native-ai-generation-content 1.17.246 → 1.17.247

package/package.json

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

package/src/features/couple-future/domain/types.ts

@@ -43,3 +43,20 @@ export const COUPLE_FUTURE_DEFAULTS = {
   outputFormat: "jpeg" as NanoBananaOutputFormat,
   timeoutMs: 300000,
 };
+
+export type CoupleFeatureId =
+  | "romantic-mood"
+  | "art-style"
+  | "artist-style"
+  | "wardrobe";
+
+export interface CoupleFeatureSelection {
+  romanticMoods?: string[];
+  romanticIntensity?: number;
+  artStyle?: string | null;
+  artStyleIntensity?: number;
+  artist?: string | null;
+  artistIntensity?: number;
+  wardrobeStyle?: string | null;
+  wardrobeIntensity?: number;
+}

package/src/features/couple-future/index.ts

@@ -10,7 +10,32 @@ export type {
   CoupleFutureResult,
   NanoBananaAspectRatio,
   NanoBananaOutputFormat,
+  CoupleFeatureId,
+  CoupleFeatureSelection,
 } from "./domain/types";
 export { COUPLE_FUTURE_DEFAULTS } from "./domain/types";
 export { useCoupleFutureGeneration } from "./presentation/hooks/useCoupleFutureGeneration";
 export type { UseCoupleFutureGenerationConfig } from "./presentation/hooks/useCoupleFutureGeneration";
+export {
+  RomanticMoodSelector,
+  ArtStyleSelector,
+  ArtistStyleSelector,
+  WardrobeSelector,
+} from "./presentation/components";
+export type {
+  RomanticMoodSelectorProps,
+  ArtStyleSelectorProps,
+  ArtistStyleSelectorProps,
+  WardrobeSelectorProps,
+} from "./presentation/components";
+export {
+  COUPLE_FEATURE_CONFIGS,
+  ROMANTIC_MOOD_OPTIONS,
+  ART_STYLE_OPTIONS,
+  ARTIST_STYLE_OPTIONS,
+} from "./infrastructure/coupleFeatureRegistry";
+export type {
+  CoupleFeatureConfig,
+  CoupleFeatureOption,
+} from "./infrastructure/coupleFeatureRegistry";
+export { enhanceCouplePrompt } from "./infrastructure/couplePromptEnhancer";

package/src/features/couple-future/infrastructure/coupleFeatureRegistry.ts

@@ -0,0 +1,76 @@
+/**
+ * Couple Feature Registry
+ * Configuration for couple generation feature selectors
+ */
+
+export interface CoupleFeatureOption {
+  id: string;
+  iconKey: string;
+  labelKey: string;
+}
+
+export interface CoupleFeatureConfig {
+  id: string;
+  translationPrefix: string;
+  hasIntensitySlider: boolean;
+  selectionType: "single" | "multi";
+  options: CoupleFeatureOption[];
+}
+
+export const ROMANTIC_MOOD_OPTIONS: CoupleFeatureOption[] = [
+  { id: "romantic", iconKey: "heart", labelKey: "romantic" },
+  { id: "mysterious", iconKey: "moon", labelKey: "mysterious" },
+  { id: "magical", iconKey: "sparkles", labelKey: "magical" },
+  { id: "energetic", iconKey: "bolt", labelKey: "energetic" },
+  { id: "melancholic", iconKey: "cloud", labelKey: "melancholic" },
+  { id: "passionate", iconKey: "flame", labelKey: "passionate" },
+  { id: "nostalgic", iconKey: "camera", labelKey: "nostalgic" },
+  { id: "futuristic", iconKey: "rocket", labelKey: "futuristic" },
+];
+
+export const ART_STYLE_OPTIONS: CoupleFeatureOption[] = [
+  { id: "original", iconKey: "image", labelKey: "original" },
+  { id: "cubism", iconKey: "shape", labelKey: "cubism" },
+  { id: "popArt", iconKey: "color", labelKey: "popArt" },
+  { id: "impressionism", iconKey: "brush", labelKey: "impressionism" },
+  { id: "surrealism", iconKey: "eye", labelKey: "surrealism" },
+  { id: "renaissance", iconKey: "palette", labelKey: "renaissance" },
+];
+
+export const ARTIST_STYLE_OPTIONS: CoupleFeatureOption[] = [
+  { id: "vanGogh", iconKey: "brush", labelKey: "vanGogh" },
+  { id: "picasso", iconKey: "shape", labelKey: "picasso" },
+  { id: "fridaKahlo", iconKey: "flower", labelKey: "fridaKahlo" },
+  { id: "daVinci", iconKey: "palette", labelKey: "daVinci" },
+];
+
+export const COUPLE_FEATURE_CONFIGS: Record<string, CoupleFeatureConfig> = {
+  "romantic-mood": {
+    id: "romantic-mood",
+    translationPrefix: "romanticPhoto",
+    hasIntensitySlider: true,
+    selectionType: "multi",
+    options: ROMANTIC_MOOD_OPTIONS,
+  },
+  "art-style": {
+    id: "art-style",
+    translationPrefix: "artStyles",
+    hasIntensitySlider: true,
+    selectionType: "single",
+    options: ART_STYLE_OPTIONS,
+  },
+  "artist-style": {
+    id: "artist-style",
+    translationPrefix: "artistStyles",
+    hasIntensitySlider: true,
+    selectionType: "single",
+    options: ARTIST_STYLE_OPTIONS,
+  },
+  wardrobe: {
+    id: "wardrobe",
+    translationPrefix: "wardrobe",
+    hasIntensitySlider: false,
+    selectionType: "single",
+    options: [],
+  },
+};

package/src/features/couple-future/infrastructure/couplePromptEnhancer.ts

@@ -0,0 +1,84 @@
+/**
+ * Couple Prompt Enhancer
+ * Enhances base prompts with feature-specific selections
+ */
+
+import type { CoupleFeatureSelection } from "../domain/types";
+
+const MOOD_DESCRIPTIONS: Record<string, string> = {
+  romantic: "warm romantic tones, soft candlelight, intimate atmosphere",
+  mysterious: "moody low-key lighting, deep shadows, enigmatic ambiance",
+  magical: "sparkly magical effects, ethereal glow, fairy-tale atmosphere",
+  energetic: "vibrant dynamic energy, bright lighting, lively atmosphere",
+  melancholic: "soft melancholic tones, gentle shadows, contemplative mood",
+  passionate: "intense passionate colors, dramatic lighting, emotional depth",
+  nostalgic: "vintage nostalgic feel, warm sepia tones, timeless quality",
+  futuristic: "modern futuristic aesthetic, neon accents, sci-fi atmosphere",
+};
+
+const ART_STYLE_DESCRIPTIONS: Record<string, string> = {
+  cubism: "geometric cubist style with angular shapes and fragmented forms",
+  popArt: "bold pop art style with bright vibrant colors and graphic elements",
+  impressionism: "impressionist style with visible brushstrokes and light effects",
+  surrealism: "surrealist style with dreamlike imagery and unexpected juxtapositions",
+  renaissance: "classical renaissance style with rich details and balanced composition",
+};
+
+const ARTIST_STYLE_DESCRIPTIONS: Record<string, string> = {
+  vanGogh: "Van Gogh's post-impressionist style with thick expressive brushstrokes and swirling patterns",
+  picasso: "Picasso's cubist style with geometric fragmentation and multiple perspectives",
+  fridaKahlo: "Frida Kahlo's vibrant symbolic style with rich colors and personal imagery",
+  daVinci: "Leonardo da Vinci's renaissance mastery with subtle sfumato and perfect proportion",
+};
+
+const getIntensityLabel = (intensity: number): string => {
+  if (intensity >= 75) return "strong";
+  if (intensity >= 50) return "moderate";
+  return "subtle";
+};
+
+const getArtistIntensityLabel = (intensity: number): string => {
+  if (intensity >= 75) return "strong homage to";
+  if (intensity >= 50) return "inspired by";
+  return "subtle influence of";
+};
+
+export const enhanceCouplePrompt = (
+  basePrompt: string,
+  selections: CoupleFeatureSelection
+): string => {
+  let enhanced = basePrompt;
+
+  if (selections.romanticMoods && selections.romanticMoods.length > 0) {
+    const moodDescriptions = selections.romanticMoods
+      .map((mood) => MOOD_DESCRIPTIONS[mood])
+      .filter(Boolean)
+      .join(", ");
+
+    if (moodDescriptions) {
+      const intensity = selections.romanticIntensity || 70;
+      const label = getIntensityLabel(intensity);
+      enhanced += `. Apply ${label} ${moodDescriptions}`;
+    }
+  }
+
+  if (selections.artStyle && selections.artStyle !== "original") {
+    const styleDescription = ART_STYLE_DESCRIPTIONS[selections.artStyle];
+    if (styleDescription) {
+      const intensity = selections.artStyleIntensity || 80;
+      const label = getIntensityLabel(intensity);
+      enhanced += `. Render in ${label} applied ${styleDescription}`;
+    }
+  }
+
+  if (selections.artist) {
+    const artistDescription = ARTIST_STYLE_DESCRIPTIONS[selections.artist];
+    if (artistDescription) {
+      const intensity = selections.artistIntensity || 70;
+      const label = getArtistIntensityLabel(intensity);
+      enhanced += `. Create in ${label} ${artistDescription}`;
+    }
+  }
+
+  return enhanced;
+};

package/src/features/couple-future/presentation/components/ArtStyleSelector.tsx

@@ -0,0 +1,146 @@
+/**
+ * Art Style Selector Component
+ * Single-select art style selector with intensity control
+ */
+
+import React from "react";
+import { View, TouchableOpacity, StyleSheet, ScrollView } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { CoupleFeatureSelection } from "../../domain/types";
+import { ART_STYLE_OPTIONS } from "../../infrastructure/coupleFeatureRegistry";
+
+export interface ArtStyleSelectorProps {
+  selection: CoupleFeatureSelection;
+  onSelectionChange: (selection: CoupleFeatureSelection) => void;
+  translationPrefix: string;
+  t: (key: string) => string;
+}
+
+export const ArtStyleSelector: React.FC<ArtStyleSelectorProps> = ({
+  selection,
+  onSelectionChange,
+  translationPrefix,
+  t,
+}) => {
+  const tokens = useAppDesignTokens();
+  const selectedStyle = selection.artStyle;
+  const intensity = selection.artStyleIntensity || 80;
+
+  const handleStyleSelect = (styleId: string) => {
+    onSelectionChange({ ...selection, artStyle: styleId });
+  };
+
+  const handleIntensityChange = (value: number) => {
+    onSelectionChange({ ...selection, artStyleIntensity: value });
+  };
+
+  return (
+    <ScrollView style={s.container}>
+      <View style={s.section}>
+        <AtomicText
+          type="bodyMedium"
+          style={[s.title, { color: tokens.colors.textPrimary }]}
+        >
+          {t(`${translationPrefix}.selectStyle`)}
+        </AtomicText>
+
+        <View style={s.grid}>
+          {ART_STYLE_OPTIONS.map((style) => {
+            const isSelected = selectedStyle === style.id;
+            return (
+              <TouchableOpacity
+                key={style.id}
+                style={[
+                  s.card,
+                  {
+                    backgroundColor: isSelected
+                      ? `${tokens.colors.primary}15`
+                      : tokens.colors.surface,
+                    borderColor: isSelected
+                      ? tokens.colors.primary
+                      : tokens.colors.borderLight,
+                  },
+                ]}
+                onPress={() => handleStyleSelect(style.id)}
+              >
+                <AtomicIcon
+                  name={style.iconKey as never}
+                  size="lg"
+                  color={isSelected ? "primary" : "textSecondary"}
+                />
+                <AtomicText
+                  type="labelMedium"
+                  style={[
+                    s.label,
+                    {
+                      color: isSelected
+                        ? tokens.colors.primary
+                        : tokens.colors.textSecondary,
+                      fontWeight: isSelected ? "600" : "400",
+                    },
+                  ]}
+                >
+                  {t(`${translationPrefix}.styles.${style.labelKey}`)}
+                </AtomicText>
+              </TouchableOpacity>
+            );
+          })}
+        </View>
+      </View>
+
+      {selectedStyle && selectedStyle !== "original" && (
+        <View style={s.section}>
+          <View style={s.header}>
+            <AtomicText type="bodyMedium" style={[s.title, { color: tokens.colors.textPrimary }]}>
+              {t(`${translationPrefix}.intensity`)}
+            </AtomicText>
+            <AtomicText type="bodyMedium" style={{ color: tokens.colors.primary, fontWeight: "600" }}>
+              {intensity}%
+            </AtomicText>
+          </View>
+
+          <View style={s.slider}>
+            {[25, 50, 75, 100].map((value) => (
+              <TouchableOpacity
+                key={value}
+                style={[
+                  s.button,
+                  {
+                    backgroundColor: intensity === value ? tokens.colors.primary : tokens.colors.surface,
+                    borderColor: intensity === value ? tokens.colors.primary : tokens.colors.borderLight,
+                  },
+                ]}
+                onPress={() => handleIntensityChange(value)}
+              >
+                <AtomicText
+                  type="labelSmall"
+                  style={{
+                    color: intensity === value ? tokens.colors.onPrimary : tokens.colors.textSecondary,
+                  }}
+                >
+                  {value}%
+                </AtomicText>
+              </TouchableOpacity>
+            ))}
+          </View>
+        </View>
+      )}
+    </ScrollView>
+  );
+};
+
+const s = StyleSheet.create({
+  container: { flex: 1 },
+  section: { padding: 16, marginBottom: 8 },
+  title: { fontWeight: "600", marginBottom: 12 },
+  grid: { flexDirection: "row", flexWrap: "wrap", gap: 12 },
+  card: { width: "30%", aspectRatio: 0.85, padding: 12, borderRadius: 12, borderWidth: 2, alignItems: "center", justifyContent: "center" },
+  label: { marginTop: 8, textAlign: "center" },
+  header: { flexDirection: "row", justifyContent: "space-between", alignItems: "center" },
+  slider: { flexDirection: "row", gap: 8, marginTop: 8 },
+  button: { flex: 1, padding: 12, borderRadius: 8, borderWidth: 2, alignItems: "center" },
+});

package/src/features/couple-future/presentation/components/ArtistStyleSelector.tsx

@@ -0,0 +1,122 @@
+/**
+ * Artist Style Selector Component
+ * Single-select artist style selector with intensity control
+ */
+
+import React from "react";
+import { View, TouchableOpacity, StyleSheet, ScrollView } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { CoupleFeatureSelection } from "../../domain/types";
+import { ARTIST_STYLE_OPTIONS } from "../../infrastructure/coupleFeatureRegistry";
+
+export interface ArtistStyleSelectorProps {
+  selection: CoupleFeatureSelection;
+  onSelectionChange: (selection: CoupleFeatureSelection) => void;
+  translationPrefix: string;
+  t: (key: string) => string;
+}
+
+export const ArtistStyleSelector: React.FC<ArtistStyleSelectorProps> = ({
+  selection,
+  onSelectionChange,
+  translationPrefix,
+  t,
+}) => {
+  const tokens = useAppDesignTokens();
+  const selectedArtist = selection.artist;
+  const intensity = selection.artistIntensity || 70;
+
+  const handleArtistSelect = (artistId: string) => {
+    onSelectionChange({ ...selection, artist: artistId });
+  };
+
+  const handleIntensityChange = (value: number) => {
+    onSelectionChange({ ...selection, artistIntensity: value });
+  };
+
+  return (
+    <ScrollView style={s.container}>
+      <View style={s.section}>
+        <AtomicText
+          type="bodyMedium"
+          style={[s.title, { color: tokens.colors.textPrimary }]}
+        >
+          {t(`${translationPrefix}.selectArtist`)}
+        </AtomicText>
+
+        <View style={s.grid}>
+          {ARTIST_STYLE_OPTIONS.map((artist) => {
+            const isSelected = selectedArtist === artist.id;
+            return (
+              <TouchableOpacity
+                key={artist.id}
+                style={[
+                  s.card,
+                  {
+                    backgroundColor: isSelected ? `${tokens.colors.primary}15` : tokens.colors.surface,
+                    borderColor: isSelected ? tokens.colors.primary : tokens.colors.borderLight,
+                  },
+                ]}
+                onPress={() => handleArtistSelect(artist.id)}
+              >
+                <View style={[s.iconContainer, { backgroundColor: isSelected ? tokens.colors.primary : tokens.colors.surfaceVariant }]}>
+                  <AtomicIcon name={artist.iconKey as never} size="lg" color={isSelected ? "onPrimary" : "textSecondary"} />
+                </View>
+                <AtomicText
+                  type="labelMedium"
+                  style={[s.label, { color: isSelected ? tokens.colors.primary : tokens.colors.textPrimary, fontWeight: isSelected ? "600" : "500" }]}
+                >
+                  {t(`${translationPrefix}.artists.${artist.labelKey}`)}
+                </AtomicText>
+              </TouchableOpacity>
+            );
+          })}
+        </View>
+      </View>
+
+      {selectedArtist && (
+        <View style={s.section}>
+          <View style={s.header}>
+            <AtomicText type="bodyMedium" style={[s.title, { color: tokens.colors.textPrimary }]}>
+              {t(`${translationPrefix}.intensity`)}
+            </AtomicText>
+            <AtomicText type="bodyMedium" style={{ color: tokens.colors.primary, fontWeight: "600" }}>
+              {intensity}%
+            </AtomicText>
+          </View>
+
+          <View style={s.slider}>
+            {[25, 50, 75, 100].map((value) => (
+              <TouchableOpacity
+                key={value}
+                style={[s.button, { backgroundColor: intensity === value ? tokens.colors.primary : tokens.colors.surface, borderColor: intensity === value ? tokens.colors.primary : tokens.colors.borderLight }]}
+                onPress={() => handleIntensityChange(value)}
+              >
+                <AtomicText type="labelSmall" style={{ color: intensity === value ? tokens.colors.onPrimary : tokens.colors.textSecondary }}>
+                  {value}%
+                </AtomicText>
+              </TouchableOpacity>
+            ))}
+          </View>
+        </View>
+      )}
+    </ScrollView>
+  );
+};
+
+const s = StyleSheet.create({
+  container: { flex: 1 },
+  section: { padding: 16, marginBottom: 8 },
+  title: { fontWeight: "600", marginBottom: 12 },
+  grid: { flexDirection: "row", flexWrap: "wrap", gap: 12 },
+  card: { width: "47%", padding: 12, borderRadius: 12, borderWidth: 2, alignItems: "center", justifyContent: "center" },
+  iconContainer: { width: 64, height: 64, borderRadius: 32, alignItems: "center", justifyContent: "center", marginBottom: 8 },
+  label: { textAlign: "center" },
+  header: { flexDirection: "row", justifyContent: "space-between", alignItems: "center" },
+  slider: { flexDirection: "row", gap: 8, marginTop: 8 },
+  button: { flex: 1, padding: 12, borderRadius: 8, borderWidth: 2, alignItems: "center" },
+});

package/src/features/couple-future/presentation/components/RomanticMoodSelector.tsx

@@ -0,0 +1,147 @@
+/**
+ * Romantic Mood Selector Component
+ * Multi-select mood selector with intensity control
+ */
+
+import React from "react";
+import { View, TouchableOpacity, StyleSheet, ScrollView } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { CoupleFeatureSelection } from "../../domain/types";
+import { ROMANTIC_MOOD_OPTIONS } from "../../infrastructure/coupleFeatureRegistry";
+
+export interface RomanticMoodSelectorProps {
+  selection: CoupleFeatureSelection;
+  onSelectionChange: (selection: CoupleFeatureSelection) => void;
+  translationPrefix: string;
+  t: (key: string) => string;
+}
+
+export const RomanticMoodSelector: React.FC<RomanticMoodSelectorProps> = ({
+  selection,
+  onSelectionChange,
+  translationPrefix,
+  t,
+}) => {
+  const tokens = useAppDesignTokens();
+  const selectedMoods = selection.romanticMoods || [];
+  const intensity = selection.romanticIntensity || 70;
+
+  const handleMoodToggle = (moodId: string) => {
+    const newMoods = selectedMoods.includes(moodId)
+      ? selectedMoods.filter((id) => id !== moodId)
+      : [...selectedMoods, moodId];
+    onSelectionChange({ ...selection, romanticMoods: newMoods });
+  };
+
+  const handleIntensityChange = (value: number) => {
+    onSelectionChange({ ...selection, romanticIntensity: value });
+  };
+
+  return (
+    <ScrollView style={s.container}>
+      <View style={s.section}>
+        <AtomicText
+          type="bodyMedium"
+          style={[s.title, { color: tokens.colors.textPrimary }]}
+        >
+          {t(`${translationPrefix}.selectMoods`)}
+        </AtomicText>
+
+        <View style={s.grid}>
+          {ROMANTIC_MOOD_OPTIONS.map((mood) => {
+            const isSelected = selectedMoods.includes(mood.id);
+            return (
+              <TouchableOpacity
+                key={mood.id}
+                style={[
+                  s.card,
+                  {
+                    backgroundColor: isSelected
+                      ? `${tokens.colors.primary}15`
+                      : tokens.colors.surface,
+                    borderColor: isSelected
+                      ? tokens.colors.primary
+                      : tokens.colors.borderLight,
+                  },
+                ]}
+                onPress={() => handleMoodToggle(mood.id)}
+              >
+                <AtomicIcon
+                  name={mood.iconKey as never}
+                  size="md"
+                  color={isSelected ? "primary" : "textSecondary"}
+                />
+                <AtomicText
+                  type="labelSmall"
+                  style={[
+                    s.label,
+                    {
+                      color: isSelected
+                        ? tokens.colors.primary
+                        : tokens.colors.textSecondary,
+                      fontWeight: isSelected ? "600" : "400",
+                    },
+                  ]}
+                >
+                  {t(`${translationPrefix}.moods.${mood.labelKey}`)}
+                </AtomicText>
+              </TouchableOpacity>
+            );
+          })}
+        </View>
+      </View>
+
+      <View style={s.section}>
+        <View style={s.header}>
+          <AtomicText type="bodyMedium" style={[s.title, { color: tokens.colors.textPrimary }]}>
+            {t(`${translationPrefix}.intensity`)}
+          </AtomicText>
+          <AtomicText type="bodyMedium" style={{ color: tokens.colors.primary, fontWeight: "600" }}>
+            {intensity}%
+          </AtomicText>
+        </View>
+
+        <View style={s.slider}>
+          {[25, 50, 75, 100].map((value) => (
+            <TouchableOpacity
+              key={value}
+              style={[
+                s.button,
+                {
+                  backgroundColor: intensity === value ? tokens.colors.primary : tokens.colors.surface,
+                  borderColor: intensity === value ? tokens.colors.primary : tokens.colors.borderLight,
+                },
+              ]}
+              onPress={() => handleIntensityChange(value)}
+            >
+              <AtomicText
+                type="labelSmall"
+                style={{
+                  color: intensity === value ? tokens.colors.onPrimary : tokens.colors.textSecondary,
+                }}
+              >
+                {value}%
+              </AtomicText>
+            </TouchableOpacity>
+          ))}
+        </View>
+      </View>
+    </ScrollView>
+  );
+};
+
+const s = StyleSheet.create({
+  container: { flex: 1 },
+  section: { padding: 16, marginBottom: 8 },
+  title: { fontWeight: "600", marginBottom: 12 },
+  grid: { flexDirection: "row", flexWrap: "wrap", gap: 12 },
+  card: { width: "22%", aspectRatio: 1, padding: 8, borderRadius: 12, borderWidth: 2, alignItems: "center", justifyContent: "center" },
+  label: { marginTop: 4, textAlign: "center", fontSize: 10 },
+  header: { flexDirection: "row", justifyContent: "space-between", alignItems: "center" },
+  slider: { flexDirection: "row", gap: 8, marginTop: 8 },
+  button: { flex: 1, padding: 12, borderRadius: 8, borderWidth: 2, alignItems: "center" },
+});

package/src/features/couple-future/presentation/components/WardrobeSelector.tsx

@@ -0,0 +1,87 @@
+/**
+ * Wardrobe Selector Component
+ * Simplified placeholder for Phase 1
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { CoupleFeatureSelection } from "../../domain/types";
+
+export interface WardrobeSelectorProps {
+  selection: CoupleFeatureSelection;
+  onSelectionChange: (selection: CoupleFeatureSelection) => void;
+  translationPrefix: string;
+  t: (key: string) => string;
+}
+
+export const WardrobeSelector: React.FC<WardrobeSelectorProps> = ({
+  translationPrefix,
+  t,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={s.container}>
+      <View
+        style={[
+          s.card,
+          {
+            backgroundColor: tokens.colors.surface,
+            borderColor: tokens.colors.borderLight,
+          },
+        ]}
+      >
+        <View
+          style={[
+            s.iconContainer,
+            { backgroundColor: tokens.colors.surfaceVariant },
+          ]}
+        >
+          <AtomicIcon name="checkroom" size="xl" color="textSecondary" />
+        </View>
+
+        <AtomicText
+          type="headlineSmall"
+          style={[s.title, { color: tokens.colors.textPrimary }]}
+        >
+          {t(`${translationPrefix}.title`)}
+        </AtomicText>
+
+        <AtomicText
+          type="bodyMedium"
+          style={[s.subtitle, { color: tokens.colors.textSecondary }]}
+        >
+          {t(`${translationPrefix}.comingSoon`)}
+        </AtomicText>
+
+        <View
+          style={[
+            s.badge,
+            { backgroundColor: `${tokens.colors.primary}15` },
+          ]}
+        >
+          <AtomicText
+            type="labelSmall"
+            style={{ color: tokens.colors.primary, fontWeight: "600" }}
+          >
+            {t("common.comingSoon")}
+          </AtomicText>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const s = StyleSheet.create({
+  container: { flex: 1, padding: 16, justifyContent: "center" },
+  card: { padding: 24, borderRadius: 16, borderWidth: 2, alignItems: "center" },
+  iconContainer: { width: 80, height: 80, borderRadius: 40, alignItems: "center", justifyContent: "center", marginBottom: 16 },
+  title: { fontWeight: "600", marginBottom: 8, textAlign: "center" },
+  subtitle: { marginBottom: 16, textAlign: "center" },
+  badge: { paddingHorizontal: 16, paddingVertical: 8, borderRadius: 8 },
+});

package/src/features/couple-future/presentation/components/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Couple Future Components
+ */
+
+export { RomanticMoodSelector } from "./RomanticMoodSelector";
+export type { RomanticMoodSelectorProps } from "./RomanticMoodSelector";
+export { ArtStyleSelector } from "./ArtStyleSelector";
+export type { ArtStyleSelectorProps } from "./ArtStyleSelector";
+export { ArtistStyleSelector } from "./ArtistStyleSelector";
+export type { ArtistStyleSelectorProps } from "./ArtistStyleSelector";
+export { WardrobeSelector } from "./WardrobeSelector";
+export type { WardrobeSelectorProps } from "./WardrobeSelector";