@umituz/react-native-design-system 4.23.41 → 4.23.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.23.41",
+  "version": "4.23.43",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive, safe area, exception, infinite scroll, UUID, image, timezone, offline, onboarding, and loading utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/exports/molecules/alerts.ts

@@ -0,0 +1,22 @@
+/**
+ * Alert Molecules Exports
+ */
+
+export {
+  AlertBanner,
+  AlertToast,
+  AlertInline,
+  AlertModal,
+  AlertContainer,
+  AlertProvider,
+  AlertService,
+  useAlert,
+  useAlertStore,
+  alertService,
+  AlertType,
+  AlertMode,
+  AlertPosition,
+  type Alert,
+  type AlertAction,
+  type AlertOptions,
+} from "../../molecules";

package/src/exports/molecules/bottom-sheet.ts

@@ -0,0 +1,20 @@
+/**
+ * Bottom Sheet Molecules Exports
+ */
+
+export {
+  BottomSheet,
+  BottomSheetModal,
+  FilterBottomSheet,
+  FilterSheet,
+  useBottomSheet,
+  useBottomSheetModal,
+  useListFilters,
+  SafeBottomSheetModalProvider,
+  type BottomSheetProps,
+  type BottomSheetModalProps,
+  type BottomSheetRef,
+  type BottomSheetModalRef,
+  type FilterOption,
+  type FilterCategory,
+} from "../../molecules";

package/src/exports/molecules/calendar.ts

@@ -0,0 +1,23 @@
+/**
+ * Calendar Molecules Exports
+ */
+
+export {
+  AtomicCalendar,
+  useCalendar,
+  useCalendarEvents,
+  useCalendarNavigation,
+  useCalendarView,
+  CalendarService,
+  CalendarGeneration,
+  DateUtilities,
+  type AtomicCalendarProps,
+  type CalendarEvent,
+  type CalendarViewMode,
+  type CreateCalendarEventRequest,
+  type UpdateCalendarEventRequest,
+  type CalendarDay,
+  type CalendarMonth,
+  type CalendarWeek,
+  type ICalendarRepository,
+} from "../../molecules";

package/src/exports/molecules/core.ts

@@ -0,0 +1,29 @@
+/**
+ * Core Molecules Exports
+ */
+
+export {
+  FormField,
+  ListItem,
+  SearchBar,
+  IconContainer,
+  BaseModal,
+  ConfirmationModal,
+  useConfirmationModal,
+  Divider,
+  type DividerProps,
+  StepProgress,
+  List,
+  Avatar,
+  AvatarGroup,
+  AvatarUtils,
+  type AvatarProps,
+  type AvatarGroupProps,
+  type AvatarGroupItem,
+  type AvatarSize,
+  type AvatarShape,
+  type AvatarConfig,
+  type AvatarType,
+  type BaseModalProps,
+  type ListProps,
+} from "../../molecules";

package/src/exports/molecules/countdown.ts

@@ -0,0 +1,23 @@
+/**
+ * Countdown Molecules Exports
+ */
+
+export {
+  Countdown,
+  TimeUnit,
+  CountdownHeader,
+  useCountdown,
+  calculateTimeRemaining,
+  padNumber,
+  getNextDayStart,
+  getNextYearStart,
+  type CountdownProps,
+  type TimeUnitProps,
+  type CountdownHeaderProps,
+  type UseCountdownOptions,
+  type UseCountdownReturn,
+  type TimeRemaining,
+  type CountdownTarget,
+  type CountdownFormatOptions,
+  type CountdownDisplayConfig,
+} from "../../molecules";

package/src/exports/molecules/emoji.ts

@@ -0,0 +1,17 @@
+/**
+ * Emoji Molecules Exports
+ */
+
+export {
+  EmojiPicker,
+  useEmojiPicker,
+  EmojiCategory,
+  EmojiUtils,
+  type EmojiObject,
+  type EmojiPickerConfig,
+  type EmojiSelectCallback,
+  type EmojiPickerState,
+  type EmojiPickerProps,
+  type UseEmojiPickerOptions,
+  type UseEmojiPickerReturn,
+} from "../../molecules";

package/src/exports/molecules/index.ts

@@ -0,0 +1,13 @@
+/**
+ * Molecules Exports - Barrel
+ */
+
+export * from "./core";
+export * from "./alerts";
+export * from "./bottom-sheet";
+export * from "./calendar";
+export * from "./swipe-actions";
+export * from "./navigation";
+export * from "./emoji";
+export * from "./countdown";
+export * from "./misc";

package/src/exports/molecules/misc.ts

