@gryt/ui-native 0.6.1 → 0.7.0

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

@@ -15,10 +15,15 @@ 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 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.
+ * Its one job is defaulting the indicator off, since the web version hides the
+ * native scrollbar too.
+ *
+ * It used to have a second: publishing a drag lock that a Slider could claim to
+ * switch this list off for the duration of a drag. That existed because
+ * `PanResponder` could not tell the native scroll recogniser anything, so the
+ * only way to stop the list moving under a slider was to disable it. The Slider
+ * declares `activeOffsetX` now and the two gestures settle it between them, so
+ * there is nothing to hold still and nothing to leak if a drag is interrupted.
  */
-export declare function ScrollArea({ children, horizontal, style, contentStyle, showsVerticalScrollIndicator, showsHorizontalScrollIndicator, scrollEnabled, ...rest }: ScrollAreaProps): import("react").JSX.Element;
+export declare function ScrollArea({ children, horizontal, style, contentStyle, showsVerticalScrollIndicator, showsHorizontalScrollIndicator, ...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,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"}
+{"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,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;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,UAAkB,EAClB,KAAK,EACL,YAAY,EACZ,4BAAoC,EACpC,8BAAsC,EACtC,GAAG,IAAI,EACR,EAAE,eAAe,+BAajB"}

package/dist/components/ScrollArea/ScrollArea.js

@@ -1,7 +1,5 @@
 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.
  *
@@ -11,22 +9,16 @@ import { DragLockContext } from "../internal/dragLock.js";
  * device. So the component stays for call-site parity and does almost nothing,
  * which is the honest version.
  *
- * 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.
+ * Its one job is defaulting the indicator off, since the web version hides the
+ * native scrollbar too.
+ *
+ * It used to have a second: publishing a drag lock that a Slider could claim to
+ * switch this list off for the duration of a drag. That existed because
+ * `PanResponder` could not tell the native scroll recogniser anything, so the
+ * only way to stop the list moving under a slider was to disable it. The Slider
+ * declares `activeOffsetX` now and the two gestures settle it between them, so
+ * there is nothing to hold still and nothing to leak if a drag is interrupted.
  */
-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 }) }));
+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 }));
 }

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

