@fluentui/react-motion-components-preview 0.12.0 → 0.14.0

package/lib/choreography/Stagger/useStaggerItemsVisibility.js

@@ -0,0 +1,176 @@
+'use client';
+import * as React from 'react';
+import { useAnimationFrame, useEventCallback } from '@fluentui/react-utilities';
+import { staggerItemsVisibilityAtTime, DEFAULT_ITEM_DURATION } from './utils';
+/**
+ * Hook that tracks the visibility of a staggered sequence of items as time progresses.
+ *
+ * Behavior summary for all hide modes:
+ * - On the first render, items are placed in their final state (enter => visible, exit => hidden)
+ *   and no animation runs.
+ * - On subsequent renders when direction changes, items animate from the opposite state
+ *   to the final state over the stagger timeline.
+ * - Changes to the `reversed` prop do not trigger re-animation; they only affect the order
+ *   during the next direction change animation.
+ *
+ * This hook uses child key mapping instead of item count to track individual items.
+ * This allows it to correctly handle:
+ * - Items being added and removed simultaneously (when count stays the same)
+ * - Items being reordered
+ * - Individual item identity across renders
+ *
+ * @param childMapping - Mapping of child keys to elements and indices
+ * @param itemDelay - Milliseconds between the start of each item's animation
+ * @param itemDuration - Milliseconds each item's animation lasts
+ * @param direction - 'enter' (show items) or 'exit' (hide items)
+ * @param reversed - Whether to reverse the stagger order (last item first)
+ * @param onMotionFinish - Callback fired when the full stagger sequence completes
+ * @param hideMode - How children's visibility is managed: 'visibleProp', 'visibilityStyle', or 'unmount'
+ *
+ * @returns An object with `itemsVisibility: Record<string, boolean>` indicating which items are currently visible by key
+ */ export function useStaggerItemsVisibility({ childMapping, itemDelay, itemDuration = DEFAULT_ITEM_DURATION, direction, reversed = false, onMotionFinish, hideMode = 'visibleProp' }) {
+    const [requestAnimationFrame, cancelAnimationFrame] = useAnimationFrame();
+    // Stabilize the callback reference to avoid re-triggering effects on every render
+    const handleMotionFinish = useEventCallback(onMotionFinish !== null && onMotionFinish !== void 0 ? onMotionFinish : ()=>{
+        return;
+    });
+    // Track animation state independently of child changes
+    const [animationKey, setAnimationKey] = React.useState(0);
+    const prevDirection = React.useRef(direction);
+    // Only trigger new animation when direction actually changes, not when children change
+    React.useEffect(()=>{
+        if (prevDirection.current !== direction) {
+            setAnimationKey((prev)=>prev + 1);
+            prevDirection.current = direction;
+        }
+    }, [
+        direction
+    ]);
+    // State: visibility mapping for all items by key
+    const [itemsVisibility, setItemsVisibility] = React.useState(()=>{
+        const initial = {};
+        // All hide modes start in final state: visible for 'enter', hidden for 'exit'
+        const initialState = direction === 'enter';
+        Object.keys(childMapping).forEach((key)=>{
+            initial[key] = initialState;
+        });
+        return initial;
+    });
+    // Update visibility mapping when childMapping changes
+    React.useEffect(()=>{
+        setItemsVisibility((prev)=>{
+            const next = {};
+            const targetState = direction === 'enter';
+            // Add or update items from new mapping
+            Object.keys(childMapping).forEach((key)=>{
+                if (key in prev) {
+                    // Existing item - preserve its visibility state
+                    next[key] = prev[key];
+                } else {
+                    // New item - set to target state
+                    next[key] = targetState;
+                }
+            });
+            // Note: Items that were in prev but not in childMapping are automatically removed
+            // because we only iterate over keys in childMapping
+            return next;
+        });
+    }, [
+        childMapping,
+        direction
+    ]);
+    // Refs: animation timing and control
+    const startTimeRef = React.useRef(null);
+    const frameRef = React.useRef(null);
+    const finishedRef = React.useRef(false);
+    const isFirstRender = React.useRef(true);
+    // Use ref to avoid re-running the animation when child mapping changes
+    const childMappingRef = React.useRef(childMapping);
+    // Update childMapping ref whenever it changes
+    React.useEffect(()=>{
+        childMappingRef.current = childMapping;
+    }, [
+        childMapping
+    ]);
+    // Use ref for reversed to avoid re-running animation when it changes
+    const reversedRef = React.useRef(reversed);
+    // Update reversed ref whenever it changes
+    React.useEffect(()=>{
+        reversedRef.current = reversed;
+    }, [
+        reversed
+    ]);
+    // ====== ANIMATION EFFECT ======
+    React.useEffect(()=>{
+        let cancelled = false;
+        startTimeRef.current = null;
+        finishedRef.current = false;
+        // All hide modes skip animation on first render - items are already in their final state
+        if (isFirstRender.current) {
+            isFirstRender.current = false;
+            // Items are already in their final state from useState, no animation needed
+            handleMotionFinish();
+            return; // No cleanup needed for first render
+        }
+        // For animations after first render, start from the opposite of the final state
+        // - Enter animation: start hidden (false), animate to visible (true)
+        // - Exit animation: start visible (true), animate to hidden (false)
+        const startState = direction === 'exit';
+        // Use childMappingRef.current to avoid adding childMapping to dependencies
+        const initialVisibility = {};
+        Object.keys(childMappingRef.current).forEach((key)=>{
+            initialVisibility[key] = startState;
+        });
+        setItemsVisibility(initialVisibility);
+        // Animation loop: update visibility on each frame until complete
+        const tick = (now)=>{
+            if (cancelled) {
+                return;
+            }
+            if (startTimeRef.current === null) {
+                startTimeRef.current = now;
+            }
+            const elapsed = now - startTimeRef.current;
+            const childKeys = Object.keys(childMappingRef.current);
+            const itemCount = childKeys.length;
+            const result = staggerItemsVisibilityAtTime({
+                itemCount,
+                elapsed,
+                itemDelay,
+                itemDuration,
+                direction,
+                reversed: reversedRef.current
+            });
+            // Convert boolean array to keyed object
+            const nextVisibility = {};
+            childKeys.forEach((key, idx)=>{
+                nextVisibility[key] = result.itemsVisibility[idx];
+            });
+            setItemsVisibility(nextVisibility);
+            if (elapsed < result.totalDuration) {
+                frameRef.current = requestAnimationFrame(tick);
+            } else if (!finishedRef.current) {
+                finishedRef.current = true;
+                handleMotionFinish();
+            }
+        };
+        frameRef.current = requestAnimationFrame(tick);
+        return ()=>{
+            cancelled = true;
+            if (frameRef.current) {
+                cancelAnimationFrame();
+            }
+        };
+    }, [
+        animationKey,
+        itemDelay,
+        itemDuration,
+        direction,
+        requestAnimationFrame,
+        cancelAnimationFrame,
+        handleMotionFinish
+    ]);
+    return {
+        itemsVisibility
+    };
+}

