@umituz/react-native-design-system 1.4.3 → 1.5.1

package/src/index.ts

@@ -162,11 +162,8 @@ export {
   type SearchBarProps,
 } from './presentation/molecules/SearchBar';
 
-export {
-  LanguageSwitcher,
-} from './presentation/molecules/LanguageSwitcher';
-
 // SettingItem moved to @domains/settings/presentation/components/SettingItem
+// LanguageSwitcher moved to @umituz/react-native-localization
 // Import directly: import { SettingItem } from '@domains/settings/presentation/components/SettingItem';
 
 export {
@@ -228,22 +225,17 @@ export {
 // Import from feedback domain: import { FeedbackModal } from '@domains/feedback';
 
 // =============================================================================
-// LOADING - Loading States
-// =============================================================================
-// Loading components moved to separate package
-// Import from @umituz/react-native-loading when available
-
-// =============================================================================
-// TOKENS - Design Tokens (Refactored with ZERO duplication)
+// THEME-RELATED EXPORTS - Re-exported from @umituz/react-native-theme
 // =============================================================================
+// All tokens, colors, and theme utilities come from @umituz/react-native-theme
+// Design system does NOT define any tokens - it only uses them from theme package
 
 export {
-  // Static tokens (don't change with theme)
-  STATIC_TOKENS,
-  BASE_TOKENS,
-
   // Token factory
   createDesignTokens,
+  STATIC_DESIGN_TOKENS,
+  BASE_TOKENS,
+  STATIC_TOKENS,
 
   // Color utilities
   withAlpha,
@@ -251,23 +243,18 @@ export {
   darkColors,
   getColorPalette,
 
-  // Individual base tokens
-  spacing,
-  typography,
-  borders,
-
   // Type exports
   type DesignTokens,
   type ThemeMode,
   type ColorPalette,
+  type BaseTokens,
   type Spacing,
   type Typography,
   type Borders,
-  type BaseTokens,
-} from './presentation/tokens/AppDesignTokens';
+} from '@umituz/react-native-theme';
 
-// Hook for dynamic theme-aware tokens (exported separately to avoid cycle)
-export { useAppDesignTokens } from './presentation/hooks/useAppDesignTokens';
+// Hook for dynamic theme-aware tokens (re-exported from theme package)
+export { useAppDesignTokens } from '@umituz/react-native-theme';
 
 export {
   useCommonStyles,
@@ -328,18 +315,22 @@ export {
 // THEME MANAGEMENT - Global Theme Store
 // =============================================================================
 
+// Theme management moved to @umituz/react-native-theme
 export {
   useDesignSystemTheme,
-} from './infrastructure/theme/globalThemeStore';
+} from '@umituz/react-native-theme';
 
 // =============================================================================
 // ICONS DOMAIN - Universal Icon System
 // =============================================================================
+// Icon components have been moved to @umituz/react-native-icon package.
+// Import directly: import { Icon, IconName, IconSize, IconColor } from '@umituz/react-native-icon';
 
+// Re-export for backward compatibility (deprecated - use @umituz/react-native-icon directly)
 export {
   Icon,
   type IconProps,
   type IconSize,
   type IconColor,
   type IconName,
-} from './domains/icons/presentation/components/Icon';
+} from '@umituz/react-native-icon';

package/src/presentation/atoms/AtomicAvatar.tsx

@@ -18,7 +18,7 @@ import React from 'react';
 import { View, StyleSheet, ViewStyle, ImageStyle } from 'react-native';
 import { AtomicImage } from './AtomicImage';
 import { AtomicText } from './AtomicText';
-import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { useAppDesignTokens } from '@umituz/react-native-theme';
 
 // =============================================================================
 // TYPE DEFINITIONS

package/src/presentation/atoms/AtomicAvatarGroup.tsx

@@ -19,7 +19,7 @@ import React from 'react';
 import { View, StyleSheet, ViewStyle } from 'react-native';
 import { AtomicAvatar, AtomicAvatarProps } from './AtomicAvatar';
 import { AtomicText } from './AtomicText';
-import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { useAppDesignTokens } from '@umituz/react-native-theme';
 
 // =============================================================================
 // TYPE DEFINITIONS

package/src/presentation/atoms/AtomicBadge.tsx

@@ -17,8 +17,8 @@
 import React from 'react';
 import { View, StyleSheet, StyleProp, ViewStyle, TextStyle } from 'react-native';
 import { AtomicText } from './AtomicText';
-import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
-import type { DesignTokens } from '../tokens/AppDesignTokens';
+import { useAppDesignTokens } from '@umituz/react-native-theme';
+import type { DesignTokens } from '@umituz/react-native-theme';
 
 // =============================================================================
 // TYPE DEFINITIONS

package/src/presentation/atoms/AtomicButton.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { StyleSheet, StyleProp, ViewStyle, TextStyle, TouchableOpacity, View } from 'react-native';
 import { AtomicText } from './AtomicText';
-import { Icon } from '../../domains/icons/presentation/components/Icon';
-import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
-import type { IconName } from '../../domains/icons/domain/interfaces/IIconAdapter';
+import { Icon } from '@umituz/react-native-icon';
+import { useAppDesignTokens } from '@umituz/react-native-theme';
+import type { IconName } from '@umituz/react-native-icon';
 
 export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'text' | 'danger';
 export type ButtonSize = 'sm' | 'md' | 'lg';

package/src/presentation/atoms/AtomicCard.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, StyleProp, ViewStyle, Pressable } from 'react-native';
-import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { useAppDesignTokens } from '@umituz/react-native-theme';
 
 export type AtomicCardVariant = 'flat' | 'elevated' | 'outlined';
 export type AtomicCardPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';

package/src/presentation/atoms/AtomicChip.tsx

@@ -19,7 +19,7 @@ import React from 'react';
 import { View, StyleSheet, ViewStyle, TouchableOpacity } from 'react-native';
 import { AtomicText } from './AtomicText';
 import { AtomicIcon } from './AtomicIcon';
-import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { useAppDesignTokens } from '@umituz/react-native-theme';
 
 // =============================================================================
 // TYPE DEFINITIONS

package/src/presentation/atoms/AtomicDatePicker.tsx

@@ -47,7 +47,7 @@ import {
 } from 'react-native';
 import DateTimePicker, { DateTimePickerEvent } from '@react-native-community/datetimepicker';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { useAppDesignTokens } from '@umituz/react-native-theme';
 import { useResponsive } from '../hooks/useResponsive';
 import { AtomicIcon, type AtomicIconColor } from './AtomicIcon';
 

package/src/presentation/atoms/AtomicDivider.tsx

@@ -17,7 +17,7 @@
 
 import React from 'react';
 import { View, StyleSheet, ViewStyle } from 'react-native';
-import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { useAppDesignTokens } from '@umituz/react-native-theme';
 
 // =============================================================================
 // TYPE DEFINITIONS

package/src/presentation/atoms/AtomicFab.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TouchableOpacity, StyleSheet } from 'react-native';
-import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { useAppDesignTokens } from '@umituz/react-native-theme';
 import { useResponsive } from '../hooks/useResponsive';
 import { AtomicIcon } from './AtomicIcon';
 import { AtomicFabProps } from './fab/types';

