@umituz/react-native-settings 5.3.3 → 5.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "5.3.3",
+  "version": "5.3.4",
   "description": "Complete settings hub for React Native apps - consolidated package with settings, localization, about, legal, appearance, feedback, FAQs, rating, and gamification",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -117,7 +117,6 @@
     "url": "https://github.com/umituz/react-native-settings"
   },
   "peerDependencies": {
-    "firebase": ">=10.0.0",
     "@expo/vector-icons": ">=14.0.0",
     "@react-navigation/native": ">=6.0.0",
     "@react-navigation/stack": ">=6.0.0",
@@ -129,6 +128,7 @@
     "expo-localization": ">=16.0.0",
     "expo-notifications": ">=0.28.0",
     "expo-store-review": ">=8.0.0",
+    "firebase": ">=10.0.0",
     "i18next": ">=23.0.0",
     "react": ">=19.0.0",
     "react-i18next": ">=15.0.0",
@@ -157,7 +157,7 @@
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "@umituz/react-native-auth": "*",
-    "@umituz/react-native-design-system": "latest",
+    "@umituz/react-native-design-system": "^4.25.34",
     "@umituz/react-native-firebase": "^2.4.1",
     "@umituz/react-native-sentry": "latest",
     "eslint": "^8.57.0",

package/src/account.ts

@@ -19,12 +19,6 @@
  *   />
  */
 
-import { useMemo } from "react";
-import { useAuth, useUserProfile, useAuthHandlers } from "@umituz/react-native-auth";
-import { useSettingsScreenConfig } from './presentation/hooks/useSettingsScreenConfig';
-import type { UseSettingsScreenConfigParams, SettingsScreenConfigResult } from './presentation/hooks/useSettingsScreenConfig';
-import type { AppInfo } from './presentation/navigation/types';
-
 // Auth components - inject these into SettingsStackNavigator props
 export { AccountScreen, ProfileSection } from "@umituz/react-native-auth";
 
@@ -34,47 +28,17 @@ export { useAuth, useUserProfile, useAuthHandlers } from "@umituz/react-native-a
 // Auth types
 export type { AccountScreenConfig } from "@umituz/react-native-auth";
 
-// Base hook (accepts authData param)
+// Base hook (already handles auth internally via useAuth/useUserProfile/useAuthHandlers)
 export { useSettingsScreenConfig } from './presentation/hooks/useSettingsScreenConfig';
 
+// Alias for clarity - useSettingsScreenConfig already includes auth
+export { useSettingsScreenConfig as useSettingsScreenConfigWithAuth } from './presentation/hooks/useSettingsScreenConfig';
+
 // Re-export types
 export type {
   UseSettingsScreenConfigParams,
   SettingsScreenConfigResult,
   SettingsFeatures,
-  AuthData,
 } from './presentation/hooks/useSettingsScreenConfig';
 
 export type { AccountConfig } from './presentation/navigation/types';
-
-/**
- * Convenience wrapper that auto-injects auth data from @umituz/react-native-auth.
- * Drop-in replacement for the old useSettingsScreenConfig that called auth hooks internally.
- *
- * Usage:
- *   const { settingsConfig, userProfile, accountConfig, ... } = useSettingsScreenConfigWithAuth({ appInfo, ... });
- */
-export const useSettingsScreenConfigWithAuth = (
-  params: Omit<UseSettingsScreenConfigParams, 'authData'>
-): SettingsScreenConfigResult => {
-  const { user, loading, isAuthReady } = useAuth();
-  const userProfileData = useUserProfile({});
-  const { handleRatePress, handleSignOut, handleDeleteAccount, handleSignIn } =
-    useAuthHandlers(params.appInfo as AppInfo, params.translations?.errors);
-
-  const authData = useMemo(() => ({
-    user,
-    loading,
-    isAuthReady,
-    userProfileData,
-    handleRatePress,
-    handleSignOut,
-    handleDeleteAccount,
-    handleSignIn,
-  }), [user, loading, isAuthReady, userProfileData, handleRatePress, handleSignOut, handleDeleteAccount, handleSignIn]);
-
-  return useSettingsScreenConfig({
-    ...params,
-    authData,
-  });
-};

package/src/domains/about/presentation/components/AboutContent.tsx

@@ -7,7 +7,8 @@ import { View, StyleSheet } from 'react-native';
 import { AboutSettingItem } from './AboutSettingItem';
 import { AppInfo } from '../../domain/entities/AppInfo';
 import { AboutConfig } from '../../domain/entities/AppInfo';
-import { useAppDesignTokens, AtomicText, type DesignTokens } from '@umituz/react-native-design-system';
+import { AtomicText } from '@umituz/react-native-design-system/atoms';
+import { useAppDesignTokens, type DesignTokens } from '@umituz/react-native-design-system/theme';
 
 export interface AboutContentProps {
   /** App information to display */

package/src/domains/about/presentation/components/AboutHeader.tsx

@@ -4,7 +4,8 @@
  */
 import React from 'react';
 import { View, StyleSheet, ViewStyle, TextStyle } from 'react-native';
-import { useAppDesignTokens, AtomicText, type DesignTokens } from '@umituz/react-native-design-system';
+import { AtomicText } from '@umituz/react-native-design-system/atoms';
+import { useAppDesignTokens, type DesignTokens } from '@umituz/react-native-design-system/theme';
 import { AppInfo } from '../../domain/entities/AppInfo';
 
 export interface AboutHeaderProps {

package/src/domains/about/presentation/components/AboutSettingItem.tsx

@@ -12,7 +12,8 @@ import {
   ViewStyle,
   TextStyle,
 } from 'react-native';
-import { useAppDesignTokens, AtomicText, AtomicIcon, type DesignTokens } from '@umituz/react-native-design-system';
+import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system/atoms';
+import { useAppDesignTokens, type DesignTokens } from '@umituz/react-native-design-system/theme';
 
 export interface AboutSettingItemProps {
   /** Icon component (any React component) */

package/src/domains/about/presentation/screens/AboutScreen.tsx

@@ -4,7 +4,10 @@
  * Fully configurable and generic
  * Optimized for performance and memory safety
  */
-import { ScreenLayout, NavigationHeader, useAppDesignTokens, useAppNavigation, AtomicText, AtomicSpinner } from '@umituz/react-native-design-system';
+import { AtomicText, AtomicSpinner } from '@umituz/react-native-design-system/atoms';
+import { ScreenLayout } from '@umituz/react-native-design-system/layouts';
+import { NavigationHeader, useAppNavigation } from '@umituz/react-native-design-system/molecules';
+import { useAppDesignTokens } from '@umituz/react-native-design-system/theme';
 import { useAboutInfo } from '../hooks/useAboutInfo';
 import { AboutScreenContent } from './AboutScreenContent';
 

package/src/domains/about/presentation/screens/AboutScreenContent.tsx

@@ -11,7 +11,7 @@ import {
 import { AboutHeader } from '../components/AboutHeader';
 import { AboutContent } from '../components/AboutContent';
 import { AboutConfig, AppInfo } from '../../domain/entities/AppInfo';
-import type { DesignTokens } from '@umituz/react-native-design-system';
+import type { DesignTokens } from '@umituz/react-native-design-system/theme';
 import type { AboutScreenProps } from './AboutScreen';
 
 export interface AboutScreenContentProps extends Omit<AboutScreenProps, 'config'> {

package/src/domains/appearance/hooks/useAppearance.ts

@@ -1,4 +1,4 @@
-import { useTheme, type ThemeMode as BaseThemeMode, type CustomThemeColors } from "@umituz/react-native-design-system";
+import { useTheme, type ThemeMode as BaseThemeMode, type CustomThemeColors } from "@umituz/react-native-design-system/theme";
 import type { ThemeMode } from "../types";
 
 export const useAppearance = () => {

package/src/domains/appearance/hooks/useAppearanceActions.ts

@@ -1,6 +1,6 @@
 import { useState, useCallback, useEffect, useRef } from "react";
 import { useAppearance } from "./useAppearance";
-import type { CustomThemeColors } from "@umituz/react-native-design-system";
+import type { CustomThemeColors } from "@umituz/react-native-design-system/theme";
 import type { ThemeMode } from "../types";
 
 export const useAppearanceActions = () => {

package/src/domains/appearance/presentation/components/AppearanceHeader.tsx

@@ -5,8 +5,8 @@
 
 import React from "react";
 import { View, StyleSheet, type StyleProp, type ViewStyle } from "react-native";
-import { AtomicText } from "@umituz/react-native-design-system";
-import type { DesignTokens } from "@umituz/react-native-design-system";
+import { AtomicText } from "@umituz/react-native-design-system/atoms";
+import type { DesignTokens } from "@umituz/react-native-design-system/theme";
 
 export interface AppearanceHeaderProps {
   tokens: DesignTokens;

package/src/domains/appearance/presentation/components/AppearancePreview.tsx

@@ -5,8 +5,8 @@
 
 import React from "react";
 import { View, StyleSheet } from "react-native";
-import { AtomicText } from "@umituz/react-native-design-system";
-import type { DesignTokens } from "@umituz/react-native-design-system";
+import { AtomicText } from "@umituz/react-native-design-system/atoms";
+import type { DesignTokens } from "@umituz/react-native-design-system/theme";
 import type { CustomThemeColors } from "../../types";
 
 export interface PreviewColorItem {

package/src/domains/appearance/presentation/components/ColorPicker.tsx

@@ -7,11 +7,8 @@
 
 import React, { useMemo, useCallback } from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
-import {
-  AtomicIcon,
-  AtomicText,
-  useAppDesignTokens,
-} from "@umituz/react-native-design-system";
+import { AtomicIcon, AtomicText } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { isDev } from "../../../../utils/devUtils";
 
 interface ColorPickerProps {

package/src/domains/appearance/presentation/components/CustomColorsSection.tsx

@@ -5,14 +5,14 @@
 
 import React, { useMemo, useCallback } from "react";
 import { View, StyleSheet } from "react-native";
-import { AtomicText, AtomicButton } from "@umituz/react-native-design-system";
+import { AtomicText, AtomicButton } from "@umituz/react-native-design-system/atoms";
+import type { DesignTokens } from "@umituz/react-native-design-system/theme";
 import { ColorPicker } from "./ColorPicker";
 import {
   DEFAULT_PRIMARY_COLORS,
   DEFAULT_SECONDARY_COLORS,
   DEFAULT_ACCENT_COLORS,
 } from "../../data/colorPalettes";
-import type { DesignTokens } from "@umituz/react-native-design-system";
 import type { CustomThemeColors } from "../../types";
 
 export interface ColorFieldConfig {

package/src/domains/appearance/presentation/components/ThemeModeSection.tsx

@@ -5,9 +5,9 @@
 
 import React, { useMemo, useCallback } from "react";
 import { View, StyleSheet } from "react-native";
-import { AtomicText } from "@umituz/react-native-design-system";
+import { AtomicText } from "@umituz/react-native-design-system/atoms";
+import type { DesignTokens } from "@umituz/react-native-design-system/theme";
 import { ThemeOption } from "./ThemeOption";
-import type { DesignTokens } from "@umituz/react-native-design-system";
 import type { ThemeMode } from "../../types";
 
 export interface ThemeOptionConfig {

package/src/domains/appearance/presentation/components/ThemeOption.tsx

@@ -7,8 +7,8 @@
 
 import React, { useMemo } from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
-import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import type { ThemeMode } from "../../types";
 
 interface ThemeOptionProps {

package/src/domains/appearance/presentation/screens/AppearanceScreen.tsx

@@ -6,12 +6,9 @@
  */
 
 import React, { useMemo, useCallback } from "react";
-import { 
-  ScreenLayout, 
-  useAppDesignTokens,
-  NavigationHeader,
-  useAppNavigation
-} from "@umituz/react-native-design-system";
+import { ScreenLayout } from "@umituz/react-native-design-system/layouts";
+import { NavigationHeader, useAppNavigation } from "@umituz/react-native-design-system/molecules";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { useAppearance } from "../../hooks/useAppearance";
 import { useAppearanceActions } from "../../hooks/useAppearanceActions";
 import {

package/src/domains/appearance/types/index.ts

@@ -4,10 +4,7 @@
  * Types for appearance settings including theme mode and custom colors
  */
 
-import type {
-  ThemeMode as BaseThemeMode,
-  CustomThemeColors,
-} from "@umituz/react-native-design-system";
+import type { ThemeMode as BaseThemeMode, CustomThemeColors } from "@umituz/react-native-design-system/theme";
 
 // Extended theme mode to support 'auto' option
 export type ThemeMode = BaseThemeMode | 'auto';

package/src/domains/dev/presentation/components/DevSettingsSection.tsx

@@ -9,7 +9,8 @@
 
 import React from "react";
 import { Alert } from "react-native";
-import { useAppDesignTokens, storageRepository } from "@umituz/react-native-design-system";
+import { storageRepository } from "@umituz/react-native-design-system/storage";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { SettingsSection } from "../../../../presentation/components/SettingsSection";
 import { SettingsItemCard } from "../../../../presentation/components/SettingsItemCard";
 

package/src/domains/dev/presentation/components/EnvViewerSetting.tsx

@@ -5,7 +5,8 @@
  */
 
 import React from "react";
-import { useAppDesignTokens, useAppNavigation } from "@umituz/react-native-design-system";
+import { useAppNavigation } from "@umituz/react-native-design-system/molecules";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { SettingsItemCard } from "../../../../presentation/components/SettingsItemCard";
 import type { EnvConfig } from "../../types";
 

package/src/domains/dev/presentation/screens/EnvViewerScreen.tsx

@@ -6,16 +6,10 @@
 
 import React, { useState, useMemo } from "react";
 import { View, StyleSheet } from "react-native";
-import {
-  AtomicText,
-  AtomicIcon,
-  AtomicTouchable,
-  useAppDesignTokens,
-  useAppNavigation,
-  AlertService,
-  ScreenLayout,
-  NavigationHeader,
-} from "@umituz/react-native-design-system";
+import { AtomicText, AtomicIcon, AtomicTouchable } from "@umituz/react-native-design-system/atoms";
+import { ScreenLayout } from "@umituz/react-native-design-system/layouts";
+import { useAppNavigation, AlertService, NavigationHeader } from "@umituz/react-native-design-system/molecules";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import * as Clipboard from "expo-clipboard";
 import type { EnvConfig } from "../../types";
 

package/src/domains/disclaimer/presentation/components/DisclaimerCard.tsx

@@ -11,9 +11,8 @@ import {
   type TextStyle,
 } from 'react-native';
 
-import { useAppDesignTokens, withAlpha } from '@umituz/react-native-design-system';
-import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
-import type { IconName } from '@umituz/react-native-design-system';
+import { AtomicText, AtomicIcon, type IconName } from '@umituz/react-native-design-system/atoms';
+import { useAppDesignTokens, withAlpha } from '@umituz/react-native-design-system/theme';
 
 export interface DisclaimerCardProps {
   title: string;

package/src/domains/disclaimer/presentation/components/DisclaimerModal.tsx

@@ -11,7 +11,9 @@ import {
   ScrollView,
 } from 'react-native';
 
-import { useAppDesignTokens, AtomicText, AtomicIcon, BaseModal } from '@umituz/react-native-design-system';
+import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system/atoms';
+import { BaseModal } from '@umituz/react-native-design-system/molecules';
+import { useAppDesignTokens } from '@umituz/react-native-design-system/theme';
 
 export interface DisclaimerModalProps {
   visible: boolean;

package/src/domains/disclaimer/presentation/components/DisclaimerSetting.tsx

@@ -20,7 +20,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { Modal } from 'react-native';
 
-import { useAppDesignTokens, withAlpha } from '@umituz/react-native-design-system';
+import { useAppDesignTokens, withAlpha } from '@umituz/react-native-design-system/theme';
 import { DisclaimerCard } from './DisclaimerCard';
 import { DisclaimerModal } from './DisclaimerModal';
 

package/src/domains/disclaimer/presentation/screens/DisclaimerScreen.tsx

@@ -14,15 +14,10 @@
 
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
-import { 
-  useAppDesignTokens, 
-  withAlpha, 
-  ScreenLayout, 
-  useAppNavigation, 
-  NavigationHeader 
-} from '@umituz/react-native-design-system';
-import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
-import type { IconName } from '@umituz/react-native-design-system';
+import { AtomicText, AtomicIcon, type IconName } from '@umituz/react-native-design-system/atoms';
+import { ScreenLayout } from '@umituz/react-native-design-system/layouts';
+import { useAppNavigation, NavigationHeader } from '@umituz/react-native-design-system/molecules';
+import { useAppDesignTokens, withAlpha } from '@umituz/react-native-design-system/theme';
 
 export interface DisclaimerScreenProps {
   /** Custom title (overrides translation) */

package/src/domains/faqs/presentation/components/FAQCategory.tsx

@@ -6,7 +6,8 @@
 
 import React, { useMemo } from 'react';
 import { View, StyleSheet, ViewStyle } from 'react-native';
-import { useAppDesignTokens, AtomicText } from '@umituz/react-native-design-system';
+import { AtomicText } from '@umituz/react-native-design-system/atoms';
+import { useAppDesignTokens } from '@umituz/react-native-design-system/theme';
 import { FAQCategory as FAQCategoryType } from '../../domain/entities/FAQEntity';
 import { FAQItemComponent, FAQItemStyles } from './FAQItem';
 

package/src/domains/faqs/presentation/components/FAQEmptyState.tsx

@@ -6,7 +6,8 @@
 
 import React, { useMemo } from 'react';
 import { View, StyleSheet, ViewStyle, TextStyle } from 'react-native';
-import { useAppDesignTokens, AtomicText } from '@umituz/react-native-design-system';
+import { AtomicText } from '@umituz/react-native-design-system/atoms';
+import { useAppDesignTokens } from '@umituz/react-native-design-system/theme';
 
 export interface FAQEmptyStateStyles {
     container?: ViewStyle;

package/src/domains/faqs/presentation/components/FAQItem.tsx

@@ -6,7 +6,8 @@
 
 import React, { useMemo } from 'react';
 import { View, TouchableOpacity, StyleSheet, ViewStyle } from 'react-native';
-import { useAppDesignTokens, AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
+import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system/atoms';
+import { useAppDesignTokens } from '@umituz/react-native-design-system/theme';
 import { FAQItem as FAQItemType } from '../../domain/entities/FAQEntity';
 
 export interface FAQItemStyles {

package/src/domains/faqs/presentation/components/FAQSearchBar.tsx

@@ -6,7 +6,8 @@
 
 import React, { useMemo } from 'react';
 import { View, TextInput, StyleSheet, ViewStyle, TextStyle } from 'react-native';
-import { useAppDesignTokens, AtomicIcon } from '@umituz/react-native-design-system';
+import { AtomicIcon } from '@umituz/react-native-design-system/atoms';
+import { useAppDesignTokens } from '@umituz/react-native-design-system/theme';
 
 export interface FAQSearchBarStyles {
     container?: ViewStyle;

package/src/domains/faqs/presentation/screens/FAQScreen.tsx

@@ -6,7 +6,10 @@
 
 import React, { useMemo, useCallback } from 'react';
 import { View, FlatList, StyleSheet, ViewStyle, TextStyle, useWindowDimensions } from 'react-native';
-import { useAppDesignTokens, ScreenLayout, getContentMaxWidth, NavigationHeader, useAppNavigation } from '@umituz/react-native-design-system';
+import { getContentMaxWidth } from '@umituz/react-native-design-system/device';
+import { ScreenLayout } from '@umituz/react-native-design-system/layouts';
+import { NavigationHeader, useAppNavigation } from '@umituz/react-native-design-system/molecules';
+import { useAppDesignTokens } from '@umituz/react-native-design-system/theme';
 import { FAQCategory } from '../../domain/entities/FAQEntity';
 import { useFAQSearch } from '../hooks/useFAQSearch';
 import { useFAQExpansion } from '../hooks/useFAQExpansion';

package/src/domains/feedback/presentation/components/FeedbackForm.styles.ts

@@ -1,5 +1,5 @@
 import { StyleSheet } from "react-native";
-import type { useAppDesignTokens } from "@umituz/react-native-design-system";
+import type { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 
 export const getFeedbackFormStyles = (_tokens: ReturnType<typeof useAppDesignTokens>) =>
   StyleSheet.create({

package/src/domains/feedback/presentation/components/FeedbackForm.tsx

@@ -5,12 +5,12 @@
 
 import React, { useReducer } from "react";
 import { View, TouchableOpacity, ScrollView, TextInput } from "react-native";
-import { useAppDesignTokens, AtomicText, AtomicButton, AtomicIcon } from "@umituz/react-native-design-system";
+import { AtomicText, AtomicButton, AtomicIcon } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens, type DesignTokens } from "@umituz/react-native-design-system/theme";
 import type { FeedbackType, FeedbackRating } from "../../domain/entities/FeedbackEntity";
 import { validateFeedbackForm } from "../../../../infrastructure/utils/validation";
 import type { FeedbackFormProps } from "./FeedbackFormProps";
 import { getFeedbackFormStyles as getStyles } from "./FeedbackForm.styles";
-import type { DesignTokens } from "@umituz/react-native-design-system";
 
 interface FeedbackFormState {
     selectedType: FeedbackType;

package/src/domains/feedback/presentation/components/FeedbackModal.tsx

@@ -5,7 +5,10 @@
 
 import React from "react";
 import { View, StyleSheet, TouchableOpacity } from "react-native";
-import { useAppDesignTokens, AtomicText, AtomicIcon, BaseModal, ScreenLayout } from "@umituz/react-native-design-system";
+import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
+import { ScreenLayout } from "@umituz/react-native-design-system/layouts";
+import { BaseModal } from "@umituz/react-native-design-system/molecules";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { FeedbackForm } from "./FeedbackForm";
 import type { FeedbackType, FeedbackRating } from "../../domain/entities/FeedbackEntity";
 import type { FeedbackFormProps } from "./FeedbackFormProps";

package/src/domains/gamification/components/AchievementCard.tsx

@@ -5,7 +5,9 @@
 
 import React from "react";
 import { View, StyleSheet, type ViewStyle, type TextStyle } from "react-native";
-import { useAppDesignTokens, AtomicText, withAlpha, useResponsive } from "@umituz/react-native-design-system";
+import { AtomicText } from "@umituz/react-native-design-system/atoms";
+import { useResponsive } from "@umituz/react-native-design-system/responsive";
+import { useAppDesignTokens, withAlpha } from "@umituz/react-native-design-system/theme";
 
 export interface AchievementCardProps {
   title: string;

package/src/domains/gamification/components/AchievementItem.tsx

@@ -5,7 +5,8 @@
 
 import React from "react";
 import { View } from "react-native";
-import { useAppDesignTokens, AtomicText, AtomicIcon, withAlpha } from "@umituz/react-native-design-system";
+import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens, withAlpha } from "@umituz/react-native-design-system/theme";
 import type { AchievementItemProps } from "./types/AchievementItemProps";
 import { achievementItemStyles as styles } from "./styles/achievementItemStyles";
 

package/src/domains/gamification/components/AchievementToast.tsx

@@ -5,7 +5,8 @@
 
 import React, { useEffect, useRef } from "react";
 import { View, StyleSheet, type ViewStyle, type TextStyle } from "react-native";
-import { useAppDesignTokens, AtomicText, withAlpha } from "@umituz/react-native-design-system";
+import { AtomicText } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens, withAlpha } from "@umituz/react-native-design-system/theme";
 
 export interface AchievementToastProps {
   visible: boolean;

package/src/domains/gamification/components/GamificationScreen/AchievementsList.tsx

@@ -4,7 +4,7 @@
 
 import React, { useMemo } from "react";
 import { View, type TextStyle } from "react-native";
-import { AtomicText } from "@umituz/react-native-design-system";
+import { AtomicText } from "@umituz/react-native-design-system/atoms";
 import { AchievementItem } from "../AchievementItem";
 import { styles } from "./styles";
 import type { AchievementItemProps } from "../types/AchievementItemProps";

package/src/domains/gamification/components/GamificationScreen/GamificationScreen.tsx

@@ -6,7 +6,10 @@
 
 import React from "react";
 import { View } from "react-native";
-import { useAppDesignTokens, AtomicText, ScreenLayout, NavigationHeader, useAppNavigation } from "@umituz/react-native-design-system";
+import { AtomicText } from "@umituz/react-native-design-system/atoms";
+import { ScreenLayout } from "@umituz/react-native-design-system/layouts";
+import { NavigationHeader, useAppNavigation } from "@umituz/react-native-design-system/molecules";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { LevelProgress } from "../LevelProgress";
 import { StreakDisplay } from "../StreakDisplay";
 import { StatsGrid } from "./StatsGrid";

package/src/domains/gamification/components/GamificationScreen/StatsGrid.tsx

@@ -4,7 +4,7 @@
 
 import React from "react";
 import { View, type TextStyle } from "react-native";
-import { AtomicText } from "@umituz/react-native-design-system";
+import { AtomicText } from "@umituz/react-native-design-system/atoms";
 import { StatsCard } from "../StatsCard";
 import { styles } from "./styles";
 import type { StatsCardProps } from "../StatsCard";

package/src/domains/gamification/components/LevelProgress.tsx

@@ -5,7 +5,9 @@
 
 import React from "react";
 import { View, StyleSheet, type ViewStyle, type TextStyle } from "react-native";
-import { useAppDesignTokens, AtomicText, withAlpha, useResponsive } from "@umituz/react-native-design-system";
+import { AtomicText } from "@umituz/react-native-design-system/atoms";
+import { useResponsive } from "@umituz/react-native-design-system/responsive";
+import { useAppDesignTokens, withAlpha } from "@umituz/react-native-design-system/theme";
 
 export interface LevelProgressProps {
   level: number;

package/src/domains/gamification/components/PointsBadge.tsx

@@ -5,7 +5,9 @@
 
 import React from "react";
 import { View, StyleSheet, type ViewStyle, type TextStyle } from "react-native";
-import { useAppDesignTokens, AtomicText, withAlpha, useResponsive } from "@umituz/react-native-design-system";
+import { AtomicText } from "@umituz/react-native-design-system/atoms";
+import { useResponsive } from "@umituz/react-native-design-system/responsive";
+import { useAppDesignTokens, withAlpha } from "@umituz/react-native-design-system/theme";
 
 export interface PointsBadgeProps {
   points: number;

package/src/domains/gamification/components/StatsCard.tsx

@@ -5,7 +5,9 @@
 
 import React from "react";
 import { View, StyleSheet, type ViewStyle, type TextStyle } from "react-native";
-import { useAppDesignTokens, AtomicText, useResponsive, withAlpha } from "@umituz/react-native-design-system";
+import { AtomicText } from "@umituz/react-native-design-system/atoms";
+import { useResponsive } from "@umituz/react-native-design-system/responsive";
+import { useAppDesignTokens, withAlpha } from "@umituz/react-native-design-system/theme";
 
 export interface StatsCardProps {
   value: number;

package/src/domains/gamification/components/StreakDisplay.tsx

@@ -5,7 +5,9 @@
 
 import React from "react";
 import { View, StyleSheet, type ViewStyle, type TextStyle } from "react-native";
-import { useAppDesignTokens, AtomicText, withAlpha, useResponsive } from "@umituz/react-native-design-system";
+import { AtomicText } from "@umituz/react-native-design-system/atoms";
+import { useResponsive } from "@umituz/react-native-design-system/responsive";
+import { useAppDesignTokens, withAlpha } from "@umituz/react-native-design-system/theme";
 
 export interface StreakDisplayProps {
   current: number;

package/src/domains/gamification/store/gamificationStore.ts

@@ -3,7 +3,7 @@
  * Zustand store with persist middleware
  */
 
-import { createStore, storageService } from "@umituz/react-native-design-system";
+import { createStore, storageService } from "@umituz/react-native-design-system/storage";
 import type {
   GamificationState,
   GamificationActions,

package/src/domains/legal/domain/services/StyleCacheService.ts

@@ -4,7 +4,7 @@
  * Extracted from components to follow SOLID principles
  */
 
-import type { DesignTokens } from "@umituz/react-native-design-system";
+import type { DesignTokens } from "@umituz/react-native-design-system/theme";
 
 export interface StyleCacheOptions {
   maxSize?: number;