@gryt/ui-native 0.4.0 → 0.6.0

package/README.md

@@ -69,7 +69,6 @@ goal, so the honest list is worth more than a claim of parity that isn't one.
 | `Button` | Press scale is kept, hover scale is dropped | The web scales to `0.96` on press and `1.03` on hover. Press maps directly onto `onPressIn`/`onPressOut`, so it is here, spring-animated and skipped when reduce-motion is on. |
 | `Button` | `hasPopup` is a prop, not inferred | The web reads `aria-haspopup`, which Base UI sets on a trigger, and skips the scale so the trigger does not drag its own popup sideways while it is being measured. React Native has no such attribute, so a menu trigger has to say so. |
 | `TextField` | Focus changes the border colour instead of drawing an outline | The web's `outline` sits outside the box and shifts nothing. React Native has no outline, and a second ring would move the layout on focus. |
-| `Progress` | Indeterminate renders as an empty track | The web sweeps a partial bar with a CSS keyframe. Doing it here needs an `Animated` loop plus a reduce-motion check, which deserves its own pass rather than a footnote. |
 | `Tooltip` | Opens on long press, closes on release, instead of appearing on hover after a delay | A phone has no hover. This is the same name on a different interaction, and it is the component where 1:1 is least achievable. An interface that needs tooltips to be usable will not survive the port. |
 | *(positioned overlays)* | The popup does not follow a trigger that moves | Floating UI keeps watching the reference element. React Native measures on demand and reports nothing afterwards, so the position is taken once, when the popup opens. If a list scrolls underneath an open menu, the menu stays put. |
 | `Popover` | `Arrow` renders nothing | Base UI positions an arrow against the popup's edge once Floating UI has settled. Here it means a rotated square, a border on two sides only, and knowing which side the popup landed on. Doable, not free, and not done. |
@@ -89,6 +88,15 @@ goal, so the honest list is worth more than a claim of parity that isn't one.
 | `Accordion` | Two glyphs instead of a rotating chevron | Same reasoning as the checkbox tick: rotating one needs a transform and a measurement, and there is no icon set here yet. |
 | `Skeleton` | Does not pulse | A loop running for the length of a request costs battery, and it is the sort of motion reduce-motion users switch off first. A flat block still reads as loading. |
 
+## Additions
+
+The other direction, and a shorter list. Something here that the web does not
+have needs the same justification as something missing.
+
+| Component | Why there is no web counterpart |
+|---|---|
+| `Sheet` | A sheet is what a phone does where the web opens a dialog or slides a drawer, and the two are not the same interaction: it is dragged, it settles at heights the user chooses, and dismissing it is a flick rather than a click on an X. Shipping the web's Dialog on a phone would be 1:1 and wrong; inventing a sheet on the web would be worse. |
+
 ## Not Node-importable
 
 The build is unbundled `tsc` output, which is what Metro wants: it resolves

package/dist/components/Drawer/Drawer.d.ts

@@ -21,13 +21,6 @@ export interface DrawerPopupProps {
     dismissible?: boolean;
     style?: StyleProp<ViewStyle>;
 }
-/**
- * Slides in from an edge, which is the one place an animation is not decoration.
- *
- * A drawer that appears without moving reads as a screen change rather than a
- * panel, so this one animates even though Collapsible and Skeleton do not.
- * Reduce-motion still turns it off: the drawer arrives in place instead.
- */
 declare function Popup({ children, side, size, dismissible, style }: DrawerPopupProps): import("react").JSX.Element;
 declare function Close({ children, style }: {
     children?: ReactNode;

package/dist/components/Drawer/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAStB,OAAO,EAAgB,KAAK,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAG/E,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAgBrD,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,iBAAS,IAAI,CAAC,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAAE,eAAe,+BAKxD;AAED,iBAAS,OAAO,CAAC,EACf,QAAQ,EACR,KAAK,EACN,EAAE;IACD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,+BAWA;AAED,iBAAS,MAAM,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,+BAErD;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;GAMG;AACH,iBAAS,KAAK,CAAC,EACb,QAAQ,EACR,IAAa,EACb,IAAU,EACV,WAAkB,EAClB,KAAK,EACN,EAAE,gBAAgB,+BAqGlB;AAED,iBAAS,KAAK,CAAC,EACb,QAAQ,EACR,KAAK,EACN,EAAE;IACD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,+BAWA;AAED,eAAO,MAAM,MAAM;;;;;;CAA0C,CAAC"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAA2C,MAAM,OAAO,CAAC;AAC/F,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAWtB,OAAO,EAAgB,KAAK,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAG/E,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAgBrD,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,iBAAS,IAAI,CAAC,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAAE,eAAe,+BAKxD;AAED,iBAAS,OAAO,CAAC,EACf,QAAQ,EACR,KAAK,EACN,EAAE;IACD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,+BAWA;AAED,iBAAS,MAAM,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,+BAErD;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAgBD,iBAAS,KAAK,CAAC,EACb,QAAQ,EACR,IAAa,EACb,IAAU,EACV,WAAkB,EAClB,KAAK,EACN,EAAE,gBAAgB,+BAiSlB;AAED,iBAAS,KAAK,CAAC,EACb,QAAQ,EACR,KAAK,EACN,EAAE;IACD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,+BAWA;AAED,eAAO,MAAM,MAAM;;;;;;CAA0C,CAAC"}

package/dist/components/Drawer/Drawer.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { createContext, useContext, useEffect } from "react";
-import { Dimensions, Modal, Pressable } from "react-native";
-import Animated, { useAnimatedStyle, useSharedValue } from "react-native-reanimated";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { Dimensions, PanResponder, Modal, Pressable } from "react-native";
+import Animated, { runOnJS, useAnimatedStyle, useSharedValue } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useReducedMotion } from "../../hooks/useReducedMotion.js";
 import { grytDrawerBleed } from "@gryt/theme";
