@gryt/ui-native 0.3.1 → 0.4.0

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.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,EAIL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAStB,OAAO,EAAgB,KAAK,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAG/E,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAgBrD,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,iBAAS,IAAI,CAAC,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAAE,eAAe,+BAKxD;AAED,iBAAS,OAAO,CAAC,EACf,QAAQ,EACR,KAAK,EACN,EAAE;IACD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,+BAWA;AAED,iBAAS,MAAM,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,+BAErD;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;GAMG;AACH,iBAAS,KAAK,CAAC,EACb,QAAQ,EACR,IAAa,EACb,IAAU,EACV,WAAkB,EAClB,KAAK,EACN,EAAE,gBAAgB,+BAqGlB;AAED,iBAAS,KAAK,CAAC,EACb,QAAQ,EACR,KAAK,EACN,EAAE;IACD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,+BAWA;AAED,eAAO,MAAM,MAAM;;;;;;CAA0C,CAAC"}

package/dist/components/Drawer/Drawer.js

@@ -3,6 +3,7 @@ import { createContext, useContext, useEffect } from "react";
 import { Dimensions, Modal, Pressable } from "react-native";
 import Animated, { useAnimatedStyle, useSharedValue } from "react-native-reanimated";
 import { useReducedMotion } from "../../hooks/useReducedMotion.js";
+import { grytDrawerBleed } from "@gryt/theme";
 import { durations, springy } from "../../motion/index.js";
 import { useOpenState } from "../../overlay/useOpenState.js";
 import { useTheme } from "../../theme/index.js";
@@ -39,7 +40,26 @@ function Popup({ children, side = "left", size = 0.8, dismissible = true, style
     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;
+    /**
+     * 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, 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
@@ -68,8 +88,13 @@ function Popup({ children, side = "left", size = 0.8, dismissible = true, style
                         bottom: 0,
                         left: side === "right" ? undefined : 0,
                         right: side === "left" ? undefined : 0,
-                        width: vertical ? "100%" : extent,
-                        height: vertical ? extent : "100%",
+                        width: vertical ? "100%" : panelExtent,
+                        height: vertical ? panelExtent : "100%",
+                        // The overhang, and the padding that puts the content back where
+                        // it would have been without it.
+                        paddingLeft: side === "right" ? bleed : 0,
+                        paddingRight: side === "left" ? bleed : 0,
+                        paddingBottom: vertical ? bleed : 0,
                         backgroundColor: theme.color.surface,
                         borderColor: theme.color.border,
                         borderRightWidth: side === "left" ? 1 : 0,

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,90 @@
+import { type ReactNode } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+/**
+ * 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 it is in the parity exceptions table 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 {
+    /**
+     * 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)[];
+    /** Starts open. Uncontrolled; use the Trigger for the usual case. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: ReactNode;
+}
+declare function Root({ snapPoints, defaultOpen, onOpenChange, children, }: SheetProps): import("react").JSX.Element;
+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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,0EAA0E;AAC1E,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,kBAAkB,+BAE7D;AAeD,MAAM,WAAW,UAAU;IACzB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IACjC,qEAAqE;IACrE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,iBAAS,IAAI,CAAC,EACZ,UAAoB,EACpB,WAAmB,EACnB,YAAY,EACZ,QAAQ,GACT,EAAE,UAAU,+BAyBZ;AAWD,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;GAKG;AACH,iBAAS,OAAO,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,iBAAiB,+BAOtD;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,iBAAS,OAAO,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,iBAAiB,+BA+HtD;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,iBAAS,KAAK,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,eAAe,+BAOlD;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,iBAAS,KAAK,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,eAAe,+BAiBlD;AAED,eAAO,MAAM,KAAK;;;;;CAA0D,CAAC"}

package/dist/components/Sheet/Sheet.js

@@ -0,0 +1,133 @@
+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 { grytDrawerBleed } from "@gryt/theme";
+import { durations, easeSpring } from "../../motion/index.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;
+}
+function Root({ snapPoints = ["50%"], defaultOpen = false, onOpenChange, children, }) {
+    const ref = useRef(null);
+    // `present` and `dismiss` rather than mounting and unmounting by hand: the
+    // modal is always rendered and the provider decides whether it is on screen,
+    // which is what removes the mount-then-snap-on-the-next-frame dance the
+    // inline version needed.
+    const open = useCallback(() => {
+        ref.current?.present();
+        onOpenChange?.(true);
+    }, [onOpenChange]);
+    const close = useCallback(() => {
+        ref.current?.dismiss();
+    }, []);
+    const context = useMemo(() => ({ open, close }), [open, close]);
+    return (_jsx(SheetContext.Provider, { value: context, children: _jsx(SheetRefContext.Provider, { value: { ref, defaultOpen, snapPoints, onOpenChange }, 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();
+    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, defaultOpen, snapPoints, onOpenChange } = state;
+    useEffect(() => {
+        if (defaultOpen)
+            ref.current?.present();
+    }, [defaultOpen, 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, enablePanDownToClose: true, onDismiss: () => onOpenChange?.(false), animationConfigs: animationConfigs, backdropComponent: renderBackdrop, backgroundComponent: renderBackground, handleIndicatorStyle: {
+            backgroundColor: theme.color.border,
+            width: 36,
+            height: 4,
+        }, children: _jsx(BottomSheetView, { style: [{ flex: 1, padding: theme.space(4) }, style], children: _jsx(SheetContext.Provider, { value: sheet, children: children }) }) }));
+}
+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"}