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

package/dist/index.d.ts

@@ -2,9 +2,10 @@ 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, 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';
+import { M as MotionComponent, A as AnimatableValue, T as TransitionConfig, E as EasingInput, S as SpringTransition, V as VariantController } from './types-BwyvoH2V.js';
+export { a as AnimateStyle, b as AnimationCallbackInfo, D as DecayTransition, G as GestureSubStates, c as MotionProps, N as NoAnimationTransition, P as PerPropertyTransition, R as RepeatConfig, d as SequenceStep, e as TimingTransition, f as Transition, g as VariantsMap } from './types-BwyvoH2V.js';
+import { SharedValue, useAnimatedStyle } from 'react-native-reanimated';
+export { U as UseGestureHandlers, a as UseGestureResult, u as useGesture } from './useGesture-BPPp9LhV.js';
 export { MotionImage } from './motion/Image.js';
 export { MotionPressable } from './motion/Pressable.js';
 export { MotionScrollView } from './motion/ScrollView.js';
@@ -243,84 +244,68 @@ declare function buildReleaseAnimation(transition: TransitionConfig, toValue: nu
 declare function useAnimation(target: number, transition?: TransitionConfig): SharedValue<number>;
 
 /**
- * Handler bag returned by `useGesture`. Spread on a `Pressable` to drive the
- * shared values returned alongside.
+ * Toggle a 0↔1 progress value with a spring whenever `active` flips.
  *
- * Hover handlers use `Pressable`'s own `onHoverIn` / `onHoverOut` names (web
- * only — no-ops on native). `onFocus` consults `isFocusVisible()` before
- * raising the keyboard-only `focusVisible` layer; `focused` always raises.
+ * This is the recurring shape behind checkbox checks, accordion expansions,
+ * drawer open/closed states, focus rings, and every other binary UI flip
+ * that wants spring physics rather than a hard cut. The returned shared
+ * value sits at `0` when `active` is `false` and animates toward `1` when
+ * `active` flips to `true` (and back again on the reverse flip). Feed it to
+ * a `useTransform`, `useShadow`, or a hand-rolled `useAnimatedStyle` to
+ * drive whatever the boolean controls visually.
+ *
+ * ```tsx
+ * const progress = useBooleanSpring(isChecked)
+ * const indicatorStyle = useAnimatedStyle(() => ({
+ *   opacity: progress.value,
+ *   transform: [{ scale: progress.value }],
+ * }))
+ * ```
+ *
+ * The spring config follows the same react-spring vocabulary as the rest of
+ * the library (`tension` / `friction` / `mass`); omit it to take the
+ * library's defaults.
  */
-interface UseGestureHandlers {
-    onPressIn: () => void;
-    onPressOut: () => void;
-    onHoverIn: () => void;
-    onHoverOut: () => void;
-    onFocus: () => void;
-    onBlur: () => void;
-}
-interface UseGestureResult {
-    /** 0↔1 progress for the pressed layer. */
-    pressed: SharedValue<number>;
-    /** 0↔1 progress for the focused layer (any focus modality). */
-    focused: SharedValue<number>;
-    /** 0↔1 progress for the focusVisible layer (keyboard focus only). */
-    focusVisible: SharedValue<number>;
-    /** 0↔1 progress for the hovered layer (web only — stays at 0 on native). */
-    hovered: SharedValue<number>;
-    /** Handlers to spread on the receiving `Pressable`. */
-    handlers: UseGestureHandlers;
+declare function useBooleanSpring(active: boolean, springConfig?: SpringTransition): SharedValue<number>;
+
+/**
+ * Color style keys understood by React Native that this hook can target.
+ * Sticks to the keys that exist on the v0.1 animatable surface so the
+ * returned style fragment is always a legal RN style.
+ */
+type ColorStyleKey = 'backgroundColor' | 'color' | 'borderColor' | 'borderTopColor' | 'borderRightColor' | 'borderBottomColor' | 'borderLeftColor' | 'tintColor' | 'shadowColor';
+interface UseColorTransitionOptions {
+    /**
+     * Which style slot the interpolated color is emitted under. Defaults to
+     * `backgroundColor` — the dominant case for state-layer haloes, card
+     * fills, and chip surfaces. Override for ring colors (`borderColor`),
+     * text colors (`color`), image tints (`tintColor`), etc.
+     */
+    key?: ColorStyleKey;
 }
 /**
- * Build a gesture-layer controller. The hook-form of the `gesture` prop —
- * reach for it when you need to drive multiple animated views from the same
- * gesture state (a focus ring + state-layer halo + content tint all on one
- * Pressable), which the prop-form's "animate the receiver's own style" model
- * can't express.
- *
- * Returns four 0↔1 shared values (one per layer) and a handler bag to spread
- * on a `Pressable`. The shared values are stable across renders — feed them
- * into any number of `useAnimatedStyle` blocks anywhere in the tree.
- *
- * Transitions follow the same shape as the `gesture` prop's accompanying
- * `transition`: pass a single `TransitionConfig` to use for every layer, or a
- * `GestureLayerTransitions` map to give each layer its own. Layers without an
- * explicit transition fall back to the library default spring.
+ * Interpolate a single color channel between `from` and `to` as `progress`
+ * moves 0→1, returning an animated style fragment that can be spread onto
+ * any Reanimated-aware view.
  *
- * Reduced motion (via `<MotionConfig reducedMotion>`) collapses every
- * transition to `no-animation` so state changes snap instead of interpolating
- * — same behaviour the gesture prop applies.
- *
- * @example
  * ```tsx
- * import { useAnimatedStyle } from 'react-native-reanimated'
- * import { useGesture } from '@onlynative/inertia'
- *
- * function Card() {
- *   const { pressed, focused, hovered, handlers } = useGesture({
- *     pressed: { type: 'timing', duration: 100 },
- *     hovered: { type: 'timing', duration: 150 },
- *     focused: { type: 'timing', duration: 200 },
- *   })
- *
- *   const ringStyle = useAnimatedStyle(() => ({ opacity: focused.value }))
- *   const haloStyle = useAnimatedStyle(() => ({
- *     opacity: Math.max(
- *       hovered.value * 0.08,
- *       focused.value * 0.10,
- *       pressed.value * 0.10,
- *     ),
- *   }))
- *
- *   return (
- *     <Pressable {...handlers}>
- *       <Animated.View style={ringStyle} />
- *       <Animated.View style={haloStyle} />
- *     </Pressable>
- *   )
- * }
+ * const progress = useBooleanSpring(isPressed)
+ * const fillStyle = useColorTransition(progress, [colors.surface, colors.pressed])
+ * const ringStyle = useColorTransition(progress, [colors.outline, colors.primary], {
+ *   key: 'borderColor',
+ * })
+ *
+ * return <Motion.View style={[styles.chip, fillStyle, ringStyle]} />
  * ```
+ *
+ * This is a pure interpolator: it does not animate on its own. Drive
+ * `progress` upstream with a `useSpring`, `useBooleanSpring`, gesture
+ * progress, or scroll-derived `useTransform`. Values outside `[0, 1]`
+ * clamp. For a raw `SharedValue<string>` (e.g. to feed a gradient or
+ * compose into a hand-rolled `useAnimatedStyle`), use `useTransform`
+ * directly with a color output range.
  */
-declare function useGesture(transition?: TransitionConfig | GestureLayerTransitions): UseGestureResult;
+declare function useColorTransition(progress: SharedValue<number>, range: readonly [string, string], options?: UseColorTransitionOptions): ReturnType<typeof useAnimatedStyle>;
 
 /**
  * Create an animatable value owned by JS but readable from worklets.
@@ -450,6 +435,61 @@ interface UseScrollResult {
  */
 declare function useScroll(): UseScrollResult;
 
+/**
+ * Shape accepted on either end of a `useShadow` tween. Every field is
+ * optional — only keys present on at least one side participate in the
+ * output style. Mirrors the flat shadow keys on `Motion.View`'s `animate`
+ * surface, plus the nested `shadowOffset` source.
+ */
+interface ShadowConfig {
+    shadowOpacity?: number;
+    shadowRadius?: number;
+    shadowOffset?: {
+        width?: number;
+        height?: number;
+    };
+    /** Android elevation. iOS shadow consumers can leave this off. */
+    elevation?: number;
+    shadowColor?: string;
+}
+interface UseShadowOptions {
+    /** Shadow state at `progress === 0`. */
+    from: ShadowConfig;
+    /** Shadow state at `progress === 1`. */
+    to: ShadowConfig;
+    /**
+     * Driver — typically 0→1. Whatever produces it (a `useSpring`, a gesture
+     * progress value, a scroll-derived `useTransform`) is the caller's
+     * concern. The hook is a pure interpolator; it does not animate on its
+     * own. Values outside `[0, 1]` clamp.
+     */
+    progress: SharedValue<number>;
+}
+/**
+ * Interpolate between two shadow configs as `progress` moves 0→1, returning
+ * an animated style fragment that can be spread onto any Reanimated-aware
+ * view (including `Motion.*` primitives and a hand-rolled `Animated.View`).
+ *
+ * ```tsx
+ * const progress = useSpring(isElevated ? 1 : 0)
+ * const shadowStyle = useShadow({
+ *   from: { shadowOpacity: 0.08, shadowRadius: 2, shadowOffset: { width: 0, height: 1 }, elevation: 1 },
+ *   to:   { shadowOpacity: 0.24, shadowRadius: 12, shadowOffset: { width: 0, height: 8 }, elevation: 8 },
+ *   progress,
+ * })
+ *
+ * return <Motion.View style={[styles.card, shadowStyle]} />
+ * ```
+ *
+ * Only keys present on either `from` or `to` are emitted. A key present on
+ * one side and absent on the other tweens from the present value to the
+ * absent side's natural zero (`0` for numbers, `'transparent'` for
+ * `shadowColor`, `{ width: 0, height: 0 }` for `shadowOffset`). This is a
+ * pure interpolator — to "animate" the shadow, drive `progress` with a
+ * spring, timing, or gesture upstream.
+ */
+declare function useShadow({ from, to, progress, }: UseShadowOptions): ReturnType<typeof useAnimatedStyle>;
+
 /**
  * Build a controller for a variants map. The controller is the imperative
  * escape hatch — pass it to a Motion primitive via `controller={...}` and
@@ -463,4 +503,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, buildReleaseAnimation, createMotionComponent, ensureWorkletEasing, resolveAnimatableValue, resolveTransition, useAnimation, useGesture, useMotionConfig, useMotionValue, usePresence, useScroll, useShouldReduceMotion, useSpring, useTransform, useVariants };
+export { AnimatableValue, type ColorStyleKey, type ExtrapolationMode, Motion, MotionComponent, MotionConfig, type MotionConfigValue, Presence, type PresenceContextValue, type ReducedMotion, type ShadowConfig, SpringTransition, TransitionConfig, type UseColorTransitionOptions, type UseScrollResult, type UseShadowOptions, type UseTransformOptions, VariantController, buildReleaseAnimation, createMotionComponent, ensureWorkletEasing, resolveAnimatableValue, resolveTransition, useAnimation, useBooleanSpring, useColorTransition, useMotionConfig, useMotionValue, usePresence, useScroll, useShadow, useShouldReduceMotion, useSpring, useTransform, useVariants };

package/dist/index.js

@@ -1217,8 +1217,8 @@ function setupSetTimeout() {
     const start = performance.now();
     let timeoutHandle = 0;
     const rafCallback = () => {
-      const now = performance.now();
-      if (now - start >= delay) {
+      const now2 = performance.now();
+      if (now2 - start >= delay) {
         callback(...args);
         timeoutHandleToRafHandle.delete(timeoutHandle);
       } else {
@@ -1512,6 +1512,157 @@ function resolveLayoutTransition(layout) {
   if ("delay" in spring && spring.delay) builder = builder.delay(spring.delay);
   return builder;
 }
+
+// src/layout/sharedRegistry.ts
+var REGISTRY = /* @__PURE__ */ new Map();
+var SHARED_LAYOUT_TTL_MS = 1e3;
+var now = () => Date.now();
+function registerLayout(id, rect) {
+  REGISTRY.set(id, { rect, expiresAt: now() + SHARED_LAYOUT_TTL_MS });
+}
+function releaseLayout(id, rect) {
+  REGISTRY.set(id, { rect, expiresAt: now() + SHARED_LAYOUT_TTL_MS });
+}
+function consumeLayout(id) {
+  const entry = REGISTRY.get(id);
+  if (!entry) return void 0;
+  REGISTRY.delete(id);
+  if (entry.expiresAt < now()) return void 0;
+  return entry.rect;
+}
+function useSharedLayout(options) {
+  const { layoutId, userRef, transition, shouldReduceMotion, userOnLayout } = options;
+  const dx = Animated.useSharedValue(0);
+  const dy = Animated.useSharedValue(0);
+  const sx = Animated.useSharedValue(1);
+  const sy = Animated.useSharedValue(1);
+  const lastRectRef = react.useRef(null);
+  const consumedRef = react.useRef(false);
+  const transitionRef = react.useRef(transition);
+  transitionRef.current = transition;
+  const reducedMotionRef = react.useRef(shouldReduceMotion);
+  reducedMotionRef.current = shouldReduceMotion;
+  const setRef = react.useCallback(
+    (node) => {
+      if (typeof userRef === "function") userRef(node);
+      else if (userRef) userRef.current = node;
+    },
+    [userRef]
+  );
+  const onLayout = react.useCallback(
+    (event) => {
+      userOnLayout?.(event);
+      if (!layoutId) return;
+      const { x, y, width, height } = event.nativeEvent.layout;
+      const rect = { x, y, width, height };
+      lastRectRef.current = rect;
+      let source;
+      if (!consumedRef.current) {
+        consumedRef.current = true;
+        source = consumeLayout(layoutId);
+      }
+      registerLayout(layoutId, rect);
+      if (source) {
+        applyFlip({
+          source,
+          target: rect,
+          dx,
+          dy,
+          sx,
+          sy,
+          transition: transitionRef.current,
+          shouldReduceMotion: reducedMotionRef.current
+        });
+      }
+    },
+    // dx/dy/sx/sy are stable refs from useSharedValue, but eslint's
+    // exhaustive-deps would flag them — including them is harmless and
+    // silences the warning.
+    [layoutId, userOnLayout, dx, dy, sx, sy]
+  );
+  react.useEffect(() => {
+    consumedRef.current = false;
+  }, [layoutId]);
+  react.useEffect(() => {
+    return () => {
+      if (!layoutId) return;
+      const rect = lastRectRef.current;
+      if (!rect) return;
+      releaseLayout(layoutId, rect);
+    };
+  }, [layoutId]);
+  return react.useMemo(
+    () => ({
+      flip: { dx, dy, sx, sy },
+      setRef,
+      onLayout
+    }),
+    [dx, dy, sx, sy, setRef, onLayout]
+  );
+}
+function applyFlip(args) {
+  const { source, target, dx, dy, sx, sy, transition, shouldReduceMotion } = args;
+  const sourceCenterX = source.x + source.width / 2;
+  const sourceCenterY = source.y + source.height / 2;
+  const targetCenterX = target.x + target.width / 2;
+  const targetCenterY = target.y + target.height / 2;
+  const deltaX = sourceCenterX - targetCenterX;
+  const deltaY = sourceCenterY - targetCenterY;
+  const scaleX = target.width > 0 ? source.width / target.width : 1;
+  const scaleY = target.height > 0 ? source.height / target.height : 1;
+  if (shouldReduceMotion) {
+    dx.value = 0;
+    dy.value = 0;
+    sx.value = 1;
+    sy.value = 1;
+    return;
+  }
+  if (transition?.type === "no-animation") {
+    dx.value = 0;
+    dy.value = 0;
+    sx.value = 1;
+    sy.value = 1;
+    return;
+  }
+  if (transition?.type === "timing") {
+    const duration = transition.duration ?? 300;
+    dx.value = Animated.withSequence(
+      Animated.withTiming(deltaX, { duration: 0 }),
+      Animated.withTiming(0, { duration })
+    );
+    dy.value = Animated.withSequence(
+      Animated.withTiming(deltaY, { duration: 0 }),
+      Animated.withTiming(0, { duration })
+    );
+    sx.value = Animated.withSequence(
+      Animated.withTiming(scaleX, { duration: 0 }),
+      Animated.withTiming(1, { duration })
+    );
+    sy.value = Animated.withSequence(
+      Animated.withTiming(scaleY, { duration: 0 }),
+      Animated.withTiming(1, { duration })
+    );
+    return;
+  }
+  const springCfg = transition?.type === "spring" ? { ...DEFAULT_SPRING, ...transition } : { ...DEFAULT_SPRING };
+  const springParams = springToReanimated(springCfg);
+  dx.value = Animated.withSequence(
+    Animated.withTiming(deltaX, { duration: 0 }),
+    Animated.withSpring(0, springParams)
+  );
+  dy.value = Animated.withSequence(
+    Animated.withTiming(deltaY, { duration: 0 }),
+    Animated.withSpring(0, springParams)
+  );
+  sx.value = Animated.withSequence(
+    Animated.withTiming(scaleX, { duration: 0 }),
+    Animated.withSpring(1, springParams)
+  );
+  sy.value = Animated.withSequence(
+    Animated.withTiming(scaleY, { duration: 0 }),
+    Animated.withSpring(1, springParams)
+  );
+}
 var PresenceContext = react.createContext(null);
 function usePresence() {
   return react.useContext(PresenceContext);
@@ -1913,10 +2064,17 @@ function createMotionComponent(Component) {
       controller,
       gesture,
       layout,
+      layoutId,
       onAnimationEnd,
       style,
+      onLayout: userOnLayout,
       ...rest
     } = props;
+    if (__DEV__ && typeof style === "function") {
+      throw new Error(
+        "[inertia] `style` must be a style object or array of style objects, not a function. The function-form `style={(state) => ...}` Pressable API is not supported \u2014 use `gesture.pressed` (or `gesture.focused`, etc.) to drive state-dependent styling instead."
+      );
+    }
     const presence = usePresence();
     const isExiting = presence !== null && presence.isPresent === false;
     const shouldReduceMotion = useShouldReduceMotion();
@@ -2090,6 +2248,15 @@ function createMotionComponent(Component) {
       isExiting,
       shouldReduceMotion
     );
+    const sharedLayout = useSharedLayout({
+      layoutId,
+      userRef: ref,
+      transition: isTopLevelTransition(transition) ? transition : void 0,
+      shouldReduceMotion,
+      userOnLayout
+    });
+    const flip = sharedLayout.flip;
+    const hasLayoutId = layoutId !== void 0;
     const animatedStyle = Animated.useAnimatedStyle(() => {
       const activeKeys = activeKeysRef.current;
       const hasTransform = hasTransformRef.current;
@@ -2138,7 +2305,13 @@ function createMotionComponent(Component) {
           out[key] = v;
         }
       }
-      if (hasTransform) out.transform = transform;
+      if (hasLayoutId) {
+        transform.push({ translateX: flip.dx.value });
+        transform.push({ translateY: flip.dy.value });
+        transform.push({ scaleX: flip.sx.value });
+        transform.push({ scaleY: flip.sy.value });
+      }
+      if (hasTransform || hasLayoutId) out.transform = transform;
       if (hasShadowOffset) {
         out.shadowOffset = { width: shadowOffsetW, height: shadowOffsetH };
       }
@@ -2165,9 +2338,10 @@ function createMotionComponent(Component) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       AnimatedComponent,
       {
-        ref,
+        ref: sharedLayout.setRef,
         ...rest,
         ...gestureHandlers,
+        onLayout: sharedLayout.onLayout,
         layout: layoutTransition,
         style: mergedStyle
       }
@@ -2496,6 +2670,57 @@ function useAnimation(target, transition) {
   }, [target, cfgSig, shouldReduceMotion]);
   return output;
 }
+function useSpring(target, config) {
+  const reanimConfig = react.useMemo(
+    () => springToReanimated(config ?? {}),
+    [
+      config?.tension,
+      config?.friction,
+      config?.mass,
+      config?.velocity,
+      config?.restSpeedThreshold,
+      config?.restDisplacementThreshold
+    ]
+  );
+  const isSharedTarget = isSharedValue(target);
+  const initial = isSharedTarget ? target.value : target;
+  const output = Animated.useSharedValue(initial);
+  react.useEffect(() => {
+    if (isSharedTarget) return;
+    output.value = Animated.withSpring(target, reanimConfig);
+  }, [isSharedTarget, target, reanimConfig]);
+  Animated.useAnimatedReaction(
+    () => {
+      "worklet";
+      if (!isSharedTarget) return null;
+      return target.value;
+    },
+    (next, prev) => {
+      "worklet";
+      if (next === null || next === prev) return;
+      output.value = Animated.withSpring(next, reanimConfig);
+    },
+    [isSharedTarget, reanimConfig]
+  );
+  return output;
+}
+function isSharedValue(v) {
+  return typeof v === "object" && v !== null && "value" in v;
+}
+
+// src/values/useBooleanSpring.ts
+function useBooleanSpring(active, springConfig) {
+  return useSpring(active ? 1 : 0, springConfig);
+}
+function useColorTransition(progress, range, options) {
+  const key = options?.key ?? "backgroundColor";
+  const from = range[0];
+  const to = range[1];
+  return Animated.useAnimatedStyle(() => {
+    "worklet";
+    return { [key]: Animated.interpolateColor(progress.value, [0, 1], [from, to]) };
+  });
+}
 function useGesture(transition) {
   const pressed = Animated.useSharedValue(0);
   const focused = Animated.useSharedValue(0);
@@ -2543,43 +2768,6 @@ function layerTransition(layer, transition) {
 function useMotionValue(initial) {
   return Animated.useSharedValue(initial);
 }
-function useSpring(target, config) {
-  const reanimConfig = react.useMemo(
-    () => springToReanimated(config ?? {}),
-    [
-      config?.tension,
-      config?.friction,
-      config?.mass,
-      config?.velocity,
-      config?.restSpeedThreshold,
-      config?.restDisplacementThreshold
-    ]
-  );
-  const isSharedTarget = isSharedValue(target);
-  const initial = isSharedTarget ? target.value : target;
-  const output = Animated.useSharedValue(initial);
-  react.useEffect(() => {
-    if (isSharedTarget) return;
-    output.value = Animated.withSpring(target, reanimConfig);
-  }, [isSharedTarget, target, reanimConfig]);
-  Animated.useAnimatedReaction(
-    () => {
-      "worklet";
-      if (!isSharedTarget) return null;
-      return target.value;
-    },
-    (next, prev) => {
-      "worklet";
-      if (next === null || next === prev) return;
-      output.value = Animated.withSpring(next, reanimConfig);
-    },
-    [isSharedTarget, reanimConfig]
-  );
-  return output;
-}
-function isSharedValue(v) {
-  return typeof v === "object" && v !== null && "value" in v;
-}
 function useTransform(arg1, inputRange, outputRange, options) {
   let producer;
   if (typeof arg1 === "function") {
@@ -2635,6 +2823,53 @@ function useScroll() {
     onScroll: handler
   };
 }
+function useShadow({
+  from,
+  to,
+  progress
+}) {
+  const hasOpacity = from.shadowOpacity !== void 0 || to.shadowOpacity !== void 0;
+  const hasRadius = from.shadowRadius !== void 0 || to.shadowRadius !== void 0;
+  const hasElevation = from.elevation !== void 0 || to.elevation !== void 0;
+  const hasColor = from.shadowColor !== void 0 || to.shadowColor !== void 0;
+  const hasOffset = from.shadowOffset !== void 0 || to.shadowOffset !== void 0;
+  const opacityFrom = from.shadowOpacity ?? 0;
+  const opacityTo = to.shadowOpacity ?? 0;
+  const radiusFrom = from.shadowRadius ?? 0;
+  const radiusTo = to.shadowRadius ?? 0;
+  const elevationFrom = from.elevation ?? 0;
+  const elevationTo = to.elevation ?? 0;
+  const colorFrom = from.shadowColor ?? "transparent";
+  const colorTo = to.shadowColor ?? "transparent";
+  const offsetWFrom = from.shadowOffset?.width ?? 0;
+  const offsetWTo = to.shadowOffset?.width ?? 0;
+  const offsetHFrom = from.shadowOffset?.height ?? 0;
+  const offsetHTo = to.shadowOffset?.height ?? 0;
+  return Animated.useAnimatedStyle(() => {
+    "worklet";
+    const t = progress.value;
+    const out = {};
+    if (hasOpacity) {
+      out.shadowOpacity = Animated.interpolate(t, [0, 1], [opacityFrom, opacityTo]);
+    }
+    if (hasRadius) {
+      out.shadowRadius = Animated.interpolate(t, [0, 1], [radiusFrom, radiusTo]);
+    }
+    if (hasElevation) {
+      out.elevation = Animated.interpolate(t, [0, 1], [elevationFrom, elevationTo]);
+    }
+    if (hasColor) {
+      out.shadowColor = Animated.interpolateColor(t, [0, 1], [colorFrom, colorTo]);
+    }
+    if (hasOffset) {
+      out.shadowOffset = {
+        width: Animated.interpolate(t, [0, 1], [offsetWFrom, offsetWTo]),
+        height: Animated.interpolate(t, [0, 1], [offsetHFrom, offsetHTo])
+      };
+    }
+    return out;
+  });
+}
 function useVariants(variants, initial) {
   const variantsRef = react.useRef(variants);
   return react.useMemo(() => {
@@ -2682,11 +2917,14 @@ exports.ensureWorkletEasing = ensureWorkletEasing;
 exports.resolveAnimatableValue = resolveAnimatableValue;
 exports.resolveTransition = resolveTransition;
 exports.useAnimation = useAnimation;
+exports.useBooleanSpring = useBooleanSpring;
+exports.useColorTransition = useColorTransition;
 exports.useGesture = useGesture;
 exports.useMotionConfig = useMotionConfig;
 exports.useMotionValue = useMotionValue;
 exports.usePresence = usePresence;
 exports.useScroll = useScroll;
+exports.useShadow = useShadow;
 exports.useShouldReduceMotion = useShouldReduceMotion;
 exports.useSpring = useSpring;
 exports.useTransform = useTransform;