@gryt/ui-native 0.2.0 → 0.3.1

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;;;;;gBAAy/E,CAAC;aAAkB,CAAC;;;gBAAiS,CAAC;aAAkB,CAAC;;;gBAAkiB,CAAC;aAAkB,CAAC;;CADxtI,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;;;;;gBAAk6H,CAAC;aAAkB,CAAC;;;gBAAiS,CAAC;aAAkB,CAAC;;;gBAAkiB,CAAC;aAAkB,CAAC;;CADjoL,CAAC"}

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,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAKL,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAKtB,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;AAKD,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,+BAgFb"}
+{"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"}

package/dist/components/Button/Button.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { Animated, Pressable, Text, View, } from "react-native";
+import { Pressable, Text, View, } from "react-native";
+import Animated from "react-native-reanimated";
+import { grytScaleSteps } from "@gryt/theme";
 import { useReducedMotion } from "../../hooks/useReducedMotion.js";
+import { usePressScale } from "../../motion/index.js";
 import { useTheme } from "../../theme/index.js";
 const SIZES = {
     xsmall: { minHeight: 32, paddingH: 12, fontSize: 12 },
@@ -9,17 +11,20 @@ const SIZES = {
     medium: { minHeight: 40, paddingH: 20, fontSize: 14 },
     large: { minHeight: 48, paddingH: 24, fontSize: 16 },
 };
-const PRESSED_SCALE = 0.96;
-const SPRING = { useNativeDriver: true, speed: 40, bounciness: 6 };
+/**
+ * `active:scale-[0.96]` on the web, and the same number here.
+ *
+ * `hover:scale-[1.03]` has no counterpart: a touch screen has no state
+ * between not-touching and touching, so emulating hover would be a
+ * difference from the web rather than a match to it.
+ */
+const PRESSED_SCALE = grytScaleSteps.button.press;
 export function Button({ children, tone = "primary", size = "medium", startIcon, endIcon, style, hasPopup = false, disabled, ...rest }) {
     const theme = useTheme();
     const reducedMotion = useReducedMotion();
-    // useState with an initialiser rather than useRef(new Animated.Value(1)):
-    // reading .current during render is a lint error, and the useRef form also
-    // constructs a throwaway Animated.Value on every render.
-    const [scale] = useState(() => new Animated.Value(1));
     const metrics = SIZES[size];
     const animate = !reducedMotion && !hasPopup && !disabled;
+    const press = usePressScale(PRESSED_SCALE, !animate);
     const background = tone === "primary"
         ? theme.color.accent
         : tone === "secondary"
@@ -38,12 +43,7 @@ export function Button({ children, tone = "primary", size = "medium", startIcon,
                 : tone === "ghost"
                     ? theme.color.muted
                     : theme.color.text;
-    const springTo = (value) => {
-        if (!animate)
-            return;
-        Animated.spring(scale, { toValue: value, ...SPRING }).start();
-    };
-    return (_jsx(Animated.View, { style: [{ transform: [{ scale }] }, style], children: _jsxs(Pressable, { accessibilityRole: "button", accessibilityState: { disabled: !!disabled }, disabled: disabled, onPressIn: () => springTo(PRESSED_SCALE), onPressOut: () => springTo(1), style: {
+    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,
                 flexDirection: "row",

package/dist/components/Collapsible/Collapsible.d.ts

@@ -11,17 +11,25 @@ declare function Trigger({ children, style }: {
     style?: StyleProp<ViewStyle>;
 }): import("react").JSX.Element;
 /**
- * Unmounted when closed, rather than animated to zero height.
+ * Animates its height, the same as the web.
  *
- * The web animates the panel's height, which needs the content measured first.
- * React Native can do it with `onLayout` plus `Animated`, and it costs a frame
- * of the content rendered at the wrong size before the measurement lands. Not
- * worth it for the first pass, and it is in the exceptions table.
+ * The web transitions height on `ease-spring` at `--gryt-dur-spring`, and this
+ * now does the same curve at the same duration.
+ *
+ * The content has to be measured before its height can be animated to, which
+ * is why this was unmounted-when-closed to begin with. It is measured off an
+ * absolutely positioned copy that never affects layout, so nothing is drawn at
+ * the wrong size on the way in — the earlier objection was to measuring the
+ * visible content and paying a frame for it.
+ *
+ * Children stay mounted while closed, at height zero with `overflow: hidden`,
+ * matching the web. That is a behaviour change as well as a visual one: state
+ * inside a closed panel now survives, where before it was destroyed.
  */
 declare function Panel({ children, style }: {
     children?: ReactNode;
     style?: StyleProp<ViewStyle>;
-}): import("react").JSX.Element | null;
+}): import("react").JSX.Element;
 export declare const Collapsible: {
     Root: typeof Root;
     Trigger: typeof Trigger;

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

@@ -1 +1 @@
-{"version":3,"file":"Collapsible.d.ts","sourceRoot":"","sources":["../../../src/components/Collapsible/Collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAAmB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE/E,OAAO,EAAgB,KAAK,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAe/E,MAAM,WAAW,oBAAqB,SAAQ,cAAc;IAC1D,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,iBAAS,IAAI,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,EAAE,oBAAoB,+BAOpE;AAED,iBAAS,OAAO,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAAE,+BAY3F;AAED;;;;;;;GAOG;AACH,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,sCAIzF;AAED,eAAO,MAAM,WAAW;;;;CAA2B,CAAC"}
+{"version":3,"file":"Collapsible.d.ts","sourceRoot":"","sources":["../../../src/components/Collapsible/Collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvF,OAAO,EAAmB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAK/E,OAAO,EAAgB,KAAK,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAe/E,MAAM,WAAW,oBAAqB,SAAQ,cAAc;IAC1D,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,iBAAS,IAAI,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,EAAE,oBAAoB,+BAOpE;AAED,iBAAS,OAAO,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAAE,+BAY3F;AAED;;;;;;;;;;;;;;;GAeG;AACH,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,+BA+BzF;AAED,eAAO,MAAM,WAAW;;;;CAA2B,CAAC"}

package/dist/components/Collapsible/Collapsible.js

@@ -1,6 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useState } from "react";
 import { Pressable, View } from "react-native";
+import Animated, { useAnimatedStyle, useSharedValue } from "react-native-reanimated";
+import { useReducedMotion } from "../../hooks/useReducedMotion.js";
+import { springy } from "../../motion/index.js";
 import { useOpenState } from "../../overlay/useOpenState.js";
 const CollapsibleContext = createContext(null);
 function useCollapsible(part) {
@@ -18,17 +21,35 @@ function Trigger({ children, style }) {
     return (_jsx(Pressable, { accessibilityRole: "button", accessibilityState: { expanded: open }, onPress: () => setOpen(!open), style: style, children: children }));
 }
 /**
- * Unmounted when closed, rather than animated to zero height.
+ * Animates its height, the same as the web.
  *
- * The web animates the panel's height, which needs the content measured first.
- * React Native can do it with `onLayout` plus `Animated`, and it costs a frame
- * of the content rendered at the wrong size before the measurement lands. Not
- * worth it for the first pass, and it is in the exceptions table.
+ * The web transitions height on `ease-spring` at `--gryt-dur-spring`, and this
+ * now does the same curve at the same duration.
+ *
+ * The content has to be measured before its height can be animated to, which
+ * is why this was unmounted-when-closed to begin with. It is measured off an
+ * absolutely positioned copy that never affects layout, so nothing is drawn at
+ * the wrong size on the way in — the earlier objection was to measuring the
+ * visible content and paying a frame for it.
+ *
+ * Children stay mounted while closed, at height zero with `overflow: hidden`,
+ * matching the web. That is a behaviour change as well as a visual one: state
+ * inside a closed panel now survives, where before it was destroyed.
  */
 function Panel({ children, style }) {
     const { open } = useCollapsible("Panel");
-    if (!open)
-        return null;
-    return _jsx(View, { style: style, children: children });
+    const reducedMotion = useReducedMotion();
+    const [height, setHeight] = useState(0);
+    const progress = useSharedValue(open ? 1 : 0);
+    useEffect(() => {
+        const to = open ? 1 : 0;
+        // eslint-disable-next-line react-hooks/immutability
+        progress.value = reducedMotion ? to : springy(to);
+    }, [open, progress, reducedMotion]);
+    const animated = useAnimatedStyle(() => ({
+        height: height * progress.value,
+        opacity: progress.value
+    }));
+    return (_jsxs(Animated.View, { style: [{ overflow: "hidden" }, animated, style], children: [_jsx(View, { pointerEvents: "none", style: { position: "absolute", left: 0, right: 0, opacity: 0 }, onLayout: (e) => setHeight(e.nativeEvent.layout.height), children: children }), children] }));
 }
 export const Collapsible = { Root, Trigger, Panel };

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,+BA+DlB;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,+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"}

package/dist/components/Dialog/Dialog.js

@@ -42,7 +42,10 @@ function Popup({ children, style, dismissible = true, scrollable = true, }) {
             {
                 width: "100%",
                 maxWidth: 480,
-                maxHeight: "80%",
+                // Shrinks inside the capped wrapper below rather than carrying its
+                // own percentage, so the popup hugs short content and gives way when
+                // the content is taller than the cap.
+                flexShrink: 1,
                 backgroundColor: theme.color.surfaceRaised,
                 borderRadius: theme.radius.lg,
                 borderWidth: 1,
@@ -51,7 +54,17 @@ function Popup({ children, style, dismissible = true, scrollable = true, }) {
                 gap: theme.space(3),
             },
             style,
-        ], children: scrollable ? (_jsx(ScrollView, { contentContainerStyle: { gap: theme.space(3) }, children: children })) : (children) }));
+        ], children: scrollable ? (
+        // flexGrow 0 so the ScrollView takes the height of its content rather
+        // than filling the popup, and flexShrink 1 so it still gives way when
+        // maxHeight caps it and the content has to scroll.
+        //
+        // Without these it clipped every short dialog: a ScrollView has no
+        // intrinsic height, the popup sizes to its content, and neither had
+        // anything to measure against — so the footer was drawn half off the
+        // bottom. The `scrollable={false}` path was unaffected, which is what
+        // made it look like a layout choice rather than a bug (GRYT-379).
+        _jsx(ScrollView, { style: { flexGrow: 0, flexShrink: 1 }, contentContainerStyle: { gap: theme.space(3) }, children: children })) : (children) }));
     return (_jsx(Modal, { visible: open, transparent: true, animationType: "fade", 
         // Android's hardware back button, which is the closest thing a phone has
         // to the Escape key Base UI listens for. AlertDialog turns it off for the
@@ -68,7 +81,7 @@ 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" }, children: body }) }) }));
+            }, children: _jsx(Pressable, { onPress: () => { }, style: { width: "100%", alignItems: "center", maxHeight: "80%" }, children: body }) }) }));
 }
 /**
  * Not rendered.

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

@@ -28,7 +28,7 @@ export interface DrawerPopupProps {
  * panel, so this one animates even though Collapsible and Skeleton do not.
  * Reduce-motion still turns it off: the drawer arrives in place instead.
  */
-declare function Popup({ children, side, size, dismissible, style, }: DrawerPopupProps): import("react").JSX.Element;
+declare function Popup({ children, side, size, dismissible, style }: DrawerPopupProps): import("react").JSX.Element;
 declare function Close({ children, style }: {
     children?: ReactNode;
     style?: StyleProp<ViewStyle>;

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,EAAkD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvF,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAgB,KAAK,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAG/E,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAerD,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,iBAAS,IAAI,CAAC,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAAE,eAAe,+BAGxD;AAED,iBAAS,OAAO,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAAE,+BAO3F;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,GACN,EAAE,gBAAgB,+BAuElB;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;;;;;;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;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"}

package/dist/components/Drawer/Drawer.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useState } from "react";
-import { Animated, Dimensions, Modal, Pressable, } from "react-native";
+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 { durations, springy } from "../../motion/index.js";
 import { useOpenState } from "../../overlay/useOpenState.js";
 import { useTheme } from "../../theme/index.js";
 const DrawerContext = createContext(null);
@@ -13,7 +15,7 @@ function useDrawer(part) {
 }
 function Root({ children, ...openProps }) {
     const state = useOpenState(openProps);
-    return _jsx(DrawerContext.Provider, { value: state, children: children });
+    return (_jsx(DrawerContext.Provider, { value: state, children: children }));
 }
 function Trigger({ children, style }) {
     const { setOpen } = useDrawer("Trigger");
@@ -29,52 +31,55 @@ function Portal({ children }) {
  * panel, so this one animates even though Collapsible and Skeleton do not.
  * Reduce-motion still turns it off: the drawer arrives in place instead.
  */
-function Popup({ children, side = "left", size = 0.8, dismissible = true, style, }) {
+function Popup({ children, side = "left", size = 0.8, dismissible = true, style }) {
     const { open, setOpen } = useDrawer("Popup");
     const theme = useTheme();
     const reducedMotion = useReducedMotion();
     const screen = Dimensions.get("window");
     const vertical = side === "bottom";
     const extent = vertical ? screen.height * size : screen.width * size;
-    const [progress] = useState(() => new Animated.Value(0));
+    const progress = useSharedValue(0);
+    const hidden = side === "right" ? extent : side === "left" ? -extent : extent;
+    // 700ms, the web's `--gryt-dur-spring-soft`, on the overshooting curve —
+    // which is what the web uses here despite the panel travelling its own
+    // width. Matching it rather than substituting the tight curve, because the
+    // brief is 1:1 with the web and not a second opinion about it.
     useEffect(() => {
-        if (!open) {
-            progress.setValue(0);
-            return;
-        }
-        if (reducedMotion) {
-            progress.setValue(1);
-            return;
-        }
-        Animated.spring(progress, {
-            toValue: 1,
-            useNativeDriver: true,
-            speed: 20,
-            bounciness: 0,
-        }).start();
+        // eslint-disable-next-line react-hooks/immutability
+        progress.value =
+            !open || reducedMotion
+                ? open
+                    ? 1
+                    : 0
+                : springy(1, { duration: durations.springSoft });
     }, [open, progress, reducedMotion]);
-    const hidden = side === "right" ? extent : side === "left" ? -extent : extent;
-    const translate = progress.interpolate({
-        inputRange: [0, 1],
-        outputRange: [hidden, 0],
-    });
-    return (_jsx(Modal, { visible: open, transparent: true, animationType: "none", onRequestClose: dismissible ? () => setOpen(false) : undefined, children: _jsx(Pressable, { onPress: dismissible ? () => setOpen(false) : undefined, style: { flex: 1, backgroundColor: "rgba(0,0,0,0.6)" }, children: _jsx(Animated.View, { accessibilityViewIsModal: true, style: {
-                    position: "absolute",
-                    top: side === "bottom" ? undefined : 0,
-                    bottom: 0,
-                    left: side === "right" ? undefined : 0,
-                    right: side === "left" ? undefined : 0,
-                    width: vertical ? "100%" : extent,
-                    height: vertical ? extent : "100%",
-                    backgroundColor: theme.color.surface,
-                    borderColor: theme.color.border,
-                    borderRightWidth: side === "left" ? 1 : 0,
-                    borderLeftWidth: side === "right" ? 1 : 0,
-                    borderTopWidth: vertical ? 1 : 0,
-                    borderTopLeftRadius: vertical ? theme.radius.lg : 0,
-                    borderTopRightRadius: vertical ? theme.radius.lg : 0,
-                    transform: [vertical ? { translateY: translate } : { translateX: translate }],
-                }, children: _jsx(Pressable, { onPress: () => { }, style: [{ flex: 1 }, style], children: children }) }) }) }));
+    const panelStyle = useAnimatedStyle(() => ({
+        transform: [
+            vertical
+                ? { translateY: hidden + (0 - hidden) * progress.value }
+                : { translateX: hidden + (0 - hidden) * progress.value }
+        ],
+        opacity: progress.value
+    }));
+    return (_jsx(Modal, { visible: open, transparent: true, animationType: "none", onRequestClose: dismissible ? () => setOpen(false) : undefined, children: _jsx(Pressable, { onPress: dismissible ? () => setOpen(false) : undefined, style: { flex: 1, backgroundColor: "rgba(0,0,0,0.6)" }, children: _jsx(Animated.View, { accessibilityViewIsModal: true, style: [
+                    {
+                        position: "absolute",
+                        top: side === "bottom" ? undefined : 0,
+                        bottom: 0,
+                        left: side === "right" ? undefined : 0,
+                        right: side === "left" ? undefined : 0,
+                        width: vertical ? "100%" : extent,
+                        height: vertical ? extent : "100%",
+                        backgroundColor: theme.color.surface,
+                        borderColor: theme.color.border,
+                        borderRightWidth: side === "left" ? 1 : 0,
+                        borderLeftWidth: side === "right" ? 1 : 0,
+                        borderTopWidth: vertical ? 1 : 0,
+                        borderTopLeftRadius: vertical ? theme.radius.lg : 0,
+                        borderTopRightRadius: vertical ? theme.radius.lg : 0
+                    },
+                    panelStyle
+                ], children: _jsx(Pressable, { onPress: () => { }, style: [{ flex: 1 }, style], children: children }) }) }) }));
 }
 function Close({ children, style }) {
     const { setOpen } = useDrawer("Close");

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

@@ -6,13 +6,24 @@ export interface ProgressProps {
     style?: StyleProp<ViewStyle>;
 }
 /**
- * Determinate only for now.
+ * Determinate only — and so is the web, which is not what this used to say.
  *
- * The web's indeterminate state is a CSS keyframe sweeping a partial bar across
- * the track. Reproducing it here needs an Animated loop and a reduce-motion
- * check, which is worth doing properly rather than as a footnote on this one, so
- * an undefined value currently renders an empty track. Recorded in the parity
- * exceptions table.
+ * 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.
  */
 export declare function Progress({ value, tone, style }: ProgressProps): import("react").JSX.Element;
 //# sourceMappingURL=Progress.d.ts.map

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

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

package/dist/components/Progress/Progress.js

@@ -2,13 +2,24 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { View } from "react-native";
 import { useTheme } from "../../theme/index.js";
 /**
- * Determinate only for now.
+ * Determinate only — and so is the web, which is not what this used to say.
  *
- * The web's indeterminate state is a CSS keyframe sweeping a partial bar across
- * the track. Reproducing it here needs an Animated loop and a reduce-motion
- * check, which is worth doing properly rather than as a footnote on this one, so
- * an undefined value currently renders an empty track. Recorded in the parity
- * exceptions table.
+ * 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.
  */
 export function Progress({ value, tone = "accent", style }) {
     const theme = useTheme();

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;AAEtB,OAAO,EAAsB,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAErE,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,+BA0Gb"}
+{"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"}

package/dist/components/Slider/Slider.js

@@ -1,7 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { PanResponder, View, } 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 { valueAt } from "./sliderValue.js";
 const TRACK_HEIGHT = 4;
 const THUMB = 20;
 /**
@@ -27,6 +31,16 @@ export function Slider({ value: controlled, defaultValue = 0, onValueChange, onV
     // fire from touch events, which is always after an effect has run.
     const state = useRef({ width, value, min, max, step, disabled });
     const emit = useRef({ onValueChange, onValueCommit, controlled });
+    /** Where the current gesture started, in track coordinates. */
+    const origin = useRef(0);
+    /**
+     * `active:scale-[0.94]` on the web. `hover:scale-[1.12]` has no touch
+     * equivalent, so only the press half ports.
+     */
+    const thumbScale = useSharedValue(1);
+    const thumbStyle = useAnimatedStyle(() => ({
+        transform: [{ scale: thumbScale.value }]
+    }));
     useEffect(() => {
         state.current = { width, value, min, max, step, disabled };
     }, [width, value, min, max, step, disabled]);
@@ -35,12 +49,11 @@ export function Slider({ value: controlled, defaultValue = 0, onValueChange, onV
     }, [onValueChange, onValueCommit, controlled]);
     const valueFromX = (x) => {
         const s = state.current;
+        // Before layout there is no position to read, so hold what we have rather
+        // than snapping to min.
         if (s.width <= 0)
             return s.value;
-        const ratio = Math.max(0, Math.min(1, x / s.width));
-        const raw = s.min + ratio * (s.max - s.min);
-        const stepped = Math.round(raw / s.step) * s.step;
-        return Math.max(s.min, Math.min(s.max, stepped));
+        return valueAt(x, s);
     };
     const apply = (next) => {
         if (emit.current.controlled === undefined)
@@ -62,13 +75,29 @@ export function Slider({ value: controlled, defaultValue = 0, onValueChange, onV
         // Claimed on move as well, so a drag that begins as a scroll still lands
         // here once it is clearly horizontal.
         onMoveShouldSetPanResponder: () => !state.current.disabled,
-        onPanResponderGrant: (e) => apply(valueFromX(e.nativeEvent.locationX)),
+        onPanResponderGrant: (e) => {
+            // Where the finger landed, kept for the drag to offset from.
+            origin.current = e.nativeEvent.locationX;
+            thumbScale.value = springy(grytScaleSteps.sliderThumb.press);
+            apply(valueFromX(e.nativeEvent.locationX));
+        },
+        // `gesture.dx` is the distance from where the gesture *started*, not from
+        // the previous event. Offsetting the live value by it therefore adds the
+        // whole travel again on every move, and the thumb accelerates away from
+        // the finger — 200px wide, 0-100, dragging to x=50 then 60 then 70 gave
+        // 25, then 55, then 90. Tapping was always fine, because grant uses
+        // locationX directly, which is what made it look like a rendering
+        // problem rather than an arithmetic one.
+        //
+        // Anchoring on the grant position is also what makes the drag continue
+        // from the finger: grant has already seeked the thumb there.
         onPanResponderMove: (_e, gesture) => {
-            const s = state.current;
-            const ratio = (s.value - s.min) / (s.max - s.min || 1);
-            apply(valueFromX(ratio * s.width + gesture.dx));
+            apply(valueFromX(origin.current + gesture.dx));
+        },
+        onPanResponderRelease: () => {
+            thumbScale.value = springy(1);
+            emit.current.onValueCommit?.(state.current.value);
         },
-        onPanResponderRelease: () => emit.current.onValueCommit?.(state.current.value),
     }));
     /* eslint-enable react-hooks/refs */
     const ratio = (value - min) / (max - min || 1);
@@ -81,14 +110,17 @@ export function Slider({ value: controlled, defaultValue = 0, onValueChange, onV
                         height: "100%",
                         borderRadius: TRACK_HEIGHT / 2,
                         backgroundColor: ramp[8],
-                    } }) }), _jsx(View, { pointerEvents: "none", style: {
-                    position: "absolute",
-                    left: Math.max(0, ratio * width - THUMB / 2),
-                    width: THUMB,
-                    height: THUMB,
-                    borderRadius: THUMB / 2,
-                    backgroundColor: ramp[8],
-                    borderWidth: 2,
-                    borderColor: theme.color.bg,
-                } })] }));
+                    } }) }), _jsx(Animated.View, { pointerEvents: "none", style: [
+                    {
+                        position: "absolute",
+                        left: Math.max(0, ratio * width - THUMB / 2),
+                        width: THUMB,
+                        height: THUMB,
+                        borderRadius: THUMB / 2,
+                        backgroundColor: ramp[8],
+                        borderWidth: 2,
+                        borderColor: theme.color.bg,
+                    },
+                    thumbStyle,
+                ] })] }));
 }

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

