@gryt/ui-native 0.3.1 → 0.5.0

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/Radio/Radio.d.ts

@@ -21,8 +21,16 @@ export interface RadioProps {
     value: string | number;
     disabled?: boolean;
     tone?: RadioTone;
+    /**
+     * Tapping this selects the radio, which is what a `<label>` does on the web.
+     *
+     * Radios need it more than anything else here: they come in stacks, so a
+     * 20pt target missed by a few points does not do nothing — it selects the
+     * neighbour, which is worse than no response at all.
+     */
+    label?: ReactNode;
     style?: StyleProp<ViewStyle>;
     accessibilityLabel?: string;
 }
-export declare function Radio({ value, disabled, tone, style, accessibilityLabel, }: RadioProps): import("react").JSX.Element;
+export declare function Radio({ value, disabled, tone, label, style, accessibilityLabel, }: RadioProps): import("react").JSX.Element;
 //# sourceMappingURL=Radio.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAmB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAI/E,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC;AAUvE,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EAAE,UAAU,EACjB,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,KAAK,GACN,EAAE,eAAe,+BAsBjB;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAID,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,QAAQ,EACR,IAAgB,EAChB,KAAK,EACL,kBAAkB,GACnB,EAAE,UAAU,+BA0CZ"}
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvF,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AASpE,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC;AAUvE,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EAAE,UAAU,EACjB,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,KAAK,GACN,EAAE,eAAe,+BAsBjB;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAID,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,QAAQ,EACR,IAAgB,EAChB,KAAK,EACL,KAAK,EACL,kBAAkB,GACnB,EAAE,UAAU,+BAoEZ"}

package/dist/components/Radio/Radio.js

@@ -1,7 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useState } from "react";
-import { Pressable, View } from "react-native";
+import { createContext, useContext, useEffect, useState } from "react";
+import { View } from "react-native";
+import Animated, { useAnimatedStyle, useSharedValue } from "react-native-reanimated";
+import { grytScaleSteps } from "@gryt/theme";
+import { useReducedMotion } from "../../hooks/useReducedMotion.js";
+import { springy } from "../../motion/index.js";
 import { toneRamp, useTheme } from "../../theme/index.js";
+import { ControlRow } from "../internal/ControlRow.js";
 const RadioGroupContext = createContext(null);
 /**
  * The group holds the value, which is the part a radio cannot do alone.
@@ -24,30 +29,49 @@ export function RadioGroup({ value: controlled, defaultValue, onValueChange, dis
         }, children: _jsx(View, { accessibilityRole: "radiogroup", style: style, children: children }) }));
 }
 const SIZE = 20;
-export function Radio({ value, disabled, tone = "primary", style, accessibilityLabel, }) {
+export function Radio({ value, disabled, tone = "primary", label, style, accessibilityLabel, }) {
     const theme = useTheme();
+    const reducedMotion = useReducedMotion();
     const group = useContext(RadioGroupContext);
     if (!group)
         throw new Error("Radio must be rendered inside a RadioGroup.");
     const selected = group.value === value;
     const isDisabled = disabled || group.disabled;
     const ramp = toneRamp(theme, tone);
-    return (_jsx(Pressable, { accessibilityRole: "radio", accessibilityState: { checked: selected, disabled: !!isDisabled }, accessibilityLabel: accessibilityLabel, disabled: isDisabled, onPress: () => group.setValue(value), style: [
-            {
+    // Scales from 0 for the same reason the checkbox tick does — see the comment
+    // there. The dot used to be mounted and unmounted, which is that transition
+    // with the duration set to nothing.
+    const dot = useSharedValue(selected ? 1 : 0);
+    useEffect(() => {
+        const to = selected ? 1 : 0;
+        // eslint-disable-next-line react-hooks/immutability
+        dot.value = reducedMotion ? to : springy(to);
+    }, [selected, dot, reducedMotion]);
+    const dotStyle = useAnimatedStyle(() => ({
+        transform: [{ scale: dot.value }],
+        opacity: dot.value,
+    }));
+    return (_jsx(ControlRow, { label: label, onPress: () => group.setValue(value), disabled: isDisabled, pressScale: grytScaleSteps.radio.press, accessibilityRole: "radio", accessibilityState: { checked: selected, disabled: !!isDisabled }, accessibilityLabel: accessibilityLabel, style: style, children: _jsx(View, { style: {
                 width: SIZE,
                 height: SIZE,
                 borderRadius: SIZE / 2,
                 alignItems: "center",
                 justifyContent: "center",
-                borderWidth: 1.5,
+                // 1, matching the web. It was 1.5, which reads heavier than the
+                // checkbox sitting next to it in the same form.
+                borderWidth: 1,
                 borderColor: selected ? ramp[8] : theme.color.border,
+                // The web fills the circle and outlines it; only the dot is new when
+                // it is selected.
+                backgroundColor: theme.color.surfaceRaised,
                 opacity: isDisabled ? 0.5 : 1,
-            },
-            style,
-        ], children: selected ? (_jsx(View, { style: {
-                width: SIZE / 2,
-                height: SIZE / 2,
-                borderRadius: SIZE / 4,
-                backgroundColor: ramp[8],
-            } })) : null }));
+            }, children: _jsx(Animated.View, { style: [
+                    {
+                        width: SIZE / 2,
+                        height: SIZE / 2,
+                        borderRadius: SIZE / 4,
+                        backgroundColor: ramp[8],
+                    },
+                    dotStyle,
+                ] }) }) }));
 }

package/dist/components/ScrollArea/ScrollArea.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import { type ReactNode } from "react";
 import { type ScrollViewProps, type StyleProp, type ViewStyle } from "react-native";
 export interface ScrollAreaProps extends Omit<ScrollViewProps, "style"> {
     children?: ReactNode;
@@ -15,8 +15,10 @@ export interface ScrollAreaProps extends Omit<ScrollViewProps, "style"> {
  * device. So the component stays for call-site parity and does almost nothing,
  * which is the honest version.
  *
- * Its one job is defaulting the indicator off, since the web version hides the
- * native scrollbar too.
+ * Its one job was defaulting the indicator off, since the web version hides the
+ * native scrollbar too. It has a second now: it publishes a drag lock, so a
+ * control inside it can hold it still while it is being dragged. See
+ * internal/dragLock — a Slider is unusable in a scrolling screen without it.
  */
