@hoddy-ui/core 1.0.89 → 1.0.91

package/next/dist/index.mjs

@@ -141,24 +141,25 @@ function colors(theme) {
 }
 
 // ../src/config/KeyManager.ts
-var apiKey = {
+var config = {
   GOOGLE_MAP_API_KEY: ""
 };
-function setApiKey(key) {
-  apiKey = key;
+function setConfig(key) {
+  config = key;
 }
-function getApiKey() {
-  return apiKey;
+function getConfig() {
+  return config;
 }
 
 // ../src/config/index.ts
-function initialize(config) {
+function initialize(config2) {
   try {
-    setApiKey({
-      GOOGLE_MAP_API_KEY: config.googleMapApiKey
+    setConfig({
+      GOOGLE_MAP_API_KEY: config2.googleMapApiKey,
+      DEFAULT_FONT_FAMILY: config2.fontFamily
     });
-    if (config.colors)
-      setExtraColors(config.colors);
+    if (config2.colors)
+      setExtraColors(config2.colors);
   } catch (error) {
     console.error("Error reading the config file:", error);
   }
@@ -207,6 +208,8 @@ var Typography = forwardRef(
     numberOfLines,
     adjustsFontSizeToFit,
     fontWeight = 400,
+    fontFamily,
+    // NEW PROP ADDED
     ...props
   }, ref) => {
     const colors2 = useColors();
@@ -229,7 +232,9 @@ var Typography = forwardRef(
         textTransform: textCase,
         alignItems: "center",
         textAlign: align,
-        fontWeight: fontWeight.toString()
+        fontWeight: fontWeight.toString(),
+        fontFamily: fontFamily || getConfig().DEFAULT_FONT_FAMILY || "System"
+        // Use custom font if provided, else default
       }
     });
     return /* @__PURE__ */ React2.createElement(
@@ -238,7 +243,7 @@ var Typography = forwardRef(
         ref,
         numberOfLines,
         adjustsFontSizeToFit,
-        style: { ...styles2.text, ...style },
+        style: [styles2.text, style],
         ...props
       },
       children
@@ -574,6 +579,7 @@ var LinkButton = ({
     text: {
       fontSize: moderateScale2(fontSize),
       fontWeight,
+      fontFamily: getConfig().DEFAULT_FONT_FAMILY || "System",
       color: disabled ? "#777" : colors2[color].main
     }
   });
@@ -680,7 +686,8 @@ var Button = forwardRef2(
       text: {
         color: disabled ? variant === "text" || variant === "outlined" ? colors2.black[1] : colors2[color].text : colors2[color][variant === "text" || variant === "outlined" ? "main" : "text"],
         fontWeight: variant === "outlined" ? "700" : "500",
-        fontSize: size === "small" ? "12@ms" : "16@ms"
+        fontSize: size === "small" ? "12@ms" : "16@ms",
+        fontFamily: getConfig().DEFAULT_FONT_FAMILY || "System"
       }
     });
     return /* @__PURE__ */ React8.createElement(
@@ -877,14 +884,21 @@ var Popup = ({
     }
   });
   React11.useEffect(() => {
-    setShow(open);
-    setTimeout(() => {
-      setShowSecondary(open);
-    }, 500);
+    if (open) {
+      setShow(open);
+      setTimeout(() => {
+        setShowSecondary(open);
+      }, 500);
+    } else {
+      closeAction();
+    }
   }, [open]);
   const closeAction = () => {
-    setShow(false);
-    onClose();
+    setShowSecondary(false);
+    setTimeout(() => {
+      setShow(false);
+      onClose();
+    }, 300);
   };
   return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(
     Modal,
@@ -1314,8 +1328,10 @@ var TextField = ({
 }) => {
   const colors2 = useColors();
   const [focused, setFocused] = useState7(false);
-  const labelAnim = useRef(new Animated.Value(0)).current;
   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))
+  ).current;
   React15.useEffect(() => {
     if (focused || value) {
       Animated.timing(labelAnim, {
@@ -1357,6 +1373,7 @@ var TextField = ({
       paddingLeft: variant === "text" ? 0 : moderateScale3(15),
       paddingRight: moderateScale3(10),
       paddingTop: "11@vs",
+      fontFamily: getConfig().DEFAULT_FONT_FAMILY || "System",
       color: colors2.black[1],
       zIndex: 10
       // backgroundColor: "#284",
@@ -1368,6 +1385,7 @@ var TextField = ({
       paddingTop: "13@ms"
     },
     label: {
+      fontFamily: getConfig().DEFAULT_FONT_FAMILY || "System",
       position: "absolute",
       left: variant === "text" ? 0 : moderateScale3(15),
       fontSize: focused || value ? "10@s" : "13@s",
@@ -1458,15 +1476,33 @@ var TextField = ({
         style: styles2.input
       }
     ),
-    end && /* @__PURE__ */ React15.createElement(View10, { style: { marginRight: 20 } }, end),
-    options && /* @__PURE__ */ React15.createElement(View10, { style: { marginRight: 20 } }, /* @__PURE__ */ React15.createElement(
-      Ionicons3,
+    end && /* @__PURE__ */ React15.createElement(
+      View10,
       {
-        name: "chevron-down",
-        color: colors2.textSecondary.main,
-        size: 24
-      }
-    ))
+        style: {
+          marginRight: 20,
+          paddingTop: variant === "text" ? ms(13) : 0
+        }
+      },
+      end
+    ),
+    options && /* @__PURE__ */ React15.createElement(
+      View10,
+      {
+        style: {
+          marginRight: variant === "text" ? 0 : 20,
+          paddingTop: variant === "text" ? ms(13) : 0
+        }
+      },
+      /* @__PURE__ */ React15.createElement(
+        Ionicons3,
+        {
+          name: "chevron-down",
+          color: colors2.textSecondary.main,
+          size: 24
+        }
+      )
+    )
   ), helperText && /* @__PURE__ */ React15.createElement(
     Typography_default,
     {
@@ -1545,13 +1581,13 @@ var TextField2 = ({
       alignSelf: "stretch",
       paddingLeft: moderateScale3(10),
       paddingRight: moderateScale3(10),
-      color: colors2.dark.light,
+      color: colors2.dark.main,
       zIndex: 10
       // backgroundColor: "#284",
     },
     inputText: {
       fontSize: "14@ms",
-      color: colors2.dark.light,
+      color: colors2.dark.main,
       paddingLeft: moderateScale3(10)
     },
     placeholder: {
@@ -1679,12 +1715,12 @@ var TextField_default = TextField;
 import * as Location from "expo-location";
 import { ScaledSheet as ScaledSheet13 } from "react-native-size-matters";
 setTimeout(() => {
-  const { GOOGLE_MAP_API_KEY } = getApiKey();
+  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 } = getApiKey();
+  const { GOOGLE_MAP_API_KEY } = getConfig();
   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"
@@ -1719,7 +1755,7 @@ var Locator = ({
   float = true,
   country = "ng"
 }) => {
-  const { GOOGLE_MAP_API_KEY } = getApiKey();
+  const { GOOGLE_MAP_API_KEY } = getConfig();
   const [changed, setChanged] = useState8(false);
   const [value, setValue] = useState8("");
   const [prediction, setPrediction] = useState8([]);
@@ -1954,7 +1990,10 @@ var Spinner_default = Spinner;
 
 // ../src/Components/OTPInput.tsx
 import React19, { useMemo } from "react";
-import { TextInput as TextInput3, View as View14 } from "react-native";
+import {
+  TextInput as TextInput3,
+  View as View14
+} from "react-native";
 import { ScaledSheet as ScaledSheet16, ms as ms3 } from "react-native-size-matters";
 var OTPInput = ({
   length = 6,
@@ -1969,6 +2008,36 @@ var OTPInput = ({
     () => Array(length).fill(0).map((_) => React19.createRef()),
     [length]
   );
+  console.log("v", value);
+  const onChangeHandler = (val, index) => {
+    if (value.length >= length && val.length > 0)
+      return;
+    if (val.length > 1) {
+      console.log("reached", val);
+      const digits = val.replace(/\D/g, "").slice(0, length);
+      onChange(digits);
+      if (digits.length === length) {
+        inputRefs[length - 1].current?.focus();
+      }
+      return;
+    }
+    if (val.length === 0) {
+      const newValue2 = value.slice(0, index) + value.slice(index + 1);
+      onChange(newValue2);
+      if (index > 0) {
+        inputRefs[index - 1].current?.focus();
+      }
+      return;
+    }
+    const digit = val.replace(/\D/g, "").slice(0, 1);
+    if (!digit)
+      return;
+    const newValue = value.slice(0, index) + digit + value.slice(index + 1);
+    onChange(newValue);
+    if (index < length - 1) {
+      inputRefs[index + 1].current?.focus();
+    }
+  };
   const colors2 = useColors();
   const styles2 = ScaledSheet16.create({
     root: {},
@@ -1991,27 +2060,7 @@ var OTPInput = ({
     TextInput3,
     {
       ref: inputRefs[index],
-      onChangeText: (val) => {
-        if (val.length === 1) {
-          if (index !== length - 1)
-            inputRefs[index + 1].current?.focus();
-          let text = value;
-          text = text.slice(0, index) + val + text.slice(index + 1);
-          onChange(text);
-        } else if (val.length === 0) {
-          if (index !== 0) {
-            inputRefs[index - 1].current?.focus();
-            let text = value;
-            text = text.slice(0, index);
-            onChange(text);
-          } else
-            onChange("");
-        } else {
-          let text = val.replace(/\D/g, "").slice(0, length);
-          onChange(text);
-          inputRefs[text.length < length - 1 ? text.length : length - 1]?.current?.focus();
-        }
-      },
+      onChangeText: (val) => onChangeHandler(val, index),
       value: value[index] || "",
       blurOnSubmit: false,
       keyboardType: "number-pad",