@umituz/react-native-onboarding 3.3.1 → 3.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "3.3.1",
+  "version": "3.3.2",
   "description": "Advanced onboarding flow for React Native apps with personalization questions, theme-aware colors, animations, and customizable slides. SOLID, DRY, KISS principles applied.",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/presentation/components/questions/MultipleChoiceQuestion.tsx

@@ -7,7 +7,7 @@
 import React from "react";
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
 import { AtomicIcon } from "@umituz/react-native-design-system-atoms";
-import { useTheme } from "@umituz/react-native-design-system-theme";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
 import type { OnboardingQuestion, QuestionOption } from "../../../domain/entities/OnboardingQuestion";
 
 export interface MultipleChoiceQuestionProps {
@@ -21,8 +21,12 @@ export const MultipleChoiceQuestion: React.FC<MultipleChoiceQuestionProps> = ({
   value = [],
   onChange,
 }) => {
-  const { tokens } = useTheme() as any;
-  
+  const tokens = useAppDesignTokens();
+
+  if (!tokens) {
+    return null;
+  }
+
   const isEmoji = (icon: string) =>
     /[\u{1F300}-\u{1F9FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]/u.test(icon);
 
@@ -66,22 +70,22 @@ export const MultipleChoiceQuestion: React.FC<MultipleChoiceQuestionProps> = ({
           </View>
         )}
         <Text style={[
-          styles.optionLabel, 
+          styles.optionLabel,
           isSelected && styles.optionLabelSelected,
           { color: isSelected ? tokens.colors.textPrimary : tokens.colors.textSecondary }
         ]}>
           {option.label}
         </Text>
         <View style={[
-          styles.checkbox, 
+          styles.checkbox,
           isSelected && { borderWidth: 3 },
-          { 
-            borderColor: isSelected ? tokens.colors.borderPrimary : tokens.colors.borderSecondary,
+          {
+            borderColor: isSelected ? tokens.colors.primary : tokens.colors.border,
             backgroundColor: isSelected ? tokens.colors.backgroundSecondary : 'transparent'
           }
         ]}>
           {isSelected && (
-            <AtomicIcon name="Check" customSize={16} customColor={tokens.colors.textPrimary} />
+            <AtomicIcon name="Check" customSize={16} customColor={tokens.colors.primary} />
           )}
         </View>
       </TouchableOpacity>

package/src/presentation/components/questions/RatingQuestion.tsx

@@ -7,7 +7,7 @@
 import React from "react";
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
 import { AtomicIcon } from "@umituz/react-native-design-system-atoms";
-import { useTheme } from "@umituz/react-native-design-system-theme";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
 import type { OnboardingQuestion } from "../../../domain/entities/OnboardingQuestion";
 
 export interface RatingQuestionProps {
@@ -21,7 +21,12 @@ export const RatingQuestion: React.FC<RatingQuestionProps> = ({
   value = 0,
   onChange,
 }) => {
-  const { tokens } = useTheme() as any;
+  const tokens = useAppDesignTokens();
+
+  if (!tokens) {
+    return null;
+  }
+
   const { validation } = question;
   const max = validation?.max ?? 5;
 

package/src/presentation/components/questions/SingleChoiceQuestion.tsx

@@ -7,7 +7,7 @@
 import React from "react";
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
 import { AtomicIcon } from "@umituz/react-native-design-system-atoms";
-import { useTheme } from "@umituz/react-native-design-system-theme";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
 import type { OnboardingQuestion, QuestionOption } from "../../../domain/entities/OnboardingQuestion";
 
 export interface SingleChoiceQuestionProps {
@@ -21,8 +21,12 @@ export const SingleChoiceQuestion: React.FC<SingleChoiceQuestionProps> = ({
   value,
   onChange,
 }) => {
-  const { tokens } = useTheme() as any;
-  
+  const tokens = useAppDesignTokens();
+
+  if (!tokens) {
+    return null;
+  }
+
   const isEmoji = (icon: string) =>
     /[\u{1F300}-\u{1F9FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]/u.test(icon);
 
@@ -50,16 +54,16 @@ export const SingleChoiceQuestion: React.FC<SingleChoiceQuestionProps> = ({
           </View>
         )}
         <Text style={[
-          styles.optionLabel, 
+          styles.optionLabel,
           isSelected && styles.optionLabelSelected,
           { color: isSelected ? tokens.colors.textPrimary : tokens.colors.textSecondary }
         ]}>
           {option.label}
         </Text>
         <View style={[
-          styles.radio, 
+          styles.radio,
           isSelected && { borderWidth: 3 },
-          { borderColor: isSelected ? tokens.colors.borderPrimary : tokens.colors.borderSecondary }
+          { borderColor: isSelected ? tokens.colors.primary : tokens.colors.border }
         ]}>
           {isSelected && <View style={[styles.radioInner, { backgroundColor: tokens.colors.textPrimary }]} />}
         </View>

package/src/presentation/components/questions/TextInputQuestion.tsx

@@ -6,7 +6,7 @@
 
 import React from "react";
 import { View, TextInput, StyleSheet, Text } from "react-native";
-import { useTheme } from "@umituz/react-native-design-system-theme";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
 import type { OnboardingQuestion } from "../../../domain/entities/OnboardingQuestion";
 
 export interface TextInputQuestionProps {
@@ -20,7 +20,7 @@ export const TextInputQuestion: React.FC<TextInputQuestionProps> = ({
   value = "",
   onChange,
 }) => {
-  const { tokens } = useTheme() as any;
+  const tokens = useAppDesignTokens();
   const { validation } = question;
 
   return (
@@ -30,7 +30,7 @@ export const TextInputQuestion: React.FC<TextInputQuestionProps> = ({
           styles.input,
           {
             backgroundColor: tokens.colors.backgroundSecondary,
-            borderColor: tokens.colors.borderSecondary,
+            borderColor: tokens.colors.border,
             color: tokens.colors.textPrimary,
           }
         ]}