@hoddy-ui/core 1.0.89 → 1.0.90

package/next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoddy-ui/next",
-  "version": "2.0.16",
+  "version": "2.0.27",
   "description": "Core rich react native components written in typescript, with support for expo-router",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -14,7 +14,8 @@
   "license": "MIT",
   "private": false,
   "scripts": {
-    "build": "tsup"
+    "build": "tsup",
+    "deploy": "yarn build && yarn publish"
   },
   "peerDependencies": {
     "@expo/vector-icons": ">=13.0.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoddy-ui/core",
-  "version": "1.0.89",
+  "version": "1.0.90",
   "description": "Core rich react native components written in typescript",
   "main": "index.ts",
   "repository": {
@@ -12,18 +12,18 @@
   "license": "MIT",
   "private": false,
   "peerDependencies": {
-    "@expo/vector-icons": "^13.0.0",
+    "@expo/vector-icons": ">=13.0.0",
     "@react-navigation/native": ">=6.1.7",
-    "@types/react": "^18.2.6",
-    "@types/react-native": "^0.72.0",
+    "@types/react": ">=18.2.6",
+    "@types/react-native": ">=0.72.0",
     "expo-haptics": ">=12.4.0",
     "expo-location": ">=15.1.1",
     "expo-navigation-bar": ">=2.1.1",
     "expo-system-ui": ">=2.2.1",
-    "react": "^18.2.0",
+    "react": ">=18.2.0",
     "react-native": ">=0.71.8",
     "react-native-safe-area-context": ">=4.5.3",
-    "typescript": "^5.0.4"
+    "typescript": ">=5.0.4"
   },
   "keywords": [
     "react-native",

package/src/Components/Button.tsx

@@ -2,6 +2,7 @@ import { Ionicons, MaterialIcons } from "@expo/vector-icons";
 import React, { forwardRef } from "react";
 import { ActivityIndicator, Text, TouchableOpacity } from "react-native";
 import { ScaledSheet, moderateScale } from "react-native-size-matters";
+import { getConfig } from "../config/KeyManager";
 import { useColors, useTheme } from "../hooks";
 import { ButtonProps, IconButtonProps, LinkButtonProps } from "../types";
 
@@ -20,6 +21,7 @@ export const LinkButton: React.FC<LinkButtonProps> = ({
     text: {
       fontSize: moderateScale(fontSize),
       fontWeight: fontWeight,
+      fontFamily: getConfig().DEFAULT_FONT_FAMILY || "System",
       color: disabled ? "#777" : colors[color].main,
     },
   });
@@ -154,6 +156,7 @@ const Button: React.FC<ButtonProps> = forwardRef(
             ],
         fontWeight: variant === "outlined" ? "700" : "500",
         fontSize: size === "small" ? "12@ms" : "16@ms",
+        fontFamily: getConfig().DEFAULT_FONT_FAMILY || "System",
       },
     });
 

package/src/Components/Locator.tsx

@@ -9,20 +9,15 @@ import { ScaledSheet } from "react-native-size-matters";
 import { useColors } from "../hooks";
 import { LocatorProps } from "../types";
 
-import { getApiKey } from "../config/KeyManager";
+import { getConfig } from "../config/KeyManager";
 import Typography from "./Typography";
 
