@onlynative/inertia 0.0.1-alpha.7 → 0.0.1-alpha.9

package/dist/touch/index.d.mts

@@ -0,0 +1,146 @@
+import { PanResponderInstance } from 'react-native';
+import { useAnimatedStyle, SharedValue } from 'react-native-reanimated';
+import { T as TransitionConfig } from '../types-cU43dEmH.mjs';
+import 'react';
+
+/**
+ * Same drag-result shape as `useDrag` from `@onlynative/inertia-gestures`,
+ * minus the `gesture` field (PanResponder spreads handlers, no
+ * `<GestureDetector>` wrapper). The shared values + animatedStyle are
+ * interchangeable across both hooks; consumers can swap implementations
+ * without touching their `useAnimatedStyle` consumers.
+ */
+interface UseTouchDragResult {
+    /** Spread onto a `View` / `Pressable` to install the pan responder. */
+    panHandlers: PanResponderInstance['panHandlers'];
+    /** Stable animated `transform` style. */
+    animatedStyle: ReturnType<typeof useAnimatedStyle>;
+    /** Live x translation, persistent across gestures. */
+    dragX: SharedValue<number>;
+    /** Live y translation, persistent across gestures. */
+    dragY: SharedValue<number>;
+    /** True while the gesture is active. */
+    isDragging: SharedValue<boolean>;
+}
+/**
+ * Release transition shape for PanResponder's JS-thread `onRelease`. Mirrors
+ * the gesture-handler adapter's `ReleaseTransition` but with `to` typed as
+ * required for spring/timing/no-animation (decay omits it).
+ */
+type TouchReleaseTransition = (TransitionConfig & {
+    type: 'spring';
+    to: number;
+}) | (TransitionConfig & {
+    type: 'timing';
+    to: number;
+}) | (TransitionConfig & {
+    type: 'decay';
+}) | (TransitionConfig & {
+    type: 'no-animation';
+    to: number;
+});
+interface TouchReleaseInfo {
+    x: number;
+    y: number;
+    velocity: {
+        x: number;
+        y: number;
+    };
+}
+interface TouchReleaseResult {
+    x?: TouchReleaseTransition;
+    y?: TouchReleaseTransition;
+}
+interface UseTouchDragOptions {
+    /**
+     * Restrict the drag to one axis. Defaults to `'both'`. When `'x'` is set
+     * the y-axis shared value never updates (and vice versa); velocity is
+     * still reported on both for `onDragEnd`.
+     */
+    axis?: 'x' | 'y' | 'both';
+    /**
+     * Travel bounds (px from resting). Each side is independently optional.
+     * Out-of-bounds values clamp to the limit unless `elastic > 0`.
+     */
+    constraints?: {
+        left?: number;
+        right?: number;
+        top?: number;
+        bottom?: number;
+    };
+    /**
+     * Rubber-band coefficient applied to overshoot past `constraints`. `0`
+     * (default) hard-clamps; `0.2`-`0.4` is a typical Framer-Motion feel.
+     */
+    elastic?: number;
+    /**
+     * Fires when the user starts dragging. JS thread.
+     */
+    onDragStart?: () => void;
+    /**
+     * Fires when the user releases or the gesture terminates. JS thread.
+     *
+     * Velocity is in px/sec to match the `@onlynative/inertia-gestures` API
+     * (PanResponder's native `vx` / `vy` are px/ms; the hook normalizes).
+     */
+    onDragEnd?: (info: TouchReleaseInfo) => void;
+    /**
+     * Optional release-animation callback. Return per-axis release transitions
+     * to animate the SVs to a settled position via Inertia's transition
+     * resolver — spring snap-to-tick, decay with bounds, timing settle.
+     *
+     * Unlike the gesture-handler version, this callback runs on the **JS
+     * thread** (PanResponder is JS-only). The returned transitions still drive
+     * UI-thread animations via Reanimated — only the decision logic is JS-side.
+     */
+    onRelease?: (info: TouchReleaseInfo) => TouchReleaseResult | void;
+}
+/**
+ * PanResponder-backed drag hook. Pointer-equivalent of `useDrag` from
+ * `@onlynative/inertia-gestures`, with two differences:
+ *
+ *   1. No `react-native-gesture-handler` peer dep required — PanResponder is
+ *      built into React Native, so this lives in core.
+ *   2. Returns `panHandlers` to spread on a `View` / `Pressable` instead of
+ *      a `gesture` to plug into `<GestureDetector>`.
+ *
+ * Use this when:
+ *   - You need keyboard a11y alongside drag (a slider with arrow-key step,
+ *     a scrollbar with `PageUp` / `PageDown`). PanResponder composes
+ *     cleanly with `onKeyDown`; gesture-handler doesn't surface keyboard.
+ *   - You don't want to take `react-native-gesture-handler` as a dependency
+ *     (smaller bundle, simpler install).
+ *
+ * Skip this when:
+ *   - You're already using `react-native-gesture-handler` elsewhere (use
+ *     `useDrag` from `@onlynative/inertia-gestures` for consistency and
+ *     better worklet-thread fidelity on release velocity).
+ *   - You need momentum semantics like the gesture-handler `usePan` —
+ *     PanResponder's release velocity is JS-thread and slightly less precise.
+ *
+ * @example
+ * ```tsx
+ * import { useTouchDrag } from '@onlynative/inertia/touch'
+ *
+ * function Slider({ ticks }: { ticks: number[] }) {
+ *   const drag = useTouchDrag({
+ *     axis: 'x',
+ *     constraints: { left: 0, right: 280 },
+ *     onRelease: (e) => {
+ *       const snap = nearestTick(e.x, ticks)
+ *       return { x: { type: 'spring', to: snap, velocity: e.velocity.x } }
+ *     },
+ *   })
+ *
+ *   return (
+ *     <Motion.View
+ *       style={[styles.thumb, drag.animatedStyle]}
+ *       {...drag.panHandlers}
+ *     />
+ *   )
+ * }
+ * ```
+ */
+declare function useTouchDrag(options?: UseTouchDragOptions): UseTouchDragResult;
+
+export { type TouchReleaseInfo, type TouchReleaseResult, type TouchReleaseTransition, type UseTouchDragOptions, type UseTouchDragResult, useTouchDrag };

