@gryt/ui-native 0.9.0 → 0.11.0

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAQtB,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAClF,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AASjE,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,UAAU,CAAC;IAC7E,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAWD,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,IAAgB,EAChB,IAAe,EACf,SAAS,EACT,OAAO,EACP,KAAK,EACL,QAAgB,EAChB,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,WAAW,+BAuEb"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAQtB,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAClF,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AASjE,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,UAAU,CAAC;IAC7E,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAWD,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,IAAgB,EAChB,IAAe,EACf,SAAS,EACT,OAAO,EACP,KAAK,EACL,QAAgB,EAChB,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,WAAW,+BA8Fb"}

package/dist/components/Button/Button.js

@@ -25,7 +25,7 @@ export function Button({ children, tone = "primary", size = "medium", startIcon,
     const metrics = SIZES[size];
     const animate = !reducedMotion && !hasPopup && !disabled;
     const press = usePressScale(PRESSED_SCALE, !animate);
-    const background = tone === "primary"
+    const fill = tone === "primary"
         ? theme.color.accent
         : tone === "secondary"
             ? theme.color.secondary
@@ -34,7 +34,7 @@ export function Button({ children, tone = "primary", size = "medium", startIcon,
                 : tone === "danger"
                     ? theme.color.danger
                     : "transparent";
-    const foreground = tone === "primary"
+    const label = tone === "primary"
         ? theme.color.onAccent
         : tone === "secondary"
             ? theme.color.onSecondary
@@ -43,6 +43,23 @@ export function Button({ children, tone = "primary", size = "medium", startIcon,
                 : tone === "ghost"
                     ? theme.color.muted
                     : theme.color.text;
+    /**
+     * Disabled drops the fill rather than fading it.
+     *
+     * Every tone used to share one `opacity: 0.5`, and on the quiet tones that
+     * reads. On a filled one it does not: the accent at half opacity over a dark
+     * screen is still a saturated purple button, and nothing in it says it will
+     * not respond. That cost two taps on a Save button before I believed it was
+     * inert, having written the disabled condition myself half an hour earlier.
+     * GRYT-511, and the web's Button makes the same change in the same commit.
+     *
+     * So a disabled filled button becomes the surface it sits on, with a muted
+     * label — same size, same word, no longer claiming to be the action. Ghost
+     * has no fill to lose and its label is already muted, so the opacity below is
+     * what carries it.
+     */
+    const background = disabled && tone !== "ghost" ? theme.color.surfaceRaised : fill;
+    const foreground = disabled ? theme.color.muted : label;
     return (_jsx(Animated.View, { style: [press.style, style], children: _jsxs(Pressable, { accessibilityRole: "button", accessibilityState: { disabled: !!disabled }, disabled: disabled, onPressIn: press.onPressIn, onPressOut: press.onPressOut, style: {
                 minHeight: metrics.minHeight,
                 paddingHorizontal: metrics.paddingH,
@@ -52,7 +69,12 @@ export function Button({ children, tone = "primary", size = "medium", startIcon,
                 gap: theme.space(2),
                 borderRadius: theme.radius.full,
                 backgroundColor: background,
-                opacity: disabled ? 0.5 : 1,
+                /* Lighter than it was, because the fill swap is doing the work now.
+                   It is kept because `startIcon` and `endIcon` are the caller's
+                   elements with the caller's colours — nothing here can mute those,
+                   and an icon at full strength on a dead button is the same lie in
+                   miniature. */
+                opacity: disabled ? 0.6 : 1,
             }, ...rest, children: [startIcon, typeof children === "string" ? (_jsx(Text, { numberOfLines: 1, style: {
                         color: foreground,
                         fontSize: metrics.fontSize,

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

@@ -1,5 +1,6 @@
-import { type ReactNode } from "react";
+import { type ComponentProps, type ReactNode } from "react";
 import { type StyleProp, type ViewStyle } from "react-native";
+import { BottomSheetScrollView } from "@gorhom/bottom-sheet";
 import { type OpenStateProps } from "../../overlay/useOpenState.js";
 /**
  * A bottom sheet, which is the phone's modal.
@@ -78,7 +79,59 @@ export interface SheetContentProps {
     children?: ReactNode;
     style?: StyleProp<ViewStyle>;
 }
+/**
+ * The sheet's body, for content that fits.
+ *
+ * Use `Sheet.ScrollView` instead when it might not — this is a
+ * `BottomSheetView`, which sizes itself to its children, so a scrollable inside
+ * it has no bounded height to scroll within and simply grows until the sheet
+ * clips it.
+ *
+ * ## Why it is `height: "100%"`
+ *
+ * `flex: 1` is not enough on its own: `BottomSheetView` measures its children,
+ * so there is no bounded height for a flex child to be all of. Anything inside
+ * that wants to be the whole sheet — a column with a row pinned to the bottom,
+ * a list — collapses to the height of its own content instead.
+ *
+ * Every caller in the mobile app passed `height: "100%"` to get around that,
+ * all three for the same reason, which is a default being wrong rather than
+ * three callers being unusual. It is in the style array before `style`, so a
+ * caller can still override it exactly as it can the padding. GRYT-516.
+ *
+ * A sheet whose content is genuinely shorter than the snap point is unchanged
+ * by this: the view has no background of its own, so a full-height one draws
+ * the same as a short one.
+ */
 declare function Content({ children, style }: SheetContentProps): import("react").JSX.Element;
+export type SheetScrollViewProps = ComponentProps<typeof BottomSheetScrollView>;
+/**
+ * The sheet's body, for content that might not fit.
+ *
+ * **In place of `Sheet.Content`, not inside it.** React Native's own
+ * `ScrollView` does not scroll inside a sheet at all — the sheet's pan gesture
+ * and the scroll view's native recogniser both want the touch, and
+ * gesture-handler settles that by reference, so the two have to know about each
+ * other. `BottomSheetScrollView` is that introduction, which is the same answer
+ * `Drawer.ScrollView` reaches by the same route.
+ *
+ * Being the sheet's body rather than a child of one is what makes it a single
+ * component to reach for. Three callers in the app had assembled this by hand
+ * and all three had to get four things right together: `padding: 0` and
+ * `height: "100%"` on `Sheet.Content`, so the scrollable has a bounded height
+ * to scroll within rather than a box that grows with it; the keyboard inset;
+ * and `keyboardShouldPersistTaps`, without which the first tap on a button only
+ * dismisses the keyboard. GRYT-492.
+ *
+ * What it does not decide is the snap point. A sheet that takes a keyboard
+ * wants a tall one — at 46% the field and the button underneath it are both
+ * behind the keyboard — and how tall depends on what is in it.
+ *
+ * The padding is the same as `Sheet.Content`'s, moved to the content container
+ * where it belongs: on the scrollable itself it would clip the scrolling
+ * content instead of spacing it.
+ */
+declare function ScrollView({ children, style, contentContainerStyle, ...props }: SheetScrollViewProps): import("react").JSX.Element;
 export interface SheetCloseProps {
     children?: ReactNode;
     style?: StyleProp<ViewStyle>;
@@ -92,6 +145,7 @@ declare function Title({ children, style }: SheetTitleProps): import("react").JS
 export declare const Sheet: typeof Root & {
     Trigger: typeof Trigger;
     Content: typeof Content;
+    ScrollView: typeof ScrollView;
     Close: typeof Close;
     Title: typeof Title;
 };

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,OAAO,EAAgB,KAAK,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAI/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,+BAuNtD;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,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAyB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACrF,OAAO,EAIL,qBAAqB,EAKtB,MAAM,sBAAsB,CAAC;AAM9B,OAAO,EAAgB,KAAK,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAI/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;AAuMD,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,iBAAS,OAAO,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,iBAAiB,+BAuCtD;AAED,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAEhF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,iBAAS,UAAU,CAAC,EAClB,QAAQ,EACR,KAAK,EACL,qBAAqB,EACrB,GAAG,KAAK,EACT,EAAE,oBAAoB,+BA4BtB;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;;;;;;CAMhB,CAAC"}

package/dist/components/Sheet/Sheet.js

@@ -1,7 +1,7 @@
 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 { BottomSheetBackdrop, BottomSheetModal, BottomSheetModalProvider, BottomSheetScrollView, BottomSheetView, useBottomSheetTimingConfigs, } from "@gorhom/bottom-sheet";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { grytDrawerBleed } from "@gryt/theme";
 import { durations, easeSpringTight } from "../../motion/index.js";
@@ -54,7 +54,14 @@ function Trigger({ children, style }) {
     const sheet = useSheet("Trigger");
     return (_jsx(Pressable, { onPress: sheet.open, style: style, children: children }));
 }
-function Content({ children, style }) {
+/**
+ * Everything about presenting the modal, shared by `Content` and `ScrollView`.
+ *
+ * The two are alternatives rather than one inside the other, so both need the
+ * whole `BottomSheetModal` — the effect that presents it, the backdrop, the
+ * background and the animation curve. This is that, once.
+ */
+function useSheetModal() {
     const theme = useTheme();
     /**
      * The phone's own furniture, which the sheet has to stay clear of at both
@@ -71,7 +78,7 @@ function Content({ children, style }) {
     // on the provider inside the modal.
     const sheet = useContext(SheetContext);
     if (!state || !sheet) {
-        throw new Error("Sheet.Content must be rendered inside Sheet.");
+        throw new Error("Sheet.Content and Sheet.ScrollView must be rendered inside Sheet.");
     }
     const { ref, isOpen, setOpen, snapPoints } = state;
     /**
@@ -175,36 +182,80 @@ function Content({ children, style }) {
         // 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, 
-        // 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.
-        //
-        // `presented` first, and not as a tidy-up: the modal has already
-        // dismissed itself by the time this runs, and leaving the ref true lets
-        // the effect below dismiss it a second time. See the note on the ref.
-        onDismiss: () => {
-            presented.current = false;
-            setOpen(false);
-        }, animationConfigs: animationConfigs, backdropComponent: renderBackdrop, backgroundComponent: renderBackground, handleIndicatorStyle: {
-            backgroundColor: theme.color.border,
-            width: 36,
-            height: 4,
-        }, children: _jsx(BottomSheetView, { style: [
+    return {
+        theme,
+        insets,
+        /* Re-provided inside the modal by whichever part renders the children. See
+         * the note at the call sites — `@gorhom/portal` does not carry context. */
+        sheet,
+        modalProps: {
+            ref,
+            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.
+            //
+            // `presented` first, and not as a tidy-up: the modal has already
+            // dismissed itself by the time this runs, and leaving the ref true lets
+            // the effect below dismiss it a second time. See the note on the ref.
+            onDismiss: () => {
+                presented.current = false;
+                setOpen(false);
+            },
+            animationConfigs,
+            backdropComponent: renderBackdrop,
+            backgroundComponent: renderBackground,
+            handleIndicatorStyle: {
+                backgroundColor: theme.color.border,
+                width: 36,
+                height: 4,
+            },
+        },
+    };
+}
+/**
+ * The sheet's body, for content that fits.
+ *
+ * Use `Sheet.ScrollView` instead when it might not — this is a
+ * `BottomSheetView`, which sizes itself to its children, so a scrollable inside
+ * it has no bounded height to scroll within and simply grows until the sheet
+ * clips it.
+ *
+ * ## Why it is `height: "100%"`
+ *
+ * `flex: 1` is not enough on its own: `BottomSheetView` measures its children,
+ * so there is no bounded height for a flex child to be all of. Anything inside
+ * that wants to be the whole sheet — a column with a row pinned to the bottom,
+ * a list — collapses to the height of its own content instead.
+ *
+ * Every caller in the mobile app passed `height: "100%"` to get around that,
+ * all three for the same reason, which is a default being wrong rather than
+ * three callers being unusual. It is in the style array before `style`, so a
+ * caller can still override it exactly as it can the padding. GRYT-516.
+ *
+ * A sheet whose content is genuinely shorter than the snap point is unchanged
+ * by this: the view has no background of its own, so a full-height one draws
+ * the same as a short one.
+ */
+function Content({ children, style }) {
+    const { theme, insets, sheet, modalProps } = useSheetModal();
+    return (_jsx(BottomSheetModal, { ...modalProps, children: _jsx(BottomSheetView, { style: [
                 {
                     flex: 1,
+                    height: "100%",
                     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 —
@@ -214,6 +265,52 @@ function Content({ children, style }) {
                 style,
             ], children: _jsx(SheetContext.Provider, { value: sheet, children: children }) }) }));
 }
+/**
+ * The sheet's body, for content that might not fit.
+ *
+ * **In place of `Sheet.Content`, not inside it.** React Native's own
+ * `ScrollView` does not scroll inside a sheet at all — the sheet's pan gesture
+ * and the scroll view's native recogniser both want the touch, and
+ * gesture-handler settles that by reference, so the two have to know about each
+ * other. `BottomSheetScrollView` is that introduction, which is the same answer
+ * `Drawer.ScrollView` reaches by the same route.
+ *
+ * Being the sheet's body rather than a child of one is what makes it a single
+ * component to reach for. Three callers in the app had assembled this by hand
+ * and all three had to get four things right together: `padding: 0` and
+ * `height: "100%"` on `Sheet.Content`, so the scrollable has a bounded height
+ * to scroll within rather than a box that grows with it; the keyboard inset;
+ * and `keyboardShouldPersistTaps`, without which the first tap on a button only
+ * dismisses the keyboard. GRYT-492.
+ *
+ * What it does not decide is the snap point. A sheet that takes a keyboard
+ * wants a tall one — at 46% the field and the button underneath it are both
+ * behind the keyboard — and how tall depends on what is in it.
+ *
+ * The padding is the same as `Sheet.Content`'s, moved to the content container
+ * where it belongs: on the scrollable itself it would clip the scrolling
+ * content instead of spacing it.
+ */
+function ScrollView({ children, style, contentContainerStyle, ...props }) {
+    const { theme, insets, sheet, modalProps } = useSheetModal();
+    return (_jsx(BottomSheetModal, { ...modalProps, children: _jsx(BottomSheetScrollView
+        // The keyboard's height as a bottom inset, so what it covers can still
+        // be scrolled into what is left of the sheet.
+        , { 
+            // The keyboard's height as a bottom inset, so what it covers can still
+            // be scrolled into what is left of the sheet.
+            automaticallyAdjustKeyboardInsets: true, 
+            // Or the first tap on anything only dismisses the keyboard, and the
+            // button has to be pressed twice.
+            keyboardShouldPersistTaps: "handled", ...props, style: [{ flex: 1 }, style], contentContainerStyle: [
+                {
+                    padding: theme.space(4),
+                    // The home indicator's strip, as in `Content`.
+                    paddingBottom: theme.space(4) + insets.bottom,
+                },
+                contentContainerStyle,
+            ], children: _jsx(SheetContext.Provider, { value: sheet, children: children }) }) }));
+}
 function Close({ children, style }) {
     const sheet = useSheet("Close");
     return (_jsx(Pressable, { onPress: sheet.close, style: style, children: children }));
@@ -227,4 +324,10 @@ function Title({ children, style }) {
                 marginBottom: theme.space(2),
             }, children: children }) }));
 }
-export const Sheet = Object.assign(Root, { Trigger, Content, Close, Title });
+export const Sheet = Object.assign(Root, {
+    Trigger,
+    Content,
+    ScrollView,
+    Close,
+    Title,
+});

package/dist/index.d.ts

@@ -30,7 +30,7 @@ export { Drawer, type DrawerPopupProps, type DrawerRootProps, type DrawerSide, }
 export { NumberField, type NumberFieldProps } from "./components/NumberField/NumberField.js";
 export { OtpField, type OtpFieldProps } from "./components/OtpField/OtpField.js";
 export { ScrollArea, type ScrollAreaProps } from "./components/ScrollArea/ScrollArea.js";
-export { Sheet, type SheetCloseProps, type SheetContentProps, type SheetProps, SheetProvider, type SheetProviderProps, type SheetTitleProps, type SheetTriggerProps, } from "./components/Sheet/Sheet.js";
+export { Sheet, type SheetCloseProps, type SheetContentProps, type SheetProps, SheetProvider, type SheetProviderProps, type SheetScrollViewProps, type SheetTitleProps, type SheetTriggerProps, } from "./components/Sheet/Sheet.js";
 export { ToastProvider, useToast, type ToastOptions, type ToastSeverity, } from "./components/Toast/Toast.js";
 export { Toolbar, ToolbarSeparator, type ToolbarProps, type ToolbarSeparatorProps, } from "./components/Toolbar/Toolbar.js";
 export { AnchoredPopup, type AnchoredPopupProps } from "./overlay/AnchoredPopup.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gryt/ui-native",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "type": "module",
   "license": "MIT",
   "description": "Gryt's design system on React Native. Same tokens as @gryt/ui, a different renderer.",