@hoddy-ui/next 2.5.67 → 2.5.69

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import React, { ReactNode, FC } from 'react';
-import { ViewStyle, TextStyle, NativeSyntheticEvent, NativeScrollEvent, TextInputProps, TextProps, StyleProp, TextInput } from 'react-native';
+import { ViewStyle, TextStyle, NativeSyntheticEvent, NativeScrollEvent, TextInputProps, TextProps, StyleProp, ScrollView, TextInput } from 'react-native';
 
 type ThemeTypes = "dark" | "light";
 type ThemeModes = "dark" | "light" | "default";
@@ -231,6 +231,7 @@ interface TypographyProps extends TextProps {
     color?: colorTypes | (string & {});
     style?: StyleProp<TextStyle | ViewStyle>;
     textCase?: "capitalize" | "uppercase" | "lowercase" | undefined;
+    lineHeight?: number;
     variant?: "caption" | "body1" | "body2" | "h6" | "h5" | "h4" | "h3" | "h2" | "h1";
     align?: "center" | "left" | "right";
     gutterBottom?: number;
@@ -325,6 +326,7 @@ type AnimatorProps = (BaseAnimatorProps & {
     type: "thrownup";
 });
 
+type TypographyVariant = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body1" | "body2" | "caption";
 /**
  * Configuration options for the Hoddy UI library
  *
@@ -344,6 +346,12 @@ type AnimatorProps = (BaseAnimatorProps & {
  *       500: "Inter-Medium",
  *       600: "Inter-SemiBold",
  *       700: "Inter-Bold"
+ *     },
+ *     fontSizes: {
+ *       h1: 48,
+ *       h2: 40,
+ *       body1: 16,
+ *       caption: 12
  *     }
  *   }
  * });
@@ -364,6 +372,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;
+        };
     };
 };
 declare function initialize(config: configProps): void;
@@ -384,7 +396,7 @@ declare const CheckBox: FC<CheckboxProps>;
 
 declare const showFlashMessage: (msg: FlashMessageProps) => void;
 
-declare const FormWrapper: React.FC<FormWrapperProps>;
+declare const FormWrapper: React.ForwardRefExoticComponent<FormWrapperProps & React.RefAttributes<ScrollView>>;
 
 declare const RatingInput: FC<RatingInputProps>;
 declare const RatingStars: FC<RatingStarsProps>;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode, FC } from 'react';
-import { ViewStyle, TextStyle, NativeSyntheticEvent, NativeScrollEvent, TextInputProps, TextProps, StyleProp, TextInput } from 'react-native';
+import { ViewStyle, TextStyle, NativeSyntheticEvent, NativeScrollEvent, TextInputProps, TextProps, StyleProp, ScrollView, TextInput } from 'react-native';
 
 type ThemeTypes = "dark" | "light";
 type ThemeModes = "dark" | "light" | "default";
@@ -231,6 +231,7 @@ interface TypographyProps extends TextProps {
     color?: colorTypes | (string & {});
     style?: StyleProp<TextStyle | ViewStyle>;
     textCase?: "capitalize" | "uppercase" | "lowercase" | undefined;
+    lineHeight?: number;
     variant?: "caption" | "body1" | "body2" | "h6" | "h5" | "h4" | "h3" | "h2" | "h1";
     align?: "center" | "left" | "right";
     gutterBottom?: number;
@@ -325,6 +326,7 @@ type AnimatorProps = (BaseAnimatorProps & {
     type: "thrownup";
 });
 
+type TypographyVariant = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body1" | "body2" | "caption";
 /**
  * Configuration options for the Hoddy UI library
  *
@@ -344,6 +346,12 @@ type AnimatorProps = (BaseAnimatorProps & {
  *       500: "Inter-Medium",
  *       600: "Inter-SemiBold",
  *       700: "Inter-Bold"
+ *     },
+ *     fontSizes: {
+ *       h1: 48,
+ *       h2: 40,
+ *       body1: 16,
+ *       caption: 12
  *     }
  *   }
  * });
@@ -364,6 +372,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;
+        };
     };
 };
 declare function initialize(config: configProps): void;
@@ -384,7 +396,7 @@ declare const CheckBox: FC<CheckboxProps>;
 
 declare const showFlashMessage: (msg: FlashMessageProps) => void;
 
-declare const FormWrapper: React.FC<FormWrapperProps>;
+declare const FormWrapper: React.ForwardRefExoticComponent<FormWrapperProps & React.RefAttributes<ScrollView>>;
 
 declare const RatingInput: FC<RatingInputProps>;
 declare const RatingStars: FC<RatingStarsProps>;

package/dist/index.js

@@ -274,6 +274,17 @@ var getFontFamily = (fontWeight) => {
 };
 
 // ../src/Components/Typography.tsx
+var DEFAULT_FONT_SIZES = {
+  h1: (0, import_react_native_size_matters.ms)(42),
+  h2: (0, import_react_native_size_matters.ms)(37),
+  h3: (0, import_react_native_size_matters.ms)(32),
+  h4: (0, import_react_native_size_matters.ms)(27),
+  h5: (0, import_react_native_size_matters.ms)(22),
+  h6: (0, import_react_native_size_matters.ms)(17),
+  body1: (0, import_react_native_size_matters.ms)(15),
+  body2: (0, import_react_native_size_matters.ms)(12),
+  caption: (0, import_react_native_size_matters.ms)(10)
+};
 var Typography = (0, import_react.forwardRef)(
   ({
     children,
@@ -288,24 +299,18 @@ var Typography = (0, import_react.forwardRef)(
     fontFamily,
     // NEW PROP ADDED
     fontSize,
+    lineHeight,
     ...props
   }, ref) => {
     const colors2 = useColors();
-    const _fontSize = {
-      h1: (0, import_react_native_size_matters.ms)(42),
-      h2: (0, import_react_native_size_matters.ms)(37),
-      h3: (0, import_react_native_size_matters.ms)(32),
-      h4: (0, import_react_native_size_matters.ms)(27),
-      h5: (0, import_react_native_size_matters.ms)(22),
-      h6: (0, import_react_native_size_matters.ms)(17),
-      body1: (0, import_react_native_size_matters.ms)(15),
-      body2: (0, import_react_native_size_matters.ms)(12),
-      caption: (0, import_react_native_size_matters.ms)(10)
-    };
-    const f = fontSize || _fontSize[variant];
+    const config2 = getConfig();
+    const customFontSizes = config2.TYPOGRAPHY?.fontSizes;
+    const baseFontSize = customFontSizes?.[variant] ?? DEFAULT_FONT_SIZES[variant];
+    const f = fontSize || baseFontSize;
+    const lh = lineHeight || f * 1.2;
     const styles = import_react_native.StyleSheet.create({
       text: {
-        lineHeight: f * 1.2,
+        lineHeight: lh,
         fontSize: f,
         marginBottom: (0, import_react_native_size_matters.ms)(gutterBottom) || 0,
         color: colors2[color]?.main || color,
@@ -913,56 +918,59 @@ var CheckBox = ({
 // ../src/Components/FormWrapper.tsx
 var import_react10 = __toESM(require("react"));
 var import_react_native10 = require("react-native");
-var import_react_native_size_matters7 = require("react-native-size-matters");
 var import_react_native_safe_area_context3 = require("react-native-safe-area-context");
-var FormWrapper = ({
-  children,
-  behavior = import_react_native10.Platform.OS === "ios" ? "padding" : "height",
-  contentContainerStyle,
-  mode = "scroll",
-  keyboardVerticalOffset = 10,
-  style = {},
-  onScroll
-}) => {
-  const { bottom } = (0, import_react_native_safe_area_context3.useSafeAreaInsets)();
-  const defaultOffset = import_react_native10.Platform.OS === "ios" ? -bottom : -bottom * 2;
-  const styles = import_react_native_size_matters7.ScaledSheet.create({
-    root: {
-      width: "100%",
-      flex: 1,
-      ...style
-    }
-  });
-  return mode === "static" ? /* @__PURE__ */ import_react10.default.createElement(import_react_native10.TouchableWithoutFeedback, { onPress: import_react_native10.Keyboard.dismiss, accessible: false }, /* @__PURE__ */ import_react10.default.createElement(
-    import_react_native10.KeyboardAvoidingView,
-    {
-      style: styles.root,
-      behavior,
-      contentContainerStyle: styles.root,
-      keyboardVerticalOffset: keyboardVerticalOffset || defaultOffset
-    },
-    children
-  )) : /* @__PURE__ */ import_react10.default.createElement(
-    import_react_native10.KeyboardAvoidingView,
-    {
-      behavior,
-      style: styles.root,
-      keyboardVerticalOffset: keyboardVerticalOffset || defaultOffset
-    },
-    /* @__PURE__ */ import_react10.default.createElement(
-      import_react_native10.ScrollView,
+var import_react_native_size_matters7 = require("react-native-size-matters");
+var FormWrapper = (0, import_react10.forwardRef)(
+  ({
+    children,
+    behavior = import_react_native10.Platform.OS === "ios" ? "padding" : "height",
+    contentContainerStyle,
+    mode = "scroll",
+    keyboardVerticalOffset = 10,
+    style = {},
+    onScroll
+  }, ref) => {
+    const { bottom } = (0, import_react_native_safe_area_context3.useSafeAreaInsets)();
+    const defaultOffset = import_react_native10.Platform.OS === "ios" ? -bottom : -bottom * 2;
+    const styles = import_react_native_size_matters7.ScaledSheet.create({
+      root: {
+        width: "100%",
+        flex: 1,
+        ...style
+      }
+    });
+    return mode === "static" ? /* @__PURE__ */ import_react10.default.createElement(import_react_native10.TouchableWithoutFeedback, { onPress: import_react_native10.Keyboard.dismiss, accessible: false }, /* @__PURE__ */ import_react10.default.createElement(
+      import_react_native10.KeyboardAvoidingView,
       {
-        onScroll,
-        showsVerticalScrollIndicator: false,
-        scrollEventThrottle: 40,
-        keyboardDismissMode: "interactive",
-        contentContainerStyle,
-        keyboardShouldPersistTaps: "handled"
+        style: styles.root,
+        behavior,
+        contentContainerStyle: styles.root,
+        keyboardVerticalOffset: keyboardVerticalOffset || defaultOffset
       },
       children
-    )
-  );
-};
+    )) : /* @__PURE__ */ import_react10.default.createElement(
+      import_react_native10.KeyboardAvoidingView,
+      {
+        behavior,
+        style: styles.root,
+        keyboardVerticalOffset: keyboardVerticalOffset || defaultOffset
+      },
+      /* @__PURE__ */ import_react10.default.createElement(
+        import_react_native10.ScrollView,
+        {
+          ref,
+          onScroll,
+          showsVerticalScrollIndicator: false,
+          scrollEventThrottle: 40,
+          keyboardDismissMode: "interactive",
+          contentContainerStyle,
+          keyboardShouldPersistTaps: "handled"
+        },
+        children
+      )
+    );
+  }
+);
 
 // ../src/Components/StarRating.tsx
 var import_vector_icons5 = require("@expo/vector-icons");