@hoddy-ui/core 1.0.89 → 1.0.90

package/next/dist/index.d.mts

@@ -1,5 +1,5 @@
 import React, { ReactNode, FC } from 'react';
-import { ViewStyle, TextStyle, NativeSyntheticEvent, NativeScrollEvent, TextInputProps } from 'react-native';
+import { ViewStyle, TextStyle, NativeSyntheticEvent, NativeScrollEvent, TextInputProps, TextProps } from 'react-native';
 
 type ThemeTypes = "dark" | "light";
 type ThemeModes = "dark" | "light" | "default";
@@ -193,7 +193,7 @@ interface TextFieldProps extends TextInputProps {
     onFocus?: () => void;
     onBlur?: () => void;
 }
-interface TypographyProps {
+interface TypographyProps extends TextProps {
     children: ReactNode;
     color?: colorTypes | (string & {});
     style?: TextStyle | ViewStyle;
@@ -203,6 +203,7 @@ interface TypographyProps {
     gutterBottom?: number;
     numberOfLines?: number;
     adjustsFontSizeToFit?: boolean;
+    fontFamily?: string;
     fontWeight?: 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
 }
 interface SafeAreaViewProps {
@@ -255,6 +256,7 @@ interface DividerProps {
 type configProps = {
     googleMapApiKey?: string;
     colors?: extraColorTypes;
+    fontFamily?: string;
 };
 declare function initialize(config: configProps): void;
 

package/next/dist/index.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode, FC } from 'react';
-import { ViewStyle, TextStyle, NativeSyntheticEvent, NativeScrollEvent, TextInputProps } from 'react-native';
+import { ViewStyle, TextStyle, NativeSyntheticEvent, NativeScrollEvent, TextInputProps, TextProps } from 'react-native';
 
 type ThemeTypes = "dark" | "light";
 type ThemeModes = "dark" | "light" | "default";
@@ -193,7 +193,7 @@ interface TextFieldProps extends TextInputProps {
     onFocus?: () => void;
     onBlur?: () => void;
 }
-interface TypographyProps {
+interface TypographyProps extends TextProps {
     children: ReactNode;
     color?: colorTypes | (string & {});
     style?: TextStyle | ViewStyle;
@@ -203,6 +203,7 @@ interface TypographyProps {
     gutterBottom?: number;
     numberOfLines?: number;
     adjustsFontSizeToFit?: boolean;
+    fontFamily?: string;
     fontWeight?: 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
 }
 interface SafeAreaViewProps {
@@ -255,6 +256,7 @@ interface DividerProps {
 type configProps = {
     googleMapApiKey?: string;
     colors?: extraColorTypes;
+    fontFamily?: string;
 };
 declare function initialize(config: configProps): void;
 

package/next/dist/index.js

@@ -206,24 +206,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);
   }
@@ -268,6 +269,8 @@ var Typography = (0, import_react.forwardRef)(
     numberOfLines,
     adjustsFontSizeToFit,
     fontWeight = 400,
+    fontFamily,
+    // NEW PROP ADDED
     ...props
   }, ref) => {
     const colors2 = useColors();
@@ -290,7 +293,9 @@ var Typography = (0, import_react.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__ */ import_react.default.createElement(
@@ -299,7 +304,7 @@ var Typography = (0, import_react.forwardRef)(
         ref,
         numberOfLines,
         adjustsFontSizeToFit,
-        style: { ...styles2.text, ...style },
+        style: [styles2.text, style],
         ...props
       },
       children
@@ -635,6 +640,7 @@ var LinkButton = ({
     text: {
       fontSize: (0, import_react_native_size_matters6.moderateScale)(fontSize),
       fontWeight,
+      fontFamily: getConfig().DEFAULT_FONT_FAMILY || "System",
       color: disabled ? "#777" : colors2[color].main
     }
   });
@@ -741,7 +747,8 @@ var Button = (0, import_react8.forwardRef)(
       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__ */ import_react8.default.createElement(
@@ -918,14 +925,21 @@ var Popup = ({
     }
   });
   import_react11.default.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__ */ import_react11.default.createElement(import_react11.default.Fragment, null, /* @__PURE__ */ import_react11.default.createElement(
     import_react_native11.Modal,
@@ -1350,8 +1364,10 @@ var TextField = ({
 }) => {
   const colors2 = useColors();
   const [focused, setFocused] = (0, import_react16.useState)(false);
-  const labelAnim = (0, import_react16.useRef)(new import_react_native16.Animated.Value(0)).current;
   const height = (0, import_react_native_size_matters14.moderateScale)(variant === "text" ? 50 : 45) * (size === "large" ? 1.2 : size === "small" ? 0.8 : 1);
+  const labelAnim = (0, import_react16.useRef)(
+    new import_react_native16.Animated.Value(height / (0, import_react_native_size_matters14.moderateScale)(variant === "text" ? 2.5 : 3.2))
+  ).current;
   import_react16.default.useEffect(() => {
     if (focused || value) {
       import_react_native16.Animated.timing(labelAnim, {
@@ -1393,6 +1409,7 @@ var TextField = ({
       paddingLeft: variant === "text" ? 0 : (0, import_react_native_size_matters14.moderateScale)(15),
       paddingRight: (0, import_react_native_size_matters14.moderateScale)(10),
       paddingTop: "11@vs",
+      fontFamily: getConfig().DEFAULT_FONT_FAMILY || "System",
       color: colors2.black[1],
       zIndex: 10
       // backgroundColor: "#284",
@@ -1404,6 +1421,7 @@ var TextField = ({
       paddingTop: "13@ms"
     },
     label: {
+      fontFamily: getConfig().DEFAULT_FONT_FAMILY || "System",
       position: "absolute",
       left: variant === "text" ? 0 : (0, import_react_native_size_matters14.moderateScale)(15),
       fontSize: focused || value ? "10@s" : "13@s",
@@ -1494,15 +1512,33 @@ var TextField = ({
         style: styles2.input
       }
     ),
-    end && /* @__PURE__ */ import_react16.default.createElement(import_react_native16.View, { style: { marginRight: 20 } }, end),
-    options && /* @__PURE__ */ import_react16.default.createElement(import_react_native16.View, { style: { marginRight: 20 } }, /* @__PURE__ */ import_react16.default.createElement(
-      import_vector_icons8.Ionicons,
+    end && /* @__PURE__ */ import_react16.default.createElement(
+      import_react_native16.View,
       {
-        name: "chevron-down",
-        color: colors2.textSecondary.main,
-        size: 24
-      }
-    ))
+        style: {
+          marginRight: 20,
+          paddingTop: variant === "text" ? (0, import_react_native_size_matters14.ms)(13) : 0
+        }
+      },
+      end
+    ),
+    options && /* @__PURE__ */ import_react16.default.createElement(
+      import_react_native16.View,
+      {
+        style: {
+          marginRight: variant === "text" ? 0 : 20,
+          paddingTop: variant === "text" ? (0, import_react_native_size_matters14.ms)(13) : 0
+        }
+      },
+      /* @__PURE__ */ import_react16.default.createElement(
+        import_vector_icons8.Ionicons,
+        {
+          name: "chevron-down",
+          color: colors2.textSecondary.main,
+          size: 24
+        }
+      )
+    )
   ), helperText && /* @__PURE__ */ import_react16.default.createElement(
     Typography_default,
     {
@@ -1581,13 +1617,13 @@ var TextField2 = ({
       alignSelf: "stretch",
       paddingLeft: (0, import_react_native_size_matters14.moderateScale)(10),
       paddingRight: (0, import_react_native_size_matters14.moderateScale)(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: (0, import_react_native_size_matters14.moderateScale)(10)
     },
     placeholder: {
@@ -1715,12 +1751,12 @@ var TextField_default = TextField;
 var Location = __toESM(require("expo-location"));
 var import_react_native_size_matters15 = require("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"
@@ -1755,7 +1791,7 @@ var Locator = ({
   float = true,
   country = "ng"
 }) => {
-  const { GOOGLE_MAP_API_KEY } = getApiKey();
+  const { GOOGLE_MAP_API_KEY } = getConfig();
   const [changed, setChanged] = (0, import_react17.useState)(false);
   const [value, setValue] = (0, import_react17.useState)("");
   const [prediction, setPrediction] = (0, import_react17.useState)([]);
@@ -2005,6 +2041,36 @@ var OTPInput = ({
     () => Array(length).fill(0).map((_) => import_react20.default.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 = import_react_native_size_matters19.ScaledSheet.create({
     root: {},
@@ -2027,27 +2093,7 @@ var OTPInput = ({
     import_react_native22.TextInput,
     {
       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",