@hoddy-ui/core 2.5.6 → 2.5.8

package/next/package.json

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

package/src/Components/Popup.tsx

@@ -17,18 +17,19 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from "react-native-reanimated";
-import { ScaledSheet } from "react-native-size-matters";
+import { ms, ScaledSheet } from "react-native-size-matters";
 import { useColors, useTheme } from "../hooks";
 import { UIThemeProvider } from "../theme";
 import { PopupProps } from "../types";
 import { IconButton } from "./Button";
 import Typography from "./Typography";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 export const Popup: React.FC<PopupProps> = ({
   title,
   sheet,
   bare = false,
-  keyboardVerticalOffset,
+  keyboardVerticalOffset = -10,
   children,
   open,
   onClose = () => {},
@@ -39,6 +40,7 @@ export const Popup: React.FC<PopupProps> = ({
   const theme = useTheme();
   const colors = useColors();
   const [modalVisible, setModalVisible] = useState(false);
+  const { bottom } = useSafeAreaInsets();
 
   // Animation values
   const backdropOpacity = useSharedValue(0);
@@ -82,22 +84,26 @@ 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%",
       width: sheet ? "100%" : undefined,
     },
     container: {
-      paddingBottom: sheet ? "30@ms" : undefined,
-      backgroundColor: theme === "dark" ? "#111" : colors.white[2],
+      paddingBottom: sheet && !bare ? bottom + ms(10) : undefined,
+      backgroundColor: theme === "dark" ? "#111" : colors.white[1],
       borderTopLeftRadius: 20,
       borderTopRightRadius: 20,
       borderBottomRightRadius: sheet ? 0 : 20,
       borderBottomLeftRadius: sheet ? 0 : 20,
       width: "100%",
+      overflow: "hidden",
       ...style,
     },
     content: {
@@ -135,20 +141,24 @@ 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" ? "padding" : "padding"}
+              <Animated.View
+                style={[styles.avoidingView, contentAnimatedStyle]}
+                layout={LinearTransition}
               >
                 <Animated.View
                   layout={LinearTransition}
@@ -171,10 +181,10 @@ export const Popup: React.FC<PopupProps> = ({
 
                   <View style={styles.content}>{children}</View>
                 </Animated.View>
-              </KeyboardAvoidingView>
-            </Animated.View>
-          </View>
-        </TouchableWithoutFeedback>
+              </Animated.View>
+            </View>
+          </TouchableWithoutFeedback>
+        </KeyboardAvoidingView>
       </UIThemeProvider>
     </Modal>
   );

package/src/Components/TextField.tsx

@@ -413,7 +413,7 @@ export const TextField2 = React.forwardRef<TextInput, TextFieldProps>(
         <View style={styles.root}>
           {label && (
             <Typography
-              variant="body1"
+              variant="body2"
               color="textSecondary"
               gutterBottom={7}
               {...labelProps}