panelui-native 0.81.0 → 0.83.0

package/lib/typescript/src/native/index.d.ts

@@ -89,7 +89,33 @@ interface SwiftUIModifiers {
     buttonStyle: (style: 'automatic' | 'bordered' | 'borderedProminent' | 'borderless' | 'glass' | 'glassProminent' | 'plain') => unknown;
     buttonBorderShape: (shape: 'automatic' | 'capsule' | 'roundedRectangle' | 'circle', cornerRadius?: number) => unknown;
     controlSize: (size: 'mini' | 'small' | 'regular' | 'large' | 'extraLarge') => unknown;
+    /**
+     * Paints a sheet's own surface, rather than a background behind its content.
+     *
+     * It is the only way out of the material a sheet is drawn in by default, and
+     * it reaches what an ordinary background cannot: the grabber's strip at the
+     * top and the safe-area inset at the bottom, which belong to the sheet's
+     * chrome and not to anything hosted inside it.
+     *
+     * **iOS 16.4 and up.** Below that it is inert and the sheet keeps its
+     * material — the same shape as glass being inert below iOS 26, and the same
+     * trap: indistinguishable from the prop not working. Check the OS before
+     * changing any code on a report of "the colour did nothing".
+     */
+    presentationBackground: (color: string) => unknown;
 }
 export declare function getSwiftUIModifiers(): SwiftUIModifiers | null;
+/**
+ * The Compose view modifiers — the other half of the same door.
+ *
+ * Android's toolkit has its own modifier system and its own vocabulary, so a
+ * modifier built for one platform is not a modifier the other can read. Where
+ * both are asked the same question the answers are written separately, here and
+ * above, rather than one being sent to both.
+ */
+interface ComposeModifiers {
+    background: (color: string) => unknown;
+}
+export declare function getComposeModifiers(): ComposeModifiers | null;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/native/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/native/index.ts"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,UAAU,cAAc;IACtB,IAAI,EAAE,aAAa,CAAC;QAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;QACrB;;;;;;;;;;;;WAYG;QACH,aAAa,CAAC,EAAE,OAAO,GAAG;YAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;YAAC,UAAU,CAAC,EAAE,OAAO,CAAA;SAAE,CAAC;QACvE;;;;;;;;;;;;;;;WAeG;QACH,cAAc,CAAC,EAAE,KAAK,GAAG,WAAW,GAAG,UAAU,CAAC;QAClD,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;KACxB,CAAC,CAAC;IACH;;;;OAIG;IACH,UAAU,EAAE,aAAa,CAAC;QACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;QACrB,aAAa,CAAC,EAAE,OAAO,CAAC;QACxB,KAAK,CAAC,EAAE,OAAO,CAAC;KACjB,CAAC,CAAC;IACH;;;;;OAKG;IACH,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAC/C,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAC/C,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAC/C,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,GAAG;QAC/C,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;KAC9C,CAAC;IACF,WAAW,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;CACrD;AAKD;;;;GAIG;AACH,wBAAgB,WAAW,IAAI,cAAc,GAAG,IAAI,CAgBnD;AAED,gEAAgE;AAChE,wBAAgB,WAAW,IAAI,OAAO,CAErC;AAED;;;;;;;;;;;;;GAaG;AACH,UAAU,gBAAgB;IACxB,WAAW,EAAE,CACX,KAAK,EACD,WAAW,GACX,UAAU,GACV,mBAAmB,GACnB,YAAY,GACZ,OAAO,GACP,gBAAgB,GAChB,OAAO,KACR,OAAO,CAAC;IACb,iBAAiB,EAAE,CACjB,KAAK,EAAE,WAAW,GAAG,SAAS,GAAG,kBAAkB,GAAG,QAAQ,EAC9D,YAAY,CAAC,EAAE,MAAM,KAClB,OAAO,CAAC;IACb,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,YAAY,KAAK,OAAO,CAAC;CACvF;AAKD,wBAAgB,mBAAmB,IAAI,gBAAgB,GAAG,IAAI,CAc7D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/native/index.ts"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,UAAU,cAAc;IACtB,IAAI,EAAE,aAAa,CAAC;QAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;QACrB;;;;;;;;;;;;WAYG;QACH,aAAa,CAAC,EAAE,OAAO,GAAG;YAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;YAAC,UAAU,CAAC,EAAE,OAAO,CAAA;SAAE,CAAC;QACvE;;;;;;;;;;;;;;;WAeG;QACH,cAAc,CAAC,EAAE,KAAK,GAAG,WAAW,GAAG,UAAU,CAAC;QAClD,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;KACxB,CAAC,CAAC;IACH;;;;OAIG;IACH,UAAU,EAAE,aAAa,CAAC;QACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;QACrB,aAAa,CAAC,EAAE,OAAO,CAAC;QACxB,KAAK,CAAC,EAAE,OAAO,CAAC;KACjB,CAAC,CAAC;IACH;;;;;OAKG;IACH,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAC/C,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAC/C,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAC/C,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,GAAG;QAC/C,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;KAC9C,CAAC;IACF,WAAW,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;CACrD;AAKD;;;;GAIG;AACH,wBAAgB,WAAW,IAAI,cAAc,GAAG,IAAI,CAgBnD;AAED,gEAAgE;AAChE,wBAAgB,WAAW,IAAI,OAAO,CAErC;AAED;;;;;;;;;;;;;GAaG;AACH,UAAU,gBAAgB;IACxB,WAAW,EAAE,CACX,KAAK,EACD,WAAW,GACX,UAAU,GACV,mBAAmB,GACnB,YAAY,GACZ,OAAO,GACP,gBAAgB,GAChB,OAAO,KACR,OAAO,CAAC;IACb,iBAAiB,EAAE,CACjB,KAAK,EAAE,WAAW,GAAG,SAAS,GAAG,kBAAkB,GAAG,QAAQ,EAC9D,YAAY,CAAC,EAAE,MAAM,KAClB,OAAO,CAAC;IACb,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,YAAY,KAAK,OAAO,CAAC;IACtF;;;;;;;;;;;;OAYG;IACH,sBAAsB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;CACpD;AAKD,wBAAgB,mBAAmB,IAAI,gBAAgB,GAAG,IAAI,CAc7D;AAED;;;;;;;GAOG;AACH,UAAU,gBAAgB;IACxB,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;CACxC;AAKD,wBAAgB,mBAAmB,IAAI,gBAAgB,GAAG,IAAI,CAc7D"}

