dhre-ui-kit 0.0.374 → 0.0.375

package/lib/index.mjs

@@ -1,6 +1,7 @@
 import React, { createContext, useContext, useState, useEffect, useRef, memo, useCallback } from 'react';
 import { useSelector } from 'react-redux';
 import { Dimensions, StyleSheet, Text, Pressable, View, Platform, KeyboardAvoidingView, TextInput, ScrollView, Animated, FlatList, TouchableOpacity, Modal as Modal$1, Alert, Linking, PanResponder } from 'react-native';
+import translate from 'google-translate-api-x';
 import Modal from 'react-native-modal';
 import Clipboard from '@react-native-clipboard/clipboard';
 import LottieView from 'lottie-react-native';
@@ -338,14 +339,55 @@ const FONT_STYLES = {
   [FontStyle.L3_REGULAR]: createFontStyle("MeraasAktiv-Regular", 10, 14)
 };
 
+const translateToArabic = async (text) => {
+  if (!text || text.trim() === "") {
+    return text;
+  }
+  try {
+    const result = await translate(text, { to: "ar" });
+    return result.text || text;
+  } catch (error) {
+    console.error("Translation error:", error);
+    return text;
+  }
+};
+const useArabicTranslation = (text, shouldTranslate = false) => {
+  const [translatedText, setTranslatedText] = useState(text || "");
+  const [isTranslating, setIsTranslating] = useState(false);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (!shouldTranslate || !text) {
+      setTranslatedText(text || "");
+      return;
+    }
+    const translate2 = async () => {
+      setIsTranslating(true);
+      setError(null);
+      try {
+        const translated = await translateToArabic(text);
+        setTranslatedText(translated);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Translation failed");
+        setTranslatedText(text);
+      } finally {
+        setIsTranslating(false);
+      }
+    };
+    translate2();
+  }, [text, shouldTranslate]);
+  return { translatedText, isTranslating, error };
+};
+
 const CustomTypography = ({
   variant,
   style,
   text,
   testID = "CUSTOM_TYPOGRAPHY",
+  translateToArabic = true,
   ...props
 }) => {
   const textStyle = FONT_STYLES[variant];
+  const { translatedText } = useArabicTranslation(text, translateToArabic);
   return /* @__PURE__ */ React.createElement(
     Text,
     {
@@ -353,7 +395,7 @@ const CustomTypography = ({
       style: [textStyle, styles$B.container, style],
       ...props
     },
-    text
+    translatedText
   );
 };
 const styles$B = StyleSheet.create({