@hoddy-ui/core 2.5.40 → 2.5.43

package/next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoddy-ui/next",
-  "version": "2.5.67",
+  "version": "2.5.68",
   "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.43",
   "description": "Core rich react native components written in typescript",
   "main": "index.ts",
   "repository": {

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/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(
   (
     {
@@ -25,18 +38,13 @@ const Typography: React.FC<TypographyProps> = forwardRef(
     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 styles: any = StyleSheet.create({
       text: {
         lineHeight: f * 1.2,

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;
+    };
   };
 };