@rootnative/inertia 0.0.7 → 0.0.9

package/CHANGELOG.md

@@ -4,6 +4,34 @@ All notable changes to `@rootnative/inertia` are documented here. The format fol
 
 ## [Unreleased]
 
+## [0.0.9] - 2026-08-22
+
+### Changed
+
+- **`useInterpolatedStyle` types its return against the map it was given, so a `style` array no longer needs a cast.** The hook returned `ReturnType<typeof useAnimatedStyle>`, which resolves to Reanimated's `DefaultStyle` — the union `ViewStyle | ImageStyle | TextStyle`. Assigning that union to a single style works, but a **style array** checks every member, and `TextStyle` is not assignable to `ViewStyle` (`cursor` is `string` there and `CursorValue` here). So the documented, dominant call shape — a transform/opacity fragment spread into `style={[base, fragment]}` — was a type error, and consumers cast it away.
+
+  The return is now `InterpolatedStyle<K>`, computed from the map's own keys: view keys satisfy `StyleProp<ViewStyle>`, text-metric keys (`fontSize`, `lineHeight`, `letterSpacing`) satisfy `StyleProp<TextStyle>`, `tintColor` satisfies `StyleProp<ImageStyle>`, and transform keys collapse into the single `transform` array the worklet emits. The narrowing is exact rather than permissive — a text-only fragment is still rejected from a `ViewStyle` slot, pinned in both directions by `__type-tests__/interpolated-style.test-d.tsx`.
+
+  Types only: no runtime change, and no bundle-size change. Removing a now-unnecessary `as ViewStyle` is safe; the cast remains harmless if left in place. `InterpolatedStyle` is exported from the root barrel.
+
+  Surfaced by the `reelist` validation consumer, and it is the independent-application half of the loop reporting its first library defect.
+
+## [0.0.8] - 2026-08-16
+
+### Added
+
+- **`<Stagger>` — parent-owned delays for a cascading list entrance.** Wrapping a list in `<Stagger interval={60}>` assigns each child a delay of `delay + position * interval` milliseconds, applied to the declarative animations (the `initial` → `animate` mount and any later `animate` change) of every `Motion.*` primitive in that child's subtree. No child computes `index * ms` itself, which removes the two structural problems of the per-child form: a list that filters or reorders staggers from stale indices, and the cascade cannot be turned off in one place. Positions re-derive from render order every render, `from="last"` reverses the cascade, and `enabled={false}` zeroes every delay — pass `enabled={revealed}` and the reveal cascades while the hide animates together.
+
+  The delay wraps each key's fully resolved animation exactly once, on the JS thread — never merged into the base transition config, which a keyframe sequence would re-apply per step. It composes with the child's own `transition.delay` (the two add). It deliberately does not delay `gesture` sub-state feedback (press feedback delayed by list position reads as lag), `<Presence>` exits (a positional delay holds `safeToRemove` — and therefore the unmount — hostage to the cascade), or reduced-motion snaps (a deferred snap is still choreography).
+
+  `<Stagger>` renders no host view — only per-child context providers, so it composes with any layout. Custom animated components built on `resolveTransition` / `resolveAnimatableValue` can participate through the new `useStaggerDelay()` hook, and `applyDelay(animation, ms)` is now exported alongside the other transition utilities.
+
+  Surfaced by the `purrfect-match` validation consumer (DX feedback entry 13), generalized here per the audience-and-scope rule: the shape follows Framer Motion's `staggerChildren` / `delayChildren`, renamed to `interval` / `delay` because the component's own name already says "children".
+
+- **`buildReleaseAnimation` accepts a settle callback.** A third, optional `callback` parameter — the same `(finished) => void` shape Reanimated's `with*` factories accept — is forwarded to the underlying `withSpring` / `withTiming` / `withDecay` call and fires once when the animation settles. For `no-animation` it fires synchronously with `finished: true`, since a direct assignment has no settle point of its own. Existing two-argument call sites are unchanged.
+
+  This is the primitive behind `useSwipe`'s new `onSwipeEnd` in `@rootnative/inertia-gestures`: a gesture-release worklet can now learn when its release animation has finished without polling a shared value. The `AnimationCallback` type is exported from the root barrel alongside it.
+
 ## [0.0.7] - 2026-08-14
 
 ### Added
@@ -257,7 +285,9 @@ Initial alpha publish. The full initial surface is in place; APIs are still subj
 - SVG path morphing, gradient interpolation, and shared-element transitions across screens are out of scope until `0.2.x` / `1.x` per the roadmap.
 - `react-native-gesture-handler` integration (drag, pan, swipe sub-states) lands in `0.2` via the optional `@rootnative/inertia-gestures` adapter.
 