-import { durations, springy } from "../../motion/index.js";
+import { durations, travel as travelTo } from "../../motion/index.js";
 import { useOpenState } from "../../overlay/useOpenState.js";
 import { useTheme } from "../../theme/index.js";
 const DrawerContext = createContext(null);
@@ -32,9 +33,28 @@ function Portal({ children }) {
  * panel, so this one animates even though Collapsible and Skeleton do not.
  * Reduce-motion still turns it off: the drawer arrives in place instead.
  */
+/**
+ * The scrim takes an animated opacity, so it has to be an animated component.
+ * Declared once at module scope — `createAnimatedComponent` inside a render
+ * makes a new component type every time, which remounts the subtree.
+ */
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 function Popup({ children, side = "left", size = 0.8, dismissible = true, style }) {
     const { open, setOpen } = useDrawer("Popup");
     const theme = useTheme();
+    /**
+     * The phone's own furniture, which a drawer has to stay clear of.
+     *
+     * A panel from the side is full height by definition, so its first row sits
+     * under the Dynamic Island and its last under the home indicator unless it
+     * says otherwise. A panel from the bottom only has the second problem.
+     *
+     * This is the same call GRYT-402 made for `Sheet`, and it belongs here for
+     * the same reason: every caller would otherwise write the same two lines, and
+     * the one that forgets ships a drawer with its heading under the clock. That
+     * is how the mobile shell's server switcher first looked.
+     */
+    const insets = useSafeAreaInsets();
     const reducedMotion = useReducedMotion();
     const screen = Dimensions.get("window");
     const vertical = side === "bottom";
@@ -60,40 +80,191 @@ function Popup({ children, side = "left", size = 0.8, dismissible = true, style
     // Measured against the bleed panel, so the panel's *visible* edge lands
     // exactly off-screen rather than the overhang doing it.
     const hidden = side === "right" ? panelExtent : side === "left" ? -panelExtent : panelExtent;
-    // 700ms, the web's `--gryt-dur-spring-soft`, on the overshooting curve —
-    // which is what the web uses here despite the panel travelling its own
-    // width. Matching it rather than substituting the tight curve, because the
-    // brief is 1:1 with the web and not a second opinion about it.
+    /**
+     * 700ms on the *tight* curve, and this changed on both platforms at once.
+     *
+     * It used to be the overshooting one, matching the web, with a note saying
+     * that a panel travelling its own width is exactly the case
+     * `--ease-spring-tight` was added for — and that if it ever felt wrong on a
+     * device, the web was what was wrong and both should change together.
+     *
+     * It felt wrong on a device. A full-height panel arriving with a 12%
+     * overshoot reads as aggressive rather than lively, because the overshoot is
+     * a percentage of the travel and the travel here is most of the screen. The
+     * same 12% on a 20px switch thumb is texture; on a 320pt panel it is a slam.
+     *
+     * `@gryt/ui`'s Drawer moved to `ease-spring-tight` in the same change.
+     */
+    /**
+     * Mounted for longer than it is open, so the panel can animate out.
+     *
+     * React Native's `Modal` unmounts the moment `visible` goes false, and the
+     * close was also snapping `progress` straight to 0 rather than animating it
+     * — so a dismissed drawer did not slide away, it simply stopped existing.
+     * Both halves had to change: animate the close, and stay mounted until that
+     * animation has finished.
+     */
+    const [mounted, setMounted] = useState(open);
     useEffect(() => {
+        if (open)
+            setMounted(true);
+    }, [open]);
+    useEffect(() => {
+        if (!mounted)
+            return;
+        if (reducedMotion) {
+            // eslint-disable-next-line react-hooks/immutability
+            progress.value = open ? 1 : 0;
+            if (!open)
+                setMounted(false);
+            return;
+        }
         // eslint-disable-next-line react-hooks/immutability
-        progress.value =
-            !open || reducedMotion
-                ? open
-                    ? 1
-                    : 0
-                : springy(1, { duration: durations.springSoft });
-    }, [open, progress, reducedMotion]);
-    const panelStyle = useAnimatedStyle(() => ({
-        transform: [
-            vertical
-                ? { translateY: hidden + (0 - hidden) * progress.value }
-                : { translateX: hidden + (0 - hidden) * progress.value }
-        ],
-        opacity: progress.value
+        progress.value = travelTo(open ? 1 : 0, { duration: durations.springSoft }, (finished) => {
+            "worklet";
+            // Unmount only once the panel is actually gone, and only if the
+            // animation ran to the end — an interrupted close means it was
+            // reopened, and unmounting then would take the drawer away as it
+            // arrives.
+            if (finished && !open)
+                runOnJS(setMounted)(false);
+        });
+    }, [open, mounted, progress, reducedMotion]);
+    /**
+     * How far the finger has dragged the panel away from open, in points.
+     *
+     * Separate from `progress` rather than folded into it. `progress` is
+     * animated on the spring, and a drag has to track the finger exactly —
+     * feeding a gesture through an overshooting curve makes the panel lead and
+     * lag the thumb, which reads as the drawer being slippery.
+     */
+    const drag = useSharedValue(0);
+    const panelStyle = useAnimatedStyle(() => {
+        const travel = hidden + (0 - hidden) * progress.value + drag.value;
+        return {
+            // Transform only. The panel slides; it does not fade. This used to carry
+            // `opacity: progress.value`, which the web's Popup does not — it declares
+            // `transition-transform` and nothing else — and a panel that fades as it
+            // arrives reads as a dialog rather than a drawer.
+            transform: [vertical ? { translateY: travel } : { translateX: travel }]
+        };
+    });
+    /**
+     * The scrim thins as the panel is dragged away, and does not fade in or out.
+     *
+     * A drawer opens by sliding and nothing about it fades — that is the whole
+     * distinction from a dialog, and a scrim that fades up alongside the panel
+     * puts a second, slower animation on top of the one that matters. It is up
+     * when the drawer is up.
+     *
+     * The drag term stays, and it is a different thing: pushing the panel off
+     * lightens the scrim in proportion, so a half-gone drawer does not sit under
+     * a full-strength one. The web's own rule, in its own words.
+     *
+     * The Modal unmounts once the panel has finished travelling, which is what
+     * takes the scrim with it. Earlier this was a flat colour that vanished with
+     * the Modal *before* the panel had moved, so a drawer animating out sat under
+     * a full-strength scrim for 700ms and then blinked off — that was the bug,
+     * and keeping the scrim up for exactly as long as the panel is on screen is
+     * the fix rather than fading it.
+     */
+    const scrimStyle = useAnimatedStyle(() => {
+        const dragged = extent > 0 ? Math.min(1, Math.abs(drag.value) / extent) : 0;
+        return { opacity: 1 - dragged };
+    });
+    /**
+     * Swipe to dismiss, which the web has had from Base UI's drawer primitive
+     * and this did not have at all (GRYT-395). A drawer you cannot push back is
+     * the thing a drawer is for.
+     *
+     * `PanResponder` rather than react-native-gesture-handler: the Slider proved
+     * this path works from this package's prebuilt output today, and an attempt
+     * at gesture-handler from here failed for reasons still not understood
+     * (GRYT-393). This is not the place to retry that.
+     */
+    const gesture = useRef({ extent, side, vertical, dismissible, setOpen });
+    useEffect(() => {
+        gesture.current = { extent, side, vertical, dismissible, setOpen };
+    }, [extent, side, vertical, dismissible, setOpen]);
+    /* eslint-disable react-hooks/refs */
+    const [responder] = useState(() => PanResponder.create({
+        // Claimed on move, not on start. Claiming on start would swallow every
+        // tap on the panel's own content — buttons inside a drawer would stop
+        // working, which is a far worse bug than not being able to swipe.
+        onStartShouldSetPanResponder: () => false,
+        onMoveShouldSetPanResponder: (_e, g) => {
+            if (!gesture.current.dismissible)
+                return false;
+            // Only once the drag is clearly along the axis the panel closes on,
+            // and clearly a drag rather than a slow press. Anything else belongs
+            // to whatever is inside.
+            const along = gesture.current.vertical ? g.dy : g.dx;
+            const across = gesture.current.vertical ? g.dx : g.dy;
+            return Math.abs(along) > 8 && Math.abs(along) > Math.abs(across);
+        },
+        // Once it is ours it stays ours, for the same reason the Slider needs
+        // this: the default is to grant, and a ScrollView inside the drawer
+        // would take the drag back mid-swipe.
+        onPanResponderTerminationRequest: () => false,
+        onPanResponderMove: (_e, g) => {
+            const { vertical: v, side: sd } = gesture.current;
+            const raw = v ? g.dy : g.dx;
+            // Clamped to the closing direction. Dragging a left drawer rightwards
+            // should do nothing, not tear it off its edge.
+            const closing = sd === "left" ? Math.min(0, raw) : Math.max(0, raw);
+            // eslint-disable-next-line react-hooks/immutability
+            drag.value = closing;
+        },
+        onPanResponderRelease: (_e, g) => {
+            const { vertical: v, side: sd, extent: ex } = gesture.current;
+            const moved = Math.abs(v ? g.dy : g.dx);
+            const speed = Math.abs(v ? g.vy : g.vx);
+            // Half the panel, or a flick. The velocity term is what makes a short
+            // sharp swipe work — without it you have to drag the whole way, which
+            // is the difference between a drawer and a slow puzzle.
+            const dismiss = moved > ex / 2 || speed > 0.5;
+            if (dismiss) {
+                gesture.current.setOpen(false);
+                // Left where it is: the close animation runs from here, and resetting
+                // it first would snap the panel back before it left.
+                return;
+            }
+            // eslint-disable-next-line react-hooks/immutability
+            drag.value = travelTo(0, { duration: durations.springSoft });
+        },
+        onPanResponderTerminate: () => {
+            // eslint-disable-next-line react-hooks/immutability
+            drag.value = travelTo(0, { duration: durations.springSoft });
+        }
     }));
-    return (_jsx(Modal, { visible: open, transparent: true, animationType: "none", onRequestClose: dismissible ? () => setOpen(false) : undefined, children: _jsx(Pressable, { onPress: dismissible ? () => setOpen(false) : undefined, style: { flex: 1, backgroundColor: "rgba(0,0,0,0.6)" }, children: _jsx(Animated.View, { accessibilityViewIsModal: true, style: [
+    /* eslint-enable react-hooks/refs */
+    // Cleared once the panel is closed, so the next open does not start from
+    // wherever the last swipe left it.
+    useEffect(() => {
+        if (!open) {
+            // eslint-disable-next-line react-hooks/immutability
+            drag.value = 0;
+        }
+    }, [open, drag]);
+    return (_jsx(Modal, { visible: mounted, transparent: true, animationType: "none", onRequestClose: dismissible ? () => setOpen(false) : undefined, children: _jsx(AnimatedPressable, { onPress: dismissible ? () => setOpen(false) : undefined, style: [{ flex: 1, backgroundColor: "rgba(0,0,0,0.6)" }, scrimStyle], children: _jsx(Animated.View, { accessibilityViewIsModal: true, ...responder.panHandlers, style: [
                     {
                         position: "absolute",
+                        // The overhang hangs *off* the edge the panel comes from, which
+                        // is the only direction that helps. It used to be added to the
+                        // width instead, so the panel grew inwards — 64pt more of the
+                        // screen covered, and the seam it was meant to hide still there,
+                        // because the gap opens on the entering edge and that is the edge
+                        // the extra material was not on.
                         top: side === "bottom" ? undefined : 0,
-                        bottom: 0,
-                        left: side === "right" ? undefined : 0,
-                        right: side === "left" ? undefined : 0,
+                        bottom: vertical ? -bleed : 0,
+                        left: side === "right" ? undefined : side === "left" ? -bleed : 0,
+                        right: side === "left" ? undefined : side === "right" ? -bleed : 0,
                         width: vertical ? "100%" : panelExtent,
                         height: vertical ? panelExtent : "100%",
-                        // The overhang, and the padding that puts the content back where
-                        // it would have been without it.
-                        paddingLeft: side === "right" ? bleed : 0,
-                        paddingRight: side === "left" ? bleed : 0,
+                        // Puts the content back where it would have been without the
+                        // overhang, so `size` still means what it says.
+                        paddingLeft: side === "left" ? bleed : 0,
+                        paddingRight: side === "right" ? bleed : 0,
                         paddingBottom: vertical ? bleed : 0,
                         backgroundColor: theme.color.surface,
                         borderColor: theme.color.border,
@@ -104,7 +275,16 @@ function Popup({ children, side = "left", size = 0.8, dismissible = true, style
                         borderTopRightRadius: vertical ? theme.radius.lg : 0
                     },
                     panelStyle
-                ], children: _jsx(Pressable, { onPress: () => { }, style: [{ flex: 1 }, style], children: children }) }) }) }));
+                ], children: _jsx(Pressable, { onPress: () => { }, style: [
+                        {
+                            flex: 1,
+                            // Before the caller's style, so a drawer that wants to run
+                            // under the island — a full-bleed image, say — still can.
+                            paddingTop: vertical ? 0 : insets.top,
+                            paddingBottom: insets.bottom
+                        },
+                        style
+                    ], children: children }) }) }) }));
 }
 function Close({ children, style }) {
     const { setOpen } = useDrawer("Close");

package/dist/components/Progress/Progress.d.ts

@@ -6,24 +6,18 @@ export interface ProgressProps {
     style?: StyleProp<ViewStyle>;
 }
 /**
- * Determinate only — and so is the web, which is not what this used to say.
+ * Determinate travel follows the web deliberately: 300ms on ease-out rather
+ * than the spring. A progress bar is a reading, and the spring's 12% overshoot
+ * on a jump to 100% runs past the end of the track and comes back — which reads
+ * as the job finishing, unfinishing, then finishing.
  *
- * The previous note here claimed the web's indeterminate state was a CSS
- * keyframe sweeping a bar across the track, and listed this as a parity
- * exception. It is not one. `@gryt/ui`'s Progress passes `value={null}` to
- * Base UI and styles nothing for it: there is no `@keyframes` anywhere in the
- * package, no rule for `data-indeterminate`, and the compiled stylesheet has
- * zero rules matching `gryt-progress`. An indeterminate Progress renders an
- * empty track on the web too.
- *
- * So both platforms agree, and both are missing the feature. Implementing it
- * belongs on both at once — GRYT-382 — rather than here, where it would make
- * React Native the one that behaves differently.
- *
- * The travel that *is* implemented follows the web deliberately: 300ms on
- * ease-out rather than the spring. A progress bar is a reading, and the
- * spring's 12% overshoot on a jump to 100% runs past the end of the track and
- * comes back — which reads as the job finishing, unfinishing, then finishing.
+ * Indeterminate is a partial bar sweeping the track on a loop, at
+ * `grytDurations.sweep`, from the same description the web's keyframe follows.
+ * Both were empty until GRYT-382: the web passed `value={null}` to Base UI,
+ * which leaves the indicator's width unset, and nothing styled it. This file
+ * previously called that a parity exception, which it was not — both platforms
+ * were missing the same feature, and writing it down as one-sided is what
+ * closed the question for a while.
  */
 export declare function Progress({ value, tone, style }: ProgressProps): import("react").JSX.Element;
 //# sourceMappingURL=Progress.d.ts.map

package/dist/components/Progress/Progress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIpE,MAAM,WAAW,aAAa;IAC5B,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;IACnD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAe,EAAE,KAAK,EAAE,EAAE,aAAa,+BA4BxE"}
+{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAatB,MAAM,WAAW,aAAa;IAC5B,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;IACnD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAKD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAe,EAAE,KAAK,EAAE,EAAE,aAAa,+BA0FxE"}

package/dist/components/Progress/Progress.js

@@ -1,30 +1,62 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { View } from "react-native";
+import { useEffect, useState } from "react";
+import { View, } from "react-native";
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming, } from "react-native-reanimated";
+import { grytDurations } from "@gryt/theme";
+import { useReducedMotion } from "../../hooks/useReducedMotion.js";
 import { useTheme } from "../../theme/index.js";
+/** How much of the track the sweeping bar covers. Matches the web's `width: 40%`. */
+const SWEEP_FRACTION = 0.4;
 /**
- * Determinate only — and so is the web, which is not what this used to say.
+ * Determinate travel follows the web deliberately: 300ms on ease-out rather
+ * than the spring. A progress bar is a reading, and the spring's 12% overshoot
+ * on a jump to 100% runs past the end of the track and comes back — which reads
+ * as the job finishing, unfinishing, then finishing.
  *
- * The previous note here claimed the web's indeterminate state was a CSS
- * keyframe sweeping a bar across the track, and listed this as a parity
- * exception. It is not one. `@gryt/ui`'s Progress passes `value={null}` to
- * Base UI and styles nothing for it: there is no `@keyframes` anywhere in the
- * package, no rule for `data-indeterminate`, and the compiled stylesheet has
- * zero rules matching `gryt-progress`. An indeterminate Progress renders an
- * empty track on the web too.
- *
- * So both platforms agree, and both are missing the feature. Implementing it
- * belongs on both at once — GRYT-382 — rather than here, where it would make
- * React Native the one that behaves differently.
- *
- * The travel that *is* implemented follows the web deliberately: 300ms on
- * ease-out rather than the spring. A progress bar is a reading, and the
- * spring's 12% overshoot on a jump to 100% runs past the end of the track and
- * comes back — which reads as the job finishing, unfinishing, then finishing.
+ * Indeterminate is a partial bar sweeping the track on a loop, at
+ * `grytDurations.sweep`, from the same description the web's keyframe follows.
+ * Both were empty until GRYT-382: the web passed `value={null}` to Base UI,
+ * which leaves the indicator's width unset, and nothing styled it. This file
+ * previously called that a parity exception, which it was not — both platforms
+ * were missing the same feature, and writing it down as one-sided is what
+ * closed the question for a while.
  */
 export function Progress({ value, tone = "accent", style }) {
     const theme = useTheme();
-    const clamped = value === undefined ? 0 : Math.max(0, Math.min(100, value));
-    return (_jsx(View, { accessibilityRole: "progressbar", accessibilityValue: value === undefined ? undefined : { now: clamped, min: 0, max: 100 }, style: [
+    const reducedMotion = useReducedMotion();
+    const indeterminate = value === undefined;
+    const clamped = indeterminate ? 0 : Math.max(0, Math.min(100, value));
+    // Measured rather than expressed as a percentage. The web animates
+    // `translateX` in percentages of the bar's own width, which React Native does
+    // not accept in a transform, so the same travel is computed in points from
+    // the track's own layout.
+    const [trackWidth, setTrackWidth] = useState(0);
+    const offset = useSharedValue(0);
+    const barWidth = trackWidth * SWEEP_FRACTION;
+    useEffect(() => {
+        if (!indeterminate || reducedMotion || trackWidth === 0)
+            return;
+        // Starts fully off the left edge and ends fully off the right. Leaving the
+        // track completely at both ends is what makes the loop seam invisible — a
+        // bar that restarts while still on screen flicks backwards once per pass.
+        // eslint-disable-next-line react-hooks/immutability
+        offset.value = -barWidth;
+        // eslint-disable-next-line react-hooks/immutability
+        offset.value = withRepeat(withTiming(trackWidth, {
+            duration: grytDurations.sweep,
+            easing: Easing.inOut(Easing.ease),
+        }), -1, false);
+    }, [indeterminate, reducedMotion, trackWidth, barWidth, offset]);
+    const sweepStyle = useAnimatedStyle(() => ({
+        transform: [{ translateX: offset.value }],
+    }));
+    const onLayout = (e) => {
+        const next = e.nativeEvent.layout.width;
+        // Guarded because onLayout fires on every re-render in some trees, and
+        // setting state unconditionally from it is an infinite loop.
+        setTrackWidth((prev) => (prev === next ? prev : next));
+    };
+    return (_jsx(View, { accessibilityRole: "progressbar", accessibilityValue: indeterminate ? undefined : { now: clamped, min: 0, max: 100 }, onLayout: indeterminate ? onLayout : undefined, style: [
             {
                 height: 6,
                 borderRadius: theme.radius.full,
@@ -32,10 +64,22 @@ export function Progress({ value, tone = "accent", style }) {
                 overflow: "hidden",
             },
             style,
-        ], children: _jsx(View, { style: {
+        ], children: indeterminate ? (_jsx(Animated.View, { style: [
+                {
+                    // Full width and dimmed under reduce-motion rather than a frozen
+                    // partial bar, which reads as a job that stalled 40% in. Matches
+                    // what the web's `prefers-reduced-motion` rule does.
+                    width: reducedMotion ? "100%" : barWidth,
+                    opacity: reducedMotion ? 0.4 : 1,
+                    height: "100%",
+                    borderRadius: theme.radius.full,
+                    backgroundColor: theme.scales[tone][8],
+                },
+                reducedMotion ? null : sweepStyle,
+            ] })) : (_jsx(View, { style: {
                 width: `${clamped}%`,
                 height: "100%",
                 borderRadius: theme.radius.full,
                 backgroundColor: theme.scales[tone][8],
-            } }) }));
+            } })) }));
 }

package/dist/components/Sheet/Sheet.d.ts

@@ -1,5 +1,6 @@
 import { type ReactNode } from "react";
 import { type StyleProp, type ViewStyle } from "react-native";
+import { type OpenStateProps } from "../../overlay/useOpenState.js";
 /**
  * A bottom sheet, which is the phone's modal.
  *
@@ -9,7 +10,7 @@ import { type StyleProp, type ViewStyle } from "react-native";
  * a sheet is dragged, it settles at heights the user chooses, and dismissing it
  * is a flick rather than a click on an X. Shipping the web's Dialog on a phone
  * would be 1:1 and wrong; inventing a sheet on the web would be worse. So this
- * is an addition, and it is in the parity exceptions table as one.
+ * is an addition, and the README lists it as one.
  *
  * Built on `@gorhom/bottom-sheet` rather than by hand, which is the opposite of
  * the call made for Slider and Tabs, and the reason is the shape of the
@@ -40,7 +41,7 @@ export interface SheetProviderProps {
 }
 /** Mount once, at the root. See the note above for why it is required. */
 export declare function SheetProvider({ children }: SheetProviderProps): import("react").JSX.Element;
-export interface SheetProps {
+export interface SheetProps extends OpenStateProps {
     /**
      * Heights the sheet settles at, as percentages or points.
      *
@@ -48,12 +49,20 @@ export interface SheetProps {
      * why this is its own component rather than a Drawer with a prop.
      */
     snapPoints?: (string | number)[];
-    /** Starts open. Uncontrolled; use the Trigger for the usual case. */
-    defaultOpen?: boolean;
-    onOpenChange?: (open: boolean) => void;
     children?: ReactNode;
 }
-declare function Root({ snapPoints, defaultOpen, onOpenChange, children, }: SheetProps): import("react").JSX.Element;
+/**
+ * `open` with `onOpenChange` drives it from outside; `defaultOpen` alone lets
+ * it manage itself. That is `useOpenState`, which every other overlay in this
+ * package already uses — Sheet was the one that did not, and took `defaultOpen`
+ * and a `Trigger` and nothing else.
+ *
+ * What that cost a caller: a sheet opened by something that is not a Pressable
+ * — a tab bar item, a notification, a deep link — had to be unmounted and
+ * remounted with `defaultOpen` to open it at all, which throws the body away on
+ * every open. The mobile app shell did exactly that, twice.
+ */
+declare function Root({ snapPoints, children, ...openProps }: SheetProps): import("react").JSX.Element;
 export interface SheetTriggerProps {
     children?: ReactNode;
     style?: StyleProp<ViewStyle>;

package/dist/components/Sheet/Sheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sheet.d.ts","sourceRoot":"","sources":["../../../src/components/Sheet/Sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAyB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAerF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,0EAA0E;AAC1E,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,kBAAkB,+BAE7D;AAeD,MAAM,WAAW,UAAU;IACzB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IACjC,qEAAqE;IACrE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,iBAAS,IAAI,CAAC,EACZ,UAAoB,EACpB,WAAmB,EACnB,YAAY,EACZ,QAAQ,GACT,EAAE,UAAU,+BAyBZ;AAWD,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;GAKG;AACH,iBAAS,OAAO,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,iBAAiB,+BAOtD;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,iBAAS,OAAO,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,iBAAiB,+BA+HtD;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,iBAAS,KAAK,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,eAAe,+BAOlD;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,iBAAS,KAAK,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,eAAe,+BAiBlD;AAED,eAAO,MAAM,KAAK;;;;;CAA0D,CAAC"}
+{"version":3,"file":"Sheet.d.ts","sourceRoot":"","sources":["../../../src/components/Sheet/Sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAyB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAerF,OAAO,EAAgB,KAAK,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAG/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,0EAA0E;AAC1E,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,kBAAkB,+BAE7D;AAeD,MAAM,WAAW,UAAW,SAAQ,cAAc;IAChD;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;GAUG;AACH,iBAAS,IAAI,CAAC,EACZ,UAAoB,EACpB,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,UAAU,+BAqBZ;AAWD,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;GAKG;AACH,iBAAS,OAAO,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,iBAAiB,+BAOtD;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,iBAAS,OAAO,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,iBAAiB,+BA8LtD;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,iBAAS,KAAK,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,eAAe,+BAOlD;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,iBAAS,KAAK,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,eAAe,+BAiBlD;AAED,eAAO,MAAM,KAAK;;;;;CAA0D,CAAC"}

package/dist/components/Sheet/Sheet.js

@@ -2,8 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, } from "react";
 import { Pressable, Text, View } from "react-native";
 import { BottomSheetBackdrop, BottomSheetModal, BottomSheetModalProvider, BottomSheetView, useBottomSheetTimingConfigs, } from "@gorhom/bottom-sheet";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { grytDrawerBleed } from "@gryt/theme";
 import { durations, easeSpring } from "../../motion/index.js";
+import { useOpenState } from "../../overlay/useOpenState.js";
 import { useTheme } from "../../theme/index.js";
 /** Mount once, at the root. See the note above for why it is required. */
 export function SheetProvider({ children }) {
@@ -16,21 +18,29 @@ function useSheet(part) {
         throw new Error(`Sheet.${part} must be rendered inside Sheet.`);
     return value;
 }
-function Root({ snapPoints = ["50%"], defaultOpen = false, onOpenChange, children, }) {
+/**
+ * `open` with `onOpenChange` drives it from outside; `defaultOpen` alone lets
+ * it manage itself. That is `useOpenState`, which every other overlay in this
+ * package already uses — Sheet was the one that did not, and took `defaultOpen`
+ * and a `Trigger` and nothing else.
+ *
+ * What that cost a caller: a sheet opened by something that is not a Pressable
+ * — a tab bar item, a notification, a deep link — had to be unmounted and
+ * remounted with `defaultOpen` to open it at all, which throws the body away on
+ * every open. The mobile app shell did exactly that, twice.
+ */
+function Root({ snapPoints = ["50%"], children, ...openProps }) {
     const ref = useRef(null);
-    // `present` and `dismiss` rather than mounting and unmounting by hand: the
-    // modal is always rendered and the provider decides whether it is on screen,
-    // which is what removes the mount-then-snap-on-the-next-frame dance the
-    // inline version needed.
-    const open = useCallback(() => {
-        ref.current?.present();
-        onOpenChange?.(true);
-    }, [onOpenChange]);
-    const close = useCallback(() => {
-        ref.current?.dismiss();
-    }, []);
+    const state = useOpenState(openProps);
+    const { open: isOpen, setOpen } = state;
+    // Asking for the state rather than reaching for the ref, so a controlled
+    // Sheet's parent gets the final say — `setOpen` on a controlled overlay
+    // reports and does not decide. The effect in `Content` is what actually
+    // presents, once the modal it presents exists.
+    const open = useCallback(() => setOpen(true), [setOpen]);
+    const close = useCallback(() => setOpen(false), [setOpen]);
     const context = useMemo(() => ({ open, close }), [open, close]);
-    return (_jsx(SheetContext.Provider, { value: context, children: _jsx(SheetRefContext.Provider, { value: { ref, defaultOpen, snapPoints, onOpenChange }, children: children }) }));
+    return (_jsx(SheetContext.Provider, { value: context, children: _jsx(SheetRefContext.Provider, { value: { ref, isOpen, setOpen, snapPoints }, children: children }) }));
 }
 const SheetRefContext = createContext(null);
 /**
@@ -45,6 +55,16 @@ function Trigger({ children, style }) {
 }
 function Content({ children, style }) {
     const theme = useTheme();
+    /**
+     * The phone's own furniture, which the sheet has to stay clear of at both
+     * ends.
+     *
+     * At the tall snap point the sheet reaches the top of the screen, and without
+     * `topInset` its content runs under the Dynamic Island. At the other end the
+     * home indicator sits over the last few points, and a control row ending
+     * flush with the sheet is clipped by it.
+     */
+    const insets = useSafeAreaInsets();
     const state = useContext(SheetRefContext);
     // Read here, in the normal tree, and handed back down below — see the note
     // on the provider inside the modal.
@@ -52,11 +72,33 @@ function Content({ children, style }) {
     if (!state || !sheet) {
         throw new Error("Sheet.Content must be rendered inside Sheet.");
     }
-    const { ref, defaultOpen, snapPoints, onOpenChange } = state;
+    const { ref, isOpen, setOpen, snapPoints } = state;
+    /**
+     * `present` and `dismiss` rather than mounting and unmounting by hand: the
+     * modal is always rendered and the provider decides whether it is on screen,
+     * which is what removes the mount-then-snap-on-the-next-frame dance the
+     * inline version needed.
+     *
+     * Here rather than in `Root` because `ref` is attached to the modal below,
+     * and `Root` runs before there is one.
+     *
+     * `presented` is not bookkeeping that could be dropped. A closed Sheet runs
+     * this effect once on mount with `isOpen` false, and dismissing a modal that
+     * has never been presented takes it *out* of the provider's registry — after
+     * which `present()` is a no-op and the sheet never opens again. It looks like
+     * the open prop being ignored, and it is not: it is the close that ran first.
+     */
+    const presented = useRef(false);
     useEffect(() => {
-        if (defaultOpen)
+        if (isOpen) {
+            presented.current = true;
             ref.current?.present();
-    }, [defaultOpen, ref]);
+        }
+        else if (presented.current) {
+            presented.current = false;
+            ref.current?.dismiss();
+        }
+    }, [isOpen, ref]);
     // The modal renders nothing until it is presented, so there is no invisible
     // backdrop sitting over the screen eating taps while it is closed. That was
     // a real hazard with the inline version and had to be handled by unmounting.
@@ -99,23 +141,52 @@ function Content({ children, style }) {
      * engine would be approximating an exact curve with the thing it was chosen
      * over.
      *
-     * `springSoft` — 700ms — because a sheet travels its own height, which is the
-     * case that duration was shaped for. It is what Drawer uses and for the same
-     * reason.
+     * `springSlow` — 900ms — rather than the 700 a Drawer uses, because a sheet
+     * travels further than a drawer does. A drawer crosses its own width, which
+     * is most of the screen only on a phone; a sheet at 82% comes up from off the
+     * bottom edge and covers nearly all of it. The same duration over a longer
+     * distance is a faster animation, and at 700 this arrived quickly enough to
+     * read as a snap rather than a slide.
      */
     const animationConfigs = useBottomSheetTimingConfigs({
-        duration: durations.springSoft,
+        duration: durations.springSlow,
         easing: easeSpring,
     });
     const renderBackdrop = useCallback((props) => (_jsx(BottomSheetBackdrop, { ...props, appearsOnIndex: 0, disappearsOnIndex: -1, 
         // Tracks the drag, so dragging the sheet down lightens the scrim
         // rather than holding full opacity until it snaps shut.
         opacity: 0.6, pressBehavior: "close" })), []);
-    return (_jsx(BottomSheetModal, { ref: ref, snapPoints: snapPoints, enablePanDownToClose: true, onDismiss: () => onOpenChange?.(false), animationConfigs: animationConfigs, backdropComponent: renderBackdrop, backgroundComponent: renderBackground, handleIndicatorStyle: {
+    return (_jsx(BottomSheetModal, { ref: ref, snapPoints: snapPoints, 
+        // So a sheet at 100% stops below the Dynamic Island rather than running
+        // its content under it.
+        topInset: insets.top, 
+        // Off, because `snapPoints` is the whole point of this component.
+        //
+        // gorhom v5 defaults dynamic sizing on, which measures the content and
+        // sizes the sheet to it — overriding the snap points entirely. A sheet
+        // asked for 70% whose content had no intrinsic height collapsed to the
+        // height of its own footer, which looks like the snap points being
+        // ignored because they were.
+        enableDynamicSizing: false, enablePanDownToClose: true, 
+        // A flick down or a tap on the backdrop closes it without anything in
+        // React asking, so the state has to be told. Uncontrolled, this is what
+        // makes the next `present` work; controlled, it is how the parent finds
+        // out its sheet is gone.
+        onDismiss: () => setOpen(false), animationConfigs: animationConfigs, backdropComponent: renderBackdrop, backgroundComponent: renderBackground, handleIndicatorStyle: {
             backgroundColor: theme.color.border,
             width: 36,
             height: 4,
-        }, children: _jsx(BottomSheetView, { style: [{ flex: 1, padding: theme.space(4) }, style], children: _jsx(SheetContext.Provider, { value: sheet, children: children }) }) }));
+        }, children: _jsx(BottomSheetView, { style: [
+                {
+                    flex: 1,
+                    padding: theme.space(4),
+                    // The home indicator's strip, on top of whatever padding the caller
+                    // asked for. Without it the last row of content is clipped by it —
+                    // reported as the voice controls being cut off at the bottom.
+                    paddingBottom: theme.space(4) + insets.bottom,
+                },
+                style,
+            ], children: _jsx(SheetContext.Provider, { value: sheet, children: children }) }) }));
 }
 function Close({ children, style }) {
     const sheet = useSheet("Close");

package/dist/motion/motion.d.ts

@@ -1,15 +1,26 @@
 import { type WithTimingConfig } from "react-native-reanimated";
+/**
+ * Run when the animation settles, with whether it reached the end.
+ *
+ * A worklet, like everything Reanimated calls back into — hop with `runOnJS`
+ * to touch React state. Forwarded by every helper below because the alternative
+ * is a caller reaching past them to `withTiming`, which is how the sampled
+ * curve stops being the thing that runs.
+ */
+type Settled = (finished?: boolean) => void;
 import { easeSpring, easeSpringTight } from "./easing.js";
 export { easeSpring, easeSpringTight };
 export declare const durations: {
     readonly spring: 500;
     readonly springSoft: 700;
+    readonly springSlow: 900;
     readonly fast: 150;
+    readonly sweep: 1400;
 };
 /** `withTiming` on the overshooting spring, at the standard duration. */
-export declare function springy(to: number, config?: WithTimingConfig): number;
+export declare function springy(to: number, config?: WithTimingConfig, settled?: Settled): number;
 /** `withTiming` on the critically damped spring — travel that must stay in bounds. */
-export declare function travel(to: number, config?: WithTimingConfig): number;
+export declare function travel(to: number, config?: WithTimingConfig, settled?: Settled): number;
 /** A colour or opacity change, which should not feel sprung. */
-export declare function fade(to: number, config?: WithTimingConfig): number;
+export declare function fade(to: number, config?: WithTimingConfig, settled?: Settled): number;
 //# sourceMappingURL=motion.d.ts.map

package/dist/motion/motion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"motion.d.ts","sourceRoot":"","sources":["../../src/motion/motion.ts"],"names":[],"mappings":"AAYA,OAAO,EAAsB,KAAK,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEpF,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEvD,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,CAAC;AAEvC,eAAO,MAAM,SAAS;;;;CAAgB,CAAC;AAEvC,yEAAyE;AACzE,wBAAgB,OAAO,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,gBAAgB,UAG5D;AAED,sFAAsF;AACtF,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,gBAAgB,UAG3D;AAED,gEAAgE;AAChE,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,gBAAgB,UAGzD"}
+{"version":3,"file":"motion.d.ts","sourceRoot":"","sources":["../../src/motion/motion.ts"],"names":[],"mappings":"AAYA,OAAO,EAAsB,KAAK,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEpF;;;;;;;GAOG;AACH,KAAK,OAAO,GAAG,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;AAE5C,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEvD,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,CAAC;AAEvC,eAAO,MAAM,SAAS;;;;;;CAAgB,CAAC;AAEvC,yEAAyE;AACzE,wBAAgB,OAAO,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,gBAAgB,EAAE,OAAO,CAAC,EAAE,OAAO,UAO/E;AAED,sFAAsF;AACtF,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,gBAAgB,EAAE,OAAO,CAAC,EAAE,OAAO,UAO9E;AAED,gEAAgE;AAChE,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,gBAAgB,EAAE,OAAO,CAAC,EAAE,OAAO,UAO5E"}

package/dist/motion/motion.js

@@ -16,17 +16,17 @@ import { easeSpring, easeSpringTight } from "./easing.js";
 export { easeSpring, easeSpringTight };
 export const durations = grytDurations;
 /** `withTiming` on the overshooting spring, at the standard duration. */
-export function springy(to, config) {
+export function springy(to, config, settled) {
     "worklet";
-    return withTiming(to, { duration: durations.spring, easing: easeSpring, ...config });
+    return withTiming(to, { duration: durations.spring, easing: easeSpring, ...config }, settled);
 }
 /** `withTiming` on the critically damped spring — travel that must stay in bounds. */
-export function travel(to, config) {
+export function travel(to, config, settled) {
     "worklet";
-    return withTiming(to, { duration: durations.spring, easing: easeSpringTight, ...config });
+    return withTiming(to, { duration: durations.spring, easing: easeSpringTight, ...config }, settled);
 }
 /** A colour or opacity change, which should not feel sprung. */
-export function fade(to, config) {
+export function fade(to, config, settled) {
     "worklet";
-    return withTiming(to, { duration: durations.fast, easing: Easing.out(Easing.quad), ...config });
+    return withTiming(to, { duration: durations.fast, easing: Easing.out(Easing.quad), ...config }, settled);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gryt/ui-native",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "type": "module",
   "license": "MIT",
   "description": "Gryt's design system on React Native. Same tokens as @gryt/ui, a different renderer.",
@@ -35,10 +35,11 @@
     "react-native": ">=0.76.0",
     "react-native-reanimated": ">=4.0.0",
     "@gorhom/bottom-sheet": ">=5.2.0",
-    "react-native-gesture-handler": ">=2.16.1"
+    "react-native-gesture-handler": ">=2.16.1",
+    "react-native-safe-area-context": ">=5.0.0"
   },
   "dependencies": {
-    "@gryt/theme": "^0.3.0"
+    "@gryt/theme": "^0.5.0"
   },
   "devDependencies": {
     "@gorhom/bottom-sheet": "^5.2.14",
@@ -47,6 +48,7 @@
     "react-native": "^0.76.0",
     "react-native-gesture-handler": "^2.32.0",
     "react-native-reanimated": "^4.5.1",
+    "react-native-safe-area-context": "^5.7.0",
     "vitest": "^3.0.0"
   },
   "peerDependenciesMeta": {}