-export declare function ScrollArea({ children, horizontal, style, contentStyle, showsVerticalScrollIndicator, showsHorizontalScrollIndicator, ...rest }: ScrollAreaProps): import("react").JSX.Element;
+export declare function ScrollArea({ children, horizontal, style, contentStyle, showsVerticalScrollIndicator, showsHorizontalScrollIndicator, scrollEnabled, ...rest }: ScrollAreaProps): import("react").JSX.Element;
 //# sourceMappingURL=ScrollArea.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAc,KAAK,eAAe,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEhG,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC;IACrE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACrC;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,UAAkB,EAClB,KAAK,EACL,YAAY,EACZ,4BAAoC,EACpC,8BAAsC,EACtC,GAAG,IAAI,EACR,EAAE,eAAe,+BAajB"}
+{"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,EAAc,KAAK,eAAe,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIhG,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC;IACrE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACrC;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,UAAkB,EAClB,KAAK,EACL,YAAY,EACZ,4BAAoC,EACpC,8BAAsC,EACtC,aAAa,EACb,GAAG,IAAI,EACR,EAAE,eAAe,+BAgCjB"}

package/dist/components/ScrollArea/ScrollArea.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from "react";
 import { ScrollView } from "react-native";
+import { DragLockContext } from "../internal/dragLock.js";
 /**
  * A thin pass over ScrollView.
  *
@@ -9,9 +11,22 @@ import { ScrollView } from "react-native";
  * device. So the component stays for call-site parity and does almost nothing,
  * which is the honest version.
  *
- * Its one job is defaulting the indicator off, since the web version hides the
- * native scrollbar too.
+ * Its one job was defaulting the indicator off, since the web version hides the
+ * native scrollbar too. It has a second now: it publishes a drag lock, so a
+ * control inside it can hold it still while it is being dragged. See
+ * internal/dragLock — a Slider is unusable in a scrolling screen without it.
  */