-[unreleased]: https://github.com/rootnative/inertia/compare/core+gestures+gradients+svg@0.0.7...HEAD
+[unreleased]: https://github.com/rootnative/inertia/compare/core+gestures+gradients+svg@0.0.9...HEAD
+[0.0.9]: https://github.com/rootnative/inertia/releases/tag/core+gestures+gradients+svg@0.0.9
+[0.0.8]: https://github.com/rootnative/inertia/releases/tag/core+gestures+gradients+svg@0.0.8
 [0.0.7]: https://github.com/rootnative/inertia/releases/tag/core+gestures+gradients+svg@0.0.7
 [0.0.6]: https://github.com/rootnative/inertia/releases/tag/core+gestures+gradients+svg@0.0.6
 [0.0.5]: https://github.com/rootnative/inertia/releases/tag/core+gestures+gradients+svg@0.0.5

package/README.md

@@ -12,7 +12,7 @@
 
 Declarative animation primitives for React Native, built as a thin wrapper around [`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/). Inspired by Framer Motion (web) and react-spring (cross-platform).
 
-> **Status:** `0.0.7` — stable. Pre-`1.0.0` minor versions may break — see the root [README](https://github.com/rootnative/inertia#versioning--release).
+> **Status:** `0.0.9` — stable. Pre-`1.0.0` minor versions may break — see the root [README](https://github.com/rootnative/inertia#versioning--release).
 
 ## Install
 

package/dist/chunk-24NUL23E.js

@@ -0,0 +1,8 @@
+'use strict';
+
+var chunkE3ALFSH2_js = require('./chunk-E3ALFSH2.js');
+var reactNative = require('react-native');
+
+var MotionView = chunkE3ALFSH2_js.createMotionComponent(reactNative.View);
+
+exports.MotionView = MotionView;

package/dist/chunk-4XBX7KOD.js

@@ -0,0 +1,8 @@
+'use strict';
+
+var chunkE3ALFSH2_js = require('./chunk-E3ALFSH2.js');
+var reactNative = require('react-native');
+
+var MotionText = chunkE3ALFSH2_js.createMotionComponent(reactNative.Text);
+
+exports.MotionText = MotionText;

package/dist/{chunk-OBRGJAST.js → chunk-6AN5X3YE.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkPM6CVGXJ_js = require('./chunk-PM6CVGXJ.js');
+var chunkWNVHPMBI_js = require('./chunk-WNVHPMBI.js');
 var react = require('react');
 var reactNativeReanimated = require('react-native-reanimated');
 var jsxRuntime = require('react/jsx-runtime');
@@ -32,7 +32,7 @@ function MotionConfig({
   children
 }) {
   const parent = useMotionConfig();
-  const transitionsSig = chunkPM6CVGXJ_js.stableSig(transitions);
+  const transitionsSig = chunkWNVHPMBI_js.stableSig(transitions);
   const value = react.useMemo(
     () => ({
       reducedMotion: reducedMotion ?? parent.reducedMotion,
@@ -66,7 +66,7 @@ function resolveNamedTransitionProp(transition, registry) {
   if (typeof transition === "string") {
     return lookupNamedTransition(transition, registry);
   }
-  if (chunkPM6CVGXJ_js.isTopLevelTransition(transition)) return transition;
+  if (chunkWNVHPMBI_js.isTopLevelTransition(transition)) return transition;
   const map = transition;
   let out = null;
   for (const key in map) {

package/dist/{chunk-WGCF3WQG.js → chunk-6NOCY764.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var chunk6V7MOBXO_js = require('./chunk-6V7MOBXO.js');
+var chunkE3ALFSH2_js = require('./chunk-E3ALFSH2.js');
 var reactNative = require('react-native');
 
-var MotionPressable = chunk6V7MOBXO_js.createMotionComponent(reactNative.Pressable);
+var MotionPressable = chunkE3ALFSH2_js.createMotionComponent(reactNative.Pressable);
 
 exports.MotionPressable = MotionPressable;

package/dist/{chunk-KBFN4TRO.mjs → chunk-6YIUETBF.mjs}

@@ -1,4 +1,4 @@
-import { createMotionComponent } from './chunk-HPJMIBBK.mjs';
+import { createMotionComponent } from './chunk-IX6SEOSK.mjs';
 import { Image } from 'react-native';
 
 var MotionImage = createMotionComponent(Image);

package/dist/{chunk-6V7MOBXO.js → chunk-E3ALFSH2.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkOBRGJAST_js = require('./chunk-OBRGJAST.js');
-var chunkPM6CVGXJ_js = require('./chunk-PM6CVGXJ.js');
+var chunk6AN5X3YE_js = require('./chunk-6AN5X3YE.js');
+var chunkWNVHPMBI_js = require('./chunk-WNVHPMBI.js');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var Animated = require('react-native-reanimated');
@@ -159,6 +159,26 @@ function PresenceItem({
   );
   return /* @__PURE__ */ jsxRuntime.jsx(PresenceContext.Provider, { value, children });
 }
+var StaggerContext = react.createContext(0);
+function useStaggerDelay() {
+  return react.useContext(StaggerContext);
+}
+function Stagger({
+  children,
+  interval,
+  delay = 0,
+  from = "first",
+  enabled = true
+}) {
+  const items = react.Children.toArray(children);
+  const count = items.length;
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: items.map((child, index) => {
+    const position = from === "last" ? count - 1 - index : index;
+    const childDelay = enabled ? delay + position * interval : 0;
+    const key = react.isValidElement(child) ? child.key ?? index : index;
+    return /* @__PURE__ */ jsxRuntime.jsx(StaggerContext.Provider, { value: childDelay, children: child }, key);
+  }) });
+}
 
 // src/internal/boxShadow.ts
 var LENGTH = /^[+-]?(\d+\.?\d*|\.\d+)(px)?$/i;
@@ -345,14 +365,14 @@ function resolveLayoutTransition(layout) {
   if (cfg.type === "no-animation") return void 0;
   if (cfg.type === "timing") {
     let builder2 = Animated.LinearTransition.duration(cfg.duration ?? 300);
-    const easing = chunkPM6CVGXJ_js.ensureWorkletEasing(cfg.easing);
+    const easing = chunkWNVHPMBI_js.ensureWorkletEasing(cfg.easing);
     if (easing) builder2 = builder2.easing(easing);
     if (cfg.delay) builder2 = builder2.delay(cfg.delay);
     return builder2;
   }
   const spring = cfg.type === "decay" ? { type: "spring" } : cfg;
-  const { stiffness, damping, mass } = chunkPM6CVGXJ_js.springToReanimated({
-    ...chunkPM6CVGXJ_js.DEFAULT_SPRING,
+  const { stiffness, damping, mass } = chunkWNVHPMBI_js.springToReanimated({
+    ...chunkWNVHPMBI_js.DEFAULT_SPRING,
     ...spring
   });
   let builder = Animated.LinearTransition.springify().stiffness(stiffness).damping(damping).mass(mass);
@@ -546,8 +566,8 @@ function legBuilder(transition) {
       Animated.withTiming(to, { duration })
     );
   }
-  const springCfg = transition?.type === "spring" ? { ...chunkPM6CVGXJ_js.DEFAULT_SPRING, ...transition } : { type: "spring", ...chunkPM6CVGXJ_js.DEFAULT_SPRING };
-  const springParams = chunkPM6CVGXJ_js.springToReanimated(springCfg);
+  const springCfg = transition?.type === "spring" ? { ...chunkWNVHPMBI_js.DEFAULT_SPRING, ...transition } : { type: "spring", ...chunkWNVHPMBI_js.DEFAULT_SPRING };
+  const springParams = chunkWNVHPMBI_js.springToReanimated(springCfg);
   return (from, to) => Animated.withSequence(
     Animated.withTiming(from, { duration: 0 }),
     Animated.withSpring(to, springParams)
@@ -833,14 +853,14 @@ var DEFAULT_RESTING = {
 function transitionFor(prop, transition) {
   if (!transition) return void 0;
   if (typeof transition === "string") return void 0;
-  if (chunkPM6CVGXJ_js.isTopLevelTransition(transition)) return transition;
+  if (chunkWNVHPMBI_js.isTopLevelTransition(transition)) return transition;
   if (GESTURE_LAYER_NAME_SET.has(prop)) return void 0;
   return transition[prop];
 }
 function gestureLayerTransitionFor(layer, transition) {
   if (!transition) return void 0;
   if (typeof transition === "string") return void 0;
-  if (chunkPM6CVGXJ_js.isTopLevelTransition(transition)) return transition;
+  if (chunkWNVHPMBI_js.isTopLevelTransition(transition)) return transition;
   return transition[layer];
 }
 function createMotionComponent(Component) {
@@ -890,12 +910,12 @@ function createMotionComponent(Component) {
         onLayout: userOnLayout,
         ...rest
       } = props;
-      const namedTransitions = chunkOBRGJAST_js.useNamedTransitions();
-      const transition = chunkOBRGJAST_js.resolveNamedTransitionProp(
+      const namedTransitions = chunk6AN5X3YE_js.useNamedTransitions();
+      const transition = chunk6AN5X3YE_js.resolveNamedTransitionProp(
         transitionProp,
         namedTransitions
       );
-      const layout = typeof layoutProp === "string" ? chunkOBRGJAST_js.lookupNamedTransition(layoutProp, namedTransitions) : layoutProp;
+      const layout = typeof layoutProp === "string" ? chunk6AN5X3YE_js.lookupNamedTransition(layoutProp, namedTransitions) : layoutProp;
       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."
@@ -903,7 +923,8 @@ function createMotionComponent(Component) {
       }
       const presence = usePresence();
       const isExiting = presence !== null && presence.isPresent === false;
-      const shouldReduceMotion = chunkOBRGJAST_js.useShouldReduceMotion();
+      const shouldReduceMotion = chunk6AN5X3YE_js.useShouldReduceMotion();
+      const staggerDelay = useStaggerDelay();
       const onAnimationEndRef = react.useRef(onAnimationEnd);
       onAnimationEndRef.current = onAnimationEnd;
       const variantKey = useControllerKey(controller);
@@ -987,7 +1008,7 @@ function createMotionComponent(Component) {
         if (__DEV__ && hasBoxShadowRef.current && activeKeysRef.current.some(
           (k) => k !== "boxShadow" && k.startsWith("shadow")
         )) {
-          chunkPM6CVGXJ_js.warnOnce(
+          chunkWNVHPMBI_js.warnOnce(
             "boxShadow-with-native-shadow",
             "[inertia] `boxShadow` is animated alongside the native `shadow*` keys on the same element, which applies two shadow systems at once. Pick one: `boxShadow` for the cross-platform CSS form, or the native `shadow*` keys."
           );
@@ -1055,7 +1076,7 @@ function createMotionComponent(Component) {
       const boxShadowInsets = Animated.useSharedValue(
         boxShadowSeedRef.current.insets
       );
-      const styleRestingSig = chunkPM6CVGXJ_js.stableSig(styleResting);
+      const styleRestingSig = chunkWNVHPMBI_js.stableSig(styleResting);
       react.useEffect(() => {
         for (const key of activeKeysRef.current) {
           if (everDrivenRef.current.has(key)) continue;
@@ -1083,13 +1104,13 @@ function createMotionComponent(Component) {
       const gestureSV = Animated.useSharedValue(
         resolveGestureLayers(gesture)
       );
-      const gestureTargetsSig = chunkPM6CVGXJ_js.stableSig(gesture);
+      const gestureTargetsSig = chunkWNVHPMBI_js.stableSig(gesture);
       react.useEffect(() => {
         gestureSV.value = resolveGestureLayers(gesture);
       }, [gestureTargetsSig]);
       const baseRecord = isExiting && exitRecord ? { ...animateRecord, ...exitRecord } : animateRecord;
-      const baseSig = chunkPM6CVGXJ_js.stableSig(baseRecord) + (isExiting ? "|exit" : "") + (shouldReduceMotion ? "|rm" : "");
-      const transitionSig = chunkPM6CVGXJ_js.stableSig(transition);
+      const baseSig = chunkWNVHPMBI_js.stableSig(baseRecord) + (isExiting ? "|exit" : "") + (shouldReduceMotion ? "|rm" : "");
+      const transitionSig = chunkWNVHPMBI_js.stableSig(transition);
       const safeToRemoveRef = react.useRef(void 0);
       safeToRemoveRef.current = presence?.safeToRemove;
       react.useEffect(() => {
@@ -1111,6 +1132,7 @@ function createMotionComponent(Component) {
           SHADOW_OFFSET_KEY_SET.has(key) ? "shadowOffset" : key,
           transition
         );
+        const runStagger = shouldReduceMotion || isExiting || staggerDelay <= 0 ? 0 : staggerDelay;
         let transformPending = 0;
         for (const k of ALL_KEYS) {
           if (!TRANSFORM_KEY_SET.has(k) || baseRecord[k] === void 0) continue;
@@ -1129,6 +1151,7 @@ function createMotionComponent(Component) {
               boxShadowInsets,
               shadowTarget,
               cfg2,
+              runStagger,
               makeKeyCallbackFactory(
                 "boxShadow",
                 sharedValues.boxShadow,
@@ -1162,10 +1185,13 @@ function createMotionComponent(Component) {
             isExiting ? onSettle : void 0,
             TRANSFORM_KEY_SET.has(key) ? transformGroup : void 0
           );
-          sharedValues[key].value = chunkPM6CVGXJ_js.resolveAnimatableValue(
-            COLOR_KEY_SET.has(key) ? normalizeAnimatableColorTarget(target) : target,
-            cfg,
-            factory
+          sharedValues[key].value = chunkWNVHPMBI_js.applyDelay(
+            chunkWNVHPMBI_js.resolveAnimatableValue(
+              COLOR_KEY_SET.has(key) ? normalizeAnimatableColorTarget(target) : target,
+              cfg,
+              factory
+            ),
+            runStagger
           );
         }
         if (isExiting && pending === 0) {
@@ -1224,7 +1250,7 @@ function createMotionComponent(Component) {
       const sharedLayout = useSharedLayout({
         layoutId,
         userRef: ref,
-        transition: chunkPM6CVGXJ_js.isTopLevelTransition(transition) ? transition : void 0,
+        transition: chunkWNVHPMBI_js.isTopLevelTransition(transition) ? transition : void 0,
         shouldReduceMotion,
         userOnLayout,
         readStyles: readSharedStyles
@@ -1326,7 +1352,7 @@ function createMotionComponent(Component) {
         setFocusVisible,
         setHovered
       );
-      const layoutSig = chunkPM6CVGXJ_js.stableSig(layout);
+      const layoutSig = chunkWNVHPMBI_js.stableSig(layout);
       const layoutTransition = react.useMemo(
         () => shouldReduceMotion ? void 0 : resolveLayoutTransition(layout),
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -1467,7 +1493,7 @@ function shadowOffsetAxisFor(key) {
 function shadowOffsetAxisValue(source, axis) {
   return source?.[axis];
 }
-function driveBoxShadow(slot, insetSlot, target, cfg, factory) {
+function driveBoxShadow(slot, insetSlot, target, cfg, staggerDelay, factory) {
   const currentLayers = payloadToLayers(slot.value);
   const { from, to, insets } = prepareBoxShadowAnimation(
     { layers: currentLayers, insets: insetSlot.value },
@@ -1475,10 +1501,13 @@ function driveBoxShadow(slot, insetSlot, target, cfg, factory) {
   );
   insetSlot.value = insets;
   if (from.length !== currentLayers.length) slot.value = layersToPayload(from);
-  slot.value = chunkPM6CVGXJ_js.resolveTransition(
-    cfg,
-    layersToPayload(to),
-    factory?.("animation", void 0)
+  slot.value = chunkWNVHPMBI_js.applyDelay(
+    chunkWNVHPMBI_js.resolveTransition(
+      cfg,
+      layersToPayload(to),
+      factory?.("animation", void 0)
+    ),
+    staggerDelay
   );
 }
 function styleValueFor(flat, key) {
@@ -1599,7 +1628,7 @@ function resolveGestureLayers(gesture) {
     for (const key of ALL_KEYS) {
       if (STRUCTURED_KEY_SET.has(key)) {
         if (__DEV__ && subState[key] !== void 0) {
-          chunkPM6CVGXJ_js.warnOnce(
+          chunkWNVHPMBI_js.warnOnce(
             `gesture-structured-${layer}-${key}`,
             `[inertia] \`${key}\` is not supported inside \`gesture.${layer}\` and will be ignored. Drive it from \`animate\` (optionally via a variant keyed off the same state), or interpolate it yourself with \`useShadow\`.`
           );