package/lib/choreography/Stagger/useStaggerItemsVisibility.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/choreography/Stagger/useStaggerItemsVisibility.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useAnimationFrame, useEventCallback } from '@fluentui/react-utilities';\nimport type { StaggerProps } from './stagger-types';\nimport {\n  staggerItemsVisibilityAtTime,\n  type StaggerItemsVisibilityAtTimeParams,\n  DEFAULT_ITEM_DURATION,\n  type StaggerChildMapping,\n} from './utils';\n\nexport interface UseStaggerItemsVisibilityParams\n  extends Pick<StaggerProps, 'onMotionFinish'>,\n    Omit<StaggerItemsVisibilityAtTimeParams, 'elapsed' | 'itemCount'> {\n  hideMode: StaggerProps['hideMode'];\n  childMapping: StaggerChildMapping;\n}\n\n/**\n * Hook that tracks the visibility of a staggered sequence of items as time progresses.\n *\n * Behavior summary for all hide modes:\n * - On the first render, items are placed in their final state (enter => visible, exit => hidden)\n *   and no animation runs.\n * - On subsequent renders when direction changes, items animate from the opposite state\n *   to the final state over the stagger timeline.\n * - Changes to the `reversed` prop do not trigger re-animation; they only affect the order\n *   during the next direction change animation.\n *\n * This hook uses child key mapping instead of item count to track individual items.\n * This allows it to correctly handle:\n * - Items being added and removed simultaneously (when count stays the same)\n * - Items being reordered\n * - Individual item identity across renders\n *\n * @param childMapping - Mapping of child keys to elements and indices\n * @param itemDelay - Milliseconds between the start of each item's animation\n * @param itemDuration - Milliseconds each item's animation lasts\n * @param direction - 'enter' (show items) or 'exit' (hide items)\n * @param reversed - Whether to reverse the stagger order (last item first)\n * @param onMotionFinish - Callback fired when the full stagger sequence completes\n * @param hideMode - How children's visibility is managed: 'visibleProp', 'visibilityStyle', or 'unmount'\n *\n * @returns An object with `itemsVisibility: Record<string, boolean>` indicating which items are currently visible by key\n */\nexport function useStaggerItemsVisibility({\n  childMapping,\n  itemDelay,\n  itemDuration = DEFAULT_ITEM_DURATION,\n  direction,\n  reversed = false,\n  onMotionFinish,\n  hideMode = 'visibleProp',\n}: UseStaggerItemsVisibilityParams): { itemsVisibility: Record<string, boolean> } {\n  const [requestAnimationFrame, cancelAnimationFrame] = useAnimationFrame();\n\n  // Stabilize the callback reference to avoid re-triggering effects on every render\n  const handleMotionFinish = useEventCallback(\n    onMotionFinish ??\n      (() => {\n        return;\n      }),\n  );\n\n  // Track animation state independently of child changes\n  const [animationKey, setAnimationKey] = React.useState(0);\n  const prevDirection = React.useRef(direction);\n\n  // Only trigger new animation when direction actually changes, not when children change\n  React.useEffect(() => {\n    if (prevDirection.current !== direction) {\n      setAnimationKey(prev => prev + 1);\n      prevDirection.current = direction;\n    }\n  }, [direction]);\n\n  // State: visibility mapping for all items by key\n  const [itemsVisibility, setItemsVisibility] = React.useState<Record<string, boolean>>(() => {\n    const initial: Record<string, boolean> = {};\n    // All hide modes start in final state: visible for 'enter', hidden for 'exit'\n    const initialState = direction === 'enter';\n    Object.keys(childMapping).forEach(key => {\n      initial[key] = initialState;\n    });\n    return initial;\n  });\n\n  // Update visibility mapping when childMapping changes\n  React.useEffect(() => {\n    setItemsVisibility(prev => {\n      const next: Record<string, boolean> = {};\n      const targetState = direction === 'enter';\n\n      // Add or update items from new mapping\n      Object.keys(childMapping).forEach(key => {\n        if (key in prev) {\n          // Existing item - preserve its visibility state\n          next[key] = prev[key];\n        } else {\n          // New item - set to target state\n          next[key] = targetState;\n        }\n      });\n\n      // Note: Items that were in prev but not in childMapping are automatically removed\n      // because we only iterate over keys in childMapping\n\n      return next;\n    });\n  }, [childMapping, direction]);\n\n  // Refs: animation timing and control\n  const startTimeRef = React.useRef<number | null>(null);\n  const frameRef = React.useRef<number | null>(null);\n  const finishedRef = React.useRef(false);\n  const isFirstRender = React.useRef(true);\n\n  // Use ref to avoid re-running the animation when child mapping changes\n  const childMappingRef = React.useRef(childMapping);\n\n  // Update childMapping ref whenever it changes\n  React.useEffect(() => {\n    childMappingRef.current = childMapping;\n  }, [childMapping]);\n\n  // Use ref for reversed to avoid re-running animation when it changes\n  const reversedRef = React.useRef(reversed);\n\n  // Update reversed ref whenever it changes\n  React.useEffect(() => {\n    reversedRef.current = reversed;\n  }, [reversed]);\n\n  // ====== ANIMATION EFFECT ======\n\n  React.useEffect(() => {\n    let cancelled = false;\n    startTimeRef.current = null;\n    finishedRef.current = false;\n\n    // All hide modes skip animation on first render - items are already in their final state\n    if (isFirstRender.current) {\n      isFirstRender.current = false;\n      // Items are already in their final state from useState, no animation needed\n      handleMotionFinish();\n      return; // No cleanup needed for first render\n    }\n\n    // For animations after first render, start from the opposite of the final state\n    // - Enter animation: start hidden (false), animate to visible (true)\n    // - Exit animation: start visible (true), animate to hidden (false)\n    const startState = direction === 'exit';\n    // Use childMappingRef.current to avoid adding childMapping to dependencies\n    const initialVisibility: Record<string, boolean> = {};\n    Object.keys(childMappingRef.current).forEach(key => {\n      initialVisibility[key] = startState;\n    });\n    setItemsVisibility(initialVisibility);\n\n    // Animation loop: update visibility on each frame until complete\n    const tick = (now: number) => {\n      if (cancelled) {\n        return;\n      }\n      if (startTimeRef.current === null) {\n        startTimeRef.current = now;\n      }\n      const elapsed = now - (startTimeRef.current as number);\n\n      const childKeys = Object.keys(childMappingRef.current);\n      const itemCount = childKeys.length;\n\n      const result = staggerItemsVisibilityAtTime({\n        itemCount,\n        elapsed,\n        itemDelay,\n        itemDuration,\n        direction,\n        reversed: reversedRef.current,\n      });\n\n      // Convert boolean array to keyed object\n      const nextVisibility: Record<string, boolean> = {};\n      childKeys.forEach((key, idx) => {\n        nextVisibility[key] = result.itemsVisibility[idx];\n      });\n\n      setItemsVisibility(nextVisibility);\n\n      if (elapsed < result.totalDuration) {\n        frameRef.current = requestAnimationFrame(tick);\n      } else if (!finishedRef.current) {\n        finishedRef.current = true;\n        handleMotionFinish();\n      }\n    };\n\n    frameRef.current = requestAnimationFrame(tick);\n    return () => {\n      cancelled = true;\n      if (frameRef.current) {\n        cancelAnimationFrame();\n      }\n    };\n  }, [\n    animationKey,\n    itemDelay,\n    itemDuration,\n    direction,\n    requestAnimationFrame,\n    cancelAnimationFrame,\n    handleMotionFinish,\n  ]);\n\n  return { itemsVisibility };\n}\n"],"names":["React","useAnimationFrame","useEventCallback","staggerItemsVisibilityAtTime","DEFAULT_ITEM_DURATION","useStaggerItemsVisibility","childMapping","itemDelay","itemDuration","direction","reversed","onMotionFinish","hideMode","requestAnimationFrame","cancelAnimationFrame","handleMotionFinish","animationKey","setAnimationKey","useState","prevDirection","useRef","useEffect","current","prev","itemsVisibility","setItemsVisibility","initial","initialState","Object","keys","forEach","key","next","targetState","startTimeRef","frameRef","finishedRef","isFirstRender","childMappingRef","reversedRef","cancelled","startState","initialVisibility","tick","now","elapsed","childKeys","itemCount","length","result","nextVisibility","idx","totalDuration"],"mappings":"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"}

package/lib/choreography/Stagger/utils/constants.js

@@ -0,0 +1,5 @@
+/**
+ * Default timing constants for stagger animations (milliseconds).
+ */ import { motionTokens } from '@fluentui/react-motion';
+/** Default delay in milliseconds between each item's animation start */ export const DEFAULT_ITEM_DELAY = motionTokens.durationFaster;
+/** Default duration in milliseconds for each item's animation */ export const DEFAULT_ITEM_DURATION = motionTokens.durationNormal;

package/lib/choreography/Stagger/utils/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/choreography/Stagger/utils/constants.ts"],"sourcesContent":["/**\n * Default timing constants for stagger animations (milliseconds).\n */\n\nimport { motionTokens } from '@fluentui/react-motion';\n\n/** Default delay in milliseconds between each item's animation start */\nexport const DEFAULT_ITEM_DELAY = motionTokens.durationFaster;\n\n/** Default duration in milliseconds for each item's animation */\nexport const DEFAULT_ITEM_DURATION = motionTokens.durationNormal;\n"],"names":["motionTokens","DEFAULT_ITEM_DELAY","durationFaster","DEFAULT_ITEM_DURATION","durationNormal"],"mappings":"AAAA;;CAEC,GAED,SAASA,YAAY,QAAQ,yBAAyB;AAEtD,sEAAsE,GACtE,OAAO,MAAMC,qBAAqBD,aAAaE,cAAc,CAAC;AAE9D,+DAA+D,GAC/D,OAAO,MAAMC,wBAAwBH,aAAaI,cAAc,CAAC"}

package/lib/choreography/Stagger/utils/getStaggerChildMapping.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+/**
+ * Given `children`, return an object mapping key to child element and its index.
+ * This allows tracking individual items by identity (via React keys) rather than by position.
+ *
+ * Uses React.Children.toArray() which:
+ * - Automatically provides stable indices (0, 1, 2, ...)
+ * - Handles key normalization (e.g., 'a' → '.$a') consistently
+ * - Flattens fragments automatically
+ * - Generates keys for elements without explicit keys (e.g., '.0', '.1', '.2')
+ *
+ * @param children - React children to map
+ * @returns Object mapping child keys to { element, index }
+ */ // TODO: consider unifying with getChildMapping from react-motion package by making it generic
+export function getStaggerChildMapping(children) {
+    const childMapping = {};
+    if (children) {
+        React.Children.toArray(children).forEach((child, index)=>{
+            if (React.isValidElement(child)) {
+                var _child_key;
+                childMapping[(_child_key = child.key) !== null && _child_key !== void 0 ? _child_key : ''] = {
+                    element: child,
+                    index
+                };
+            }
+        });
+    }
+    return childMapping;
+}

package/lib/choreography/Stagger/utils/getStaggerChildMapping.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/choreography/Stagger/utils/getStaggerChildMapping.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type StaggerChildMapping = Record<string, { element: React.ReactElement; index: number }>;\n\n/**\n * Given `children`, return an object mapping key to child element and its index.\n * This allows tracking individual items by identity (via React keys) rather than by position.\n *\n * Uses React.Children.toArray() which:\n * - Automatically provides stable indices (0, 1, 2, ...)\n * - Handles key normalization (e.g., 'a' → '.$a') consistently\n * - Flattens fragments automatically\n * - Generates keys for elements without explicit keys (e.g., '.0', '.1', '.2')\n *\n * @param children - React children to map\n * @returns Object mapping child keys to { element, index }\n */\n// TODO: consider unifying with getChildMapping from react-motion package by making it generic\nexport function getStaggerChildMapping(children: React.ReactNode | undefined): StaggerChildMapping {\n  const childMapping: StaggerChildMapping = {};\n\n  if (children) {\n    React.Children.toArray(children).forEach((child, index) => {\n      if (React.isValidElement(child)) {\n        childMapping[child.key ?? ''] = {\n          element: child,\n          index,\n        };\n      }\n    });\n  }\n\n  return childMapping;\n}\n"],"names":["React","getStaggerChildMapping","children","childMapping","Children","toArray","forEach","child","index","isValidElement","key","element"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B;;;;;;;;;;;;CAYC,GACD,8FAA8F;AAC9F,OAAO,SAASC,uBAAuBC,QAAqC;IAC1E,MAAMC,eAAoC,CAAC;IAE3C,IAAID,UAAU;QACZF,MAAMI,QAAQ,CAACC,OAAO,CAACH,UAAUI,OAAO,CAAC,CAACC,OAAOC;YAC/C,IAAIR,MAAMS,cAAc,CAACF,QAAQ;oBAClBA;gBAAbJ,YAAY,CAACI,CAAAA,aAAAA,MAAMG,GAAG,cAATH,wBAAAA,aAAa,GAAG,GAAG;oBAC9BI,SAASJ;oBACTC;gBACF;YACF;QACF;IACF;IAEA,OAAOL;AACT"}

package/lib/choreography/Stagger/utils/index.js

@@ -0,0 +1,4 @@
+export { DEFAULT_ITEM_DELAY, DEFAULT_ITEM_DURATION } from './constants';
+export { getStaggerTotalDuration, staggerItemsVisibilityAtTime } from './stagger-calculations';
+export { acceptsVisibleProp, acceptsDelayProps } from './motionComponentDetection';
+export { getStaggerChildMapping } from './getStaggerChildMapping';

package/lib/choreography/Stagger/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/choreography/Stagger/utils/index.ts"],"sourcesContent":["export { DEFAULT_ITEM_DELAY, DEFAULT_ITEM_DURATION } from './constants';\nexport { getStaggerTotalDuration, staggerItemsVisibilityAtTime } from './stagger-calculations';\nexport type { StaggerItemsVisibilityAtTimeParams } from './stagger-calculations';\nexport { acceptsVisibleProp, acceptsDelayProps } from './motionComponentDetection';\nexport { getStaggerChildMapping } from './getStaggerChildMapping';\nexport type { StaggerChildMapping } from './getStaggerChildMapping';\n"],"names":["DEFAULT_ITEM_DELAY","DEFAULT_ITEM_DURATION","getStaggerTotalDuration","staggerItemsVisibilityAtTime","acceptsVisibleProp","acceptsDelayProps","getStaggerChildMapping"],"mappings":"AAAA,SAASA,kBAAkB,EAAEC,qBAAqB,QAAQ,cAAc;AACxE,SAASC,uBAAuB,EAAEC,4BAA4B,QAAQ,yBAAyB;AAE/F,SAASC,kBAAkB,EAAEC,iBAAiB,QAAQ,6BAA6B;AACnF,SAASC,sBAAsB,QAAQ,2BAA2B"}

package/lib/choreography/Stagger/utils/motionComponentDetection.js

@@ -0,0 +1,83 @@
+import * as React from 'react';
+/**
+ * Checks if a React element has all of the specified props explicitly provided.
+ *
+ * @param element - React element to inspect
+ * @param props - Array of prop names to verify presence on the element
+ * @returns true if all props exist on element.props, false otherwise
+ *
+ * @internal - Exported for testing purposes
+ */ /**
+ * Checks if a React element is a motion component created by createMotionComponent.
+ * Motion components are detected by the presence of the MOTION_DEFINITION symbol on the component.
+ *
+ * @param element - React element to inspect
+ * @returns true when the element's type contains the MOTION_DEFINITION symbol
+ *
+ * **Note:** This is a heuristic detection. Motion components may or may not support
+ * specific props like `delay` or `visible` depending on their implementation.
+ *
+ * @internal - Exported for testing purposes
+ */ export function isMotionComponent(element) {
+    if (!(element === null || element === void 0 ? void 0 : element.type) || typeof element.type !== 'function') {
+        return false;
+    }
+    // Check if the component has the MOTION_DEFINITION symbol (internal to createMotionComponent)
+    const symbols = Object.getOwnPropertySymbols(element.type);
+    return symbols.some((sym)=>sym.description === 'MOTION_DEFINITION');
+}
+/**
+ * Checks if a React element is a presence motion component by looking for the PRESENCE_MOTION_DEFINITION symbol.
+ * This symbol is added internally by createPresenceComponent and provides reliable detection.
+ *
+ * @param element - React element to inspect
+ * @returns true when the element's type contains the PRESENCE_MOTION_DEFINITION symbol
+ *
+ * **Presence components** (like Fade, Scale, Slide) are guaranteed to support both `visible` and `delay` props.
+ *
+ * @internal - Exported for testing purposes
+ */ export function isPresenceComponent(element) {
+    if (!(element === null || element === void 0 ? void 0 : element.type) || typeof element.type !== 'function') {
+        return false;
+    }
+    // Check if the component has the PRESENCE_MOTION_DEFINITION symbol (internal to createPresenceComponent)
+    const symbols = Object.getOwnPropertySymbols(element.type);
+    return symbols.some((sym)=>sym.description === 'PRESENCE_MOTION_DEFINITION');
+}
+/**
+ * Checks if a React element accepts both `delay` and `exitDelay` props.
+ * This uses a best-effort heuristic to detect components that support both delay props.
+ *
+ * @param element - React element to inspect
+ * @returns true when the element likely supports both delay and exitDelay props
+ *
+ * **Auto-detection includes:**
+ * - Presence components (Fade, Scale, etc.) - guaranteed to support both delay and exitDelay
+ * - Motion components (.In/.Out variants, custom motion components) - may support both delay props
+ * - Elements with explicit delay and exitDelay props already set
+ *
+ * **When to override:** If auto-detection is incorrect, use explicit `delayMode` prop on Stagger.
+ * For example, custom motion components that don't support both props should use `delayMode="timing"`.
+ *
+ * @internal - Exported for testing purposes
+ */ export function acceptsDelayProps(element) {
+    return isPresenceComponent(element) || isMotionComponent(element);
+}
+/**
+ * Checks if a React element accepts a `visible` prop.
+ * This uses a best-effort heuristic to detect components that support visible props.
+ *
+ * @param element - React element to inspect
+ * @returns true when the element likely supports a `visible` prop
+ *
+ * **Auto-detection includes:**
+ * - Presence components (Fade, Scale, etc.) - guaranteed to support visible
+ * - Elements with explicit visible props already set
+ *
+ * **When to override:** If auto-detection is incorrect, use explicit `hideMode` prop on Stagger.
+ * For example, custom components that don't support visible should use `hideMode="visibilityStyle"` or `hideMode="unmount"`.
+ *
+ * @internal - Exported for testing purposes
+ */ export function acceptsVisibleProp(element) {
+    return isPresenceComponent(element);
+}

package/lib/choreography/Stagger/utils/motionComponentDetection.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/choreography/Stagger/utils/motionComponentDetection.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * Checks if a React element has all of the specified props explicitly provided.\n *\n * @param element - React element to inspect\n * @param props - Array of prop names to verify presence on the element\n * @returns true if all props exist on element.props, false otherwise\n *\n * @internal - Exported for testing purposes\n */\n\n/**\n * Checks if a React element is a motion component created by createMotionComponent.\n * Motion components are detected by the presence of the MOTION_DEFINITION symbol on the component.\n *\n * @param element - React element to inspect\n * @returns true when the element's type contains the MOTION_DEFINITION symbol\n *\n * **Note:** This is a heuristic detection. Motion components may or may not support\n * specific props like `delay` or `visible` depending on their implementation.\n *\n * @internal - Exported for testing purposes\n */\nexport function isMotionComponent(element: React.ReactElement): boolean {\n  if (!element?.type || typeof element.type !== 'function') {\n    return false;\n  }\n\n  // Check if the component has the MOTION_DEFINITION symbol (internal to createMotionComponent)\n  const symbols = Object.getOwnPropertySymbols(element.type);\n  return symbols.some(sym => sym.description === 'MOTION_DEFINITION');\n}\n\n/**\n * Checks if a React element is a presence motion component by looking for the PRESENCE_MOTION_DEFINITION symbol.\n * This symbol is added internally by createPresenceComponent and provides reliable detection.\n *\n * @param element - React element to inspect\n * @returns true when the element's type contains the PRESENCE_MOTION_DEFINITION symbol\n *\n * **Presence components** (like Fade, Scale, Slide) are guaranteed to support both `visible` and `delay` props.\n *\n * @internal - Exported for testing purposes\n */\nexport function isPresenceComponent(element: React.ReactElement): boolean {\n  if (!element?.type || typeof element.type !== 'function') {\n    return false;\n  }\n\n  // Check if the component has the PRESENCE_MOTION_DEFINITION symbol (internal to createPresenceComponent)\n  const symbols = Object.getOwnPropertySymbols(element.type);\n  return symbols.some(sym => sym.description === 'PRESENCE_MOTION_DEFINITION');\n}\n\n/**\n * Checks if a React element accepts both `delay` and `exitDelay` props.\n * This uses a best-effort heuristic to detect components that support both delay props.\n *\n * @param element - React element to inspect\n * @returns true when the element likely supports both delay and exitDelay props\n *\n * **Auto-detection includes:**\n * - Presence components (Fade, Scale, etc.) - guaranteed to support both delay and exitDelay\n * - Motion components (.In/.Out variants, custom motion components) - may support both delay props\n * - Elements with explicit delay and exitDelay props already set\n *\n * **When to override:** If auto-detection is incorrect, use explicit `delayMode` prop on Stagger.\n * For example, custom motion components that don't support both props should use `delayMode=\"timing\"`.\n *\n * @internal - Exported for testing purposes\n */\nexport function acceptsDelayProps(element: React.ReactElement): boolean {\n  return isPresenceComponent(element) || isMotionComponent(element);\n}\n\n/**\n * Checks if a React element accepts a `visible` prop.\n * This uses a best-effort heuristic to detect components that support visible props.\n *\n * @param element - React element to inspect\n * @returns true when the element likely supports a `visible` prop\n *\n * **Auto-detection includes:**\n * - Presence components (Fade, Scale, etc.) - guaranteed to support visible\n * - Elements with explicit visible props already set\n *\n * **When to override:** If auto-detection is incorrect, use explicit `hideMode` prop on Stagger.\n * For example, custom components that don't support visible should use `hideMode=\"visibilityStyle\"` or `hideMode=\"unmount\"`.\n *\n * @internal - Exported for testing purposes\n */\nexport function acceptsVisibleProp(element: React.ReactElement): boolean {\n  return isPresenceComponent(element);\n}\n"],"names":["React","isMotionComponent","element","type","symbols","Object","getOwnPropertySymbols","some","sym","description","isPresenceComponent","acceptsDelayProps","acceptsVisibleProp"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B;;;;;;;;CAQC,GAED;;;;;;;;;;;CAWC,GACD,OAAO,SAASC,kBAAkBC,OAA2B;IAC3D,IAAI,EAACA,oBAAAA,8BAAAA,QAASC,IAAI,KAAI,OAAOD,QAAQC,IAAI,KAAK,YAAY;QACxD,OAAO;IACT;IAEA,8FAA8F;IAC9F,MAAMC,UAAUC,OAAOC,qBAAqB,CAACJ,QAAQC,IAAI;IACzD,OAAOC,QAAQG,IAAI,CAACC,CAAAA,MAAOA,IAAIC,WAAW,KAAK;AACjD;AAEA;;;;;;;;;;CAUC,GACD,OAAO,SAASC,oBAAoBR,OAA2B;IAC7D,IAAI,EAACA,oBAAAA,8BAAAA,QAASC,IAAI,KAAI,OAAOD,QAAQC,IAAI,KAAK,YAAY;QACxD,OAAO;IACT;IAEA,yGAAyG;IACzG,MAAMC,UAAUC,OAAOC,qBAAqB,CAACJ,QAAQC,IAAI;IACzD,OAAOC,QAAQG,IAAI,CAACC,CAAAA,MAAOA,IAAIC,WAAW,KAAK;AACjD;AAEA;;;;;;;;;;;;;;;;CAgBC,GACD,OAAO,SAASE,kBAAkBT,OAA2B;IAC3D,OAAOQ,oBAAoBR,YAAYD,kBAAkBC;AAC3D;AAEA;;;;;;;;;;;;;;;CAeC,GACD,OAAO,SAASU,mBAAmBV,OAA2B;IAC5D,OAAOQ,oBAAoBR;AAC7B"}

package/lib/choreography/Stagger/utils/stagger-calculations.js

@@ -0,0 +1,71 @@
+import { DEFAULT_ITEM_DELAY, DEFAULT_ITEM_DURATION } from './constants';
+/**
+ * Calculate the total stagger duration — from the moment the stagger begins
+ * until the final item's animation completes.
+ *
+ * Uses the formula:
+ *   max(0, itemDelay * (itemCount - 1) + itemDuration)
+ *
+ * @param params.itemCount    Total number of items to stagger
+ * @param params.itemDelay    Milliseconds between the start of each item (default: DEFAULT_ITEM_DELAY)
+ * @param params.itemDuration Milliseconds each item's animation lasts (default: DEFAULT_ITEM_DURATION)
+ * @returns                   Total duration in milliseconds (never negative)
+ */ export function getStaggerTotalDuration({ itemCount, itemDelay = DEFAULT_ITEM_DELAY, itemDuration = DEFAULT_ITEM_DURATION }) {
+    if (itemCount <= 0) {
+        return 0;
+    }
+    if (itemCount <= 1) {
+        return Math.max(0, itemDuration);
+    }
+    const staggerDuration = itemDelay * (itemCount - 1);
+    return Math.max(0, staggerDuration + itemDuration);
+}
+/**
+ * Returns visibility flags plus timing metrics for a stagger sequence.
+ */ export function staggerItemsVisibilityAtTime({ itemCount, elapsed, itemDelay = DEFAULT_ITEM_DELAY, itemDuration = DEFAULT_ITEM_DURATION, direction = 'enter', reversed = false }) {
+    // If no items, return the empty state
+    if (itemCount <= 0) {
+        return {
+            itemsVisibility: [],
+            totalDuration: 0
+        };
+    }
+    const totalDuration = getStaggerTotalDuration({
+        itemCount,
+        itemDelay,
+        itemDuration
+    });
+    // Calculate progression through the stagger sequence
+    let completedSteps;
+    if (itemDelay <= 0) {
+        // When itemDelay is 0 or negative, all steps complete immediately
+        completedSteps = itemCount;
+    } else {
+        // Both enter and exit should start their first item immediately, but handle t=0 differently
+        if (elapsed === 0) {
+            // At exactly t=0, for enter we want first item visible, for exit we want all items visible
+            completedSteps = direction === 'enter' ? 1 : 0;
+        } else {
+            // After t=0, both directions should progress at the same rate
+            const stepsFromElapsedTime = Math.floor(elapsed / itemDelay) + 1;
+            completedSteps = Math.min(itemCount, stepsFromElapsedTime);
+        }
+    }
+    const itemsVisibility = Array.from({
+        length: itemCount
+    }, (_, idx)=>{
+        // Calculate based on progression through the sequence (enter pattern)
+        const fromStart = idx < completedSteps;
+        const fromEnd = idx >= itemCount - completedSteps;
+        let itemVisible = reversed ? fromEnd : fromStart;
+        // For exit, invert the enter pattern
+        if (direction === 'exit') {
+            itemVisible = !itemVisible;
+        }
+        return itemVisible;
+    });
+    return {
+        itemsVisibility,
+        totalDuration
+    };
+}

package/lib/choreography/Stagger/utils/stagger-calculations.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/choreography/Stagger/utils/stagger-calculations.ts"],"sourcesContent":["import type { StaggerProps } from '../stagger-types';\nimport { DEFAULT_ITEM_DELAY, DEFAULT_ITEM_DURATION } from './constants';\n\n/**\n * Calculate the total stagger duration — from the moment the stagger begins\n * until the final item's animation completes.\n *\n * Uses the formula:\n *   max(0, itemDelay * (itemCount - 1) + itemDuration)\n *\n * @param params.itemCount    Total number of items to stagger\n * @param params.itemDelay    Milliseconds between the start of each item (default: DEFAULT_ITEM_DELAY)\n * @param params.itemDuration Milliseconds each item's animation lasts (default: DEFAULT_ITEM_DURATION)\n * @returns                   Total duration in milliseconds (never negative)\n */\nexport function getStaggerTotalDuration({\n  itemCount,\n  itemDelay = DEFAULT_ITEM_DELAY,\n  itemDuration = DEFAULT_ITEM_DURATION,\n}: {\n  itemCount: number;\n} & Pick<StaggerProps, 'itemDelay' | 'itemDuration'>): number {\n  if (itemCount <= 0) {\n    return 0;\n  }\n  if (itemCount <= 1) {\n    return Math.max(0, itemDuration);\n  }\n  const staggerDuration = itemDelay * (itemCount - 1);\n  return Math.max(0, staggerDuration + itemDuration);\n}\n\nexport interface StaggerItemsVisibilityAtTimeParams\n  extends Pick<StaggerProps, 'itemDelay' | 'itemDuration' | 'reversed'> {\n  itemCount: number;\n  elapsed: number;\n  direction?: 'enter' | 'exit';\n}\n\n/**\n * Returns visibility flags plus timing metrics for a stagger sequence.\n */\nexport function staggerItemsVisibilityAtTime({\n  itemCount,\n  elapsed,\n  itemDelay = DEFAULT_ITEM_DELAY,\n  itemDuration = DEFAULT_ITEM_DURATION,\n  direction = 'enter',\n  reversed = false,\n}: StaggerItemsVisibilityAtTimeParams): {\n  itemsVisibility: boolean[];\n  totalDuration: number;\n} {\n  // If no items, return the empty state\n  if (itemCount <= 0) {\n    return { itemsVisibility: [], totalDuration: 0 };\n  }\n\n  const totalDuration = getStaggerTotalDuration({ itemCount, itemDelay, itemDuration });\n\n  // Calculate progression through the stagger sequence\n  let completedSteps: number;\n  if (itemDelay <= 0) {\n    // When itemDelay is 0 or negative, all steps complete immediately\n    completedSteps = itemCount;\n  } else {\n    // Both enter and exit should start their first item immediately, but handle t=0 differently\n    if (elapsed === 0) {\n      // At exactly t=0, for enter we want first item visible, for exit we want all items visible\n      completedSteps = direction === 'enter' ? 1 : 0;\n    } else {\n      // After t=0, both directions should progress at the same rate\n      const stepsFromElapsedTime = Math.floor(elapsed / itemDelay) + 1;\n      completedSteps = Math.min(itemCount, stepsFromElapsedTime);\n    }\n  }\n\n  const itemsVisibility = Array.from({ length: itemCount }, (_, idx) => {\n    // Calculate based on progression through the sequence (enter pattern)\n    const fromStart = idx < completedSteps;\n    const fromEnd = idx >= itemCount - completedSteps;\n\n    let itemVisible = reversed ? fromEnd : fromStart;\n\n    // For exit, invert the enter pattern\n    if (direction === 'exit') {\n      itemVisible = !itemVisible;\n    }\n\n    return itemVisible;\n  });\n\n  return { itemsVisibility, totalDuration };\n}\n"],"names":["DEFAULT_ITEM_DELAY","DEFAULT_ITEM_DURATION","getStaggerTotalDuration","itemCount","itemDelay","itemDuration","Math","max","staggerDuration","staggerItemsVisibilityAtTime","elapsed","direction","reversed","itemsVisibility","totalDuration","completedSteps","stepsFromElapsedTime","floor","min","Array","from","length","_","idx","fromStart","fromEnd","itemVisible"],"mappings":"AACA,SAASA,kBAAkB,EAAEC,qBAAqB,QAAQ,cAAc;AAExE;;;;;;;;;;;CAWC,GACD,OAAO,SAASC,wBAAwB,EACtCC,SAAS,EACTC,YAAYJ,kBAAkB,EAC9BK,eAAeJ,qBAAqB,EAGc;IAClD,IAAIE,aAAa,GAAG;QAClB,OAAO;IACT;IACA,IAAIA,aAAa,GAAG;QAClB,OAAOG,KAAKC,GAAG,CAAC,GAAGF;IACrB;IACA,MAAMG,kBAAkBJ,YAAaD,CAAAA,YAAY,CAAA;IACjD,OAAOG,KAAKC,GAAG,CAAC,GAAGC,kBAAkBH;AACvC;AASA;;CAEC,GACD,OAAO,SAASI,6BAA6B,EAC3CN,SAAS,EACTO,OAAO,EACPN,YAAYJ,kBAAkB,EAC9BK,eAAeJ,qBAAqB,EACpCU,YAAY,OAAO,EACnBC,WAAW,KAAK,EACmB;IAInC,sCAAsC;IACtC,IAAIT,aAAa,GAAG;QAClB,OAAO;YAAEU,iBAAiB,EAAE;YAAEC,eAAe;QAAE;IACjD;IAEA,MAAMA,gBAAgBZ,wBAAwB;QAAEC;QAAWC;QAAWC;IAAa;IAEnF,qDAAqD;IACrD,IAAIU;IACJ,IAAIX,aAAa,GAAG;QAClB,kEAAkE;QAClEW,iBAAiBZ;IACnB,OAAO;QACL,4FAA4F;QAC5F,IAAIO,YAAY,GAAG;YACjB,2FAA2F;YAC3FK,iBAAiBJ,cAAc,UAAU,IAAI;QAC/C,OAAO;YACL,8DAA8D;YAC9D,MAAMK,uBAAuBV,KAAKW,KAAK,CAACP,UAAUN,aAAa;YAC/DW,iBAAiBT,KAAKY,GAAG,CAACf,WAAWa;QACvC;IACF;IAEA,MAAMH,kBAAkBM,MAAMC,IAAI,CAAC;QAAEC,QAAQlB;IAAU,GAAG,CAACmB,GAAGC;QAC5D,sEAAsE;QACtE,MAAMC,YAAYD,MAAMR;QACxB,MAAMU,UAAUF,OAAOpB,YAAYY;QAEnC,IAAIW,cAAcd,WAAWa,UAAUD;QAEvC,qCAAqC;QACrC,IAAIb,cAAc,QAAQ;YACxBe,cAAc,CAACA;QACjB;QAEA,OAAOA;IACT;IAEA,OAAO;QAAEb;QAAiBC;IAAc;AAC1C"}

package/lib/index.js

@@ -4,3 +4,10 @@ export { Scale, ScaleSnappy, ScaleRelaxed } from './components/Scale';
 export { Slide, SlideSnappy, SlideRelaxed } from './components/Slide';
 export { Blur } from './components/Blur';
 export { Rotate } from './components/Rotate';
+export { Stagger } from './choreography/Stagger';
+// Motion Atoms
+export { blurAtom } from './atoms/blur-atom';
+export { fadeAtom } from './atoms/fade-atom';
+export { rotateAtom } from './atoms/rotate-atom';
+export { scaleAtom } from './atoms/scale-atom';
+export { slideAtom } from './atoms/slide-atom'; // TODO: consider whether to export some or all collapse atoms

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Collapse,\n  CollapseSnappy,\n  CollapseRelaxed,\n  CollapseDelayed,\n  type CollapseParams,\n  type CollapseDurations,\n} from './components/Collapse';\nexport { Fade, FadeSnappy, FadeRelaxed, type FadeParams } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleRelaxed, type ScaleParams } from './components/Scale';\nexport { Slide, SlideSnappy, SlideRelaxed, type SlideParams } from './components/Slide';\nexport { Blur, type BlurParams } from './components/Blur';\nexport { Rotate, type RotateParams } from './components/Rotate';\n"],"names":["Collapse","CollapseSnappy","CollapseRelaxed","CollapseDelayed","Fade","FadeSnappy","FadeRelaxed","Scale","ScaleSnappy","ScaleRelaxed","Slide","SlideSnappy","SlideRelaxed","Blur","Rotate"],"mappings":"AAAA,SACEA,QAAQ,EACRC,cAAc,EACdC,eAAe,EACfC,eAAe,QAGV,wBAAwB;AAC/B,SAASC,IAAI,EAAEC,UAAU,EAAEC,WAAW,QAAyB,oBAAoB;AACnF,SAASC,KAAK,EAAEC,WAAW,EAAEC,YAAY,QAA0B,qBAAqB;AACxF,SAASC,KAAK,EAAEC,WAAW,EAAEC,YAAY,QAA0B,qBAAqB;AACxF,SAASC,IAAI,QAAyB,oBAAoB;AAC1D,SAASC,MAAM,QAA2B,sBAAsB"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Collapse,\n  CollapseSnappy,\n  CollapseRelaxed,\n  CollapseDelayed,\n  type CollapseParams,\n  type CollapseDurations,\n} from './components/Collapse';\nexport { Fade, FadeSnappy, FadeRelaxed, type FadeParams } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleRelaxed, type ScaleParams } from './components/Scale';\nexport { Slide, SlideSnappy, SlideRelaxed, type SlideParams } from './components/Slide';\nexport { Blur, type BlurParams } from './components/Blur';\nexport { Rotate, type RotateParams } from './components/Rotate';\nexport { Stagger, type StaggerProps } from './choreography/Stagger';\n\n// Motion Atoms\nexport { blurAtom } from './atoms/blur-atom';\nexport { fadeAtom } from './atoms/fade-atom';\nexport { rotateAtom } from './atoms/rotate-atom';\nexport { scaleAtom } from './atoms/scale-atom';\nexport { slideAtom } from './atoms/slide-atom';\n// TODO: consider whether to export some or all collapse atoms\n"],"names":["Collapse","CollapseSnappy","CollapseRelaxed","CollapseDelayed","Fade","FadeSnappy","FadeRelaxed","Scale","ScaleSnappy","ScaleRelaxed","Slide","SlideSnappy","SlideRelaxed","Blur","Rotate","Stagger","blurAtom","fadeAtom","rotateAtom","scaleAtom","slideAtom"],"mappings":"AAAA,SACEA,QAAQ,EACRC,cAAc,EACdC,eAAe,EACfC,eAAe,QAGV,wBAAwB;AAC/B,SAASC,IAAI,EAAEC,UAAU,EAAEC,WAAW,QAAyB,oBAAoB;AACnF,SAASC,KAAK,EAAEC,WAAW,EAAEC,YAAY,QAA0B,qBAAqB;AACxF,SAASC,KAAK,EAAEC,WAAW,EAAEC,YAAY,QAA0B,qBAAqB;AACxF,SAASC,IAAI,QAAyB,oBAAoB;AAC1D,SAASC,MAAM,QAA2B,sBAAsB;AAChE,SAASC,OAAO,QAA2B,yBAAyB;AAEpE,eAAe;AACf,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,UAAU,QAAQ,sBAAsB;AACjD,SAASC,SAAS,QAAQ,qBAAqB;AAC/C,SAASC,SAAS,QAAQ,qBAAqB,CAC/C,8DAA8D"}

