@towsila/expo-ui-library 2.1.0 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@towsila/expo-ui-library",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/components/ui/asidebar.tsx

@@ -1,13 +1,13 @@
-import {  TouchableOpacity, View, Text, Modal, Pressable, Animated } from "react-native";
-import { Menu } from "../../types/menu";
-import { useLanguage } from "../../context/LanguageContext";
-import LanguageSelect from "./languageSelect";
+import {  TouchableOpacity, View, Text, Modal, Pressable, Animated, I18nManager } from "react-native";
 import React, { useState, useEffect, useRef } from "react";
-import { Fonts, textSize } from "../../tokens/typography";
-import { useAppTheme } from "../../context/ThemeContext";
 import { Dimensions } from "react-native";
 import {Logout} from "@towsila/icons";
 import ThemeToggle from "./themeToggle";
+import { useAppTheme } from "../../context/ThemeContext";
+import { useLanguage } from "../../context/LanguageContext";
+import { Menu } from "../../types/menu";
+import LanguageSelect from "./languageSelect";
+import { Fonts, textSize } from "../../tokens/typography";
 const SIDEBAR_WIDTH = Dimensions.get("window").width * 0.7;
 
 interface AsideProps{
@@ -107,7 +107,9 @@ export default function AsideBar({logo, menu, onLogout, logoutLabel, onNavigate,
                                 }}
                             >
                                 {item.iconSvg && (
-                                    item.iconSvg(isActive ? colors.primary : "transparent")
+                                    <View style={[I18nManager.isRTL && {transform: [{ scaleX: -1 }]} ]}>
+                                        {item.iconSvg(isActive ? colors.primary : "transparent")}
+                                    </View>
                                 )}
                                 <Text style={{
                                     fontFamily: isActive ? Fonts.montserrat.semiBold : Fonts.montserrat.regular,
@@ -126,7 +128,7 @@ export default function AsideBar({logo, menu, onLogout, logoutLabel, onNavigate,
                 {/* bottom container */}
                 <View style={{ gap: 16, paddingHorizontal: 16, }}>
                     <TouchableOpacity onPress={onLogout} style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
-                        <Logout width={22} height={22} color={colors.semantic.error}/>
+                        <Logout width={22} height={22} color={colors.semantic.error} style={[I18nManager.isRTL  && {transform: [{scale:-1}]}]}/>
                         <Text style={{
                             fontFamily: Fonts.montserrat.regular,
                             fontSize: textSize.md,

package/src/components/ui/themeToggle.tsx

@@ -1,9 +1,9 @@
 import { useRef, useEffect } from "react";
-import { Animated, TouchableOpacity, View, Text } from "react-native";
-import { useAppTheme } from "../../context/ThemeContext";
+import { Animated, TouchableOpacity, View, Text, I18nManager } from "react-native";
 import {LightMode, DarkMode} from "@towsila/icons";
-import { Fonts, textSize } from "../../tokens/typography";
 import Svg, { Path } from "react-native-svg";
+import { useAppTheme } from "../../context/ThemeContext";
+import { Fonts, textSize } from "../../tokens/typography";
 
 interface TextTheme {
   label?: string;
@@ -30,8 +30,8 @@ export default function ThemeToggle({ label }: TextTheme) {
   return (
     <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
       {isDark
-        ? <DarkMode width={22} height={22} color={colors.text.primary} />
-        : <LightMode width={24} height={24} color={colors.text.primary} />
+        ? <DarkMode width={22} height={22} color={colors.text.primary} style={[I18nManager.isRTL && {transform:[{scaleX: -1}]}]}/>
+        : <LightMode width={24} height={24} color={colors.text.primary} style={[I18nManager.isRTL && {transform:[{scaleX: -1}]}]}/>
       }
 
       {label && (
@@ -70,7 +70,7 @@ export default function ThemeToggle({ label }: TextTheme) {
           <Animated.View style={{
             position: "absolute",
             top: MARGIN,
-            left: MARGIN,
+            ...(I18nManager.isRTL ? { right: MARGIN } : { left: MARGIN }),
             width: THUMB,
             height: THUMB,
             borderRadius: THUMB / 2,
@@ -86,8 +86,8 @@ export default function ThemeToggle({ label }: TextTheme) {
             elevation: 4,
           }}>
             {isDark
-              ? <LightMode width={20} height={20} color={colors.background.main} />
-              : <DarkMode width={16} height={16} color={colors.background.main} />
+              ? <LightMode width={20} height={20} color={colors.background.main} style={[I18nManager.isRTL && {transform:[{scaleX: -1}]}]}/>
+              : <DarkMode width={16} height={16} color={colors.background.main} style={[I18nManager.isRTL && {transform:[{scaleX: -1}]}]}/>
             }
           </Animated.View>
         </View>

package/src/hooks/useResetPasswordForm.ts

@@ -28,7 +28,7 @@ export function useResetPasswordForm({
       ...(includeOldPassword ? 
       [{ name: "oldPassword", type: "password", label: "Old Password" }] : []),
       { name: "password", type: "password", label: "Password" },
-      { name: "confirmPassword", type: "confirmPassword", label: "Confirm Password" },
+      { name: "confirmPassword", type: "password", label: "Confirm Password" },
     ];
 
     const formValues = {