@hoddy-ui/core 2.5.39 → 2.5.43

package/next/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";
@@ -325,6 +325,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 +345,12 @@ type AnimatorProps = (BaseAnimatorProps & {
  *       500: "Inter-Medium",
  *       600: "Inter-SemiBold",
  *       700: "Inter-Bold"
+ *     },
+ *     fontSizes: {
+ *       h1: 48,
+ *       h2: 40,
+ *       body1: 16,
+ *       caption: 12
  *     }
  *   }
  * });
@@ -364,6 +371,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 +395,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/next/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";
@@ -325,6 +325,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 +345,12 @@ type AnimatorProps = (BaseAnimatorProps & {
  *       500: "Inter-Medium",
  *       600: "Inter-SemiBold",
  *       700: "Inter-Bold"
+ *     },
+ *     fontSizes: {
+ *       h1: 48,
+ *       h2: 40,
+ *       body1: 16,
+ *       caption: 12
  *     }
  *   }
  * });
@@ -364,6 +371,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 +395,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/next/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,
@@ -291,18 +302,10 @@ var Typography = (0, import_react.forwardRef)(
     ...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 styles = import_react_native.StyleSheet.create({
       text: {
         lineHeight: f * 1.2,
@@ -469,7 +472,6 @@ var ConfigureSystemUI = () => {
   const colors2 = useColors();
   (0, import_react3.useEffect)(() => {
     const config2 = getConfig();
-    import_react_native3.Appearance.setColorScheme(theme);
     if (colors2) {
       SystemUI.setBackgroundColorAsync(colors2.white[1]);
       if (import_react_native3.Platform.OS === "android") {
@@ -506,15 +508,19 @@ var UIThemeProvider = ({ children }) => {
             type: "default",
             payload: colorScheme
           });
-        } else
+          import_react_native3.Appearance.setColorScheme(void 0);
+        } else {
           themeDispatch({
             type: val
           });
+          import_react_native3.Appearance.setColorScheme(val);
+        }
       } else {
         themeDispatch({
           type: "default",
           payload: colorScheme
         });
+        import_react_native3.Appearance.setColorScheme(void 0);
       }
     });
   }, [colorScheme]);
@@ -910,56 +916,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");
@@ -1064,7 +1073,7 @@ var Popup = ({
       marginBottom: import_react_native11.Platform.OS === "android" && keyboardVisible ? bottom : 0
     },
     container: {
-      paddingBottom: sheet && !bare ? bottom + (0, import_react_native_size_matters8.ms)(10) : void 0,
+      paddingBottom: sheet && !bare ? bottom + (0, import_react_native_size_matters8.ms)(0) : void 0,
       backgroundColor: theme === "dark" ? "#111" : colors2.white[1],
       borderTopLeftRadius: 20,
       borderTopRightRadius: 20,
@@ -1075,7 +1084,9 @@ var Popup = ({
       ...style
     },
     content: {
+      maxHeight: sheet && !bare ? import_react_native11.Dimensions.get("screen").height * 0.9 - bottom - (0, import_react_native_size_matters8.ms)(60) : void 0,
       paddingHorizontal: bare ? void 0 : "15@ms"
+      // backgroundColor : "#f94",
     },
     title: {
       flexDirection: "row",
@@ -1105,7 +1116,8 @@ var Popup = ({
       animationType: "none",
       statusBarTranslucent: true,
       visible: modalOpen,
-      onRequestClose: closeAction
+      onRequestClose: closeAction,
+      navigationBarTranslucent: true
     },
     /* @__PURE__ */ import_react11.default.createElement(UIThemeProvider, null, /* @__PURE__ */ import_react11.default.createElement(import_react_native_reanimated2.default.View, { style: [styles.backdrop, backdropAnimatedStyle] }), /* @__PURE__ */ import_react11.default.createElement(
       import_react_native11.KeyboardAvoidingView,
@@ -1470,22 +1482,31 @@ var SelectMenu = ({
       title: label,
       disableAutoKeyboardManagement: true
     },
-    /* @__PURE__ */ import_react15.default.createElement(import_react_native15.View, { style: styles.content }, /* @__PURE__ */ import_react15.default.createElement(import_react_native15.View, { style: styles.header }, helperText && /* @__PURE__ */ import_react15.default.createElement(Typography_default, { variant: "body2", color: "textSecondary", gutterBottom: 5 }, helperText), searchEnabled && /* @__PURE__ */ import_react15.default.createElement(
-      TextField_default,
-      {
-        label: searchPlaceholder,
-        value: search,
-        type: "search",
-        onChangeText: setSearch,
-        variant: "outlined"
-      }
-    )), /* @__PURE__ */ import_react15.default.createElement(
+    /* @__PURE__ */ import_react15.default.createElement(import_react_native15.View, { style: styles.content }, /* @__PURE__ */ import_react15.default.createElement(
       import_react_native15.FlatList,
       {
         removeClippedSubviews: true,
         keyExtractor: (item) => item.value,
         bounces: false,
         renderItem,
+        ListHeaderComponent: /* @__PURE__ */ import_react15.default.createElement(import_react_native15.View, { style: styles.header }, helperText && /* @__PURE__ */ import_react15.default.createElement(
+          Typography_default,
+          {
+            variant: "body2",
+            color: "textSecondary",
+            gutterBottom: 5
+          },
+          helperText
+        ), searchEnabled && /* @__PURE__ */ import_react15.default.createElement(
+          TextField_default,
+          {
+            label: searchPlaceholder,
+            value: search,
+            type: "search",
+            onChangeText: setSearch,
+            variant: "outlined"
+          }
+        )),
         data: options.filter(
           (item) => search.length > 1 ? item.label.toLowerCase().indexOf(search.toLowerCase()) > -1 : item
         ).sort((a, b) => a.label.localeCompare(b.label))
@@ -1760,7 +1781,14 @@ var TextField2 = import_react16.default.forwardRef(
       multiline ? 50 + (props.numberOfLines || 1) * 18 : 50
     );
     const setFocused = (value2) => {
-      _setFocused(value2);
+      if (options && value2) {
+        import_react_native16.Keyboard.dismiss();
+        setTimeout(() => {
+          _setFocused(value2);
+        }, 100);
+      } else {
+        _setFocused(value2);
+      }
     };
     const styles = import_react_native_size_matters13.ScaledSheet.create({
       root: {