@webority-technologies/mobile 0.0.15 → 0.0.20

package/lib/commonjs/components/Banner/Banner.js

@@ -24,6 +24,11 @@ const Banner = exports.Banner = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     loading = false,
     accessibilityLabel,
     style,
+    containerStyle,
+    iconCircleStyle,
+    tintBarStyle,
+    closeButtonStyle,
+    actionButtonStyle,
     testID
   } = props;
   const theme = (0, _index.useTheme)();
@@ -77,7 +82,7 @@ const Banner = exports.Banner = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [styles.iconCircle, {
         backgroundColor: tint.bar + '22'
-      }],
+      }, iconCircleStyle],
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [styles.iconGlyph, {
           color: tint.glyphColor
@@ -104,11 +109,11 @@ const Banner = exports.Banner = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
       transform: [{
         translateY
       }]
-    }, style],
+    }, style, containerStyle],
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [styles.tintBar, {
         backgroundColor: tint.bar
-      }]
+      }, tintBarStyle]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.row,
       children: [renderIcon(), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -145,11 +150,11 @@ const Banner = exports.Banner = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
           pressed
         }) => [styles.closeBtn, {
           backgroundColor: pressed ? theme.colors.surface.pressed : 'transparent'
-        }],
+        }, closeButtonStyle],
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: {
             color: theme.colors.text.secondary,
-            fontSize: 18,
+            fontSize: theme.components.banner?.closeGlyphFontSize ?? 18,
             fontWeight: theme.typography.fontWeight.bold,
             lineHeight: 18
           },
@@ -169,7 +174,7 @@ const Banner = exports.Banner = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
             pressed
           }) => [styles.actionBtn, {
             backgroundColor: pressed ? theme.colors.surface.pressed : 'transparent'
-          }],
+          }, actionButtonStyle],
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: {
               color: isPrimary ? tint.glyphColor : theme.colors.text.secondary,
@@ -184,15 +189,86 @@ const Banner = exports.Banner = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     }) : null]
   });
   if (loading) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.SkeletonContent, {
-      loading: true,
-      mode: "auto",
-      children: rendered
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(BannerSkeleton, {
+      ...props
     });
   }
   return rendered;
 });
 Banner.displayName = 'Banner';
+
+/**
+ * Placeholder shape for `<Banner>`. Keeps the icon circle on the left and
+ * shows title + 1-2 message lines + optional action button row. Outer
+ * container retains the elevated background so the banner footprint
+ * doesn't shift when it loads.
+ */
+const BannerSkeleton = ({
+  title,
+  actions,
+  icon,
+  containerStyle,
+  style
+}) => {
+  const theme = (0, _index.useTheme)();
+  const showIcon = icon !== false;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [{
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      backgroundColor: theme.colors.background.elevated,
+      borderRadius: theme.radius.md,
+      padding: theme.spacing.md,
+      borderWidth: 1,
+      borderColor: theme.colors.border.primary
+    }, containerStyle, style],
+    accessibilityRole: "progressbar",
+    accessibilityState: {
+      busy: true
+    },
+    children: [showIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        marginRight: theme.spacing.sm
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Skeleton, {
+        shape: "circle",
+        width: 32,
+        height: 32
+      })
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        flex: 1
+      },
+      children: [title !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Skeleton, {
+        shape: "text",
+        width: "55%",
+        height: 16,
+        style: {
+          marginBottom: theme.spacing.xs
+        }
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.SkeletonText, {
+        lines: 2,
+        fontSize: 13,
+        lastLineWidth: "70%"
+      }), actions && actions.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          flexDirection: 'row',
+          marginTop: theme.spacing.sm
+        },
+        children: actions.map((_, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Skeleton, {
+          width: 72,
+          height: 28,
+          shape: "rounded",
+          style: {
+            marginRight: theme.spacing.sm
+          }
+        }, `sk-banner-action-${i}`))
+      }) : null]
+    })]
+  });
+};
+BannerSkeleton.displayName = 'BannerSkeleton';
+Banner.Skeleton = BannerSkeleton;
 const tintFor = (theme, variant) => {
   switch (variant) {
     case 'success':
@@ -228,61 +304,65 @@ const tintFor = (theme, variant) => {
       };
   }
 };