@@ -18,12 +18,23 @@ export interface SliderProps {
 /**
  * Dragging, on a surface where a drag might belong to something else.
  *
- * The web gets pointer capture: once the thumb is grabbed, every move belongs to
- * the slider until release. React Native has no equivalent, so this claims the
- * gesture through PanResponder and holds it, which is what stops a horizontal
- * drag being read as a scroll by whatever list the slider is sitting in.
+ * The web gets pointer capture: once the thumb is grabbed, every move belongs
+ * to the slider until release. React Native has no equivalent, and volume
+ * sliders live in settings lists, so a horizontal drag has to be told apart
+ * from the scroll it is sitting in.
  *
- * Volume sliders live in scroll views, so this matters more here than it looks.
+ * `activeOffsetX` is that distinction, declared rather than fought over. The
+ * pan claims the gesture once the finger has clearly gone sideways, and a
+ * vertical drag never activates it at all, so the scroll view keeps it. That
+ * replaces `onPanResponderTerminationRequest: () => false` plus the `DragLock`
+ * that had to switch the scroll view off, because refusing to hand back a JS
+ * responder says nothing to the native recogniser that actually does the
+ * scrolling on iOS.
+ *
+ * Both gestures run on the JS thread. The Drawer's stay worklets because they
+ * only move a shared value; every callback here has to reach React state and
+ * the consumer's `onValueChange`, so the hop is happening either way and
+ * pretending otherwise would only add a way to get it wrong.
  */
-export declare function Slider({ value: controlled, defaultValue, onValueChange, onValueCommit, min, max, step, disabled, tone, style, accessibilityLabel, }: SliderProps): import("react").JSX.Element;
+export declare function Slider({ value: controlled, defaultValue, onValueChange, onValueCommit, min, max, step, disabled, tone, style, accessibilityLabel }: SliderProps): import("react").JSX.Element;
 //# sourceMappingURL=Slider.d.ts.map

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;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"}
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAUtB,OAAO,EAAsB,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAGrE,MAAM,MAAM,UAAU,GAAG,OAAO,CAC9B,aAAa,EACb,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,CAC/C,CAAC;AAEF,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;;;;;;;;;;;;;;;;;;;;GAoBG;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,EACnB,EAAE,WAAW,+BA4Jb"}

package/dist/components/Slider/Slider.js

@@ -1,29 +1,37 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import { PanResponder, View, } from "react-native";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { View } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
 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 { useDragLock } from "../internal/dragLock.js";
 import { valueAt } from "./sliderValue.js";
 const TRACK_HEIGHT = 4;
 const THUMB = 20;
 /**
  * Dragging, on a surface where a drag might belong to something else.
  *
- * The web gets pointer capture: once the thumb is grabbed, every move belongs to
- * the slider until release. React Native has no equivalent, so this claims the
- * gesture through PanResponder and holds it, which is what stops a horizontal
- * drag being read as a scroll by whatever list the slider is sitting in.
+ * The web gets pointer capture: once the thumb is grabbed, every move belongs
+ * to the slider until release. React Native has no equivalent, and volume
+ * sliders live in settings lists, so a horizontal drag has to be told apart
+ * from the scroll it is sitting in.
  *
- * Volume sliders live in scroll views, so this matters more here than it looks.
+ * `activeOffsetX` is that distinction, declared rather than fought over. The
+ * pan claims the gesture once the finger has clearly gone sideways, and a
+ * vertical drag never activates it at all, so the scroll view keeps it. That
+ * replaces `onPanResponderTerminationRequest: () => false` plus the `DragLock`
+ * that had to switch the scroll view off, because refusing to hand back a JS
+ * responder says nothing to the native recogniser that actually does the
+ * scrolling on iOS.
+ *
+ * Both gestures run on the JS thread. The Drawer's stay worklets because they
+ * only move a shared value; every callback here has to reach React state and
+ * the consumer's `onValueChange`, so the hop is happening either way and
+ * pretending otherwise would only add a way to get it wrong.
  */
-export function Slider({ value: controlled, defaultValue = 0, onValueChange, onValueCommit, min = 0, max = 100, step = 1, disabled, tone = "primary", style, accessibilityLabel, }) {
+export function Slider({ value: controlled, defaultValue = 0, onValueChange, onValueCommit, min = 0, max = 100, step = 1, disabled, tone = "primary", style, accessibilityLabel }) {
     const theme = useTheme();
-    // Held for the duration of a drag, so the list this is sitting in stays put.
-    // A no-op outside a ScrollView from this package — see useDragLock.
-    const dragLock = useDragLock();
     const [uncontrolled, setUncontrolled] = useState(defaultValue);
     const value = controlled ?? uncontrolled;
     const [width, setWidth] = useState(0);
@@ -35,11 +43,6 @@ 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 });
-    // Same reason as the others: the responder callbacks are created once, and
-    // the lock's identity changes whenever the count does.
-    const lockRef = useRef(dragLock);
-    /** 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.
@@ -54,9 +57,6 @@ export function Slider({ value: controlled, defaultValue = 0, onValueChange, onV
     useEffect(() => {
         emit.current = { onValueChange, onValueCommit, controlled };
     }, [onValueChange, onValueCommit, controlled]);
-    useEffect(() => {
-        lockRef.current = dragLock;
-    }, [dragLock]);
     const valueFromX = (x) => {
         const s = state.current;
         // Before layout there is no position to read, so hold what we have rather
@@ -70,90 +70,89 @@ export function Slider({ value: controlled, defaultValue = 0, onValueChange, onV
             setUncontrolled(next);
         emit.current.onValueChange?.(next);
     };
-    // useState with an initialiser rather than useRef(...).current, which counts
-    // as reading a ref during render. Created once either way.
-    //
-    // The rule is disabled for the block below because it reads what the closures
-    // mention, not what runs. Every state.current here executes inside a touch
-    // callback, long after render, and none of it decides what is drawn — the
-    // rendered position comes from `value` and `width` directly. The thing the
-    // rule protects against, a component rendering from a ref and not updating,
-    // cannot happen here.
-    /* eslint-disable react-hooks/refs */
-    const [responder] = useState(() => PanResponder.create({
-        onStartShouldSetPanResponder: () => !state.current.disabled,
-        // 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) => {
-            lockRef.current.lock();
-            // Where the finger landed, kept for the drag to offset from.
-            origin.current = e.nativeEvent.locationX;
+    /**
+     * Tap to seek, drag to scrub, and nothing at all if the finger goes down the
+     * page.
+     *
+     * Two gestures rather than one because they want opposite thresholds. A tap
+     * has to work with no movement; a drag must not claim anything until it is
+     * clearly sideways, or every attempt to scroll past a slider moves it. `Race`
+     * lets whichever qualifies win, and only one ever does.
+     */
+    const gesture = useMemo(() => {
+        const seek = (x) => {
+            const s = state.current;
+            if (s.disabled)
+                return;
+            // Absolute position in the track, not accumulated translation.
+            //
+            // The old version anchored on where the gesture started and added
+            // `gesture.dx`, which is the distance from the *start* rather than from
+            // the last event — so offsetting the live value by it added the whole
+            // travel again every move and the thumb accelerated away from the
+            // finger. Reading the position directly cannot express that bug.
+            apply(valueFromX(x));
+        };
+        const pan = Gesture.Pan()
+            .runOnJS(true)
+            .enabled(!disabled)
+            // Sideways, and clearly so. Below this the scroll view keeps the gesture,
+            // which is the whole reason the lock is gone.
+            .activeOffsetX([-4, 4])
+            .onBegin(() => {
+            // On touch down rather than on activation: the press feedback should
+            // answer the finger, not wait to find out where it is going.
             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) => {
-            apply(valueFromX(origin.current + gesture.dx));
-        },
-        // The fix for GRYT-390's "the slider still lets me scroll the page".
-        //
-        // The comment above says this "claims the gesture and holds it". It did
-        // not: `onPanResponderTerminationRequest` defaults to *granting*, so the
-        // enclosing ScrollView asked for the responder as soon as the finger
-        // moved and got it. Every drag inside a scrolling screen scrolled the
-        // screen, which is every drag — volume sliders live in settings lists.
-        //
-        // Saying no is the whole fix. `onShouldBlockNativeResponder` stops the
-        // native scroll view taking over underneath on Android, where the JS
-        // answer alone is not enough.
-        onPanResponderTerminationRequest: () => false,
-        // A refused termination can still happen — the system can take the
-        // responder away regardless, on a call or a notification. Without this
-        // the lock leaks and the screen never scrolls again, which is a far
-        // worse bug than the one being fixed.
-        onPanResponderTerminate: () => {
-            lockRef.current.unlock();
-            thumbScale.value = springy(1);
-        },
-        onShouldBlockNativeResponder: () => true,
-        onPanResponderRelease: () => {
-            lockRef.current.unlock();
+        })
+            .onStart((event) => seek(event.x))
+            .onUpdate((event) => seek(event.x))
+            .onEnd(() => emit.current.onValueCommit?.(state.current.value))
+            .onFinalize(() => {
             thumbScale.value = springy(1);
+        });
+        const tap = Gesture.Tap()
+            .runOnJS(true)
+            .enabled(!disabled)
+            .onEnd((event, success) => {
+            if (!success)
+                return;
+            seek(event.x);
             emit.current.onValueCommit?.(state.current.value);
-        },
-    }));
-    /* eslint-enable react-hooks/refs */
+        });
+        return Gesture.Race(pan, tap);
+        // `apply` and `valueFromX` read refs that are written in effects, so they
+        // do not need to be dependencies — and listing them would rebuild the
+        // gesture on every render.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [disabled, thumbScale]);
     const ratio = (value - min) / (max - min || 1);
-    return (_jsxs(View, { accessibilityRole: "adjustable", accessibilityLabel: accessibilityLabel, accessibilityValue: { min, max, now: value }, onLayout: (e) => setWidth(e.nativeEvent.layout.width), style: [{ height: THUMB, justifyContent: "center", opacity: disabled ? 0.5 : 1 }, style], ...responder.panHandlers, children: [_jsx(View, { style: {
-                    height: TRACK_HEIGHT,
-                    borderRadius: TRACK_HEIGHT / 2,
-                    backgroundColor: theme.scales.neutral[4],
-                }, children: _jsx(View, { style: {
-                        width: `${ratio * 100}%`,
-                        height: "100%",
+    return (_jsx(GestureDetector, { gesture: gesture, children: _jsxs(View, { accessibilityRole: "adjustable", accessibilityLabel: accessibilityLabel, accessibilityValue: { min, max, now: value }, onLayout: (e) => setWidth(e.nativeEvent.layout.width), style: [
+                {
+                    height: THUMB,
+                    justifyContent: "center",
+                    opacity: disabled ? 0.5 : 1
+                },
+                style
+            ], children: [_jsx(View, { style: {
+                        height: TRACK_HEIGHT,
                         borderRadius: TRACK_HEIGHT / 2,
-                        backgroundColor: ramp[8],
-                    } }) }), _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,
-                ] })] }));
+                        backgroundColor: theme.scales.neutral[4]
+                    }, children: _jsx(View, { style: {
+                            width: `${ratio * 100}%`,
+                            height: "100%",
+                            borderRadius: TRACK_HEIGHT / 2,
+                            backgroundColor: ramp[8]
+                        } }) }), _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/index.d.ts

@@ -31,7 +31,6 @@ export { NumberField, type NumberFieldProps } from "./components/NumberField/Num
 export { OtpField, type OtpFieldProps } from "./components/OtpField/OtpField.js";
 export { ScrollArea, type ScrollAreaProps } from "./components/ScrollArea/ScrollArea.js";
 export { Sheet, type SheetCloseProps, type SheetContentProps, type SheetProps, SheetProvider, type SheetProviderProps, type SheetTitleProps, type SheetTriggerProps, } from "./components/Sheet/Sheet.js";
-export { useDragLock, type DragLock } from "./components/internal/dragLock.js";
 export { ToastProvider, useToast, type ToastOptions, type ToastSeverity, } from "./components/Toast/Toast.js";
 export { Toolbar, ToolbarSeparator, type ToolbarProps, type ToolbarSeparatorProps, } from "./components/Toolbar/Toolbar.js";
 export { AnchoredPopup, type AnchoredPopupProps } from "./overlay/AnchoredPopup.js";

package/dist/index.d.ts.map

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

package/dist/index.js

@@ -31,7 +31,6 @@ export { NumberField } from "./components/NumberField/NumberField.js";
 export { OtpField } from "./components/OtpField/OtpField.js";
 export { ScrollArea } from "./components/ScrollArea/ScrollArea.js";
 export { Sheet, SheetProvider, } from "./components/Sheet/Sheet.js";
-export { useDragLock } from "./components/internal/dragLock.js";
 export { ToastProvider, useToast, } from "./components/Toast/Toast.js";
 export { Toolbar, ToolbarSeparator, } from "./components/Toolbar/Toolbar.js";
 export { AnchoredPopup } from "./overlay/AnchoredPopup.js";

package/package.json

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

package/dist/components/internal/dragLock.d.ts

@@ -1,43 +0,0 @@
-/**
- * A control holding a scrolling ancestor still while it is being dragged.
- *
- * This exists because of one bug, and the obvious fixes all fail in ways that
- * look like they worked, so it is worth writing down.
- *
- * Dragging a `Slider` inside a scrolling screen scrolled the screen. The first
- * fix — `onPanResponderTerminationRequest: () => false` — was necessary and not
- * sufficient: it stops the ScrollView taking the responder away, so the thumb
- * follows your finger now, and the page still scrolls underneath. On iOS the
- * scroll is driven by a native `UIPanGestureRecognizer` that is not part of
- * React Native's JS responder system, so refusing to hand over the responder
- * answers a question the native recogniser never asked.
- * `onShouldBlockNativeResponder` is the knob for that, and it is Android-only.
- *
- * What works is `scrollEnabled` — and the control cannot reach the scroll view
- * to set it, since they are separated by however much app markup. So the scroll
- * view publishes a lock, the control claims it, and neither has to know where
- * the other is.
- *
- * `react-native-gesture-handler` solves this properly, by negotiating with the
- * native recogniser rather than switching it off. That is the better fix and it
- * is blocked on GRYT-393: this package ships prebuilt JavaScript, Reanimated's
- * babel plugin does not run over `node_modules`, and gesture callbacks are
- * therefore never worklets. Measured on a device, not assumed. When that is
- * solved, this should probably go.
- */
-export interface DragLock {
-    locked: boolean;
-    lock: () => void;
-    unlock: () => void;
-}
-export declare const DragLockContext: import("react").Context<DragLock | null>;
-/**
- * Claimed by a control for the duration of a drag.
- *
- * No-ops outside a `ScrollArea`, which is the normal case for a control that is
- * not in a scrolling screen. A control must not require the provider: a slider
- * in a fixed panel has nothing to lock, and throwing there would be inventing a
- * dependency on a component it does not need.
- */
-export declare function useDragLock(): DragLock;
-//# sourceMappingURL=dragLock.d.ts.map

package/dist/components/internal/dragLock.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"dragLock.d.ts","sourceRoot":"","sources":["../../../src/components/internal/dragLock.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,WAAW,QAAQ;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,eAAO,MAAM,eAAe,0CAAuC,CAAC;AAQpE;;;;;;;GAOG;AACH,wBAAgB,WAAW,IAAI,QAAQ,CAEtC"}

package/dist/components/internal/dragLock.js

@@ -1,18 +0,0 @@
-import { createContext, useContext } from "react";
-export const DragLockContext = createContext(null);
-const NO_LOCK = {
-    locked: false,
-    lock: () => { },
-    unlock: () => { },
-};
-/**
- * Claimed by a control for the duration of a drag.
- *
- * No-ops outside a `ScrollArea`, which is the normal case for a control that is
- * not in a scrolling screen. A control must not require the provider: a slider
- * in a fixed panel has nothing to lock, and throwing there would be inventing a
- * dependency on a component it does not need.
- */
-export function useDragLock() {
-    return useContext(DragLockContext) ?? NO_LOCK;
-}