package/dist/touch/index.d.ts

@@ -0,0 +1,146 @@
+import { PanResponderInstance } from 'react-native';
+import { useAnimatedStyle, SharedValue } from 'react-native-reanimated';
+import { T as TransitionConfig } from '../types-cU43dEmH.js';
+import 'react';
+
+/**
+ * Same drag-result shape as `useDrag` from `@onlynative/inertia-gestures`,
+ * minus the `gesture` field (PanResponder spreads handlers, no
+ * `<GestureDetector>` wrapper). The shared values + animatedStyle are
+ * interchangeable across both hooks; consumers can swap implementations
+ * without touching their `useAnimatedStyle` consumers.
+ */
+interface UseTouchDragResult {
+    /** Spread onto a `View` / `Pressable` to install the pan responder. */
+    panHandlers: PanResponderInstance['panHandlers'];
+    /** Stable animated `transform` style. */
+    animatedStyle: ReturnType<typeof useAnimatedStyle>;
+    /** Live x translation, persistent across gestures. */
+    dragX: SharedValue<number>;
+    /** Live y translation, persistent across gestures. */
+    dragY: SharedValue<number>;
+    /** True while the gesture is active. */
+    isDragging: SharedValue<boolean>;
+}
+/**
+ * Release transition shape for PanResponder's JS-thread `onRelease`. Mirrors
+ * the gesture-handler adapter's `ReleaseTransition` but with `to` typed as
+ * required for spring/timing/no-animation (decay omits it).
+ */
+type TouchReleaseTransition = (TransitionConfig & {
+    type: 'spring';
+    to: number;
+}) | (TransitionConfig & {
+    type: 'timing';
+    to: number;
+}) | (TransitionConfig & {
+    type: 'decay';
+}) | (TransitionConfig & {
+    type: 'no-animation';
+    to: number;
+});
+interface TouchReleaseInfo {
+    x: number;
+    y: number;
+    velocity: {
+        x: number;
+        y: number;
+    };
+}
+interface TouchReleaseResult {
+    x?: TouchReleaseTransition;
+    y?: TouchReleaseTransition;
+}
+interface UseTouchDragOptions {
+    /**
+     * Restrict the drag to one axis. Defaults to `'both'`. When `'x'` is set
+     * the y-axis shared value never updates (and vice versa); velocity is
+     * still reported on both for `onDragEnd`.
+     */
+    axis?: 'x' | 'y' | 'both';
+    /**
+     * Travel bounds (px from resting). Each side is independently optional.
+     * Out-of-bounds values clamp to the limit unless `elastic > 0`.
+     */
+    constraints?: {
+        left?: number;
+        right?: number;
+        top?: number;
+        bottom?: number;
+    };
+    /**
+     * Rubber-band coefficient applied to overshoot past `constraints`. `0`
+     * (default) hard-clamps; `0.2`-`0.4` is a typical Framer-Motion feel.
+     */
+    elastic?: number;
+    /**
+     * Fires when the user starts dragging. JS thread.
+     */
+    onDragStart?: () => void;
+    /**
+     * Fires when the user releases or the gesture terminates. JS thread.
+     *
+     * Velocity is in px/sec to match the `@onlynative/inertia-gestures` API
+     * (PanResponder's native `vx` / `vy` are px/ms; the hook normalizes).
+     */
+    onDragEnd?: (info: TouchReleaseInfo) => void;
+    /**
+     * Optional release-animation callback. Return per-axis release transitions
+     * to animate the SVs to a settled position via Inertia's transition
+     * resolver — spring snap-to-tick, decay with bounds, timing settle.
+     *
+     * Unlike the gesture-handler version, this callback runs on the **JS
+     * thread** (PanResponder is JS-only). The returned transitions still drive
+     * UI-thread animations via Reanimated — only the decision logic is JS-side.
+     */
+    onRelease?: (info: TouchReleaseInfo) => TouchReleaseResult | void;
+}
+/**
+ * PanResponder-backed drag hook. Pointer-equivalent of `useDrag` from
+ * `@onlynative/inertia-gestures`, with two differences:
+ *
+ *   1. No `react-native-gesture-handler` peer dep required — PanResponder is
+ *      built into React Native, so this lives in core.
+ *   2. Returns `panHandlers` to spread on a `View` / `Pressable` instead of
+ *      a `gesture` to plug into `<GestureDetector>`.
+ *
+ * Use this when:
+ *   - You need keyboard a11y alongside drag (a slider with arrow-key step,
+ *     a scrollbar with `PageUp` / `PageDown`). PanResponder composes
+ *     cleanly with `onKeyDown`; gesture-handler doesn't surface keyboard.
+ *   - You don't want to take `react-native-gesture-handler` as a dependency
+ *     (smaller bundle, simpler install).
+ *
+ * Skip this when:
+ *   - You're already using `react-native-gesture-handler` elsewhere (use
+ *     `useDrag` from `@onlynative/inertia-gestures` for consistency and
+ *     better worklet-thread fidelity on release velocity).
+ *   - You need momentum semantics like the gesture-handler `usePan` —
+ *     PanResponder's release velocity is JS-thread and slightly less precise.
+ *
+ * @example
+ * ```tsx
+ * import { useTouchDrag } from '@onlynative/inertia/touch'
+ *
+ * function Slider({ ticks }: { ticks: number[] }) {
+ *   const drag = useTouchDrag({
+ *     axis: 'x',
+ *     constraints: { left: 0, right: 280 },
+ *     onRelease: (e) => {
+ *       const snap = nearestTick(e.x, ticks)
+ *       return { x: { type: 'spring', to: snap, velocity: e.velocity.x } }
+ *     },
+ *   })
+ *
+ *   return (
+ *     <Motion.View
+ *       style={[styles.thumb, drag.animatedStyle]}
+ *       {...drag.panHandlers}
+ *     />
+ *   )
+ * }
+ * ```
+ */
+declare function useTouchDrag(options?: UseTouchDragOptions): UseTouchDragResult;
+
+export { type TouchReleaseInfo, type TouchReleaseResult, type TouchReleaseTransition, type UseTouchDragOptions, type UseTouchDragResult, useTouchDrag };

