@hoddy-ui/core 2.5.40 → 2.5.45

package/next/index.ts

@@ -27,6 +27,9 @@ export * from "../src/hooks";
 export * from "../src/theme";
 export * from "../src/types";
 
+export * from "../src/Components/Animators/hooks";
+export * from "../src/Components/Animators/Animator";
+
 const HoddyUI = {
   initialize: initialize,
 };

package/next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoddy-ui/next",
-  "version": "2.5.67",
+  "version": "2.5.76",
   "description": "Core rich react native components written in typescript, with support for expo-router",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoddy-ui/core",
-  "version": "2.5.40",
+  "version": "2.5.45",
   "description": "Core rich react native components written in typescript",
   "main": "index.ts",
   "repository": {

package/src/Components/Animators/hooks/useFloatAnimation.ts

@@ -2,6 +2,7 @@ import { useEffect, useRef } from "react";
 import { Platform } from "react-native";
 import {
   Easing,
+  runOnJS,
   useAnimatedStyle,
   useSharedValue,
   withDelay,
@@ -76,22 +77,24 @@ export const useFloatAnimation = ({
     opacity.value = withDelay(
       delay,
       withTiming(1, { duration }, () => {
-        startFloating();
-
-        if (closeAfter) {
-          opacity.value = withDelay(
-            closeAfter,
-            withTiming(0, { duration: closeDuration })
-          );
-          translateY.value = withDelay(
-            closeAfter,
-            withTiming(0, { duration: closeDuration })
-          );
-          isFloating.current = false;
-        }
+        "worklet";
+        runOnJS(startFloating)();
       })
     );
 
+    // Handle auto-close
+    if (closeAfter) {
+      const totalDelay = delay + duration + closeAfter;
+      opacity.value = withDelay(
+        totalDelay,
+        withTiming(0, { duration: closeDuration })
+      );
+      translateY.value = withDelay(
+        totalDelay,
+        withTiming(0, { duration: closeDuration })
+      );
+    }
+
     return () => {
       opacity.value = 0;
       translateY.value = 0;

package/src/Components/FormWrapper.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { forwardRef } from "react";
 import {
   Keyboard,
   KeyboardAvoidingView,
@@ -6,56 +6,63 @@ import {
   ScrollView,
   TouchableWithoutFeedback,
 } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { ScaledSheet } from "react-native-size-matters";
 import { FormWrapperProps } from "../types";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-export const FormWrapper: React.FC<FormWrapperProps> = ({
-  children,
-  behavior = Platform.OS === "ios" ? "padding" : "height",
-  contentContainerStyle,
-  mode = "scroll",
-  keyboardVerticalOffset = 10,
-  style = {},
-  onScroll,
-}) => {
-  const { bottom } = useSafeAreaInsets();
 
-  const defaultOffset = Platform.OS === "ios" ? -bottom : -bottom * 2;
-  const styles = ScaledSheet.create({
-    root: {
-      width: "100%",
-      flex: 1,
-      ...style,
+export const FormWrapper = forwardRef<ScrollView, FormWrapperProps>(
+  (
+    {
+      children,
+      behavior = Platform.OS === "ios" ? "padding" : "height",
+      contentContainerStyle,
+      mode = "scroll",
+      keyboardVerticalOffset = 10,
+      style = {},
+      onScroll,
     },
-  });
+    ref
+  ) => {
+    const { bottom } = useSafeAreaInsets();
+
+    const defaultOffset = Platform.OS === "ios" ? -bottom : -bottom * 2;
+    const styles = ScaledSheet.create({
+      root: {
+        width: "100%",
+        flex: 1,
+        ...style,
+      },
+    });
 
-  return mode === "static" ? (
-    <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
+    return mode === "static" ? (
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
+        <KeyboardAvoidingView
+          style={styles.root}
+          behavior={behavior}
+          contentContainerStyle={styles.root}
+          keyboardVerticalOffset={keyboardVerticalOffset || defaultOffset}
+        >
+          {children}
+        </KeyboardAvoidingView>
+      </TouchableWithoutFeedback>
+    ) : (
       <KeyboardAvoidingView
-        style={styles.root}
         behavior={behavior}
-        contentContainerStyle={styles.root}
+        style={styles.root}
         keyboardVerticalOffset={keyboardVerticalOffset || defaultOffset}
       >
-        {children}
+        <ScrollView
+          ref={ref}
+          onScroll={onScroll}
+          showsVerticalScrollIndicator={false}
+          scrollEventThrottle={40}
+          keyboardDismissMode="interactive"
+          contentContainerStyle={contentContainerStyle}
+          keyboardShouldPersistTaps="handled"
+        >
+          {children}
+        </ScrollView>
       </KeyboardAvoidingView>
-    </TouchableWithoutFeedback>
-  ) : (
-    <KeyboardAvoidingView
-      behavior={behavior}
-      style={styles.root}
-      keyboardVerticalOffset={keyboardVerticalOffset || defaultOffset}
-    >
-      <ScrollView
-        onScroll={onScroll}
-        showsVerticalScrollIndicator={false}
-        scrollEventThrottle={40}
-        keyboardDismissMode="interactive"
-        contentContainerStyle={contentContainerStyle}
-        keyboardShouldPersistTaps="handled"
-      >
-        {children}
-      </ScrollView>
-    </KeyboardAvoidingView>
-  );
-};
+    );
+  }
+);

package/src/Components/SafeAreaView.tsx

@@ -1,20 +1,23 @@
-import React from "react";
+import React, { forwardRef } from "react";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { StyleSheet, View } from "react-native";
 import { SafeAreaViewProps } from "../types";
 
-export const SafeAreaView: React.FC<SafeAreaViewProps> = ({
-  children,
-  style,
-}) => {
-  const { top, bottom } = useSafeAreaInsets();
-  const styles = StyleSheet.create({
-    root: {
-      paddingTop: top,
-      paddingBottom: bottom,
-      flex: 1,
-    },
-  });
-  return <View style={[styles.root, style]}>{children}</View>;
-};
+export const SafeAreaView = forwardRef<View, SafeAreaViewProps>(
+  ({ children, style, ...rest }, ref) => {
+    const { top, bottom } = useSafeAreaInsets();
+    const styles = StyleSheet.create({
+      root: {
+        paddingTop: top,
+        paddingBottom: bottom,
+        flex: 1,
+      },
+    });
+    return (
+      <View ref={ref} style={[styles.root, style]} {...rest}>
+        {children}
+      </View>
+    );
+  }
+);

package/src/Components/Typography.tsx

@@ -1,11 +1,24 @@
 import React, { forwardRef } from "react";
 import { StyleSheet, Text } from "react-native";
-import { moderateScale, ms, verticalScale } from "react-native-size-matters";
+import { ms } from "react-native-size-matters";
+import { getConfig } from "../config/KeyManager";
 import { useColors } from "../hooks";
 import { TypographyProps } from "../types";
-import { getConfig } from "../config/KeyManager";
 import { getFontFamily } from "../utility";
 
+// Default font sizes (used as fallback)
+const DEFAULT_FONT_SIZES = {
+  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 Typography: React.FC<TypographyProps> = forwardRef(
   (
     {
@@ -20,26 +33,23 @@ const Typography: React.FC<TypographyProps> = forwardRef(
       fontWeight = 400,
       fontFamily, // NEW PROP ADDED
       fontSize,
+      lineHeight,
       ...props
     },
     ref
   ) => {
     const colors: any = useColors();
-    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 config = getConfig();
+    const customFontSizes = config.TYPOGRAPHY?.fontSizes;
+
+    // Get font size: prop > config > default, then apply ms() scaling
+    const baseFontSize =
+      customFontSizes?.[variant] ?? DEFAULT_FONT_SIZES[variant];
+    const f = fontSize || baseFontSize;
+    const lh = lineHeight || f * 1.2;
     const styles: any = StyleSheet.create({
       text: {
-        lineHeight: f * 1.2,
+        lineHeight: lh,
         fontSize: f,
         marginBottom: ms(gutterBottom) || 0,
         color: colors[color]?.main || color,

package/src/config/KeyManager.ts

@@ -1,3 +1,14 @@
+type TypographyVariant =
+  | "h1"
+  | "h2"
+  | "h3"
+  | "h4"
+  | "h5"
+  | "h6"
+  | "body1"
+  | "body2"
+  | "caption";
+
 type configTypes = {
   GOOGLE_MAP_API_KEY?: string;
   TYPOGRAPHY?: {
@@ -5,6 +16,9 @@ type configTypes = {
     fontWeights?: {
       [K in 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900]?: string;
     };
+    fontSizes?: {
+      [K in TypographyVariant]?: number;
+    };
   };
   EDGE_TO_EDGE?: boolean;
 };

package/src/config/index.ts

@@ -3,6 +3,17 @@ import { setExtraColors } from "../theme/colors";
 import { extraColorTypes } from "../types";
 import { setConfig } from "./KeyManager";
 
+type TypographyVariant =
+  | "h1"
+  | "h2"
+  | "h3"
+  | "h4"
+  | "h5"
+  | "h6"
+  | "body1"
+  | "body2"
+  | "caption";
+
 /**
  * Configuration options for the Hoddy UI library
  *
@@ -22,6 +33,12 @@ import { setConfig } from "./KeyManager";
  *       500: "Inter-Medium",
  *       600: "Inter-SemiBold",
  *       700: "Inter-Bold"
+ *     },
+ *     fontSizes: {
+ *       h1: 48,
+ *       h2: 40,
+ *       body1: 16,
+ *       caption: 12
  *     }
  *   }
  * });
@@ -42,6 +59,10 @@ type configProps = {
     fontWeights?: {
       [K in 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900]?: string;
     };
+    /** Custom font sizes for each typography variant (values in pixels, will be scaled with ms()) */
+    fontSizes?: {
+      [K in TypographyVariant]?: number;
+    };
   };
 };
 

package/src/types.ts

@@ -6,6 +6,7 @@ import {
   TextInputProps,
   TextProps,
   TextStyle,
+  ViewProps,
   ViewStyle,
 } from "react-native";
 
@@ -261,6 +262,7 @@ export interface TypographyProps extends TextProps {
   color?: colorTypes | (string & {});
   style?: StyleProp<TextStyle | ViewStyle>;
   textCase?: "capitalize" | "uppercase" | "lowercase" | undefined;
+  lineHeight?: number;
   variant?:
     | "caption"
     | "body1"
@@ -280,9 +282,8 @@ export interface TypographyProps extends TextProps {
   fontWeight?: 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
 }
 
-export interface SafeAreaViewProps {
+export interface SafeAreaViewProps extends ViewProps {
   children: ReactNode;
-  style?: ViewStyle;
 }
 
 export interface SelectMenuProps {