@hoddy-ui/core 1.0.99 → 1.1.0

package/next/dist/index.mjs

@@ -4,61 +4,65 @@ var setExtraColors = (c) => extraColors = c;
 function colors(theme) {
   const lightColors = {
     white: {
-      1: "#fff",
+      1: "#ffffff",
       2: "#f7f7f7",
-      3: "#eee",
-      4: "#ddd",
-      5: "#bbb"
+      3: "#eeeeee",
+      4: "#dddddd",
+      5: "#bbbbbb",
+      ...extraColors?.light?.white
     },
     black: {
-      1: "#888",
-      2: "#777",
-      3: "#555",
-      4: "#333",
-      5: "#000"
+      1: "#888888",
+      2: "#777777",
+      3: "#555555",
+      4: "#333333",
+      5: "#000000",
+      ...extraColors?.light?.black
     }
   };
   const darkColors = {
     black: {
-      1: "#fff",
+      1: "#ffffff",
       2: "#f7f7f7",
-      3: "#eee",
-      4: "#ddd",
-      5: "#aaa"
+      3: "#eeeeee",
+      4: "#dddddd",
+      5: "#aaaaaa",
+      ...extraColors?.dark?.black
     },
     white: {
-      1: "#000",
-      2: "#222",
-      3: "#333",
-      4: "#444",
-      5: "#555"
+      1: "#060606",
+      2: "#222222",
+      3: "#333333",
+      4: "#444444",
+      5: "#555555",
+      ...extraColors?.dark?.white
     },
     dark: {
       main: "#f2f3f4",
-      light: "#fff",
-      dark: "#ddd",
-      text: "#000",
+      light: "#ffffff",
+      dark: "#dddddd",
+      text: "#000000",
       ...extraColors?.dark?.dark
     },
     light: {
-      main: "#111",
-      light: "#555",
-      dark: "#333",
-      text: "#fff",
+      main: "#111111",
+      light: "#555555",
+      dark: "#333333",
+      text: "#ffffff",
       ...extraColors?.dark?.light
     },
     textSecondary: {
-      main: "#666",
-      light: "#777",
-      dark: "#444",
-      text: "#fff",
+      main: "#666666",
+      light: "#777777",
+      dark: "#444444",
+      text: "#ffffff",
       ...extraColors?.dark?.textSecondary
     },
     primary: {
-      main: "#f80",
-      light: "#FEFFD3",
-      dark: "#fa0",
-      text: "#fff",
+      main: "#ff8800",
+      light: "#feffd3",
+      dark: "#ffaa00",
+      text: "#ffffff",
       ...extraColors?.light?.primary,
       ...extraColors?.dark?.primary
     }
@@ -67,73 +71,73 @@ function colors(theme) {
   return {
     ...extraColors[theme],
     primary: {
-      main: "#f80",
-      light: "#FEFFD3",
-      dark: "#fa0",
-      text: "#fff",
+      main: "#ff8800",
+      light: "#feffd3",
+      dark: "#ffaa00",
+      text: "#ffffff",
       ...extraColors?.light?.primary
     },
     secondary: {
-      main: "#f11",
-      light: "#f43",
-      dark: "#d00",
-      text: "#fff",
+      main: "#ff1111",
+      light: "#ff4433",
+      dark: "#dd0000",
+      text: "#ffffff",
       ...extraColors?.light?.secondary
     },
     light: {
-      main: "#fff",
-      light: "#fff",
-      dark: "#ddd",
-      text: "#000",
+      main: "#ffffff",
+      light: "#ffffff",
+      dark: "#dddddd",
+      text: "#000000",
       ...extraColors?.light?.light
     },
     dark: {
-      main: "#000",
-      light: "#777",
-      dark: "#111",
-      text: "#fff",
+      main: "#000000",
+      light: "#777777",
+      dark: "#111111",
+      text: "#ffffff",
       ...extraColors?.light?.dark
     },
     textSecondary: {
-      main: "#aaa",
-      light: "#bbb",
-      dark: "#777",
-      text: "#123",
+      main: "#aaaaaa",
+      light: "#bbbbbb",
+      dark: "#777777",
+      text: "#112233",
       ...extraColors?.light?.textSecondary
     },
     blue: {
-      main: "#09F",
-      light: "#39f",
-      dark: "#028",
-      text: "#fff",
+      main: "#0099ff",
+      light: "#3399ff",
+      dark: "#002288",
+      text: "#ffffff",
       ...extraColors?.light?.blue
     },
     info: {
-      main: "#09f",
-      light: "#3af",
-      dark: "#08a",
-      text: "#fff",
+      main: "#0099ff",
+      light: "#33aaff",
+      dark: "#0088aa",
+      text: "#ffffff",
       ...extraColors?.light?.info
     },
     success: {
-      main: "#0a4",
-      text: "#fff",
-      light: "#5c3",
-      dark: "#062",
+      main: "#00aa44",
+      text: "#ffffff",
+      light: "#55cc33",
+      dark: "#006622",
       ...extraColors?.light?.success
     },
     warning: {
-      main: "#fa2",
-      light: "#fc7",
-      dark: "#f90",
-      text: "#fff",
+      main: "#ffaa22",
+      light: "#ffcc77",
+      dark: "#ff9900",
+      text: "#ffffff",
       ...extraColors?.light?.warning
     },
     error: {
-      main: "#D22",
-      text: "#fff",
-      light: "#f43",
-      dark: "#a20",
+      main: "#dd2222",
+      text: "#ffffff",
+      light: "#ff4433",
+      dark: "#aa2200",
       ...extraColors?.light?.error
     },
     ...dynamicColors
@@ -167,7 +171,7 @@ function initialize(config2) {
 
 // components/AdaptiveStatusBarNext.tsx
 import { useFocusEffect } from "expo-router";
-import React5, { useState as useState3 } from "react";
+import React5, { useState as useState2 } from "react";
 import { Platform as Platform3, StatusBar } from "react-native";
 
 // ../src/hooks.ts
@@ -179,8 +183,9 @@ import { vs } from "react-native-size-matters";
 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, 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, { useEffect, useState } from "react";
@@ -232,8 +237,8 @@ var Typography = forwardRef(
         textTransform: textCase,
         alignItems: "center",
         textAlign: align,
-        fontWeight: fontWeight.toString(),
-        fontFamily: fontFamily || getConfig().DEFAULT_FONT_FAMILY || "System"
+        fontWeight,
+        fontFamily: fontFamily || getConfig().DEFAULT_FONT_FAMILY || void 0
         // Use custom font if provided, else default
       }
     });
@@ -314,24 +319,10 @@ var FlashMessage = () => {
 var FlashMessage_default = FlashMessage;
 
 // ../src/theme/index.tsx
-import { SafeAreaProvider } from "react-native-safe-area-context";
 var UIThemeContext = createContext({
   themeState: { mode: "default", value: "light" }
 });
 function themeReducer(state, { type, payload }) {
-  if (payload === "dark" || type === "dark") {
-    SystemUI.setBackgroundColorAsync("#000000");
-    if (Platform.OS === "android") {
-      NavigationBar.setButtonStyleAsync("light");
-      NavigationBar.setBackgroundColorAsync("#000000");
-    }
-  } else {
-    SystemUI.setBackgroundColorAsync("#ffffff");
-    if (Platform.OS === "android") {
-      NavigationBar.setButtonStyleAsync("dark");
-      NavigationBar.setBackgroundColorAsync("#fff");
-    }
-  }
   switch (type) {
     case "dark":
       return { mode: "dark", value: "dark" };
@@ -343,6 +334,24 @@ function themeReducer(state, { type, payload }) {
       return state;
   }
 }
+var ConfigureSystemUI = () => {
+  const theme = useTheme();
+  const colors2 = useColors();
+  useEffect2(() => {
+    if (colors2) {
+      SystemUI.setBackgroundColorAsync(colors2.white[1]);
+      if (Platform.OS === "android") {
+        NavigationBar.setBackgroundColorAsync(colors2.white[1]);
+        if (theme === "dark") {
+          NavigationBar.setButtonStyleAsync("light");
+        } else {
+          NavigationBar.setButtonStyleAsync("dark");
+        }
+      }
+    }
+  }, [colors2, theme]);
+  return /* @__PURE__ */ React4.createElement(React4.Fragment, null);
+};
 var UIThemeProvider = ({ children }) => {
   const [themeState, themeDispatch] = useReducer(themeReducer, {
     mode: "default",
@@ -378,7 +387,8 @@ var UIThemeProvider = ({ children }) => {
       }
     },
     children,
-    /* @__PURE__ */ React4.createElement(FlashMessage_default, null)
+    /* @__PURE__ */ React4.createElement(FlashMessage_default, null),
+    /* @__PURE__ */ React4.createElement(ConfigureSystemUI, null)
   ));
 };
 
@@ -393,6 +403,7 @@ var useTheme = () => {
 };
 var useNavScreenOptions = (type) => {
   const colors2 = useColors();
+  const theme = useTheme();
   const options = {
     stack: {
       headerShown: false,
@@ -412,7 +423,7 @@ var useNavScreenOptions = (type) => {
       headerShown: false,
       headerTintColor: colors2.dark.main,
       tabBarStyle: {
-        borderTopColor: colors2.white[3],
+        borderTopColor: theme === "dark" ? colors2.light.main : colors2.white[2],
         borderTopWidth: 1,
         // shadowColor: "#000",
         // shadowOffset: { height: -3, width: 0 },
@@ -453,28 +464,25 @@ var useNavScreenOptions = (type) => {
 
 // components/AdaptiveStatusBarNext.tsx
 var AdaptiveStatusBar = ({ translucent = false }) => {
-  const [focused, setFocused] = useState3(false);
+  const [focused, setFocused] = useState2(false);
   const colors2 = useColors();
   const theme = useTheme();
+  const statusbarHandler = () => {
+    StatusBar.setBarStyle(theme === "dark" ? "light-content" : "dark-content");
+    if (Platform3.OS === "android") {
+      StatusBar.setBackgroundColor(
+        translucent ? "transparent" : colors2.white[1]
+      );
+      StatusBar.setTranslucent(true);
+    }
+  };
   useFocusEffect(
     React5.useCallback(() => {
-      StatusBar.setBarStyle(
-        theme === "dark" ? "light-content" : "dark-content"
-      );
-      if (Platform3.OS === "android") {
-        StatusBar.setBackgroundColor(
-          colors2.white[1] + (translucent ? "0" : "")
-        );
-        StatusBar.setTranslucent(true);
-      }
+      statusbarHandler();
     }, [theme])
   );
   React5.useEffect(() => {
-    StatusBar.setBarStyle(theme === "dark" ? "light-content" : "dark-content");
-    if (Platform3.OS === "android") {
-      StatusBar.setBackgroundColor(colors2.white[1] + (translucent ? "0" : ""));
-      StatusBar.setTranslucent(true);
-    }
+    statusbarHandler();
   }, [theme]);
   return /* @__PURE__ */ React5.createElement(React5.Fragment, null);
 };
@@ -665,7 +673,7 @@ var Button = forwardRef2(
         alignItems: "center",
         alignSelf: "flex-start",
         justifyContent: "center",
-        backgroundColor: variant === "text" || variant === "outlined" ? null : translucent ? translucent === "dark" ? colors2.white[3] + "2" : colors2.black[3] + "2" : loading ? colors2[color].light : disabled ? colors2.white[4] : colors2[color].main,
+        backgroundColor: variant === "text" || variant === "outlined" ? null : translucent ? translucent === "dark" ? colors2.white[3] + "22" : colors2.black[3] + "22" : loading ? colors2[color].light : disabled ? colors2.white[4] : colors2[color].main,
         borderRadius: rounded ? 30 : 10,
         elevation: variant === "text" ? 0 : elevation,
         paddingVertical: size === "small" ? 8 : size === "large" ? "15@ms" : "13@ms",
@@ -806,7 +814,7 @@ var FormWrapper = ({
 // ../src/Components/StarRating.tsx
 import { Ionicons as Ionicons2 } from "@expo/vector-icons";
 import * as Haptics from "expo-haptics";
-import { useEffect as useEffect2, useState as useState5 } from "react";
+import { useEffect as useEffect3, useState as useState4 } from "react";
 import {
   ActivityIndicator as ActivityIndicator2,
   TextInput,
@@ -826,7 +834,7 @@ import {
   TouchableWithoutFeedback as TouchableWithoutFeedback2,
   View as View5
 } from "react-native";
-import React11, { useState as useState4 } from "react";
+import React11, { useState as useState3 } from "react";
 import { ScaledSheet as ScaledSheet7 } from "react-native-size-matters";
 var Popup = ({
   title,
@@ -836,11 +844,13 @@ var Popup = ({
   children,
   open,
   onClose = () => {
-  }
+  },
+  style
 }) => {
+  const theme = useTheme();
   const colors2 = useColors();
-  const [show, setShow] = useState4(open);
-  const [showSecondary, setShowSecondary] = useState4(false);
+  const [show, setShow] = useState3(open);
+  const [showSecondary, setShowSecondary] = useState3(false);
   const styles2 = ScaledSheet7.create({
     root: {
       height: "100%",
@@ -857,12 +867,13 @@ var Popup = ({
     },
     container: {
       paddingBottom: sheet ? "30@ms" : 0,
-      backgroundColor: colors2.white[2],
+      backgroundColor: theme === "dark" ? "#111" : colors2.white[2],
       borderTopLeftRadius: 20,
       borderTopRightRadius: 20,
       borderBottomRightRadius: sheet ? 0 : 20,
       borderBottomLeftRadius: sheet ? 0 : 20,
-      width: "100%"
+      width: "100%",
+      ...style
     },
     content: {
       paddingHorizontal: bare ? void 0 : "10@ms"
@@ -972,11 +983,11 @@ var RatingInput = ({
   rating = 0,
   size = 16
 }) => {
-  const [showReviewsModal, setShowReviewsModal] = useState5(false);
-  const [rate, setRate] = useState5(0);
+  const [showReviewsModal, setShowReviewsModal] = useState4(false);
+  const [rate, setRate] = useState4(0);
   const colors2 = useColors();
-  const [loading, setLoading] = useState5(false);
-  const [review, setReview] = useState5("");
+  const [loading, setLoading] = useState4(false);
+  const [review, setReview] = useState4("");
   const styles2 = ScaledSheet8.create({
     root: {
       flexDirection: "row",
@@ -994,7 +1005,7 @@ var RatingInput = ({
       height: "100@vs"
     }
   });
-  useEffect2(() => {
+  useEffect3(() => {
     setRate(rating);
   }, [rating]);
   const onRate = (index) => {
@@ -1119,7 +1130,7 @@ var Grid = ({
 
 // ../src/Components/Locator.tsx
 import { Ionicons as Ionicons4 } from "@expo/vector-icons";
-import React16, { useEffect as useEffect3, useState as useState8 } from "react";
+import React16, { useEffect as useEffect4, useState as useState7 } from "react";
 import { Alert, TouchableOpacity as TouchableOpacity8, View as View11 } from "react-native";
 
 // ../src/Components/List.tsx
@@ -1141,7 +1152,7 @@ var ListItem = ({
       flexDirection: "row",
       alignItems: "center",
       paddingHorizontal: "10@s",
-      borderBottomColor: colors2.white[4],
+      borderBottomColor: colors2.white[2],
       borderBottomWidth: divider ? 1 : 0,
       paddingVertical: "10@vs"
     }
@@ -1163,7 +1174,7 @@ var ListItem = ({
 
 // ../src/Components/TextField.tsx
 import { Ionicons as Ionicons3, MaterialIcons as MaterialIcons5 } from "@expo/vector-icons";
-import React15, { useRef, useState as useState7 } from "react";
+import React15, { useRef, useState as useState6 } from "react";
 import { Animated, TextInput as TextInput2, TouchableOpacity as TouchableOpacity7, View as View10 } from "react-native";
 import {
   ScaledSheet as ScaledSheet12,
@@ -1174,7 +1185,7 @@ import {
 
 // ../src/Components/SelectMenu.tsx
 import { MaterialIcons as MaterialIcons4 } from "@expo/vector-icons";
-import React14, { useCallback, useState as useState6 } from "react";
+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 useSafeAreaInsets2 } from "react-native-safe-area-context";
 import { ScaledSheet as ScaledSheet11 } from "react-native-size-matters";
@@ -1191,7 +1202,7 @@ var SelectMenu = ({
 }) => {
   const colors2 = useColors();
   const { bottom } = useSafeAreaInsets2();
-  const [search, setSearch] = useState6("");
+  const [search, setSearch] = useState5("");
   const styles2 = ScaledSheet11.create({
     root: {
       backgroundColor: colors2.white[1],
@@ -1225,7 +1236,7 @@ var SelectMenu = ({
       {
         style: {
           ...styles2.option,
-          backgroundColor: item.value === value ? colors2.blue.light + "2" : colors2.white[2]
+          backgroundColor: item.value === value ? colors2.blue.light + "22" : colors2.white[2]
         },
         onPress: () => {
           onChange(item.value);
@@ -1327,7 +1338,7 @@ var TextField = ({
   ...props
 }) => {
   const colors2 = useColors();
-  const [focused, setFocused] = useState7(false);
+  const [focused, setFocused] = useState6(false);
   const height = moderateScale3(variant === "text" ? 50 : 45) * (size === "large" ? 1.2 : size === "small" ? 0.8 : 1);
   const labelAnim = useRef(
     new Animated.Value(height / moderateScale3(variant === "text" ? 2.5 : 3.2))
@@ -1551,8 +1562,8 @@ var TextField2 = ({
   ...props
 }) => {
   const colors2 = useColors();
-  const [focused, _setFocused] = useState7(false);
-  const [showPassword, setShowPassword] = useState7(false);
+  const [focused, _setFocused] = useState6(false);
+  const [showPassword, setShowPassword] = useState6(false);
   const height = moderateScale3(
     props.multiline ? 50 + (props.numberOfLines || 1) * 18 : 50
   );
@@ -1714,11 +1725,6 @@ var TextField_default = TextField;
 // ../src/Components/Locator.tsx
 import * as Location from "expo-location";
 import { ScaledSheet as ScaledSheet13 } from "react-native-size-matters";
-setTimeout(() => {
-  const { GOOGLE_MAP_API_KEY } = getConfig();
-  if (GOOGLE_MAP_API_KEY)
-    Location.setGoogleApiKey(GOOGLE_MAP_API_KEY);
-}, 500);
 var getPredictionsFromCoords = async (coords) => {
   const { GOOGLE_MAP_API_KEY } = getConfig();
   if (!GOOGLE_MAP_API_KEY)
@@ -1756,9 +1762,9 @@ var Locator = ({
   country = "ng"
 }) => {
   const { GOOGLE_MAP_API_KEY } = getConfig();
-  const [changed, setChanged] = useState8(false);
-  const [value, setValue] = useState8("");
-  const [prediction, setPrediction] = useState8([]);
+  const [changed, setChanged] = useState7(false);
+  const [value, setValue] = useState7("");
+  const [prediction, setPrediction] = useState7([]);
   const colors2 = useColors();
   const styles2 = ScaledSheet13.create({
     list: {
@@ -1838,7 +1844,7 @@ var Locator = ({
     setChanged(false);
     setPrediction([]);
   };
-  useEffect3(() => {
+  useEffect4(() => {
     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"
@@ -1968,7 +1974,7 @@ var Spinner = ({
       alignItems: "center",
       justifyContent: "center",
       position: fullscreen ? "absolute" : "relative",
-      backgroundColor: fullscreen ? colors2.white[1] + "d" : void 0,
+      backgroundColor: fullscreen ? colors2.white[1] + "dd" : void 0,
       ...style
     },
     content: {