package/dist/touch/index.js

@@ -0,0 +1,166 @@
+'use strict';
+
+var react = require('react');
+var reactNative = require('react-native');
+var reactNativeReanimated = require('react-native-reanimated');
+
+// src/touch/useTouchDrag.ts
+
+// src/transitions/spring.ts
+var DEFAULT_SPRING = {
+  tension: 170,
+  friction: 26,
+  mass: 1
+};
+function springToReanimated(t) {
+  "worklet";
+  return {
+    stiffness: t.tension ?? DEFAULT_SPRING.tension,
+    damping: t.friction ?? DEFAULT_SPRING.friction,
+    mass: t.mass ?? DEFAULT_SPRING.mass,
+    velocity: t.velocity,
+    restSpeedThreshold: t.restSpeedThreshold,
+    restDisplacementThreshold: t.restDisplacementThreshold
+  };
+}
+var DEFAULT_TIMING_DURATION = 250;
+function buildReleaseAnimation(transition, toValue) {
+  "worklet";
+  if (transition.type === "no-animation") return toValue;
+  if (transition.type === "decay") {
+    const cfg = { velocity: transition.velocity ?? 0 };
+    if (transition.deceleration !== void 0) {
+      cfg.deceleration = transition.deceleration;
+    }
+    if (transition.clamp !== void 0) cfg.clamp = transition.clamp;
+    return reactNativeReanimated.withDecay(cfg);
+  }
+  if (transition.type === "timing") {
+    const e = transition.easing;
+    const easingFn = e && typeof e === "object" && "factory" in e ? e.factory() : e ?? reactNativeReanimated.Easing.inOut(reactNativeReanimated.Easing.ease);
+    return reactNativeReanimated.withTiming(toValue, {
+      duration: transition.duration ?? DEFAULT_TIMING_DURATION,
+      easing: easingFn
+    });
+  }
+  return reactNativeReanimated.withSpring(toValue, springToReanimated(transition));
+}
+
+// src/touch/useTouchDrag.ts
+function useTouchDrag(options = {}) {
+  const { axis = "both", constraints, elastic = 0 } = options;
+  const dragX = reactNativeReanimated.useSharedValue(0);
+  const dragY = reactNativeReanimated.useSharedValue(0);
+  const startX = reactNativeReanimated.useSharedValue(0);
+  const startY = reactNativeReanimated.useSharedValue(0);
+  const isDragging = reactNativeReanimated.useSharedValue(false);
+  const lockX = axis !== "y";
+  const lockY = axis !== "x";
+  const left = constraints?.left;
+  const right = constraints?.right;
+  const top = constraints?.top;
+  const bottom = constraints?.bottom;
+  const elasticCoef = elastic;
+  const { onDragStart, onDragEnd, onRelease } = options;
+  const responder = react.useMemo(
+    () => buildResponder(),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      lockX,
+      lockY,
+      left,
+      right,
+      top,
+      bottom,
+      elasticCoef,
+      onDragStart,
+      onDragEnd,
+      onRelease
+    ]
+  );
+  function buildResponder() {
+    const handleEnd = (g) => {
+      isDragging.value = false;
+      const x = dragX.value;
+      const y = dragY.value;
+      const vx = g.vx * 1e3;
+      const vy = g.vy * 1e3;
+      if (onRelease) {
+        const result = onRelease({ x, y, velocity: { x: vx, y: vy } });
+        if (result) {
+          if (result.x && lockX) {
+            const toX = "to" in result.x ? result.x.to : x;
+            dragX.value = buildReleaseAnimation(
+              result.x,
+              toX
+            );
+          }
+          if (result.y && lockY) {
+            const toY = "to" in result.y ? result.y.to : y;
+            dragY.value = buildReleaseAnimation(
+              result.y,
+              toY
+            );
+          }
+        }
+      }
+      if (onDragEnd) onDragEnd({ x, y, velocity: { x: vx, y: vy } });
+    };
+    return reactNative.PanResponder.create({
+      // Always claim the start so taps that turn into drags don't slip
+      // through to a parent ScrollView. Consumers can compose their own
+      // capture predicates by wrapping the returned `panHandlers`.
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderGrant: () => {
+        startX.value = dragX.value;
+        startY.value = dragY.value;
+        isDragging.value = true;
+        if (onDragStart) onDragStart();
+      },
+      onPanResponderMove: (_e, g) => {
+        if (lockX) {
+          dragX.value = applyBounds(
+            startX.value + g.dx,
+            left,
+            right,
+            elasticCoef
+          );
+        }
+        if (lockY) {
+          dragY.value = applyBounds(
+            startY.value + g.dy,
+            top,
+            bottom,
+            elasticCoef
+          );
+        }
+      },
+      onPanResponderRelease: (_e, g) => handleEnd(g),
+      onPanResponderTerminate: (_e, g) => handleEnd(g)
+    });
+  }
+  const animatedStyle = reactNativeReanimated.useAnimatedStyle(() => ({
+    transform: [{ translateX: dragX.value }, { translateY: dragY.value }]
+  }));
+  return {
+    panHandlers: responder.panHandlers,
+    animatedStyle,
+    dragX,
+    dragY,
+    isDragging
+  };
+}
+function applyBounds(value, min, max, elastic) {
+  if (min !== void 0 && value < min) {
+    return elastic > 0 ? min + (value - min) * elastic : min;
+  }
+  if (max !== void 0 && value > max) {
+    return elastic > 0 ? max + (value - max) * elastic : max;
+  }
+  return value;
+}
+
+exports.useTouchDrag = useTouchDrag;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/touch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/transitions/spring.ts","../../src/transitions/runtime.ts","../../src/touch/useTouchDrag.ts"],"names":["withDecay","Easing","withTiming","withSpring","useSharedValue","useMemo","PanResponder","useAnimatedStyle"],"mappings":"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","file":"index.js","sourcesContent":["import { type SpringTransition } from '../types'\n\n/**\n * Default spring physics, expressed in react-spring vocabulary.\n *\n * `tension: 170` / `friction: 26` / `mass: 1` was picked over Reanimated's\n * raw `stiffness: 100` / `damping: 10` default because the raw default\n * overshoots noticeably for the small (~100px) translates that dominate\n * UI work — buttons, sheets, popovers. These numbers settle in ~350ms with\n * a single, almost-imperceptible overshoot, which matches the perceptual\n * target the rest of the library is tuned against.\n */\nexport const DEFAULT_SPRING: Required<\n  Pick<SpringTransition, 'tension' | 'friction' | 'mass'>\n> = {\n  tension: 170,\n  friction: 26,\n  mass: 1,\n}\n\n/**\n * Convert public react-spring vocabulary (`tension` / `friction` / `mass`)\n * to Reanimated's raw `stiffness` / `damping` / `mass`. This is the single\n * place the mapping lives; resolvers, value hooks, and any future surface\n * that needs a Reanimated spring config import from here.\n *\n * The mapping is identity (tension ≡ stiffness, friction ≡ damping) — the\n * names differ but the underlying physics constants are the same. We don't\n * surface the raw names publicly because the react-spring vocabulary is\n * what designers and prior-art consumers expect.\n */\nexport function springToReanimated(t: SpringTransition) {\n  'worklet'\n  return {\n    stiffness: t.tension ?? DEFAULT_SPRING.tension,\n    damping: t.friction ?? DEFAULT_SPRING.friction,\n    mass: t.mass ?? DEFAULT_SPRING.mass,\n    velocity: t.velocity,\n    restSpeedThreshold: t.restSpeedThreshold,\n    restDisplacementThreshold: t.restDisplacementThreshold,\n  }\n}\n","import {\n  Easing,\n  withDecay,\n  withSpring,\n  withTiming,\n} from 'react-native-reanimated'\nimport { springToReanimated } from './spring'\nimport { type TransitionConfig } from '../types'\n\nconst DEFAULT_TIMING_DURATION = 250\n\n/**\n * Worklet-safe single-step animation builder. Mirrors a subset of\n * `resolveTransition` for the UI-thread path where the transition config is\n * picked at gesture-release time, not at render time.\n *\n * Supported: spring / timing / decay / no-animation, single-step only.\n * Not supported: sequences, top-level repeat, easing-function\n * auto-worklet-wrapping (pass an already-worklet easing if you need a custom\n * one — most release transitions don't).\n *\n * Use this from gesture worklets (`useDrag` / `usePan` release callbacks, or\n * any custom `Gesture.Pan().onEnd(() => ...)` worklet) to animate a shared\n * value with an Inertia transition without the JS round-trip that would lose\n * the release velocity.\n *\n * For decay transitions, `toValue` is ignored — decay decelerates from the\n * SV's current position via its own physics. Pass `0` if you don't have one.\n */\nexport function buildReleaseAnimation(\n  transition: TransitionConfig,\n  toValue: number,\n): unknown {\n  'worklet'\n  if (transition.type === 'no-animation') return toValue\n  if (transition.type === 'decay') {\n    const cfg: {\n      velocity: number\n      deceleration?: number\n      clamp?: [number, number]\n    } = { velocity: transition.velocity ?? 0 }\n    if (transition.deceleration !== undefined) {\n      cfg.deceleration = transition.deceleration\n    }\n    if (transition.clamp !== undefined) cfg.clamp = transition.clamp\n    return withDecay(cfg)\n  }\n  if (transition.type === 'timing') {\n    // Reanimated 4's `Easing.bezier(...)` returns an `EasingFunctionFactory`\n    // rather than the function itself. Unwrap inline so consumers calling\n    // `buildReleaseAnimation` from a gesture worklet don't have to.\n    const e = transition.easing\n    const easingFn =\n      e && typeof e === 'object' && 'factory' in e\n        ? e.factory()\n        : (e ?? Easing.inOut(Easing.ease))\n    return withTiming(toValue, {\n      duration: transition.duration ?? DEFAULT_TIMING_DURATION,\n      easing: easingFn,\n    })\n  }\n  return withSpring(toValue, springToReanimated(transition))\n}\n","import { useMemo } from 'react'\nimport {\n  PanResponder,\n  type PanResponderGestureState,\n  type PanResponderInstance,\n} from 'react-native'\nimport {\n  useAnimatedStyle,\n  useSharedValue,\n  type SharedValue,\n} from 'react-native-reanimated'\nimport { buildReleaseAnimation } from '../transitions'\nimport type { TransitionConfig } from '../types'\n\n/**\n * Same drag-result shape as `useDrag` from `@onlynative/inertia-gestures`,\n * minus the `gesture` field (PanResponder spreads handlers, no\n * `<GestureDetector>` wrapper). The shared values + animatedStyle are\n * interchangeable across both hooks; consumers can swap implementations\n * without touching their `useAnimatedStyle` consumers.\n */\nexport interface UseTouchDragResult {\n  /** Spread onto a `View` / `Pressable` to install the pan responder. */\n  panHandlers: PanResponderInstance['panHandlers']\n  /** Stable animated `transform` style. */\n  animatedStyle: ReturnType<typeof useAnimatedStyle>\n  /** Live x translation, persistent across gestures. */\n  dragX: SharedValue<number>\n  /** Live y translation, persistent across gestures. */\n  dragY: SharedValue<number>\n  /** True while the gesture is active. */\n  isDragging: SharedValue<boolean>\n}\n\n/**\n * Release transition shape for PanResponder's JS-thread `onRelease`. Mirrors\n * the gesture-handler adapter's `ReleaseTransition` but with `to` typed as\n * required for spring/timing/no-animation (decay omits it).\n */\nexport type TouchReleaseTransition =\n  | (TransitionConfig & { type: 'spring'; to: number })\n  | (TransitionConfig & { type: 'timing'; to: number })\n  | (TransitionConfig & { type: 'decay' })\n  | (TransitionConfig & { type: 'no-animation'; to: number })\n\nexport interface TouchReleaseInfo {\n  x: number\n  y: number\n  velocity: { x: number; y: number }\n}\n\nexport interface TouchReleaseResult {\n  x?: TouchReleaseTransition\n  y?: TouchReleaseTransition\n}\n\nexport interface UseTouchDragOptions {\n  /**\n   * Restrict the drag to one axis. Defaults to `'both'`. When `'x'` is set\n   * the y-axis shared value never updates (and vice versa); velocity is\n   * still reported on both for `onDragEnd`.\n   */\n  axis?: 'x' | 'y' | 'both'\n  /**\n   * Travel bounds (px from resting). Each side is independently optional.\n   * Out-of-bounds values clamp to the limit unless `elastic > 0`.\n   */\n  constraints?: {\n    left?: number\n    right?: number\n    top?: number\n    bottom?: number\n  }\n  /**\n   * Rubber-band coefficient applied to overshoot past `constraints`. `0`\n   * (default) hard-clamps; `0.2`-`0.4` is a typical Framer-Motion feel.\n   */\n  elastic?: number\n  /**\n   * Fires when the user starts dragging. JS thread.\n   */\n  onDragStart?: () => void\n  /**\n   * Fires when the user releases or the gesture terminates. JS thread.\n   *\n   * Velocity is in px/sec to match the `@onlynative/inertia-gestures` API\n   * (PanResponder's native `vx` / `vy` are px/ms; the hook normalizes).\n   */\n  onDragEnd?: (info: TouchReleaseInfo) => void\n  /**\n   * Optional release-animation callback. Return per-axis release transitions\n   * to animate the SVs to a settled position via Inertia's transition\n   * resolver — spring snap-to-tick, decay with bounds, timing settle.\n   *\n   * Unlike the gesture-handler version, this callback runs on the **JS\n   * thread** (PanResponder is JS-only). The returned transitions still drive\n   * UI-thread animations via Reanimated — only the decision logic is JS-side.\n   */\n  onRelease?: (info: TouchReleaseInfo) => TouchReleaseResult | void\n}\n\n/**\n * PanResponder-backed drag hook. Pointer-equivalent of `useDrag` from\n * `@onlynative/inertia-gestures`, with two differences:\n *\n *   1. No `react-native-gesture-handler` peer dep required — PanResponder is\n *      built into React Native, so this lives in core.\n *   2. Returns `panHandlers` to spread on a `View` / `Pressable` instead of\n *      a `gesture` to plug into `<GestureDetector>`.\n *\n * Use this when:\n *   - You need keyboard a11y alongside drag (a slider with arrow-key step,\n *     a scrollbar with `PageUp` / `PageDown`). PanResponder composes\n *     cleanly with `onKeyDown`; gesture-handler doesn't surface keyboard.\n *   - You don't want to take `react-native-gesture-handler` as a dependency\n *     (smaller bundle, simpler install).\n *\n * Skip this when:\n *   - You're already using `react-native-gesture-handler` elsewhere (use\n *     `useDrag` from `@onlynative/inertia-gestures` for consistency and\n *     better worklet-thread fidelity on release velocity).\n *   - You need momentum semantics like the gesture-handler `usePan` —\n *     PanResponder's release velocity is JS-thread and slightly less precise.\n *\n * @example\n * ```tsx\n * import { useTouchDrag } from '@onlynative/inertia/touch'\n *\n * function Slider({ ticks }: { ticks: number[] }) {\n *   const drag = useTouchDrag({\n *     axis: 'x',\n *     constraints: { left: 0, right: 280 },\n *     onRelease: (e) => {\n *       const snap = nearestTick(e.x, ticks)\n *       return { x: { type: 'spring', to: snap, velocity: e.velocity.x } }\n *     },\n *   })\n *\n *   return (\n *     <Motion.View\n *       style={[styles.thumb, drag.animatedStyle]}\n *       {...drag.panHandlers}\n *     />\n *   )\n * }\n * ```\n */\nexport function useTouchDrag(\n  options: UseTouchDragOptions = {},\n): UseTouchDragResult {\n  const { axis = 'both', constraints, elastic = 0 } = options\n\n  const dragX = useSharedValue(0)\n  const dragY = useSharedValue(0)\n  const startX = useSharedValue(0)\n  const startY = useSharedValue(0)\n  const isDragging = useSharedValue(false)\n\n  // Snapshot scalars into local consts so the responder callbacks close over\n  // primitives, not the `options` literal — a fresh `options` each render\n  // would otherwise force the PanResponder identity to change.\n  const lockX = axis !== 'y'\n  const lockY = axis !== 'x'\n  const left = constraints?.left\n  const right = constraints?.right\n  const top = constraints?.top\n  const bottom = constraints?.bottom\n  const elasticCoef = elastic\n  const { onDragStart, onDragEnd, onRelease } = options\n\n  const responder = useMemo(\n    () => buildResponder(),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      lockX,\n      lockY,\n      left,\n      right,\n      top,\n      bottom,\n      elasticCoef,\n      onDragStart,\n      onDragEnd,\n      onRelease,\n    ],\n  )\n\n  // Hoisted out of the inline `useMemo` factory to keep the dep list readable\n  // and avoid re-declaring closure helpers each render.\n  function buildResponder(): PanResponderInstance {\n    const handleEnd = (g: PanResponderGestureState) => {\n      isDragging.value = false\n      const x = dragX.value\n      const y = dragY.value\n      // PanResponder velocity is px/ms; multiply to match the\n      // `@onlynative/inertia-gestures` API (px/sec from gesture-handler).\n      const vx = g.vx * 1000\n      const vy = g.vy * 1000\n      if (onRelease) {\n        const result = onRelease({ x, y, velocity: { x: vx, y: vy } })\n        if (result) {\n          if (result.x && lockX) {\n            const toX = 'to' in result.x ? result.x.to : x\n            dragX.value = buildReleaseAnimation(\n              result.x,\n              toX,\n            ) as unknown as number\n          }\n          if (result.y && lockY) {\n            const toY = 'to' in result.y ? result.y.to : y\n            dragY.value = buildReleaseAnimation(\n              result.y,\n              toY,\n            ) as unknown as number\n          }\n        }\n      }\n      if (onDragEnd) onDragEnd({ x, y, velocity: { x: vx, y: vy } })\n    }\n\n    return PanResponder.create({\n      // Always claim the start so taps that turn into drags don't slip\n      // through to a parent ScrollView. Consumers can compose their own\n      // capture predicates by wrapping the returned `panHandlers`.\n      onStartShouldSetPanResponder: () => true,\n      onMoveShouldSetPanResponder: () => true,\n      onPanResponderGrant: () => {\n        startX.value = dragX.value\n        startY.value = dragY.value\n        isDragging.value = true\n        if (onDragStart) onDragStart()\n      },\n      onPanResponderMove: (_e, g) => {\n        if (lockX) {\n          dragX.value = applyBounds(\n            startX.value + g.dx,\n            left,\n            right,\n            elasticCoef,\n          )\n        }\n        if (lockY) {\n          dragY.value = applyBounds(\n            startY.value + g.dy,\n            top,\n            bottom,\n            elasticCoef,\n          )\n        }\n      },\n      onPanResponderRelease: (_e, g) => handleEnd(g),\n      onPanResponderTerminate: (_e, g) => handleEnd(g),\n    })\n  }\n\n  const animatedStyle = useAnimatedStyle(() => ({\n    transform: [{ translateX: dragX.value }, { translateY: dragY.value }],\n  }))\n\n  return {\n    panHandlers: responder.panHandlers,\n    animatedStyle,\n    dragX,\n    dragY,\n    isDragging,\n  }\n}\n\n/**\n * Clamp `value` to `[min, max]`. When `elastic > 0` the overshoot past a\n * bound is scaled by `elastic`, giving a rubber-band feel. `min` / `max`\n * may be `undefined` to leave that side unbounded.\n *\n * JS-thread (PanResponder callbacks are JS, not worklets).\n */\nfunction applyBounds(\n  value: number,\n  min: number | undefined,\n  max: number | undefined,\n  elastic: number,\n): number {\n  if (min !== undefined && value < min) {\n    return elastic > 0 ? min + (value - min) * elastic : min\n  }\n  if (max !== undefined && value > max) {\n    return elastic > 0 ? max + (value - max) * elastic : max\n  }\n  return value\n}\n"]}

package/dist/touch/index.mjs

@@ -0,0 +1,164 @@
+import { useMemo } from 'react';
+import { PanResponder } from 'react-native';
+import { useSharedValue, useAnimatedStyle, withDecay, Easing, withTiming, withSpring } from 'react-native-reanimated';
+
+// src/touch/useTouchDrag.ts
+
+// src/transitions/spring.ts
+var DEFAULT_SPRING = {
+  tension: 170,
+  friction: 26,
+  mass: 1
+};
+function springToReanimated(t) {
+  "worklet";
+  return {
+    stiffness: t.tension ?? DEFAULT_SPRING.tension,
+    damping: t.friction ?? DEFAULT_SPRING.friction,
+    mass: t.mass ?? DEFAULT_SPRING.mass,
+    velocity: t.velocity,
+    restSpeedThreshold: t.restSpeedThreshold,
+    restDisplacementThreshold: t.restDisplacementThreshold
+  };
+}
+var DEFAULT_TIMING_DURATION = 250;
+function buildReleaseAnimation(transition, toValue) {
+  "worklet";
+  if (transition.type === "no-animation") return toValue;
+  if (transition.type === "decay") {
+    const cfg = { velocity: transition.velocity ?? 0 };
+    if (transition.deceleration !== void 0) {
+      cfg.deceleration = transition.deceleration;
+    }
+    if (transition.clamp !== void 0) cfg.clamp = transition.clamp;
+    return withDecay(cfg);
+  }
+  if (transition.type === "timing") {
+    const e = transition.easing;
+    const easingFn = e && typeof e === "object" && "factory" in e ? e.factory() : e ?? Easing.inOut(Easing.ease);
+    return withTiming(toValue, {
+      duration: transition.duration ?? DEFAULT_TIMING_DURATION,
+      easing: easingFn
+    });
+  }
+  return withSpring(toValue, springToReanimated(transition));
+}
+
+// src/touch/useTouchDrag.ts
+function useTouchDrag(options = {}) {
+  const { axis = "both", constraints, elastic = 0 } = options;
+  const dragX = useSharedValue(0);
+  const dragY = useSharedValue(0);
+  const startX = useSharedValue(0);
+  const startY = useSharedValue(0);
+  const isDragging = useSharedValue(false);
+  const lockX = axis !== "y";
+  const lockY = axis !== "x";
+  const left = constraints?.left;
+  const right = constraints?.right;
+  const top = constraints?.top;
+  const bottom = constraints?.bottom;
+  const elasticCoef = elastic;
+  const { onDragStart, onDragEnd, onRelease } = options;
+  const responder = useMemo(
+    () => buildResponder(),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      lockX,
+      lockY,
+      left,
+      right,
+      top,
+      bottom,
+      elasticCoef,
+      onDragStart,
+      onDragEnd,
+      onRelease
+    ]
+  );
+  function buildResponder() {
+    const handleEnd = (g) => {
+      isDragging.value = false;
+      const x = dragX.value;
+      const y = dragY.value;
+      const vx = g.vx * 1e3;
+      const vy = g.vy * 1e3;
+      if (onRelease) {
+        const result = onRelease({ x, y, velocity: { x: vx, y: vy } });
+        if (result) {
+          if (result.x && lockX) {
+            const toX = "to" in result.x ? result.x.to : x;
+            dragX.value = buildReleaseAnimation(
+              result.x,
+              toX
+            );
+          }
+          if (result.y && lockY) {
+            const toY = "to" in result.y ? result.y.to : y;
+            dragY.value = buildReleaseAnimation(
+              result.y,
+              toY
+            );
+          }
+        }
+      }
+      if (onDragEnd) onDragEnd({ x, y, velocity: { x: vx, y: vy } });
+    };
+    return PanResponder.create({
+      // Always claim the start so taps that turn into drags don't slip
+      // through to a parent ScrollView. Consumers can compose their own
+      // capture predicates by wrapping the returned `panHandlers`.
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderGrant: () => {
+        startX.value = dragX.value;
+        startY.value = dragY.value;
+        isDragging.value = true;
+        if (onDragStart) onDragStart();
+      },
+      onPanResponderMove: (_e, g) => {
+        if (lockX) {
+          dragX.value = applyBounds(
+            startX.value + g.dx,
+            left,
+            right,
+            elasticCoef
+          );
+        }
+        if (lockY) {
+          dragY.value = applyBounds(
+            startY.value + g.dy,
+            top,
+            bottom,
+            elasticCoef
+          );
+        }
+      },
+      onPanResponderRelease: (_e, g) => handleEnd(g),
+      onPanResponderTerminate: (_e, g) => handleEnd(g)
+    });
+  }
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: dragX.value }, { translateY: dragY.value }]
+  }));
+  return {
+    panHandlers: responder.panHandlers,
+    animatedStyle,
+    dragX,
+    dragY,
+    isDragging
+  };
+}
+function applyBounds(value, min, max, elastic) {
+  if (min !== void 0 && value < min) {
+    return elastic > 0 ? min + (value - min) * elastic : min;
+  }
+  if (max !== void 0 && value > max) {
+    return elastic > 0 ? max + (value - max) * elastic : max;
+  }
+  return value;
+}
+
+export { useTouchDrag };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map