@umituz/react-native-settings 1.11.1 → 1.11.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "1.11.1",
+  "version": "1.11.4",
   "description": "Settings management for React Native apps - user preferences, theme, language, notifications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -30,12 +30,16 @@
     "react-native": ">=0.74.0",
     "zustand": "^5.0.2",
     "lucide-react-native": "^0.468.0",
+    "@react-navigation/native": "^6.1.18",
+    "react-native-safe-area-context": "~5.6.0",
     "@umituz/react-native-storage": "latest",
     "@umituz/react-native-design-system": "latest",
+    "@umituz/react-native-design-system-atoms": "latest",
+    "@umituz/react-native-design-system-organisms": "latest",
     "@umituz/react-native-design-system-theme": "latest",
     "@umituz/react-native-localization": "latest",
     "@umituz/react-native-appearance": "latest",
-    "expo-linear-gradient": "~14.0.0"
+    "expo-linear-gradient": "^15.0.7"
   },
   "devDependencies": {
     "@types/react": "^18.2.45",

package/src/presentation/components/SettingItem.tsx

@@ -1,11 +1,11 @@
 /**
  * Setting Item Component
  * Single Responsibility: Render a single settings item
- * Modern design with Lucide icons and switch support
+ * Material Design 3 style with hover effects and modern spacing
  */
 
 import React from "react";
-import { View, Text, TouchableOpacity, StyleSheet, Switch } from "react-native";
+import { View, Text, Pressable, StyleSheet, Switch } from "react-native";
 import { ChevronRight, type LucideIcon } from "lucide-react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
 
@@ -56,14 +56,17 @@ export const SettingItem: React.FC<SettingItemProps> = ({
 
   return (
     <>
-      <TouchableOpacity
-        style={[
+      <Pressable
+        style={({ pressed }) => [
           styles.container,
-          { backgroundColor: colors.backgroundPrimary },
+          {
+            backgroundColor: pressed && !disabled && !showSwitch
+              ? `${colors.primary}08`
+              : 'transparent',
+          },
         ]}
         onPress={onPress}
         disabled={showSwitch || disabled}
-        activeOpacity={disabled ? 1 : 0.7}
         testID={testID}
       >
         <View style={styles.content}>
@@ -77,7 +80,7 @@ export const SettingItem: React.FC<SettingItemProps> = ({
               },
             ]}
           >
-            <Icon size={20} color={iconColor || colors.primary} />
+            <Icon size={24} color={iconColor || colors.primary} />
           </View>
           <View style={styles.textContainer}>
             <Text
@@ -97,7 +100,7 @@ export const SettingItem: React.FC<SettingItemProps> = ({
             {value && !showSwitch && (
               <Text
                 style={[styles.value, { color: colors.textSecondary }]}
-                numberOfLines={1}
+                numberOfLines={2}
               >
                 {value}
               </Text>
@@ -115,12 +118,13 @@ export const SettingItem: React.FC<SettingItemProps> = ({
                 true: colors.primary,
               }}
               thumbColor="#FFFFFF"
+              ios_backgroundColor={`${colors.textSecondary}30`}
             />
           ) : (
-            <ChevronRight size={18} color={colors.textSecondary} />
+            <ChevronRight size={20} color={colors.textSecondary} />
           )}
         </View>
-      </TouchableOpacity>
+      </Pressable>
 
       {!isLast && (
         <View
@@ -139,9 +143,9 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
-    paddingHorizontal: 20,
-    paddingVertical: 18,
-    minHeight: 64,
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+    minHeight: 72,
   },
   content: {
     flexDirection: "row",
@@ -149,8 +153,8 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   iconContainer: {
-    width: 44,
-    height: 44,
+    width: 48,
+    height: 48,
     borderRadius: 12,
     justifyContent: "center",
     alignItems: "center",
@@ -163,11 +167,13 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 16,
     fontWeight: "500",
+    lineHeight: 20,
   },
   value: {
-    fontSize: 12,
+    fontSize: 14,
     fontWeight: "400",
-    marginTop: 2,
+    marginTop: 4,
+    lineHeight: 18,
   },
   rightContainer: {
     flexDirection: "row",

package/src/presentation/components/SettingsSection.tsx

@@ -20,19 +20,13 @@ export const SettingsSection: React.FC<SettingsSectionProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
   const colors = tokens.colors;
-  const spacing = tokens.spacing;
 
   return (
-    <View style={styles.container}>
-      <Text style={[styles.title, { color: colors.textSecondary }]}>
+    <View style={[styles.container, { backgroundColor: colors.surface }]}>
+      <Text style={[styles.title, { color: colors.textPrimary }]}>
         {title}
       </Text>
-      <View
-        style={[
-          styles.content,
-          { backgroundColor: `${colors.textSecondary}10` },
-        ]}
-      >
+      <View style={styles.content}>
         {children}
       </View>
     </View>
@@ -41,22 +35,19 @@ export const SettingsSection: React.FC<SettingsSectionProps> = ({
 
 const styles = StyleSheet.create({
   container: {
-    marginTop: 0,
-    marginBottom: 32,
+    marginBottom: 16,
+    borderRadius: 12,
+    overflow: "hidden",
   },
   title: {
-    fontSize: 11,
-    fontWeight: "700",
-    textTransform: "uppercase",
-    letterSpacing: 1.2,
+    fontSize: 18,
+    fontWeight: "600",
     paddingHorizontal: 16,
-    paddingBottom: 12,
-    marginBottom: 0,
+    paddingTop: 16,
+    paddingBottom: 8,
   },
   content: {
-    borderRadius: 16,
-    marginHorizontal: 16,
-    overflow: "hidden",
+    borderRadius: 0,
   },
 });
 

package/src/presentation/screens/AppearanceScreen.tsx

@@ -8,24 +8,3 @@ import React from "react";
 import { AppearanceScreen } from "@umituz/react-native-appearance";
 
 export { AppearanceScreen };
-
-const getStyles = (tokens: DesignTokens) =>
-  StyleSheet.create({
-    header: {
-      paddingHorizontal: tokens.spacing.lg,
-      paddingTop: tokens.spacing.lg,
-      paddingBottom: tokens.spacing.md,
-    },
-    headerSubtitle: {
-      marginTop: tokens.spacing.xs,
-    },
-    sectionHeader: {
-      paddingHorizontal: tokens.spacing.lg,
-      paddingTop: tokens.spacing.lg,
-      paddingBottom: tokens.spacing.md,
-      textTransform: "uppercase",
-      letterSpacing: 1,
-      fontWeight: "600",
-      fontSize: 12,
-    },
-  });