@hoddy-ui/core 2.5.5 → 2.5.7

package/next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoddy-ui/next",
-  "version": "2.0.47",
+  "version": "2.0.48",
   "description": "Core rich react native components written in typescript, with support for expo-router",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -19,8 +19,9 @@
   },
   "peerDependencies": {
     "@expo/vector-icons": ">=13.0.0",
+    "@react-native-async-storage/async-storage": ">=1.18.1",
     "@types/react": ">=18.2.6",
-    "@types/react-native": "^0.72.0",
+    "@types/react-native": ">=0.72.0",
     "expo-haptics": ">=12.4.0",
     "expo-location": ">=15.1.1",
     "expo-navigation-bar": ">=2.1.1",
@@ -28,6 +29,7 @@
     "expo-system-ui": ">=2.2.1",
     "react": ">=18.2.0",
     "react-native": ">=0.71.8",
+    "react-native-reanimated": ">=3.17.4",
     "react-native-safe-area-context": ">=4.5.3",
     "typescript": ">=5.0.4"
   },
@@ -39,7 +41,6 @@
     "kinghoddy"
   ],
   "dependencies": {
-    "@react-native-async-storage/async-storage": "^1.18.1",
     "react-native-size-matters": "^0.4.0"
   },
   "devDependencies": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoddy-ui/core",
