@umituz/react-native-settings 4.21.28 → 4.21.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.21.28",
+  "version": "4.21.30",
   "description": "Complete settings hub for React Native apps - consolidated package with settings, about, legal, appearance, feedback, FAQs, rating, and gamification",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/presentation/components/SettingsFooter.tsx

@@ -14,7 +14,6 @@ export const SettingsFooter: React.FC<SettingsFooterProps> = ({
   versionLabel,
 }) => {
   const tokens = useAppDesignTokens();
-  const colors = tokens.colors;
 
   const displayText = versionText || (appVersion && versionLabel
     ? `${versionLabel} ${appVersion}`
@@ -24,7 +23,7 @@ export const SettingsFooter: React.FC<SettingsFooterProps> = ({
 
   return (
     <View style={styles.container}>
-      <AtomicText type="labelSmall" style={{ color: colors.textSecondary }}>
+      <AtomicText type="labelSmall" color="textSecondary">
         {displayText}
       </AtomicText>
     </View>

package/src/presentation/components/SettingsItemCard.tsx

@@ -1,11 +1,12 @@
 import React from "react";
-import { View, Pressable, StyleSheet, ViewStyle, Switch } from "react-native";
+import { View, Pressable, StyleSheet, ViewStyle } from "react-native";
 import {
     useAppDesignTokens,
     AtomicIcon,
     AtomicText,
+    AtomicSwitch,
     type IconName,
-    withAlpha
+    withAlpha,
 } from "@umituz/react-native-design-system";
 
 export interface SettingsItemCardProps {
@@ -52,41 +53,35 @@ export const SettingsItemCard: React.FC<SettingsItemCardProps> = ({
     const renderRightElement = () => {
         if (showSwitch) {
             return (
-                <Switch
-                    value={switchValue}
-                    onValueChange={onSwitchChange}
-                    trackColor={{
-                        false: colors.surfaceVariant,
-                        true: colors.primary,
-                    }}
-                    thumbColor={colors.surface}
-                    ios_backgroundColor={colors.surfaceVariant}
+                <AtomicSwitch
+                    value={!!switchValue}
+                    onValueChange={onSwitchChange || (() => {})}
                     disabled={disabled}
                 />
             );
         }
         if (shouldShowChevron) {
-            return <AtomicIcon name={rightIcon} size="sm" color="secondary" />;
+            return <AtomicIcon name={rightIcon} size="sm" color="textSecondary" />;
         }
         return null;
     };
 
     const renderContent = () => (
         <View style={styles.content}>
-            <View style={[styles.iconContainer, { backgroundColor: defaultIconBg, borderRadius: tokens.borderRadius.md }]}>
+            <View style={[styles.iconContainer, { backgroundColor: defaultIconBg, borderRadius: tokens.borders.radius.md }]}>
                 <AtomicIcon name={icon} size="lg" customColor={defaultIconColor} />
             </View>
             <View style={styles.textContainer}>
                 <AtomicText
                     type="bodyLarge"
-                    color={disabled ? "surfaceVariant" : "onSurface"}
+                    color={disabled ? "onSurfaceVariant" : "onSurface"}
                     numberOfLines={1}
                     style={{ marginBottom: description ? tokens.spacing.xs : 0, opacity: disabled ? 0.6 : 1 }}
                 >
                     {title}
                 </AtomicText>
                 {!!description && (
-                    <AtomicText type="bodyMedium" color="secondary" numberOfLines={2}>
+                    <AtomicText type="bodyMedium" color="textSecondary" numberOfLines={2}>
                         {description}
                     </AtomicText>
                 )}
@@ -101,7 +96,7 @@ export const SettingsItemCard: React.FC<SettingsItemCardProps> = ({
                 styles.sectionContainer,
                 { 
                     backgroundColor: colors.surface,
-                    borderRadius: tokens.borderRadius.lg,
+                    borderRadius: tokens.borders.radius.lg,
                 },
                 containerStyle,
             ]}

package/src/presentation/components/SettingsSection.tsx

@@ -12,12 +12,11 @@ export const SettingsSection: React.FC<SettingsSectionProps> = ({
   children,
 }) => {
   const tokens = useAppDesignTokens();
-  const colors = tokens.colors;
 
   return (
-    <View style={[styles.container, { backgroundColor: colors.surface }]}>
+    <View style={[styles.container, { backgroundColor: tokens.colors.surface }]}>
       <View style={styles.titleContainer}>
-        <AtomicText type="titleLarge" color="primary">
+        <AtomicText type="titleLarge" color="textPrimary">
           {title}
         </AtomicText>
       </View>

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

@@ -31,7 +31,7 @@ export const SettingsHeader: React.FC<SettingsHeaderProps> = ({
 
   return (
     <View style={[styles.container, { padding: tokens.spacing.lg }]}>
-      <AtomicText style={tokens.typography.headingLarge}>
+      <AtomicText type="headlineLarge">
         {t('settings.title')}
       </AtomicText>
       
@@ -42,7 +42,7 @@ export const SettingsHeader: React.FC<SettingsHeaderProps> = ({
             styles.closeButton,
             {
               backgroundColor: pressed ? tokens.colors.surfaceVariant : tokens.colors.surface,
-              borderRadius: tokens.borderRadius.full,
+              borderRadius: tokens.borders.radius.full,
             },
           ]}
           hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}