@@ -0,0 +1,15 @@
+export interface SliderScale {
+    /** Track width in pixels. Zero or less means the layout has not happened. */
+    width: number;
+    min: number;
+    max: number;
+    step: number;
+}
+/**
+ * The value at `x` pixels along the track.
+ *
+ * Clamped at both ends, snapped to `step`, and safe to call before layout —
+ * a zero width returns `min`, since there is no position to read yet.
+ */
+export declare function valueAt(x: number, scale: SliderScale): number;
+//# sourceMappingURL=sliderValue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sliderValue.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/sliderValue.ts"],"names":[],"mappings":"AASA,MAAM,WAAW,WAAW;IAC1B,6EAA6E;IAC7E,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,GAAG,MAAM,CAU7D"}

package/dist/components/Slider/sliderValue.js

@@ -0,0 +1,23 @@
+/* Track position to value, as a pure function.
+ *
+ * Split out of Slider.tsx for the same reason placePopup.ts is split out of the
+ * overlay: it is arithmetic, it is where the bugs are, and a closure over a ref
+ * cannot be tested. GRYT-378 was a one-line error in this maths that shipped,
+ * passed every check, and was only caught by a person dragging a real thumb on
+ * a real phone.
+ */
+/**
+ * The value at `x` pixels along the track.
+ *
+ * Clamped at both ends, snapped to `step`, and safe to call before layout —
+ * a zero width returns `min`, since there is no position to read yet.
+ */
+export function valueAt(x, scale) {
+    const { width, min, max, step } = scale;
+    if (width <= 0)
+        return min;
+    const ratio = Math.max(0, Math.min(1, x / width));
+    const raw = min + ratio * (max - min);
+    const stepped = step > 0 ? Math.round(raw / step) * step : raw;
+    return Math.max(min, Math.min(max, stepped));
+}

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AACA,OAAO,EAAuB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAKnF,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC;AAExE,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,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;AAQD;;;;;;;;;;;GAWG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAO,EAAE,UAAU,EACnB,cAAsB,EACtB,eAAe,EACf,QAAQ,EACR,IAAgB,EAChB,KAAK,EACL,kBAAkB,GACnB,EAAE,WAAW,+BA0Db"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAOzE,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC;AAExE,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,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;AAQD;;;;;;;;;;;GAWG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAO,EAAE,UAAU,EACnB,cAAsB,EACtB,eAAe,EACf,QAAQ,EACR,IAAgB,EAChB,KAAK,EACL,kBAAkB,GACnB,EAAE,WAAW,+BA6Db"}