package/lib/typescript/src/primitives/portal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"portal.d.ts","sourceRoot":"","sources":["../../../../src/primitives/portal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAsCf,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAgBnE;AAUD,4EAA4E;AAC5E,wBAAgB,MAAM,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,QAU3D;AAED,wDAAwD;AACxD,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAehE;AAED,2EAA2E;AAC3E,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAOvE;AAED,qDAAqD;AACrD,wBAAgB,uBAAuB,IAAI,OAAO,CAGjD;AAkBD,mFAAmF;AACnF,wBAAgB,UAAU,gCAWzB"}
+{"version":3,"file":"portal.d.ts","sourceRoot":"","sources":["../../../../src/primitives/portal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAsCf,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAgBnE;AAUD,4EAA4E;AAC5E,wBAAgB,MAAM,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,QAwB3D;AAED,wDAAwD;AACxD,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAehE;AAED,2EAA2E;AAC3E,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAOvE;AAED,qDAAqD;AACrD,wBAAgB,uBAAuB,IAAI,OAAO,CAGjD;AAkBD,mFAAmF;AACnF,wBAAgB,UAAU,gCAWzB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "panelui-native",
-  "version": "0.81.0",
+  "version": "0.83.0",
   "description": "High-performance React Native UI components for Expo. Semantic design tokens, powered by Uniwind (Tailwind v4) and Reanimated.",
   "main": "./lib/module/index.js",
   "module": "./lib/module/index.js",
@@ -149,8 +149,9 @@
     "uniwind": ">=1.0.0"
   },
   "dependencies": {
+    "@hugeicons/core-free-icons": "^4.3.0",
+    "@hugeicons/react-native": "^1.0.16",
     "clsx": "^2.1.1",
-    "lucide-react-native": "^1.28.0",
     "tailwind-merge": "^3.3.1",
     "tailwind-variants": "^3.2.2"
   },

package/src/components/bottom-sheet/index.tsx

@@ -6,6 +6,7 @@ import {
   useContext,
   useEffect,
   useMemo,
+  useRef,
   useState,
   type ComponentProps,
   type ReactElement,
@@ -23,10 +24,9 @@ import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
   Extrapolation,
   FadeIn,
+  cancelAnimation,
   interpolate,
-  FadeOut,
   SlideInDown,
-  SlideOutDown,
   runOnJS,
   useAnimatedScrollHandler,
   useAnimatedStyle,
@@ -38,7 +38,7 @@ import Animated, {
 } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { tv } from 'tailwind-variants';
-import { getNativeUI } from '../../native';
+import { getComposeModifiers, getNativeUI, getSwiftUIModifiers } from '../../native';
 import { XIcon } from '../../icons';
 import { ModalPortal } from '../../primitives/portal';
 import { Scrim } from '../../primitives/scrim';
@@ -80,10 +80,6 @@ const DISMISS_VELOCITY = 800;
  * is a new object every commit, and the sheet re-renders while it is open.
  */
 const ENTERING = SlideInDown.springify().dampingRatio(0.9).duration(420);
-// Leaving is quicker than arriving, but not by much: the sheet is still
-// crossing the whole screen, and a surface that big snapping out of existence
-// is more startling than the delay it saves is worth.
-const EXITING = SlideOutDown.springify().dampingRatio(1).duration(340);
 
 /**
  * Where a flick would come to rest if it kept decelerating — Apple's
@@ -153,6 +149,22 @@ export interface BottomSheetProps {
    * nearest of `half` / `full`.
    */
   snapPoints?: ('half' | 'full' | { fraction: number } | { height: number })[];
+  /**
+   * Paint the native sheet a solid colour instead of the material the platform
+   * draws it in by default.
+   *
+   * The platform's sheet is translucent — on iOS 26 that is Liquid Glass — and
+   * what is behind it shows through. That is right for a sheet laid over
+   * content worth glimpsing and wrong for one that is a surface of the app's
+   * own, where the app's ground shifting under it reads as a mistake.
+   *
+   * `true` uses the theme's popover surface, so the sheet matches the rest of
+   * the app in both schemes. A string paints that colour exactly.
+   *
+   * It only reaches the platform's sheet, so it does nothing without `native`.
+   * On iOS below 16.4 the sheet keeps its material.
+   */
+  nativeBackground?: boolean | string;
 }
 
 /**
@@ -162,6 +174,22 @@ export interface BottomSheetProps {
  */
 const DETENT_FRACTION = { half: 0.5, full: 0.9 } as const;
 
+/**
+ * How long to treat a dismissal *we* asked for as still in flight.
+ *
+ * A timer, because there is nothing to wait on. The platform reports a
+ * dismissal the reader performed — that report is the binding writing its new
+ * value back — but not one we asked for, where the binding already holds the
+ * value it would have written and the change is suppressed at the source. So
+ * the only sheet whose departure can be observed is the one we did not ask to
+ * leave.
+ *
+ * Comfortably past the system's own sheet transition, since the cost of being
+ * late is a present held a little longer than it needed to be, and the cost of
+ * being early is the platform dropping it and no sheet at all.
+ */
+const NATIVE_DISMISS_MS = 400;
+
 /**
  * The height the content should at least fill for a given set of detents.
  *
@@ -195,6 +223,29 @@ export function bottomSheetDetentHeight(
   return undefined;
 }
 
+/**
+ * The modifier that paints a native sheet's own surface, for whichever toolkit
+ * is drawing it — or nothing, where neither is reachable.
+ *
+ * A sheet's surface is not the background of anything hosted in it. The
+ * grabber's strip at the top and the safe-area inset at the bottom are the
+ * sheet's own chrome, and a colour put behind the content stops short of both
+ * of them — so the sheet arrives two-tone, and shifts as it moves between
+ * detents. These two reach the surface itself.
+ *
+ * The toolkits do not share a vocabulary, so the question is asked of each in
+ * its own terms rather than one answer being sent to both.
+ */
+function nativeSheetSurface(color: string): unknown[] | undefined {
+  const swiftUI = getSwiftUIModifiers();
+  if (swiftUI) return [swiftUI.presentationBackground(color)];
+
+  const compose = getComposeModifiers();
+  if (compose) return [compose.background(color)];
+
+  return undefined;
+}
+
 /**
  * Set by the root so Content knows the platform is drawing the sheet, and with
  * which detents. Null means the styled sheet renders.
@@ -202,6 +253,7 @@ export function bottomSheetDetentHeight(
 const NativeSheetContext = createContext<{
   nativeUI: NonNullable<ReturnType<typeof getNativeUI>>;
   snapPoints: BottomSheetProps['snapPoints'];
+  background: BottomSheetProps['nativeBackground'];
 } | null>(null);
 
 /**
@@ -229,6 +281,7 @@ function BottomSheetRoot({
   defaultOpen = false,
   native,
   snapPoints,
+  nativeBackground,
 }: BottomSheetProps) {
   const [internalOpen, setInternalOpen] = useState(defaultOpen);
   const isControlled = open !== undefined;
@@ -249,8 +302,8 @@ function BottomSheetRoot({
 
   const nativeUI = native ? getNativeUI() : null;
   const nativeSheet = useMemo(
-    () => (nativeUI ? { nativeUI, snapPoints } : null),
-    [nativeUI, snapPoints]
+    () => (nativeUI ? { nativeUI, snapPoints, background: nativeBackground } : null),
+    [nativeBackground, nativeUI, snapPoints]
   );
 
   return (
@@ -356,6 +409,10 @@ function BottomSheetContent({
   const insets = useSafeAreaInsets();
   const translateY = useSharedValue(0);
   const closeTint = useCSSVariable('--color-muted-foreground');
+  // Read unconditionally, used only by the native branch: the platform draws
+  // that sheet's container, so a token can only reach it as a colour handed
+  // over, never as a class.
+  const popoverSurface = useCSSVariable('--color-popover');
 
   /*
    * The scrolling body's gesture, if there is one. It is built here rather
@@ -375,15 +432,143 @@ function BottomSheetContent({
   useBackHandler(open && dismissible, close);
 
   /*
-   * The offset survives a close — the early return below sits after every
-   * hook, so this component keeps its state while the sheet is hidden. A
-   * swipe-dismiss leaves it parked a screen height down, and without this the
-   * next open would draw the sheet below the fold behind a full backdrop:
-   * a dimmed screen with nothing on it and no reachable close button.
+   * The sheet outlives `open`, and this is what keeps it alive.
+   *
+   * It used to be removed from the tree in the same commit `open` flipped,
+   * while an `exiting` layout animation was still declared on it. Reanimated
+   * then held the detached views until that spring settled — and a `duration`
+   * on a `springify()` animation is a target rather than a stop, so how long
+   * that took was not something this file decided. Reopening inside that window
+   * put a second sheet on screen with nothing coordinating the two.
+   *
+   * Now one animation owns the whole travel. Closing springs the sheet down and
+   * clears `presented` from the spring's own completion callback, so the tree
+   * comes down *after* the movement rather than during it. The backdrop is
+   * derived from the same value, so it goes with it.
+   *
+   * Reopening mid-exit is the case this really fixes: `presented` is still
+   * true, so nothing remounts and nothing new is scheduled — the spring is
+   * cancelled and the same sheet is caught on its way down.
+   */
+  const [presented, setPresented] = useState(open);
+
+  useEffect(() => {
+    if (open) {
+      cancelAnimation(translateY);
+      if (!presented) {
+        // A fresh mount starts at rest and ENTERING does the travel. Catching
+        // one that is still on screen must not reset it under the finger, so
+        // this only runs when the sheet had actually gone.
+        translateY.value = 0;
+        setPresented(true);
+        return;
+      }
+      translateY.value = reducedMotion
+        ? withTiming(0, { duration: 150 })
+        : withSpring(0, SPRING);
+      return;
+    }
+
+    if (!presented) return;
+
+    const land = (finished?: boolean) => {
+      'worklet';
+      if (finished) runOnJS(setPresented)(false);
+    };
+    translateY.value = reducedMotion
+      ? withTiming(screenHeight, { duration: 150 }, land)
+      : withSpring(screenHeight, EXIT_SPRING, land);
+  }, [open, presented, reducedMotion, screenHeight, translateY]);
+
+  /*
+   * The native sheet's own presentation queue, which the platform does not have.
+   *
+   * UIKit refuses to present a sheet while the previous one is still being
+   * dismissed, and the request is dropped rather than queued — so a close
+   * followed immediately by an open leaves nothing on screen, and the reader
+   * sees a sheet that "took a moment" or never came at all.
+   *
+   * `isPresented` is therefore driven from here rather than straight from
+   * `open`: a present that arrives during a dismissal is held, and let through
+   * once that dismissal is over.
+   *
+   * Knowing when it is over is the hard half, because it depends on who asked.
+   * A dismissal the reader performed is reported — that report is the platform
+   * writing the new value back to us. One we asked for is not: the value is
+   * already what the platform would have written, so the change is suppressed
+   * at the source and no report is ever sent. A queue that waits for one
+   * regardless waits for ever, and every present after the first is held —
+   * which is a sheet that opens once and then never again, whether the flag was
+   * raised by the reader's swipe or by a Close button inside the sheet.
+   *
+   * So the two are ended by their own means: the reader's by the report, ours
+   * by {@link NATIVE_DISMISS_MS} — and by the report as well, if one turns up,
+   * since arriving early is only ever an improvement.
    */
+  const [nativePresented, setNativePresented] = useState(open);
+  const nativeOnScreen = useRef(open);
+  const nativeDismissing = useRef(false);
+  const nativeDismissTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const openRef = useRef(open);
+  openRef.current = open;
+
+  /** The dismissal is over: let a held present through, if one is waiting. */
+  const endNativeDismissal = useCallback(() => {
+    if (nativeDismissTimer.current !== null) {
+      clearTimeout(nativeDismissTimer.current);
+      nativeDismissTimer.current = null;
+    }
+    if (!nativeDismissing.current) return;
+    nativeDismissing.current = false;
+
+    if (openRef.current) {
+      nativeOnScreen.current = true;
+      setNativePresented(true);
+    }
+  }, []);
+
   useEffect(() => {
-    if (open) translateY.value = 0;
-  }, [open, translateY]);
+    if (!nativeSheet) return;
+
+    if (open) {
+      if (nativeDismissing.current) return;
+      nativeOnScreen.current = true;
+      setNativePresented(true);
+      return;
+    }
+
+    // Only a sheet the platform still has on screen can be in the middle of
+    // leaving. One the reader already swiped away has reported itself gone.
+    if (nativeOnScreen.current) {
+      nativeOnScreen.current = false;
+      nativeDismissing.current = true;
+      if (nativeDismissTimer.current !== null) clearTimeout(nativeDismissTimer.current);
+      nativeDismissTimer.current = setTimeout(endNativeDismissal, NATIVE_DISMISS_MS);
+    }
+    setNativePresented(false);
+  }, [endNativeDismissal, nativeSheet, open]);
+
+  useEffect(
+    () => () => {
+      if (nativeDismissTimer.current !== null) clearTimeout(nativeDismissTimer.current);
+    },
+    []
+  );
+
+  const onNativeDismiss = useCallback(() => {
+    // The platform reporting that its sheet has gone. Whatever asked for it,
+    // there is nothing on screen now.
+    nativeOnScreen.current = false;
+
+    // Ours, or the reader's? A dismissal we asked for hands the queue back
+    // ahead of its window; one the reader performed is a close to report.
+    if (nativeDismissing.current) {
+      endNativeDismissal();
+      return;
+    }
+
+    if (dismissible) close();
+  }, [close, dismissible, endNativeDismissal]);
 
   const pan = useMemo(
     () =>
@@ -492,6 +677,22 @@ function BottomSheetContent({
      */
     const snapPoints =
       nativeSheet.snapPoints ?? (size === 'auto' ? undefined : [size]);
+    /*
+     * `true` means the theme's surface, and a string means itself. A token
+     * that did not resolve is dropped rather than passed on — an unresolved
+     * colour reaching the platform is a sheet painted some default, which is
+     * further from the material than leaving the material alone.
+     */
+    const requested = nativeSheet.background;
+    const surface =
+      requested === true
+        ? typeof popoverSurface === 'string'
+          ? popoverSurface
+          : undefined
+        : typeof requested === 'string'
+          ? requested
+          : undefined;
+    const modifiers = surface ? nativeSheetSurface(surface) : undefined;
     // The platform owns presentation, so this stays mounted and toggles
     // isPresented rather than unmounting on close.
     //
@@ -501,9 +702,10 @@ function BottomSheetContent({
     return (
       <Host matchContents ignoreSafeArea="keyboard" style={{ position: 'absolute' }}>
         <NativeBottomSheet
-          isPresented={open}
-          onDismiss={dismissible ? close : () => {}}
+          isPresented={nativePresented}
+          onDismiss={onNativeDismiss}
           snapPoints={snapPoints}
+          modifiers={modifiers}
         >
           <RNHostView matchContents>
             <BottomSheetContext.Provider value={context}>
@@ -536,7 +738,9 @@ function BottomSheetContent({
     );
   }
 
-  if (!open) return null;
+  // `presented`, not `open`: the sheet stays in the tree until its own exit
+  // animation has finished putting it away.
+  if (!presented) return null;
 
   return (
     <ModalPortal>
@@ -571,7 +775,6 @@ function BottomSheetContent({
              * setting is about.
              */
             entering={reducedMotion ? FadeIn.duration(150) : ENTERING}
-            exiting={reducedMotion ? FadeOut.duration(150) : EXITING}
             accessibilityViewIsModal
             className={sheetVariants({ detached, className })}
             {...props}

package/src/components/button/index.tsx

@@ -63,6 +63,12 @@ const buttonVariants = tv({
       sm: { root: 'min-h-9 min-w-9 gap-1.5 px-2.5 py-2', label: 'text-[14px]' },
       md: { root: 'min-h-11 min-w-11 px-4 py-2.5', label: 'text-[16px]' },
       lg: { root: 'min-h-12 px-6 py-2.5', label: 'text-[18px]' },
+      // A step above `lg`, for the one control a screen is built around — a
+      // compose button in a navigation panel, a primary action alone at the
+      // bottom of a sheet. It maps onto the platform's own extra-large control
+      // size under `native`, which is the size it exists to reach: below it,
+      // `large` is the biggest a platform button can be asked to be.
+      xl: { root: 'min-h-14 px-8 py-3', label: 'text-[18px]' },
       // Icon-only controls have no scalable label, so their square is stable.
       icon: { root: 'h-11 w-11 px-0' },
     },
@@ -140,10 +146,10 @@ export function useButtonGroup(): ButtonGroupContextValue | null {
  */
 const ATTACHED = 'rounded-none border-transparent shadow-none active:bg-accent';
 
-const SPINNER_SIZE = { sm: 'sm', md: 'sm', lg: 'md', icon: 'sm' } as const;
+const SPINNER_SIZE = { sm: 'sm', md: 'sm', lg: 'md', xl: 'md', icon: 'sm' } as const;
 
 /** Extra room around the styled sizes so even the compact button reaches 48dp. */
-const BUTTON_HIT_SLOP = { sm: 6, md: 2, lg: 0, icon: 2 } as const;
+const BUTTON_HIT_SLOP = { sm: 6, md: 2, lg: 0, xl: 0, icon: 2 } as const;
 
 /**
  * The theme token each variant's content reads against. Icons in the content
@@ -239,6 +245,7 @@ const NATIVE_HEIGHT: Record<NonNullable<ButtonVariantProps['size']>, number> = {
   sm: 36,
   md: 44,
   lg: 48,
+  xl: 56,
   icon: 44,
 };
 
@@ -283,6 +290,7 @@ const NATIVE_CONTROL_SIZE = {
   sm: 'small',
   md: 'regular',
   lg: 'large',
+  xl: 'extraLarge',
   icon: 'regular',
 } as const;
 

package/src/components/button-group/index.tsx

@@ -85,6 +85,7 @@ const buttonGroupVariants = tv({
       sm: { root: 'rounded-lg' },
       md: { root: 'rounded-xl' },
       lg: { root: 'rounded-xl' },
+      xl: { root: 'rounded-2xl' },
       icon: { root: 'rounded-xl' },
     },
     fullWidth: {