package/src/presentation/atoms/AtomicFilter.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ScrollView, View, TouchableOpacity, ViewStyle } from 'react-native';
-import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { useAppDesignTokens } from '@umituz/react-native-theme';
 import { AtomicChip } from './AtomicChip';
 import { AtomicText } from './AtomicText';
 import { AtomicIcon } from './AtomicIcon';

package/src/presentation/atoms/AtomicFormError.tsx

@@ -17,8 +17,8 @@
 import React from 'react';
 import { View, StyleSheet, StyleProp, ViewStyle, TextStyle } from 'react-native';
 import { AtomicText } from './AtomicText';
-import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
-import { withAlpha } from '../tokens/AppDesignTokens';
+import { useAppDesignTokens } from '@umituz/react-native-theme';
+import { withAlpha } from '@umituz/react-native-theme';
 
 // =============================================================================
 // TYPE DEFINITIONS

package/src/presentation/atoms/AtomicIcon.tsx

@@ -7,9 +7,8 @@
  */
 
 import React from 'react';
-import { Icon } from '../../domains/icons/presentation/components/Icon';
-import type { IconProps, IconSize, IconColor } from '../../domains/icons/domain/interfaces/IIconAdapter';
-import type { LucideIconName } from '../../domains/icons/infrastructure/adapters/LucideAdapter';
+import { Icon } from '@umituz/react-native-icon';
+import type { IconProps, IconSize, IconColor, IconName } from '@umituz/react-native-icon';
 
 /**
  * AtomicIcon Component
@@ -38,4 +37,4 @@ export const AtomicIcon: React.FC<IconProps> = (props) => {
 export type AtomicIconProps = IconProps;
 export type AtomicIconSize = IconSize;
 export type AtomicIconColor = IconColor;
-export type AtomicIconName = LucideIconName;
+export type AtomicIconName = IconName;

package/src/presentation/atoms/AtomicImage.tsx

@@ -16,7 +16,7 @@
 
 import React from 'react';
 import { Image, ImageProps, StyleSheet, ViewStyle } from 'react-native';
-import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { useAppDesignTokens } from '@umituz/react-native-theme';
 
 // =============================================================================
 // TYPE DEFINITIONS

package/src/presentation/atoms/AtomicInput.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { View, TextInput, Pressable, StyleSheet, StyleProp, ViewStyle, TextStyle } from 'react-native';
-import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { useAppDesignTokens } from '@umituz/react-native-theme';
 import { AtomicIcon } from './AtomicIcon';
 import { AtomicText } from './AtomicText';
 import type { AtomicIconName, AtomicIconSize } from './AtomicIcon';

package/src/presentation/atoms/AtomicPicker.tsx

@@ -51,7 +51,7 @@ import {
   StyleSheet,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { useAppDesignTokens } from '@umituz/react-native-theme';
 import { AtomicPickerProps, PickerOption } from './picker/types';
 import { AtomicIcon } from './AtomicIcon';
 import { AtomicText } from './AtomicText';

package/src/presentation/atoms/AtomicProgress.tsx

@@ -16,7 +16,7 @@
 
 import React from 'react';
 import { View, StyleSheet, ViewStyle, DimensionValue, Text } from 'react-native';
-import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { useAppDesignTokens } from '@umituz/react-native-theme';
 
 // =============================================================================
 // TYPE DEFINITIONS

package/src/presentation/atoms/AtomicSearchBar.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, TextInput, TouchableOpacity, StyleSheet } from 'react-native';
 import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
-import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { useAppDesignTokens } from '@umituz/react-native-theme';
 import { AtomicIcon } from './AtomicIcon';
 
 export interface AtomicSearchBarProps {

package/src/presentation/atoms/AtomicSort.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ScrollView, View } from 'react-native';
 import type { StyleProp, ViewStyle } from 'react-native';
-import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { useAppDesignTokens } from '@umituz/react-native-theme';
 import { AtomicChip } from './AtomicChip';
 
 /**

package/src/presentation/atoms/AtomicSwitch.tsx

@@ -16,7 +16,7 @@
 
 import React from 'react';
 import { Switch, SwitchProps, StyleSheet, ViewStyle } from 'react-native';
-import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { useAppDesignTokens } from '@umituz/react-native-theme';
 
 // =============================================================================
 // TYPE DEFINITIONS

package/src/presentation/atoms/AtomicText.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Text, StyleProp, TextStyle } from 'react-native';
-import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { useAppDesignTokens } from '@umituz/react-native-theme';
 
 export type TextStyleVariant =
   | 'displayLarge' | 'displayMedium' | 'displaySmall'
@@ -9,22 +9,60 @@ export type TextStyleVariant =
   | 'bodyLarge' | 'bodyMedium' | 'bodySmall'
   | 'labelLarge' | 'labelMedium' | 'labelSmall';
 
+/**
+ * Material Design 3 Text Color Variants
+ * 
+ * TEXT COLORS (for text on surfaces):
+ * - textPrimary, textSecondary, textTertiary: General text colors
+ * - onSurface, onBackground: Text on surface/background
+ * 
+ * ON COLORS (for text on colored backgrounds):
+ * - onPrimary, onSecondary: Text on primary/secondary colored backgrounds
+ * - onSuccess, onError, onWarning, onInfo: Text on semantic colored backgrounds
+ * 
+ * SEMANTIC COLORS (can be used as text colors):
+ * - success, error, warning, info: Semantic colors (can be text or background)
+ * 
+ * NOTE: 'primary' and 'secondary' are BACKGROUND colors, not text colors.
+ * Use 'onPrimary'/'onSecondary' for text on colored backgrounds, or
+ * 'textPrimary'/'textSecondary' for general text.
+ */
 export type ColorVariant =
