@umituz/react-native-settings 4.19.6 → 4.20.0

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.19.6",
+  "version": "4.20.0",
   "description": "Complete settings hub for React Native apps - consolidated package with settings, about, legal, appearance, feedback, FAQs, and rating",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "scripts": {
     "typecheck": "tsc --noEmit",
-    "lint": "eslint src --ext .ts,.tsx --max-warnings 0",
-    "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix",
     "version:patch": "npm version patch -m 'chore: release v%s'",
     "version:minor": "npm version minor -m 'chore: release v%s'",
     "version:major": "npm version major -m 'chore: release v%s'"
@@ -39,14 +39,14 @@
     "@react-navigation/native": ">=6.0.0",
     "@react-navigation/stack": ">=6.0.0",
     "@tanstack/react-query": ">=5.0.0",
-    "@umituz/react-native-auth": "latest",
-    "@umituz/react-native-design-system": "latest",
-    "@umituz/react-native-localization": "latest",
-    "@umituz/react-native-notifications": "latest",
-    "@umituz/react-native-onboarding": "latest",
-    "@umituz/react-native-sentry": "latest",
-    "@umituz/react-native-storage": "latest",
-    "@umituz/react-native-tanstack": "latest",
+    "@umituz/react-native-auth": "*",
+    "@umituz/react-native-design-system": "*",
+    "@umituz/react-native-localization": "*",
+    "@umituz/react-native-notifications": "*",
+    "@umituz/react-native-onboarding": "*",
+    "@umituz/react-native-sentry": "*",
+    "@umituz/react-native-storage": "*",
+    "@umituz/react-native-tanstack": "*",
     "react": ">=19.0.0",
     "react-native": ">=0.81.0",
     "react-native-safe-area-context": ">=4.0.0",
@@ -58,28 +58,30 @@
     "@gorhom/bottom-sheet": "^5.2.8",
     "@react-native-community/datetimepicker": "^8.5.1",
     "@react-navigation/bottom-tabs": "^7.9.0",
-    "@react-navigation/native": "^6.1.18",
-    "@react-navigation/stack": "^6.4.1",
+    "@react-navigation/native": "^7.1.26",
+    "@react-navigation/stack": "^7.6.13",
     "@sentry/react-native": "^7.8.0",
     "@sentry/types": "^10.32.1",
     "@tanstack/react-query": "^5.0.0",
     "@types/jest": "^29.5.14",
     "@types/react": "~19.1.10",
-    "@typescript-eslint/eslint-plugin": "^7.0.0",
-    "@typescript-eslint/parser": "^7.0.0",
-    "@umituz/react-native-auth": "latest",
-    "@umituz/react-native-design-system": "latest",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
+    "@umituz/react-native-auth": "^3.2.0",
+    "@umituz/react-native-design-system": "^2.5.1",
     "@umituz/react-native-filesystem": "^2.1.7",
     "@umituz/react-native-firebase": "^1.13.28",
     "@umituz/react-native-haptics": "^1.0.3",
-    "@umituz/react-native-localization": "latest",
-    "@umituz/react-native-notifications": "latest",
-    "@umituz/react-native-onboarding": "latest",
+    "@umituz/react-native-localization": "*",
+    "@umituz/react-native-notifications": "*",
+    "@umituz/react-native-onboarding": "*",
     "@umituz/react-native-sentry": "^1.4.2",
-    "@umituz/react-native-storage": "latest",
-    "@umituz/react-native-tanstack": "latest",
+    "@umituz/react-native-storage": "*",
+    "@umituz/react-native-tanstack": "*",
     "@umituz/react-native-uuid": "^1.2.2",
     "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-native": "^5.0.0",
     "expo-apple-authentication": "^8.0.8",
     "expo-application": "^7.0.8",
     "expo-clipboard": "^8.0.8",

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

@@ -8,7 +8,7 @@ import { AboutSettingItem } from './AboutSettingItem';
 import { AppInfo } from '../../domain/entities/AppInfo';
 import { AboutConfig } from '../../domain/entities/AppInfo';
 
-import { useResponsiveDesignTokens } from '@umituz/react-native-design-system';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
 
 export interface AboutContentProps {
   /** App information to display */
@@ -18,7 +18,7 @@ export interface AboutContentProps {
 }
 
 const AboutSectionHeader: React.FC<{ title: string }> = ({ title }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
   const colors = tokens.colors;
 
   return (

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

@@ -26,7 +26,7 @@ export interface AboutHeaderProps {
   testID?: string;
 }
 
-import { useResponsiveDesignTokens } from '@umituz/react-native-design-system';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
 
 export const AboutHeader: React.FC<AboutHeaderProps> = ({
   appInfo,
@@ -37,7 +37,7 @@ export const AboutHeader: React.FC<AboutHeaderProps> = ({
   versionPrefix = "Version",
   testID,
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
   const colors = tokens.colors;
 
   return (

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

@@ -45,7 +45,7 @@ export interface AboutSettingItemProps {
   chevronColor?: string;
 }
 
-import { useResponsiveDesignTokens } from '@umituz/react-native-design-system';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
 
 export const AboutSettingItem: React.FC<AboutSettingItemProps> = ({
   icon,
@@ -63,7 +63,7 @@ export const AboutSettingItem: React.FC<AboutSettingItemProps> = ({
   testID,
   chevronColor,
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
   const colors = tokens.colors;
 
   // Memoize container type to prevent unnecessary re-renders

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

@@ -38,7 +38,7 @@ export interface AboutScreenProps {
 }
 
 import { useAboutInfo } from '../hooks/useAboutInfo';
-import { useResponsiveDesignTokens, AtomicText } from '@umituz/react-native-design-system';
+import { useAppDesignTokens, AtomicText } from '@umituz/react-native-design-system';
 
 export const AboutScreen: React.FC<AboutScreenProps> = ({
   config,
@@ -51,7 +51,7 @@ export const AboutScreen: React.FC<AboutScreenProps> = ({
   footerComponent,
   testID,
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
   const colors = tokens.colors;
 
   const { appInfo, loading, error } = useAboutInfo({

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

@@ -10,7 +10,7 @@ import { View, TouchableOpacity, StyleSheet } from "react-native";
 import {
   AtomicIcon,
   AtomicText,
-  useResponsiveDesignTokens,
+  useAppDesignTokens,
 } from "@umituz/react-native-design-system";
 
 interface ColorPickerProps {
@@ -26,7 +26,7 @@ export const ColorPicker: React.FC<ColorPickerProps> = ({
   onValueChange,
   colors,
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
 
   // Memoize styles to prevent unnecessary re-creation
   const styles = useMemo(() => getStyles(tokens), [tokens]);
@@ -84,7 +84,7 @@ export const ColorPicker: React.FC<ColorPickerProps> = ({
   );
 };
 
-const getStyles = (tokens: ReturnType<typeof useResponsiveDesignTokens>) =>
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
   StyleSheet.create({
     container: {
       marginBottom: 16,

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

@@ -8,7 +8,7 @@
 import React from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
 import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system";
-import { useResponsiveDesignTokens } from "@umituz/react-native-design-system";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import type { ThemeMode } from "../../types";
 
 interface ThemeOptionProps {
@@ -30,7 +30,7 @@ export const ThemeOption: React.FC<ThemeOptionProps> = ({
   isSelected,
   onSelect,
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
   const styles = getStyles(tokens);
   const iconName = mode === "dark" ? "moon-outline" : mode === "light" ? "sunny-outline" : "desktop-outline";
 
@@ -89,7 +89,7 @@ export const ThemeOption: React.FC<ThemeOptionProps> = ({
   );
 };
 
-const getStyles = (tokens: ReturnType<typeof useResponsiveDesignTokens>) =>
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
   StyleSheet.create({
     container: {
       backgroundColor: tokens.colors.surface,

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

@@ -7,7 +7,7 @@
 
 import React, { useMemo, useCallback } from "react";
 import { ScrollView, StyleSheet, View } from "react-native";
-import { useResponsiveDesignTokens } from "@umituz/react-native-design-system";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import { useAppearance, useAppearanceActions } from "../../hooks";
 import {
   AppearanceHeader,
@@ -63,7 +63,7 @@ export const AppearanceScreen: React.FC<AppearanceScreenProps> = ({
   containerStyle,
   contentContainerStyle,
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
   const { themeMode } = useAppearance();
   const {
     localCustomColors,
@@ -211,7 +211,7 @@ export const AppearanceScreen: React.FC<AppearanceScreenProps> = ({
   );
 };
 
-const getStyles = (tokens: ReturnType<typeof useResponsiveDesignTokens>) =>
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
   StyleSheet.create({
     container: {
       flex: 1,

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

@@ -6,7 +6,7 @@
 
 import React, { useMemo } from 'react';
 import { View, StyleSheet, ViewStyle } from 'react-native';
-import { useResponsiveDesignTokens, AtomicText } from '@umituz/react-native-design-system';
+import { useAppDesignTokens, AtomicText } from '@umituz/react-native-design-system';
 import { FAQCategory as FAQCategoryType } from '../../domain/entities/FAQEntity';
 import { FAQItemComponent, FAQItemStyles } from './FAQItem';
 
@@ -29,18 +29,26 @@ export const FAQCategoryComponent: React.FC<FAQCategoryProps> = ({
     onToggleItem,
     styles: customStyles,
 }) => {
-    const tokens = useResponsiveDesignTokens();
+    const tokens = useAppDesignTokens();
 
     const styles = useMemo(
         () =>
             StyleSheet.create({
                 container: {
-                    marginBottom: tokens.spacing.lg,
+                    marginBottom: tokens.spacing.xl,
                 },
                 titleContainer: {
-                    marginBottom: tokens.spacing.md,
-                    paddingHorizontal: tokens.spacing.md,
+                    marginBottom: tokens.spacing.sm,
+                    paddingHorizontal: tokens.spacing.lg,
+                    flexDirection: 'row',
+                    alignItems: 'center',
                 },
+                titleLine: {
+                    flex: 1,
+                    height: 1,
+                    backgroundColor: tokens.colors.border,
+                    marginLeft: tokens.spacing.md,
+                }
             }),
         [tokens]
     );
@@ -49,12 +57,13 @@ export const FAQCategoryComponent: React.FC<FAQCategoryProps> = ({
         <View style={[styles.container, customStyles?.container]}>
             <View style={styles.titleContainer}>
                 <AtomicText
-                    type="headlineSmall"
-                    color="textPrimary"
-                    style={customStyles?.titleStyle}
+                    type="labelLarge"
+                    color="textSecondary"
+                    style={[{ textTransform: 'uppercase', letterSpacing: 1, fontWeight: '700' }, customStyles?.titleStyle]}
                 >
                     {category.title}
                 </AtomicText>
+                <View style={styles.titleLine} />
             </View>
             {category.items.map((item, index) => (
                 <FAQItemComponent

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

@@ -6,7 +6,7 @@
 
 import React, { useMemo } from 'react';
 import { View, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native';
-import { useResponsiveDesignTokens, AtomicText } from '@umituz/react-native-design-system';
+import { useAppDesignTokens, AtomicText } from '@umituz/react-native-design-system';
 
 export interface FAQEmptyStateStyles {
     container?: ViewStyle;
@@ -28,7 +28,7 @@ export const FAQEmptyState: React.FC<FAQEmptyStateProps> = ({
     icon = '❓',
     styles: customStyles,
 }) => {
-    const tokens = useResponsiveDesignTokens();
+    const tokens = useAppDesignTokens();
 
     const styles = useMemo(
         () =>

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

@@ -6,7 +6,7 @@
 
 import React, { useMemo } from 'react';
 import { View, TouchableOpacity, StyleSheet, ViewStyle } from 'react-native';
-import { useResponsiveDesignTokens, AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
+import { useAppDesignTokens, AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
 import { FAQItem as FAQItemType } from '../../domain/entities/FAQEntity';
 
 export interface FAQItemStyles {
@@ -32,36 +32,49 @@ export const FAQItemComponent: React.FC<FAQItemProps> = ({
     onToggle,
     styles: customStyles,
 }) => {
-    const tokens = useResponsiveDesignTokens();
+    const tokens = useAppDesignTokens();
 
     const styles = useMemo(
         () =>
             StyleSheet.create({
                 container: {
                     marginHorizontal: tokens.spacing.md,
-                    marginBottom: tokens.spacing.xs,
-                    borderRadius: 12,
+                    marginBottom: tokens.spacing.sm,
+                    borderRadius: 20,
                     backgroundColor: tokens.colors.surface,
                     borderWidth: 1,
-                    borderColor: tokens.colors.border,
+                    borderColor: isExpanded ? tokens.colors.primary : tokens.colors.border,
+                    overflow: 'hidden',
                 },
                 header: {
-                    flexDirection: 'row' as const,
-                    alignItems: 'center' as const,
-                    padding: tokens.spacing.md,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    padding: tokens.spacing.lg,
                 },
                 content: {
                     flex: 1,
-                    marginRight: tokens.spacing.xs,
+                    marginRight: tokens.spacing.md,
+                },
+                questionText: {
+                    fontWeight: '700',
                 },
                 answerContainer: {
-                    paddingHorizontal: tokens.spacing.md,
-                    paddingBottom: tokens.spacing.md,
+                    paddingHorizontal: tokens.spacing.lg,
+                    paddingBottom: tokens.spacing.lg,
                     borderTopWidth: 1,
                     borderTopColor: tokens.colors.borderLight,
+                    backgroundColor: tokens.colors.surfaceSecondary || tokens.colors.backgroundSecondary,
+                },
+                iconContainer: {
+                    width: 36,
+                    height: 36,
+                    borderRadius: 18,
+                    backgroundColor: isExpanded ? tokens.colors.primary : tokens.colors.surfaceSecondary || tokens.colors.backgroundSecondary,
+                    alignItems: 'center',
+                    justifyContent: 'center',
                 },
             }),
-        [tokens]
+        [tokens, isExpanded]
     );
 
     return (
@@ -69,22 +82,24 @@ export const FAQItemComponent: React.FC<FAQItemProps> = ({
             <TouchableOpacity
                 onPress={onToggle}
                 style={[styles.header, customStyles?.header]}
-                activeOpacity={0.7}
+                activeOpacity={0.8}
             >
                 <View style={[styles.content, customStyles?.content]}>
                     <AtomicText
                         type="bodyLarge"
-                        color="textPrimary"
-                        style={customStyles?.questionStyle}
-                        numberOfLines={isExpanded ? undefined : 2}
+                        color={isExpanded ? "primary" : "textPrimary"}
+                        style={[styles.questionText, customStyles?.questionStyle]}
                     >
                         {item.question}
                     </AtomicText>
                 </View>
-                <AtomicIcon
-                    name={isExpanded ? 'chevron-up' : 'chevron-down'}
-                    size={20}
-                />
+                <View style={styles.iconContainer}>
+                    <AtomicIcon
+                        name={isExpanded ? 'chevron-up' : 'chevron-down'}
+                        size={20}
+                        color={isExpanded ? "onPrimary" : "textSecondary"}
+                    />
+                </View>
             </TouchableOpacity>
 
             {isExpanded && (
@@ -92,7 +107,7 @@ export const FAQItemComponent: React.FC<FAQItemProps> = ({
                     <AtomicText
                         type="bodyMedium"
                         color="textSecondary"
-                        style={customStyles?.answerStyle}
+                        style={[{ lineHeight: 22 }, customStyles?.answerStyle]}
                     >
                         {item.answer}
                     </AtomicText>

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

@@ -6,7 +6,7 @@
 
 import React, { useMemo } from 'react';
 import { View, TextInput, StyleSheet, ViewStyle, TextStyle } from 'react-native';
-import { useResponsiveDesignTokens, AtomicIcon } from '@umituz/react-native-design-system';
+import { useAppDesignTokens, AtomicIcon } from '@umituz/react-native-design-system';
 
 export interface FAQSearchBarStyles {
     container?: ViewStyle;
@@ -26,26 +26,27 @@ export const FAQSearchBar: React.FC<FAQSearchBarProps> = ({
     placeholder,
     styles: customStyles,
 }) => {
-    const tokens = useResponsiveDesignTokens();
+    const tokens = useAppDesignTokens();
 
     const styles = useMemo(
         () =>
             StyleSheet.create({
                 container: {
-                    flexDirection: 'row' as const,
-                    alignItems: 'center' as const,
-                    backgroundColor: tokens.colors.surface,
-                    borderRadius: 12,
-                    paddingHorizontal: tokens.spacing.sm,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    backgroundColor: tokens.colors.surfaceSecondary || tokens.colors.backgroundSecondary,
+                    borderRadius: 16,
+                    paddingHorizontal: tokens.spacing.md,
                     borderWidth: 1,
-                    borderColor: tokens.colors.border,
+                    borderColor: tokens.colors.borderLight,
+                    height: 48,
                 },
                 iconContainer: {
-                    marginRight: tokens.spacing.xs,
+                    marginRight: tokens.spacing.sm,
                 },
                 input: {
                     flex: 1,
-                    paddingVertical: tokens.spacing.sm,
+                    height: '100%',
                     fontSize: 16,
                     color: tokens.colors.textPrimary,
                 },
@@ -56,7 +57,7 @@ export const FAQSearchBar: React.FC<FAQSearchBarProps> = ({
     return (
         <View style={[styles.container, customStyles?.container]}>
             <View style={styles.iconContainer}>
-                <AtomicIcon name="search" size={18} />
+                <AtomicIcon name="search" size={18} color="textSecondary" />
             </View>
             <TextInput
                 style={[styles.input, customStyles?.input]}

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

@@ -5,8 +5,8 @@
  */
 
 import React, { useMemo } from 'react';
-import { View, ScrollView, StyleSheet, ViewStyle, TextStyle } from 'react-native';
-import { useResponsiveDesignTokens, AtomicText, ScreenLayout } from '@umituz/react-native-design-system';
+import { View, ScrollView, StyleSheet, ViewStyle, TextStyle, useWindowDimensions } from 'react-native';
+import { useAppDesignTokens, AtomicText, ScreenLayout, getContentMaxWidth } from '@umituz/react-native-design-system';
 import { FAQCategory } from '../../domain/entities/FAQEntity';
 import { useFAQSearch } from '../hooks/useFAQSearch';
 import { useFAQExpansion } from '../hooks/useFAQExpansion';
@@ -45,9 +45,10 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
   renderHeader,
   styles: customStyles,
 }) => {
-  const tokens = useResponsiveDesignTokens();
-  const { searchQuery, setSearchQuery, filteredCategories, hasResults } =
-    useFAQSearch(categories);
+  const tokens = useAppDesignTokens();
+  const { width: windowWidth } = useWindowDimensions();
+  const contentMaxWidth = useMemo(() => getContentMaxWidth(windowWidth), [windowWidth]);
+  const { searchQuery, setSearchQuery, filteredCategories, hasResults } = useFAQSearch(categories);
   const { isExpanded, toggleExpansion } = useFAQExpansion();
 
   const styles = useMemo(
@@ -55,12 +56,9 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
       StyleSheet.create({
         container: {
           flex: 1,
-          backgroundColor: tokens.colors.backgroundPrimary,
         },
         header: {
           padding: tokens.spacing.md,
-          borderBottomWidth: 1,
-          borderBottomColor: tokens.colors.border,
         },
         content: {
           flex: 1,
@@ -81,12 +79,13 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
     }
 
     return (
-      <ScrollView
-        style={[styles.content, customStyles?.content]}
-        showsVerticalScrollIndicator={false}
-      >
+      <View style={{ flex: 1 }}>
         <View style={[styles.header, customStyles?.header]}>
-          <AtomicText type="headlineMedium" color="textPrimary" style={{ marginBottom: tokens.spacing.sm }}>
+          <AtomicText
+            type="headlineMedium"
+            color="textPrimary"
+            style={{ marginBottom: tokens.spacing.md, fontWeight: '700' }}
+          >
             {headerTitle}
           </AtomicText>
           <FAQSearchBar
@@ -97,30 +96,41 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
           />
         </View>
 
-        {filteredCategories.map((category) => (
-          <FAQCategoryComponent
-            key={category.id}
-            category={category}
-            isExpanded={isExpanded}
-            onToggleItem={toggleExpansion}
-            styles={customStyles?.category}
-          />
-        ))}
-      </ScrollView>
+        <ScrollView
+          style={[styles.content, customStyles?.content]}
+          contentContainerStyle={{ paddingVertical: tokens.spacing.md }}
+          showsVerticalScrollIndicator={false}
+        >
+          {filteredCategories.map((category) => (
+            <FAQCategoryComponent
+              key={category.id}
+              category={category}
+              isExpanded={isExpanded}
+              onToggleItem={toggleExpansion}
+              styles={customStyles?.category}
+            />
+          ))}
+          <View style={{ height: tokens.spacing.xl * 2 }} />
+        </ScrollView>
+      </View>
     );
   };
 
   if (renderHeader) {
     return (
-      <View style={[styles.container, customStyles?.container]}>
-        {renderHeader({ onBack: onBack || (() => { }) })}
-        {renderContent()}
+      <View style={{ flex: 1, backgroundColor: tokens.colors.backgroundPrimary }}>
+        <View style={[styles.container, customStyles?.container]}>
+          <View style={{ alignSelf: 'center', width: '100%', maxWidth: contentMaxWidth }}>
+            {renderHeader({ onBack: onBack || (() => { }) })}
+          </View>
+          {renderContent()}
+        </View>
       </View>
     );
   }
 
   return (
-    <ScreenLayout edges={['bottom']} scrollable={false}>
+    <ScreenLayout edges={['bottom']} scrollable={false} maxWidth={contentMaxWidth}>
       <View style={[styles.container, customStyles?.container]}>
         {renderContent()}
       </View>

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

@@ -5,7 +5,7 @@
 
 import React, { useState } from "react";
 import { View, StyleSheet, TouchableOpacity, ScrollView, TextInput } from "react-native";
-import { useResponsiveDesignTokens, AtomicText, AtomicButton, AtomicIcon } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, AtomicText, AtomicButton, AtomicIcon } from "@umituz/react-native-design-system";
 import type { FeedbackType, FeedbackRating } from "../../domain/entities/FeedbackEntity";
 import { useFeedbackForm } from "../hooks/useFeedbackForm";
 
@@ -29,7 +29,7 @@ export const FeedbackForm: React.FC<FeedbackFormProps> = ({
     initialType,
     isSubmitting = false,
 }) => {
-    const tokens = useResponsiveDesignTokens();
+    const tokens = useAppDesignTokens();
     const [selectedType, setSelectedType] = useState<FeedbackType>(initialType || texts.feedbackTypes[0].type);
     const [rating, setRating] = useState<FeedbackRating>(5);
     const [description, setDescription] = useState("");

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

@@ -6,7 +6,7 @@
 import React from "react";
 import { View, StyleSheet, TouchableOpacity, ScrollView, KeyboardAvoidingView, Platform } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
-import { useResponsiveDesignTokens, AtomicText, AtomicIcon, BaseModal } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, AtomicText, AtomicIcon, BaseModal } from "@umituz/react-native-design-system";
 import { FeedbackForm } from "./FeedbackForm";
 import type { FeedbackType, FeedbackRating } from "../../domain/entities/FeedbackEntity";
 
@@ -31,7 +31,7 @@ export const FeedbackModal: React.FC<FeedbackModalProps> = ({
     subtitle,
     texts,
 }) => {
-    const tokens = useResponsiveDesignTokens();
+    const tokens = useAppDesignTokens();
 
     return (
         <BaseModal visible={visible} onClose={onClose}>

package/src/domains/legal/presentation/screens/LegalScreen.tsx

@@ -9,7 +9,7 @@
 
 import React from "react";
 import { View, StyleSheet } from "react-native";
-import { useResponsiveDesignTokens, type DesignTokens } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, type DesignTokens } from "@umituz/react-native-design-system";
 import { AtomicText } from "@umituz/react-native-design-system";
 import { ScreenLayout } from "@umituz/react-native-design-system";
 import { LegalItem } from "../components/LegalItem";
@@ -93,7 +93,7 @@ export const LegalScreen: React.FC<LegalScreenProps> = React.memo(({
   eulaUrl,
   testID = "legal-screen",
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
 
   // Memoize styles to prevent recreation on every render
   const styles = React.useMemo(() => {

package/src/domains/legal/presentation/screens/PrivacyPolicyScreen.tsx

@@ -6,7 +6,7 @@
 import React from "react";
 import { View, ScrollView, StyleSheet } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useResponsiveDesignTokens } from "@umituz/react-native-design-system";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import { AtomicText, AtomicButton } from "@umituz/react-native-design-system";
 import { UrlHandlerService } from "../../domain/services/UrlHandlerService";
 import { ContentValidationService } from "../../domain/services/ContentValidationService";
@@ -54,7 +54,7 @@ export const PrivacyPolicyScreen: React.FC<PrivacyPolicyScreenProps> = React.mem
   onUrlPress,
   testID = "privacy-policy-screen",
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
   
   // Validate required props

package/src/domains/legal/presentation/screens/TermsOfServiceScreen.tsx

@@ -6,7 +6,7 @@
 import React from "react";
 import { View, ScrollView, StyleSheet } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useResponsiveDesignTokens } from "@umituz/react-native-design-system";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import { AtomicText, AtomicButton } from "@umituz/react-native-design-system";
 import { UrlHandlerService } from "../../domain/services/UrlHandlerService";
 import { ContentValidationService } from "../../domain/services/ContentValidationService";
@@ -54,7 +54,7 @@ export const TermsOfServiceScreen: React.FC<TermsOfServiceScreenProps> = React.m
   onUrlPress,
   testID = "terms-of-service-screen",
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
   
   // Validate required props

package/src/domains/video-tutorials/infrastructure/services/video-tutorial.service.ts

@@ -11,7 +11,7 @@ import {
   where,
   limit,
 } from "firebase/firestore";
-import type { Firestore } from "firebase/firestore";
+import type { Firestore, QueryConstraint } from "firebase/firestore";
 import type {
   VideoTutorial,
   VideoTutorialCategory,
@@ -46,7 +46,7 @@ class VideoTutorialService {
   async getAllTutorials(
     filters?: VideoTutorialFilters,
   ): Promise<VideoTutorial[]> {
-    const constraints = [];
+    const constraints: QueryConstraint[] = [];
 
     if (filters?.category) {
       constraints.push(where("category", "==", filters.category));

package/src/presentation/components/DevSettingsSection.tsx

@@ -9,7 +9,7 @@
 
 import React from "react";
 import { Alert } from "react-native";
-import { useResponsiveDesignTokens } from "@umituz/react-native-design-system";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import { storageRepository } from "@umituz/react-native-storage";
 import { SettingsSection } from "./SettingsSection";
 import { SettingItem } from "./SettingItem";
@@ -46,7 +46,7 @@ export const DevSettingsSection: React.FC<DevSettingsProps> = ({
   texts = {},
   customDevComponents = [],
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
 
   // Merge custom texts with defaults
   const t = { ...DEFAULT_TEXTS, ...texts };

package/src/presentation/components/SettingItem.tsx

@@ -3,7 +3,7 @@ import { View, StyleSheet, Switch } from "react-native";
 import {
   AtomicIcon,
   AtomicText,
-  useResponsiveDesignTokens,
+  useAppDesignTokens,
 } from "@umituz/react-native-design-system";
 import { SettingsItemCard } from "./SettingsItemCard";
 
@@ -40,7 +40,7 @@ export const SettingItem: React.FC<SettingItemProps> = ({
   testID,
   disabled = false,
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
 
   // For switch items, we need custom rendering
   if (showSwitch) {

package/src/presentation/components/SettingsErrorBoundary.tsx

@@ -5,7 +5,7 @@
 
 import React, { Component, ReactNode } from 'react';
 import { View, StyleSheet } from 'react-native';
-import { useResponsiveDesignTokens } from '@umituz/react-native-design-system';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
 import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
 import { useLocalization } from '@umituz/react-native-localization';
 
@@ -67,7 +67,7 @@ const ErrorBoundaryFallback: React.FC<ErrorBoundaryFallbackProps> = ({
   fallbackTitle,
   fallbackMessage
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
   const { t } = useLocalization();
 
   const title = __DEV__ && error?.message

package/src/presentation/components/SettingsFooter.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { View, StyleSheet } from "react-native";
-import { useResponsiveDesignTokens, AtomicText } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
 
 export interface SettingsFooterProps {
   versionText?: string;
@@ -13,7 +13,7 @@ export const SettingsFooter: React.FC<SettingsFooterProps> = ({
   appVersion,
   versionLabel,
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
   const colors = tokens.colors;
 
   const displayText = versionText || (appVersion && versionLabel

package/src/presentation/components/SettingsItemCard.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { View, Pressable, StyleSheet, ViewStyle } from "react-native";
 import {
-    useResponsiveDesignTokens,
+    useAppDesignTokens,
     AtomicIcon,
     AtomicText,
     type IconName,
@@ -45,7 +45,7 @@ export const SettingsItemCard: React.FC<SettingsItemCardProps> = ({
     iconBgColor,
     iconColor,
 }) => {
-    const tokens = useResponsiveDesignTokens();
+    const tokens = useAppDesignTokens();
     const colors = tokens.colors;
 
     const defaultIconBg = iconBgColor || `${colors.primary}15`;

package/src/presentation/components/SettingsSection.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { View, StyleSheet } from "react-native";
-import { useResponsiveDesignTokens, AtomicText } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
 
 export interface SettingsSectionProps {
   title: string;
@@ -11,7 +11,7 @@ export const SettingsSection: React.FC<SettingsSectionProps> = ({
   title,
   children,
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
   const colors = tokens.colors;
 
   return (

package/src/presentation/navigation/SettingsStackNavigator.tsx

@@ -7,7 +7,7 @@
 
 import React from "react";
 import { createStackNavigator } from "@react-navigation/stack";
-import { useResponsiveDesignTokens } from "@umituz/react-native-design-system";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import { SettingsScreen } from "../screens/SettingsScreen";
 import { AppearanceScreen } from "../screens/AppearanceScreen";
 import type { SettingsConfig, CustomSettingsSection } from "../screens/types";
@@ -83,7 +83,7 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
     devSettings,
     customSections = [],
 }) => {
-    const tokens = useResponsiveDesignTokens();
+    const tokens = useAppDesignTokens();
 
     const screenOptions = {
         headerStyle: {

package/src/presentation/screens/SettingsScreen.tsx

@@ -8,7 +8,7 @@ import { View, StatusBar, StyleSheet } from "react-native";
 import { useNavigation } from "@react-navigation/native";
 import {
   useDesignSystemTheme,
-  useResponsiveDesignTokens,
+  useAppDesignTokens,
 } from "@umituz/react-native-design-system";
 import { SettingsHeader } from "./components/SettingsHeader";
 import { SettingsContent } from "./components/SettingsContent";
@@ -68,7 +68,7 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
 }) => {
   const navigation = useNavigation();
   const { themeMode } = useDesignSystemTheme();
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
 
   const isDark = themeMode === "dark";
   const colors = tokens.colors;

package/src/presentation/screens/components/SettingsContent.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from "react";
 import { View, ScrollView, StyleSheet } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useResponsiveDesignTokens } from "@umituz/react-native-design-system";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import { useLocalization } from "@umituz/react-native-localization";
 import { SettingsFooter } from "../../components/SettingsFooter";
 import { SettingsSection } from "../../components/SettingsSection";
@@ -53,7 +53,7 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
   showCloseButton = false,
   devSettings,
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
   const { t } = useLocalization();
 

package/src/presentation/screens/components/SettingsHeader.tsx

@@ -7,7 +7,7 @@ import React from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useNavigation } from "@react-navigation/native";
-import { useResponsiveDesignTokens } from "@umituz/react-native-design-system";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import { AtomicIcon } from "@umituz/react-native-design-system";
 
 interface SettingsHeaderProps {
@@ -20,7 +20,7 @@ export const SettingsHeader: React.FC<SettingsHeaderProps> = ({
   onClose,
 }) => {
   const navigation = useNavigation();
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
 
   const handleClose = () => {