@hoddy-ui/core 2.0.0 → 2.0.36

package/src/Components/Locator.tsx

@@ -15,6 +15,7 @@ import Typography from "./Typography";
 export type predictionType = {
   id: string;
   description: string;
+  types: string[];
 };
 export const getPredictionsFromCoords = async (coords: {
   latitude: number;
@@ -36,10 +37,15 @@ export const getPredictionsFromCoords = async (coords: {
   const p = [];
 
   for (let key in res.results) {
-    const { formatted_address: description, place_id } = res.results[key];
+    const {
+      formatted_address: description,
+      place_id,
+      types,
+    } = res.results[key];
     p.push({
       description,
       id: place_id,
+      types,
       latLng: { lst: coords.latitude, lng: coords.longitude },
     });
   }
@@ -57,10 +63,11 @@ export const getPredictionsFromQuery = async (
 
   const p = [];
   for (let key in res.predictions) {
-    const { description, place_id } = res.predictions[key];
+    const { description, place_id, types } = res.predictions[key];
     p.push({
       description,
       id: place_id,
+      types,
     });
   }
   return p;
@@ -115,6 +122,7 @@ export const Locator: React.FC<LocatorProps> = ({
       shadowRadius: float ? 15 : 0,
       shadowOffset: {
         height: 10,
+        width: 0,
       },
       borderRadius: 10,
       marginBottom: 10,

package/src/Components/Popup.tsx

@@ -11,12 +11,16 @@ import {
 
 import React, { useEffect, useState } from "react";
 import Animated, {
+  CurvedTransition,
+  LinearTransition,
   runOnJS,
+  SequencedTransition,
   useAnimatedStyle,
   useSharedValue,
   withTiming,
 } from "react-native-reanimated";
-import { ScaledSheet } from "react-native-size-matters";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { ms, ScaledSheet } from "react-native-size-matters";
 import { useColors, useTheme } from "../hooks";
 import { UIThemeProvider } from "../theme";
 import { PopupProps } from "../types";
@@ -25,7 +29,7 @@ import Typography from "./Typography";
 
 export const Popup: React.FC<PopupProps> = ({
   title,
-  sheet,
+  sheet = true,
   bare = false,
   keyboardVerticalOffset,
   children,
@@ -34,34 +38,69 @@ export const Popup: React.FC<PopupProps> = ({
   style,
   onModalShow,
   onModalHide,
+  disableAutoKeyboardManagement = false,
 }) => {
   const theme = useTheme();
   const colors = useColors();
   const [modalVisible, setModalVisible] = useState(false);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [keyboardVisible, setKeyboardVisible] = useState(false);
+  const { bottom } = useSafeAreaInsets();
 
   // Animation values
   const backdropOpacity = useSharedValue(0);
   const contentTranslateY = useSharedValue(1000);
 
+  // Memoized keyboard vertical offset based on platform and keyboard state
+  const keyboardVerticalOffsetValue =
+    Platform.OS === "ios" ? -bottom : -bottom * 2;
+
+  // Keyboard event listeners
+  useEffect(() => {
+    const keyboardDidShowListener = Keyboard.addListener(
+      "keyboardDidShow",
+      () => {
+        setKeyboardVisible(true);
+      }
+    );
+    const keyboardDidHideListener = Keyboard.addListener(
+      "keyboardDidHide",
+      () => {
+        setKeyboardVisible(false);
+      }
+    );
+
+    return () => {
+      keyboardDidHideListener?.remove();
+      keyboardDidShowListener?.remove();
+    };
+  }, []);
+
+  const _onModalShow = () => {
+    setModalVisible(true);
+    onModalShow?.();
+  };
+  const _onModalHide = () => {
+    onModalHide?.();
+    setModalOpen(false);
+  };
+
   // Trigger animations when open prop changes
   useEffect(() => {
     if (open) {
-      setModalVisible(true);
+      setModalOpen(true);
       // Opening animation
       backdropOpacity.value = withTiming(1, { duration: 300 });
       contentTranslateY.value = withTiming(0, { duration: 300 }, () => {
-        if (onModalShow) {
-          runOnJS(onModalShow)();
-        }
+        runOnJS(_onModalShow)();
       });
     } else {
       // Closing animation
+      setModalVisible(false);
+
       backdropOpacity.value = withTiming(0, { duration: 200 });
       contentTranslateY.value = withTiming(1000, { duration: 200 }, () => {
-        runOnJS(setModalVisible)(false);
-        if (onModalHide) {
-          runOnJS(onModalHide)();
-        }
+        runOnJS(_onModalHide)();
       });
     }
   }, [open]);
@@ -81,22 +120,28 @@ export const Popup: React.FC<PopupProps> = ({
       width: "100%",
       justifyContent: sheet ? "flex-end" : "center",
     },
+    keyboardView: {
+      flex: 1,
+      zIndex: 1000,
+    },
     avoidingView: {
+      zIndex: 2,
       minHeight: typeof sheet === "number" ? sheet : undefined,
-      maxHeight: "80%",
-      zIndex: 1000,
+      maxHeight: "90%",
       alignSelf: "center",
       maxWidth: sheet ? undefined : "90%",
       width: sheet ? "100%" : undefined,
+      marginBottom: Platform.OS === "android" && keyboardVisible ? bottom : 0,
     },
     container: {
-      paddingBottom: sheet ? "30@ms" : undefined,
-      backgroundColor: theme === "dark" ? "#111" : colors.white[2],
+      paddingBottom: sheet && !bare ? bottom + ms(10) : undefined,
+      backgroundColor: theme === "dark" ? "#111" : colors.white[1],
       borderTopLeftRadius: 20,
       borderTopRightRadius: 20,
       borderBottomRightRadius: sheet ? 0 : 20,
       borderBottomLeftRadius: sheet ? 0 : 20,
       width: "100%",
+      overflow: "hidden",
       ...style,
     },
     content: {
@@ -115,7 +160,7 @@ export const Popup: React.FC<PopupProps> = ({
     backdrop: {
       position: "absolute",
       height: "100%",
-      zIndex: -1,
+      zIndex: 1,
       width: "100%",
       backgroundColor: "#000b",
     },
@@ -130,24 +175,40 @@ export const Popup: React.FC<PopupProps> = ({
       transparent
       animationType="none"
       statusBarTranslucent
-      visible={modalVisible}
+      visible={modalOpen}
       onRequestClose={closeAction}
     >
-      <Animated.View style={[styles.backdrop, backdropAnimatedStyle]} />
       <UIThemeProvider>
-        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-          <View style={styles.root}>
-            {open && (
-              <Pressable
-                style={StyleSheet.absoluteFill}
-                onPress={closeAction}
-              />
-            )}
-
-            <Animated.View style={[styles.avoidingView, contentAnimatedStyle]}>
-              <KeyboardAvoidingView
-                keyboardVerticalOffset={keyboardVerticalOffset}
-                behavior={Platform.OS === "ios" ? "position" : "padding"}
+        <Animated.View style={[styles.backdrop, backdropAnimatedStyle]} />
+        <KeyboardAvoidingView
+          style={styles.keyboardView}
+          behavior={Platform.OS === "ios" ? "padding" : "height"}
+          keyboardVerticalOffset={
+            keyboardVerticalOffset || keyboardVerticalOffsetValue
+          }
+        >
+          <TouchableWithoutFeedback
+            onPress={Keyboard.dismiss}
+            disabled={disableAutoKeyboardManagement}
+          >
+            <View style={styles.root}>
+              {modalOpen && (
+                <Pressable
+                  style={[StyleSheet.absoluteFill, { zIndex: 1 }]}
+                  onPress={closeAction}
+                />
+              )}
+
+              <Animated.View
+                style={[styles.avoidingView, contentAnimatedStyle]}
+                layout={
+                  modalVisible
+                    ? LinearTransition.springify()
+                        .stiffness(200)
+                        .mass(0.5)
+                        .damping(100)
+                    : undefined
+                }
               >
                 <View style={styles.container}>
                   {!bare && (
@@ -167,10 +228,10 @@ export const Popup: React.FC<PopupProps> = ({
 
                   <View style={styles.content}>{children}</View>
                 </View>
-              </KeyboardAvoidingView>
-            </Animated.View>
-          </View>
-        </TouchableWithoutFeedback>
+              </Animated.View>
+            </View>
+          </TouchableWithoutFeedback>
+        </KeyboardAvoidingView>
       </UIThemeProvider>
     </Modal>
   );

package/src/Components/SafeAreaView.tsx

@@ -1,20 +1,20 @@
-import { SafeAreaView as Safe } from "react-native";
 import React from "react";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
-import { Platform, StyleSheet } from "react-native";
-import { moderateScale } from "react-native-size-matters";
+import { StyleSheet, View } from "react-native";
 import { SafeAreaViewProps } from "../types";
 
-const styles = StyleSheet.create({
-  droidSafeArea: {
-    flex: 1,
-    paddingTop: Platform.OS === "android" ? moderateScale(35) : 0,
-  },
-});
-
 export const SafeAreaView: React.FC<SafeAreaViewProps> = ({
   children,
   style,
 }) => {
-  return <Safe style={{ ...styles.droidSafeArea, ...style }}>{children}</Safe>;
+  const { top, bottom } = useSafeAreaInsets();
+  const styles = StyleSheet.create({
+    root: {
+      paddingTop: top,
+      paddingBottom: bottom,
+      flex: 1,
+    },
+  });
+  return <View style={[styles.root, style]}>{children}</View>;
 };

package/src/Components/SelectMenu.tsx

@@ -1,11 +1,11 @@
 import { MaterialIcons } from "@expo/vector-icons";
 import React, { useCallback, useState } from "react";
-import { FlatList, Modal, TouchableOpacity, View } from "react-native";
+import { FlatList, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { ScaledSheet } from "react-native-size-matters";
 import { useColors } from "../hooks";
 import { SelectMenuProps } from "../types";
-import Button from "./Button";
+import { Popup } from "./Popup";
 import TextField from "./TextField";
 import Typography from "./Typography";
 
@@ -19,22 +19,15 @@ const SelectMenu: React.FC<SelectMenuProps> = ({
   label,
   secondary,
   helperText,
+  searchEnabled = false,
+  searchPlaceholder = "Search",
 }) => {
   const colors = useColors();
   const { bottom } = useSafeAreaInsets();
 
   const [search, setSearch] = useState("");
   const styles: any = ScaledSheet.create({
-    root: {
-      backgroundColor: colors.white[1],
-      flex: 1,
-    },
-    content: {
-      flex: 1,
-      paddingHorizontal: "10@ms",
-    },
     header: {
-      paddingTop: "80@ms",
       marginBottom: "20@vs",
     },
 
@@ -46,11 +39,6 @@ const SelectMenu: React.FC<SelectMenuProps> = ({
       alignItems: "center",
       marginBottom: "10@vs",
     },
-    footer: {
-      paddingBottom: bottom,
-      paddingHorizontal: "15@ms",
-      paddingTop: "15@ms",
-    },
   });
 
   const renderItem = useCallback(
@@ -70,6 +58,7 @@ const SelectMenu: React.FC<SelectMenuProps> = ({
         {item.start && <View style={{ marginRight: 10 }}>{item.start}</View>}
         <View style={{ flex: 1 }}>
           <Typography
+            variant="body2"
             style={{
               color: item.value === value ? colors.blue.light : colors.black[2],
             }}
@@ -102,51 +91,44 @@ const SelectMenu: React.FC<SelectMenuProps> = ({
     [value, colors]
   );
   return (
-    <Modal visible={open} animationType="slide" onRequestClose={onClose}>
-      <View style={styles.root}>
-        <View style={styles.content}>
-          <View style={styles.header}>
-            <Typography variant="h5" gutterBottom={5} fontWeight={700}>
-              {label}
+    <Popup
+      open={open}
+      onClose={onClose}
+      title={label}
+      disableAutoKeyboardManagement
+    >
+      <View style={styles.content}>
+        <View style={styles.header}>
+          {helperText && (
+            <Typography variant="body2" color="textSecondary" gutterBottom={5}>
+              {helperText}
             </Typography>
-            {helperText ? (
-              <Typography variant="body2" color="textSecondary">
-                {helperText}
-              </Typography>
-            ) : null}
-
+          )}
+          {searchEnabled && (
             <TextField
-              label="Search"
+              label={searchPlaceholder}
               value={search}
               type="search"
               onChangeText={setSearch}
               variant="outlined"
             />
-          </View>
-          <FlatList
-            removeClippedSubviews
-            keyExtractor={(item) => item.value}
-            renderItem={renderItem}
-            data={options
-              .filter((item) =>
-                search.length > 1
-                  ? item.label.toLowerCase().indexOf(search.toLowerCase()) > -1
-                  : item
-              )
-              .sort((a, b) => a.label.localeCompare(b.label))}
-          />
-        </View>
-        <View style={styles.footer}>
-          <Button
-            color="error"
-            variant="outlined"
-            fullWidth
-            title="Close"
-            onPress={onClose}
-          />
+          )}
         </View>
+        <FlatList
+          removeClippedSubviews
+          keyExtractor={(item) => item.value}
+          bounces={false}
+          renderItem={renderItem}
+          data={options
+            .filter((item) =>
+              search.length > 1
+                ? item.label.toLowerCase().indexOf(search.toLowerCase()) > -1
+                : item
+            )
+            .sort((a, b) => a.label.localeCompare(b.label))}
+        />
       </View>
-    </Modal>
+    </Popup>
   );
 };
 

package/src/Components/TextField.tsx

@@ -7,9 +7,9 @@ import {
   ms,
   verticalScale,
 } from "react-native-size-matters";
-import { getConfig } from "../config/KeyManager";
 import { useColors } from "../hooks";
 import { TextFieldProps } from "../types";
+import { getFontFamily } from "../utility";
 import SelectMenu from "./SelectMenu";
 import Typography from "./Typography";
 
@@ -35,6 +35,7 @@ const TextField: React.FC<TextFieldProps> = ({
   gutterBottom = 0,
   end,
   options,
+  selectMenuProps,
   ...props
 }) => {
   const colors = useColors();
@@ -64,7 +65,7 @@ const TextField: React.FC<TextFieldProps> = ({
   }, [focused, value]);
   const styles: any = ScaledSheet.create({
     root: {
-      marginBottom: gutterBottom + "@vs",
+      marginBottom: ms(gutterBottom),
       width: "100%",
       ...style,
     },
@@ -98,7 +99,7 @@ const TextField: React.FC<TextFieldProps> = ({
       paddingLeft: variant === "text" ? 0 : moderateScale(15),
       paddingRight: moderateScale(10),
       paddingTop: "11@vs",
-      fontFamily: getConfig().DEFAULT_FONT_FAMILY || "System",
+      fontFamily: getFontFamily(400),
       color: colors.black[1],
       zIndex: 10,
       // backgroundColor: "#284",
@@ -110,7 +111,7 @@ const TextField: React.FC<TextFieldProps> = ({
       paddingTop: "13@ms",
     },
     label: {
-      fontFamily: getConfig().DEFAULT_FONT_FAMILY || "System",
+      fontFamily: getFontFamily(400),
       position: "absolute",
       left: variant === "text" ? 0 : moderateScale(15),
       fontSize: focused || value ? "10@s" : "13@s",
@@ -269,6 +270,7 @@ const TextField: React.FC<TextFieldProps> = ({
           label={label}
           helperText={helperText}
           onChange={onChangeText!}
+          {...selectMenuProps}
         />
       )}
     </>
@@ -279,6 +281,7 @@ export const TextField2 = React.forwardRef<TextInput, TextFieldProps>(
   (
     {
       label,
+      labelProps,
       keyboardType,
       color = "primary",
       value,
@@ -299,6 +302,7 @@ export const TextField2 = React.forwardRef<TextInput, TextFieldProps>(
       end,
       options,
       multiline,
+      selectMenuProps,
       ...props
     },
     ref
@@ -317,7 +321,7 @@ export const TextField2 = React.forwardRef<TextInput, TextFieldProps>(
 
     const styles: any = ScaledSheet.create({
       root: {
-        marginBottom: gutterBottom + "@vs",
+        marginBottom: ms(gutterBottom),
         ...style,
       },
       container: {
@@ -409,7 +413,12 @@ export const TextField2 = React.forwardRef<TextInput, TextFieldProps>(
       <>
         <View style={styles.root}>
           {label && (
-            <Typography variant="body1" color="textSecondary" gutterBottom={7}>
+            <Typography
+              variant="body2"
+              color="textSecondary"
+              gutterBottom={7}
+              {...labelProps}
+            >
               {label}
             </Typography>
           )}
@@ -509,6 +518,7 @@ export const TextField2 = React.forwardRef<TextInput, TextFieldProps>(
             label={label}
             helperText={helperText}
             onChange={onChangeText!}
+            {...selectMenuProps}
           />
         )}
       </>

package/src/Components/Typography.tsx

@@ -1,9 +1,10 @@
 import React, { forwardRef } from "react";
 import { StyleSheet, Text } from "react-native";
-import { moderateScale, verticalScale } from "react-native-size-matters";
+import { moderateScale, ms, verticalScale } from "react-native-size-matters";
 import { useColors } from "../hooks";
 import { TypographyProps } from "../types";
 import { getConfig } from "../config/KeyManager";
+import { getFontFamily } from "../utility";
 
 const Typography: React.FC<TypographyProps> = forwardRef(
   (
@@ -11,40 +12,42 @@ const Typography: React.FC<TypographyProps> = forwardRef(
       children,
       color = "dark",
       style = {},
-      textCase = null,
+      textCase,
       variant = "body1",
       align = "left",
       gutterBottom = 0,
       adjustsFontSizeToFit,
       fontWeight = 400,
       fontFamily, // NEW PROP ADDED
+      fontSize,
       ...props
     },
     ref
   ) => {
     const colors: any = 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),
+    const _fontSize = {
+      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 f = fontSize || _fontSize[variant];
     const styles: any = StyleSheet.create({
       text: {
-        fontSize: fontSize[variant],
-        marginBottom: verticalScale(gutterBottom) || 0,
+        lineHeight: f * 1.2,
+        fontSize: f,
+        marginBottom: ms(gutterBottom) || 0,
         color: colors[color]?.main || color,
         textTransform: textCase,
         alignItems: "center",
         textAlign: align,
         fontWeight: fontWeight,
-        fontFamily: fontFamily || getConfig().DEFAULT_FONT_FAMILY || undefined, // Use custom font if provided, else default
+        fontFamily: fontFamily || getFontFamily(fontWeight),
       },
     });
 

package/src/config/KeyManager.ts

@@ -1,6 +1,11 @@
 type configTypes = {
   GOOGLE_MAP_API_KEY?: string;
-  DEFAULT_FONT_FAMILY?: string;
+  TYPOGRAPHY?: {
+    fontFamily?: string;
+    fontWeights?: {
+      [K in 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900]?: string;
+    };
+  };
   EDGE_TO_EDGE?: boolean;
 };
 

package/src/config/index.ts

@@ -3,18 +3,53 @@ import { setExtraColors } from "../theme/colors";
 import { extraColorTypes } from "../types";
 import { setConfig } from "./KeyManager";
 
+/**
+ * Configuration options for the Hoddy UI library
+ *
+ * @example
+ * ```typescript
+ * initialize({
+ *   googleMapApiKey: "AIzaSyBxxxxxxxxxxxxxxxxxxxxxx",
+ *   edgeToEdge: true,
+ *   colors: {
+ *     primary: "#007AFF",
+ *     secondary: "#34C759"
+ *   },
+ *   typography: {
+ *     fontFamily: "Inter",
+ *     fontWeights: {
+ *       400: "Inter-Regular",
+ *       500: "Inter-Medium",
+ *       600: "Inter-SemiBold",
+ *       700: "Inter-Bold"
+ *     }
+ *   }
+ * });
+ * ```
+ */
 type configProps = {
+  /** Google Maps API key for map components */
   googleMapApiKey?: string;
+  /** Custom color palette overrides */
   colors?: extraColorTypes;
-  fontFamily?: string;
+  /** Enable edge-to-edge display mode */
   edgeToEdge?: boolean;
+  /** Typography settings */
+  typography?: {
+    /** Primary font family */
+    fontFamily?: string;
+    /** Font family mappings for each weight (Android support) */
+    fontWeights?: {
+      [K in 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900]?: string;
+    };
+  };
 };
 
 export function initialize(config: configProps): void {
   try {
     setConfig({
       GOOGLE_MAP_API_KEY: config.googleMapApiKey,
-      DEFAULT_FONT_FAMILY: config.fontFamily,
+      TYPOGRAPHY: config.typography,
       EDGE_TO_EDGE: config.edgeToEdge ?? false,
     });
     if (config.colors) setExtraColors(config.colors);