+  // General text colors (Material Design 3)
+  | 'textPrimary'
+  | 'textSecondary'
+  | 'textTertiary'
+  | 'textDisabled'
+  | 'textInverse'
+  // Text on surfaces (Material Design 3)
+  | 'onSurface'
+  | 'onBackground'
+  // Text on colored backgrounds (Material Design 3)
+  | 'onPrimary'
+  | 'onSecondary'
+  | 'onSuccess'
+  | 'onError'
+  | 'onWarning'
+  | 'onInfo'
+  // Semantic colors (can be used as text)
+  | 'success'
+  | 'error'
+  | 'warning'
+  | 'info'
+  // Legacy support (deprecated - use textPrimary/textSecondary instead)
   | 'primary'
   | 'secondary'
   | 'tertiary'
   | 'disabled'
-  | 'inverse'
-  | 'success'
-  | 'error'
-  | 'warning'
-  | 'info';
+  | 'inverse';
 
 export interface AtomicTextProps {
   children: React.ReactNode;
   type?: TextStyleVariant;
   color?: ColorVariant | string;
   numberOfLines?: number;
+  ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
+  textAlign?: 'auto' | 'left' | 'right' | 'center' | 'justify';
   style?: StyleProp<TextStyle>;
   testID?: string;
 }
@@ -34,6 +72,8 @@ export const AtomicText: React.FC<AtomicTextProps> = ({
   type = 'bodyMedium',
   color,
   numberOfLines,
+  ellipsizeMode,
+  textAlign,
   style,
   testID,
 }) => {
@@ -48,17 +88,39 @@ export const AtomicText: React.FC<AtomicTextProps> = ({
       return tokens.colors.textPrimary;
     }
 
-    // Check if it's a semantic color name
-    const colorMap: Record<ColorVariant, string> = {
-      primary: tokens.colors.textPrimary,
-      secondary: tokens.colors.textSecondary,
-      tertiary: tokens.colors.textTertiary,
-      disabled: tokens.colors.textDisabled,
-      inverse: tokens.colors.textInverse,
+    // Material Design 3 text color mapping
+    const colorMap: Partial<Record<ColorVariant, string>> = {
+      // General text colors (Material Design 3)
+      textPrimary: tokens.colors.textPrimary,
+      textSecondary: tokens.colors.textSecondary,
+      textTertiary: tokens.colors.textTertiary,
+      textDisabled: tokens.colors.textDisabled,
+      textInverse: tokens.colors.textInverse,
+      
+      // Text on surfaces (Material Design 3)
+      onSurface: tokens.colors.onSurface,
+      onBackground: tokens.colors.onBackground,
+      
+      // Text on colored backgrounds (Material Design 3)
+      onPrimary: tokens.colors.onPrimary,
+      onSecondary: tokens.colors.onSecondary,
+      onSuccess: tokens.colors.onSuccess,
+      onError: tokens.colors.onError,
+      onWarning: tokens.colors.onWarning,
+      onInfo: tokens.colors.onInfo,
+      
+      // Semantic colors (can be used as text)
       success: tokens.colors.success,
       error: tokens.colors.error,
       warning: tokens.colors.warning,
       info: tokens.colors.info,
+      
+      // Legacy support (deprecated - maps to new names)
+      primary: tokens.colors.textPrimary, // Legacy: use textPrimary or onPrimary
+      secondary: tokens.colors.textSecondary, // Legacy: use textSecondary or onSecondary
+      tertiary: tokens.colors.textTertiary, // Legacy: use textTertiary
+      disabled: tokens.colors.textDisabled, // Legacy: use textDisabled
+      inverse: tokens.colors.textInverse, // Legacy: use textInverse
     };
 
     return colorMap[color as ColorVariant] || color;
@@ -66,13 +128,17 @@ export const AtomicText: React.FC<AtomicTextProps> = ({
 
   const textStyle: StyleProp<TextStyle> = [
     typographyStyle,
-    { color: getTextColor() },
+    { 
+      color: getTextColor(),
+      ...(textAlign && { textAlign }),
+    },
     style,
   ];
 
   return (
     <Text
       numberOfLines={numberOfLines}
+      ellipsizeMode={ellipsizeMode}
       style={textStyle}
       testID={testID}
     >

package/src/presentation/atoms/AtomicTextArea.tsx

@@ -33,7 +33,7 @@
 
 import React, { useState } from 'react';
 import { View, TextInput, StyleSheet, StyleProp, ViewStyle, TextStyle } from 'react-native';
-import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { useAppDesignTokens } from '@umituz/react-native-theme';
 import { AtomicText } from './AtomicText';
 
 export type AtomicTextAreaVariant = 'outlined' | 'filled' | 'flat';

package/src/presentation/atoms/AtomicTouchable.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Pressable, StyleSheet } from 'react-native';
-import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { Pressable } from 'react-native';
+import { useAppDesignTokens } from '@umituz/react-native-theme';
 import { AtomicTouchableProps, TouchableFeedback, FeedbackStrength } from './touchable/types';
 import {
   getOpacityValue,

package/src/presentation/atoms/fab/styles/fabStyles.ts

@@ -1,6 +1,6 @@
 import { ViewStyle } from 'react-native';
 import { FabVariant, FabSize, FabVariantConfig, FabSizeConfig } from '../types';
-import type { DesignTokens } from '../../../tokens/AppDesignTokens';
+import type { DesignTokens } from '@umituz/react-native-theme';
 
 /**
  * Material Design 3 FAB size configurations

package/src/presentation/atoms/input/styles/inputStyles.ts

@@ -1,5 +1,5 @@
 import { ViewStyle, TextStyle } from 'react-native';
-import { useAppDesignTokens } from '../../../hooks/useAppDesignTokens';
+import { useAppDesignTokens } from '@umituz/react-native-theme';
 import { AtomicInputVariant, AtomicInputSize, AtomicInputState } from '../types';
 
 type DesignTokens = ReturnType<typeof useAppDesignTokens>;

package/src/presentation/atoms/picker/styles/pickerStyles.ts

@@ -1,10 +1,8 @@
 import { ViewStyle, TextStyle } from 'react-native';
-import { useAppDesignTokens } from '../../../hooks/useAppDesignTokens';
+import { useAppDesignTokens, type DesignTokens } from '@umituz/react-native-theme';
 import { PickerSize } from '../types';
 import { IOS_HIG, getMinTouchTarget } from '../../../utils/platformConstants';
 
-type DesignTokens = ReturnType<typeof useAppDesignTokens>;
-
 /**
  * Picker container styles with iOS HIG compliance
  *
@@ -50,7 +48,10 @@ export const getPickerContainerStyles = (tokens: DesignTokens) => ({
   },
 });
 
-export const getPickerLabelStyles = (tokens: DesignTokens) => ({
+export const getPickerLabelStyles = (tokens: DesignTokens): {
+  base: TextStyle;
+  size: { sm: TextStyle; md: TextStyle; lg: TextStyle };
+} => ({
   base: {
     marginBottom: tokens.spacing.xs,
     color: tokens.colors.textPrimary,
@@ -63,7 +64,10 @@ export const getPickerLabelStyles = (tokens: DesignTokens) => ({
   },
 });
 
-export const getPickerPlaceholderStyles = (tokens: DesignTokens) => ({
+export const getPickerPlaceholderStyles = (tokens: DesignTokens): {
+  base: TextStyle;
+  size: { sm: TextStyle; md: TextStyle; lg: TextStyle };
+} => ({
   base: {
     color: tokens.colors.textSecondary,
   },
@@ -74,7 +78,10 @@ export const getPickerPlaceholderStyles = (tokens: DesignTokens) => ({
   },
 });
 
-export const getPickerValueStyles = (tokens: DesignTokens) => ({
+export const getPickerValueStyles = (tokens: DesignTokens): {
+  base: TextStyle;
+  size: { sm: TextStyle; md: TextStyle; lg: TextStyle };
+} => ({
   base: {
     flex: 1,
     color: tokens.colors.textPrimary,

package/src/presentation/molecules/AtomicConfirmationModal.tsx

@@ -39,9 +39,7 @@
 
 import React from 'react';
 import { View, Modal, TouchableOpacity } from 'react-native';
-import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
-// @ts-ignore - Optional peer dependency
-import { useLocalization } from '@umituz/react-native-localization';
+import { useAppDesignTokens } from '@umituz/react-native-theme';
 import { AtomicText } from '../atoms/AtomicText';
 import { AtomicButton } from '../atoms/AtomicButton';
 import { AtomicIcon } from '../atoms/AtomicIcon';
@@ -80,29 +78,10 @@ export const AtomicConfirmationModal: React.FC<AtomicConfirmationModalProps> = (
   testID = 'atomic-confirmation-modal',
 }) => {
   const tokens = useAppDesignTokens();
-  const { t } = useLocalization();
 
   // Get variant-specific configuration (icon and color only)
   const variantConfig = getVariantConfig(variant as 'default' | 'destructive' | 'warning' | 'success', tokens);
 
-  // Get locale-aware default text based on variant
-  const getDefaultConfirmText = (): string => {
-    switch (variant) {
-      case 'destructive':
-        return t('general.delete');
-      case 'warning':
-        return t('general.continue');
-      case 'success':
-      case 'default':
-      default:
-        return t('general.confirm');
-    }
-  };
-
-  // Determine final text values
-  const finalConfirmText = confirmText || getDefaultConfirmText();
-  const finalCancelText = cancelText || t('general.cancel');
-
   // Determine final icon
   const finalIcon = icon || variantConfig.icon;
 
@@ -185,7 +164,7 @@ export const AtomicConfirmationModal: React.FC<AtomicConfirmationModalProps> = (
               style={getButtonStyle()}
               testID={`${testID}-cancel-button`}
             >
-              {finalCancelText}
+              {cancelText}
             </AtomicButton>
 
             {/* Confirm Button */}
@@ -201,7 +180,7 @@ export const AtomicConfirmationModal: React.FC<AtomicConfirmationModalProps> = (
               ]}
               testID={`${testID}-confirm-button`}
             >
-              {finalConfirmText}
+              {confirmText}
             </AtomicButton>
           </View>
         </View>
@@ -231,8 +210,8 @@ export const useConfirmationModal = (config: {
   title: string;
   message: string;
   variant?: ConfirmationModalVariant;
-  confirmText?: string;
-  cancelText?: string;
+  confirmText: string;
+  cancelText: string;
   onConfirm: () => void;
 }) => {
   const [visible, setVisible] = React.useState(false);

package/src/presentation/molecules/EmptyState.tsx

@@ -17,7 +17,7 @@
 import React from 'react';
 import { View, StyleSheet, ViewStyle, TextStyle } from 'react-native';
 import { AtomicText, AtomicIcon } from '../atoms';
-import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { useAppDesignTokens } from '@umituz/react-native-theme';
 
 // =============================================================================
 // TYPE DEFINITIONS

package/src/presentation/molecules/FormField.tsx

@@ -10,7 +10,7 @@
 
 import React from 'react';
 import { View, ViewStyle } from 'react-native';
-import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { useAppDesignTokens } from '@umituz/react-native-theme';
 import { AtomicText } from '../atoms/AtomicText';
 import { AtomicInput, AtomicInputProps } from '../atoms/AtomicInput';
 

package/src/presentation/molecules/IconContainer.tsx

@@ -16,7 +16,7 @@
 
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
-import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { useAppDesignTokens } from '@umituz/react-native-theme';
 import { LinearGradient } from 'expo-linear-gradient';
 
 interface IconContainerProps {

package/src/presentation/molecules/ListItem.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TouchableOpacity, View } from 'react-native';
-import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { useAppDesignTokens } from '@umituz/react-native-theme';
 import { AtomicText } from '../atoms/AtomicText';
 import { AtomicIcon } from '../atoms/AtomicIcon';
 import { ListItemProps } from './listitem/types';