package/dist/components/Switch/Switch.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
-import { Animated, Pressable } from "react-native";
+import { Pressable } from "react-native";
+import Animated, { useAnimatedStyle, useSharedValue } from "react-native-reanimated";
 import { useReducedMotion } from "../../hooks/useReducedMotion.js";
+import { springy } from "../../motion/index.js";
 import { toneRamp, useTheme } from "../../theme/index.js";
 // The web is h-6 w-10 with a thumb translating x-4. Same numbers in points.
 const TRACK_WIDTH = 40;
@@ -25,19 +27,19 @@ export function Switch({ checked: controlled, defaultChecked = false, onCheckedC
     const reducedMotion = useReducedMotion();
     const [uncontrolled, setUncontrolled] = useState(defaultChecked);
     const checked = controlled ?? uncontrolled;
-    const [offset] = useState(() => new Animated.Value(checked ? TRAVEL : 0));
+    const offset = useSharedValue(checked ? TRAVEL : 0);
+    // The web is `translate-x-4` on `ease-spring` — the overshooting curve, even
+    // though the thumb travels, because the travel is 16px inside a 40px track
+    // rather than the width of a container. Following the web rather than
+    // second-guessing it: 1:1 means the same curve, not a better-argued one.
     useEffect(() => {
-        if (reducedMotion) {
-            offset.setValue(checked ? TRAVEL : 0);
-            return;
-        }
-        Animated.spring(offset, {
-            toValue: checked ? TRAVEL : 0,
-            useNativeDriver: true,
-            speed: 40,
-            bounciness: 4,
-        }).start();
+        const to = checked ? TRAVEL : 0;
+        // eslint-disable-next-line react-hooks/immutability
+        offset.value = reducedMotion ? to : springy(to);
     }, [checked, offset, reducedMotion]);
+    const thumbStyle = useAnimatedStyle(() => ({
+        transform: [{ translateX: offset.value }]
+    }));
     const ramp = toneRamp(theme, tone);
     return (_jsx(Pressable, { accessibilityRole: "switch", accessibilityState: { checked, disabled: !!disabled }, accessibilityLabel: accessibilityLabel, disabled: disabled, onPress: () => {
             const next = !checked;
@@ -55,11 +57,13 @@ export function Switch({ checked: controlled, defaultChecked = false, onCheckedC
                 opacity: disabled ? 0.5 : 1,
             },
             style,
-        ], children: _jsx(Animated.View, { style: {
-                width: THUMB,
-                height: THUMB,
-                borderRadius: THUMB / 2,
-                backgroundColor: checked ? theme.color.bg : theme.color.text,
-                transform: [{ translateX: offset }],
-            } }) }));
+        ], children: _jsx(Animated.View, { style: [
+                {
+                    width: THUMB,
+                    height: THUMB,
+                    borderRadius: THUMB / 2,
+                    backgroundColor: checked ? theme.color.bg : theme.color.text,
+                },
+                thumbStyle,
+            ] }) }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5G,OAAO,EAAmC,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAK/F,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAErE,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B;AAMD,UAAU,iBAAiB;IACzB,IAAI,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,MAAM,CAAC;IACtC,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B;AAID;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,+BAoBnE;AAED,wBAAgB,QAAQ,IAAI,iBAAiB,CAI5C;AAmGD,MAAM,WAAW,UAAU;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5G,OAAO,EAAyB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAQrF,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAErE,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B;AAMD,UAAU,iBAAiB;IACzB,IAAI,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,MAAM,CAAC;IACtC,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B;AAID;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,+BAoBnE;AAED,wBAAgB,QAAQ,IAAI,iBAAiB,CAI5C;AAuGD,MAAM,WAAW,UAAU;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B"}

package/dist/components/Toast/Toast.js

@@ -1,7 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
-import { Animated, Pressable, Text, View } from "react-native";
+import { Pressable, Text, View } from "react-native";
+import Animated, { useAnimatedStyle, useSharedValue } from "react-native-reanimated";
+import { grytScaleSteps } from "@gryt/theme";
 import { useReducedMotion } from "../../hooks/useReducedMotion.js";
+import { fade, usePressScale } from "../../motion/index.js";
 import { useTheme } from "../../theme/index.js";
 const ToastContext = createContext(null);
 /**
@@ -57,23 +60,24 @@ function Viewport({ toasts, onDismiss, }) {
 function ToastItem({ toast, onDismiss, }) {
     const theme = useTheme();
     const reducedMotion = useReducedMotion();
-    const [opacity] = useState(() => new Animated.Value(reducedMotion ? 1 : 0));
+    const opacity = useSharedValue(reducedMotion ? 1 : 0);
     const ramp = theme.scales[RAMP[toast.severity ?? "info"]];
     const duration = toast.duration === undefined ? 4000 : toast.duration;
+    // `active:scale-[0.96]` on the web. The `hover:scale-[1.04]` half has no
+    // touch equivalent and is deliberately not emulated.
+    const press = usePressScale(grytScaleSteps.toast.press, reducedMotion);
     useEffect(() => {
         if (!reducedMotion) {
-            Animated.timing(opacity, {
-                toValue: 1,
-                duration: 150,
-                useNativeDriver: true,
-            }).start();
+            // eslint-disable-next-line react-hooks/immutability
+            opacity.value = fade(1);
         }
         if (duration === null)
             return;
         const timer = setTimeout(() => onDismiss(toast.id), duration);
         return () => clearTimeout(timer);
     }, [duration, onDismiss, opacity, reducedMotion, toast.id]);
-    return (_jsx(Animated.View, { style: { opacity }, children: _jsxs(Pressable, { accessibilityRole: "alert", accessibilityLiveRegion: toast.severity === "error" || toast.severity === "warning" ? "assertive" : "polite", onPress: () => onDismiss(toast.id), style: {
+    const enter = useAnimatedStyle(() => ({ opacity: opacity.value }));
+    return (_jsx(Animated.View, { style: [enter, press.style], children: _jsxs(Pressable, { onPressIn: press.onPressIn, onPressOut: press.onPressOut, accessibilityRole: "alert", accessibilityLiveRegion: toast.severity === "error" || toast.severity === "warning" ? "assertive" : "polite", onPress: () => onDismiss(toast.id), style: {
                 backgroundColor: theme.color.surfaceRaised,
                 borderRadius: theme.radius.md,
                 borderWidth: 1,

package/dist/index.d.ts

@@ -36,4 +36,5 @@ export { AnchoredPopup, type AnchoredPopupProps } from "./overlay/AnchoredPopup.
 export { placePopup, type Align, type AnchorOptions, type AnchorRect, type PopupPlacement, type Side, } from "./overlay/placePopup.js";
 export { useOpenState, type OpenStateProps } from "./overlay/useOpenState.js";
 export { useReducedMotion } from "./hooks/useReducedMotion.js";
+export { durations, easeSpring, easeSpringTight, fade, springy, travel, usePressScale, type PressScale } from "./motion/index.js";
 //# sourceMappingURL=index.d.ts.map

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/dist/index.js

@@ -36,3 +36,4 @@ export { AnchoredPopup } from "./overlay/AnchoredPopup.js";
 export { placePopup, } from "./overlay/placePopup.js";
 export { useOpenState } from "./overlay/useOpenState.js";
 export { useReducedMotion } from "./hooks/useReducedMotion.js";
+export { durations, easeSpring, easeSpringTight, fade, springy, travel, usePressScale } from "./motion/index.js";

package/dist/motion/easing.d.ts

@@ -0,0 +1,28 @@
+/** Same shape as Reanimated's `EasingFunction`, without importing it. */
+export type Easing = (t: number) => number;
+/**
+ * Turn a sample list into an easing.
+ *
+ * The body is a worklet so it runs on the UI thread — an easing evaluated on
+ * the JS thread would drop frames under exactly the load this exists to
+ * survive. `points` is a plain array, which worklets capture by value.
+ *
+ * The interpolation is written out rather than calling `sampleCurve` from
+ * @gryt/theme, and that is not a style choice. A worklet cannot synchronously
+ * call a JS-thread function: doing so throws
+ *
+ *   [Worklets] Tried to synchronously call a Remote Function
+ *
+ * on the first frame of every animation. That shipped in 0.3.0, because the
+ * only thing exercising the UI thread in testing used React Native's own
+ * easing rather than this one.
+ *
+ * easing.test.ts asserts this stays identical to `sampleCurve`, so the
+ * duplication cannot drift from the definition the web renders from.
+ */
+export declare function easingFromSamples(samples: readonly number[]): Easing;
+/** Overshoots ~12%. For things that scale in place. */
+export declare const easeSpring: Easing;
+/** Critically damped, no overshoot. For things that travel inside bounds. */
+export declare const easeSpringTight: Easing;
+//# sourceMappingURL=easing.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"easing.d.ts","sourceRoot":"","sources":["../../src/motion/easing.ts"],"names":[],"mappings":"AASA,yEAAyE;AACzE,MAAM,MAAM,MAAM,GAAG,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;AAE3C;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,SAAS,MAAM,EAAE,GAAG,MAAM,CAkBpE;AAED,uDAAuD;AACvD,eAAO,MAAM,UAAU,QAAmC,CAAC;AAE3D,6EAA6E;AAC7E,eAAO,MAAM,eAAe,QAAwC,CAAC"}

package/dist/motion/easing.js

@@ -0,0 +1,51 @@
+/* The sampled-spring easings, with no Reanimated import.
+ *
+ * Split from motion.ts for the same reason sliderValue.ts is split from
+ * Slider.tsx: this is arithmetic, it is where a bug hid, and importing
+ * react-native-reanimated drags in react-native-worklets, which cannot resolve
+ * under vitest. A file that cannot be imported cannot be tested.
+ */
+import { springSamples, springTightSamples } from "@gryt/theme";
+/**
+ * Turn a sample list into an easing.
+ *
+ * The body is a worklet so it runs on the UI thread — an easing evaluated on
+ * the JS thread would drop frames under exactly the load this exists to
+ * survive. `points` is a plain array, which worklets capture by value.
+ *
+ * The interpolation is written out rather than calling `sampleCurve` from
+ * @gryt/theme, and that is not a style choice. A worklet cannot synchronously
+ * call a JS-thread function: doing so throws
+ *
+ *   [Worklets] Tried to synchronously call a Remote Function
+ *
+ * on the first frame of every animation. That shipped in 0.3.0, because the
+ * only thing exercising the UI thread in testing used React Native's own
+ * easing rather than this one.
+ *
+ * easing.test.ts asserts this stays identical to `sampleCurve`, so the
+ * duplication cannot drift from the definition the web renders from.
+ */
+export function easingFromSamples(samples) {
+    const points = [...samples];
+    return (t) => {
+        "worklet";
+        const count = points.length;
+        if (count === 0)
+            return t;
+        if (t <= 0)
+            return points[0];
+        if (t >= 1)
+            return points[count - 1];
+        const span = (count - 1) * t;
+        const index = Math.floor(span);
+        const rest = span - index;
+        const from = points[index];
+        const to = points[index + 1] ?? from;
+        return from + (to - from) * rest;
+    };
+}
+/** Overshoots ~12%. For things that scale in place. */
+export const easeSpring = easingFromSamples(springSamples);
+/** Critically damped, no overshoot. For things that travel inside bounds. */
+export const easeSpringTight = easingFromSamples(springTightSamples);

package/dist/motion/index.d.ts

@@ -0,0 +1,4 @@
+export { durations, fade, springy, travel } from "./motion.js";
+export { easeSpring, easeSpringTight, easingFromSamples, type Easing } from "./easing.js";
+export { usePressScale, type PressScale } from "./usePressScale.js";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/motion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,iBAAiB,EAAE,KAAK,MAAM,EAAE,MAAM,UAAU,CAAC;AACvF,OAAO,EAAE,aAAa,EAAE,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/motion/index.js

@@ -0,0 +1,3 @@
+export { durations, fade, springy, travel } from "./motion.js";
+export { easeSpring, easeSpringTight, easingFromSamples } from "./easing.js";
+export { usePressScale } from "./usePressScale.js";

package/dist/motion/motion.d.ts

@@ -0,0 +1,15 @@
+import { type WithTimingConfig } from "react-native-reanimated";
+import { easeSpring, easeSpringTight } from "./easing.js";
+export { easeSpring, easeSpringTight };
+export declare const durations: {
+    readonly spring: 500;
+    readonly springSoft: 700;
+    readonly fast: 150;
+};
+/** `withTiming` on the overshooting spring, at the standard duration. */
+export declare function springy(to: number, config?: WithTimingConfig): number;
+/** `withTiming` on the critically damped spring — travel that must stay in bounds. */
+export declare function travel(to: number, config?: WithTimingConfig): number;
+/** A colour or opacity change, which should not feel sprung. */
+export declare function fade(to: number, config?: WithTimingConfig): number;
+//# sourceMappingURL=motion.d.ts.map

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

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

package/dist/motion/motion.js

@@ -0,0 +1,32 @@
+/* The web components' motion, on React Native.
+ *
+ * Deliberately not `withSpring`. The curve in @gryt/theme is a damped spring
+ * solved analytically and sampled — `theme.css` calls it "the real curve of a
+ * spring rather than a physics engine approximating one". Reanimated's
+ * `withSpring` is a physics engine, so using it would mean approximating an
+ * exact curve with the very thing that curve was chosen over, and then tuning
+ * damping constants until it looked close.
+ *
+ * `withTiming` plus an easing that interpolates the same samples at the same
+ * duration is both simpler and actually identical.
+ */
+import { Easing, withTiming } from "react-native-reanimated";
+import { grytDurations } from "@gryt/theme";
+import { easeSpring, easeSpringTight } from "./easing.js";
+export { easeSpring, easeSpringTight };
+export const durations = grytDurations;
+/** `withTiming` on the overshooting spring, at the standard duration. */
+export function springy(to, config) {
+    "worklet";
+    return withTiming(to, { duration: durations.spring, easing: easeSpring, ...config });
+}
+/** `withTiming` on the critically damped spring — travel that must stay in bounds. */
+export function travel(to, config) {
+    "worklet";
+    return withTiming(to, { duration: durations.spring, easing: easeSpringTight, ...config });
+}
+/** A colour or opacity change, which should not feel sprung. */
+export function fade(to, config) {
+    "worklet";
+    return withTiming(to, { duration: durations.fast, easing: Easing.out(Easing.quad), ...config });
+}

package/dist/motion/usePressScale.d.ts

@@ -0,0 +1,15 @@
+import { useAnimatedStyle } from "react-native-reanimated";
+export interface PressScale {
+    onPressIn: () => void;
+    onPressOut: () => void;
+    style: ReturnType<typeof useAnimatedStyle>;
+}
+/**
+ * Scale to `pressed` while held, spring back to 1 on release.
+ *
+ * Returns handlers to spread onto a Pressable and an animated style for the
+ * view that should scale. Both directions use the overshooting curve, so the
+ * release settles with the same texture the web has.
+ */
+export declare function usePressScale(pressed: number, disabled?: boolean): PressScale;
+//# sourceMappingURL=usePressScale.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePressScale.d.ts","sourceRoot":"","sources":["../../src/motion/usePressScale.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,gBAAgB,EAAkB,MAAM,yBAAyB,CAAC;AAG3E,MAAM,WAAW,UAAU;IACzB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,KAAK,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;CAC5C;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,GAAG,UAAU,CAuB7E"}

package/dist/motion/usePressScale.js

@@ -0,0 +1,39 @@
+/* The press half of the web's hover/active pair.
+ *
+ * `hover:scale-[1.03]` has no meaning on a touch screen and is deliberately
+ * not emulated — there is no state between "not touching" and "touching", so
+ * inventing one would be a difference from the web rather than a match to it.
+ * The `active:` half ports exactly.
+ */
+import { useCallback } from "react";
+import { useAnimatedStyle, useSharedValue } from "react-native-reanimated";
+import { springy } from "./motion.js";
+/**
+ * Scale to `pressed` while held, spring back to 1 on release.
+ *
+ * Returns handlers to spread onto a Pressable and an animated style for the
+ * view that should scale. Both directions use the overshooting curve, so the
+ * release settles with the same texture the web has.
+ */
+export function usePressScale(pressed, disabled) {
+    const scale = useSharedValue(1);
+    // A Reanimated shared value is mutated by design — assigning `.value` is how
+    // an animation is started, and the object identity never changes. The
+    // immutability rule reads it as a mutated binding, which is what the rule is
+    // for everywhere else and a false positive here. Scoped to these two
+    // assignments rather than the file.
+    /* eslint-disable react-hooks/immutability */
+    const onPressIn = useCallback(() => {
+        if (disabled)
+            return;
+        scale.value = springy(pressed);
+    }, [disabled, pressed, scale]);
+    const onPressOut = useCallback(() => {
+        if (disabled)
+            return;
+        scale.value = springy(1);
+    }, [disabled, scale]);
+    /* eslint-enable react-hooks/immutability */
+    const style = useAnimatedStyle(() => ({ transform: [{ scale: scale.value }] }));
+    return { onPressIn, onPressOut, style };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gryt/ui-native",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "type": "module",
   "license": "MIT",
   "description": "Gryt's design system on React Native. Same tokens as @gryt/ui, a different renderer.",
@@ -32,15 +32,18 @@
   },
   "peerDependencies": {
     "react": ">=18.3.0 || >=19.0.0",
-    "react-native": ">=0.76.0"
+    "react-native": ">=0.76.0",
+    "react-native-reanimated": ">=4.0.0"
   },
   "dependencies": {
-    "@gryt/theme": "^0.1.0"
+    "@gryt/theme": "^0.2.0"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",
     "react": "^19.0.0",
     "react-native": "^0.76.0",
-    "vitest": "^3.0.0"
-  }
+    "vitest": "^3.0.0",
+    "react-native-reanimated": "^4.5.1"
+  },
+  "peerDependenciesMeta": {}
 }