-export function ScrollArea({ children, horizontal = false, style, contentStyle, showsVerticalScrollIndicator = false, showsHorizontalScrollIndicator = false, ...rest }) {
-    return (_jsx(ScrollView, { horizontal: horizontal, style: style, contentContainerStyle: contentStyle, showsVerticalScrollIndicator: showsVerticalScrollIndicator, showsHorizontalScrollIndicator: showsHorizontalScrollIndicator, ...rest, children: children }));
+export function ScrollArea({ children, horizontal = false, style, contentStyle, showsVerticalScrollIndicator = false, showsHorizontalScrollIndicator = false, scrollEnabled, ...rest }) {
+    const [locks, setLocks] = useState(0);
+    // Counted rather than a boolean. Two controls can overlap in principle — a
+    // drag interrupted by a second one starting — and the first to finish would
+    // otherwise unlock the list while the second is still going.
+    const lock = useCallback(() => setLocks((n) => n + 1), []);
+    const unlock = useCallback(() => setLocks((n) => Math.max(0, n - 1)), []);
+    const dragLock = useMemo(() => ({ locked: locks > 0, lock, unlock }), [locks, lock, unlock]);
+    return (_jsx(DragLockContext.Provider, { value: dragLock, children: _jsx(ScrollView, { horizontal: horizontal, style: style, contentContainerStyle: contentStyle, showsVerticalScrollIndicator: showsVerticalScrollIndicator, showsHorizontalScrollIndicator: showsHorizontalScrollIndicator, 
+            // Only overridden while something is actually dragging, so a caller
+            // that passes `scrollEnabled={false}` still gets a list that never
+            // scrolls.
+            scrollEnabled: scrollEnabled === false ? false : locks === 0, ...rest, children: children }) }));
 }

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

@@ -0,0 +1,99 @@
+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.
+ *
+ * `@gryt/ui` has no counterpart, and that is deliberate rather than an
+ * oversight to be corrected later. 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:
+ * 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 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
+ * problem. Those were shallow and Gryt-specific — a press scale is four lines
+ * and no library will give you the right one. A sheet is deep and generic:
+ * velocity-based dismiss, snap points, keyboard avoidance, a backdrop whose
+ * opacity tracks the drag, and the handoff between dragging the sheet and
+ * scrolling the content inside it. None of that is about Gryt and all of it is
+ * months of edge cases.
+ *
+ * The library supplies behaviour only. Every colour, radius and dimension below
+ * comes from the theme.
+ *
+ * **`SheetProvider` has to be mounted above anything that renders a Sheet**,
+ * next to `ToastProvider` and `TooltipProvider`. That is not ceremony: this is
+ * `BottomSheetModal`, not `BottomSheet`, and the difference is where the sheet
+ * is anchored.
+ *
+ * `BottomSheet` positions itself inside whatever container it is rendered in.
+ * Written inline in a screen, as this was first, it anchors to its slot in the
+ * layout — so it appeared partway down the page with the content behind it
+ * showing through, and read as entering from the top. `BottomSheetModal`
+ * portals to the provider instead, which sits at the app root, so it is always
+ * anchored to the bottom of the screen no matter where the call site is.
+ */
+export interface SheetProviderProps {
+    children?: ReactNode;
+}
+/** 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 extends OpenStateProps {
+    /**
+     * Heights the sheet settles at, as percentages or points.
+     *
+     * The web has no equivalent concept — a dialog is one size — which is part of
+     * why this is its own component rather than a Drawer with a prop.
+     */
+    snapPoints?: (string | number)[];
+    children?: ReactNode;
+}
+/**
+ * `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>;
+}
+/**
+ * A Pressable, like every other trigger in this package — which means its
+ * children have to be plain visual content. Nesting a Button inside one gives
+ * the inner pressable the touch and the sheet never opens, silently. Same
+ * footgun the overlay triggers already carry.
+ */
+declare function Trigger({ children, style }: SheetTriggerProps): import("react").JSX.Element;
+export interface SheetContentProps {
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Content({ children, style }: SheetContentProps): import("react").JSX.Element;
+export interface SheetCloseProps {
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Close({ children, style }: SheetCloseProps): import("react").JSX.Element;
+export interface SheetTitleProps {
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Title({ children, style }: SheetTitleProps): import("react").JSX.Element;
+export declare const Sheet: typeof Root & {
+    Trigger: typeof Trigger;
+    Content: typeof Content;
+    Close: typeof Close;
+    Title: typeof Title;
+};
+export {};
+//# sourceMappingURL=Sheet.d.ts.map

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

@@ -0,0 +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;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,+BA2LtD;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

@@ -0,0 +1,201 @@
+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 }) {
+    return _jsx(BottomSheetModalProvider, { children: children });
+}
+const SheetContext = createContext(null);
+function useSheet(part) {
+    const value = useContext(SheetContext);
+    if (!value)
+        throw new Error(`Sheet.${part} must be rendered inside Sheet.`);
+    return value;
+}
+/**
+ * `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);
+    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, isOpen, setOpen, snapPoints }, children: children }) }));
+}
+const SheetRefContext = createContext(null);
+/**
+ * A Pressable, like every other trigger in this package — which means its
+ * children have to be plain visual content. Nesting a Button inside one gives
+ * the inner pressable the touch and the sheet never opens, silently. Same
+ * footgun the overlay triggers already carry.
+ */
+function Trigger({ children, style }) {
+    const sheet = useSheet("Trigger");
+    return (_jsx(Pressable, { onPress: sheet.open, style: style, children: children }));
+}
+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.
+    const sheet = useContext(SheetContext);
+    if (!state || !sheet) {
+        throw new Error("Sheet.Content must be rendered inside Sheet.");
+    }
+    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 (isOpen) {
+            presented.current = true;
+            ref.current?.present();
+        }
+        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.
+    /**
+     * The sheet's own background, drawn here rather than left to `backgroundStyle`.
+     *
+     * Two things needed fixing and one prop could not do either.
+     *
+     * `backgroundStyle` paints a view sized exactly to the sheet, and the
+     * container `style` sits outside the rounded corners — so a border on the
+     * container drew a straight line across the full width above the rounded top,
+     * which is the stray line that was reported.
+     *
+     * And the spring overshoots. A sheet sized exactly to its snap point travels
+     * past it and leaves a band of backdrop along the bottom of the screen for a
+     * frame or two. So this hangs `grytDrawerBleed` below the bottom edge, which
+     * is the same trick and the same distance the web Drawer uses — its comment
+     * calls the artefact "a seam of backdrop down the edge".
+     */
+    const renderBackground = useCallback(({ style: bgStyle }) => (_jsx(View, { pointerEvents: "none", style: [
+            bgStyle,
+            {
+                backgroundColor: theme.color.surface,
+                borderTopLeftRadius: theme.radius.xl,
+                borderTopRightRadius: theme.radius.xl,
+                // Follows the rounded corners, unlike a border on the container.
+                borderTopWidth: 1,
+                borderColor: theme.color.border,
+                // The overhang. Negative bottom rather than extra height, so the
+                // rounded top stays where the sheet actually is.
+                bottom: -grytDrawerBleed,
+            },
+        ] })), [theme]);
+    /**
+     * Gryt's spring, rather than gorhom's default.
+     *
+     * `withTiming` over the sampled curve, for the same reason every other
+     * animation in this package does it that way: the curve in @gryt/theme is a
+     * damped spring solved analytically, and approximating it with a physics
+     * 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.
+     */
+    const animationConfigs = useBottomSheetTimingConfigs({
+        duration: durations.springSoft,
+        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, 
+        // 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),
+                    // 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");
+    return (_jsx(Pressable, { onPress: sheet.close, style: style, children: children }));
+}
+function Title({ children, style }) {
+    const theme = useTheme();
+    return (_jsx(View, { style: style, children: _jsx(Text, { accessibilityRole: "header", style: {
+                color: theme.color.text,
+                fontSize: 18,
+                fontWeight: "600",
+                marginBottom: theme.space(2),
+            }, children: children }) }));
+}
+export const Sheet = Object.assign(Root, { Trigger, Content, Close, Title });

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAMtB,OAAO,EAAsB,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAGrE,MAAM,MAAM,UAAU,GAAG,OAAO,CAAC,aAAa,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC,CAAC;AAEhG,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,+DAA+D;IAC/D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAKD;;;;;;;;;GASG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EAAE,UAAU,EACjB,YAAgB,EAChB,aAAa,EACb,aAAa,EACb,GAAO,EACP,GAAS,EACT,IAAQ,EACR,QAAQ,EACR,IAAgB,EAChB,KAAK,EACL,kBAAkB,GACnB,EAAE,WAAW,+BAsIb"}
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAMtB,OAAO,EAAsB,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAIrE,MAAM,MAAM,UAAU,GAAG,OAAO,CAAC,aAAa,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC,CAAC;AAEhG,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,+DAA+D;IAC/D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAKD;;;;;;;;;GASG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EAAE,UAAU,EACjB,YAAgB,EAChB,aAAa,EACb,aAAa,EACb,GAAO,EACP,GAAS,EACT,IAAQ,EACR,QAAQ,EACR,IAAgB,EAChB,KAAK,EACL,kBAAkB,GACnB,EAAE,WAAW,+BAuKb"}