orn-ui 0.2.9 → 0.3.0

package/lib/module/organisms/Alert.js

@@ -1,9 +1,10 @@
 "use strict";
 
 import React, { memo } from 'react';
-import { Modal, Text, TouchableWithoutFeedback, View } from 'react-native';
+import { Text, TouchableWithoutFeedback, View } from 'react-native';
+import { NativeOverlay } from '../theme/NativeOverlay';
 import { createStyles } from '../theme/createStyles';
-import { useAllowFontScaling, useColors, useLabels } from '../theme/UIProvider';
+import { useAllowFontScaling, useColors, useLabels, useTheme } from '../theme/UIProvider';
 import { Button } from '../atoms/Button';
 import { Icon } from '../icons/Icon';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -14,6 +15,12 @@ const ICON_BY_TYPE = {
   question: 'question',
   info: 'info'
 };
+
+/** Readable line length for a short dialog on tablets too. */
+const DIALOG_MAX_WIDTH = 340;
+const ICON_SIZE = 48;
+/** Above any sibling of the inline host. */
+const INLINE_Z = 9999;
 const useStyles = createStyles(theme => ({
   overlay: {
     flex: 1,
@@ -22,53 +29,53 @@ const useStyles = createStyles(theme => ({
     alignItems: 'center',
     padding: theme.tokens.spacing.xl
   },
-  overlayInline: {
+  fill: {
     position: 'absolute',
     top: 0,
     left: 0,
     right: 0,
-    bottom: 0,
-    zIndex: 9999
+    bottom: 0
+  },
+  overlayInline: {
+    zIndex: INLINE_Z
   },
   container: {
-    backgroundColor: theme.colors.surface,
+    // Raised: in dark mode the plain surface sank into the dimmed backdrop.
+    backgroundColor: theme.colors.surfaceRaised,
     borderRadius: theme.tokens.radius.xl,
     padding: theme.tokens.spacing.xl,
     width: '100%',
-    maxWidth: 340,
+    maxWidth: DIALOG_MAX_WIDTH,
     alignItems: 'center',
     ...theme.tokens.shadow.md
   },
   iconContainer: {
-    marginBottom: theme.tokens.spacing.lg - 1
+    marginBottom: theme.tokens.spacing.lg
   },
   title: {
     fontSize: theme.tokens.fontSize.xl,
+    lineHeight: theme.tokens.lineHeight.lg,
     fontWeight: theme.tokens.fontWeight.bold,
     color: theme.colors.text,
     textAlign: 'center',
-    marginBottom: theme.tokens.spacing.md - 2
+    marginBottom: theme.tokens.spacing.sm
   },
   message: {
     fontSize: theme.tokens.fontSize.md,
+    lineHeight: theme.tokens.lineHeight.md,
     color: theme.colors.textLight,
-    textAlign: 'center',
-    marginBottom: theme.tokens.spacing.xl,
-    lineHeight: theme.tokens.lineHeight.md
+    textAlign: 'center'
   },
   buttonContainer: {
     flexDirection: 'row',
     justifyContent: 'center',
-    gap: theme.tokens.spacing.sm + 2,
-    width: '100%'
+    gap: theme.tokens.spacing.sm,
+    width: '100%',
+    marginTop: theme.tokens.spacing.xl
   },
   buttonContainerVertical: {
     flexDirection: 'column'
   },
-  button: {
-    paddingVertical: theme.tokens.spacing.md - 2,
-    paddingHorizontal: theme.tokens.spacing.xl
-  },
   buttonHorizontal: {
     flex: 1
   },
@@ -77,7 +84,7 @@ const useStyles = createStyles(theme => ({
   }
 }));
 
-/** Deriva la lista de botones a partir de props, sin mutar `buttons` recibido por props. */
+/** Derives the list of buttons from props, without mutating the `buttons` received through props. */
 function resolveButtons(props, labels) {
   const {
     buttons,
@@ -85,7 +92,8 @@ function resolveButtons(props, labels) {
     cancelText,
     onConfirm,
     onCancel,
-    onClose
+    onClose,
+    destructive
   } = props;
   if (buttons && buttons.length > 0) return buttons;
   if (confirmText || onConfirm) {
@@ -101,7 +109,7 @@ function resolveButtons(props, labels) {
     list.push({
       text: confirmText || labels.confirm,
       onPress: onConfirm,
-      variant: 'primary'
+      variant: destructive ? 'destructive' : 'primary'
     });
     return list;
   }
@@ -114,8 +122,17 @@ function resolveButtons(props, labels) {
 
 /**
  * Alert
- * Componente declarativo de diálogo. Para uso imperativo (mostrar desde
- * un handler sin levantar estado propio), usar AlertProvider + useAlert().
+ * Declarative dialog component. For imperative use (showing it from a
+ * handler without lifting your own state), use AlertProvider + useAlert().
+ *
+ * Gestalt, figure-ground: the overlay dims everything behind, so the dialog
+ * is the only figure. Proximity: icon, title and message sit together and the
+ * buttons a larger step below, as the answer block. Von Restorff: only the
+ * main action is filled (or red when `destructive`); cancel is outline.
+ * Hick: two buttons side by side; three or more stack so each reads alone.
+ *
+ * Accessibility: the title is a header, the dialog is modal for VoiceOver and
+ * the escape gesture (two-finger Z) calls `onClose`.
  */
 export const Alert = /*#__PURE__*/memo(props => {
   const {
@@ -126,13 +143,14 @@ export const Alert = /*#__PURE__*/memo(props => {
     onClose,
     inline = false
   } = props;
+  const theme = useTheme();
   const colors = useColors();
   const styles = useStyles();
   const labels = useLabels();
   const allowFontScaling = useAllowFontScaling();
   if (!visible) return null;
   const iconColor = {
-    // Íconos sobre la superficie del diálogo: rol `*Text`, no el acento pleno.
+    // Icons over the dialog's surface: `*Text` role, not the full accent.
     success: colors.successText,
     error: colors.errorText,
     warning: colors.warningText,
@@ -149,22 +167,24 @@ export const Alert = /*#__PURE__*/memo(props => {
     onPress: onClose,
     accessibilityRole: "none",
     children: /*#__PURE__*/_jsx(View, {
-      style: [styles.overlay, inline && styles.overlayInline],
+      style: [styles.overlay, inline && [styles.fill, styles.overlayInline]],
       children: /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
         children: /*#__PURE__*/_jsxs(View, {
           style: styles.container,
           accessibilityRole: "alert",
           accessibilityViewIsModal: true,
+          onAccessibilityEscape: onClose,
           children: [/*#__PURE__*/_jsx(View, {
             style: styles.iconContainer,
             children: /*#__PURE__*/_jsx(Icon, {
               name: ICON_BY_TYPE[type],
-              size: 48,
+              size: ICON_SIZE,
               color: iconColor[type]
             })
           }), /*#__PURE__*/_jsx(Text, {
             allowFontScaling: allowFontScaling,
             style: styles.title,
+            accessibilityRole: "header",
             children: title
           }), !!message && /*#__PURE__*/_jsx(Text, {
             allowFontScaling: allowFontScaling,
@@ -181,9 +201,9 @@ export const Alert = /*#__PURE__*/memo(props => {
                 title: btn.text,
                 onPress: btn.onPress || onClose || (() => {}),
                 variant: variant,
-                style: [styles.button, vertical ? styles.buttonVertical : styles.buttonHorizontal],
+                style: vertical ? styles.buttonVertical : styles.buttonHorizontal,
                 textStyle: {
-                  fontSize: 14
+                  fontSize: theme.tokens.fontSize.md
                 }
               }, index);
             })
@@ -194,20 +214,14 @@ export const Alert = /*#__PURE__*/memo(props => {
   });
   if (inline) {
     return /*#__PURE__*/_jsx(View, {
-      style: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0
-      },
+      style: styles.fill,
       pointerEvents: "box-none",
       children: content
     });
   }
-  return /*#__PURE__*/_jsx(Modal, {
+  return /*#__PURE__*/_jsx(NativeOverlay, {
+    dialog: true,
     transparent: true,
-    visible: visible,
     animationType: "fade",
     statusBarTranslucent: true,
     presentationStyle: "overFullScreen",

package/lib/module/organisms/Alert.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","memo","Modal","Text","TouchableWithoutFeedback","View","createStyles","useAllowFontScaling","useColors","useLabels","Button","Icon","jsx","_jsx","jsxs","_jsxs","ICON_BY_TYPE","success","error","warning","question","info","useStyles","theme","overlay","flex","backgroundColor","colors","justifyContent","alignItems","padding","tokens","spacing","xl","overlayInline","position","top","left","right","bottom","zIndex","container","surface","borderRadius","radius","width","maxWidth","shadow","md","iconContainer","marginBottom","lg","title","fontSize","fontWeight","bold","color","text","textAlign","message","textLight","lineHeight","buttonContainer","flexDirection","gap","sm","buttonContainerVertical","button","paddingVertical","paddingHorizontal","buttonHorizontal","buttonVertical","resolveButtons","props","labels","buttons","confirmText","cancelText","onConfirm","onCancel","onClose","length","list","push","cancel","onPress","variant","style","confirm","close","Alert","visible","type","inline","styles","allowFontScaling","iconColor","successText","errorText","warningText","primaryText","secondaryText","effectiveButtons","vertical","content","accessibilityRole","children","accessibilityViewIsModal","name","size","map","btn","index","isCancel","textStyle","pointerEvents","transparent","animationType","statusBarTranslucent","presentationStyle","onRequestClose","displayName"],"sourceRoot":"../../../src","sources":["organisms/Alert.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","memo","Text","TouchableWithoutFeedback","View","NativeOverlay","createStyles","useAllowFontScaling","useColors","useLabels","useTheme","Button","Icon","jsx","_jsx","jsxs","_jsxs","ICON_BY_TYPE","success","error","warning","question","info","DIALOG_MAX_WIDTH","ICON_SIZE","INLINE_Z","useStyles","theme","overlay","flex","backgroundColor","colors","justifyContent","alignItems","padding","tokens","spacing","xl","fill","position","top","left","right","bottom","overlayInline","zIndex","container","surfaceRaised","borderRadius","radius","width","maxWidth","shadow","md","iconContainer","marginBottom","lg","title","fontSize","lineHeight","fontWeight","bold","color","text","textAlign","sm","message","textLight","buttonContainer","flexDirection","gap","marginTop","buttonContainerVertical","buttonHorizontal","buttonVertical","resolveButtons","props","labels","buttons","confirmText","cancelText","onConfirm","onCancel","onClose","destructive","length","list","push","cancel","onPress","variant","style","confirm","close","Alert","visible","type","inline","styles","allowFontScaling","iconColor","successText","errorText","warningText","primaryText","secondaryText","effectiveButtons","vertical","content","accessibilityRole","children","accessibilityViewIsModal","onAccessibilityEscape","name","size","map","btn","index","isCancel","textStyle","pointerEvents","dialog","transparent","animationType","statusBarTranslucent","presentationStyle","onRequestClose","displayName"],"sourceRoot":"../../../src","sources":["organisms/Alert.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/organisms/AlertProvider.js

@@ -8,15 +8,15 @@ const AlertContext = /*#__PURE__*/createContext(undefined);
 const bridge = createImperativeBridge('AlertProvider');
 
 /**
- * Abre un alert desde fuera del árbol de React —un servicio, un interceptor—
- * sin pasar por el hook. Sin <AlertProvider> montado resuelve de inmediato, así
- * que un `await` nunca queda colgado.
+ * Opens an alert from outside the React tree —a service, an interceptor—
+ * without going through the hook. Without a mounted <AlertProvider> it
+ * resolves immediately, so an `await` never hangs.
  */
 export function showAlert(options) {
   return bridge.get()?.alert(options) ?? Promise.resolve();
 }
 
-/** Igual que showAlert, pero resuelve true/false. Sin provider, false. */
+/** Same as showAlert, but resolves true/false. Without a provider, false. */
 export function showConfirm(options) {
   return bridge.get()?.confirm(options) ?? Promise.resolve(false);
 }
@@ -32,18 +32,18 @@ const HIDDEN = {
 
 /**
  * AlertProvider
- * Monta un único <Alert> controlado imperativamente. Colocar una vez cerca
- * de la raíz (dentro de UIProvider). Los handlers async pueden hacer
- * `const ok = await confirm({ title: 'Eliminar', destructive: true })`.
+ * Mounts a single imperatively controlled <Alert>. Place it once near the
+ * root (inside UIProvider). Async handlers can do
+ * `const ok = await confirm({ title: 'Delete', destructive: true })`.
  */
 export function AlertProvider({
   children
 }) {
   const [state, setState] = useState(HIDDEN);
   const resolverRef = useRef(null);
-  // Si alert()/confirm() se llaman de nuevo mientras ya hay uno abierto, el
-  // pedido anterior se resuelve (no se descarta) antes de mostrar el nuevo:
-  // evita que su promise quede colgada para siempre.
+  // If alert()/confirm() are called again while one is already open, the
+  // previous request is resolved (not discarded) before showing the new one:
+  // this keeps its promise from hanging forever.
   const settlePending = useCallback(() => {
     resolverRef.current?.(undefined);
     resolverRef.current = null;

package/lib/module/organisms/BottomSheet.js

@@ -1,17 +1,25 @@
 "use strict";
 
 import React, { memo, useEffect, useRef, useState } from 'react';
-import { Animated, Dimensions, Keyboard, KeyboardAvoidingView, Modal, PanResponder, Platform, Pressable, ScrollView, View } from 'react-native';
+import { Animated, Keyboard, KeyboardAvoidingView, PanResponder, Platform, Pressable, ScrollView, View, useWindowDimensions } from 'react-native';
 import { createStyles } from '../theme/createStyles';
-import { useColors, useModalSafeAreaBoundary } from '../theme/UIProvider';
+import { useColors, useLabels, useModalSafeAreaBoundary, useTheme } from '../theme/UIProvider';
+import { useReduceMotion } from '../theme/useReduceMotion';
+import { KeyboardHandled } from '../theme/KeyboardAvoidance';
+import { NativeOverlay } from '../theme/NativeOverlay';
 import { Title } from '../atoms/Text';
 import { IconButton } from '../atoms/IconButton';
 import { Transition } from '../atoms/Transition';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  height: SCREEN_HEIGHT
-} = Dimensions.get('window');
-const DISMISS_THRESHOLD = 100;
+
+/** Drag distance (pt) that closes the sheet on release. */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const DISMISS_DISTANCE = 100;
+/** Downward release speed that closes it even after a short drag (a flick). */
+const DISMISS_VELOCITY = 0.5;
+const HANDLE_WIDTH = 40;
+const HANDLE_HEIGHT = 5;
+const HANDLE_OPACITY = 0.4;
+const CLOSE_ICON_SIZE = 24;
 const useStyles = createStyles(theme => ({
   container: {
     flex: 1,
@@ -21,7 +29,8 @@ const useStyles = createStyles(theme => ({
     backgroundColor: theme.colors.overlay
   },
   sheet: {
-    backgroundColor: theme.colors.surface,
+    // Raised: in dark mode the plain surface sank into the dimmed backdrop.
+    backgroundColor: theme.colors.surfaceRaised,
     borderTopLeftRadius: theme.tokens.radius.xxl,
     borderTopRightRadius: theme.tokens.radius.xxl,
     ...theme.tokens.shadow.lg
@@ -31,10 +40,13 @@ const useStyles = createStyles(theme => ({
     alignItems: 'center'
   },
   handle: {
-    width: 40,
-    height: 5,
-    borderRadius: 3,
-    backgroundColor: theme.colors.border
+    width: HANDLE_WIDTH,
+    height: HANDLE_HEIGHT,
+    borderRadius: HANDLE_HEIGHT / 2,
+    // textLight, faded: `border` was nearly invisible on a white sheet, and
+    // the handle is the only hint that the sheet can be dragged.
+    backgroundColor: theme.colors.textLight,
+    opacity: HANDLE_OPACITY
   },
   header: {
     flexDirection: 'row',
@@ -77,10 +89,17 @@ const absoluteFill = {
 
 /**
  * BottomSheet
- * Hoja que entra desde abajo, con arrastre para cerrar (PanResponder, no un
- * gesture-handler externo: la librería es cero dependencias). Header, footer y
- * scroll son opcionales, así que cubre tanto la hoja desnuda como el formulario
- * completo.
+ * Sheet that slides in from the bottom, with drag to close (PanResponder, not
+ * an external gesture-handler: the library is zero-dependency). Header, footer
+ * and scroll are optional, so it covers both the bare sheet and the full
+ * form.
+ *
+ * Gestalt, figure-ground: the backdrop dims the screen, so the sheet is the
+ * only figure. Common region: header, content and footer share one panel;
+ * the footer's top border separates the actions from the content. Continuity:
+ * it slides from the edge it lives on and the drag follows the finger back
+ * down; a short flick closes it too. Fitts: content sits in the thumb zone.
+ * Reduce Motion: it appears and leaves without sliding.
  */
 export const BottomSheet = /*#__PURE__*/memo(({
   visible,
@@ -92,30 +111,42 @@ export const BottomSheet = /*#__PURE__*/memo(({
   scrollable = true,
   draggable = true,
   maxHeight = 0.9,
-  closeAccessibilityLabel = 'Close',
+  closeAccessibilityLabel,
   containerStyle,
   contentStyle,
+  inline = false,
   testID
 }) => {
   const styles = useStyles();
   const colors = useColors();
+  const theme = useTheme();
+  const labels = useLabels();
+  const reduceMotion = useReduceMotion();
+  const {
+    height: screenHeight
+  } = useWindowDimensions();
+  const closeLabel = closeAccessibilityLabel ?? labels.close;
+  const {
+    duration
+  } = theme.tokens;
+  // The PanResponder is created once: it reads these through refs.
+  const screenHeightRef = useRef(screenHeight);
+  screenHeightRef.current = screenHeight;
+  const snapBackMs = useRef(duration.fast);
+  snapBackMs.current = reduceMotion ? 0 : duration.fast;
   const ModalSafeAreaBoundary = useModalSafeAreaBoundary();
   const [mounted, setMounted] = useState(visible);
   const [keyboardOpen, setKeyboardOpen] = useState(false);
   const progress = useRef(new Animated.Value(0)).current;
-  // El PanResponder de más abajo se crea una sola vez; leer `onClose`
-  // directo del closure daría siempre el de ese primer render. El ref
-  // refleja la última prop sin importar cuándo se creó la closure.
+  // The PanResponder further down is created only once; reading `onClose`
+  // straight from the closure would always give the one from that first
+  // render. The ref reflects the latest prop no matter when the closure was created.
   const onCloseRef = useRef(onClose);
   onCloseRef.current = onClose;
   useEffect(() => {
-    const animation = visible ? Animated.timing(progress, {
-      toValue: 1,
-      duration: 250,
-      useNativeDriver: true
-    }) : Animated.timing(progress, {
-      toValue: 0,
-      duration: 200,
+    const animation = Animated.timing(progress, {
+      toValue: visible ? 1 : 0,
+      duration: reduceMotion ? 0 : visible ? duration.slow : duration.base,
       useNativeDriver: true
     });
     if (visible) setMounted(true);
@@ -124,11 +155,11 @@ export const BottomSheet = /*#__PURE__*/memo(({
     }) => {
       if (!visible && finished) setMounted(false);
     });
-    // Si el efecto vuelve a correr (o el componente se desmonta) antes de
-    // que termine, se corta: si no, un `finished` tardío podría llamar
-    // `setMounted` sobre un componente ya desmontado.
+    // If the effect runs again (or the component unmounts) before it
+    // finishes, it is cut short: otherwise, a late `finished` could call
+    // `setMounted` on an already unmounted component.
     return () => animation.stop();
-  }, [visible, progress]);
+  }, [visible, progress, reduceMotion, duration.slow, duration.base]);
   useEffect(() => {
     if (footerPlacement !== 'hide-with-keyboard') return;
     const [show, hide] = Platform.OS === 'ios' ? ['keyboardWillShow', 'keyboardWillHide'] : ['keyboardDidShow', 'keyboardDidHide'];
@@ -138,15 +169,16 @@ export const BottomSheet = /*#__PURE__*/memo(({
   const panResponder = useRef(PanResponder.create({
     onMoveShouldSetPanResponder: (_, gesture) => gesture.dy > 5 && Math.abs(gesture.dy) > Math.abs(gesture.dx),
     onPanResponderMove: (_, gesture) => {
-      if (gesture.dy > 0) progress.setValue(1 - Math.min(gesture.dy, SCREEN_HEIGHT) / SCREEN_HEIGHT);
+      const h = screenHeightRef.current;
+      if (gesture.dy > 0) progress.setValue(1 - Math.min(gesture.dy, h) / h);
     },
     onPanResponderRelease: (_, gesture) => {
-      if (gesture.dy > DISMISS_THRESHOLD) {
+      if (gesture.dy > DISMISS_DISTANCE || gesture.dy > 0 && gesture.vy > DISMISS_VELOCITY) {
         onCloseRef.current();
       } else {
         Animated.timing(progress, {
           toValue: 1,
-          duration: 150,
+          duration: snapBackMs.current,
           useNativeDriver: true
         }).start();
       }
@@ -154,8 +186,8 @@ export const BottomSheet = /*#__PURE__*/memo(({
   })).current;
   if (!mounted) return null;
 
-  // Porcentaje y no píxeles: se mide contra el contenedor, que con el teclado
-  // abierto es más bajo, así que la hoja entra siempre entera.
+  // Percentage, not pixels: it is measured against the container, which is
+  // shorter with the keyboard open, so the sheet always fits entirely.
   const resolvedMaxHeight = maxHeight <= 1 ? `${maxHeight * 100}%` : maxHeight;
   const hasHeader = !!title;
   const scrolledFooter = !!footer && footerPlacement === 'scroll' && /*#__PURE__*/_jsx(View, {
@@ -176,61 +208,83 @@ export const BottomSheet = /*#__PURE__*/memo(({
     style: [styles.content, contentStyle],
     children: [children, scrolledFooter]
   });
-  return /*#__PURE__*/_jsx(Modal, {
-    visible: true,
-    transparent: true,
-    animationType: "none",
-    statusBarTranslucent: true,
-    onRequestClose: onClose,
-    children: /*#__PURE__*/_jsxs(KeyboardAvoidingView, {
-      style: styles.container,
-      behavior: Platform.OS === 'ios' ? 'padding' : 'height',
-      children: [/*#__PURE__*/_jsx(Transition, {
-        value: progress,
-        preset: "fade",
-        style: [absoluteFill, styles.backdrop],
-        children: /*#__PURE__*/_jsx(Pressable, {
-          style: absoluteFill,
-          onPress: onClose,
-          testID: "bottom-sheet-backdrop",
-          accessibilityRole: hasHeader ? undefined : 'button',
-          accessibilityLabel: hasHeader ? undefined : closeAccessibilityLabel
-        })
-      }), /*#__PURE__*/_jsx(ModalSafeAreaBoundary, {
-        children: insets => /*#__PURE__*/_jsxs(Transition, {
+  const tree = /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(KeyboardHandled, {
+      children: /*#__PURE__*/_jsxs(KeyboardAvoidingView, {
+        style: styles.container,
+        behavior: Platform.OS === 'ios' ? 'padding' : 'height',
+        children: [/*#__PURE__*/_jsx(Transition, {
           value: progress,
-          preset: "slide-up",
-          distance: SCREEN_HEIGHT,
-          testID: testID,
-          style: [styles.sheet, {
-            maxHeight: resolvedMaxHeight,
-            paddingBottom: Math.max(insets.bottom, 20)
-          }, containerStyle],
-          children: [draggable && /*#__PURE__*/_jsx(View, {
-            style: styles.handleArea,
-            testID: "bottom-sheet-handle",
-            ...panResponder.panHandlers,
-            children: /*#__PURE__*/_jsx(View, {
-              style: styles.handle
-            })
-          }), hasHeader && /*#__PURE__*/_jsxs(View, {
-            style: [styles.header, !draggable && styles.headerSpaced],
-            children: [/*#__PURE__*/_jsx(Title, {
-              style: styles.title,
-              numberOfLines: 1,
-              children: title
-            }), /*#__PURE__*/_jsx(IconButton, {
-              iconName: "close",
-              size: 24,
-              color: colors.text,
-              onPress: onClose,
-              accessibilityLabel: closeAccessibilityLabel
-            })]
-          }), body, pinnedFooter]
-        })
-      })]
+          preset: "fade",
+          style: [absoluteFill, styles.backdrop],
+          children: /*#__PURE__*/_jsx(Pressable, {
+            style: absoluteFill,
+            onPress: onClose,
+            testID: "bottom-sheet-backdrop",
+            accessibilityRole: hasHeader ? undefined : 'button',
+            accessibilityLabel: hasHeader ? undefined : closeLabel
+          })
+        }), /*#__PURE__*/_jsx(ModalSafeAreaBoundary, {
+          children: insets => /*#__PURE__*/_jsxs(Transition, {
+            value: progress,
+            preset: "slide-up",
+            distance: screenHeight,
+            testID: testID,
+            style: [styles.sheet, {
+              maxHeight: resolvedMaxHeight,
+              paddingBottom: Math.max(insets.bottom, theme.tokens.spacing.xl)
+            }, containerStyle],
+            children: [draggable &&
+            /*#__PURE__*/
+            // Decorative for screen readers: closing is already exposed by the
+            // close button (with a title) or by the backdrop (without one).
+            _jsx(View, {
+              style: styles.handleArea,
+              testID: "bottom-sheet-handle",
+              accessibilityElementsHidden: true,
+              importantForAccessibility: "no-hide-descendants",
+              ...panResponder.panHandlers,
+              children: /*#__PURE__*/_jsx(View, {
+                style: styles.handle
+              })
+            }), hasHeader && /*#__PURE__*/_jsxs(View, {
+              style: [styles.header, !draggable && styles.headerSpaced],
+              children: [/*#__PURE__*/_jsx(Title, {
+                style: styles.title,
+                numberOfLines: 1,
+                children: title
+              }), /*#__PURE__*/_jsx(IconButton, {
+                iconName: "close",
+                size: CLOSE_ICON_SIZE,
+                color: colors.text,
+                onPress: onClose,
+                accessibilityLabel: closeLabel
+              })]
+            }), body, pinnedFooter]
+          })
+        })]
+      })
     })
   });
+  if (inline) {
+    return /*#__PURE__*/_jsx(View, {
+      style: absoluteFill,
+      pointerEvents: "box-none",
+      children: tree
+    });
+  }
+  return (
+    /*#__PURE__*/
+    // closing: while the exit animation plays, no other overlay layers into it.
+    _jsx(NativeOverlay, {
+      closing: !visible,
+      transparent: true,
+      animationType: "none",
+      statusBarTranslucent: true,
+      onRequestClose: onClose,
+      children: tree
+    })
+  );
 });
 BottomSheet.displayName = 'BottomSheet';
 //# sourceMappingURL=BottomSheet.js.map