@sincpro/mobile-ui 0.7.1 → 0.7.2

package/dist/Dialog/Dialog.ActionSheet.js

@@ -4,13 +4,29 @@ import Pressable from "../primitives/Pressable";
 import { theme } from "../theme";
 import { cn } from "../theme/tw";
 import { Typography } from "../Typography";
-import { Modal, Pressable as RNPressable, View } from "react-native";
+import { useEffect, useRef } from "react";
+import { Animated, Modal, Pressable as RNPressable, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 function ActionSheet({ visible, onClose, actions, title, message, cancelLabel = "Cancelar", }) {
     const insets = useSafeAreaInsets();
-    return (_jsx(Modal, { animationType: "slide", onRequestClose: onClose, transparent: true, visible: visible, children: _jsx(RNPressable, { className: "flex-1 justify-end bg-black/50", onPress: onClose, children: _jsxs(RNPressable, { style: { paddingHorizontal: 12, paddingBottom: insets.bottom + 12 }, children: [title || message ? (_jsxs(View, { className: "rounded-xl mb-2 px-4 py-3 items-center", style: { backgroundColor: theme.bg.card }, children: [title ? (_jsx(Typography.Text, { className: "text-text-primary", semibold: true, children: title })) : null, message ? (_jsx(Typography.Text, { className: "text-text-secondary text-sm", variant: "bodySmall", children: message })) : null] })) : null, _jsx(View, { className: "rounded-xl overflow-hidden mb-2", style: { backgroundColor: theme.bg.card }, children: actions.map((action, index) => (_jsxs(Pressable, { accessibilityRole: "button", accessibilityState: { disabled: action.disabled }, className: cn("flex-row items-center justify-center gap-2 px-4 py-4", index < actions.length - 1 && "border-b border-border-light"), disabled: action.disabled, onPress: () => {
-                                onClose();
-                                action.onPress();
-                            }, children: [action.icon ? (_jsx(Icon, { color: action.destructive ? theme.danger : theme.icon.primary, name: action.icon, size: 20 })) : null, _jsx(Typography.Text, { className: cn(action.destructive ? "text-danger" : "text-text-primary"), semibold: true, children: action.label })] }, action.label))) }), _jsx(Pressable, { accessibilityRole: "button", className: "rounded-xl px-4 py-4 items-center", onPress: onClose, style: { backgroundColor: theme.bg.card }, children: _jsx(Typography.Text, { className: "text-primary", semibold: true, children: cancelLabel }) })] }) }) }));
+    // eslint-disable-next-line react-hooks/refs
+    const translateY = useRef(new Animated.Value(800)).current;
+    useEffect(() => {
+        if (visible) {
+            Animated.spring(translateY, {
+                toValue: 0,
+                useNativeDriver: true,
+                damping: 20,
+                stiffness: 300,
+            }).start();
+        }
+        else {
+            translateY.setValue(800);
+        }
+    }, [visible, translateY]);
+    return (_jsx(Modal, { animationType: "none", onRequestClose: onClose, presentationStyle: "overFullScreen", transparent: true, visible: visible, children: _jsx(RNPressable, { className: "flex-1 justify-end bg-black/50", onPress: onClose, children: _jsx(Animated.View, { style: { transform: [{ translateY }] }, children: _jsxs(RNPressable, { style: { paddingHorizontal: 12, paddingBottom: insets.bottom + 12 }, children: [title || message ? (_jsxs(View, { className: "rounded-xl mb-2 px-4 py-3 items-center", style: { backgroundColor: theme.bg.card }, children: [title ? (_jsx(Typography.Text, { className: "text-text-primary", semibold: true, children: title })) : null, message ? (_jsx(Typography.Text, { className: "text-text-secondary text-sm", variant: "bodySmall", children: message })) : null] })) : null, _jsx(View, { className: "rounded-xl overflow-hidden mb-2", style: { backgroundColor: theme.bg.card }, children: actions.map((action, index) => (_jsxs(Pressable, { accessibilityRole: "button", accessibilityState: { disabled: action.disabled }, className: cn("flex-row items-center justify-center gap-2 px-4 py-4", index < actions.length - 1 && "border-b border-border-light"), disabled: action.disabled, onPress: () => {
+                                    onClose();
+                                    action.onPress();
+                                }, children: [action.icon ? (_jsx(Icon, { color: action.destructive ? theme.danger : theme.icon.primary, name: action.icon, size: 20 })) : null, _jsx(Typography.Text, { className: cn(action.destructive ? "text-danger" : "text-text-primary"), semibold: true, children: action.label })] }, action.label))) }), _jsx(Pressable, { accessibilityRole: "button", className: "rounded-xl px-4 py-4 items-center", onPress: onClose, style: { backgroundColor: theme.bg.card }, children: _jsx(Typography.Text, { className: "text-primary", semibold: true, children: cancelLabel }) })] }) }) }) }));
 }
 export default ActionSheet;

package/dist/Dialog/Dialog.Confirmation.js

@@ -4,7 +4,7 @@ import { theme } from "../theme";
 import Typography from "../Typography/Typography.Text";
 import { Modal, TouchableWithoutFeedback, View } from "react-native";
 const ConfirmationDialog = ({ visible, onCancel, onConfirm, auxTitle = "cambios", subtitle = "¿Estás seguro de que quieres descartar los cambios realizados?", confirmButtonText = "Sí", cancelButtonText = "No, continuar aquí", }) => {
-    return (_jsx(Modal, { animationType: "fade", onRequestClose: onCancel, transparent: true, visible: visible, children: _jsx(TouchableWithoutFeedback, { onPress: onCancel, children: _jsx(View, { className: "flex-1 justify-center items-center p-6 bg-black/50", children: _jsx(TouchableWithoutFeedback, { children: _jsxs(View, { className: "p-3 w-full max-w-xs mx-auto", style: {
+    return (_jsx(Modal, { animationType: "fade", onRequestClose: onCancel, presentationStyle: "overFullScreen", transparent: true, visible: visible, children: _jsx(TouchableWithoutFeedback, { onPress: onCancel, children: _jsx(View, { className: "flex-1 justify-center items-center p-6 bg-black/50", children: _jsx(TouchableWithoutFeedback, { children: _jsxs(View, { className: "p-3 w-full max-w-xs mx-auto", style: {
                             borderRadius: 22,
                             backgroundColor: theme.bg.popover,
                             ...theme.shadow.md,

package/dist/Dialog/Dialog.EditValue.js

@@ -11,6 +11,6 @@ function EditableValueModal({ visible, title, value, onChangeValue, onConfirm, o
             return () => clearTimeout(t);
         }
     }, [visible, autoFocus]);
-    return (_jsx(Modal, { animationType: "fade", onRequestClose: onCancel, transparent: true, visible: visible, children: _jsx(View, { className: "flex-1 justify-center p-6 bg-black/40", children: _jsxs(View, { className: "p-4", style: { borderRadius: 22, backgroundColor: theme.bg.popover, ...theme.shadow.md }, testID: testID, children: [_jsx(Typography.Text, { className: "mb-3", semibold: true, variant: "h6", children: title }), _jsxs(View, { className: "flex-row items-center", children: [_jsx(TextInput, { className: "flex-1 border border-input rounded-lg p-2.5 text-lg text-text-primary", keyboardType: keyboardType, onChangeText: onChangeValue, onSubmitEditing: onConfirm, placeholder: placeholder, ref: inputRef, returnKeyType: "done", value: value }), rightAdornment && _jsx(View, { className: "ml-2", children: rightAdornment })] }), helperText ? (_jsx(View, { className: "mt-2", children: typeof helperText === "string" ? (_jsx(Typography.Text, { className: "opacity-70", variant: "bodySmall", children: helperText })) : (helperText) })) : null, chips && chips.length > 0 && (_jsx(FlatList, { contentContainerClassName: "gap-2 py-3", data: chips, horizontal: true, keyExtractor: (c, i) => c.key || `${c.label}-${i}`, renderItem: ({ item }) => (_jsx(TouchableOpacity, { className: "px-3 py-1.5 bg-accent/10 rounded-2xl border border-accent/30", onPress: item.onPress, children: _jsx(Typography.Text, { semibold: true, variant: "bodySmall", children: item.label }) })) })), _jsxs(View, { className: "flex-row justify-end gap-3", children: [_jsx(TouchableOpacity, { className: "px-4 py-2.5 rounded-lg bg-bg-hover", onPress: onCancel, children: _jsx(Typography.Text, { semibold: true, variant: "body", children: cancelLabel }) }), _jsx(TouchableOpacity, { className: "px-4 py-2.5 rounded-lg bg-accent", onPress: onConfirm, children: _jsx(Typography.Text, { className: "text-text-inverse", semibold: true, variant: "body", children: confirmLabel }) })] })] }) }) }));
+    return (_jsx(Modal, { animationType: "fade", onRequestClose: onCancel, presentationStyle: "overFullScreen", transparent: true, visible: visible, children: _jsx(View, { className: "flex-1 justify-center p-6 bg-black/40", children: _jsxs(View, { className: "p-4", style: { borderRadius: 22, backgroundColor: theme.bg.popover, ...theme.shadow.md }, testID: testID, children: [_jsx(Typography.Text, { className: "mb-3", semibold: true, variant: "h6", children: title }), _jsxs(View, { className: "flex-row items-center", children: [_jsx(TextInput, { className: "flex-1 border border-input rounded-lg p-2.5 text-lg text-text-primary", keyboardType: keyboardType, onChangeText: onChangeValue, onSubmitEditing: onConfirm, placeholder: placeholder, ref: inputRef, returnKeyType: "done", value: value }), rightAdornment && _jsx(View, { className: "ml-2", children: rightAdornment })] }), helperText ? (_jsx(View, { className: "mt-2", children: typeof helperText === "string" ? (_jsx(Typography.Text, { className: "opacity-70", variant: "bodySmall", children: helperText })) : (helperText) })) : null, chips && chips.length > 0 && (_jsx(FlatList, { contentContainerClassName: "gap-2 py-3", data: chips, horizontal: true, keyExtractor: (c, i) => c.key || `${c.label}-${i}`, renderItem: ({ item }) => (_jsx(TouchableOpacity, { className: "px-3 py-1.5 bg-accent/10 rounded-2xl border border-accent/30", onPress: item.onPress, children: _jsx(Typography.Text, { semibold: true, variant: "bodySmall", children: item.label }) })) })), _jsxs(View, { className: "flex-row justify-end gap-3", children: [_jsx(TouchableOpacity, { className: "px-4 py-2.5 rounded-lg bg-bg-hover", onPress: onCancel, children: _jsx(Typography.Text, { semibold: true, variant: "body", children: cancelLabel }) }), _jsx(TouchableOpacity, { className: "px-4 py-2.5 rounded-lg bg-accent", onPress: onConfirm, children: _jsx(Typography.Text, { className: "text-text-inverse", semibold: true, variant: "body", children: confirmLabel }) })] })] }) }) }));
 }
 export default EditableValueModal;

package/dist/Dialog/Dialog.Sheet.js

@@ -18,13 +18,22 @@ export function SheetProvider({ children }) {
  */
 function Sheet({ visible, onClose, children, title, maxHeightRatio = 0.9, dismissOnBackdrop = false, testID, }) {
     const insets = useSafeAreaInsets();
-    const [translateY] = useState(() => new Animated.Value(0));
+    const translateY = useRef(new Animated.Value(800)).current;
     const onCloseRef = useRef(onClose);
     // eslint-disable-next-line react-hooks/refs
     onCloseRef.current = onClose;
     useEffect(() => {
-        if (visible)
-            translateY.setValue(0);
+        if (visible) {
+            Animated.spring(translateY, {
+                toValue: 0,
+                useNativeDriver: true,
+                damping: 20,
+                stiffness: 300,
+            }).start();
+        }
+        else {
+            translateY.setValue(800);
+        }
     }, [visible, translateY]);
     // eslint-disable-next-line react-hooks/refs
     const [pan] = useState(() => PanResponder.create({
@@ -47,7 +56,7 @@ function Sheet({ visible, onClose, children, title, maxHeightRatio = 0.9, dismis
             }
         },
     }));
-    return (_jsx(Modal, { animationType: "slide", onRequestClose: onClose, transparent: true, visible: visible, children: _jsxs(View, { className: "flex-1 justify-end", testID: testID, children: [_jsx(View, { className: "absolute inset-0 bg-black/50", onResponderRelease: dismissOnBackdrop ? onClose : undefined, onStartShouldSetResponder: () => dismissOnBackdrop }), _jsxs(Animated.View, { className: "rounded-t-3xl", style: {
+    return (_jsx(Modal, { animationType: "none", onRequestClose: onClose, presentationStyle: "overFullScreen", transparent: true, visible: visible, children: _jsxs(View, { className: "flex-1 justify-end", testID: testID, children: [_jsx(View, { className: "absolute inset-0 bg-black/50", onResponderRelease: dismissOnBackdrop ? onClose : undefined, onStartShouldSetResponder: () => dismissOnBackdrop }), _jsxs(Animated.View, { className: "rounded-t-3xl", style: {
                         backgroundColor: theme.bg.card,
                         paddingBottom: insets.bottom + 12,
                         maxHeight: `${Math.round(maxHeightRatio * 100)}%`,

package/dist/Feedback/Feedback.Progress.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
 import { cn } from "../theme/tw";
 import { motion } from "../tokens/motion";
-import { useEffect, useState } from "react";
+import { useEffect, useRef } from "react";
 import { Animated, Easing, View } from "react-native";
 function clamp(n) {
     return Math.max(0, Math.min(1, n));
 }
 function Progress({ value = 0, indeterminate = false, height = 6, className, testID, }) {
-    const [translate] = useState(() => new Animated.Value(0));
+    // eslint-disable-next-line react-hooks/refs
+    const translate = useRef(new Animated.Value(0)).current;
     useEffect(() => {
         if (!indeterminate)
             return;
@@ -24,6 +25,7 @@ function Progress({ value = 0, indeterminate = false, height = 6, className, tes
                 width: "40%",
                 transform: [
                     {
+                        // eslint-disable-next-line react-hooks/refs
                         translateX: translate.interpolate({
                             inputRange: [0, 1],
                             outputRange: ["-40%", "250%"],

package/dist/Feedback/Feedback.Skeleton.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
 import { cn } from "../theme/tw";
 import { motion } from "../tokens/motion";
-import { useEffect, useState } from "react";
+import { useEffect, useRef } from "react";
 import { Animated, Easing } from "react-native";
 function Skeleton({ width = "100%", height = 16, radius = 8, circle = false, className, style, }) {
-    const [opacity] = useState(() => new Animated.Value(0.5));
+    // eslint-disable-next-line react-hooks/refs
+    const opacity = useRef(new Animated.Value(0.5)).current;
     useEffect(() => {
         const pulse = Animated.loop(Animated.sequence([
             Animated.timing(opacity, {

package/dist/Form/Form.Dropdown.js

@@ -77,7 +77,7 @@ function DropdownButton({ title, options, variant = "secondary", size = "small",
         xs: "bodySmall",
         small: "bodySmall",
     }[size];
-    return (_jsxs(_Fragment, { children: [_jsxs(TouchableOpacity, { activeOpacity: 0.7, className: styles.button(), onPress: () => setIsOpen(true), children: [_jsx(Typography.Text, { className: textColorClass, variant: textVariant, children: title }), _jsx(Display.Icon, { color: iconColor, name: "chevron-down", size: 16, type: "feather" })] }), _jsx(Modal, { animationType: "fade", transparent: true, visible: isOpen, children: _jsx(TouchableWithoutFeedback, { onPress: () => setIsOpen(false), children: _jsx(View, { className: styles.overlay(), children: _jsx(TouchableWithoutFeedback, { children: _jsxs(View, { className: styles.dropdownContainer(), style: {
+    return (_jsxs(_Fragment, { children: [_jsxs(TouchableOpacity, { activeOpacity: 0.7, className: styles.button(), onPress: () => setIsOpen(true), children: [_jsx(Typography.Text, { className: textColorClass, variant: textVariant, children: title }), _jsx(Display.Icon, { color: iconColor, name: "chevron-down", size: 16, type: "feather" })] }), _jsx(Modal, { animationType: "fade", presentationStyle: "overFullScreen", transparent: true, visible: isOpen, children: _jsx(TouchableWithoutFeedback, { onPress: () => setIsOpen(false), children: _jsx(View, { className: styles.overlay(), children: _jsx(TouchableWithoutFeedback, { children: _jsxs(View, { className: styles.dropdownContainer(), style: {
                                     backgroundColor: theme.bg.popover,
                                     ...theme.shadow.lg,
                                 }, children: [_jsxs(View, { className: styles.header(), children: [_jsx(Typography.Text, { className: "text-text-primary", semibold: true, variant: "bodyLarge", children: title }), _jsx(TouchableOpacity, { onPress: () => setIsOpen(false), children: _jsx(Display.Icon, { name: "x", size: 20, type: "feather" }) })] }), _jsx(View, { className: styles.optionsList(), children: options.map((option, index) => (_jsxs(View, { children: [_jsx(TouchableOpacity, { activeOpacity: 0.7, className: dropdown({ disabled: option.disabled }).option(), disabled: option.disabled, onPress: () => handleOptionPress(option), children: _jsx(Typography.Text, { className: option.disabled ? "text-text-disabled" : "text-text-primary", variant: "body", children: option.title }) }), index < options.length - 1 && _jsx(View, { className: styles.separator() })] }, option.id))) })] }) }) }) }) })] }));

package/dist/Form/Form.Select.js

@@ -4,23 +4,38 @@ import Pressable from "../primitives/Pressable";
 import { theme } from "../theme";
 import { cn } from "../theme/tw";
 import { Typography } from "../Typography";
-import { useState } from "react";
-import { Modal, Pressable as RNPressable, ScrollView, View } from "react-native";
+import { useEffect, useRef, useState } from "react";
+import { Animated, Modal, Pressable as RNPressable, ScrollView, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 function Select({ options, value, onChange, label, placeholder = "Seleccionar…", title, disabled = false, className, testID, }) {
     const insets = useSafeAreaInsets();
     const [open, setOpen] = useState(false);
     const selected = options.find((o) => o.value === value) ?? null;
-    return (_jsxs(View, { className: cn("gap-1", className), testID: testID, children: [label ? (_jsx(Typography.Text, { className: "font-medium text-text-primary", variant: "bodySmall", children: label })) : null, _jsxs(Pressable, { accessibilityHint: "Abre la lista de opciones", accessibilityLabel: label ?? placeholder, accessibilityRole: "button", accessibilityState: { disabled }, className: "flex-row items-center justify-between rounded-lg border border-input bg-bg-card px-3 min-h-[44px]", disabled: disabled, onPress: () => setOpen(true), children: [_jsx(Typography.Text, { className: cn("flex-1 text-sm", selected ? "text-text-primary" : "text-text-tertiary"), numberOfLines: 1, children: selected ? selected.label : placeholder }), _jsx(Icon, { color: theme.icon.secondary, name: "chevron-down", size: 18 })] }), _jsx(Modal, { animationType: "slide", onRequestClose: () => setOpen(false), transparent: true, visible: open, children: _jsx(RNPressable, { className: "flex-1 justify-end bg-black/50", onPress: () => setOpen(false), children: _jsxs(RNPressable, { className: "rounded-t-3xl", style: {
-                            backgroundColor: theme.bg.card,
-                            paddingBottom: insets.bottom + 8,
-                            maxHeight: "70%",
-                        }, children: [_jsx(View, { className: "items-center pt-3 pb-1", children: _jsx(View, { className: "w-10 h-1 rounded-full bg-border-strong" }) }), title ? (_jsx(Typography.Text, { className: "text-text-primary px-4 py-2", semibold: true, variant: "body", children: title })) : null, _jsx(ScrollView, { children: options.map((option) => {
-                                    const isSelected = option.value === value;
-                                    return (_jsxs(Pressable, { accessibilityRole: "menuitem", accessibilityState: { selected: isSelected }, className: "flex-row items-center justify-between px-4 py-3 border-b border-border-light", onPress: () => {
-                                            onChange(option.value);
-                                            setOpen(false);
-                                        }, children: [_jsx(Typography.Text, { className: cn("flex-1 text-sm", isSelected ? "text-primary font-semibold" : "text-text-primary"), children: option.label }), isSelected ? (_jsx(Icon, { color: theme.primary, name: "checkmark", size: 18 })) : null] }, String(option.value)));
-                                }) })] }) }) })] }));
+    // eslint-disable-next-line react-hooks/refs
+    const translateY = useRef(new Animated.Value(800)).current;
+    useEffect(() => {
+        if (open) {
+            Animated.spring(translateY, {
+                toValue: 0,
+                useNativeDriver: true,
+                damping: 20,
+                stiffness: 300,
+            }).start();
+        }
+        else {
+            translateY.setValue(800);
+        }
+    }, [open, translateY]);
+    return (_jsxs(View, { className: cn("gap-1", className), testID: testID, children: [label ? (_jsx(Typography.Text, { className: "font-medium text-text-primary", variant: "bodySmall", children: label })) : null, _jsxs(Pressable, { accessibilityHint: "Abre la lista de opciones", accessibilityLabel: label ?? placeholder, accessibilityRole: "button", accessibilityState: { disabled }, className: "flex-row items-center justify-between rounded-lg border border-input bg-bg-card px-3 min-h-[44px]", disabled: disabled, onPress: () => setOpen(true), children: [_jsx(Typography.Text, { className: cn("flex-1 text-sm", selected ? "text-text-primary" : "text-text-tertiary"), numberOfLines: 1, children: selected ? selected.label : placeholder }), _jsx(Icon, { color: theme.icon.secondary, name: "chevron-down", size: 18 })] }), _jsx(Modal, { animationType: "none", onRequestClose: () => setOpen(false), presentationStyle: "overFullScreen", transparent: true, visible: open, children: _jsx(RNPressable, { className: "flex-1 justify-end bg-black/50", onPress: () => setOpen(false), children: _jsx(Animated.View, { style: { transform: [{ translateY }] }, children: _jsxs(RNPressable, { className: "rounded-t-3xl", style: {
+                                backgroundColor: theme.bg.card,
+                                paddingBottom: insets.bottom + 8,
+                                maxHeight: "70%",
+                            }, children: [_jsx(View, { className: "items-center pt-3 pb-1", children: _jsx(View, { className: "w-10 h-1 rounded-full bg-border-strong" }) }), title ? (_jsx(Typography.Text, { className: "text-text-primary px-4 py-2", semibold: true, variant: "body", children: title })) : null, _jsx(ScrollView, { children: options.map((option) => {
+                                        const isSelected = option.value === value;
+                                        return (_jsxs(Pressable, { accessibilityRole: "menuitem", accessibilityState: { selected: isSelected }, className: "flex-row items-center justify-between px-4 py-3 border-b border-border-light", onPress: () => {
+                                                onChange(option.value);
+                                                setOpen(false);
+                                            }, children: [_jsx(Typography.Text, { className: cn("flex-1 text-sm", isSelected ? "text-primary font-semibold" : "text-text-primary"), children: option.label }), isSelected ? (_jsx(Icon, { color: theme.primary, name: "checkmark", size: 18 })) : null] }, String(option.value)));
+                                    }) })] }) }) }) })] }));
 }
 export default Select;

package/dist/Navigation/Navigation.Menu.js

@@ -21,7 +21,7 @@ function Menu({ items, trigger, menuWidth = 220, testID }) {
     const top = anchor ? anchor.y + anchor.height + 4 : 0;
     return (_jsxs(View, { collapsable: false, ref: triggerRef, testID: testID, children: [trigger ? (
             // eslint-disable-next-line react-hooks/refs
-            cloneElement(trigger, { onPress: open })) : (_jsx(Pressable, { accessibilityLabel: "M\u00E1s opciones", accessibilityRole: "button", onPress: open, children: _jsx(Icon, { color: theme.icon.secondary, name: "ellipsis-vertical", size: 22 }) })), _jsx(Modal, { animationType: "fade", onRequestClose: close, transparent: true, visible: anchor !== null, children: _jsx(RNPressable, { onPress: close, style: { flex: 1 }, children: _jsx(View, { className: "rounded-lg py-1", style: {
+            cloneElement(trigger, { onPress: open })) : (_jsx(Pressable, { accessibilityLabel: "M\u00E1s opciones", accessibilityRole: "button", onPress: open, children: _jsx(Icon, { color: theme.icon.secondary, name: "ellipsis-vertical", size: 22 }) })), _jsx(Modal, { animationType: "fade", onRequestClose: close, presentationStyle: "overFullScreen", transparent: true, visible: anchor !== null, children: _jsx(RNPressable, { onPress: close, style: { flex: 1 }, children: _jsx(View, { className: "rounded-lg py-1", style: {
                             position: "absolute",
                             top,
                             right,

package/dist/widgets/PromoModal.js

@@ -25,7 +25,7 @@ export function PromoModal({ visible, onDismiss, title, body, icon: Icon, header
     const theme = useTheme();
     const insets = useSafeAreaInsets();
     const accent = accentColor ?? theme.accent;
-    return (_jsxs(Modal, { animationType: "fade", onRequestClose: onDismiss, statusBarTranslucent: true, transparent: true, visible: visible, children: [_jsx(TouchableWithoutFeedback, { onPress: onDismiss, children: _jsx(View, { style: {
+    return (_jsxs(Modal, { animationType: "fade", onRequestClose: onDismiss, presentationStyle: "overFullScreen", statusBarTranslucent: true, transparent: true, visible: visible, children: [_jsx(TouchableWithoutFeedback, { onPress: onDismiss, children: _jsx(View, { style: {
                         flex: 1,
                         backgroundColor: "rgba(0,0,0,0.55)",
                         alignItems: "center",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sincpro/mobile-ui",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "description": "Sincpro Mobile design system: generic, presentational React Native components (no domain logic)",
   "main": "expo/AppEntry.js",
   "types": "./dist/index.d.ts",