-const buildStyles = _theme => _reactNative.StyleSheet.create({
-  container: {
-    overflow: 'hidden',
-    paddingLeft: 16
-  },
-  tintBar: {
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    bottom: 0,
-    width: 4
-  },
-  row: {
-    flexDirection: 'row',
-    alignItems: 'flex-start'
-  },
-  iconWrap: {
-    marginRight: 12
-  },
-  iconCircle: {
-    width: 28,
-    height: 28,
-    borderRadius: 14,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: 12
-  },
-  iconGlyph: {
-    fontSize: 15,
-    fontWeight: '700',
-    lineHeight: 17
-  },
-  textBlock: {
-    flex: 1,
-    paddingRight: 8
-  },
-  closeBtn: {
-    width: 28,
-    height: 28,
-    borderRadius: 14,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginLeft: 4
-  },
-  actionsRow: {
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-    marginTop: 8,
-    gap: 4
-  },
-  actionBtn: {
-    paddingHorizontal: 10,
-    paddingVertical: 6,
-    borderRadius: 8
-  }
-});
+const buildStyles = theme => {
+  const iconCircleSize = theme.components.banner?.iconCircleSize ?? 28;
+  const closeButtonSize = theme.components.banner?.closeButtonSize ?? 28;
+  return _reactNative.StyleSheet.create({
+    container: {
+      overflow: 'hidden',
+      paddingLeft: theme.components.banner?.containerPaddingLeft ?? theme.spacing.md
+    },
+    tintBar: {
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      bottom: 0,
+      width: theme.components.banner?.tintBarWidth ?? 4
+    },
+    row: {
+      flexDirection: 'row',
+      alignItems: 'flex-start'
+    },
+    iconWrap: {
+      marginRight: theme.components.banner?.iconGap ?? theme.spacing.sm
+    },
+    iconCircle: {
+      width: iconCircleSize,
+      height: iconCircleSize,
+      borderRadius: theme.components.banner?.iconCircleRadius ?? iconCircleSize / 2,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginRight: theme.components.banner?.iconGap ?? theme.spacing.sm
+    },
+    iconGlyph: {
+      fontSize: theme.components.banner?.iconGlyphFontSize ?? 15,
+      fontWeight: '700',
+      lineHeight: theme.components.banner?.iconGlyphLineHeight ?? 17
+    },
+    textBlock: {
+      flex: 1,
+      paddingRight: theme.components.banner?.textBlockPaddingRight ?? theme.spacing.xs
+    },
+    closeBtn: {
+      width: closeButtonSize,
+      height: closeButtonSize,
+      borderRadius: theme.components.banner?.closeButtonRadius ?? closeButtonSize / 2,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginLeft: theme.components.banner?.closeButtonMarginLeft ?? theme.spacing.xxs ?? 4
+    },
+    actionsRow: {
+      flexDirection: 'row',
+      justifyContent: 'flex-end',
+      marginTop: theme.components.banner?.actionsRowMarginTop ?? theme.spacing.xs,
+      gap: theme.components.banner?.actionsRowGap ?? 4
+    },
+    actionBtn: {
+      paddingHorizontal: theme.components.banner?.actionButtonPaddingHorizontal ?? theme.spacing.sm,
+      paddingVertical: theme.components.banner?.actionButtonPaddingVertical ?? 6,
+      borderRadius: theme.components.banner?.actionButtonRadius ?? theme.radius.sm
+    }
+  });
+};
 var _default = exports.default = Banner;
 //# sourceMappingURL=Banner.js.map

package/lib/commonjs/components/BottomNavigation/BottomNavigation.js