@@ -0,0 +1,42 @@
+/**
+ * Miscellaneous Molecules Exports
+ */
+
+export {
+  // Long Press Menu
+  MenuActionType,
+  type MenuAction,
+  type MenuActionTypeValue,
+  // Step Header
+  StepHeader,
+  type StepHeaderProps,
+  type StepHeaderConfig,
+  // Splash
+  SplashScreen,
+  useSplashFlow,
+  type SplashScreenProps,
+  type SplashColors,
+  type UseSplashFlowOptions,
+  type UseSplashFlowResult,
+  // Filter Group
+  FilterGroup,
+  type FilterGroupProps,
+  type FilterGroupItem,
+  // Action Footer
+  ActionFooter,
+  type ActionFooterProps,
+  // Hero Section
+  HeroSection,
+  type HeroSectionProps,
+  // Info Grid
+  InfoGrid,
+  type InfoGridProps,
+  type InfoGridItem,
+  // Circular Menu
+  CircularMenu,
+  CircularMenuItem,
+  CircularMenuBackground,
+  CircularMenuCloseButton,
+  type CircularMenuProps,
+  type CircularMenuAction,
+} from "../../molecules";

package/src/exports/molecules/navigation.ts

@@ -0,0 +1,46 @@
+/**
+ * Navigation Molecules Exports
+ */
+
+export {
+  TabsNavigator,
+  StackNavigator,
+  createTabNavigator,
+  createStackNavigator,
+  FabButton,
+  NavigationCleanupManager,
+  AppNavigation,
+  NavigationContainer,
+  TabLabel,
+  NavigationHeader,
+  createScreenOptions,
+  createNavigationTheme,
+  useTabBarStyles,
+  useTabConfig,
+  useAppNavigation,
+  useAppRoute,
+  useAppFocusEffect,
+  useAppIsFocused,
+  type NavigationHeaderProps,
+  type ScreenOptionsParams,
+  type TabsNavigatorProps,
+  type StackNavigatorProps,
+  type StackNavigatorConfig,
+  type StackScreen,
+  type FabButtonProps,
+  type TabScreen,
+  type TabNavigatorConfig,
+  type BaseScreen,
+  type BaseNavigatorConfig,
+  type IconRendererProps,
+  type LabelProcessorProps,
+  type FabConfig,
+  type NavigationCleanup,
+  type BottomTabNavigationOptions,
+  type BottomTabScreenProps,
+  type StackNavigationOptions,
+  type StackScreenProps,
+  type RouteProp,
+  type TabLabelProps,
+  type TabBarConfig,
+} from "../../molecules";

package/src/exports/molecules/swipe-actions.ts

@@ -0,0 +1,15 @@
+/**
+ * Swipe Actions Molecules Exports
+ */
+
+export {
+  SwipeActionButton,
+  SwipeActionUtils,
+  ACTION_PRESETS,
+  DEFAULT_SWIPE_CONFIG,
+  type SwipeActionButtonProps,
+  type SwipeActionType,
+  type SwipeActionConfig,
+  type SwipeDirection,
+  type SwipeableConfig,
+} from "../../molecules";

package/src/image/presentation/components/editor/TextEditorSheet.tsx

@@ -9,7 +9,7 @@ import type { BottomSheetModalRef } from '../../../../molecules/bottom-sheet/typ
 import { AtomicText } from '../../../../atoms/AtomicText';
 import { AtomicIcon } from '../../../../atoms';
 import { useAppDesignTokens } from '../../../../theme/hooks/useAppDesignTokens';
