@hoddy-ui/core 2.5.29 → 2.5.31

package/next/dist/index.mjs

@@ -178,19 +178,18 @@ import { Platform as Platform3, StatusBar } from "react-native";
 
 // ../src/hooks.ts
 import { useContext } from "react";
-import { Dimensions, Platform as Platform2 } from "react-native";
-import { vs } from "react-native-size-matters";
+import { Platform as Platform2, useColorScheme as useColorScheme2 } from "react-native";
 
 // ../src/theme/index.tsx
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import * as NavigationBar from "expo-navigation-bar";
 import * as SystemUI from "expo-system-ui";
-import React4, { createContext, useEffect, useReducer } from "react";
+import React4, { createContext, useEffect as useEffect2, useReducer } from "react";
 import { Platform, useColorScheme } from "react-native";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 
 // ../src/Components/FlashMessage.tsx
-import React3, { useRef, useState } from "react";
+import React3, { useEffect, useRef, useState } from "react";
 import { TouchableOpacity, View } from "react-native";
 import Animated, {
   runOnJS,
@@ -204,7 +203,7 @@ import { ScaledSheet } from "react-native-size-matters";
 // ../src/Components/Typography.tsx
 import React2, { forwardRef } from "react";
 import { StyleSheet, Text } from "react-native";
-import { moderateScale, ms } from "react-native-size-matters";
+import { ms } from "react-native-size-matters";
 
 // ../src/utility.ts
 var getFontFamily = (fontWeight) => {
@@ -230,19 +229,21 @@ var Typography = forwardRef(
   }, ref) => {
     const colors2 = useColors();
     const _fontSize = {
-      h1: moderateScale(42),
-      h2: moderateScale(37),
-      h3: moderateScale(32),
-      h4: moderateScale(27),
-      h5: moderateScale(22),
-      h6: moderateScale(17),
-      body1: moderateScale(15),
-      body2: moderateScale(12),
-      caption: moderateScale(10)
+      h1: ms(42),
+      h2: ms(37),
+      h3: ms(32),
+      h4: ms(27),
+      h5: ms(22),
+      h6: ms(17),
+      body1: ms(15),
+      body2: ms(12),
+      caption: ms(10)
     };
-    const styles2 = StyleSheet.create({
+    const f = fontSize || _fontSize[variant];
+    const styles = StyleSheet.create({
       text: {
-        fontSize: fontSize || _fontSize[variant],
+        lineHeight: f * 1.2,
+        fontSize: f,
         marginBottom: ms(gutterBottom) || 0,
         color: colors2[color]?.main || color,
         textTransform: textCase,
@@ -257,7 +258,7 @@ var Typography = forwardRef(
       {
         ref,
         adjustsFontSizeToFit,
-        style: [styles2.text, style],
+        style: [styles.text, style],
         ...props
       },
       children
@@ -267,7 +268,15 @@ var Typography = forwardRef(
 var Typography_default = Typography;
 
 // ../src/Components/FlashMessage.tsx
-var showFlashMessage = () => {
+var flashListeners = /* @__PURE__ */ new Set();
+var showFlashMessage = (msg) => {
+  flashListeners.forEach((listener) => listener(msg));
+};
+var subscribeToFlashMessages = (listener) => {
+  flashListeners.add(listener);
+  return () => {
+    flashListeners.delete(listener);
+  };
 };
 var FlashMessage = () => {
   const { top } = useSafeAreaInsets();
@@ -290,32 +299,42 @@ var FlashMessage = () => {
       runOnJS(hideMessage)();
     });
   };
-  showFlashMessage = (msg) => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-      timeoutRef.current = null;
-    }
-    translateY.value = -200;
-    opacity.value = 0;
-    setMessage(msg);
-    translateY.value = withTiming(0, { duration: 300 });
-    opacity.value = withTiming(1, { duration: 300 });
-    const duration = msg.duration || 3e3;
-    timeoutRef.current = setTimeout(() => {
-      translateY.value = withTiming(-200, { duration: 300 });
-      opacity.value = withTiming(0, { duration: 300 }, () => {
-        runOnJS(hideMessage)();
-      });
-      timeoutRef.current = null;
-    }, duration);
-  };
+  useEffect(() => {
+    const listener = (msg) => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+      translateY.value = -200;
+      opacity.value = 0;
+      setMessage(msg);
+      translateY.value = withTiming(0, { duration: 300 });
+      opacity.value = withTiming(1, { duration: 300 });
+      const duration = msg.duration || 3e3;
+      timeoutRef.current = setTimeout(() => {
+        translateY.value = withTiming(-200, { duration: 300 });
+        opacity.value = withTiming(0, { duration: 300 }, () => {
+          runOnJS(hideMessage)();
+        });
+        timeoutRef.current = null;
+      }, duration);
+    };
+    const unsubscribe = subscribeToFlashMessages(listener);
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+      unsubscribe();
+    };
+  }, []);
   const animatedStyle = useAnimatedStyle(() => {
     return {
       transform: [{ translateY: translateY.value }],
       opacity: opacity.value
     };
   });
-  const styles2 = ScaledSheet.create({
+  const styles = ScaledSheet.create({
     root: {
       position: "absolute",
       top: 0,
@@ -341,7 +360,7 @@ var FlashMessage = () => {
   });
   if (!message)
     return null;
-  return /* @__PURE__ */ React3.createElement(Animated.View, { style: [styles2.root, animatedStyle] }, /* @__PURE__ */ React3.createElement(TouchableOpacity, { onPress: closeMessage, activeOpacity: 0.9 }, /* @__PURE__ */ React3.createElement(View, { style: { flexDirection: "row" } }, /* @__PURE__ */ React3.createElement(View, { style: { flex: 1, marginRight: 10 } }, message?.title && /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React3.createElement(Animated.View, { style: [styles.root, animatedStyle] }, /* @__PURE__ */ React3.createElement(TouchableOpacity, { onPress: closeMessage, activeOpacity: 0.9 }, /* @__PURE__ */ React3.createElement(View, { style: { flexDirection: "row" } }, /* @__PURE__ */ React3.createElement(View, { style: { flex: 1, marginRight: 10 } }, message?.title && /* @__PURE__ */ React3.createElement(
     Typography_default,
     {
       variant: "h6",
@@ -354,7 +373,7 @@ var FlashMessage = () => {
     TouchableOpacity,
     {
       key: i,
-      style: styles2.action,
+      style: styles.action,
       onPress: () => {
         cur.onPress?.();
         closeMessage();
@@ -384,7 +403,7 @@ function themeReducer(state, { type, payload }) {
 var ConfigureSystemUI = () => {
   const theme = useTheme();
   const colors2 = useColors();
-  useEffect(() => {
+  useEffect2(() => {
     const config2 = getConfig();
     if (colors2) {
       SystemUI.setBackgroundColorAsync(colors2.white[1]);
@@ -441,6 +460,7 @@ var UIThemeProvider = ({ children }) => {
 };
 
 // ../src/hooks.ts
+import AsyncStorage2 from "@react-native-async-storage/async-storage";
 var useColors = () => {
   const { themeState } = useContext(UIThemeContext);
   return colors(themeState.value);
@@ -449,9 +469,22 @@ var useTheme = () => {
   const { themeState } = useContext(UIThemeContext);
   return themeState.value;
 };
+var useThemeContext = () => {
+  const { themeState: theme, themeDispatch } = useContext(UIThemeContext);
+  const colorScheme = useColorScheme2();
+  const setTheme = (theme2) => {
+    if (theme2 === "default") {
+      themeDispatch?.({ type: "default", payload: colorScheme });
+      AsyncStorage2.setItem("theme", "default");
+    } else {
+      themeDispatch?.({ type: theme2 });
+      AsyncStorage2.setItem("theme", theme2);
+    }
+  };
+  return { theme, setTheme };
+};
 var useNavScreenOptions = (type) => {
   const colors2 = useColors();
-  const theme = useTheme();
   const options = {
     stack: {
       headerShown: false,
@@ -471,15 +504,12 @@ var useNavScreenOptions = (type) => {
       headerShown: false,
       headerTintColor: colors2.dark.main,
       tabBarStyle: {
-        borderTopColor: theme === "dark" ? colors2.light.main : colors2.white[2],
+        borderTopColor: colors2.white[2],
+        borderColor: colors2.white[2],
         borderTopWidth: 1,
-        // shadowColor: "#000",
-        // shadowOffset: { height: -3, width: 0 },
-        // shadowRadius: 7,
-        // shadowOpacity: 0.1,
         backgroundColor: colors2.white[1]
       },
-      tabBarActiveTintColor: colors2.blue.main,
+      tabBarActiveTintColor: colors2.primary.main,
       tabBarInactiveTintColor: colors2.textSecondary.main,
       tabBarLabelStyle: {
         // fontSize: ms(12),
@@ -503,10 +533,6 @@ var useNavScreenOptions = (type) => {
       }
     }
   };
-  if (Platform2.OS === "android") {
-    options.tab.tabBarStyle.height = Dimensions.get("screen").height * 0.08;
-    options.tab.tabBarStyle.paddingBottom = vs(15);
-  }
   return options[type];
 };
 
@@ -550,7 +576,7 @@ var AlertX = ({
   style = {}
 }) => {
   const colors2 = useColors();
-  const styles2 = ScaledSheet2.create({
+  const styles = ScaledSheet2.create({
     container: {
       padding: 20,
       paddingTop: 10,
@@ -568,7 +594,7 @@ var AlertX = ({
       color: variant === "contained" ? "#fff" : colors2[type].main
     }
   });
-  return /* @__PURE__ */ React6.createElement(View2, { style: [styles2.container, style] }, /* @__PURE__ */ React6.createElement(View2, { style: { width: "80%" } }, /* @__PURE__ */ React6.createElement(Typography_default, { style: styles2.title, gutterBottom: 3, fontWeight: 700 }, title), body && /* @__PURE__ */ React6.createElement(Typography_default, { fontWeight: 700, variant: "body2", style: styles2.body }, body)), /* @__PURE__ */ React6.createElement(View2, { style: { marginLeft: "auto" } }, /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React6.createElement(View2, { style: [styles.container, style] }, /* @__PURE__ */ React6.createElement(View2, { style: { width: "80%" } }, /* @__PURE__ */ React6.createElement(Typography_default, { style: styles.title, gutterBottom: 3, fontWeight: 700 }, title), body && /* @__PURE__ */ React6.createElement(Typography_default, { fontWeight: 700, variant: "body2", style: styles.body }, body)), /* @__PURE__ */ React6.createElement(View2, { style: { marginLeft: "auto" } }, /* @__PURE__ */ React6.createElement(
     MaterialIcons,
     {
       color: variant === "contained" ? "#fff" : colors2[type].main,
@@ -593,7 +619,7 @@ var Avatar = ({
   style = {}
 }) => {
   const colors2 = useColors();
-  const styles2 = ScaledSheet3.create({
+  const styles = ScaledSheet3.create({
     root: {
       borderRadius: 150,
       height: ms3(size),
@@ -611,7 +637,7 @@ var Avatar = ({
       width: "110%"
     }
   });
-  return /* @__PURE__ */ React7.createElement(View3, { style: styles2.root }, source ? /* @__PURE__ */ React7.createElement(Image, { resizeMode: "cover", style: styles2.image, source }) : label ? /* @__PURE__ */ React7.createElement(Typography_default, { style: { color: colors2[color].text } }, label[0]) : /* @__PURE__ */ React7.createElement(AntDesign, { name: "user", color: "#fff", size: Math.round(size / 1.5) }));
+  return /* @__PURE__ */ React7.createElement(View3, { style: styles.root }, source ? /* @__PURE__ */ React7.createElement(Image, { resizeMode: "cover", style: styles.image, source }) : label ? /* @__PURE__ */ React7.createElement(Typography_default, { style: { color: colors2[color].text } }, label[0]) : /* @__PURE__ */ React7.createElement(AntDesign, { name: "user", color: "#fff", size: Math.round(size / 1.5) }));
 };
 var Avatar_default = Avatar;
 
@@ -631,7 +657,7 @@ var LinkButton = ({
   }
 }) => {
   const colors2 = useColors();
-  const styles2 = ScaledSheet4.create({
+  const styles = ScaledSheet4.create({
     text: {
       fontSize: moderateScale2(fontSize),
       fontWeight: fontWeight.toString(),
@@ -639,7 +665,7 @@ var LinkButton = ({
       color: disabled ? "#777" : colors2[color].main
     }
   });
-  return /* @__PURE__ */ React8.createElement(TouchableOpacity2, { onPress, disabled }, /* @__PURE__ */ React8.createElement(Text2, { style: { ...styles2.text, ...style } }, title));
+  return /* @__PURE__ */ React8.createElement(TouchableOpacity2, { onPress, disabled }, /* @__PURE__ */ React8.createElement(Text2, { style: { ...styles.text, ...style } }, title));
 };
 var IconButton = ({
   style = {},
@@ -657,7 +683,7 @@ var IconButton = ({
   const colors2 = useColors();
   const theme = useTheme();
   const bgColor = theme === "light" ? "#fff" : "#222";
-  const styles2 = ScaledSheet4.create({
+  const styles = ScaledSheet4.create({
     container: {
       alignSelf: "flex-start",
       flexGrow: 0,
@@ -690,9 +716,9 @@ var IconButton = ({
     {
       onPress,
       activeOpacity: 0.3,
-      style: { ...styles2.container, ...containerStyles }
+      style: { ...styles.container, ...containerStyles }
     },
-    /* @__PURE__ */ React8.createElement(IconComp, { style: { ...styles2.text, ...style }, name: icon, size })
+    /* @__PURE__ */ React8.createElement(IconComp, { style: { ...styles.text, ...style }, name: icon, size })
   );
 };
 var Button = forwardRef2(
@@ -715,7 +741,7 @@ var Button = forwardRef2(
     end
   }, ref) => {
     const colors2 = useColors();
-    const styles2 = ScaledSheet4.create({
+    const styles = ScaledSheet4.create({
       con: {
         flexDirection: "row",
         alignItems: "center",
@@ -752,7 +778,7 @@ var Button = forwardRef2(
         ref,
         onPress,
         disabled,
-        style: styles2.con
+        style: styles.con
       },
       start,
       loading && /* @__PURE__ */ React8.createElement(
@@ -763,7 +789,7 @@ var Button = forwardRef2(
           style: { marginRight: 10 }
         }
       ),
-      /* @__PURE__ */ React8.createElement(Text2, { style: styles2.text }, title),
+      /* @__PURE__ */ React8.createElement(Text2, { style: styles.text }, title),
       end
     );
   }
@@ -785,14 +811,14 @@ var CheckBox = ({
 }) => {
   const iconName = checked ? "checkbox-marked" : "checkbox-blank-outline";
   const colors2 = useColors();
-  const styles2 = ScaledSheet5.create({
+  const styles = ScaledSheet5.create({
     container: {
       alignItems: "center",
       flexDirection: "row",
       ...style
     }
   });
-  return /* @__PURE__ */ React9.createElement(View4, { style: styles2.container }, /* @__PURE__ */ React9.createElement(TouchableOpacity3, { onPress: onChange }, /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React9.createElement(View4, { style: styles.container }, /* @__PURE__ */ React9.createElement(TouchableOpacity3, { onPress: onChange }, /* @__PURE__ */ React9.createElement(
     MaterialCommunityIcons,
     {
       name: iconName,
@@ -812,6 +838,7 @@ import {
   TouchableWithoutFeedback
 } from "react-native";
 import { ScaledSheet as ScaledSheet6 } from "react-native-size-matters";
+import { useSafeAreaInsets as useSafeAreaInsets2 } from "react-native-safe-area-context";
 var FormWrapper = ({
   children,
   behavior = Platform4.OS === "ios" ? "padding" : "height",
@@ -821,7 +848,9 @@ var FormWrapper = ({
   style = {},
   onScroll
 }) => {
-  const styles2 = ScaledSheet6.create({
+  const { bottom } = useSafeAreaInsets2();
+  const defaultOffset = Platform4.OS === "ios" ? -bottom : -bottom * 2;
+  const styles = ScaledSheet6.create({
     root: {
       width: "100%",
       flex: 1,
@@ -831,18 +860,18 @@ var FormWrapper = ({
   return mode === "static" ? /* @__PURE__ */ React10.createElement(TouchableWithoutFeedback, { onPress: Keyboard.dismiss, accessible: false }, /* @__PURE__ */ React10.createElement(
     KeyboardAvoidingView,
     {
-      style: styles2.root,
+      style: styles.root,
       behavior,
-      contentContainerStyle: styles2.root,
-      keyboardVerticalOffset
+      contentContainerStyle: styles.root,
+      keyboardVerticalOffset: keyboardVerticalOffset || defaultOffset
     },
     children
   )) : /* @__PURE__ */ React10.createElement(
     KeyboardAvoidingView,
     {
       behavior,
-      style: styles2.root,
-      keyboardVerticalOffset
+      style: styles.root,
+      keyboardVerticalOffset: keyboardVerticalOffset || defaultOffset
     },
     /* @__PURE__ */ React10.createElement(
       ScrollView,
@@ -862,7 +891,7 @@ var FormWrapper = ({
 // ../src/Components/StarRating.tsx
 import { Ionicons as Ionicons2 } from "@expo/vector-icons";
 import * as Haptics from "expo-haptics";
-import { useEffect as useEffect3, useState as useState4 } from "react";
+import { useEffect as useEffect4, useState as useState4 } from "react";
 import {
   ActivityIndicator as ActivityIndicator2,
   TextInput,
@@ -882,7 +911,7 @@ import {
   TouchableWithoutFeedback as TouchableWithoutFeedback2,
   View as View5
 } from "react-native";
-import React11, { useEffect as useEffect2, useState as useState3 } from "react";
+import React11, { useEffect as useEffect3, useState as useState3 } from "react";
 import Animated2, {
   LinearTransition,
   runOnJS as runOnJS2,
@@ -890,11 +919,11 @@ import Animated2, {
   useSharedValue as useSharedValue2,
   withTiming as withTiming2
 } from "react-native-reanimated";
-import { useSafeAreaInsets as useSafeAreaInsets2 } from "react-native-safe-area-context";
+import { useSafeAreaInsets as useSafeAreaInsets3 } from "react-native-safe-area-context";
 import { ms as ms5, ScaledSheet as ScaledSheet7 } from "react-native-size-matters";
 var Popup = ({
   title,
-  sheet,
+  sheet = true,
   bare = false,
   keyboardVerticalOffset,
   children,
@@ -908,12 +937,13 @@ var Popup = ({
   const theme = useTheme();
   const colors2 = useColors();
   const [modalVisible, setModalVisible] = useState3(false);
+  const [modalOpen, setModalOpen] = useState3(false);
   const [keyboardVisible, setKeyboardVisible] = useState3(false);
-  const { bottom } = useSafeAreaInsets2();
+  const { bottom } = useSafeAreaInsets3();
   const backdropOpacity = useSharedValue2(0);
   const contentTranslateY = useSharedValue2(1e3);
   const keyboardVerticalOffsetValue = Platform5.OS === "ios" ? -bottom : -bottom * 2;
-  useEffect2(() => {
+  useEffect3(() => {
     const keyboardDidShowListener = Keyboard2.addListener(
       "keyboardDidShow",
       () => {
@@ -931,22 +961,26 @@ var Popup = ({
       keyboardDidShowListener?.remove();
     };
   }, []);
-  useEffect2(() => {
+  const _onModalShow = () => {
+    setModalVisible(true);
+    onModalShow?.();
+  };
+  const _onModalHide = () => {
+    onModalHide?.();
+    setModalOpen(false);
+  };
+  useEffect3(() => {
     if (open) {
-      setModalVisible(true);
+      setModalOpen(true);
       backdropOpacity.value = withTiming2(1, { duration: 300 });
       contentTranslateY.value = withTiming2(0, { duration: 300 }, () => {
-        if (onModalShow) {
-          runOnJS2(onModalShow)();
-        }
+        runOnJS2(_onModalShow)();
       });
     } else {
+      setModalVisible(false);
       backdropOpacity.value = withTiming2(0, { duration: 200 });
       contentTranslateY.value = withTiming2(1e3, { duration: 200 }, () => {
-        runOnJS2(setModalVisible)(false);
-        if (onModalHide) {
-          runOnJS2(onModalHide)();
-        }
+        runOnJS2(_onModalHide)();
       });
     }
   }, [open]);
@@ -956,7 +990,7 @@ var Popup = ({
   const contentAnimatedStyle = useAnimatedStyle2(() => ({
     transform: [{ translateY: contentTranslateY.value }]
   }));
-  const styles2 = ScaledSheet7.create({
+  const styles = ScaledSheet7.create({
     root: {
       height: "100%",
       width: "100%",
@@ -1016,17 +1050,17 @@ var Popup = ({
       transparent: true,
       animationType: "none",
       statusBarTranslucent: true,
-      visible: modalVisible,
+      visible: modalOpen,
       onRequestClose: closeAction
     },
-    /* @__PURE__ */ React11.createElement(UIThemeProvider, null, /* @__PURE__ */ React11.createElement(Animated2.View, { style: [styles2.backdrop, backdropAnimatedStyle] }), /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React11.createElement(UIThemeProvider, null, /* @__PURE__ */ React11.createElement(Animated2.View, { style: [styles.backdrop, backdropAnimatedStyle] }), /* @__PURE__ */ React11.createElement(
       KeyboardAvoidingView2,
       {
-        style: styles2.keyboardView,
+        style: styles.keyboardView,
         behavior: Platform5.OS === "ios" ? "padding" : "height",
         keyboardVerticalOffset: keyboardVerticalOffset || keyboardVerticalOffsetValue
       },
-      /* @__PURE__ */ React11.createElement(TouchableWithoutFeedback2, { onPress: Keyboard2.dismiss }, /* @__PURE__ */ React11.createElement(View5, { style: styles2.root }, open && /* @__PURE__ */ React11.createElement(
+      /* @__PURE__ */ React11.createElement(TouchableWithoutFeedback2, { onPress: Keyboard2.dismiss }, /* @__PURE__ */ React11.createElement(View5, { style: styles.root }, modalOpen && /* @__PURE__ */ React11.createElement(
         Pressable,
         {
           style: [StyleSheet2.absoluteFill, { zIndex: 1 }],
@@ -1035,17 +1069,17 @@ var Popup = ({
       ), /* @__PURE__ */ React11.createElement(
         Animated2.View,
         {
-          style: [styles2.avoidingView, contentAnimatedStyle],
-          layout: LinearTransition.springify().stiffness(200).mass(0.5).damping(100)
+          style: [styles.avoidingView, contentAnimatedStyle],
+          layout: modalVisible ? LinearTransition.springify().stiffness(200).mass(0.5).damping(100) : void 0
         },
-        /* @__PURE__ */ React11.createElement(View5, { style: styles2.container }, !bare && /* @__PURE__ */ React11.createElement(View5, { style: styles2.title }, /* @__PURE__ */ React11.createElement(View5, { style: styles2.titleIcon }, /* @__PURE__ */ React11.createElement(
+        /* @__PURE__ */ React11.createElement(View5, { style: styles.container }, !bare && /* @__PURE__ */ React11.createElement(View5, { style: styles.title }, /* @__PURE__ */ React11.createElement(View5, { style: styles.titleIcon }, /* @__PURE__ */ React11.createElement(
           IconButton,
           {
             size: 20,
             icon: "close",
             onPress: closeAction
           }
-        )), /* @__PURE__ */ React11.createElement(Typography_default, { align: "center", fontWeight: 500 }, title)), /* @__PURE__ */ React11.createElement(View5, { style: styles2.content }, children))
+        )), /* @__PURE__ */ React11.createElement(Typography_default, { align: "center", fontWeight: 500 }, title)), /* @__PURE__ */ React11.createElement(View5, { style: styles.content }, children))
       )))
     ))
   );
@@ -1057,13 +1091,13 @@ var RatingStars = ({
   size = 16
 }) => {
   const colors2 = useColors();
-  const styles2 = ScaledSheet8.create({
+  const styles = ScaledSheet8.create({
     root: {
       flexDirection: "row",
       alignItems: "center"
     }
   });
-  return /* @__PURE__ */ React.createElement(View6, { style: styles2.root }, [...Array(Math.floor(rating))].map((_, index) => /* @__PURE__ */ React.createElement(Ionicons2, { key: index, name: "star", size, color: "#FFD700" })), [...Array(5 - Math.floor(rating))].map((_, index) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(View6, { style: styles.root }, [...Array(Math.floor(rating))].map((_, index) => /* @__PURE__ */ React.createElement(Ionicons2, { key: index, name: "star", size, color: "#FFD700" })), [...Array(5 - Math.floor(rating))].map((_, index) => /* @__PURE__ */ React.createElement(
     Ionicons2,
     {
       key: index,
@@ -1083,7 +1117,7 @@ var RatingInput = ({
   const colors2 = useColors();
   const [loading, setLoading] = useState4(false);
   const [review, setReview] = useState4("");
-  const styles2 = ScaledSheet8.create({
+  const styles = ScaledSheet8.create({
     root: {
       flexDirection: "row",
       alignItems: "center"
@@ -1100,7 +1134,7 @@ var RatingInput = ({
       height: "100@vs"
     }
   });
-  useEffect3(() => {
+  useEffect4(() => {
     setRate(rating);
   }, [rating]);
   const onRate = (index) => {
@@ -1116,7 +1150,7 @@ var RatingInput = ({
     _onSubmit && await _onSubmit({ rating: rate, review });
     setLoading(false);
   };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View6, { style: styles2.root }, loading ? /* @__PURE__ */ React.createElement(ActivityIndicator2, null) : [...Array(5)].map((_, index) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View6, { style: styles.root }, loading ? /* @__PURE__ */ React.createElement(ActivityIndicator2, null) : [...Array(5)].map((_, index) => /* @__PURE__ */ React.createElement(
     TouchableOpacity4,
     {
       key: index,
@@ -1163,10 +1197,10 @@ var RatingInput = ({
       },
       "Add to your review"
     ),
-    /* @__PURE__ */ React.createElement(View6, { style: styles2.inputCon }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(View6, { style: styles.inputCon }, /* @__PURE__ */ React.createElement(
       TextInput,
       {
-        style: styles2.input,
+        style: styles.input,
         multiline: true,
         value: review,
         onChangeText: (text) => setReview(text),
@@ -1199,33 +1233,33 @@ var GridItem = ({
   spacing = 1,
   style = {}
 }) => {
-  const styles2 = ScaledSheet9.create({
+  const styles = ScaledSheet9.create({
     gridItem: {
       width: `${100 / col}%`,
       padding: ms6(spacing * 10),
       alignItems
     }
   });
-  return /* @__PURE__ */ React12.createElement(View7, { children, style: [styles2.gridItem, style] });
+  return /* @__PURE__ */ React12.createElement(View7, { children, style: [styles.gridItem, style] });
 };
 var Grid = ({
   children,
   spacing = 1,
   style = {}
 }) => {
-  const styles2 = ScaledSheet9.create({
+  const styles = ScaledSheet9.create({
     grid: {
       flexWrap: "wrap",
       margin: `${-spacing * 10}@ms`,
       flexDirection: "row"
     }
   });
-  return /* @__PURE__ */ React12.createElement(View7, { children, style: [styles2.grid, style] });
+  return /* @__PURE__ */ React12.createElement(View7, { children, style: [styles.grid, style] });
 };
 
 // ../src/Components/Locator.tsx
 import { Ionicons as Ionicons4 } from "@expo/vector-icons";
-import React16, { useEffect as useEffect4, useState as useState7 } from "react";
+import React16, { useEffect as useEffect5, useState as useState7 } from "react";
 import { Alert, TouchableOpacity as TouchableOpacity8, View as View11 } from "react-native";
 
 // ../src/Components/List.tsx
@@ -1242,7 +1276,7 @@ var ListItem = ({
   children
 }) => {
   const colors2 = useColors();
-  const styles2 = ScaledSheet10.create({
+  const styles = ScaledSheet10.create({
     root: {
       flexDirection: "row",
       alignItems: "center",
@@ -1255,7 +1289,7 @@ var ListItem = ({
   return /* @__PURE__ */ React13.createElement(
     View8,
     null,
-    /* @__PURE__ */ React13.createElement(TouchableOpacity5, { disabled: Boolean(!onPress), onPress }, /* @__PURE__ */ React13.createElement(View8, { style: { ...styles2.root, ...style } }, children, link && /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React13.createElement(TouchableOpacity5, { disabled: Boolean(!onPress), onPress }, /* @__PURE__ */ React13.createElement(View8, { style: { ...styles.root, ...style } }, children, link && /* @__PURE__ */ React13.createElement(
       MaterialIcons3,
       {
         color: colors2.white[5],
@@ -1281,8 +1315,8 @@ import {
 // ../src/Components/SelectMenu.tsx
 import { MaterialIcons as MaterialIcons4 } from "@expo/vector-icons";
 import React14, { useCallback, useState as useState5 } from "react";
-import { FlatList, Modal as Modal2, TouchableOpacity as TouchableOpacity6, View as View9 } from "react-native";
-import { useSafeAreaInsets as useSafeAreaInsets3 } from "react-native-safe-area-context";
+import { FlatList, TouchableOpacity as TouchableOpacity6, View as View9 } from "react-native";
+import { useSafeAreaInsets as useSafeAreaInsets4 } from "react-native-safe-area-context";
 import { ScaledSheet as ScaledSheet11 } from "react-native-size-matters";
 var SelectMenu = ({
   open = false,
@@ -1293,22 +1327,15 @@ var SelectMenu = ({
   disableAutoClose = false,
   label,
   secondary,
-  helperText
+  helperText,
+  searchEnabled = false,
+  searchPlaceholder = "Search"
 }) => {
   const colors2 = useColors();
-  const { bottom } = useSafeAreaInsets3();
+  const { bottom } = useSafeAreaInsets4();
   const [search, setSearch] = useState5("");
-  const styles2 = ScaledSheet11.create({
-    root: {
-      backgroundColor: colors2.white[1],
-      flex: 1
-    },
-    content: {
-      flex: 1,
-      paddingHorizontal: "10@ms"
-    },
+  const styles = ScaledSheet11.create({
     header: {
-      paddingTop: "80@ms",
       marginBottom: "20@vs"
     },
     option: {
@@ -1318,11 +1345,6 @@ var SelectMenu = ({
       flexDirection: "row",
       alignItems: "center",
       marginBottom: "10@vs"
-    },
-    footer: {
-      paddingBottom: bottom,
-      paddingHorizontal: "15@ms",
-      paddingTop: "15@ms"
     }
   });
   const renderItem = useCallback(
@@ -1330,7 +1352,7 @@ var SelectMenu = ({
       TouchableOpacity6,
       {
         style: {
-          ...styles2.option,
+          ...styles.option,
           backgroundColor: item.value === value ? colors2.blue.light + "22" : colors2.white[2]
         },
         onPress: () => {
@@ -1344,6 +1366,7 @@ var SelectMenu = ({
       /* @__PURE__ */ React14.createElement(View9, { style: { flex: 1 } }, /* @__PURE__ */ React14.createElement(
         Typography_default,
         {
+          variant: "body2",
           style: {
             color: item.value === value ? colors2.blue.light : colors2.black[2]
           }
@@ -1372,10 +1395,10 @@ var SelectMenu = ({
     ),
     [value, colors2]
   );
-  return /* @__PURE__ */ React14.createElement(Modal2, { visible: open, animationType: "slide", onRequestClose: onClose }, /* @__PURE__ */ React14.createElement(View9, { style: styles2.root }, /* @__PURE__ */ React14.createElement(View9, { style: styles2.content }, /* @__PURE__ */ React14.createElement(View9, { style: styles2.header }, /* @__PURE__ */ React14.createElement(Typography_default, { variant: "h5", gutterBottom: 5, fontWeight: 700 }, label), helperText ? /* @__PURE__ */ React14.createElement(Typography_default, { variant: "body2", color: "textSecondary" }, helperText) : null, /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React14.createElement(Popup, { open, onClose, title: label }, /* @__PURE__ */ React14.createElement(View9, { style: styles.content }, /* @__PURE__ */ React14.createElement(View9, { style: styles.header }, helperText && /* @__PURE__ */ React14.createElement(Typography_default, { variant: "body2", color: "textSecondary", gutterBottom: 5 }, helperText), searchEnabled && /* @__PURE__ */ React14.createElement(
     TextField_default,
     {
-      label: "Search",
+      label: searchPlaceholder,
       value: search,
       type: "search",
       onChangeText: setSearch,
@@ -1386,21 +1409,13 @@ var SelectMenu = ({
     {
       removeClippedSubviews: true,
       keyExtractor: (item) => item.value,
+      bounces: false,
       renderItem,
       data: options.filter(
         (item) => search.length > 1 ? item.label.toLowerCase().indexOf(search.toLowerCase()) > -1 : item
       ).sort((a, b) => a.label.localeCompare(b.label))
     }
-  )), /* @__PURE__ */ React14.createElement(View9, { style: styles2.footer }, /* @__PURE__ */ React14.createElement(
-    Button_default,
-    {
-      color: "error",
-      variant: "outlined",
-      fullWidth: true,
-      title: "Close",
-      onPress: onClose
-    }
-  ))));
+  )));
 };
 var SelectMenu_default = SelectMenu;
 
@@ -1430,6 +1445,7 @@ var TextField = ({
   gutterBottom = 0,
   end,
   options,
+  selectMenuProps,
   ...props
 }) => {
   const colors2 = useColors();
@@ -1453,7 +1469,7 @@ var TextField = ({
       }).start();
     }
   }, [focused, value]);
-  const styles2 = ScaledSheet12.create({
+  const styles = ScaledSheet12.create({
     root: {
       marginBottom: ms7(gutterBottom),
       width: "100%",
@@ -1535,13 +1551,13 @@ var TextField = ({
     autoCapitalize: "none",
     textContentType: "password"
   } : {};
-  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(View10, { style: styles2.root }, /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(View10, { style: styles.root }, /* @__PURE__ */ React15.createElement(
     TouchableOpacity7,
     {
       onPress: () => setFocused(true),
-      style: styles2.container
+      style: styles.container
     },
-    /* @__PURE__ */ React15.createElement(Animated3.Text, { style: { ...styles2.label, top: labelAnim } }, label),
+    /* @__PURE__ */ React15.createElement(Animated3.Text, { style: { ...styles.label, top: labelAnim } }, label),
     start,
     options ? /* @__PURE__ */ React15.createElement(
       View10,
@@ -1558,7 +1574,7 @@ var TextField = ({
         },
         options.find((cur) => cur.value === value)?.start
       ),
-      /* @__PURE__ */ React15.createElement(Typography_default, { style: styles2.inputText }, options.find((cur) => cur.value === value)?.label)
+      /* @__PURE__ */ React15.createElement(Typography_default, { style: styles.inputText }, options.find((cur) => cur.value === value)?.label)
     ) : /* @__PURE__ */ React15.createElement(
       TextInput2,
       {
@@ -1579,7 +1595,7 @@ var TextField = ({
         placeholderTextColor: colors2.textSecondary.main,
         ...formProps,
         ...props,
-        style: styles2.input
+        style: styles.input
       }
     ),
     end && /* @__PURE__ */ React15.createElement(
@@ -1613,11 +1629,11 @@ var TextField = ({
     Typography_default,
     {
       color: "textSecondary",
-      style: styles2.helperText,
+      style: styles.helperText,
       variant: "caption"
     },
     helperText
-  ), error && /* @__PURE__ */ React15.createElement(View10, { style: styles2.error }, /* @__PURE__ */ React15.createElement(MaterialIcons5, { name: "error", color: colors2.error.main, size: 16 }), /* @__PURE__ */ React15.createElement(Typography_default, { style: styles2.errorText, color: "error" }, error))), options && /* @__PURE__ */ React15.createElement(
+  ), error && /* @__PURE__ */ React15.createElement(View10, { style: styles.error }, /* @__PURE__ */ React15.createElement(MaterialIcons5, { name: "error", color: colors2.error.main, size: 16 }), /* @__PURE__ */ React15.createElement(Typography_default, { style: styles.errorText, color: "error" }, error))), options && /* @__PURE__ */ React15.createElement(
     SelectMenu_default,
     {
       options,
@@ -1626,7 +1642,8 @@ var TextField = ({
       onClose: () => setFocused(false),
       label,
       helperText,
-      onChange: onChangeText
+      onChange: onChangeText,
+      ...selectMenuProps
     }
   ));
 };
@@ -1657,6 +1674,7 @@ var TextField2 = React15.forwardRef(
     end,
     options,
     multiline,
+    selectMenuProps,
     ...props
   }, ref) => {
     const colors2 = useColors();
@@ -1668,7 +1686,7 @@ var TextField2 = React15.forwardRef(
     const setFocused = (value2) => {
       _setFocused(value2);
     };
-    const styles2 = ScaledSheet12.create({
+    const styles = ScaledSheet12.create({
       root: {
         marginBottom: ms7(gutterBottom),
         ...style
@@ -1743,7 +1761,7 @@ var TextField2 = React15.forwardRef(
       autoCapitalize: "none",
       textContentType: "password"
     } : {};
-    return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(View10, { style: styles2.root }, label && /* @__PURE__ */ React15.createElement(
+    return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(View10, { style: styles.root }, label && /* @__PURE__ */ React15.createElement(
       Typography_default,
       {
         variant: "body2",
@@ -1756,10 +1774,10 @@ var TextField2 = React15.forwardRef(
       TouchableOpacity7,
       {
         onPress: () => setFocused(true),
-        style: styles2.container
+        style: styles.container
       },
       /* @__PURE__ */ React15.createElement(View10, { style: { marginTop: multiline ? 5 : 0 } }, start),
-      options ? /* @__PURE__ */ React15.createElement(React15.Fragment, null, value ? /* @__PURE__ */ React15.createElement(Typography_default, { style: styles2.inputText }, options.find((cur) => cur.value === value)?.label) : /* @__PURE__ */ React15.createElement(Typography_default, { style: styles2.placeholder }, placeholder), /* @__PURE__ */ React15.createElement(
+      options ? /* @__PURE__ */ React15.createElement(React15.Fragment, null, value ? /* @__PURE__ */ React15.createElement(Typography_default, { style: styles.inputText }, options.find((cur) => cur.value === value)?.label) : /* @__PURE__ */ React15.createElement(Typography_default, { style: styles.placeholder }, placeholder), /* @__PURE__ */ React15.createElement(
         Ionicons3,
         {
           name: "chevron-down",
@@ -1792,7 +1810,7 @@ var TextField2 = React15.forwardRef(
           extAlignVertical: multiline ? "top" : "center",
           ...formProps,
           ...props,
-          style: styles2.input
+          style: styles.input
         }
       ),
       end ? /* @__PURE__ */ React15.createElement(View10, { style: { marginRight: 20 } }, end) : type === "password" && /* @__PURE__ */ React15.createElement(
@@ -1814,11 +1832,11 @@ var TextField2 = React15.forwardRef(
       Typography_default,
       {
         color: "textSecondary",
-        style: styles2.helperText,
+        style: styles.helperText,
         variant: "caption"
       },
       helperText
-    ), error && /* @__PURE__ */ React15.createElement(View10, { style: styles2.error }, /* @__PURE__ */ React15.createElement(MaterialIcons5, { name: "error", color: colors2.error.main, size: 16 }), /* @__PURE__ */ React15.createElement(Typography_default, { style: styles2.errorText, color: "error" }, error))), options && /* @__PURE__ */ React15.createElement(
+    ), error && /* @__PURE__ */ React15.createElement(View10, { style: styles.error }, /* @__PURE__ */ React15.createElement(MaterialIcons5, { name: "error", color: colors2.error.main, size: 16 }), /* @__PURE__ */ React15.createElement(Typography_default, { style: styles.errorText, color: "error" }, error))), options && /* @__PURE__ */ React15.createElement(
       SelectMenu_default,
       {
         options,
@@ -1827,7 +1845,8 @@ var TextField2 = React15.forwardRef(
         onClose: () => setFocused(false),
         label,
         helperText,
-        onChange: onChangeText
+        onChange: onChangeText,
+        ...selectMenuProps
       }
     ));
   }
@@ -1899,7 +1918,7 @@ var Locator = ({
   const [value, setValue] = useState7("");
   const [prediction, setPrediction] = useState7([]);
   const colors2 = useColors();
-  const styles2 = ScaledSheet13.create({
+  const styles = ScaledSheet13.create({
     list: {
       backgroundColor: colors2.white[2],
       elevation: 10,
@@ -1967,7 +1986,7 @@ var Locator = ({
     setChanged(false);
     setPrediction([]);
   };
-  useEffect4(() => {
+  useEffect5(() => {
     if (!GOOGLE_MAP_API_KEY)
       console.error(
         "Google map api key needs to be set to use this component \nMake sure to run initialize() with a valid google map api key"
@@ -2013,7 +2032,7 @@ var Locator = ({
         }
       )), /* @__PURE__ */ React16.createElement(TouchableOpacity8, { onPress: clear }, /* @__PURE__ */ React16.createElement(Ionicons4, { color: colors2.dark.main, size: 18, name: "close" })))
     }
-  ), prediction.length > 0 && /* @__PURE__ */ React16.createElement(View11, { style: styles2.list }, prediction.map(
+  ), prediction.length > 0 && /* @__PURE__ */ React16.createElement(View11, { style: styles.list }, prediction.map(
     (cur, i) => i < 5 && /* @__PURE__ */ React16.createElement(
       ListItem,
       {
@@ -2037,25 +2056,26 @@ var Locator = ({
 };
 
 // ../src/Components/SafeAreaView.tsx
-import { SafeAreaView as Safe } from "react-native";
 import React17 from "react";
-import { Platform as Platform6, StyleSheet as StyleSheet3 } from "react-native";
-import { moderateScale as moderateScale4 } from "react-native-size-matters";
-var styles = StyleSheet3.create({
-  droidSafeArea: {
-    flex: 1,
-    paddingTop: Platform6.OS === "android" ? moderateScale4(35) : 0
-  }
-});
+import { useSafeAreaInsets as useSafeAreaInsets5 } from "react-native-safe-area-context";
+import { StyleSheet as StyleSheet3, View as View12 } from "react-native";
 var SafeAreaView = ({
   children,
   style
 }) => {
-  return /* @__PURE__ */ React17.createElement(Safe, { style: { ...styles.droidSafeArea, ...style } }, children);
+  const { top, bottom } = useSafeAreaInsets5();
+  const styles = StyleSheet3.create({
+    root: {
+      paddingTop: top,
+      paddingBottom: bottom,
+      flex: 1
+    }
+  });
+  return /* @__PURE__ */ React17.createElement(View12, { style: [styles.root, style] }, children);
 };
 
 // ../src/Components/Divider.tsx
-import { View as View12 } from "react-native";
+import { View as View13 } from "react-native";
 import { ScaledSheet as ScaledSheet14, ms as ms8 } from "react-native-size-matters";
 var Divider = ({
   height = 1,
@@ -2064,7 +2084,7 @@ var Divider = ({
   style
 }) => {
   const colors2 = useColors();
-  const styles2 = ScaledSheet14.create({
+  const styles = ScaledSheet14.create({
     root: {
       height,
       backgroundColor: colors2[color].main,
@@ -2072,12 +2092,12 @@ var Divider = ({
       ...style
     }
   });
-  return /* @__PURE__ */ React.createElement(View12, { style: styles2.root });
+  return /* @__PURE__ */ React.createElement(View13, { style: styles.root });
 };
 
 // ../src/Components/Spinner.tsx
 import React18 from "react";
-import { ActivityIndicator as ActivityIndicator3, Dimensions as Dimensions2, View as View13 } from "react-native";
+import { ActivityIndicator as ActivityIndicator3, Dimensions, View as View14 } from "react-native";
 import { ScaledSheet as ScaledSheet15 } from "react-native-size-matters";
 var Spinner = ({
   label,
@@ -2087,10 +2107,10 @@ var Spinner = ({
   style = {}
 }) => {
   const colors2 = useColors();
-  const styles2 = ScaledSheet15.create({
+  const styles = ScaledSheet15.create({
     root: {
-      width: fullscreen ? Dimensions2.get("screen").width : "100%",
-      height: fullscreen ? Dimensions2.get("screen").height : "100%",
+      width: fullscreen ? Dimensions.get("screen").width : "100%",
+      height: fullscreen ? Dimensions.get("screen").height : "100%",
       left: 0,
       bottom: 0,
       zIndex: 100,
@@ -2113,7 +2133,7 @@ var Spinner = ({
       color: color === "light" ? colors2.white[2] : colors2.black[4]
     }
   });
-  return /* @__PURE__ */ React18.createElement(View13, { style: styles2.root }, /* @__PURE__ */ React18.createElement(View13, { style: styles2.content }, /* @__PURE__ */ React18.createElement(ActivityIndicator3, { color: colors2[color].dark, size }), label && /* @__PURE__ */ React18.createElement(Typography_default, { style: styles2.label }, label)));
+  return /* @__PURE__ */ React18.createElement(View14, { style: styles.root }, /* @__PURE__ */ React18.createElement(View14, { style: styles.content }, /* @__PURE__ */ React18.createElement(ActivityIndicator3, { color: colors2[color].dark, size }), label && /* @__PURE__ */ React18.createElement(Typography_default, { style: styles.label }, label)));
 };
 var Spinner_default = Spinner;
 
@@ -2121,7 +2141,7 @@ var Spinner_default = Spinner;
 import React19, { useMemo } from "react";
 import {
   TextInput as TextInput3,
-  View as View14
+  View as View15
 } from "react-native";
 import { ScaledSheet as ScaledSheet16, ms as ms9 } from "react-native-size-matters";
 var OTPInput = ({
@@ -2166,7 +2186,7 @@ var OTPInput = ({
     }
   };
   const colors2 = useColors();
-  const styles2 = ScaledSheet16.create({
+  const styles = ScaledSheet16.create({
     root: {},
     container: { flexDirection: "row" },
     input: {
@@ -2183,7 +2203,7 @@ var OTPInput = ({
       fontSize: ms9(size * 0.5)
     }
   });
-  return /* @__PURE__ */ React19.createElement(View14, { style: styles2.root }, /* @__PURE__ */ React19.createElement(View14, { style: styles2.container }, [...Array(length)].map((_, index) => /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React19.createElement(View15, { style: styles.root }, /* @__PURE__ */ React19.createElement(View15, { style: styles.container }, [...Array(length)].map((_, index) => /* @__PURE__ */ React19.createElement(
     TextInput3,
     {
       ref: inputRefs[index],
@@ -2192,7 +2212,7 @@ var OTPInput = ({
       blurOnSubmit: false,
       keyboardType: "number-pad",
       key: index,
-      style: [styles2.input]
+      style: [styles.input]
     }
   ))));
 };
@@ -2234,6 +2254,7 @@ export {
   showFlashMessage,
   useColors,
   useNavScreenOptions,
-  useTheme
+  useTheme,
+  useThemeContext
 };
 //# sourceMappingURL=index.mjs.map