@onlynative/inertia 0.0.1-alpha.4 → 0.0.1-alpha.6

package/dist/index.d.mts

@@ -2,8 +2,8 @@ import * as react from 'react';
 import { ComponentType, ReactNode } from 'react';
 import * as react_native from 'react-native';
 import { NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
-import { M as MotionComponent, A as AnimatableValue, T as TransitionConfig, G as GestureLayerTransitions, S as SpringTransition, V as VariantController } from './types-CjztO3RW.mjs';
-export { a as AnimateStyle, b as AnimationCallbackInfo, D as DecayTransition, c as GestureSubStates, d as MotionProps, N as NoAnimationTransition, P as PerPropertyTransition, R as RepeatConfig, e as SequenceStep, f as TimingTransition, g as Transition, h as VariantsMap } from './types-CjztO3RW.mjs';
+import { M as MotionComponent, A as AnimatableValue, T as TransitionConfig, E as EasingInput, G as GestureLayerTransitions, S as SpringTransition, V as VariantController } from './types-NmNeJjo1.mjs';
+export { a as AnimateStyle, b as AnimationCallbackInfo, D as DecayTransition, c as GestureSubStates, d as MotionProps, N as NoAnimationTransition, P as PerPropertyTransition, R as RepeatConfig, e as SequenceStep, f as TimingTransition, g as Transition, h as VariantsMap } from './types-NmNeJjo1.mjs';
 import { SharedValue } from 'react-native-reanimated';
 export { MotionImage } from './motion/Image.mjs';
 export { MotionPressable } from './motion/Pressable.mjs';
@@ -165,10 +165,36 @@ declare function resolveAnimatableValue<V extends number | string>(value: Animat
  * the consumer's worklets babel plugin (the default Expo/RN setup), the
  * wrapper becomes a real worklet that captures the user fn via closure.
  *
+ * Reanimated 4 changed `Easing.bezier(...)` to return an
+ * `EasingFunctionFactory` (`{ factory: () => EasingFunction }`) rather than
+ * the function itself. The helper accepts both shapes — `EasingFunction` and
+ * `EasingFunctionFactory` — and unwraps the factory automatically so
+ * consumers don't have to call `.factory()` manually.
+ *
  * The user fn must be pure: no JS-thread captured refs, no shared mutable
  * state, no calls to non-worklet APIs.
  */
-declare function ensureWorkletEasing(easing: ((t: number) => number) | undefined): ((t: number) => number) | undefined;
+declare function ensureWorkletEasing(easing: EasingInput | undefined): ((t: number) => number) | undefined;
+
+/**
+ * Worklet-safe single-step animation builder. Mirrors a subset of
+ * `resolveTransition` for the UI-thread path where the transition config is
+ * picked at gesture-release time, not at render time.
+ *
+ * Supported: spring / timing / decay / no-animation, single-step only.
+ * Not supported: sequences, top-level repeat, easing-function
+ * auto-worklet-wrapping (pass an already-worklet easing if you need a custom
+ * one — most release transitions don't).
+ *
+ * Use this from gesture worklets (`useDrag` / `usePan` release callbacks, or
+ * any custom `Gesture.Pan().onEnd(() => ...)` worklet) to animate a shared
+ * value with an Inertia transition without the JS round-trip that would lose
+ * the release velocity.
+ *
+ * For decay transitions, `toValue` is ignored — decay decelerates from the
+ * SV's current position via its own physics. Pass `0` if you don't have one.
+ */
+declare function buildReleaseAnimation(transition: TransitionConfig, toValue: number): unknown;
 
 /**
  * Drive a `SharedValue<number>` toward `target` with **any** transition shape
@@ -437,4 +463,4 @@ declare function useScroll(): UseScrollResult;
  */
 declare function useVariants<V extends Readonly<Record<string, object>>>(variants: V, initial?: keyof V & string): VariantController<keyof V & string>;
 
-export { AnimatableValue, type ExtrapolationMode, Motion, MotionComponent, MotionConfig, type MotionConfigValue, Presence, type PresenceContextValue, type ReducedMotion, SpringTransition, TransitionConfig, type UseGestureHandlers, type UseGestureResult, type UseScrollResult, type UseTransformOptions, VariantController, createMotionComponent, ensureWorkletEasing, resolveAnimatableValue, resolveTransition, useAnimation, useGesture, useMotionConfig, useMotionValue, usePresence, useScroll, useShouldReduceMotion, useSpring, useTransform, useVariants };
+export { AnimatableValue, type ExtrapolationMode, Motion, MotionComponent, MotionConfig, type MotionConfigValue, Presence, type PresenceContextValue, type ReducedMotion, SpringTransition, TransitionConfig, type UseGestureHandlers, type UseGestureResult, type UseScrollResult, type UseTransformOptions, VariantController, buildReleaseAnimation, createMotionComponent, ensureWorkletEasing, resolveAnimatableValue, resolveTransition, useAnimation, useGesture, useMotionConfig, useMotionValue, usePresence, useScroll, useShouldReduceMotion, useSpring, useTransform, useVariants };

package/dist/index.d.ts

@@ -2,8 +2,8 @@ import * as react from 'react';
 import { ComponentType, ReactNode } from 'react';
 import * as react_native from 'react-native';
 import { NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
-import { M as MotionComponent, A as AnimatableValue, T as TransitionConfig, G as GestureLayerTransitions, S as SpringTransition, V as VariantController } from './types-CjztO3RW.js';
-export { a as AnimateStyle, b as AnimationCallbackInfo, D as DecayTransition, c as GestureSubStates, d as MotionProps, N as NoAnimationTransition, P as PerPropertyTransition, R as RepeatConfig, e as SequenceStep, f as TimingTransition, g as Transition, h as VariantsMap } from './types-CjztO3RW.js';
+import { M as MotionComponent, A as AnimatableValue, T as TransitionConfig, E as EasingInput, G as GestureLayerTransitions, S as SpringTransition, V as VariantController } from './types-NmNeJjo1.js';
+export { a as AnimateStyle, b as AnimationCallbackInfo, D as DecayTransition, c as GestureSubStates, d as MotionProps, N as NoAnimationTransition, P as PerPropertyTransition, R as RepeatConfig, e as SequenceStep, f as TimingTransition, g as Transition, h as VariantsMap } from './types-NmNeJjo1.js';
 import { SharedValue } from 'react-native-reanimated';
 export { MotionImage } from './motion/Image.js';
 export { MotionPressable } from './motion/Pressable.js';
@@ -165,10 +165,36 @@ declare function resolveAnimatableValue<V extends number | string>(value: Animat
  * the consumer's worklets babel plugin (the default Expo/RN setup), the
  * wrapper becomes a real worklet that captures the user fn via closure.
  *
+ * Reanimated 4 changed `Easing.bezier(...)` to return an
+ * `EasingFunctionFactory` (`{ factory: () => EasingFunction }`) rather than
+ * the function itself. The helper accepts both shapes — `EasingFunction` and
+ * `EasingFunctionFactory` — and unwraps the factory automatically so
+ * consumers don't have to call `.factory()` manually.
+ *
  * The user fn must be pure: no JS-thread captured refs, no shared mutable
  * state, no calls to non-worklet APIs.
  */
-declare function ensureWorkletEasing(easing: ((t: number) => number) | undefined): ((t: number) => number) | undefined;
+declare function ensureWorkletEasing(easing: EasingInput | undefined): ((t: number) => number) | undefined;
+
+/**
+ * Worklet-safe single-step animation builder. Mirrors a subset of
+ * `resolveTransition` for the UI-thread path where the transition config is
+ * picked at gesture-release time, not at render time.
+ *
+ * Supported: spring / timing / decay / no-animation, single-step only.
+ * Not supported: sequences, top-level repeat, easing-function
+ * auto-worklet-wrapping (pass an already-worklet easing if you need a custom
+ * one — most release transitions don't).
+ *
+ * Use this from gesture worklets (`useDrag` / `usePan` release callbacks, or
+ * any custom `Gesture.Pan().onEnd(() => ...)` worklet) to animate a shared
+ * value with an Inertia transition without the JS round-trip that would lose
+ * the release velocity.
+ *
+ * For decay transitions, `toValue` is ignored — decay decelerates from the
+ * SV's current position via its own physics. Pass `0` if you don't have one.
+ */
+declare function buildReleaseAnimation(transition: TransitionConfig, toValue: number): unknown;
 
 /**
  * Drive a `SharedValue<number>` toward `target` with **any** transition shape
@@ -437,4 +463,4 @@ declare function useScroll(): UseScrollResult;
  */
 declare function useVariants<V extends Readonly<Record<string, object>>>(variants: V, initial?: keyof V & string): VariantController<keyof V & string>;
 
-export { AnimatableValue, type ExtrapolationMode, Motion, MotionComponent, MotionConfig, type MotionConfigValue, Presence, type PresenceContextValue, type ReducedMotion, SpringTransition, TransitionConfig, type UseGestureHandlers, type UseGestureResult, type UseScrollResult, type UseTransformOptions, VariantController, createMotionComponent, ensureWorkletEasing, resolveAnimatableValue, resolveTransition, useAnimation, useGesture, useMotionConfig, useMotionValue, usePresence, useScroll, useShouldReduceMotion, useSpring, useTransform, useVariants };
+export { AnimatableValue, type ExtrapolationMode, Motion, MotionComponent, MotionConfig, type MotionConfigValue, Presence, type PresenceContextValue, type ReducedMotion, SpringTransition, TransitionConfig, type UseGestureHandlers, type UseGestureResult, type UseScrollResult, type UseTransformOptions, VariantController, buildReleaseAnimation, createMotionComponent, ensureWorkletEasing, resolveAnimatableValue, resolveTransition, useAnimation, useGesture, useMotionConfig, useMotionValue, usePresence, useScroll, useShouldReduceMotion, useSpring, useTransform, useVariants };

package/dist/index.js

@@ -1461,13 +1461,17 @@ if (globalThis._ALWAYS_FALSE) {
 // src/transitions/easing.ts
 function ensureWorkletEasing(easing) {
   if (!easing) return void 0;
-  if (isWorkletFunction(easing)) return easing;
+  const fn = isEasingFactory(easing) ? easing.factory() : easing;
+  if (isWorkletFunction(fn)) return fn;
   const wrapped = (t) => {
     "worklet";
-    return easing(t);
+    return fn(t);
   };
   return wrapped;
 }
+function isEasingFactory(value) {
+  return typeof value === "object" && value !== null && "factory" in value && typeof value.factory === "function";
+}
 
 // src/transitions/spring.ts
 var DEFAULT_SPRING = {
@@ -1476,6 +1480,7 @@ var DEFAULT_SPRING = {
   mass: 1
 };
 function springToReanimated(t) {
+  "worklet";
   return {
     stiffness: t.tension ?? DEFAULT_SPRING.tension,
     damping: t.friction ?? DEFAULT_SPRING.friction,
@@ -1730,6 +1735,28 @@ function isTopLevelTransition(t) {
   if (keys.length === 0) return false;
   return keys.every((k) => TRANSITION_CONFIG_KEYS.has(k));
 }
+var DEFAULT_TIMING_DURATION2 = 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 Animated.withDecay(cfg);
+  }
+  if (transition.type === "timing") {
+    const e = transition.easing;
+    const easingFn = e && typeof e === "object" && "factory" in e ? e.factory() : e ?? Animated.Easing.inOut(Animated.Easing.ease);
+    return Animated.withTiming(toValue, {
+      duration: transition.duration ?? DEFAULT_TIMING_DURATION2,
+      easing: easingFn
+    });
+  }
+  return Animated.withSpring(toValue, springToReanimated(transition));
+}
 
 // src/transitions/sig.ts
 function stableSig(value) {
@@ -1801,21 +1828,28 @@ var NUMERIC_TOP_LEVEL_KEYS = [
   "opacity",
   "width",
   "height",
-  "borderRadius"
+  "borderRadius",
+  "shadowOpacity",
+  "shadowRadius",
+  "elevation"
 ];
 var COLOR_KEYS = [
   "backgroundColor",
   "borderColor",
   "color",
-  "tintColor"
+  "tintColor",
+  "shadowColor"
 ];
+var SHADOW_OFFSET_KEYS = ["shadowOffsetWidth", "shadowOffsetHeight"];
 var ALL_KEYS = [
   ...TRANSFORM_KEYS,
   ...NUMERIC_TOP_LEVEL_KEYS,
-  ...COLOR_KEYS
+  ...COLOR_KEYS,
+  ...SHADOW_OFFSET_KEYS
 ];
 var TRANSFORM_KEY_SET = new Set(TRANSFORM_KEYS);
 var COLOR_KEY_SET = new Set(COLOR_KEYS);
+var SHADOW_OFFSET_KEY_SET = new Set(SHADOW_OFFSET_KEYS);
 var GESTURE_LAYER_NAMES = [
   "hovered",
   "focused",
@@ -1837,6 +1871,9 @@ var DEFAULT_RESTING = {
   width: 0,
   height: 0,
   borderRadius: 0,
+  shadowOpacity: 0,
+  shadowRadius: 0,
+  elevation: 0,
   // 'transparent' is the only safe universal default for colors: it works as
   // an initial seed for any color animation (no jarring opaque flash on mount
   // when `initial` is omitted) and rgba(0,0,0,0) interpolates cleanly into
@@ -1844,7 +1881,10 @@ var DEFAULT_RESTING = {
   backgroundColor: "transparent",
   borderColor: "transparent",
   color: "transparent",
-  tintColor: "transparent"
+  tintColor: "transparent",
+  shadowColor: "transparent",
+  shadowOffsetWidth: 0,
+  shadowOffsetHeight: 0
 };
 function transitionFor(prop, transition) {
   if (!transition) return void 0;
@@ -1898,16 +1938,12 @@ function createMotionComponent(Component) {
     const activeKeysRef = react.useRef(null);
     if (activeKeysRef.current === null) {
       const touched = /* @__PURE__ */ new Set();
-      for (const k of ALL_KEYS) {
-        if (k in animateRecord) touched.add(k);
-        if (initialRecord && k in initialRecord) touched.add(k);
-      }
+      collectTouchedKeys(touched, animateRecord);
+      if (initialRecord) collectTouchedKeys(touched, initialRecord);
       if (variants) {
         for (const variant of Object.values(variants)) {
           if (!variant) continue;
-          for (const k of ALL_KEYS) {
-            if (k in variant) touched.add(k);
-          }
+          collectTouchedKeys(touched, variant);
         }
       }
       if (gesture) {
@@ -1918,22 +1954,29 @@ function createMotionComponent(Component) {
           gesture.hovered
         ]) {
           if (!subState) continue;
-          for (const k of ALL_KEYS) {
-            if (k in subState) touched.add(k);
-          }
-        }
-      }
-      if (exitRecord) {
-        for (const k of ALL_KEYS) {
-          if (k in exitRecord) touched.add(k);
+          collectTouchedKeys(touched, subState);
         }
       }
+      if (exitRecord) collectTouchedKeys(touched, exitRecord);
       activeKeysRef.current = ALL_KEYS.filter((k) => touched.has(k));
     }
     const hasTransformRef = react.useRef(
       activeKeysRef.current.some((k) => TRANSFORM_KEY_SET.has(k))
     );
+    const hasShadowOffsetRef = react.useRef(
+      activeKeysRef.current.some((k) => SHADOW_OFFSET_KEY_SET.has(k))
+    );
     const sharedValues = useAnimatableSharedValues((key) => {
+      if (SHADOW_OFFSET_KEY_SET.has(key)) {
+        const axis = shadowOffsetAxisFor(key);
+        if (initial === false) {
+          return shadowOffsetAxisValue(animateRecord.shadowOffset, axis) ?? DEFAULT_RESTING[key];
+        }
+        return shadowOffsetAxisValue(
+          initialRecord?.shadowOffset,
+          axis
+        ) ?? shadowOffsetAxisValue(animateRecord.shadowOffset, axis) ?? DEFAULT_RESTING[key];
+      }
       if (initial === false) {
         const a = animateRecord[key];
         return restValue(a) ?? DEFAULT_RESTING[key];
@@ -1979,9 +2022,15 @@ function createMotionComponent(Component) {
       }
       const transformGroup = transformPending > 0 ? { remaining: transformPending } : void 0;
       for (const key of ALL_KEYS) {
-        const target = baseRecord[key];
+        const target = SHADOW_OFFSET_KEY_SET.has(key) ? shadowOffsetAxisValue(
+          baseRecord.shadowOffset,
+          shadowOffsetAxisFor(key)
+        ) : baseRecord[key];
         if (target === void 0) continue;
-        const cfg = shouldReduceMotion ? { type: "no-animation" } : transitionFor(key, transition);
+        const cfg = shouldReduceMotion ? { type: "no-animation" } : transitionFor(
+          SHADOW_OFFSET_KEY_SET.has(key) ? "shadowOffset" : key,
+          transition
+        );
         if (isExiting) pending++;
         const factory = makeKeyCallbackFactory(
           key,
@@ -2044,8 +2093,11 @@ function createMotionComponent(Component) {
     const animatedStyle = Animated.useAnimatedStyle(() => {
       const activeKeys = activeKeysRef.current;
       const hasTransform = hasTransformRef.current;
+      const hasShadowOffset = hasShadowOffsetRef.current;
       const out = {};
       const transform = [];
+      let shadowOffsetW = 0;
+      let shadowOffsetH = 0;
       const ph = hoveredProgress.value;
       const pf = focusedProgress.value;
       const pfv = focusVisibleProgress.value;
@@ -2078,11 +2130,18 @@ function createMotionComponent(Component) {
           transform.push(
             ROTATION_KEYS.has(key) ? { [key]: `${v}deg` } : { [key]: v }
           );
+        } else if (key === "shadowOffsetWidth") {
+          shadowOffsetW = v;
+        } else if (key === "shadowOffsetHeight") {
+          shadowOffsetH = v;
         } else {
           out[key] = v;
         }
       }
       if (hasTransform) out.transform = transform;
+      if (hasShadowOffset) {
+        out.shadowOffset = { width: shadowOffsetW, height: shadowOffsetH };
+      }
       return out;
     });
     const mergedStyle = react.useMemo(
@@ -2130,12 +2189,22 @@ function useAnimatableSharedValues(init2) {
   const width = Animated.useSharedValue(init2("width"));
   const height = Animated.useSharedValue(init2("height"));
   const borderRadius = Animated.useSharedValue(init2("borderRadius"));
+  const shadowOpacity = Animated.useSharedValue(init2("shadowOpacity"));
+  const shadowRadius = Animated.useSharedValue(init2("shadowRadius"));
+  const elevation = Animated.useSharedValue(init2("elevation"));
   const backgroundColor = Animated.useSharedValue(
     init2("backgroundColor")
   );
   const borderColor = Animated.useSharedValue(init2("borderColor"));
   const color = Animated.useSharedValue(init2("color"));
   const tintColor = Animated.useSharedValue(init2("tintColor"));
+  const shadowColor = Animated.useSharedValue(init2("shadowColor"));
+  const shadowOffsetWidth = Animated.useSharedValue(
+    init2("shadowOffsetWidth")
+  );
+  const shadowOffsetHeight = Animated.useSharedValue(
+    init2("shadowOffsetHeight")
+  );
   const ref = react.useRef(null);
   if (ref.current === null) {
     ref.current = {
@@ -2151,10 +2220,16 @@ function useAnimatableSharedValues(init2) {
       width,
       height,
       borderRadius,
+      shadowOpacity,
+      shadowRadius,
+      elevation,
       backgroundColor,
       borderColor,
       color,
-      tintColor
+      tintColor,
+      shadowColor,
+      shadowOffsetWidth,
+      shadowOffsetHeight
     };
   }
   return ref.current;
@@ -2222,6 +2297,22 @@ function makeKeyCallbackFactory(key, sharedValue, target, onAnimationEndRef, met
     return cb;
   };
 }
+function shadowOffsetAxisFor(key) {
+  return key === "shadowOffsetWidth" ? "width" : "height";
+}
+function shadowOffsetAxisValue(source, axis) {
+  return source?.[axis];
+}
+function collectTouchedKeys(touched, record) {
+  for (const k of ALL_KEYS) {
+    if (k in record) touched.add(k);
+  }
+  if ("shadowOffset" in record && record.shadowOffset) {
+    const so = record.shadowOffset;
+    if (so.width !== void 0) touched.add("shadowOffsetWidth");
+    if (so.height !== void 0) touched.add("shadowOffsetHeight");
+  }
+}
 function stepCountOf(v) {
   if (Array.isArray(v)) return v.length;
   return 1;
@@ -2291,6 +2382,13 @@ function resolveGestureLayers(gesture) {
     if (!subState) continue;
     const resolved = {};
     for (const key of ALL_KEYS) {
+      if (SHADOW_OFFSET_KEY_SET.has(key)) {
+        const axis = shadowOffsetAxisFor(key);
+        const so = subState.shadowOffset;
+        const v = shadowOffsetAxisValue(so, axis);
+        if (v !== void 0) resolved[key] = v;
+        continue;
+      }
       const raw = subState[key];
       if (raw === void 0) continue;
       const t = targetEndValue(raw);
@@ -2578,6 +2676,7 @@ exports.MotionScrollView = MotionScrollView;
 exports.MotionText = MotionText;
 exports.MotionView = MotionView;
 exports.Presence = Presence;
+exports.buildReleaseAnimation = buildReleaseAnimation;
 exports.createMotionComponent = createMotionComponent;
 exports.ensureWorkletEasing = ensureWorkletEasing;
 exports.resolveAnimatableValue = resolveAnimatableValue;