@@ -11,9 +11,11 @@ var _index = require("../../theme/index.js");
 var _index2 = require("../../utils/index.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-const ICON_SIZE = 24;
-const PILL_HEIGHT = 36;
-const UNDERLINE_HEIGHT = 3;
+const DEFAULT_ICON_SIZE = 24;
+const DEFAULT_PILL_HEIGHT = 36;
+const DEFAULT_PILL_MAX_WIDTH = 120;
+const DEFAULT_PILL_INSET = 16;
+const DEFAULT_UNDERLINE_HEIGHT = 3;
 const formatBadge = value => {
   if (value === null || value === undefined || value === false) return null;
   if (value === true || value === '·') return {
@@ -62,8 +64,19 @@ const BottomNavigation = exports.BottomNavigation = /*#__PURE__*/(0, _react.forw
   const theme = (0, _index.useTheme)();
   const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const tokens = theme.components.bottomNavigation;
+  const iconSize = tokens?.iconSize ?? DEFAULT_ICON_SIZE;
+  const pillHeight = tokens?.pillHeight ?? DEFAULT_PILL_HEIGHT;
+  const pillMaxWidth = tokens?.pillMaxWidth ?? DEFAULT_PILL_MAX_WIDTH;
+  const pillInset = tokens?.pillInset ?? DEFAULT_PILL_INSET;
   const activeIndex = Math.max(0, tabs.findIndex(tab => tab.key === activeTab));
   const [tabWidth, setTabWidth] = _react.default.useState(0);
+
+  // Single Animated.Value holds the pill's absolute pixel offset (active index
+  // × tab width + half the gap between tab edge and pill edge). Folding the
+  // offset into the same value avoids creating a fresh Animated.Value +
+  // Animated.add node on every render — earlier code did that and slowly
+  // leaked addition nodes as the user pressed tabs.
   const indicatorTranslateX = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
   const iconScales = (0, _react.useRef)({});
 
@@ -74,7 +87,17 @@ const BottomNavigation = exports.BottomNavigation = /*#__PURE__*/(0, _react.forw
     }
   });
 
-  // Animate indicator when active tab changes or layout settles
+  // Pill width is intrinsic; we compute its rendered offset to keep it
+  // centered within each tab cell. The offset is applied to the pill itself
+  // (NOT folded into the shared indicatorTranslateX) so the underline indicator
+  // — which spans the full tab cell — stays aligned with the tab boundary
+  // instead of being shifted by the pill-centering math.
+  const pillWidth = tabWidth > 0 ? Math.min(tabWidth - pillInset, pillMaxWidth) : 0;
+  const pillOffset = tabWidth > 0 ? (tabWidth - pillWidth) / 2 : 0;
+
+  // Animate indicator to the active tab's cell edge. Pill mode applies the
+  // centering offset via a static `left` style below; underline mode uses
+  // this value directly.
   (0, _react.useEffect)(() => {
     if (tabWidth <= 0) return;
     _reactNative.Animated.spring(indicatorTranslateX, {
@@ -110,11 +133,6 @@ const BottomNavigation = exports.BottomNavigation = /*#__PURE__*/(0, _react.forw
     onTabPress(tab.key);
   };
   const paddingBottom = Math.max(8, insets.bottom);
-
-  // Pill width is intrinsic; we compute its rendered offset to keep it centered
-  // within each tab cell when it animates.
-  const pillWidth = tabWidth > 0 ? Math.min(tabWidth - 16, 120) : 0;
-  const pillOffset = tabWidth > 0 ? (tabWidth - pillWidth) / 2 : 0;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     ref: ref,
     testID: testID,
@@ -131,11 +149,12 @@ const BottomNavigation = exports.BottomNavigation = /*#__PURE__*/(0, _react.forw
         pointerEvents: "none",
         style: [styles.pill, {
           width: pillWidth,
-          height: PILL_HEIGHT,
+          height: pillHeight,
+          left: pillOffset,
           backgroundColor: theme.colors.primaryMuted,
           borderRadius: theme.radius.full,
           transform: [{
-            translateX: _reactNative.Animated.add(indicatorTranslateX, new _reactNative.Animated.Value(pillOffset))
+            translateX: indicatorTranslateX
           }]
         }, indicatorStyle]
       }) : null, tabs.map((tab, index) => {
@@ -167,13 +186,15 @@ const BottomNavigation = exports.BottomNavigation = /*#__PURE__*/(0, _react.forw
           testID: testID ? `${testID}-tab-${tab.key}` : undefined,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
             style: [styles.iconWrap, {
+              width: iconSize + 8,
+              height: iconSize + 8,
               transform: [{
                 scale
               }]
             }],
             children: [renderIcon({
               color,
-              size: ICON_SIZE,
+              size: iconSize,
               focused: isActive
             }), badge ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
               style: [badge.isDot ? styles.badgeDot : styles.badgePill, {
@@ -201,6 +222,7 @@ const BottomNavigation = exports.BottomNavigation = /*#__PURE__*/(0, _react.forw
         pointerEvents: "none",
         style: [styles.underline, indicatorPosition === 'top' ? styles.underlineTop : styles.underlineBottom, {
           width: tabWidth,
+          height: tokens?.underlineHeight ?? DEFAULT_UNDERLINE_HEIGHT,
           backgroundColor: theme.colors.primary,
           transform: [{
             translateX: indicatorTranslateX
@@ -231,8 +253,8 @@ const buildStyles = theme => _reactNative.StyleSheet.create({
     gap: 2
   },
   iconWrap: {
-    width: ICON_SIZE + 8,
-    height: ICON_SIZE + 8,
+    width: DEFAULT_ICON_SIZE + 8,
+    height: DEFAULT_ICON_SIZE + 8,
     alignItems: 'center',
     justifyContent: 'center',
     position: 'relative'
@@ -250,7 +272,7 @@ const buildStyles = theme => _reactNative.StyleSheet.create({
   underline: {
     position: 'absolute',
     left: 0,
-    height: UNDERLINE_HEIGHT
+    height: DEFAULT_UNDERLINE_HEIGHT
   },
   underlineBottom: {
     bottom: -6,

package/lib/commonjs/components/BottomSheet/BottomSheet.js

@@ -47,7 +47,6 @@ const BottomSheet = exports.BottomSheet = /*#__PURE__*/(0, _react.forwardRef)((p
     onAnimate,
     enablePanDownToClose = true,
     enableBackdropPress = true,
-    backdropOpacity = 0.5,
     keyboardBehavior = 'none',
     mode = 'modal',
     handleIndicatorStyle,
@@ -89,6 +88,11 @@ const BottomSheet = exports.BottomSheet = /*#__PURE__*/(0, _react.forwardRef)((p
   // synchronously on open and unmount only after the close animation finishes
   // so the slide-down stays visible.
   const [modalVisible, setModalVisible] = (0, _react.useState)(false);
+  // Inline-mode mirror of modalVisible: gates the absoluteFill backdrop +
+  // sheet tree so a closed inline sheet doesn't sit over the parent dimming
+  // it and swallowing touches. Set true on expand, cleared in
+  // markAnimationDone once the close animation completes.
+  const [inlineMounted, setInlineMounted] = (0, _react.useState)(false);
 
   // Convert a snap-point index → translateY position. -1 = closed.
   const yForIndex = (0, _react.useCallback)(idx => {
@@ -116,18 +120,20 @@ const BottomSheet = exports.BottomSheet = /*#__PURE__*/(0, _react.forwardRef)((p
   }, [onAnimate, translateY]);
   const markAnimationDone = (0, _react.useCallback)(() => {
     isAnimatingRef.current = false;
-    // If we just finished a close animation, unmount the modal wrapper.
-    if (mode === 'modal' && currentIndexShared.value < 0) {
-      setModalVisible(false);
+    // If we just finished a close animation, unmount the sheet wrapper.
+    if (currentIndexShared.value < 0) {
+      if (mode === 'modal') setModalVisible(false);else setInlineMounted(false);
     }
   }, [mode, currentIndexShared]);
   const expand = (0, _react.useCallback)(idx => {
     const target = typeof idx === 'number' ? clamp(idx, 0, resolvedSnapPoints.length - 1) : currentIndex >= 0 ? currentIndex : 0;
     const fromIndex = currentIndexShared.value;
     const to = yForIndex(target);
-    // Mount the Modal before kicking off the spring so the sheet has a
-    // host to animate into.
-    if (mode === 'modal') setModalVisible(true);
+    // Mount the host (Modal in modal mode, inline overlay in inline mode)
+    // before kicking off the spring so the sheet has somewhere to animate
+    // into. Inline mode also gates the backdrop on this so a closed sheet
+    // doesn't dim the parent.
+    if (mode === 'modal') setModalVisible(true);else setInlineMounted(true);
     // Reset translateY to the closed position so the first open animates
     // up from off-screen rather than snapping in place.
     if (fromIndex < 0) {
@@ -296,23 +302,22 @@ const BottomSheet = exports.BottomSheet = /*#__PURE__*/(0, _react.forwardRef)((p
     // status bar / notch.
     const lowerBound = keyboardOffset.value < 0 ? safeAreaTop : minTopY;
     const clamped = yWithKb < lowerBound ? lowerBound : yWithKb;
+    // Animate `top` (layout prop) instead of `transform: translateY`
+    // (visual only). Layout-prop animation under Reanimated still runs on
+    // the UI thread, but crucially the sheet's *hit-test box* moves with
+    // its visual position. With translateY the layout box stayed parked
+    // at top:0..maxSnap regardless of visual offset, so:
+    //   (a) the empty top half intercepted backdrop taps (worked around
+    //       previously via pointerEvents="box-none"), and
+    //   (b) drag gestures on the handle could be claimed by sibling
+    //       gesture handlers because the actual sheet view was effectively
+    //       hidden from the responder chain.
+    // Animating `top` collapses both problems into nothing — visible area
+    // == hit area — so we can drop the box-none hack too.
     return {
-      transform: [{
-        translateY: clamped
-      }]
+      top: clamped
     };
   });
-  const backdropStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
-    // 0 opacity when sheet is closed, full backdropOpacity at minSnap height (and above).
-    const closedAt = screenHeight;
-    const openAt = screenHeight - minSnapPoint;
-    const opacity = (0, _reactNativeReanimated.interpolate)(translateY.value, [closedAt, openAt], [0, backdropOpacity], _reactNativeReanimated.Extrapolation.CLAMP);
-    return {
-      opacity,
-      // Disable hit-test entirely when fully closed so it doesn't swallow taps.
-      pointerEvents: translateY.value >= closedAt - 0.5 ? 'none' : 'auto'
-    };
-  }, [backdropOpacity, minSnapPoint, screenHeight]);
   const isExpanded = currentIndex >= 0;
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
   const handleBackdropPress = (0, _react.useCallback)(() => {
@@ -321,46 +326,51 @@ const BottomSheet = exports.BottomSheet = /*#__PURE__*/(0, _react.forwardRef)((p
     close();
   }, [enableBackdropPress, close]);
 
-  // Don't render the heavy gesture tree at all when nothing's been opened yet.
-  // For inline mode we keep the legacy "mount on first open" behavior; modal
-  // mode is gated entirely by `modalVisible`.
-  const everOpenedRef = (0, _react.useRef)(false);
-  if (isExpanded || controlledIndex !== undefined) {
-    everOpenedRef.current = true;
-  }
-  if (mode === 'inline' && !everOpenedRef.current) {
+  // RNGH Tap gesture for the backdrop. Plain RN Pressable on a sibling of a
+  // gesture-handler/reanimated sheet doesn't fire reliably on RN 0.85 / Fabric
+  // (the gesture system swallows the touch sequence). gorhom/bottom-sheet uses
+  // the same Gesture.Tap() pattern for the same reason.
+  const backdropTapGesture = (0, _react.useMemo)(() => _reactNativeGestureHandler.Gesture.Tap().maxDuration(250).onEnd((_e, success) => {
+    'worklet';
+
+    if (!success) return;
+    (0, _reactNativeReanimated.runOnJS)(handleBackdropPress)();
+  }), [handleBackdropPress]);
+
+  // Don't render the backdrop / sheet tree when the sheet is fully closed.
+  // Inline: gated by `inlineMounted` (set in expand, cleared in
+  // markAnimationDone after close animation) — keeps an idle inline sheet
+  // from sitting over the parent and swallowing touches.
+  // Modal: gated by `modalVisible` for the same reason.
+  if (mode === 'inline' && !inlineMounted) {
     return null;
   }
   if (mode === 'modal' && !modalVisible) {
     return null;
   }
   const sheetTree = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: _reactNative.StyleSheet.absoluteFill,
-    pointerEvents: "box-none",
+    collapsable: false
+    // Modal mode: the backdrop is the modal's root, so it fills via flex.
+    // Inline mode: the backdrop overlays the parent, so it positions absolute.
+    ,
+    style: [mode === 'modal' ? styles.backdropModal : styles.backdropInline, {
+      backgroundColor: theme.colors.background.overlay
+    }],
     testID: testID,
     accessibilityViewIsModal: accessibilityViewIsModal ?? isExpanded,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
-      style: [styles.backdrop,
-      // Solid scrim — the theme `background.overlay` token bakes in alpha
-      // and double-multiplies with `backdropOpacity`, leaving the backdrop
-      // looking washed out. Standard modal scrims are solid black so the
-      // prop controls the actual final opacity.
-      {
-        backgroundColor: '#000'
-      }, backdropStyle],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-        style: _reactNative.StyleSheet.absoluteFill,
-        onPress: handleBackdropPress,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
+      gesture: backdropTapGesture,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+        style: _reactNative.StyleSheet.absoluteFillObject,
         accessibilityRole: "button",
-        accessibilityLabel: "Close bottom sheet",
-        disabled: !enableBackdropPress || !isExpanded
+        accessibilityLabel: "Close bottom sheet"
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
       gesture: panGesture,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
         // 'dialog' is a valid platform role on web/iOS; RN's typings list it as a string union
         // that varies by platform — cast keeps strict-mode happy.
-        accessibilityRole: 'dialog',
+        accessibilityRole: "alert",
         accessibilityLabel: accessibilityLabel,
         accessibilityViewIsModal: accessibilityViewIsModal ?? isExpanded,
         style: [styles.sheet, {
@@ -376,7 +386,7 @@ const BottomSheet = exports.BottomSheet = /*#__PURE__*/(0, _react.forwardRef)((p
           pointerEvents: "box-none",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
             style: [styles.handle, {
-              backgroundColor: theme.colors.border.primary
+              backgroundColor: theme.components.bottomSheet?.handleColor ?? theme.colors.border.primary
             }, handleIndicatorStyle]
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -391,14 +401,17 @@ const BottomSheet = exports.BottomSheet = /*#__PURE__*/(0, _react.forwardRef)((p
       transparent: true,
       visible: modalVisible,
       onRequestClose: close,
-      statusBarTranslucent: true,
-      presentationStyle: "overFullScreen",
+      statusBarTranslucent: true
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore — typed in RN 0.73+, the runtime prop exists on 0.71+
+      ,
+      navigationBarTranslucent: true,
       animationType: "none",
       supportedOrientations: ['portrait', 'landscape'],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureHandlerRootView, {
+      children: _reactNative.Platform.OS === 'android' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureHandlerRootView, {
         style: styles.modalRoot,
         children: sheetTree
-      })
+      }) : sheetTree
     });
   }
   return sheetTree;
@@ -418,14 +431,26 @@ const resolveSnapPoints = (points, screenH) => {
 };
 const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
 const buildStyles = _theme => _reactNative.StyleSheet.create({
-  backdrop: {
+  backdropModal: {
+    // The backdrop is the modal's root View. On Fabric, an absolute-
+    // positioned root inside RNModal has no positioned ancestor and
+    // collapses to zero size, taking the scrim with it. `flex: 1` fills
+    // the modal content area reliably.
+    flex: 1
+  },
+  backdropInline: {
+    // Inline mode: overlay the parent. Parent must be positioned for this
+    // to take effect (the consumer is expected to render BottomSheet inside
+    // a relatively-positioned container).
     ..._reactNative.StyleSheet.absoluteFillObject
   },
   sheet: {
     position: 'absolute',
     left: 0,
     right: 0,
-    top: 0,
+    // `top` is driven by the animated style (see sheetStyle). Omitted
+    // here so the static `0` doesn't fight the animated value during
+    // initial paint.
     overflow: 'hidden'
   },
   handleRow: {

package/lib/commonjs/components/Button/Button.js

@@ -235,41 +235,48 @@ const toneFor = (theme, tone) => {
       };
   }
 };
+// Every variant carries the SAME borderWidth (with a transparent colour on
+// the non-outline ones). RN's layout treats border as part of the outer box,
+// so a 1-px border on outline-only would make outline buttons 2 px wider /
+// taller than solid / ghost buttons of identical content. Painting a
+// transparent border on the others equalises the geometry without visible
+// effect. Match the value with `BUTTON_BORDER_WIDTH` everywhere.
+const BUTTON_BORDER_WIDTH = 1;
 const variantFor = (theme, variant, toneSet, disabled) => {
   switch (variant) {
     case 'solid':
       return {
         backgroundColor: disabled ? theme.colors.surface.disabled : toneSet.base,
         borderColor: 'transparent',
-        borderWidth: 0,
+        borderWidth: BUTTON_BORDER_WIDTH,
         textColor: disabled ? theme.colors.text.disabled : toneSet.on
       };
     case 'outline':
       return {
         backgroundColor: 'transparent',
         borderColor: disabled ? theme.colors.border.primary : toneSet.base,
-        borderWidth: 1,
+        borderWidth: BUTTON_BORDER_WIDTH,
         textColor: disabled ? theme.colors.text.disabled : toneSet.base
       };
     case 'ghost':
       return {
         backgroundColor: 'transparent',
         borderColor: 'transparent',
-        borderWidth: 0,
+        borderWidth: BUTTON_BORDER_WIDTH,
         textColor: disabled ? theme.colors.text.disabled : toneSet.base
       };
     case 'link':
       return {
         backgroundColor: 'transparent',
         borderColor: 'transparent',
-        borderWidth: 0,
+        borderWidth: BUTTON_BORDER_WIDTH,
         textColor: disabled ? theme.colors.text.disabled : theme.colors.text.link
       };
     default:
       return {
         backgroundColor: toneSet.base,
         borderColor: 'transparent',
-        borderWidth: 0,
+        borderWidth: BUTTON_BORDER_WIDTH,
         textColor: toneSet.on
       };
   }