@gryt/ui-native 0.3.1 → 0.5.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/AlertDialog/AlertDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../../src/components/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEvF;;;;;;;;;;GAUG;AAIH,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,gBAAgB,EAAE,aAAa,CAAC,CAAC;AAE1E,iBAAS,KAAK,CAAC,KAAK,EAAE,qBAAqB,+BAE1C;AAED,MAAM,MAAM,oBAAoB,GAAG,eAAe,CAAC;AAEnD,eAAO,MAAM,WAAW;;;;gBAUw0B,CAAC;;;;;gBAAk6H,CAAC;aAAkB,CAAC;;;gBAAiS,CAAC;aAAkB,CAAC;;;gBAAkiB,CAAC;aAAkB,CAAC;;CADjoL,CAAC"}
+{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../../src/components/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEvF;;;;;;;;;;GAUG;AAIH,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,gBAAgB,EAAE,aAAa,CAAC,CAAC;AAE1E,iBAAS,KAAK,CAAC,KAAK,EAAE,qBAAqB,+BAE1C;AAED,MAAM,MAAM,oBAAoB,GAAG,eAAe,CAAC;AAEnD,eAAO,MAAM,WAAW;;;;gBAUw0B,CAAC;;;;;gBAAovK,CAAC;aAAkB,CAAC;;;gBAAiS,CAAC;aAAkB,CAAC;;;gBAAkiB,CAAC;aAAkB,CAAC;;CADn9N,CAAC"}

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,3 +1,4 @@
+import { type ReactNode } from "react";
 import { type StyleProp, type ViewStyle } from "react-native";
 export type CheckboxTone = "primary" | "secondary" | "neutral" | "danger";
 export interface CheckboxProps {
@@ -8,6 +9,11 @@ export interface CheckboxProps {
     onCheckedChange?: (checked: boolean) => void;
     disabled?: boolean;
     tone?: CheckboxTone;
+    /**
+     * Tapping this toggles the box, which is what a `<label>` does on the web.
+     * See ControlRow for why it is a prop here rather than a wrapper element.
+     */
+    label?: ReactNode;
     style?: StyleProp<ViewStyle>;
     accessibilityLabel?: string;
 }
@@ -20,5 +26,5 @@ export interface CheckboxProps {
  * react-native-svg on top. Both are decisions for whoever needs a full icon set,
  * not for a checkbox.
  */
-export declare function Checkbox({ checked: controlled, defaultChecked, indeterminate, onCheckedChange, disabled, tone, style, accessibilityLabel, }: CheckboxProps): import("react").JSX.Element;
+export declare function Checkbox({ checked: controlled, defaultChecked, indeterminate, onCheckedChange, disabled, tone, label, style, accessibilityLabel, }: CheckboxProps): import("react").JSX.Element;
 //# sourceMappingURL=Checkbox.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,EAAmB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAI/E,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE1E,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,sEAAsE;IACtE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAID;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EAAE,UAAU,EACnB,cAAsB,EACtB,aAAqB,EACrB,eAAe,EACf,QAAQ,EACR,IAAgB,EAChB,KAAK,EACL,kBAAkB,GACnB,EAAE,aAAa,+BA2Cf"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AASpE,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE1E,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,sEAAsE;IACtE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAID;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EAAE,UAAU,EACnB,cAAsB,EACtB,aAAqB,EACrB,eAAe,EACf,QAAQ,EACR,IAAgB,EAChB,KAAK,EACL,KAAK,EACL,kBAAkB,GACnB,EAAE,aAAa,+BAiFf"}

package/dist/components/Checkbox/Checkbox.js

@@ -1,7 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from "react";
-import { Pressable, Text } from "react-native";
+import { useEffect, useState } from "react";
+import { Text } from "react-native";
+import Animated, { useAnimatedStyle, useSharedValue } from "react-native-reanimated";
+import { grytScaleSteps } from "@gryt/theme";
+import { springy } from "../../motion/index.js";
 import { toneRamp, useTheme } from "../../theme/index.js";
+import { useReducedMotion } from "../../hooks/useReducedMotion.js";
+import { ControlRow } from "../internal/ControlRow.js";
 const SIZE = 20;
 /**
  * The tick is a text glyph rather than an icon.
@@ -12,32 +17,59 @@ const SIZE = 20;
  * react-native-svg on top. Both are decisions for whoever needs a full icon set,
  * not for a checkbox.
  */
-export function Checkbox({ checked: controlled, defaultChecked = false, indeterminate = false, onCheckedChange, disabled, tone = "primary", style, accessibilityLabel, }) {
+export function Checkbox({ checked: controlled, defaultChecked = false, indeterminate = false, onCheckedChange, disabled, tone = "primary", label, style, accessibilityLabel, }) {
     const theme = useTheme();
+    const reducedMotion = useReducedMotion();
     const [uncontrolled, setUncontrolled] = useState(defaultChecked);
     const checked = controlled ?? uncontrolled;
     const ramp = toneRamp(theme, tone);
     const filled = checked || indeterminate;
-    return (_jsx(Pressable, { accessibilityRole: "checkbox", accessibilityState: {
-            checked: indeterminate ? "mixed" : checked,
-            disabled: !!disabled,
-        }, accessibilityLabel: accessibilityLabel, disabled: disabled, onPress: () => {
+    /**
+     * The tick scales from 0, not from something near 1.
+     *
+     * Straight from the web's comment, and it is not a detail: the spring's
+     * overshoot is a percentage of the travel, so 0 → 1 overshoots to 1.12 and
+     * visibly springs, while 0.95 → 1 overshoots by 0.006 and does nothing at
+     * all. It used to appear instantly here, which is the same bug with the
+     * travel set to zero.
+     */
+    const tick = useSharedValue(filled ? 1 : 0);
+    useEffect(() => {
+        const to = filled ? 1 : 0;
+        // eslint-disable-next-line react-hooks/immutability
+        tick.value = reducedMotion ? to : springy(to);
+    }, [filled, tick, reducedMotion]);
+    const tickStyle = useAnimatedStyle(() => ({
+        transform: [{ scale: tick.value }],
+        opacity: tick.value,
+    }));
+    return (_jsx(ControlRow, { label: label, onPress: () => {
             const next = !checked;
             if (controlled === undefined)
                 setUncontrolled(next);
             onCheckedChange?.(next);
-        }, style: [
-            {
+        }, disabled: disabled, pressScale: grytScaleSteps.checkbox.press, accessibilityRole: "checkbox", accessibilityState: {
+            checked: indeterminate ? "mixed" : checked,
+            disabled: !!disabled,
+        }, accessibilityLabel: accessibilityLabel, style: style, children: _jsx(Animated.View, { style: {
                 width: SIZE,
                 height: SIZE,
                 borderRadius: theme.radius.sm,
                 alignItems: "center",
                 justifyContent: "center",
-                borderWidth: filled ? 0 : 1.5,
-                borderColor: theme.color.border,
-                backgroundColor: filled ? ramp[8] : "transparent",
+                // The web keeps the border at 1 always and makes it transparent when
+                // checked, rather than dropping to 0 — a border that disappears
+                // changes the box's size mid-transition.
+                borderWidth: 1,
+                borderColor: filled ? "transparent" : theme.color.border,
+                // Was `transparent`, which is not what the web does: an unchecked box
+                // is a filled surface with an outline, not a hole.
+                backgroundColor: filled ? ramp[8] : theme.color.surfaceRaised,
                 opacity: disabled ? 0.5 : 1,
-            },
-            style,
-        ], children: filled ? (_jsx(Text, { style: { color: theme.color.bg, fontSize: 13, fontWeight: "900", lineHeight: 15 }, children: indeterminate ? "–" : "✓" })) : null }));
+            }, children: _jsx(Animated.View, { style: tickStyle, children: _jsx(Text, { style: {
+                        color: theme.color.onAccent,
+                        fontSize: 13,
+                        fontWeight: "900",
+                        lineHeight: 15,
+                    }, children: indeterminate ? "–" : "✓" }) }) }) }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAML,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAgB,KAAK,cAAc,EAAE,MAAM,4BAA4B,CAAC;AA2B/E,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,MAAM,WAAW,kBAAkB;IACjC,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,kBAAkB,+BAOvD;AAED;;;;;;GAMG;AACH,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,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gEAAgE;IAChE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,iBAAS,KAAK,CAAC,EACb,QAAQ,EACR,KAAK,EACL,WAAkB,EAClB,UAAiB,GAClB,EAAE,gBAAgB,+BAwFlB;AAED;;;;;;GAMG;AACH,iBAAS,QAAQ,IAAI,IAAI,CAExB;AAED,iBAAS,KAAK,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAAE,+BAUzF;AAED,iBAAS,WAAW,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAAE,+BAO/F;AAED,iBAAS,MAAM,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAAE,+BAY1F;AAED,iBAAS,KAAK,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAAE,+BAOzF;AAED,eAAO,MAAM,MAAM;;;;;;;;;;CAUlB,CAAC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAML,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAgB,KAAK,cAAc,EAAE,MAAM,4BAA4B,CAAC;AA2B/E,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,MAAM,WAAW,kBAAkB;IACjC,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,kBAAkB,+BAOvD;AAED;;;;;;GAMG;AACH,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,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gEAAgE;IAChE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,iBAAS,KAAK,CAAC,EACb,QAAQ,EACR,KAAK,EACL,WAAkB,EAClB,UAAiB,GAClB,EAAE,gBAAgB,+BA4GlB;AAYD;;;;;;GAMG;AACH,iBAAS,QAAQ,IAAI,IAAI,CAExB;AAED,iBAAS,KAAK,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAAE,+BAUzF;AAED,iBAAS,WAAW,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAAE,+BAO/F;AAED,iBAAS,MAAM,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAAE,+BAY1F;AAED,iBAAS,KAAK,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAAE,+BAOzF;AAED,eAAO,MAAM,MAAM;;;;;;;;;;CAUlB,CAAC"}

package/dist/components/Dialog/Dialog.js

@@ -81,7 +81,16 @@ function Popup({ children, style, dismissible = true, scrollable = true, }) {
                 justifyContent: "center",
                 padding: theme.space(5),
                 backgroundColor: "rgba(0,0,0,0.6)",
-            }, children: _jsx(Pressable, { onPress: () => { }, style: { width: "100%", alignItems: "center", maxHeight: "80%" }, children: body }) }) }));
+            }, children: _jsx(View, { onStartShouldSetResponder: claimTouch, style: { width: "100%", alignItems: "center", maxHeight: "80%" }, children: body }) }) }));
+}
+/**
+ * Claim a touch that no child wanted.
+ *
+ * Declared once rather than as an inline arrow, so every Dialog is not handing
+ * the responder system a new function identity on every render.
+ */
+function claimTouch() {
+    return true;
 }
 /**
  * Not rendered.

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;AAQtB,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,+BA0ElB;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,+BA2RlB;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,9 +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 { durations, springy } from "../../motion/index.js";
+import { grytDrawerBleed } from "@gryt/theme";
+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);
@@ -31,45 +33,233 @@ 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";
     const extent = vertical ? screen.height * size : screen.width * size;
     const progress = useSharedValue(0);
-    const hidden = side === "right" ? extent : side === "left" ? -extent : extent;
-    // 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.
+    /**
+     * The panel is built `grytDrawerBleed` larger than it needs to be and hangs
+     * that much off-screen, with matching padding so the content sits where it
+     * would have.
+     *
+     * The spring overshoots — that is what makes it a spring — and it settles
+     * onto its target from both directions. A panel sized exactly to its resting
+     * place therefore shows a seam of backdrop down its edge on the undershoot,
+     * for a frame or two, every time it opens. The web has had this since the
+     * Drawer was written, as `--gryt-drawer-bleed`; this side did not.
+     *
+     * `grytDrawerBleed` rather than a local 64, and `bleedTokens.test.ts` in
+     * @gryt/ui keeps it equal to what theme.css says. Two overhangs that must
+     * match is how they stop matching.
+     */
+    const bleed = grytDrawerBleed;
+    const panelExtent = extent + bleed;
+    // 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 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 fades with the panel, and thins as it is dragged away.
+     *
+     * It was a flat `rgba(0,0,0,0.6)` that appeared and vanished with the Modal,
+     * so a drawer animating out sat under a full-strength scrim for the whole
+     * 700ms and then the scrim blinked off. The web has animated this from the
+     * start — `transition-opacity` on the same duration and curve — and it also
+     * tracks the swipe, with a comment saying not to "leave a full-strength
+     * scrim over a half-gone sheet".
+     *
+     * Both halves are here: `progress` fades it in and out, and the drag term
+     * thins it in proportion to how far the panel has been pushed off.
+     */
+    const scrimStyle = useAnimatedStyle(() => {
+        const dragged = extent > 0 ? Math.min(1, Math.abs(drag.value) / extent) : 0;
+        return { opacity: progress.value * (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,
-                        width: vertical ? "100%" : extent,
-                        height: vertical ? extent : "100%",
+                        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%",
+                        // 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,
                         borderRightWidth: side === "left" ? 1 : 0,
@@ -79,7 +269,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"}