-import { TextContentTab, TextStyleTab, TextTransformTab } from './TextEditorTabs';
+import { TextContentTab, TextStyleTab, TextTransformTab } from './text-editor';
 
 export interface TextEditorSheetProps {
   text: string;

package/src/image/presentation/components/editor/text-editor/TextContentTab.tsx

@@ -0,0 +1,42 @@
+/**
+ * Text Content Tab - Text input for editor
+ */
+
+import React from "react";
+import { View, TextInput } from "react-native";
+import { useAppDesignTokens } from "../../../../../theme/hooks/useAppDesignTokens";
+import { textEditorStyles, type TabProps } from "./TextEditorTabs.styles";
+
+export interface TextContentTabProps extends TabProps {
+  text: string;
+  onTextChange: (t: string) => void;
+}
+
+export const TextContentTab: React.FC<TextContentTabProps> = ({
+  text,
+  onTextChange,
+  t,
+}) => {
+  const tokens = useAppDesignTokens();
+  return (
+    <View style={{ gap: tokens.spacing.lg }}>
+      <TextInput
+        value={text}
+        onChangeText={onTextChange}
+        placeholder={t("editor.text_placeholder")}
+        style={[
+          textEditorStyles.textInput,
+          {
+            ...tokens.typography.bodyLarge,
+            borderColor: tokens.colors.border,
+            borderRadius: tokens.borders.radius.md,
+            padding: tokens.spacing.md,
+            minHeight: 120,
+            color: tokens.colors.textPrimary,
+          },
+        ]}
+        multiline
+      />
+    </View>
+  );
+};

package/src/image/presentation/components/editor/text-editor/TextEditorTabs.styles.ts

@@ -0,0 +1,36 @@
+/**
+ * Shared Styles for Text Editor Tabs
+ */
+
+import { StyleSheet } from "react-native";
+
+export const textEditorStyles = StyleSheet.create({
+  textInput: {
+    borderWidth: 1,
+    textAlignVertical: "top",
+  },
+  fontButton: {
+    paddingVertical: 8,
+    minWidth: 80,
+    alignItems: "center",
+  },
+  colorButton: {
+    width: 40,
+    height: 40,
+  },
+  sizeButton: {
+    minWidth: 50,
+    alignItems: "center",
+  },
+  transformButton: {
+    minWidth: 60,
+    alignItems: "center",
+  },
+  deleteButton: {
+    alignSelf: "flex-start",
+  },
+});
+
+export interface TabProps {
+  t: (key: string) => string;
+}

package/src/image/presentation/components/editor/text-editor/TextStyleTab.tsx

@@ -0,0 +1,167 @@
+/**
+ * Text Style Tab - Font, color, size selection
+ */
+
+import React from "react";
+import { View, ScrollView, TouchableOpacity } from "react-native";
+import { AtomicText } from "../../../../../atoms";
+import { useAppDesignTokens } from "../../../../../theme/hooks/useAppDesignTokens";
+import { textEditorStyles, type TabProps } from "./TextEditorTabs.styles";
+
+const DEFAULT_COLORS = [
+  "#FFFFFF",
+  "#000000",
+  "#FF0000",
+  "#FFFF00",
+  "#0000FF",
+  "#00FF00",
+  "#FF00FF",
+  "#FFA500",
+];
+
+const DEFAULT_FONTS = ["System", "serif", "sans-serif", "monospace"];
+const DEFAULT_FONT_SIZES = [12, 14, 16, 18, 20, 24, 28, 32];
+
+export interface TextStyleTabProps extends TabProps {
+  fontSize: number;
+  setFontSize: (s: number) => void;
+  color: string;
+  setColor: (c: string) => void;
+  fontFamily: string;
+  setFontFamily: (f: string) => void;
+}
+
+export const TextStyleTab: React.FC<TextStyleTabProps> = ({
+  fontSize,
+  setFontSize,
+  color,
+  setColor,
+  fontFamily,
+  setFontFamily,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={{ gap: tokens.spacing.xl }}>
+      {/* Font Family Selection */}
+      <View>
+        <AtomicText
+          style={{
+            ...tokens.typography.labelMedium,
+            marginBottom: tokens.spacing.sm,
+          }}
+        >
+          Font
+        </AtomicText>
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={{ gap: tokens.spacing.sm }}
+        >
+          {DEFAULT_FONTS.map((f) => (
+            <TouchableOpacity
+              key={f}
+              onPress={() => setFontFamily(f)}
+              style={[
+                textEditorStyles.fontButton,
+                {
+                  paddingHorizontal: tokens.spacing.md,
+                  paddingVertical: tokens.spacing.xs,
+                  borderRadius: tokens.borders.radius.full,
+                  borderWidth: 1,
+                  borderColor:
+                    fontFamily === f ? tokens.colors.primary : tokens.colors.border,
+                  backgroundColor:
+                    fontFamily === f ? tokens.colors.primary : tokens.colors.surface,
+                },
+              ]}
+            >
+              <AtomicText style={{ fontFamily: f }}>{f}</AtomicText>
+            </TouchableOpacity>
+          ))}
+        </ScrollView>
+      </View>
+
+      {/* Color Selection */}
+      <View>
+        <AtomicText
+          style={{
+            ...tokens.typography.labelMedium,
+            marginBottom: tokens.spacing.sm,
+          }}
+        >
+          Color
+        </AtomicText>
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={{ gap: tokens.spacing.sm }}
+        >
+          {DEFAULT_COLORS.map((c) => (
+            <TouchableOpacity
+              key={c}
+              onPress={() => setColor(c)}
+              style={[
+                textEditorStyles.colorButton,
+                {
+                  width: 40,
+                  height: 40,
+                  borderRadius: 20,
+                  backgroundColor: c,
+                  borderWidth: color === c ? 3 : 1,
+                  borderColor: tokens.colors.primary,
+                },
+              ]}
+            />
+          ))}
+        </ScrollView>
+      </View>
+
+      {/* Font Size Selection */}
+      <View>
+        <AtomicText
+          style={{
+            ...tokens.typography.labelMedium,
+            marginBottom: tokens.spacing.xs,
+          }}
+        >
+          Size: {fontSize}px
+        </AtomicText>
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={{ gap: tokens.spacing.sm }}
+        >
+          {DEFAULT_FONT_SIZES.map((s) => (
+            <TouchableOpacity
+              key={s}
+              onPress={() => setFontSize(s)}
+              style={[
+                textEditorStyles.sizeButton,
+                {
+                  paddingHorizontal: tokens.spacing.md,
+                  paddingVertical: tokens.spacing.sm,
+                  borderRadius: tokens.borders.radius.md,
+                  borderWidth: 1,
+                  borderColor:
+                    fontSize === s ? tokens.colors.primary : tokens.colors.border,
+                  backgroundColor:
+                    fontSize === s ? tokens.colors.primary : tokens.colors.surface,
+                },
+              ]}
+            >
+              <AtomicText
+                style={{
+                  color: fontSize === s ? "white" : tokens.colors.textPrimary,
+                  fontWeight: "600",
+                }}
+              >
+                {s}
+              </AtomicText>
+            </TouchableOpacity>
+          ))}
+        </ScrollView>
+      </View>
+    </View>
+  );
+};

package/src/image/presentation/components/editor/text-editor/TextTransformTab.tsx

@@ -0,0 +1,192 @@
+/**
+ * Text Transform Tab - Scale, rotation, opacity, delete
+ */
+
+import React from "react";
+import { View, ScrollView, TouchableOpacity } from "react-native";
+import { AtomicText, AtomicIcon } from "../../../../../atoms";
+import { useAppDesignTokens } from "../../../../../theme/hooks/useAppDesignTokens";
+import { textEditorStyles, type TabProps } from "./TextEditorTabs.styles";
+
+const DEFAULT_SCALES = [0.5, 0.75, 1, 1.25, 1.5, 2];
+const DEFAULT_ROTATIONS = [0, 45, 90, 135, 180, 225, 270, 315];
+const DEFAULT_OPACITIES = [0.2, 0.4, 0.6, 0.8, 1];
+
+export interface TextTransformTabProps extends TabProps {
+  scale: number;
+  setScale: (s: number) => void;
+  rotation: number;
+  setRotation: (r: number) => void;
+  opacity: number;
+  setOpacity: (o: number) => void;
+  onDelete?: () => void;
+}
+
+export const TextTransformTab: React.FC<TextTransformTabProps> = ({
+  scale,
+  setScale,
+  rotation,
+  setRotation,
+  opacity,
+  setOpacity,
+  onDelete,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={{ gap: tokens.spacing.xl }}>
+      {/* Scale Selection */}
+      <View>
+        <AtomicText
+          style={{
+            ...tokens.typography.labelMedium,
+            marginBottom: tokens.spacing.xs,
+          }}
+        >
+          Scale: {scale.toFixed(2)}x
+        </AtomicText>
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={{ gap: tokens.spacing.sm }}
+        >
+          {DEFAULT_SCALES.map((s) => (
+            <TouchableOpacity
+              key={s}
+              onPress={() => setScale(s)}
+              style={[
+                textEditorStyles.transformButton,
+                {
+                  paddingHorizontal: tokens.spacing.md,
+                  paddingVertical: tokens.spacing.sm,
+                  borderRadius: tokens.borders.radius.md,
+                  borderWidth: 1,
+                  borderColor: scale === s ? tokens.colors.primary : tokens.colors.border,
+                  backgroundColor: scale === s ? tokens.colors.primary : tokens.colors.surface,
+                },
+              ]}
+            >
+              <AtomicText
+                style={{ color: scale === s ? "white" : tokens.colors.textPrimary }}
+              >
+                {s.toFixed(1)}x
+              </AtomicText>
+            </TouchableOpacity>
+          ))}
+        </ScrollView>
+      </View>
+
+      {/* Rotation Selection */}
+      <View>
+        <AtomicText
+          style={{
+            ...tokens.typography.labelMedium,
+            marginBottom: tokens.spacing.xs,
+          }}
+        >
+          Rotation: {Math.round(rotation)}°
+        </AtomicText>
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={{ gap: tokens.spacing.sm }}
+        >
+          {DEFAULT_ROTATIONS.map((r) => (
+            <TouchableOpacity
+              key={r}
+              onPress={() => setRotation(r)}
+              style={[
+                textEditorStyles.transformButton,
+                {
+                  paddingHorizontal: tokens.spacing.md,
+                  paddingVertical: tokens.spacing.sm,
+                  borderRadius: tokens.borders.radius.md,
+                  borderWidth: 1,
+                  borderColor: rotation === r ? tokens.colors.primary : tokens.colors.border,
+                  backgroundColor: rotation === r ? tokens.colors.primary : tokens.colors.surface,
+                },
+              ]}
+            >
+              <AtomicText
+                style={{ color: rotation === r ? "white" : tokens.colors.textPrimary }}
+              >
+                {r}°
+              </AtomicText>
+            </TouchableOpacity>
+          ))}
+        </ScrollView>
+      </View>
+
+      {/* Opacity Selection */}
+      <View>
+        <AtomicText
+          style={{
+            ...tokens.typography.labelMedium,
+            marginBottom: tokens.spacing.xs,
+          }}
+        >
+          Opacity: {(opacity * 100).toFixed(0)}%
+        </AtomicText>
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={{ gap: tokens.spacing.sm }}
+        >
+          {DEFAULT_OPACITIES.map((o) => (
+            <TouchableOpacity
+              key={o}
+              onPress={() => setOpacity(o)}
+              style={[
+                textEditorStyles.transformButton,
+                {
+                  paddingHorizontal: tokens.spacing.md,
+                  paddingVertical: tokens.spacing.sm,
+                  borderRadius: tokens.borders.radius.md,
+                  borderWidth: 1,
+                  borderColor: opacity === o ? tokens.colors.primary : tokens.colors.border,
+                  backgroundColor: opacity === o ? tokens.colors.primary : tokens.colors.surface,
+                },
+              ]}
+            >
+              <AtomicText
+                style={{ color: opacity === o ? "white" : tokens.colors.textPrimary }}
+              >
+                {Math.round(o * 100)}%
+              </AtomicText>
+            </TouchableOpacity>
+          ))}
+        </ScrollView>
+      </View>
+
+      {/* Delete Button */}
+      {onDelete && (
+        <TouchableOpacity
+          onPress={onDelete}
+          style={[
+            textEditorStyles.deleteButton,
+            {
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: tokens.spacing.sm,
+              padding: tokens.spacing.md,
+              borderRadius: tokens.borders.radius.md,
+              borderWidth: 1,
+              borderColor: tokens.colors.error,
+            },
+          ]}
+        >
+          <AtomicIcon name="trash" size={20} color="error" />
+          <AtomicText
+            style={{
+              ...tokens.typography.labelMedium,
+              color: tokens.colors.error,
+            }}
+          >
+            Delete Layer
+          </AtomicText>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};

package/src/image/presentation/components/editor/text-editor/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Text Editor Tabs - Barrel export
+ */
+
+export { TextContentTab } from "./TextContentTab";
+export type { TextContentTabProps } from "./TextContentTab";
+
+export { TextStyleTab } from "./TextStyleTab";
+export type { TextStyleTabProps } from "./TextStyleTab";
+
+export { TextTransformTab } from "./TextTransformTab";
+export type { TextTransformTabProps } from "./TextTransformTab";
+
+export { textEditorStyles, type TabProps } from "./TextEditorTabs.styles";

package/src/exports/molecules.ts

@@ -1,201 +0,0 @@
-/**
- * Molecules Exports
- * Composite components
- */
-
-export {
-  FormField,
-  ListItem,
-  SearchBar,
-  IconContainer,
-  BaseModal,
-  ConfirmationModal,
-  useConfirmationModal,
-  Divider,
-  type DividerProps,
-  StepProgress,
-  List,
-  Avatar,
-  AvatarGroup,
-  AvatarUtils,
-  type AvatarProps,
-  type AvatarGroupProps,
-  type AvatarGroupItem,
-  type AvatarSize,
-  type AvatarShape,
-  type AvatarConfig,
-  type AvatarType,
-
-  // Bottom Sheet
-  BottomSheet,
-  BottomSheetModal,
-  FilterBottomSheet,
-  FilterSheet,
-  useBottomSheet,
-  useBottomSheetModal,
-  useListFilters,
-  type BottomSheetProps,
-  type BottomSheetModalProps,
-  type BottomSheetRef,
-  type BottomSheetModalRef,
-  SafeBottomSheetModalProvider,
-  type FilterOption,
-  type FilterCategory,
-  // Alerts
-  AlertBanner,
-  AlertToast,
-  AlertInline,
-  AlertModal,
-  AlertContainer,
-  AlertProvider,
-  AlertService,
-  useAlert,
-  useAlertStore,
-  alertService,
-  AlertType,
-  AlertMode,
-  AlertPosition,
-  type BaseModalProps,
-  type ListProps,
-  type Alert,
-  type AlertAction,
-  type AlertOptions,
-  // Calendar
-  AtomicCalendar,
-  useCalendar,
-  useCalendarEvents,
-  useCalendarNavigation,
-  useCalendarView,
-  CalendarService,
-  CalendarGeneration,
-  DateUtilities,
-  type AtomicCalendarProps,
-  type CalendarEvent,
-  type CalendarViewMode,
-  type CreateCalendarEventRequest,
-  type UpdateCalendarEventRequest,
-  type CalendarDay,
-  type CalendarMonth,
-  type CalendarWeek,
-  type ICalendarRepository,
-  // Swipe Actions
-  SwipeActionButton,
-  SwipeActionUtils,
-  ACTION_PRESETS,
-  DEFAULT_SWIPE_CONFIG,
-  type SwipeActionButtonProps,
-  type SwipeActionType,
-  type SwipeActionConfig,
-  type SwipeDirection,
-  type SwipeableConfig,
-  // Navigation
-  TabsNavigator,
-  StackNavigator,
-  createTabNavigator,
-  createStackNavigator,
-  FabButton,
-  NavigationCleanupManager,
-  AppNavigation,
-  NavigationContainer,
-  TabLabel,
-  NavigationHeader,
-  createScreenOptions,
-  createNavigationTheme,
-  useTabBarStyles,
-  useTabConfig,
-  useAppNavigation,
-  useAppRoute,
-  useAppFocusEffect,
-  useAppIsFocused,
-  type NavigationHeaderProps,
-  type ScreenOptionsParams,
-  type TabsNavigatorProps,
-  type StackNavigatorProps,
-  type StackNavigatorConfig,
-  type StackScreen,
-  type FabButtonProps,
-  type TabScreen,
-  type TabNavigatorConfig,
-  type BaseScreen,
-  type BaseNavigatorConfig,
-  type IconRendererProps,
-  type LabelProcessorProps,
-  type FabConfig,
-  type NavigationCleanup,
-  type BottomTabNavigationOptions,
-  type BottomTabScreenProps,
-  type StackNavigationOptions,
-  type StackScreenProps,
-  type RouteProp,
-  type TabLabelProps,
-  type TabBarConfig,
-  // Long Press Menu
-  type MenuAction,
-  type MenuActionTypeValue,
-  MenuActionType,
-  // Emoji
-  EmojiPicker,
-  useEmojiPicker,
-  EmojiCategory,
-  EmojiUtils,
-  type EmojiObject,
-  type EmojiPickerConfig,
-  type EmojiSelectCallback,
-  type EmojiPickerState,
-  type EmojiPickerProps,
-  type UseEmojiPickerOptions,
-  type UseEmojiPickerReturn,
-  // Countdown
-  Countdown,
-  TimeUnit,
-  CountdownHeader,
-  useCountdown,
-  calculateTimeRemaining,
-  padNumber,
-  getNextDayStart,
-  getNextYearStart,
-  type CountdownProps,
-  type TimeUnitProps,
-  type CountdownHeaderProps,
-  type UseCountdownOptions,
-  type UseCountdownReturn,
-  type TimeRemaining,
-  type CountdownTarget,
-  type CountdownFormatOptions,
-  type CountdownDisplayConfig,
-  // Step Header
-  StepHeader,
-  type StepHeaderProps,
-  type StepHeaderConfig,
-  // Splash
-  SplashScreen,
-  useSplashFlow,
-  type SplashScreenProps,
-  type SplashColors,
-  type UseSplashFlowOptions,
-  type UseSplashFlowResult,
-
-  // Filter Group
-  FilterGroup,
-  type FilterGroupProps,
-  type FilterGroupItem,
-  // Action Footer
-  ActionFooter,
-  type ActionFooterProps,
-
-  // Hero Section
-  HeroSection,
-  type HeroSectionProps,
-  // Info Grid
-  InfoGrid,
-  type InfoGridProps,
-  type InfoGridItem,
-
-  // Circular Menu
-  CircularMenu,
-  CircularMenuItem,
-  CircularMenuBackground,
-  CircularMenuCloseButton,
-  type CircularMenuProps,
-  type CircularMenuAction,
-} from "../molecules";

package/src/image/presentation/components/editor/TextEditorTabs.tsx

@@ -1,424 +0,0 @@
-/**
- * Presentation - Text Editor Tabs
- */
-
-import React from "react";
-import {
-  View,
-  TextInput,
-  ScrollView,
-  TouchableOpacity,
-  StyleSheet,
-} from "react-native";
-import { AtomicText, AtomicIcon } from "../../../../atoms";
-import { useAppDesignTokens } from "../../../../theme/hooks/useAppDesignTokens";
-
-interface TabProps {
-  t: (key: string) => string;
-}
-
-export const TextContentTab: React.FC<
-  TabProps & { text: string; onTextChange: (t: string) => void }
-> = ({ text, onTextChange, t }) => {
-  const tokens = useAppDesignTokens();
-  return (
-    <View style={{ gap: tokens.spacing.lg }}>
-      <TextInput
-        value={text}
-        onChangeText={onTextChange}
-        placeholder={t("editor.text_placeholder")}
-        style={[
-          styles.textInput,
-          {
-            ...tokens.typography.bodyLarge,
-            borderColor: tokens.colors.border,
-            borderRadius: tokens.borders.radius.md,
-            padding: tokens.spacing.md,
-            minHeight: 120,
-            color: tokens.colors.textPrimary,
-          },
-        ]}
-        multiline
-      />
-    </View>
-  );
-};
-
-export const TextStyleTab: React.FC<
-  TabProps & {
-    fontSize: number;
-    setFontSize: (s: number) => void;
-    color: string;
-    setColor: (c: string) => void;
-    fontFamily: string;
-    setFontFamily: (f: string) => void;
-  }
-> = ({ fontSize, setFontSize, color, setColor, fontFamily, setFontFamily }) => {
-  const tokens = useAppDesignTokens();
-  const colors = [
-    "#FFFFFF",
-    "#000000",
-    "#FF0000",
-    "#FFFF00",
-    "#0000FF",
-    "#00FF00",
-    "#FF00FF",
-    "#FFA500",
-  ];
-  const fonts = ["System", "serif", "sans-serif", "monospace"];
-  const fontSizes = [12, 14, 16, 18, 20, 24, 28, 32];
-
-  return (
-    <View style={{ gap: tokens.spacing.xl }}>
-      <View>
-        <AtomicText
-          style={{
-            ...tokens.typography.labelMedium,
-            marginBottom: tokens.spacing.sm,
-          }}
-        >
-          Font
-        </AtomicText>
-        <ScrollView
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          contentContainerStyle={{ gap: tokens.spacing.sm }}
-        >
-          {fonts.map((f) => (
-            <TouchableOpacity
-              key={f}
-              onPress={() => setFontFamily(f)}
-              style={[
-                styles.fontButton,
-                {
-                  paddingHorizontal: tokens.spacing.md,
-                  paddingVertical: tokens.spacing.xs,
-                  borderRadius: tokens.borders.radius.full,
-                  borderWidth: 1,
-                  borderColor:
-                    fontFamily === f
-                      ? tokens.colors.primary
-                      : tokens.colors.border,
-                  backgroundColor:
-                    fontFamily === f
-                      ? tokens.colors.primary
-                      : tokens.colors.surface,
-                },
-              ]}
-            >
-              <AtomicText style={{ fontFamily: f }}>{f}</AtomicText>
-            </TouchableOpacity>
-          ))}
-        </ScrollView>
-      </View>
-
-      <View>
-        <AtomicText
-          style={{
-            ...tokens.typography.labelMedium,
-            marginBottom: tokens.spacing.sm,
-          }}
-        >
-          Color
-        </AtomicText>
-        <ScrollView
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          contentContainerStyle={{ gap: tokens.spacing.sm }}
-        >
-          {colors.map((c) => (
-            <TouchableOpacity
-              key={c}
-              onPress={() => setColor(c)}
-              style={[
-                styles.colorButton,
-                {
-                  width: 40,
-                  height: 40,
-                  borderRadius: 20,
-                  backgroundColor: c,
-                  borderWidth: color === c ? 3 : 1,
-                  borderColor: tokens.colors.primary,
-                },
-              ]}
-            />
-          ))}
-        </ScrollView>
-      </View>
-
-      <View>
-        <AtomicText
-          style={{
-            ...tokens.typography.labelMedium,
-            marginBottom: tokens.spacing.xs,
-          }}
-        >
-          Size: {fontSize}px
-        </AtomicText>
-        <ScrollView
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          contentContainerStyle={{ gap: tokens.spacing.sm }}
-        >
-          {fontSizes.map((s) => (
-            <TouchableOpacity
-              key={s}
-              onPress={() => setFontSize(s)}
-              style={[
-                styles.sizeButton,
-                {
-                  paddingHorizontal: tokens.spacing.md,
-                  paddingVertical: tokens.spacing.sm,
-                  borderRadius: tokens.borders.radius.md,
-                  borderWidth: 1,
-                  borderColor:
-                    fontSize === s
-                      ? tokens.colors.primary
-                      : tokens.colors.border,
-                  backgroundColor:
-                    fontSize === s
-                      ? tokens.colors.primary
-                      : tokens.colors.surface,
-                },
-              ]}
-            >
-              <AtomicText
-                style={{
-                  color: fontSize === s ? "white" : tokens.colors.textPrimary,
-                  fontWeight: "600",
-                }}
-              >
-                {s}
-              </AtomicText>
-            </TouchableOpacity>
-          ))}
-        </ScrollView>
-      </View>
-    </View>
-  );
-};
-
-export const TextTransformTab: React.FC<
-  TabProps & {
-    scale: number;
-    setScale: (s: number) => void;
-    rotation: number;
-    setRotation: (r: number) => void;
-    opacity: number;
-    setOpacity: (o: number) => void;
-    onDelete?: () => void;
-  }
-> = ({
-  scale,
-  setScale,
-  rotation,
-  setRotation,
-  opacity,
-  setOpacity,
-  onDelete,
-}) => {
-  const tokens = useAppDesignTokens();
-  const scales = [0.5, 0.75, 1, 1.25, 1.5, 2];
-  const rotations = [0, 45, 90, 135, 180, 225, 270, 315];
-  const opacities = [0.2, 0.4, 0.6, 0.8, 1];
-
-  return (
-    <View style={{ gap: tokens.spacing.xl }}>
-      <View>
-        <AtomicText
-          style={{
-            ...tokens.typography.labelMedium,
-            marginBottom: tokens.spacing.xs,
-          }}
-        >
-          Scale: {scale.toFixed(2)}x
-        </AtomicText>
-        <ScrollView
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          contentContainerStyle={{ gap: tokens.spacing.sm }}
-        >
-          {scales.map((s) => (
-            <TouchableOpacity
-              key={s}
-              onPress={() => setScale(s)}
-              style={[
-                styles.transformButton,
-                {
-                  paddingHorizontal: tokens.spacing.md,
-                  paddingVertical: tokens.spacing.sm,
-                  borderRadius: tokens.borders.radius.md,
-                  borderWidth: 1,
-                  borderColor:
-                    scale === s ? tokens.colors.primary : tokens.colors.border,
-                  backgroundColor:
-                    scale === s ? tokens.colors.primary : tokens.colors.surface,
-                },
-              ]}
-            >
-              <AtomicText
-                style={{
-                  color: scale === s ? "white" : tokens.colors.textPrimary,
-                }}
-              >
-                {s.toFixed(1)}x
-              </AtomicText>
-            </TouchableOpacity>
-          ))}
-        </ScrollView>
-      </View>
-
-      <View>
-        <AtomicText
-          style={{
-            ...tokens.typography.labelMedium,
-            marginBottom: tokens.spacing.xs,
-          }}
-        >
-          Rotation: {Math.round(rotation)}°
-        </AtomicText>
-        <ScrollView
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          contentContainerStyle={{ gap: tokens.spacing.sm }}
-        >
-          {rotations.map((r) => (
-            <TouchableOpacity
-              key={r}
-              onPress={() => setRotation(r)}
-              style={[
-                styles.transformButton,
-                {
-                  paddingHorizontal: tokens.spacing.md,
-                  paddingVertical: tokens.spacing.sm,
-                  borderRadius: tokens.borders.radius.md,
-                  borderWidth: 1,
-                  borderColor:
-                    rotation === r
-                      ? tokens.colors.primary
-                      : tokens.colors.border,
-                  backgroundColor:
-                    rotation === r
-                      ? tokens.colors.primary
-                      : tokens.colors.surface,
-                },
-              ]}
-            >
-              <AtomicText
-                style={{
-                  color: rotation === r ? "white" : tokens.colors.textPrimary,
-                }}
-              >
-                {r}°
-              </AtomicText>
-            </TouchableOpacity>
-          ))}
-        </ScrollView>
-      </View>
-
-      <View>
-        <AtomicText
-          style={{
-            ...tokens.typography.labelMedium,
-            marginBottom: tokens.spacing.xs,
-          }}
-        >
-          Opacity: {(opacity * 100).toFixed(0)}%
-        </AtomicText>
-        <ScrollView
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          contentContainerStyle={{ gap: tokens.spacing.sm }}
-        >
-          {opacities.map((o) => (
-            <TouchableOpacity
-              key={o}
-              onPress={() => setOpacity(o)}
-              style={[
-                styles.transformButton,
-                {
-                  paddingHorizontal: tokens.spacing.md,
-                  paddingVertical: tokens.spacing.sm,
-                  borderRadius: tokens.borders.radius.md,
-                  borderWidth: 1,
-                  borderColor:
-                    opacity === o
-                      ? tokens.colors.primary
-                      : tokens.colors.border,
-                  backgroundColor:
-                    opacity === o
-                      ? tokens.colors.primary
-                      : tokens.colors.surface,
-                },
-              ]}
-            >
-              <AtomicText
-                style={{
-                  color: opacity === o ? "white" : tokens.colors.textPrimary,
-                }}
-              >
-                {Math.round(o * 100)}%
-              </AtomicText>
-            </TouchableOpacity>
-          ))}
-        </ScrollView>
-      </View>
-
-      {onDelete && (
-        <TouchableOpacity
-          onPress={onDelete}
-          style={[
-            styles.deleteButton,
-            {
-              flexDirection: "row",
-              alignItems: "center",
-              justifyContent: "center",
-              gap: tokens.spacing.sm,
-              padding: tokens.spacing.md,
-              borderRadius: tokens.borders.radius.md,
-              borderWidth: 1,
-              borderColor: tokens.colors.error,
-            },
-          ]}
-        >
-          <AtomicIcon name="trash" size={20} color="error" />
-          <AtomicText
-            style={{
-              ...tokens.typography.labelMedium,
-              color: tokens.colors.error,
-            }}
-          >
-            Delete Layer
-          </AtomicText>
-        </TouchableOpacity>
-      )}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  textInput: {
-    borderWidth: 1,
-    textAlignVertical: "top",
-  },
-  fontButton: {
-    paddingVertical: 8,
-    minWidth: 80,
-    alignItems: "center",
-  },
-  colorButton: {
-    width: 40,
-    height: 40,
-  },
-  sizeButton: {
-    minWidth: 50,
-    alignItems: "center",
-  },
-  transformButton: {
-    minWidth: 60,
-    alignItems: "center",
-  },
-  deleteButton: {
-    alignSelf: "flex-start",
-  },
-});