@@ -1623,7 +1652,7 @@ function resolveGestureLayers(gesture) {
   return out;
 }
 function useGestureLayerProgress(progress, active, declared, layer, transition, isExiting, shouldReduceMotion) {
-  const layerCfgSig = chunkPM6CVGXJ_js.stableSig(gestureLayerTransitionFor(layer, transition));
+  const layerCfgSig = chunkWNVHPMBI_js.stableSig(gestureLayerTransitionFor(layer, transition));
   react.useEffect(() => {
     if (!declared) return;
     if (isExiting) {
@@ -1632,7 +1661,7 @@ function useGestureLayerProgress(progress, active, declared, layer, transition,
     }
     const target = active ? 1 : 0;
     const cfg = shouldReduceMotion ? { type: "no-animation" } : gestureLayerTransitionFor(layer, transition) ?? { type: "spring" };
-    progress.value = chunkPM6CVGXJ_js.resolveTransition(cfg, target);
+    progress.value = chunkWNVHPMBI_js.resolveTransition(cfg, target);
   }, [active, declared, isExiting, shouldReduceMotion, layerCfgSig]);
 }
 function useGestureHandlers(gesture, rest, setPressed, setFocused, setFocusVisible, setHovered) {
@@ -1665,7 +1694,7 @@ function useGestureHandlers(gesture, rest, setPressed, setFocused, setFocusVisib
     if (gesture.focused || gesture.focusVisible) {
       handlers.onFocus = compose(rest.onFocus, () => {
         if (gesture.focused) setFocused(true);
-        if (gesture.focusVisible && chunkOBRGJAST_js.isFocusVisible()) setFocusVisible(true);
+        if (gesture.focusVisible && chunk6AN5X3YE_js.isFocusVisible()) setFocusVisible(true);
       });
       handlers.onBlur = compose(rest.onBlur, () => {
         if (gesture.focused) setFocused(false);
@@ -1708,8 +1737,10 @@ function compose(user, ours) {
 }
 
 exports.Presence = Presence;
+exports.Stagger = Stagger;
 exports.TRANSPARENT = TRANSPARENT;
 exports.createMotionComponent = createMotionComponent;
 exports.pairBoxShadowLayers = pairBoxShadowLayers;
 exports.resolveBoxShadowInput = resolveBoxShadowInput;
 exports.usePresence = usePresence;
+exports.useStaggerDelay = useStaggerDelay;

package/dist/{chunk-ZOBOKLAS.mjs → chunk-EN4PN7X3.mjs}

@@ -1,4 +1,4 @@
-import { createMotionComponent } from './chunk-HPJMIBBK.mjs';
+import { createMotionComponent } from './chunk-IX6SEOSK.mjs';
 import Animated from 'react-native-reanimated';
 
 var MotionFlatList = createMotionComponent(

package/dist/{chunk-RUIOM2YZ.mjs → chunk-GSUC4HWP.mjs}

@@ -1,4 +1,4 @@
-import { createMotionComponent } from './chunk-HPJMIBBK.mjs';
+import { createMotionComponent } from './chunk-IX6SEOSK.mjs';
 import { View } from 'react-native';
 
 var MotionView = createMotionComponent(View);

package/dist/{chunk-QJYFTTM2.js → chunk-IHVMNOS4.js}

@@ -1,13 +1,13 @@
 'use strict';
 
-var chunk6V7MOBXO_js = require('./chunk-6V7MOBXO.js');
+var chunkE3ALFSH2_js = require('./chunk-E3ALFSH2.js');
 var Animated = require('react-native-reanimated');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var Animated__default = /*#__PURE__*/_interopDefault(Animated);
 
-var MotionFlatList = chunk6V7MOBXO_js.createMotionComponent(
+var MotionFlatList = chunkE3ALFSH2_js.createMotionComponent(
   Animated__default.default.FlatList
   // `createMotionComponent<C>` returns a non-generic `MotionComponent<C>`, so
   // `data` / `renderItem` would collapse to `any` and lose `ItemT` inference.

package/dist/{chunk-HPJMIBBK.mjs → chunk-IX6SEOSK.mjs}

@@ -1,5 +1,5 @@
-import { useNamedTransitions, resolveNamedTransitionProp, lookupNamedTransition, useShouldReduceMotion, isFocusVisible } from './chunk-Z3HCJ43H.mjs';
-import { warnOnce, stableSig, resolveAnimatableValue, isTopLevelTransition, resolveTransition, ensureWorkletEasing, springToReanimated, DEFAULT_SPRING } from './chunk-REYL77RE.mjs';
+import { useNamedTransitions, resolveNamedTransitionProp, lookupNamedTransition, useShouldReduceMotion, isFocusVisible } from './chunk-MFAFB4K7.mjs';
+import { warnOnce, stableSig, applyDelay, resolveAnimatableValue, isTopLevelTransition, resolveTransition, ensureWorkletEasing, springToReanimated, DEFAULT_SPRING } from './chunk-W7NTRSPD.mjs';
 import { createContext, useContext, useMemo, Children, isValidElement, useState, useRef, useCallback, forwardRef, useEffect } from 'react';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import Animated, { useSharedValue, cancelAnimation, useAnimatedStyle, interpolateColor, reanimatedVersion, runOnJS, LinearTransition, withSequence, withTiming, withSpring } from 'react-native-reanimated';
@@ -153,6 +153,26 @@ function PresenceItem({
   );
   return /* @__PURE__ */ jsx(PresenceContext.Provider, { value, children });
 }
+var StaggerContext = createContext(0);
+function useStaggerDelay() {
+  return useContext(StaggerContext);
+}
+function Stagger({
+  children,
+  interval,
+  delay = 0,
+  from = "first",
+  enabled = true
+}) {
+  const items = Children.toArray(children);
+  const count = items.length;
+  return /* @__PURE__ */ jsx(Fragment, { children: items.map((child, index) => {
+    const position = from === "last" ? count - 1 - index : index;
+    const childDelay = enabled ? delay + position * interval : 0;
+    const key = isValidElement(child) ? child.key ?? index : index;
+    return /* @__PURE__ */ jsx(StaggerContext.Provider, { value: childDelay, children: child }, key);
+  }) });
+}
 
 // src/internal/boxShadow.ts
 var LENGTH = /^[+-]?(\d+\.?\d*|\.\d+)(px)?$/i;
@@ -898,6 +918,7 @@ function createMotionComponent(Component) {
       const presence = usePresence();
       const isExiting = presence !== null && presence.isPresent === false;
       const shouldReduceMotion = useShouldReduceMotion();
+      const staggerDelay = useStaggerDelay();
       const onAnimationEndRef = useRef(onAnimationEnd);
       onAnimationEndRef.current = onAnimationEnd;
       const variantKey = useControllerKey(controller);
@@ -1105,6 +1126,7 @@ function createMotionComponent(Component) {
           SHADOW_OFFSET_KEY_SET.has(key) ? "shadowOffset" : key,
           transition
         );
+        const runStagger = shouldReduceMotion || isExiting || staggerDelay <= 0 ? 0 : staggerDelay;
         let transformPending = 0;
         for (const k of ALL_KEYS) {
           if (!TRANSFORM_KEY_SET.has(k) || baseRecord[k] === void 0) continue;
@@ -1123,6 +1145,7 @@ function createMotionComponent(Component) {
               boxShadowInsets,
               shadowTarget,
               cfg2,
+              runStagger,
               makeKeyCallbackFactory(
                 "boxShadow",
                 sharedValues.boxShadow,
@@ -1156,10 +1179,13 @@ function createMotionComponent(Component) {
             isExiting ? onSettle : void 0,
             TRANSFORM_KEY_SET.has(key) ? transformGroup : void 0
           );
-          sharedValues[key].value = resolveAnimatableValue(
-            COLOR_KEY_SET.has(key) ? normalizeAnimatableColorTarget(target) : target,
-            cfg,
-            factory
+          sharedValues[key].value = applyDelay(
+            resolveAnimatableValue(
+              COLOR_KEY_SET.has(key) ? normalizeAnimatableColorTarget(target) : target,
+              cfg,
+              factory
+            ),
+            runStagger
           );
         }
         if (isExiting && pending === 0) {
@@ -1461,7 +1487,7 @@ function shadowOffsetAxisFor(key) {
 function shadowOffsetAxisValue(source, axis) {
   return source?.[axis];
 }
-function driveBoxShadow(slot, insetSlot, target, cfg, factory) {
+function driveBoxShadow(slot, insetSlot, target, cfg, staggerDelay, factory) {
   const currentLayers = payloadToLayers(slot.value);
   const { from, to, insets } = prepareBoxShadowAnimation(
     { layers: currentLayers, insets: insetSlot.value },
@@ -1469,10 +1495,13 @@ function driveBoxShadow(slot, insetSlot, target, cfg, factory) {
   );
   insetSlot.value = insets;
   if (from.length !== currentLayers.length) slot.value = layersToPayload(from);
-  slot.value = resolveTransition(
-    cfg,
-    layersToPayload(to),
-    factory?.("animation", void 0)
+  slot.value = applyDelay(
+    resolveTransition(
+      cfg,
+      layersToPayload(to),
+      factory?.("animation", void 0)
+    ),
+    staggerDelay
   );
 }
 function styleValueFor(flat, key) {
@@ -1701,4 +1730,4 @@ function compose(user, ours) {
   };
 }
 
-export { Presence, TRANSPARENT, createMotionComponent, pairBoxShadowLayers, resolveBoxShadowInput, usePresence };
+export { Presence, Stagger, TRANSPARENT, createMotionComponent, pairBoxShadowLayers, resolveBoxShadowInput, usePresence, useStaggerDelay };

package/dist/{chunk-52QSN2VQ.mjs → chunk-JBK5ZLMH.mjs}

@@ -1,4 +1,4 @@
-import { createMotionComponent } from './chunk-HPJMIBBK.mjs';
+import { createMotionComponent } from './chunk-IX6SEOSK.mjs';
 import { Pressable } from 'react-native';
 
 var MotionPressable = createMotionComponent(Pressable);

package/dist/{chunk-OW5XTGVN.mjs → chunk-L4JFECXU.mjs}

@@ -1,5 +1,5 @@
-import { useShouldReduceMotion, resolveNamedTransitionProp, useNamedTransitions, isFocusVisible } from './chunk-Z3HCJ43H.mjs';
-import { resolveTransition, isTopLevelTransition } from './chunk-REYL77RE.mjs';
+import { useShouldReduceMotion, resolveNamedTransitionProp, useNamedTransitions, isFocusVisible } from './chunk-MFAFB4K7.mjs';
+import { resolveTransition, isTopLevelTransition } from './chunk-W7NTRSPD.mjs';
 import { useCallback, useMemo } from 'react';
 import { useSharedValue } from 'react-native-reanimated';
 

package/dist/{chunk-VSK2E35J.mjs → chunk-M4766VUV.mjs}

@@ -1,4 +1,4 @@
-import { createMotionComponent } from './chunk-HPJMIBBK.mjs';
+import { createMotionComponent } from './chunk-IX6SEOSK.mjs';
 import { ScrollView } from 'react-native';
 
 var MotionScrollView = createMotionComponent(ScrollView);

package/dist/{chunk-Z3HCJ43H.mjs → chunk-MFAFB4K7.mjs}

@@ -1,4 +1,4 @@
-import { stableSig, isTopLevelTransition } from './chunk-REYL77RE.mjs';
+import { stableSig, isTopLevelTransition } from './chunk-W7NTRSPD.mjs';
 import { createContext, useContext, useMemo } from 'react';
 import { useReducedMotion } from 'react-native-reanimated';
 import { jsx } from 'react/jsx-runtime';

package/dist/{chunk-4NAMD62I.js → chunk-MUT6BTZS.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkOBRGJAST_js = require('./chunk-OBRGJAST.js');
-var chunkPM6CVGXJ_js = require('./chunk-PM6CVGXJ.js');
+var chunk6AN5X3YE_js = require('./chunk-6AN5X3YE.js');
+var chunkWNVHPMBI_js = require('./chunk-WNVHPMBI.js');
 var react = require('react');
 var reactNativeReanimated = require('react-native-reanimated');
 
@@ -10,12 +10,12 @@ function useGesture(transition) {
   const focused = reactNativeReanimated.useSharedValue(0);
   const focusVisible = reactNativeReanimated.useSharedValue(0);
   const hovered = reactNativeReanimated.useSharedValue(0);
-  const shouldReduceMotion = chunkOBRGJAST_js.useShouldReduceMotion();
-  const resolved = chunkOBRGJAST_js.resolveNamedTransitionProp(transition, chunkOBRGJAST_js.useNamedTransitions());
+  const shouldReduceMotion = chunk6AN5X3YE_js.useShouldReduceMotion();
+  const resolved = chunk6AN5X3YE_js.resolveNamedTransitionProp(transition, chunk6AN5X3YE_js.useNamedTransitions());
   const setLayer = react.useCallback(
     (sv, layer, target) => {
       const cfg = shouldReduceMotion ? { type: "no-animation" } : layerTransition(layer, resolved) ?? { type: "spring" };
-      sv.value = chunkPM6CVGXJ_js.resolveTransition(cfg, target);
+      sv.value = chunkWNVHPMBI_js.resolveTransition(cfg, target);
     },
     // The transition is intentionally read on every call rather than cooked
     // into the dep array — a fresh literal each render would otherwise
@@ -34,7 +34,7 @@ function useGesture(transition) {
       onHoverOut: () => setLayer(hovered, "hovered", 0),
       onFocus: () => {
         setLayer(focused, "focused", 1);
-        if (chunkOBRGJAST_js.isFocusVisible()) setLayer(focusVisible, "focusVisible", 1);
+        if (chunk6AN5X3YE_js.isFocusVisible()) setLayer(focusVisible, "focusVisible", 1);
       },
       onBlur: () => {
         setLayer(focused, "focused", 0);
@@ -47,7 +47,7 @@ function useGesture(transition) {
 }
 function layerTransition(layer, transition) {
   if (!transition) return void 0;
-  if (chunkPM6CVGXJ_js.isTopLevelTransition(transition)) return transition;
+  if (chunkWNVHPMBI_js.isTopLevelTransition(transition)) return transition;
   return transition[layer];
 }
 

package/dist/{chunk-WMLS4TMX.mjs → chunk-QNLSCOR5.mjs}

@@ -1,4 +1,4 @@
-import { createMotionComponent } from './chunk-HPJMIBBK.mjs';
+import { createMotionComponent } from './chunk-IX6SEOSK.mjs';
 import { Text } from 'react-native';
 
 var MotionText = createMotionComponent(Text);