package/lib-commonjs/choreography/Stagger/Stagger.js

@@ -0,0 +1,137 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Stagger", {
+    enumerable: true,
+    get: function() {
+        return Stagger;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useStaggerItemsVisibility = require("./useStaggerItemsVisibility");
+const _utils = require("./utils");
+/**
+ * Shared utility to detect optimal stagger modes based on children components.
+ * Consolidates the auto-detection logic used by both StaggerMain and createStaggerDirection.
+ */ const detectStaggerModes = (children, options)=>{
+    const { hideMode, delayMode, fallbackHideMode = 'visibilityStyle' } = options;
+    const childMapping = (0, _utils.getStaggerChildMapping)(children);
+    const elements = Object.values(childMapping).map((item)=>item.element);
+    const hasVisiblePropSupport = elements.every((child)=>(0, _utils.acceptsVisibleProp)(child));
+    const hasDelayPropSupport = elements.every((child)=>(0, _utils.acceptsDelayProps)(child));
+    return {
+        hideMode: hideMode !== null && hideMode !== void 0 ? hideMode : hasVisiblePropSupport ? 'visibleProp' : fallbackHideMode,
+        delayMode: delayMode !== null && delayMode !== void 0 ? delayMode : hasDelayPropSupport ? 'delayProp' : 'timing'
+    };
+};
+const StaggerOneWay = ({ children, direction, itemDelay = _utils.DEFAULT_ITEM_DELAY, itemDuration = _utils.DEFAULT_ITEM_DURATION, reversed = false, hideMode, delayMode = 'timing', onMotionFinish })=>{
+    const childMapping = _react.useMemo(()=>(0, _utils.getStaggerChildMapping)(children), [
+        children
+    ]);
+    // Always call hooks at the top level, regardless of delayMode
+    const { itemsVisibility } = (0, _useStaggerItemsVisibility.useStaggerItemsVisibility)({
+        childMapping,
+        itemDelay,
+        itemDuration,
+        direction,
+        reversed,
+        onMotionFinish,
+        hideMode
+    });
+    // For delayProp mode, pass delay props directly to motion components
+    if (delayMode === 'delayProp') {
+        return /*#__PURE__*/ _react.createElement(_react.Fragment, null, Object.entries(childMapping).map(([key, { element, index }])=>{
+            const staggerIndex = reversed ? Object.keys(childMapping).length - 1 - index : index;
+            const delay = staggerIndex * itemDelay;
+            // Clone element with delay prop (for enter direction) or exitDelay prop (for exit direction)
+            const delayProp = direction === 'enter' ? {
+                delay
+            } : {
+                exitDelay: delay
+            };
+            // Only set visible prop if the component supports it
+            // Set visible based on direction: true for enter, false for exit
+            const visibleProp = (0, _utils.acceptsVisibleProp)(element) ? {
+                visible: direction === 'enter'
+            } : {};
+            return /*#__PURE__*/ _react.cloneElement(element, {
+                key,
+                ...visibleProp,
+                ...delayProp
+            });
+        }));
+    }
+    // For timing mode, use the existing timing-based implementation
+    return /*#__PURE__*/ _react.createElement(_react.Fragment, null, Object.entries(childMapping).map(([key, { element }])=>{
+        if (hideMode === 'visibleProp') {
+            // Use a generic record type for props to avoid `any` while still allowing unknown prop shapes.
+            return /*#__PURE__*/ _react.cloneElement(element, {
+                key,
+                visible: itemsVisibility[key]
+            });
+        } else if (hideMode === 'visibilityStyle') {
+            const childProps = element.props;
+            const style = {
+                ...childProps === null || childProps === void 0 ? void 0 : childProps.style,
+                visibility: itemsVisibility[key] ? 'visible' : 'hidden'
+            };
+            return /*#__PURE__*/ _react.cloneElement(element, {
+                key,
+                style
+            });
+        } else {
+            // unmount mode
+            return itemsVisibility[key] ? /*#__PURE__*/ _react.cloneElement(element, {
+                key
+            }) : null;
+        }
+    }));
+};
+// Shared helper for StaggerIn and StaggerOut
+const createStaggerDirection = (direction)=>{
+    const StaggerDirection = ({ hideMode, delayMode, children, ...props })=>{
+        // Auto-detect modes for better performance with motion components
+        const { hideMode: resolvedHideMode, delayMode: resolvedDelayMode } = detectStaggerModes(children, {
+            hideMode,
+            delayMode,
+            // One-way stagger falls back to visibilityStyle if it doesn't detect visibleProp support
+            fallbackHideMode: 'visibilityStyle'
+        });
+        return /*#__PURE__*/ _react.createElement(StaggerOneWay, {
+            ...props,
+            children: children,
+            direction: direction,
+            hideMode: resolvedHideMode,
+            delayMode: resolvedDelayMode
+        });
+    };
+    return StaggerDirection;
+};
+const StaggerIn = createStaggerDirection('enter');
+const StaggerOut = createStaggerDirection('exit');
+// Main Stagger component with auto-detection or explicit modes
+const StaggerMain = (props)=>{
+    const { children, visible = false, hideMode, delayMode, ...rest } = props;
+    // Auto-detect modes for bidirectional stagger
+    const { hideMode: resolvedHideMode, delayMode: resolvedDelayMode } = detectStaggerModes(children, {
+        hideMode,
+        delayMode,
+        // Bidirectional stagger falls back to visibilityStyle if it doesn't detect visibleProp support
+        fallbackHideMode: 'visibilityStyle'
+    });
+    const direction = visible ? 'enter' : 'exit';
+    return /*#__PURE__*/ _react.createElement(StaggerOneWay, {
+        ...rest,
+        children: children,
+        hideMode: resolvedHideMode,
+        delayMode: resolvedDelayMode,
+        direction: direction
+    });
+};
+const Stagger = Object.assign(StaggerMain, {
+    In: StaggerIn,
+    Out: StaggerOut
+});

package/lib-commonjs/choreography/Stagger/Stagger.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/choreography/Stagger/Stagger.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useStaggerItemsVisibility } from './useStaggerItemsVisibility';\nimport {\n  DEFAULT_ITEM_DURATION,\n  DEFAULT_ITEM_DELAY,\n  acceptsVisibleProp,\n  acceptsDelayProps,\n  getStaggerChildMapping,\n} from './utils';\nimport { StaggerOneWayProps, StaggerProps, type StaggerHideMode, type StaggerDelayMode } from './stagger-types';\n\n/**\n * Shared utility to detect optimal stagger modes based on children components.\n * Consolidates the auto-detection logic used by both StaggerMain and createStaggerDirection.\n */\nconst detectStaggerModes = (\n  children: React.ReactNode,\n  options: {\n    hideMode?: StaggerHideMode;\n    delayMode?: StaggerDelayMode;\n    fallbackHideMode?: StaggerHideMode;\n  },\n): { hideMode: StaggerHideMode; delayMode: StaggerDelayMode } => {\n  const { hideMode, delayMode, fallbackHideMode = 'visibilityStyle' } = options;\n\n  const childMapping = getStaggerChildMapping(children);\n  const elements = Object.values(childMapping).map(item => item.element);\n  const hasVisiblePropSupport = elements.every(child => acceptsVisibleProp(child));\n  const hasDelayPropSupport = elements.every(child => acceptsDelayProps(child));\n\n  return {\n    hideMode: hideMode ?? (hasVisiblePropSupport ? 'visibleProp' : fallbackHideMode),\n    delayMode: delayMode ?? (hasDelayPropSupport ? 'delayProp' : 'timing'),\n  };\n};\n\nconst StaggerOneWay: React.FC<StaggerOneWayProps> = ({\n  children,\n  direction,\n  itemDelay = DEFAULT_ITEM_DELAY,\n  itemDuration = DEFAULT_ITEM_DURATION,\n  reversed = false,\n  hideMode,\n  delayMode = 'timing',\n  onMotionFinish,\n}) => {\n  const childMapping = React.useMemo(() => getStaggerChildMapping(children), [children]);\n\n  // Always call hooks at the top level, regardless of delayMode\n  const { itemsVisibility } = useStaggerItemsVisibility({\n    childMapping,\n    itemDelay,\n    itemDuration,\n    direction,\n    reversed,\n    onMotionFinish,\n    hideMode,\n  });\n\n  // For delayProp mode, pass delay props directly to motion components\n  if (delayMode === 'delayProp') {\n    return (\n      <>\n        {Object.entries(childMapping).map(([key, { element, index }]) => {\n          const staggerIndex = reversed ? Object.keys(childMapping).length - 1 - index : index;\n          const delay = staggerIndex * itemDelay;\n\n          // Clone element with delay prop (for enter direction) or exitDelay prop (for exit direction)\n          const delayProp = direction === 'enter' ? { delay } : { exitDelay: delay };\n\n          // Only set visible prop if the component supports it\n          // Set visible based on direction: true for enter, false for exit\n          const visibleProp = acceptsVisibleProp(element) ? { visible: direction === 'enter' } : {};\n\n          return React.cloneElement(element, {\n            key,\n            ...visibleProp,\n            ...delayProp,\n          });\n        })}\n      </>\n    );\n  }\n\n  // For timing mode, use the existing timing-based implementation\n\n  return (\n    <>\n      {Object.entries(childMapping).map(([key, { element }]) => {\n        if (hideMode === 'visibleProp') {\n          // Use a generic record type for props to avoid `any` while still allowing unknown prop shapes.\n          return React.cloneElement(element, {\n            key,\n            visible: itemsVisibility[key],\n          } as Partial<Record<string, unknown>>);\n        } else if (hideMode === 'visibilityStyle') {\n          const childProps = element.props as Record<string, unknown> | undefined;\n          const style = {\n            ...(childProps?.style as Record<string, unknown> | undefined),\n            visibility: itemsVisibility[key] ? 'visible' : 'hidden',\n          };\n          return React.cloneElement(element, { key, style } as Partial<Record<string, unknown>>);\n        } else {\n          // unmount mode\n          return itemsVisibility[key] ? React.cloneElement(element, { key }) : null;\n        }\n      })}\n    </>\n  );\n};\n\n// Shared helper for StaggerIn and StaggerOut\nconst createStaggerDirection = (direction: 'enter' | 'exit') => {\n  const StaggerDirection: React.FC<Omit<StaggerProps, 'visible'>> = ({ hideMode, delayMode, children, ...props }) => {\n    // Auto-detect modes for better performance with motion components\n    const { hideMode: resolvedHideMode, delayMode: resolvedDelayMode } = detectStaggerModes(children, {\n      hideMode,\n      delayMode,\n      // One-way stagger falls back to visibilityStyle if it doesn't detect visibleProp support\n      fallbackHideMode: 'visibilityStyle',\n    });\n\n    return (\n      <StaggerOneWay\n        {...props}\n        children={children}\n        direction={direction}\n        hideMode={resolvedHideMode}\n        delayMode={resolvedDelayMode}\n      />\n    );\n  };\n\n  return StaggerDirection;\n};\n\nconst StaggerIn = createStaggerDirection('enter');\nconst StaggerOut = createStaggerDirection('exit');\n\n// Main Stagger component with auto-detection or explicit modes\nconst StaggerMain: React.FC<StaggerProps> = props => {\n  const { children, visible = false, hideMode, delayMode, ...rest } = props;\n\n  // Auto-detect modes for bidirectional stagger\n  const { hideMode: resolvedHideMode, delayMode: resolvedDelayMode } = detectStaggerModes(children, {\n    hideMode,\n    delayMode,\n    // Bidirectional stagger falls back to visibilityStyle if it doesn't detect visibleProp support\n    fallbackHideMode: 'visibilityStyle',\n  });\n\n  const direction = visible ? 'enter' : 'exit';\n\n  return (\n    <StaggerOneWay\n      {...rest}\n      children={children}\n      hideMode={resolvedHideMode}\n      delayMode={resolvedDelayMode}\n      direction={direction}\n    />\n  );\n};\n\n/**\n * Stagger is a component that manages the staggered entrance and exit of its children.\n * Children are animated in sequence with configurable timing between each item.\n * Stagger can be interactively toggled between entrance and exit animations using the `visible` prop.\n *\n * @param children - React elements to animate. Elements are cloned with animation props.\n * @param visible - Controls animation direction. When `true`, the group is animating \"enter\" (items shown);\n * when `false`, the group is animating \"exit\" (items hidden). Defaults to `false`.\n * @param itemDelay - Milliseconds between each item's animation start.\n * Defaults to the package's default delay (see `DEFAULT_ITEM_DELAY`).\n * @param itemDuration - Milliseconds each item's animation lasts. Only used with `delayMode=\"timing\"`.\n * Defaults to the package's default item duration (see `DEFAULT_ITEM_DURATION`).\n * @param reversed - Whether to reverse the stagger sequence (last item animates first). Defaults to `false`.\n * @param hideMode - How children's visibility/mounting is managed. Auto-detects if not specified.\n * @param delayMode - How staggering timing is implemented. Auto-detects if not specified.\n * @param onMotionFinish - Callback invoked when the staggered animation sequence completes.\n *\n * **Auto-detection behavior:**\n * - **hideMode**: Presence components use `'visibleProp'`, DOM elements use `'visibilityStyle'`\n * - **delayMode**: Components with delay support use `'delayProp'` (most performant), others use `'timing'`\n *\n * **hideMode options:**\n * - `'visibleProp'`: Children are presence components with `visible` prop (always rendered, visibility controlled via prop)\n * - `'visibilityStyle'`: Children remain in DOM with inline style visibility: hidden/visible (preserves layout space)\n * - `'unmount'`: Children are mounted/unmounted from DOM based on visibility\n *\n * **delayMode options:**\n * - `'timing'`: Manages visibility over time using JavaScript timing\n * - `'delayProp'`: Passes delay props to motion components to use native Web Animations API delays (most performant)\n *\n * **Static variants:**\n * - `<Stagger.In>` - One-way stagger for entrance animations only (auto-detects optimal modes)\n * - `<Stagger.Out>` - One-way stagger for exit animations only (auto-detects optimal modes)\n *\n * @example\n * ```tsx\n * import { Stagger, Fade, Scale, Rotate } from '@fluentui/react-motion-components-preview';\n *\n * // Auto-detects optimal modes for presence components (delayProp + visibleProp)\n * <Stagger visible={isVisible} itemDelay={150}>\n *   <Fade><div>Item 2</div></Fade>\n *   <Scale><div>Item 1</div></Scale>\n *   <Rotate><div>Item 3</div></Rotate>\n * </Stagger>\n *\n * // Auto-detects optimal modes for motion components (delayProp + unmount)\n * <Stagger.In itemDelay={100}>\n *   <Scale.In><div>Item 1</div></Scale.In>\n *   <Fade.In><div>Item 2</div></Fade.In>\n * </Stagger.In>\n *\n * // Auto-detects timing mode for DOM elements (timing + visibilityStyle)\n * <Stagger visible={isVisible} itemDelay={150} onMotionFinish={handleComplete}>\n *   <div>Item 1</div>\n *   <div>Item 2</div>\n *   <div>Item 3</div>\n * </Stagger>\n *\n * // Override auto-detection when needed\n * <Stagger visible={isVisible} delayMode=\"timing\" hideMode=\"unmount\">\n *   <CustomComponent>Item 1</CustomComponent>\n * </Stagger>\n * ```\n */\nexport const Stagger = Object.assign(StaggerMain, {\n  In: StaggerIn,\n  Out: StaggerOut,\n});\n"],"names":["Stagger","detectStaggerModes","children","options","hideMode","delayMode","fallbackHideMode","childMapping","getStaggerChildMapping","elements","Object","values","map","item","element","hasVisiblePropSupport","every","child","acceptsVisibleProp","hasDelayPropSupport","acceptsDelayProps","StaggerOneWay","direction","itemDelay","DEFAULT_ITEM_DELAY","itemDuration","DEFAULT_ITEM_DURATION","reversed","onMotionFinish","React","useMemo","itemsVisibility","useStaggerItemsVisibility","entries","key","index","staggerIndex","keys","length","delay","delayProp","exitDelay","visibleProp","visible","cloneElement","childProps","props","style","visibility","createStaggerDirection","StaggerDirection","resolvedHideMode","resolvedDelayMode","StaggerIn","StaggerOut","StaggerMain","rest","assign","In","Out"],"mappings":"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"}