-  "version": "2.5.5",
+  "version": "2.5.7",
   "description": "Core rich react native components written in typescript",
   "main": "index.ts",
   "repository": {
@@ -13,6 +13,7 @@
   "private": false,
   "peerDependencies": {
     "@expo/vector-icons": ">=13.0.0",
+    "@react-native-async-storage/async-storage": ">=1.18.1",
     "@react-navigation/native": ">=6.1.6",
     "@types/react": ">=18.2.6",
     "@types/react-native": ">=0.72.0",
@@ -34,7 +35,6 @@
     "kinghoddy"
   ],
   "dependencies": {
-    "@react-native-async-storage/async-storage": "^1.18.1",
     "react-native-size-matters": "^0.4.2"
   },
   "publishConfig": {

package/src/Components/AlertX.tsx

@@ -1,7 +1,7 @@
 import { MaterialIcons } from "@expo/vector-icons";
 import React from "react";
 import { View } from "react-native";
-import { ScaledSheet } from "react-native-size-matters";
+import { ms, ScaledSheet } from "react-native-size-matters";
 import { useColors } from "../hooks";
 import { AlertXProps } from "../types";
 import Typography from "./Typography";
@@ -16,7 +16,7 @@ const AlertX: React.FC<AlertXProps> = ({
 }) => {
   const colors = useColors();
 
-  const styles: any = ScaledSheet.create({
+  const styles = ScaledSheet.create({
     container: {
       padding: 20,
       paddingTop: 10,
@@ -24,7 +24,7 @@ const AlertX: React.FC<AlertXProps> = ({
       borderRadius: 8,
       alignItems: "center",
       flexDirection: "row",
-      marginBottom: gutterBottom + "@ms",
+      marginBottom: ms(gutterBottom),
       backgroundColor: colors[type].main + (variant === "contained" ? "" : "3"),
     },
     title: {
@@ -35,7 +35,7 @@ const AlertX: React.FC<AlertXProps> = ({
     },
   });
   return (
-    <View style={{ ...styles.container, ...style }}>
+    <View style={[styles.container, style]}>
       <View style={{ width: "80%" }}>
         <Typography style={styles.title} gutterBottom={3} fontWeight={700}>
           {title}

package/src/Components/Avatar.tsx

@@ -1,7 +1,7 @@
 import { AntDesign } from "@expo/vector-icons";
 import React from "react";
 import { Image, View } from "react-native";
-import { ScaledSheet } from "react-native-size-matters";
+import { ms, ScaledSheet } from "react-native-size-matters";
 import { useColors } from "../hooks";
 import { AvatarProps } from "../types";
 import Typography from "./Typography";
@@ -18,8 +18,8 @@ const Avatar: React.FC<AvatarProps> = ({
   const styles: any = ScaledSheet.create({
     root: {
       borderRadius: 150,
-      height: size + "@ms",
-      width: size + "@ms",
+      height: ms(size),
+      width: ms(size),
       alignItems: "center",
       justifyContent: "center",
       overflow: "hidden",
@@ -27,7 +27,7 @@ const Avatar: React.FC<AvatarProps> = ({
       borderColor: variant === "outlined" ? "#fff" : "#0000",
       backgroundColor:
         variant === "outlined"
-          ? null
+          ? undefined
           : label
           ? colors[color].main
           : colors.white[4],

package/src/Components/Button.tsx

@@ -5,13 +5,14 @@ import { ScaledSheet, moderateScale, ms } from "react-native-size-matters";
 import { getConfig } from "../config/KeyManager";
 import { useColors, useTheme } from "../hooks";
 import { ButtonProps, IconButtonProps, LinkButtonProps } from "../types";
+import { getFontFamily } from "../utility";
 
 export const LinkButton: React.FC<LinkButtonProps> = ({
   title,
   style = {},
   color = "blue",
   fontSize = 12,
-  fontWeight = "400",
+  fontWeight = 400,
   disabled,
   onPress = () => {},
 }) => {
@@ -20,8 +21,8 @@ export const LinkButton: React.FC<LinkButtonProps> = ({
   const styles: any = ScaledSheet.create({
     text: {
       fontSize: moderateScale(fontSize),
-      fontWeight: fontWeight as any,
-      fontFamily: getConfig().DEFAULT_FONT_FAMILY || "System",
+      fontWeight: fontWeight.toString() as any,
+      fontFamily: getFontFamily(fontWeight),
       color: disabled ? "#777" : colors[color].main,
     },
   });
@@ -156,7 +157,7 @@ const Button: React.FC<ButtonProps> = forwardRef(
             ],
         fontWeight: variant === "outlined" ? "700" : "500",
         fontSize: size === "small" ? "12@ms" : "13@ms",
-        fontFamily: getConfig().DEFAULT_FONT_FAMILY || "System",
+        fontFamily: getFontFamily(variant === "outlined" ? 700 : 500),
       },
     });
 

package/src/Components/Grid.tsx

@@ -1,6 +1,6 @@
-import { View, Text } from "react-native";
 import React from "react";
-import { ScaledSheet } from "react-native-size-matters";
+import { View } from "react-native";
+import { ms, ScaledSheet } from "react-native-size-matters";
 import { GridItemProps, GridProps } from "../types";
 
 export const GridItem: React.FC<GridItemProps> = ({
@@ -12,8 +12,8 @@ export const GridItem: React.FC<GridItemProps> = ({
 }) => {
   const styles = ScaledSheet.create({
     gridItem: {
-      width: 100 / col + "%",
-      padding: spacing * 10 + "@ms",
+      width: `${100 / col}%`,
+      padding: ms(spacing * 10),
       alignItems: alignItems,
     },
   });
@@ -27,7 +27,7 @@ export const Grid: React.FC<GridProps> = ({
   const styles = ScaledSheet.create({
     grid: {
       flexWrap: "wrap",
-      margin: -spacing * 10 + "@ms",
+      margin: `${-spacing * 10}@ms`,
       flexDirection: "row",
     },
   });

package/src/Components/Locator.tsx

@@ -115,6 +115,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,6 +11,7 @@ import {
 
 import React, { useEffect, useState } from "react";
 import Animated, {
+  LinearTransition,
   runOnJS,
   useAnimatedStyle,
   useSharedValue,
@@ -27,7 +28,7 @@ export const Popup: React.FC<PopupProps> = ({
   title,
   sheet,
   bare = false,
-  keyboardVerticalOffset,
+  keyboardVerticalOffset = -10,
   children,
   open,
   onClose = () => {},
@@ -81,9 +82,12 @@ export const Popup: React.FC<PopupProps> = ({
       width: "100%",
       justifyContent: sheet ? "flex-end" : "center",
     },
+    keyboardView: {
+      flex: 1,
+    },
     avoidingView: {
       minHeight: typeof sheet === "number" ? sheet : undefined,
-      maxHeight: "80%",
+      maxHeight: "90%",
       zIndex: 1000,
       alignSelf: "center",
       maxWidth: sheet ? undefined : "90%",
@@ -91,7 +95,7 @@ export const Popup: React.FC<PopupProps> = ({
     },
     container: {
       paddingBottom: sheet ? "30@ms" : undefined,
-      backgroundColor: theme === "dark" ? "#111" : colors.white[2],
+      backgroundColor: theme === "dark" ? "#111" : colors.white[1],
       borderTopLeftRadius: 20,
       borderTopRightRadius: 20,
       borderBottomRightRadius: sheet ? 0 : 20,
@@ -134,22 +138,29 @@ export const Popup: React.FC<PopupProps> = ({
       onRequestClose={closeAction}
     >
       <UIThemeProvider>
-        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-          <View style={styles.root}>
-            <Animated.View style={[styles.backdrop, backdropAnimatedStyle]} />
-            {open && (
-              <Pressable
-                style={[StyleSheet.absoluteFill, { zIndex: 2 }]}
-                onPress={closeAction}
-              />
-            )}
+        <KeyboardAvoidingView
+          style={styles.keyboardView}
+          behavior={Platform.OS === "ios" ? "padding" : undefined}
+          keyboardVerticalOffset={keyboardVerticalOffset}
+        >
+          <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+            <View style={styles.root}>
+              <Animated.View style={[styles.backdrop, backdropAnimatedStyle]} />
+              {open && (
+                <Pressable
+                  style={[StyleSheet.absoluteFill, { zIndex: 2 }]}
+                  onPress={closeAction}
+                />
+              )}
 
-            <Animated.View style={[styles.avoidingView, contentAnimatedStyle]}>
-              <KeyboardAvoidingView
-                keyboardVerticalOffset={keyboardVerticalOffset}
-                behavior={Platform.OS === "ios" ? "position" : "padding"}
+              <Animated.View
+                style={[styles.avoidingView, contentAnimatedStyle]}
+                layout={LinearTransition}
               >
-                <View style={styles.container}>
+                <Animated.View
+                  layout={LinearTransition}
+                  style={styles.container}
+                >
                   {!bare && (
                     <View style={styles.title}>
                       <View style={styles.titleIcon}>
@@ -166,11 +177,11 @@ export const Popup: React.FC<PopupProps> = ({
                   )}
 
                   <View style={styles.content}>{children}</View>
-                </View>
-              </KeyboardAvoidingView>
-            </Animated.View>
-          </View>
-        </TouchableWithoutFeedback>
+                </Animated.View>
+              </Animated.View>
+            </View>
+          </TouchableWithoutFeedback>
+        </KeyboardAvoidingView>
       </UIThemeProvider>
     </Modal>
   );

package/src/Components/TextField.tsx

@@ -5,6 +5,7 @@ import {
   ScaledSheet,
   moderateScale,
   ms,
+  mvs,
   verticalScale,
 } from "react-native-size-matters";
 import { getConfig } from "../config/KeyManager";
@@ -12,6 +13,7 @@ import { useColors } from "../hooks";
 import { TextFieldProps } from "../types";
 import SelectMenu from "./SelectMenu";
 import Typography from "./Typography";
+import { getFontFamily } from "../utility";
 
 const TextField: React.FC<TextFieldProps> = ({
   label,
@@ -64,7 +66,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 +100,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 +112,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",
@@ -279,6 +281,7 @@ export const TextField2 = React.forwardRef<TextInput, TextFieldProps>(
   (
     {
       label,
+      labelProps,
       keyboardType,
       color = "primary",
       value,
@@ -317,7 +320,7 @@ export const TextField2 = React.forwardRef<TextInput, TextFieldProps>(
 
     const styles: any = ScaledSheet.create({
       root: {
-        marginBottom: gutterBottom + "@vs",
+        marginBottom: ms(gutterBottom),
         ...style,
       },
       container: {
@@ -409,7 +412,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>
           )}

package/src/Components/Typography.tsx

@@ -4,6 +4,7 @@ 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(
   (
@@ -45,11 +46,7 @@ const Typography: React.FC<TypographyProps> = forwardRef(
         alignItems: "center",
         textAlign: align,
         fontWeight: fontWeight,
-        fontFamily:
-          fontFamily ||
-          getConfig().TYPOGRAPHY?.fontWeights?.[fontWeight] ||
-          getConfig().TYPOGRAPHY?.fontFamily ||
-          undefined, // Use custom font if provided, else default
+        fontFamily: fontFamily || getFontFamily(fontWeight),
       },
     });
 

package/src/types.ts

@@ -2,6 +2,7 @@ import { ReactNode } from "react";
 import {
   NativeScrollEvent,
   NativeSyntheticEvent,
+  StyleProp,
   TextInputProps,
   TextProps,
   TextStyle,
@@ -117,7 +118,7 @@ export interface LinkButtonProps {
   style?: TextStyle & ViewStyle;
   color?: colorTypes;
   fontSize?: number;
-  fontWeight?: string;
+  fontWeight?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
   disabled?: boolean;
   onPress?: () => void;
 }
@@ -229,6 +230,7 @@ export interface SpinnerProps {
 
 export interface TextFieldProps extends TextInputProps {
   label?: string;
+  labelProps?: TypographyProps;
   variant?: "outlined" | "text" | "contained";
   color?: colorTypes;
   size?: "small" | "normal" | "large";
@@ -256,7 +258,7 @@ export interface TextFieldProps extends TextInputProps {
 export interface TypographyProps extends TextProps {
   children: ReactNode;
   color?: colorTypes | (string & {});
-  style?: TextStyle | ViewStyle;
+  style?: StyleProp<TextStyle | ViewStyle>;
   textCase?: "capitalize" | "uppercase" | "lowercase" | undefined;
   variant?:
     | "caption"

package/src/utility.ts

@@ -0,0 +1,11 @@
+import { getConfig } from "./config/KeyManager";
+
+export const getFontFamily = (
+  fontWeight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
+) => {
+  return (
+    getConfig().TYPOGRAPHY?.fontWeights?.[fontWeight] ||
+    getConfig().TYPOGRAPHY?.fontFamily ||
+    undefined
+  );
+};