-setTimeout(() => {
-  const { GOOGLE_MAP_API_KEY } = getApiKey();
-  if (GOOGLE_MAP_API_KEY) Location.setGoogleApiKey(GOOGLE_MAP_API_KEY);
-}, 500);
-
 type predictionType = {
   id: string;
   description: string;
 };
 export const getPredictionsFromCoords = async (coords: any) => {
-  const { GOOGLE_MAP_API_KEY } = getApiKey();
+  const { GOOGLE_MAP_API_KEY } = getConfig();
 
   if (!GOOGLE_MAP_API_KEY)
     console.error(
@@ -63,7 +58,7 @@ export const Locator: React.FC<LocatorProps> = ({
   float = true,
   country = "ng",
 }) => {
-  const { GOOGLE_MAP_API_KEY } = getApiKey();
+  const { GOOGLE_MAP_API_KEY } = getConfig();
 
   const [changed, setChanged] = useState(false);
   const [value, setValue] = useState("");

package/src/Components/OTPInput.tsx

@@ -1,5 +1,10 @@
-import React, { FC, useMemo, useState } from "react";
-import { TextInput, View } from "react-native";
+import React, { FC, useMemo } from "react";
+import {
+  TextInput,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
+} from "react-native";
 import { ScaledSheet, ms } from "react-native-size-matters";
 import { useColors } from "../hooks";
 import { OTPInputProps } from "../types";
@@ -20,6 +25,42 @@ export const OTPInput: FC<OTPInputProps> = ({
     [length]
   );
 
+  console.log("v", value);
+
+  const onChangeHandler = (val: string, index: number) => {
+    if (value.length >= length && val.length > 0) return;
+    // Handle pasting of full OTP
+    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;
+    }
+    // Handle backspace
+    if (val.length === 0) {
+      const newValue = value.slice(0, index) + value.slice(index + 1);
+      onChange(newValue);
+      if (index > 0) {
+        inputRefs[index - 1].current?.focus();
+      }
+      return;
+    }
+    // Only allow numbers and take first digit
+    const digit = val.replace(/\D/g, "").slice(0, 1);
+    if (!digit) return;
+    // Create new value string
+    const newValue = value.slice(0, index) + digit + value.slice(index + 1);
+    onChange(newValue);
+    // Auto advance to next input if not at end
+    if (index < length - 1) {
+      inputRefs[index + 1].current?.focus();
+    }
+  };
+
   const colors = useColors();
   const styles = ScaledSheet.create({
     root: {},
@@ -45,32 +86,10 @@ export const OTPInput: FC<OTPInputProps> = ({
         {[...Array(length)].map((_, index) => (
           <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] || ""}
-            // maxLength={1}
             blurOnSubmit={false}
+            // maxLength={1}
             keyboardType="number-pad"
             key={index}
             style={[styles.input]}

package/src/Components/Popup.tsx

@@ -75,15 +75,22 @@ export const Popup: React.FC<PopupProps> = ({
   });
 
   React.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 (

package/src/Components/TextField.tsx

@@ -1,5 +1,5 @@
 import { Ionicons, MaterialIcons } from "@expo/vector-icons";
-import React, { startTransition, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import { Animated, TextInput, TouchableOpacity, View } from "react-native";
 import {
   ScaledSheet,
@@ -7,6 +7,7 @@ import {
   ms,
   verticalScale,
 } from "react-native-size-matters";
+import { getConfig } from "../config/KeyManager";
 import { useColors } from "../hooks";
 import { TextFieldProps } from "../types";
 import SelectMenu from "./SelectMenu";
@@ -38,13 +39,14 @@ const TextField: React.FC<TextFieldProps> = ({
 }) => {
   const colors = useColors();
   const [focused, setFocused] = useState(false);
-
-  const labelAnim = useRef(new Animated.Value(0)).current;
-
   const height =
     moderateScale(variant === "text" ? 50 : 45) *
     (size === "large" ? 1.2 : size === "small" ? 0.8 : 1);
 
+  const labelAnim = useRef(
+    new Animated.Value(height / moderateScale(variant === "text" ? 2.5 : 3.2))
+  ).current;
+
   React.useEffect(() => {
     if (focused || value) {
       Animated.timing(labelAnim, {
@@ -96,6 +98,7 @@ const TextField: React.FC<TextFieldProps> = ({
       paddingLeft: variant === "text" ? 0 : moderateScale(15),
       paddingRight: moderateScale(10),
       paddingTop: "11@vs",
+      fontFamily: getConfig().DEFAULT_FONT_FAMILY || "System",
       color: colors.black[1],
       zIndex: 10,
       // backgroundColor: "#284",
@@ -107,6 +110,7 @@ const TextField: React.FC<TextFieldProps> = ({
       paddingTop: "13@ms",
     },
     label: {
+      fontFamily: getConfig().DEFAULT_FONT_FAMILY || "System",
       position: "absolute",
       left: variant === "text" ? 0 : moderateScale(15),
       fontSize: focused || value ? "10@s" : "13@s",
@@ -213,9 +217,23 @@ const TextField: React.FC<TextFieldProps> = ({
               style={styles.input}
             />
           )}
-          {end && <View style={{ marginRight: 20 }}>{end}</View>}
+          {end && (
+            <View
+              style={{
+                marginRight: 20,
+                paddingTop: variant === "text" ? ms(13) : 0,
+              }}
+            >
+              {end}
+            </View>
+          )}
           {options && (
-            <View style={{ marginRight: 20 }}>
+            <View
+              style={{
+                marginRight: variant === "text" ? 0 : 20,
+                paddingTop: variant === "text" ? ms(13) : 0,
+              }}
+            >
               <Ionicons
                 name="chevron-down"
                 color={colors.textSecondary.main}
@@ -318,13 +336,13 @@ export const TextField2: React.FC<TextFieldProps> = ({
       alignSelf: "stretch",
       paddingLeft: moderateScale(10),
       paddingRight: moderateScale(10),
-      color: colors.dark.light,
+      color: colors.dark.main,
       zIndex: 10,
       // backgroundColor: "#284",
     },
     inputText: {
       fontSize: "14@ms",
-      color: colors.dark.light,
+      color: colors.dark.main,
       paddingLeft: moderateScale(10),
     },
     placeholder: {

package/src/Components/Typography.tsx

@@ -3,6 +3,7 @@ import { StyleSheet, Text } from "react-native";
 import { moderateScale, verticalScale } from "react-native-size-matters";
 import { useColors } from "../hooks";
 import { TypographyProps } from "../types";
+import { getConfig } from "../config/KeyManager";
 
 const Typography: React.FC<TypographyProps> = forwardRef(
   (
@@ -17,6 +18,7 @@ const Typography: React.FC<TypographyProps> = forwardRef(
       numberOfLines,
       adjustsFontSizeToFit,
       fontWeight = 400,
+      fontFamily, // NEW PROP ADDED
       ...props
     },
     ref
@@ -33,6 +35,7 @@ const Typography: React.FC<TypographyProps> = forwardRef(
       body2: moderateScale(12),
       caption: moderateScale(10),
     };
+
     const styles: any = StyleSheet.create({
       text: {
         fontSize: fontSize[variant],
@@ -42,14 +45,16 @@ const Typography: React.FC<TypographyProps> = forwardRef(
         alignItems: "center",
         textAlign: align,
         fontWeight: fontWeight.toString(),
+        fontFamily: fontFamily || getConfig().DEFAULT_FONT_FAMILY || "System", // Use custom font if provided, else default
       },
     });
+
     return (
       <Text
         ref={ref as any}
         numberOfLines={numberOfLines}
         adjustsFontSizeToFit={adjustsFontSizeToFit}
-        style={{ ...styles.text, ...style }}
+        style={[styles.text, style]} // Ensures external styles are applied
         {...props}
       >
         {children}

package/src/config/KeyManager.ts

@@ -1,15 +1,16 @@
-type apikeys = {
+type configTypes = {
   GOOGLE_MAP_API_KEY?: string;
+  DEFAULT_FONT_FAMILY?: string;
 };
 
-let apiKey: apikeys = {
+let config: configTypes = {
   GOOGLE_MAP_API_KEY: "",
 };
 
-export function setApiKey(key: apikeys): void {
-  apiKey = key;
+export function setConfig(key: configTypes): void {
+  config = key;
 }
 
-export function getApiKey(): apikeys {
-  return apiKey;
+export function getConfig(): configTypes {
+  return config;
 }

package/src/config/index.ts

@@ -1,17 +1,19 @@
 // import * as fs from "fs";
 import { setExtraColors } from "../theme/colors";
 import { extraColorTypes } from "../types";
-import { setApiKey } from "./KeyManager";
+import { setConfig } from "./KeyManager";
 
 type configProps = {
   googleMapApiKey?: string;
   colors?: extraColorTypes;
+  fontFamily?: string;
 };
 
 export function initialize(config: configProps): void {
   try {
-    setApiKey({
+    setConfig({
       GOOGLE_MAP_API_KEY: config.googleMapApiKey,
+      DEFAULT_FONT_FAMILY: config.fontFamily,
     });
     if (config.colors) setExtraColors(config.colors);
   } catch (error) {

package/src/types.ts

@@ -2,7 +2,9 @@ import { ReactNode } from "react";
 import {
   NativeScrollEvent,
   NativeSyntheticEvent,
+  Text,
   TextInputProps,
+  TextProps,
   TextStyle,
   ViewStyle,
 } from "react-native";
@@ -252,7 +254,7 @@ export interface TextFieldProps extends TextInputProps {
   onBlur?: () => void;
 }
 
-export interface TypographyProps {
+export interface TypographyProps extends TextProps {
   children: ReactNode;
   color?: colorTypes | (string & {});
   style?: TextStyle | ViewStyle;
@@ -271,6 +273,7 @@ export interface TypographyProps {
   gutterBottom?: number;
   numberOfLines?: number;
   adjustsFontSizeToFit?: boolean;
+  fontFamily?: string;
   fontWeight?: 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
 }