feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-motion-components-preview/lib/atoms/blur-atom.js

@@ -0,0 +1,29 @@
+import { motionTokens } from '@fluentui/react-motion';
+/**
+ * Generates a motion atom object for a blur-in or blur-out.
+ * @param direction - The functional direction of the motion: 'enter' or 'exit'.
+ * @param duration - The duration of the motion in milliseconds.
+ * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
+ * @param outRadius - Blur radius for the out state (exited) with units (e.g., '20px', '1rem'). Defaults to '10px'.
+ * @param inRadius - Blur radius for the in state (entered) with units (e.g., '0px', '5px'). Defaults to '0px'.
+ * @param delay - Time (ms) to delay the animation. Defaults to 0.
+ * @returns A motion atom object with filter blur keyframes and the supplied duration and easing.
+ */ export const blurAtom = ({ direction, duration, easing = motionTokens.curveLinear, delay = 0, outRadius = '10px', inRadius = '0px' })=>{
+    const keyframes = [
+        {
+            filter: `blur(${outRadius})`
+        },
+        {
+            filter: `blur(${inRadius})`
+        }
+    ];
+    if (direction === 'exit') {
+        keyframes.reverse();
+    }
+    return {
+        keyframes,
+        duration,
+        easing,
+        delay
+    };
+};

node_modules/@fluentui/react-motion-components-preview/lib/atoms/blur-atom.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/atoms/blur-atom.ts"],"sourcesContent":["import { AtomMotion, motionTokens } from '@fluentui/react-motion';\nimport { BaseAtomParams } from '../types';\n\ninterface BlurAtomParams extends BaseAtomParams {\n  /** Blur radius for the out state (exited). Defaults to '10px'. */\n  outRadius?: string;\n  /** Blur radius for the in state (entered). Defaults to '0px'. */\n  inRadius?: string;\n}\n\n/**\n * Generates a motion atom object for a blur-in or blur-out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param outRadius - Blur radius for the out state (exited) with units (e.g., '20px', '1rem'). Defaults to '10px'.\n * @param inRadius - Blur radius for the in state (entered) with units (e.g., '0px', '5px'). Defaults to '0px'.\n * @param delay - Time (ms) to delay the animation. Defaults to 0.\n * @returns A motion atom object with filter blur keyframes and the supplied duration and easing.\n */\nexport const blurAtom = ({\n  direction,\n  duration,\n  easing = motionTokens.curveLinear,\n  delay = 0,\n  outRadius = '10px',\n  inRadius = '0px',\n}: BlurAtomParams): AtomMotion => {\n  const keyframes = [{ filter: `blur(${outRadius})` }, { filter: `blur(${inRadius})` }];\n  if (direction === 'exit') {\n    keyframes.reverse();\n  }\n  return {\n    keyframes,\n    duration,\n    easing,\n    delay,\n  };\n};\n"],"names":["motionTokens","blurAtom","direction","duration","easing","curveLinear","delay","outRadius","inRadius","keyframes","filter","reverse"],"mappings":"AAAA,SAAqBA,YAAY,QAAQ,yBAAyB;AAUlE;;;;;;;;;CASC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,SAAS,EACTC,QAAQ,EACRC,SAASJ,aAAaK,WAAW,EACjCC,QAAQ,CAAC,EACTC,YAAY,MAAM,EAClBC,WAAW,KAAK,EACD;IACf,MAAMC,YAAY;QAAC;YAAEC,QAAQ,CAAC,KAAK,EAAEH,UAAU,CAAC,CAAC;QAAC;QAAG;YAAEG,QAAQ,CAAC,KAAK,EAAEF,SAAS,CAAC,CAAC;QAAC;KAAE;IACrF,IAAIN,cAAc,QAAQ;QACxBO,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAN;QACAC;QACAE;IACF;AACF,EAAE"}

node_modules/@fluentui/react-motion-components-preview/lib/atoms/fade-atom.js

@@ -0,0 +1,32 @@
+import { motionTokens } from '@fluentui/react-motion';
+/**
+ * Generates a motion atom object for a fade-in or fade-out.
+ * @param direction - The functional direction of the motion: 'enter' or 'exit'.
+ * @param duration - The duration of the motion in milliseconds.
+ * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
+ * @param delay - The delay before the motion starts. Defaults to 0.
+ * @param outOpacity - Opacity for the out state (exited). Defaults to 0.
+ * @param inOpacity - Opacity for the in state (entered). Defaults to 1.
+ * @returns A motion atom object with opacity keyframes and the supplied duration and easing.
+ */ export const fadeAtom = ({ direction, duration, easing = motionTokens.curveLinear, delay = 0, outOpacity = 0, inOpacity = 1 })=>{
+    const keyframes = [
+        {
+            opacity: outOpacity
+        },
+        {
+            opacity: inOpacity
+        }
+    ];
+    if (direction === 'exit') {
+        keyframes.reverse();
+    }
+    return {
+        keyframes,
+        duration,
+        easing,
+        delay,
+        // Applying opacity backwards and forwards in time is important
+        // to avoid a bug where a delayed animation is not hidden when it should be.
+        fill: 'both'
+    };
+};

node_modules/@fluentui/react-motion-components-preview/lib/atoms/fade-atom.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/atoms/fade-atom.ts"],"sourcesContent":["import { AtomMotion, motionTokens } from '@fluentui/react-motion';\nimport { BaseAtomParams } from '../types';\n\ninterface FadeAtomParams extends BaseAtomParams {\n  /** Defines how values are applied before and after execution. Defaults to 'both'. */\n  fill?: FillMode;\n\n  /** Opacity for the out state (exited). Defaults to 0. */\n  outOpacity?: number;\n\n  /** Opacity for the in state (entered). Defaults to 1. */\n  inOpacity?: number;\n}\n\n/**\n * Generates a motion atom object for a fade-in or fade-out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param delay - The delay before the motion starts. Defaults to 0.\n * @param outOpacity - Opacity for the out state (exited). Defaults to 0.\n * @param inOpacity - Opacity for the in state (entered). Defaults to 1.\n * @returns A motion atom object with opacity keyframes and the supplied duration and easing.\n */\nexport const fadeAtom = ({\n  direction,\n  duration,\n  easing = motionTokens.curveLinear,\n  delay = 0,\n  outOpacity = 0,\n  inOpacity = 1,\n}: FadeAtomParams): AtomMotion => {\n  const keyframes = [{ opacity: outOpacity }, { opacity: inOpacity }];\n  if (direction === 'exit') {\n    keyframes.reverse();\n  }\n  return {\n    keyframes,\n    duration,\n    easing,\n    delay,\n    // Applying opacity backwards and forwards in time is important\n    // to avoid a bug where a delayed animation is not hidden when it should be.\n    fill: 'both',\n  };\n};\n"],"names":["motionTokens","fadeAtom","direction","duration","easing","curveLinear","delay","outOpacity","inOpacity","keyframes","opacity","reverse","fill"],"mappings":"AAAA,SAAqBA,YAAY,QAAQ,yBAAyB;AAclE;;;;;;;;;CASC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,SAAS,EACTC,QAAQ,EACRC,SAASJ,aAAaK,WAAW,EACjCC,QAAQ,CAAC,EACTC,aAAa,CAAC,EACdC,YAAY,CAAC,EACE;IACf,MAAMC,YAAY;QAAC;YAAEC,SAASH;QAAW;QAAG;YAAEG,SAASF;QAAU;KAAE;IACnE,IAAIN,cAAc,QAAQ;QACxBO,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAN;QACAC;QACAE;QACA,+DAA+D;QAC/D,4EAA4E;QAC5EM,MAAM;IACR;AACF,EAAE"}

node_modules/@fluentui/react-motion-components-preview/lib/atoms/rotate-atom.js

@@ -0,0 +1,33 @@
+import { motionTokens } from '@fluentui/react-motion';
+const createRotateValue = (axis, angle)=>{
+    return `${axis.toLowerCase()} ${angle}deg`;
+};
+/**
+ * Generates a motion atom object for a rotation around a single axis.
+ * @param direction - The functional direction of the motion: 'enter' or 'exit'.
+ * @param duration - The duration of the motion in milliseconds.
+ * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
+ * @param axis - The axis of rotation: 'x', 'y', or 'z'. Defaults to 'y'.
+ * @param outAngle - Rotation angle for the out state (exited) in degrees. Defaults to -90.
+ * @param inAngle - Rotation angle for the in state (entered) in degrees. Defaults to 0.
+ * @param delay - Time (ms) to delay the animation. Defaults to 0.
+ * @returns A motion atom object with rotate keyframes and the supplied duration and easing.
+ */ export const rotateAtom = ({ direction, duration, easing = motionTokens.curveLinear, delay = 0, axis = 'z', outAngle = -90, inAngle = 0 })=>{
+    const keyframes = [
+        {
+            rotate: createRotateValue(axis, outAngle)
+        },
+        {
+            rotate: createRotateValue(axis, inAngle)
+        }
+    ];
+    if (direction === 'exit') {
+        keyframes.reverse();
+    }
+    return {
+        keyframes,
+        duration,
+        easing,
+        delay
+    };
+};

node_modules/@fluentui/react-motion-components-preview/lib/atoms/rotate-atom.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/atoms/rotate-atom.ts"],"sourcesContent":["import { AtomMotion, motionTokens } from '@fluentui/react-motion';\nimport type { RotateParams } from '../components/Rotate/rotate-types';\nimport { BaseAtomParams } from '../types';\n\ntype Axis3D = NonNullable<RotateParams['axis']>;\n\ninterface RotateAtomParams extends BaseAtomParams {\n  axis?: Axis3D;\n  /** Rotation angle for the out state (exited) in degrees. Defaults to -90. */\n  outAngle?: number;\n  /** Rotation angle for the in state (entered) in degrees. Defaults to 0. */\n  inAngle?: number;\n}\n\nconst createRotateValue = (axis: Axis3D, angle: number): string => {\n  return `${axis.toLowerCase()} ${angle}deg`;\n};\n\n/**\n * Generates a motion atom object for a rotation around a single axis.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param axis - The axis of rotation: 'x', 'y', or 'z'. Defaults to 'y'.\n * @param outAngle - Rotation angle for the out state (exited) in degrees. Defaults to -90.\n * @param inAngle - Rotation angle for the in state (entered) in degrees. Defaults to 0.\n * @param delay - Time (ms) to delay the animation. Defaults to 0.\n * @returns A motion atom object with rotate keyframes and the supplied duration and easing.\n */\nexport const rotateAtom = ({\n  direction,\n  duration,\n  easing = motionTokens.curveLinear,\n  delay = 0,\n  axis = 'z',\n  outAngle = -90,\n  inAngle = 0,\n}: RotateAtomParams): AtomMotion => {\n  const keyframes = [{ rotate: createRotateValue(axis, outAngle) }, { rotate: createRotateValue(axis, inAngle) }];\n  if (direction === 'exit') {\n    keyframes.reverse();\n  }\n\n  return {\n    keyframes,\n    duration,\n    easing,\n    delay,\n  };\n};\n"],"names":["motionTokens","createRotateValue","axis","angle","toLowerCase","rotateAtom","direction","duration","easing","curveLinear","delay","outAngle","inAngle","keyframes","rotate","reverse"],"mappings":"AAAA,SAAqBA,YAAY,QAAQ,yBAAyB;AAclE,MAAMC,oBAAoB,CAACC,MAAcC;IACvC,OAAO,GAAGD,KAAKE,WAAW,GAAG,CAAC,EAAED,MAAM,GAAG,CAAC;AAC5C;AAEA;;;;;;;;;;CAUC,GACD,OAAO,MAAME,aAAa,CAAC,EACzBC,SAAS,EACTC,QAAQ,EACRC,SAASR,aAAaS,WAAW,EACjCC,QAAQ,CAAC,EACTR,OAAO,GAAG,EACVS,WAAW,CAAC,EAAE,EACdC,UAAU,CAAC,EACM;IACjB,MAAMC,YAAY;QAAC;YAAEC,QAAQb,kBAAkBC,MAAMS;QAAU;QAAG;YAAEG,QAAQb,kBAAkBC,MAAMU;QAAS;KAAE;IAC/G,IAAIN,cAAc,QAAQ;QACxBO,UAAUE,OAAO;IACnB;IAEA,OAAO;QACLF;QACAN;QACAC;QACAE;IACF;AACF,EAAE"}

node_modules/@fluentui/react-motion-components-preview/lib/atoms/scale-atom.js

@@ -0,0 +1,29 @@
+import { motionTokens } from '@fluentui/react-motion';
+/**
+ * Generates a motion atom object for a scale in or scale out.
+ * @param direction - The functional direction of the motion: 'enter' or 'exit'.
+ * @param duration - The duration of the motion in milliseconds.
+ * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
+ * @param outScale - Scale for the out state (exited). Defaults to 0.9.
+ * @param inScale - Scale for the in state (entered). Defaults to 1.
+ * @param delay - Time (ms) to delay the animation. Defaults to 0.
+ * @returns A motion atom object with scale keyframes and the supplied duration and easing.
+ */ export const scaleAtom = ({ direction, duration, easing = motionTokens.curveLinear, delay = 0, outScale = 0.9, inScale = 1 })=>{
+    const keyframes = [
+        {
+            scale: outScale
+        },
+        {
+            scale: inScale
+        }
+    ];
+    if (direction === 'exit') {
+        keyframes.reverse();
+    }
+    return {
+        keyframes,
+        duration,
+        easing,
+        delay
+    };
+};

node_modules/@fluentui/react-motion-components-preview/lib/atoms/scale-atom.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/atoms/scale-atom.ts"],"sourcesContent":["import { AtomMotion, motionTokens } from '@fluentui/react-motion';\nimport { BaseAtomParams } from '../types';\n\ninterface ScaleAtomParams extends BaseAtomParams {\n  /** Scale for the out state (exited). Defaults to 0.9. */\n  outScale?: number;\n  /** Scale for the in state (entered). Defaults to 1. */\n  inScale?: number;\n}\n\n/**\n * Generates a motion atom object for a scale in or scale out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param outScale - Scale for the out state (exited). Defaults to 0.9.\n * @param inScale - Scale for the in state (entered). Defaults to 1.\n * @param delay - Time (ms) to delay the animation. Defaults to 0.\n * @returns A motion atom object with scale keyframes and the supplied duration and easing.\n */\nexport const scaleAtom = ({\n  direction,\n  duration,\n  easing = motionTokens.curveLinear,\n  delay = 0,\n  outScale = 0.9,\n  inScale = 1,\n}: ScaleAtomParams): AtomMotion => {\n  const keyframes = [{ scale: outScale }, { scale: inScale }];\n  if (direction === 'exit') {\n    keyframes.reverse();\n  }\n  return {\n    keyframes,\n    duration,\n    easing,\n    delay,\n  };\n};\n"],"names":["motionTokens","scaleAtom","direction","duration","easing","curveLinear","delay","outScale","inScale","keyframes","scale","reverse"],"mappings":"AAAA,SAAqBA,YAAY,QAAQ,yBAAyB;AAUlE;;;;;;;;;CASC,GACD,OAAO,MAAMC,YAAY,CAAC,EACxBC,SAAS,EACTC,QAAQ,EACRC,SAASJ,aAAaK,WAAW,EACjCC,QAAQ,CAAC,EACTC,WAAW,GAAG,EACdC,UAAU,CAAC,EACK;IAChB,MAAMC,YAAY;QAAC;YAAEC,OAAOH;QAAS;QAAG;YAAEG,OAAOF;QAAQ;KAAE;IAC3D,IAAIN,cAAc,QAAQ;QACxBO,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAN;QACAC;QACAE;IACF;AACF,EAAE"}

node_modules/@fluentui/react-motion-components-preview/lib/atoms/slide-atom.js

@@ -0,0 +1,31 @@
+import { motionTokens } from '@fluentui/react-motion';
+/**
+ * Generates a motion atom object for a slide-in or slide-out.
+ * @param direction - The functional direction of the motion: 'enter' or 'exit'.
+ * @param duration - The duration of the motion in milliseconds.
+ * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
+ * @param outX - X translate for the out state (exited) with units (e.g., '50px', '100%'). Defaults to '0px'.
+ * @param outY - Y translate for the out state (exited) with units (e.g., '50px', '100%'). Defaults to '0px'.
+ * @param inX - X translate for the in state (entered) with units (e.g., '5px', '10%'). Defaults to '0px'.
+ * @param inY - Y translate for the in state (entered) with units (e.g., '5px', '10%'). Defaults to '0px'.
+ * @param delay - Time (ms) to delay the animation. Defaults to 0.
+ * @returns A motion atom object with translate keyframes and the supplied duration and easing.
+ */ export const slideAtom = ({ direction, duration, easing = motionTokens.curveLinear, delay = 0, outX = '0px', outY = '0px', inX = '0px', inY = '0px' })=>{
+    const keyframes = [
+        {
+            translate: `${outX} ${outY}`
+        },
+        {
+            translate: `${inX} ${inY}`
+        }
+    ];
+    if (direction === 'exit') {
+        keyframes.reverse();
+    }
+    return {
+        keyframes,
+        duration,
+        easing,
+        delay
+    };
+};

node_modules/@fluentui/react-motion-components-preview/lib/atoms/slide-atom.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/atoms/slide-atom.ts"],"sourcesContent":["import { AtomMotion, motionTokens } from '@fluentui/react-motion';\nimport { BaseAtomParams } from '../types';\n\ninterface SlideAtomParams extends BaseAtomParams {\n  /** X translate for the out state (exited). Defaults to '0px'. */\n  outX?: string;\n  /** Y translate for the out state (exited). Defaults to '0px'. */\n  outY?: string;\n  /** X translate for the in state (entered). Defaults to '0px'. */\n  inX?: string;\n  /** Y translate for the in state (entered). Defaults to '0px'. */\n  inY?: string;\n}\n\n/**\n * Generates a motion atom object for a slide-in or slide-out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param outX - X translate for the out state (exited) with units (e.g., '50px', '100%'). Defaults to '0px'.\n * @param outY - Y translate for the out state (exited) with units (e.g., '50px', '100%'). Defaults to '0px'.\n * @param inX - X translate for the in state (entered) with units (e.g., '5px', '10%'). Defaults to '0px'.\n * @param inY - Y translate for the in state (entered) with units (e.g., '5px', '10%'). Defaults to '0px'.\n * @param delay - Time (ms) to delay the animation. Defaults to 0.\n * @returns A motion atom object with translate keyframes and the supplied duration and easing.\n */\nexport const slideAtom = ({\n  direction,\n  duration,\n  easing = motionTokens.curveLinear,\n  delay = 0,\n  outX = '0px',\n  outY = '0px',\n  inX = '0px',\n  inY = '0px',\n}: SlideAtomParams): AtomMotion => {\n  const keyframes = [{ translate: `${outX} ${outY}` }, { translate: `${inX} ${inY}` }];\n  if (direction === 'exit') {\n    keyframes.reverse();\n  }\n  return {\n    keyframes,\n    duration,\n    easing,\n    delay,\n  };\n};\n"],"names":["motionTokens","slideAtom","direction","duration","easing","curveLinear","delay","outX","outY","inX","inY","keyframes","translate","reverse"],"mappings":"AAAA,SAAqBA,YAAY,QAAQ,yBAAyB;AAclE;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,YAAY,CAAC,EACxBC,SAAS,EACTC,QAAQ,EACRC,SAASJ,aAAaK,WAAW,EACjCC,QAAQ,CAAC,EACTC,OAAO,KAAK,EACZC,OAAO,KAAK,EACZC,MAAM,KAAK,EACXC,MAAM,KAAK,EACK;IAChB,MAAMC,YAAY;QAAC;YAAEC,WAAW,GAAGL,KAAK,CAAC,EAAEC,MAAM;QAAC;QAAG;YAAEI,WAAW,GAAGH,IAAI,CAAC,EAAEC,KAAK;QAAC;KAAE;IACpF,IAAIR,cAAc,QAAQ;QACxBS,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAR;QACAC;QACAE;IACF;AACF,EAAE"}

node_modules/@fluentui/react-motion-components-preview/lib/choreography/Stagger/Stagger.js

@@ -0,0 +1,189 @@
+'use client';
+import * as React from 'react';
+import { useStaggerItemsVisibility } from './useStaggerItemsVisibility';
+import { DEFAULT_ITEM_DURATION, DEFAULT_ITEM_DELAY, acceptsVisibleProp, acceptsDelayProps, getStaggerChildMapping } from './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 = getStaggerChildMapping(children);
+    const elements = Object.values(childMapping).map((item)=>item.element);
+    const hasVisiblePropSupport = elements.every((child)=>acceptsVisibleProp(child));
+    const hasDelayPropSupport = elements.every((child)=>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 = DEFAULT_ITEM_DELAY, itemDuration = DEFAULT_ITEM_DURATION, reversed = false, hideMode, delayMode = 'timing', onMotionFinish })=>{
+    const childMapping = React.useMemo(()=>getStaggerChildMapping(children), [
+        children
+    ]);
+    // Always call hooks at the top level, regardless of delayMode
+    const { itemsVisibility } = 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 = 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
+    });
+};
+/**
+ * Stagger is a component that manages the staggered entrance and exit of its children.
+ * Children are animated in sequence with configurable timing between each item.
+ * Stagger can be interactively toggled between entrance and exit animations using the `visible` prop.
+ *
+ * @param children - React elements to animate. Elements are cloned with animation props.
+ * @param visible - Controls animation direction. When `true`, the group is animating "enter" (items shown);
+ * when `false`, the group is animating "exit" (items hidden). Defaults to `false`.
+ * @param itemDelay - Milliseconds between each item's animation start.
+ * Defaults to the package's default delay (see `DEFAULT_ITEM_DELAY`).
+ * @param itemDuration - Milliseconds each item's animation lasts. Only used with `delayMode="timing"`.
+ * Defaults to the package's default item duration (see `DEFAULT_ITEM_DURATION`).
+ * @param reversed - Whether to reverse the stagger sequence (last item animates first). Defaults to `false`.
+ * @param hideMode - How children's visibility/mounting is managed. Auto-detects if not specified.
+ * @param delayMode - How staggering timing is implemented. Auto-detects if not specified.
+ * @param onMotionFinish - Callback invoked when the staggered animation sequence completes.
+ *
+ * **Auto-detection behavior:**
+ * - **hideMode**: Presence components use `'visibleProp'`, DOM elements use `'visibilityStyle'`
+ * - **delayMode**: Components with delay support use `'delayProp'` (most performant), others use `'timing'`
+ *
+ * **hideMode options:**
+ * - `'visibleProp'`: Children are presence components with `visible` prop (always rendered, visibility controlled via prop)
+ * - `'visibilityStyle'`: Children remain in DOM with inline style visibility: hidden/visible (preserves layout space)
+ * - `'unmount'`: Children are mounted/unmounted from DOM based on visibility
+ *
+ * **delayMode options:**
+ * - `'timing'`: Manages visibility over time using JavaScript timing
+ * - `'delayProp'`: Passes delay props to motion components to use native Web Animations API delays (most performant)
+ *
+ * **Static variants:**
+ * - `<Stagger.In>` - One-way stagger for entrance animations only (auto-detects optimal modes)
+ * - `<Stagger.Out>` - One-way stagger for exit animations only (auto-detects optimal modes)
+ *
+ * @example
+ * ```tsx
+ * import { Stagger, Fade, Scale, Rotate } from '@fluentui/react-motion-components-preview';
+ *
+ * // Auto-detects optimal modes for presence components (delayProp + visibleProp)
+ * <Stagger visible={isVisible} itemDelay={150}>
+ *   <Fade><div>Item 2</div></Fade>
+ *   <Scale><div>Item 1</div></Scale>
+ *   <Rotate><div>Item 3</div></Rotate>
+ * </Stagger>
+ *
+ * // Auto-detects optimal modes for motion components (delayProp + unmount)
+ * <Stagger.In itemDelay={100}>
+ *   <Scale.In><div>Item 1</div></Scale.In>
+ *   <Fade.In><div>Item 2</div></Fade.In>
+ * </Stagger.In>
+ *
+ * // Auto-detects timing mode for DOM elements (timing + visibilityStyle)
+ * <Stagger visible={isVisible} itemDelay={150} onMotionFinish={handleComplete}>
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ *   <div>Item 3</div>
+ * </Stagger>
+ *
+ * // Override auto-detection when needed
+ * <Stagger visible={isVisible} delayMode="timing" hideMode="unmount">
+ *   <CustomComponent>Item 1</CustomComponent>
+ * </Stagger>
+ * ```
+ */ export const Stagger = Object.assign(StaggerMain, {
+    In: StaggerIn,
+    Out: StaggerOut
+});

node_modules/@fluentui/react-motion-components-preview/lib/choreography/Stagger/index.js

@@ -0,0 +1 @@
+export { Stagger } from './Stagger';

node_modules/@fluentui/react-motion-components-preview/lib/choreography/Stagger/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/choreography/Stagger/index.ts"],"sourcesContent":["export { Stagger } from './Stagger';\nexport type { StaggerProps } from './stagger-types';\n"],"names":["Stagger"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY"}

node_modules/@fluentui/react-motion-components-preview/lib/choreography/Stagger/stagger-types.js

@@ -0,0 +1 @@
+import * as React from 'react';

node_modules/@fluentui/react-motion-components-preview/lib/choreography/Stagger/stagger-types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/choreography/Stagger/stagger-types.ts"],"sourcesContent":["import { PresenceComponentProps, PresenceDirection } from '@fluentui/react-motion';\nimport * as React from 'react';\n\n/**\n * Defines how Stagger manages its children's visibility/mounting.\n * - 'visibleProp': Children are components with a `visible` prop (e.g. motion components)\n * - 'visibilityStyle': Children remain in DOM with inline style `visibility: hidden | visible`\n * - 'unmount': Children are mounted/unmounted from DOM based on visibility\n */\nexport type StaggerHideMode = 'visibleProp' | 'visibilityStyle' | 'unmount';\n\n/**\n * Defines how Stagger implements the timing of staggered animations.\n * - 'timing': Manages visibility over time using JavaScript timing (current behavior)\n * - 'delayProp': Passes delay props to motion components to use native Web Animations API delays\n */\nexport type StaggerDelayMode = 'timing' | 'delayProp';\n\n/**\n * Props for the Stagger component that manages staggered entrance and exit animations.\n */\nexport interface StaggerProps {\n  /** React elements to animate. Elements are cloned with animation props. */\n  children: React.ReactNode;\n\n  /**\n   * Controls children animation direction. When `true`, the group is animating \"enter\" (items shown).\n   * When `false`, the group is animating \"exit\" (items hidden).\n   */\n  visible?: PresenceComponentProps['visible'];\n\n  /** Whether to reverse the stagger sequence (last item animates first). Defaults to `false`. */\n  reversed?: boolean;\n\n  /**\n   * Milliseconds between each child's animation start.\n   * Defaults to the package's default delay (see `DEFAULT_ITEM_DELAY`).\n   */\n  itemDelay?: number;\n\n  /**\n   * Milliseconds each child's animation lasts. Only used with `delayMode=\"timing\"`.\n   * Defaults to the package's default duration (see `DEFAULT_ITEM_DURATION`).\n   */\n  itemDuration?: number;\n\n  /** How children's visibility/mounting is managed. Auto-detects if not specified. */\n  hideMode?: StaggerHideMode;\n\n  /** How staggering timing is implemented. Defaults to 'timing'. */\n  delayMode?: StaggerDelayMode;\n\n  /** Callback invoked when the staggered animation sequence completes. */\n  onMotionFinish?: () => void;\n}\n\nexport interface StaggerOneWayProps extends Omit<StaggerProps, 'visible' | 'hideMode' | 'delayMode'> {\n  /** Animation direction: 'enter' or 'exit'. */\n  direction: PresenceDirection;\n\n  /** How children's visibility/mounting is managed. Required - provided by wrapper components. */\n  hideMode: StaggerHideMode;\n\n  /** How staggering timing is implemented. Required - provided by wrapper components. */\n  delayMode: StaggerDelayMode;\n}\n"],"names":["React"],"mappings":"AACA,YAAYA,WAAW,QAAQ"}

node_modules/@fluentui/react-motion-components-preview/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
+    };
+}

node_modules/@fluentui/react-motion-components-preview/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;

node_modules/@fluentui/react-motion-components-preview/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"}

node_modules/@fluentui/react-motion-components-preview/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;
+}

node_modules/@fluentui/react-motion-components-preview/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"}

node_modules/@fluentui/react-motion-components-preview/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';

node_modules/@fluentui/react-motion-components-preview/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"}

node_modules/@fluentui/react-motion-components-preview/lib/choreography/Stagger/utils/motionComponentDetection.js

@@ -0,0 +1,93 @@
+import * as React from 'react';
+/**
+ * Checks if a React element has all of the specified props explicitly provided.
+ *
+ * - Exported for testing purposes
+ *
+ * @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
+ */ /**
+ * 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.
+ *
+ * - Exported for testing purposes
+ *
+ * @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
+ */ 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.
+ *
+ * - Exported for testing purposes
+ *
+ * @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
+ */ 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.
+ *
+ * - Exported for testing purposes
+ *
+ * @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
+ */ 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.
+ *
+ * - Exported for testing purposes
+ *
+ * @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
+ */ export function acceptsVisibleProp(element) {
+    return isPresenceComponent(element);
+}

node_modules/@fluentui/react-motion-components-preview/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
+    };
+}

node_modules/@fluentui/react-motion-components-preview/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"}

node_modules/@fluentui/react-motion-components-preview/lib/components/Blur/Blur.js

@@ -0,0 +1,57 @@
+import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';
+import { fadeAtom } from '../../atoms/fade-atom';
+import { blurAtom } from '../../atoms/blur-atom';
+/**
+ * Define a presence motion for blur in/out
+ *
+ * @param duration - Time (ms) for the enter transition (blur-in). Defaults to the `durationSlow` value (300 ms).
+ * @param easing - Easing curve for the enter transition (blur-in). Defaults to the `curveDecelerateMin` value.
+ * @param delay - Time (ms) to delay the enter transition. Defaults to 0.
+ * @param exitDuration - Time (ms) for the exit transition (blur-out). Defaults to the `duration` param for symmetry.
+ * @param exitEasing - Easing curve for the exit transition (blur-out). Defaults to the `curveAccelerateMin` value.
+ * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.
+ * @param outRadius - Blur radius for the out state (exited). Defaults to `'10px'`.
+ * @param inRadius - Blur radius for the in state (entered). Defaults to `'0px'`.
+ * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.
+ */ const blurPresenceFn = ({ duration = motionTokens.durationSlow, easing = motionTokens.curveDecelerateMin, delay = 0, exitDuration = duration, exitEasing = motionTokens.curveAccelerateMin, exitDelay = delay, outRadius = '10px', inRadius = '0px', animateOpacity = true })=>{
+    const enterAtoms = [
+        blurAtom({
+            direction: 'enter',
+            duration,
+            easing,
+            delay,
+            outRadius,
+            inRadius
+        })
+    ];
+    const exitAtoms = [
+        blurAtom({
+            direction: 'exit',
+            duration: exitDuration,
+            easing: exitEasing,
+            delay: exitDelay,
+            outRadius,
+            inRadius
+        })
+    ];
+    // Only add fade atoms if animateOpacity is true.
+    if (animateOpacity) {
+        enterAtoms.push(fadeAtom({
+            direction: 'enter',
+            duration,
+            easing,
+            delay
+        }));
+        exitAtoms.push(fadeAtom({
+            direction: 'exit',
+            duration: exitDuration,
+            easing: exitEasing,
+            delay: exitDelay
+        }));
+    }
+    return {
+        enter: enterAtoms,
+        exit: exitAtoms
+    };
+};
+/** A React component that applies blur in/out transitions to its children. */ export const Blur = createPresenceComponent(blurPresenceFn);

node_modules/@fluentui/react-motion-components-preview/lib/components/Blur/Blur.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Blur/Blur.ts"],"sourcesContent":["import { motionTokens, createPresenceComponent, PresenceMotionFn } from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { blurAtom } from '../../atoms/blur-atom';\nimport { BlurParams } from './blur-types';\n\n/**\n * Define a presence motion for blur in/out\n *\n * @param duration - Time (ms) for the enter transition (blur-in). Defaults to the `durationSlow` value (300 ms).\n * @param easing - Easing curve for the enter transition (blur-in). Defaults to the `curveDecelerateMin` value.\n * @param delay - Time (ms) to delay the enter transition. Defaults to 0.\n * @param exitDuration - Time (ms) for the exit transition (blur-out). Defaults to the `duration` param for symmetry.\n * @param exitEasing - Easing curve for the exit transition (blur-out). Defaults to the `curveAccelerateMin` value.\n * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param outRadius - Blur radius for the out state (exited). Defaults to `'10px'`.\n * @param inRadius - Blur radius for the in state (entered). Defaults to `'0px'`.\n * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.\n */\nconst blurPresenceFn: PresenceMotionFn<BlurParams> = ({\n  duration = motionTokens.durationSlow,\n  easing = motionTokens.curveDecelerateMin,\n  delay = 0,\n  exitDuration = duration,\n  exitEasing = motionTokens.curveAccelerateMin,\n  exitDelay = delay,\n  outRadius = '10px',\n  inRadius = '0px',\n  animateOpacity = true,\n}) => {\n  const enterAtoms = [blurAtom({ direction: 'enter', duration, easing, delay, outRadius, inRadius })];\n  const exitAtoms = [\n    blurAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      delay: exitDelay,\n      outRadius,\n      inRadius,\n    }),\n  ];\n\n  // Only add fade atoms if animateOpacity is true.\n  if (animateOpacity) {\n    enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing, delay }));\n    exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing, delay: exitDelay }));\n  }\n\n  return {\n    enter: enterAtoms,\n    exit: exitAtoms,\n  };\n};\n\n/** A React component that applies blur in/out transitions to its children. */\nexport const Blur = createPresenceComponent(blurPresenceFn);\n"],"names":["motionTokens","createPresenceComponent","fadeAtom","blurAtom","blurPresenceFn","duration","durationSlow","easing","curveDecelerateMin","delay","exitDuration","exitEasing","curveAccelerateMin","exitDelay","outRadius","inRadius","animateOpacity","enterAtoms","direction","exitAtoms","push","enter","exit","Blur"],"mappings":"AAAA,SAASA,YAAY,EAAEC,uBAAuB,QAA0B,yBAAyB;AACjG,SAASC,QAAQ,QAAQ,wBAAwB;AACjD,SAASC,QAAQ,QAAQ,wBAAwB;AAGjD;;;;;;;;;;;;CAYC,GACD,MAAMC,iBAA+C,CAAC,EACpDC,WAAWL,aAAaM,YAAY,EACpCC,SAASP,aAAaQ,kBAAkB,EACxCC,QAAQ,CAAC,EACTC,eAAeL,QAAQ,EACvBM,aAAaX,aAAaY,kBAAkB,EAC5CC,YAAYJ,KAAK,EACjBK,YAAY,MAAM,EAClBC,WAAW,KAAK,EAChBC,iBAAiB,IAAI,EACtB;IACC,MAAMC,aAAa;QAACd,SAAS;YAAEe,WAAW;YAASb;YAAUE;YAAQE;YAAOK;YAAWC;QAAS;KAAG;IACnG,MAAMI,YAAY;QAChBhB,SAAS;YACPe,WAAW;YACXb,UAAUK;YACVH,QAAQI;YACRF,OAAOI;YACPC;YACAC;QACF;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWG,IAAI,CAAClB,SAAS;YAAEgB,WAAW;YAASb;YAAUE;YAAQE;QAAM;QACvEU,UAAUC,IAAI,CAAClB,SAAS;YAAEgB,WAAW;YAAQb,UAAUK;YAAcH,QAAQI;YAAYF,OAAOI;QAAU;IAC5G;IAEA,OAAO;QACLQ,OAAOJ;QACPK,MAAMH;IACR;AACF;AAEA,4EAA4E,GAC5E,OAAO,MAAMI,OAAOtB,wBAAwBG,gBAAgB"}

node_modules/@fluentui/react-motion-components-preview/lib/components/Blur/blur-types.js

@@ -0,0 +1 @@
+export { };

node_modules/@fluentui/react-motion-components-preview/lib/components/Blur/blur-types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Blur/blur-types.ts"],"sourcesContent":["import type { BasePresenceParams, AnimateOpacity } from '../../types';\n\nexport type BlurParams = BasePresenceParams &\n  AnimateOpacity & {\n    /** Blur radius for the out state (exited). Defaults to '10px'. */\n    outRadius?: string;\n\n    /** Blur radius for the in state (entered). Defaults to '0px'. */\n    inRadius?: string;\n  };\n"],"names":[],"mappings":"AAEA,WAOI"}

node_modules/@fluentui/react-motion-components-preview/lib/components/Blur/index.js

@@ -0,0 +1 @@
+export { Blur } from './Blur';

node_modules/@fluentui/react-motion-components-preview/lib/components/Blur/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Blur/index.ts"],"sourcesContent":["export { Blur } from './Blur';\nexport type { BlurParams } from './blur-types';\n"],"names":["Blur"],"mappings":"AAAA,SAASA,IAAI,QAAQ,SAAS"}

node_modules/@fluentui/react-motion-components-preview/lib/components/Collapse/Collapse.js

@@ -0,0 +1,109 @@
+import { motionTokens, createPresenceComponent, createPresenceComponentVariant } from '@fluentui/react-motion';
+import { sizeEnterAtom, sizeExitAtom, whitespaceAtom } from './collapse-atoms';
+import { fadeAtom } from '../../atoms/fade-atom';
+/**
+ * Define a presence motion for collapse/expand
+ *
+ * @param element - The element to apply the collapse motion to
+ * @param duration - Time (ms) for the enter transition (expand). Defaults to the `durationNormal` value (200 ms)
+ * @param easing - Easing curve for the enter transition. Defaults to the `curveEasyEaseMax` value
+ * @param delay - Time (ms) to delay the entire enter transition. Defaults to 0
+ * @param exitDuration - Time (ms) for the exit transition (collapse). Defaults to the `duration` param for symmetry
+ * @param exitEasing - Easing curve for the exit transition. Defaults to the `easing` param for symmetry
+ * @param exitDelay - Time (ms) to delay the entire exit transition. Defaults to the `delay` param for symmetry
+ * @param staggerDelay - Time (ms) offset between the size and opacity animations. Defaults to 0
+ * @param exitStaggerDelay - Time (ms) offset between the size and opacity animations on exit. Defaults to the `staggerDelay` param for symmetry
+ * @param sizeDuration - Time (ms) for the size animation during enter. Defaults to `duration` for unified timing
+ * @param opacityDuration - Time (ms) for the opacity animation during enter. Defaults to `sizeDuration` for synchronized timing
+ * @param exitSizeDuration - Time (ms) for the size animation during exit. Defaults to `exitDuration` for unified timing
+ * @param exitOpacityDuration - Time (ms) for the opacity animation during exit. Defaults to `exitSizeDuration` for synchronized timing
+ * @param animateOpacity - Whether to animate the opacity. Defaults to `true`
+ * @param orientation - The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height
+ * @param outSize - Size for the out state (collapsed). Defaults to `'0px'`
+ */ const collapsePresenceFn = ({ element, // Primary duration controls (simple API)
+duration = motionTokens.durationNormal, exitDuration = duration, // Granular duration controls with smart defaults (advanced API)
+sizeDuration = duration, opacityDuration = sizeDuration, exitSizeDuration = exitDuration, exitOpacityDuration = exitSizeDuration, // Other timing controls
+easing = motionTokens.curveEasyEaseMax, delay = 0, exitEasing = easing, exitDelay = delay, staggerDelay = 0, exitStaggerDelay = staggerDelay, // Animation controls
+animateOpacity = true, orientation = 'vertical', outSize = '0px' })=>{
+    // ----- ENTER -----
+    // The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.
+    // For enter: size expands first, then opacity fades in after staggerDelay
+    const enterAtoms = [
+        // Apply global delay to size atom - size expansion starts first
+        sizeEnterAtom({
+            orientation,
+            duration: sizeDuration,
+            easing,
+            element,
+            outSize,
+            delay
+        }),
+        whitespaceAtom({
+            direction: 'enter',
+            orientation,
+            duration: sizeDuration,
+            easing,
+            delay
+        })
+    ];
+    // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.
+    if (animateOpacity) {
+        enterAtoms.push(fadeAtom({
+            direction: 'enter',
+            duration: opacityDuration,
+            easing,
+            delay: delay + staggerDelay
+        }));
+    }
+    // ----- EXIT -----
+    // The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.
+    // For exit: opacity fades out first, then size collapses after exitStaggerDelay
+    const exitAtoms = [];
+    // Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected.
+    if (animateOpacity) {
+        exitAtoms.push(fadeAtom({
+            direction: 'exit',
+            duration: exitOpacityDuration,
+            easing: exitEasing,
+            delay: exitDelay
+        }));
+    }
+    exitAtoms.push(sizeExitAtom({
+        orientation,
+        duration: exitSizeDuration,
+        easing: exitEasing,
+        element,
+        delay: exitDelay + exitStaggerDelay,
+        outSize
+    }), whitespaceAtom({
+        direction: 'exit',
+        orientation,
+        duration: exitSizeDuration,
+        easing: exitEasing,
+        delay: exitDelay + exitStaggerDelay
+    }));
+    return {
+        enter: enterAtoms,
+        exit: exitAtoms
+    };
+};
+/** A React component that applies collapse/expand transitions to its children. */ export const Collapse = createPresenceComponent(collapsePresenceFn);
+export const CollapseSnappy = createPresenceComponentVariant(Collapse, {
+    duration: motionTokens.durationFast
+});
+export const CollapseRelaxed = createPresenceComponentVariant(Collapse, {
+    duration: motionTokens.durationSlower
+});
+/** A React component that applies collapse/expand transitions with delayed fade to its children. */ export const CollapseDelayed = createPresenceComponentVariant(Collapse, {
+    // Enter timing per motion design spec
+    sizeDuration: motionTokens.durationNormal,
+    opacityDuration: motionTokens.durationSlower,
+    staggerDelay: motionTokens.durationNormal,
+    // Exit timing per motion design spec
+    exitSizeDuration: motionTokens.durationNormal,
+    exitOpacityDuration: motionTokens.durationSlower,
+    exitStaggerDelay: motionTokens.durationSlower,
+    // Easing per motion design spec
+    easing: motionTokens.curveEasyEase,
+    exitEasing: motionTokens.curveEasyEase
+});

node_modules/@fluentui/react-motion-components-preview/lib/components/Collapse/collapse-atoms.js

@@ -0,0 +1,100 @@
+// ----- SIZE -----
+const sizeValuesForOrientation = (orientation, element)=>{
+    const sizeName = orientation === 'horizontal' ? 'maxWidth' : 'maxHeight';
+    const overflowName = orientation === 'horizontal' ? 'overflowX' : 'overflowY';
+    const measuredSize = orientation === 'horizontal' ? element.scrollWidth : element.scrollHeight;
+    const toSize = `${measuredSize}px`;
+    return {
+        sizeName,
+        overflowName,
+        toSize
+    };
+};
+export const sizeEnterAtom = ({ orientation, duration, easing, element, outSize = '0', delay = 0 })=>{
+    const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);
+    return {
+        keyframes: [
+            {
+                [sizeName]: outSize,
+                [overflowName]: 'hidden'
+            },
+            {
+                [sizeName]: toSize,
+                offset: 0.9999,
+                [overflowName]: 'hidden'
+            },
+            {
+                [sizeName]: 'unset',
+                [overflowName]: 'unset'
+            }
+        ],
+        duration,
+        easing,
+        delay,
+        fill: 'both'
+    };
+};
+export const sizeExitAtom = ({ orientation, duration, easing, element, delay = 0, outSize = '0' })=>{
+    const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);
+    return {
+        keyframes: [
+            {
+                [sizeName]: toSize,
+                [overflowName]: 'hidden'
+            },
+            {
+                [sizeName]: outSize,
+                [overflowName]: 'hidden'
+            }
+        ],
+        duration,
+        easing,
+        delay,
+        fill: 'both'
+    };
+};
+// ----- WHITESPACE -----
+// Whitespace animation includes padding and margin.
+const whitespaceValuesForOrientation = (orientation)=>{
+    // horizontal whitespace collapse
+    if (orientation === 'horizontal') {
+        return {
+            paddingStart: 'paddingInlineStart',
+            paddingEnd: 'paddingInlineEnd',
+            marginStart: 'marginInlineStart',
+            marginEnd: 'marginInlineEnd'
+        };
+    }
+    // vertical whitespace collapse
+    return {
+        paddingStart: 'paddingBlockStart',
+        paddingEnd: 'paddingBlockEnd',
+        marginStart: 'marginBlockStart',
+        marginEnd: 'marginBlockEnd'
+    };
+};
+/**
+ * A collapse animates an element's height to zero,
+ but the zero height does not eliminate padding or margin in the box model.
+ So here we generate keyframes to animate those whitespace properties to zero.
+ */ export const whitespaceAtom = ({ direction, orientation, duration, easing, delay = 0 })=>{
+    const { paddingStart, paddingEnd, marginStart, marginEnd } = whitespaceValuesForOrientation(orientation);
+    // The keyframe with zero whitespace is at the start for enter and at the end for exit.
+    const offset = direction === 'enter' ? 0 : 1;
+    const keyframes = [
+        {
+            [paddingStart]: '0',
+            [paddingEnd]: '0',
+            [marginStart]: '0',
+            [marginEnd]: '0',
+            offset
+        }
+    ];
+    return {
+        keyframes,
+        duration,
+        easing,
+        delay,
+        fill: 'both'
+    };
+};

node_modules/@fluentui/react-motion-components-preview/lib/components/Collapse/collapse-test-utils.js

@@ -0,0 +1,137 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */ /**
+ * Helper to validate the structure of a collapse motion object.
+ * Returns validation data that can be used with Jest expectations.
+ */ export function getCollapseMotionValidation(motion) {
+    return {
+        enterCount: motion.enter.length,
+        exitCount: motion.exit.length,
+        hasEnterOpacity: motion.enter.length === 3 && 'opacity' in (motion.enter[2].keyframes[0] || {}),
+        hasExitOpacity: motion.exit.length === 3 && 'opacity' in (motion.exit[0].keyframes[0] || {}),
+        enterStructure: motion.enter.map((atom)=>({
+                hasKeyframes: Array.isArray(atom.keyframes),
+                hasDuration: typeof atom.duration === 'number',
+                hasEasing: typeof atom.easing === 'string',
+                hasDelay: typeof atom.delay === 'number'
+            })),
+        exitStructure: motion.exit.map((atom)=>({
+                hasKeyframes: Array.isArray(atom.keyframes),
+                hasDuration: typeof atom.duration === 'number',
+                hasEasing: typeof atom.easing === 'string',
+                hasDelay: typeof atom.delay === 'number'
+            }))
+    };
+}
+/**
+ * Helper to extract timing information from collapse motion atoms.
+ */ export function getCollapseTimingInfo(motion, animateOpacity = true) {
+    var _motion_enter_, _motion_enter_1, _motion_enter_2, _motion_exit_, _motion_exit_1, _motion_exit_2, _motion_exit_3, _motion_exit_4;
+    var _motion_enter__delay, _motion_enter__delay1, _motion_enter__delay2;
+    const enterDelays = {
+        size: (_motion_enter__delay = (_motion_enter_ = motion.enter[0]) === null || _motion_enter_ === void 0 ? void 0 : _motion_enter_.delay) !== null && _motion_enter__delay !== void 0 ? _motion_enter__delay : 0,
+        whitespace: (_motion_enter__delay1 = (_motion_enter_1 = motion.enter[1]) === null || _motion_enter_1 === void 0 ? void 0 : _motion_enter_1.delay) !== null && _motion_enter__delay1 !== void 0 ? _motion_enter__delay1 : 0,
+        opacity: animateOpacity ? (_motion_enter__delay2 = (_motion_enter_2 = motion.enter[2]) === null || _motion_enter_2 === void 0 ? void 0 : _motion_enter_2.delay) !== null && _motion_enter__delay2 !== void 0 ? _motion_enter__delay2 : 0 : undefined
+    };
+    var _motion_exit__delay, _motion_exit__delay1, _motion_exit__delay2, _motion_exit__delay3, _motion_exit__delay4;
+    const exitDelays = animateOpacity ? {
+        opacity: (_motion_exit__delay = (_motion_exit_ = motion.exit[0]) === null || _motion_exit_ === void 0 ? void 0 : _motion_exit_.delay) !== null && _motion_exit__delay !== void 0 ? _motion_exit__delay : 0,
+        size: (_motion_exit__delay1 = (_motion_exit_1 = motion.exit[1]) === null || _motion_exit_1 === void 0 ? void 0 : _motion_exit_1.delay) !== null && _motion_exit__delay1 !== void 0 ? _motion_exit__delay1 : 0,
+        whitespace: (_motion_exit__delay2 = (_motion_exit_2 = motion.exit[2]) === null || _motion_exit_2 === void 0 ? void 0 : _motion_exit_2.delay) !== null && _motion_exit__delay2 !== void 0 ? _motion_exit__delay2 : 0
+    } : {
+        size: (_motion_exit__delay3 = (_motion_exit_3 = motion.exit[0]) === null || _motion_exit_3 === void 0 ? void 0 : _motion_exit_3.delay) !== null && _motion_exit__delay3 !== void 0 ? _motion_exit__delay3 : 0,
+        whitespace: (_motion_exit__delay4 = (_motion_exit_4 = motion.exit[1]) === null || _motion_exit_4 === void 0 ? void 0 : _motion_exit_4.delay) !== null && _motion_exit__delay4 !== void 0 ? _motion_exit__delay4 : 0
+    };
+    return {
+        enter: enterDelays,
+        exit: exitDelays
+    };
+}
+/**
+ * Helper to extract duration information from collapse motion atoms.
+ */ export function getCollapseDurationInfo(motion, animateOpacity = true) {
+    var _motion_enter_, _motion_enter_1, _motion_enter_2, _motion_exit_, _motion_exit_1, _motion_exit_2, _motion_exit_3, _motion_exit_4;
+    var _motion_enter__duration, _motion_enter__duration1, _motion_enter__duration2;
+    const enterDurations = {
+        size: (_motion_enter__duration = (_motion_enter_ = motion.enter[0]) === null || _motion_enter_ === void 0 ? void 0 : _motion_enter_.duration) !== null && _motion_enter__duration !== void 0 ? _motion_enter__duration : 0,
+        whitespace: (_motion_enter__duration1 = (_motion_enter_1 = motion.enter[1]) === null || _motion_enter_1 === void 0 ? void 0 : _motion_enter_1.duration) !== null && _motion_enter__duration1 !== void 0 ? _motion_enter__duration1 : 0,
+        opacity: animateOpacity ? (_motion_enter__duration2 = (_motion_enter_2 = motion.enter[2]) === null || _motion_enter_2 === void 0 ? void 0 : _motion_enter_2.duration) !== null && _motion_enter__duration2 !== void 0 ? _motion_enter__duration2 : 0 : undefined
+    };
+    var _motion_exit__duration, _motion_exit__duration1, _motion_exit__duration2, _motion_exit__duration3, _motion_exit__duration4;
+    const exitDurations = animateOpacity ? {
+        opacity: (_motion_exit__duration = (_motion_exit_ = motion.exit[0]) === null || _motion_exit_ === void 0 ? void 0 : _motion_exit_.duration) !== null && _motion_exit__duration !== void 0 ? _motion_exit__duration : 0,
+        size: (_motion_exit__duration1 = (_motion_exit_1 = motion.exit[1]) === null || _motion_exit_1 === void 0 ? void 0 : _motion_exit_1.duration) !== null && _motion_exit__duration1 !== void 0 ? _motion_exit__duration1 : 0,
+        whitespace: (_motion_exit__duration2 = (_motion_exit_2 = motion.exit[2]) === null || _motion_exit_2 === void 0 ? void 0 : _motion_exit_2.duration) !== null && _motion_exit__duration2 !== void 0 ? _motion_exit__duration2 : 0
+    } : {
+        size: (_motion_exit__duration3 = (_motion_exit_3 = motion.exit[0]) === null || _motion_exit_3 === void 0 ? void 0 : _motion_exit_3.duration) !== null && _motion_exit__duration3 !== void 0 ? _motion_exit__duration3 : 0,
+        whitespace: (_motion_exit__duration4 = (_motion_exit_4 = motion.exit[1]) === null || _motion_exit_4 === void 0 ? void 0 : _motion_exit_4.duration) !== null && _motion_exit__duration4 !== void 0 ? _motion_exit__duration4 : 0
+    };
+    return {
+        enter: enterDurations,
+        exit: exitDurations
+    };
+}
+/**
+ * Helper to analyze orientation-specific properties in collapse atoms.
+ */ export function getCollapseOrientationInfo(motion, animateOpacity = true) {
+    const enterSizeAtom = motion.enter[0];
+    const enterWhitespaceAtom = motion.enter[1];
+    const exitOffset = animateOpacity ? 1 : 0;
+    const exitSizeAtom = motion.exit[exitOffset];
+    const exitWhitespaceAtom = motion.exit[exitOffset + 1];
+    return {
+        enter: {
+            sizeProperties: Object.keys((enterSizeAtom === null || enterSizeAtom === void 0 ? void 0 : enterSizeAtom.keyframes[0]) || {}),
+            whitespaceProperties: Object.keys((enterWhitespaceAtom === null || enterWhitespaceAtom === void 0 ? void 0 : enterWhitespaceAtom.keyframes[0]) || {})
+        },
+        exit: {
+            sizeProperties: Object.keys((exitSizeAtom === null || exitSizeAtom === void 0 ? void 0 : exitSizeAtom.keyframes[0]) || {}),
+            whitespaceProperties: Object.keys((exitWhitespaceAtom === null || exitWhitespaceAtom === void 0 ? void 0 : exitWhitespaceAtom.keyframes[0]) || {})
+        }
+    };
+}
+/**
+ * Helper to analyze size atom keyframes for validation.
+ */ export function getSizeAtomInfo(sizeAtom, direction) {
+    const keyframes = sizeAtom.keyframes;
+    const properties = Object.keys(keyframes[0] || {});
+    return {
+        keyframeCount: keyframes.length,
+        properties,
+        hasOffset: direction === 'enter' ? 'offset' in (keyframes[1] || {}) : false,
+        hasFill: 'fill' in sizeAtom,
+        fillValue: sizeAtom.fill,
+        firstFrameValues: keyframes[0] || {},
+        lastFrameValues: keyframes[keyframes.length - 1] || {}
+    };
+}
+/**
+ * Helper to analyze whitespace atom keyframes for validation.
+ */ export function getWhitespaceAtomInfo(whitespaceAtom, direction) {
+    const keyframe = whitespaceAtom.keyframes[0] || {};
+    return {
+        properties: Object.keys(keyframe),
+        offset: keyframe.offset,
+        expectedOffset: direction === 'enter' ? 0 : 1,
+        hasFill: 'fill' in whitespaceAtom,
+        fillValue: whitespaceAtom.fill,
+        isVertical: 'paddingBlockStart' in keyframe,
+        isHorizontal: 'paddingInlineStart' in keyframe
+    };
+}
+/**
+ * Helper to compare opacity handling between two motion objects.
+ */ export function getOpacityComparisonInfo(withOpacity, withoutOpacity) {
+    return {
+        withOpacity: {
+            enterCount: withOpacity.enter.length,
+            exitCount: withOpacity.exit.length,
+            hasEnterOpacity: withOpacity.enter.length === 3,
+            hasExitOpacity: withOpacity.exit.length === 3
+        },
+        withoutOpacity: {
+            enterCount: withoutOpacity.enter.length,
+            exitCount: withoutOpacity.exit.length,
+            hasEnterOpacity: false,
+            hasExitOpacity: false
+        }
+    };
+}

node_modules/@fluentui/react-motion-components-preview/lib/components/Collapse/collapse-types.js

@@ -0,0 +1 @@
+export { };

node_modules/@fluentui/react-motion-components-preview/lib/components/Collapse/collapse-types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Collapse/collapse-types.ts"],"sourcesContent":["import type { BasePresenceParams, AnimateOpacity } from '../../types';\n\nexport type CollapseOrientation = 'horizontal' | 'vertical';\n\n/**\n * Duration properties for granular timing control in Collapse animations.\n */\nexport type CollapseDurations = {\n  /** Time (ms) for the size animation during enter. Defaults to `duration` for unified timing. */\n  sizeDuration?: number;\n\n  /** Time (ms) for the opacity animation during enter. Defaults to `sizeDuration` for synchronized timing. */\n  opacityDuration?: number;\n\n  /** Time (ms) for the size animation during exit. Defaults to `exitDuration` for unified timing. */\n  exitSizeDuration?: number;\n\n  /** Time (ms) for the opacity animation during exit. Defaults to `exitSizeDuration` for synchronized timing. */\n  exitOpacityDuration?: number;\n};\n\nexport type CollapseParams = BasePresenceParams &\n  AnimateOpacity &\n  CollapseDurations & {\n    /** The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height. */\n    orientation?: CollapseOrientation;\n\n    /** Size for the out state (collapsed). Defaults to `'0px'`. */\n    outSize?: string;\n\n    /**\n     * Time (ms) to delay the inner stagger between size and opacity animations.\n     * On enter this delays the opacity after size; on exit this delays the size after opacity.\n     * Defaults to 0.\n     */\n    staggerDelay?: number;\n\n    /**\n     * Time (ms) to delay the inner stagger during exit. Defaults to the `staggerDelay` param for symmetry.\n     */\n    exitStaggerDelay?: number;\n  };\n"],"names":[],"mappings":"AAqBA,WAoBI"}

node_modules/@fluentui/react-motion-components-preview/lib/components/Collapse/index.js

@@ -0,0 +1 @@
+export { Collapse, CollapseDelayed, CollapseRelaxed, CollapseSnappy } from './Collapse';

node_modules/@fluentui/react-motion-components-preview/lib/components/Collapse/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Collapse/index.ts"],"sourcesContent":["export { Collapse, CollapseDelayed, CollapseRelaxed, CollapseSnappy } from './Collapse';\nexport type { CollapseParams, CollapseDurations } from './collapse-types';\n"],"names":["Collapse","CollapseDelayed","CollapseRelaxed","CollapseSnappy"],"mappings":"AAAA,SAASA,QAAQ,EAAEC,eAAe,EAAEC,eAAe,EAAEC,cAAc,QAAQ,aAAa"}

node_modules/@fluentui/react-motion-components-preview/lib/components/Fade/Fade.js

@@ -0,0 +1,40 @@
+import { motionTokens, createPresenceComponent, createPresenceComponentVariant } from '@fluentui/react-motion';
+import { fadeAtom } from '../../atoms/fade-atom';
+/**
+ * Define a presence motion for fade in/out
+ *
+ * @param duration - Time (ms) for the enter transition (fade-in). Defaults to the `durationNormal` value (200 ms).
+ * @param easing - Easing curve for the enter transition (fade-in). Defaults to the `curveEasyEase` value.
+ * @param delay - Time (ms) to delay the enter transition. Defaults to 0.
+ * @param exitDuration - Time (ms) for the exit transition (fade-out). Defaults to the `duration` param for symmetry.
+ * @param exitEasing - Easing curve for the exit transition (fade-out). Defaults to the `easing` param for symmetry.
+ * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.
+ * @param outOpacity - Opacity for the out state (exited). Defaults to 0.
+ * @param inOpacity - Opacity for the in state (entered). Defaults to 1.
+ */ export const fadePresenceFn = ({ duration = motionTokens.durationNormal, easing = motionTokens.curveEasyEase, delay = 0, exitDuration = duration, exitEasing = easing, exitDelay = delay, outOpacity = 0, inOpacity = 1 })=>{
+    return {
+        enter: fadeAtom({
+            direction: 'enter',
+            duration,
+            easing,
+            delay,
+            outOpacity,
+            inOpacity
+        }),
+        exit: fadeAtom({
+            direction: 'exit',
+            duration: exitDuration,
+            easing: exitEasing,
+            delay: exitDelay,
+            outOpacity,
+            inOpacity
+        })
+    };
+};
+/** A React component that applies fade in/out transitions to its children. */ export const Fade = createPresenceComponent(fadePresenceFn);
+export const FadeSnappy = createPresenceComponentVariant(Fade, {
+    duration: motionTokens.durationFast
+});
+export const FadeRelaxed = createPresenceComponentVariant(Fade, {
+    duration: motionTokens.durationGentle
+});

node_modules/@fluentui/react-motion-components-preview/lib/components/Fade/Fade.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Fade/Fade.ts"],"sourcesContent":["import {\n  motionTokens,\n  createPresenceComponent,\n  PresenceMotionFn,\n  createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { FadeParams } from './fade-types';\n\n/**\n * Define a presence motion for fade in/out\n *\n * @param duration - Time (ms) for the enter transition (fade-in). Defaults to the `durationNormal` value (200 ms).\n * @param easing - Easing curve for the enter transition (fade-in). Defaults to the `curveEasyEase` value.\n * @param delay - Time (ms) to delay the enter transition. Defaults to 0.\n * @param exitDuration - Time (ms) for the exit transition (fade-out). Defaults to the `duration` param for symmetry.\n * @param exitEasing - Easing curve for the exit transition (fade-out). Defaults to the `easing` param for symmetry.\n * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param outOpacity - Opacity for the out state (exited). Defaults to 0.\n * @param inOpacity - Opacity for the in state (entered). Defaults to 1.\n */\nexport const fadePresenceFn: PresenceMotionFn<FadeParams> = ({\n  duration = motionTokens.durationNormal,\n  easing = motionTokens.curveEasyEase,\n  delay = 0,\n  exitDuration = duration,\n  exitEasing = easing,\n  exitDelay = delay,\n  outOpacity = 0,\n  inOpacity = 1,\n}) => {\n  return {\n    enter: fadeAtom({ direction: 'enter', duration, easing, delay, outOpacity, inOpacity }),\n    exit: fadeAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      delay: exitDelay,\n      outOpacity,\n      inOpacity,\n    }),\n  };\n};\n\n/** A React component that applies fade in/out transitions to its children. */\nexport const Fade = createPresenceComponent(fadePresenceFn);\n\nexport const FadeSnappy = createPresenceComponentVariant(Fade, { duration: motionTokens.durationFast });\n\nexport const FadeRelaxed = createPresenceComponentVariant(Fade, { duration: motionTokens.durationGentle });\n"],"names":["motionTokens","createPresenceComponent","createPresenceComponentVariant","fadeAtom","fadePresenceFn","duration","durationNormal","easing","curveEasyEase","delay","exitDuration","exitEasing","exitDelay","outOpacity","inOpacity","enter","direction","exit","Fade","FadeSnappy","durationFast","FadeRelaxed","durationGentle"],"mappings":"AAAA,SACEA,YAAY,EACZC,uBAAuB,EAEvBC,8BAA8B,QACzB,yBAAyB;AAChC,SAASC,QAAQ,QAAQ,wBAAwB;AAGjD;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,iBAA+C,CAAC,EAC3DC,WAAWL,aAAaM,cAAc,EACtCC,SAASP,aAAaQ,aAAa,EACnCC,QAAQ,CAAC,EACTC,eAAeL,QAAQ,EACvBM,aAAaJ,MAAM,EACnBK,YAAYH,KAAK,EACjBI,aAAa,CAAC,EACdC,YAAY,CAAC,EACd;IACC,OAAO;QACLC,OAAOZ,SAAS;YAAEa,WAAW;YAASX;YAAUE;YAAQE;YAAOI;YAAYC;QAAU;QACrFG,MAAMd,SAAS;YACba,WAAW;YACXX,UAAUK;YACVH,QAAQI;YACRF,OAAOG;YACPC;YACAC;QACF;IACF;AACF,EAAE;AAEF,4EAA4E,GAC5E,OAAO,MAAMI,OAAOjB,wBAAwBG,gBAAgB;AAE5D,OAAO,MAAMe,aAAajB,+BAA+BgB,MAAM;IAAEb,UAAUL,aAAaoB,YAAY;AAAC,GAAG;AAExG,OAAO,MAAMC,cAAcnB,+BAA+BgB,MAAM;IAAEb,UAAUL,aAAasB,cAAc;AAAC,GAAG"}

node_modules/@fluentui/react-motion-components-preview/lib/components/Fade/fade-types.js

@@ -0,0 +1 @@
+export { };

node_modules/@fluentui/react-motion-components-preview/lib/components/Fade/fade-types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Fade/fade-types.ts"],"sourcesContent":["import type { BasePresenceParams } from '../../types';\n\nexport type FadeParams = BasePresenceParams & {\n  /** Opacity for the out state (exited). Defaults to 0. */\n  outOpacity?: number;\n\n  /** Opacity for the in state (entered). Defaults to 1. */\n  inOpacity?: number;\n};\n"],"names":[],"mappings":"AAEA,WAME"}

node_modules/@fluentui/react-motion-components-preview/lib/components/Fade/index.js

@@ -0,0 +1 @@
+export { Fade, FadeRelaxed, FadeSnappy } from './Fade';

node_modules/@fluentui/react-motion-components-preview/lib/components/Fade/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Fade/index.ts"],"sourcesContent":["export { Fade, FadeRelaxed, FadeSnappy } from './Fade';\nexport type { FadeParams } from './fade-types';\n"],"names":["Fade","FadeRelaxed","FadeSnappy"],"mappings":"AAAA,SAASA,IAAI,EAAEC,WAAW,EAAEC,UAAU,QAAQ,SAAS"}

node_modules/@fluentui/react-motion-components-preview/lib/components/Rotate/Rotate.js

@@ -0,0 +1,60 @@
+import { createPresenceComponent, motionTokens } from '@fluentui/react-motion';
+import { fadeAtom } from '../../atoms/fade-atom';
+import { rotateAtom } from '../../atoms/rotate-atom';
+/**
+ * Define a presence motion for rotate in/out
+ *
+ * @param duration - Time (ms) for the enter transition (rotate-in). Defaults to the `durationGentle` value.
+ * @param easing - Easing curve for the enter transition (rotate-in). Defaults to the `curveDecelerateMax` value.
+ * @param delay - Time (ms) to delay the enter transition. Defaults to 0.
+ * @param exitDuration - Time (ms) for the exit transition (rotate-out). Defaults to the `duration` param for symmetry.
+ * @param exitEasing - Easing curve for the exit transition (rotate-out). Defaults to the `curveAccelerateMax` value.
+ * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.
+ * @param axis - The axis of rotation: 'x', 'y', or 'z'. Defaults to 'z'.
+ * @param outAngle - Rotation angle for the out state (exited) in degrees. Defaults to -90.
+ * @param inAngle - Rotation angle for the in state (entered) in degrees. Defaults to 0.
+ * @param animateOpacity - Whether to animate the opacity during the rotation. Defaults to `true`.
+ */ const rotatePresenceFn = ({ duration = motionTokens.durationGentle, easing = motionTokens.curveDecelerateMax, delay = 0, exitDuration = duration, exitEasing = motionTokens.curveAccelerateMax, exitDelay = delay, axis = 'z', outAngle = -90, inAngle = 0, animateOpacity = true })=>{
+    const enterAtoms = [
+        rotateAtom({
+            direction: 'enter',
+            duration,
+            easing,
+            delay,
+            axis,
+            outAngle,
+            inAngle
+        })
+    ];
+    const exitAtoms = [
+        rotateAtom({
+            direction: 'exit',
+            duration: exitDuration,
+            easing: exitEasing,
+            delay: exitDelay,
+            axis,
+            outAngle,
+            inAngle
+        })
+    ];
+    if (animateOpacity) {
+        enterAtoms.push(fadeAtom({
+            direction: 'enter',
+            duration,
+            easing,
+            delay
+        }));
+        exitAtoms.push(fadeAtom({
+            direction: 'exit',
+            duration: exitDuration,
+            easing: exitEasing,
+            delay: exitDelay
+        }));
+    }
+    return {
+        enter: enterAtoms,
+        exit: exitAtoms
+    };
+};
+// Create a presence motion component to rotate an element around a single axis (x, y, or z).
+export const Rotate = createPresenceComponent(rotatePresenceFn);

node_modules/@fluentui/react-motion-components-preview/lib/components/Rotate/Rotate.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Rotate/Rotate.ts"],"sourcesContent":["import { AtomMotion, createPresenceComponent, motionTokens, PresenceMotionFn } from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { rotateAtom } from '../../atoms/rotate-atom';\nimport { RotateParams } from './rotate-types';\n\n/**\n * Define a presence motion for rotate in/out\n *\n * @param duration - Time (ms) for the enter transition (rotate-in). Defaults to the `durationGentle` value.\n * @param easing - Easing curve for the enter transition (rotate-in). Defaults to the `curveDecelerateMax` value.\n * @param delay - Time (ms) to delay the enter transition. Defaults to 0.\n * @param exitDuration - Time (ms) for the exit transition (rotate-out). Defaults to the `duration` param for symmetry.\n * @param exitEasing - Easing curve for the exit transition (rotate-out). Defaults to the `curveAccelerateMax` value.\n * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param axis - The axis of rotation: 'x', 'y', or 'z'. Defaults to 'z'.\n * @param outAngle - Rotation angle for the out state (exited) in degrees. Defaults to -90.\n * @param inAngle - Rotation angle for the in state (entered) in degrees. Defaults to 0.\n * @param animateOpacity - Whether to animate the opacity during the rotation. Defaults to `true`.\n */\nconst rotatePresenceFn: PresenceMotionFn<RotateParams> = ({\n  duration = motionTokens.durationGentle,\n  easing = motionTokens.curveDecelerateMax,\n  delay = 0,\n  exitDuration = duration,\n  exitEasing = motionTokens.curveAccelerateMax,\n  exitDelay = delay,\n  axis = 'z',\n  outAngle = -90,\n  inAngle = 0,\n  animateOpacity = true,\n}: RotateParams) => {\n  const enterAtoms: AtomMotion[] = [\n    rotateAtom({\n      direction: 'enter',\n      duration,\n      easing,\n      delay,\n      axis,\n      outAngle,\n      inAngle,\n    }),\n  ];\n\n  const exitAtoms: AtomMotion[] = [\n    rotateAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      delay: exitDelay,\n      axis,\n      outAngle,\n      inAngle,\n    }),\n  ];\n\n  if (animateOpacity) {\n    enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing, delay }));\n    exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing, delay: exitDelay }));\n  }\n\n  return {\n    enter: enterAtoms,\n    exit: exitAtoms,\n  };\n};\n\n// Create a presence motion component to rotate an element around a single axis (x, y, or z).\nexport const Rotate = createPresenceComponent(rotatePresenceFn);\n"],"names":["createPresenceComponent","motionTokens","fadeAtom","rotateAtom","rotatePresenceFn","duration","durationGentle","easing","curveDecelerateMax","delay","exitDuration","exitEasing","curveAccelerateMax","exitDelay","axis","outAngle","inAngle","animateOpacity","enterAtoms","direction","exitAtoms","push","enter","exit","Rotate"],"mappings":"AAAA,SAAqBA,uBAAuB,EAAEC,YAAY,QAA0B,yBAAyB;AAC7G,SAASC,QAAQ,QAAQ,wBAAwB;AACjD,SAASC,UAAU,QAAQ,0BAA0B;AAGrD;;;;;;;;;;;;;CAaC,GACD,MAAMC,mBAAmD,CAAC,EACxDC,WAAWJ,aAAaK,cAAc,EACtCC,SAASN,aAAaO,kBAAkB,EACxCC,QAAQ,CAAC,EACTC,eAAeL,QAAQ,EACvBM,aAAaV,aAAaW,kBAAkB,EAC5CC,YAAYJ,KAAK,EACjBK,OAAO,GAAG,EACVC,WAAW,CAAC,EAAE,EACdC,UAAU,CAAC,EACXC,iBAAiB,IAAI,EACR;IACb,MAAMC,aAA2B;QAC/Bf,WAAW;YACTgB,WAAW;YACXd;YACAE;YACAE;YACAK;YACAC;YACAC;QACF;KACD;IAED,MAAMI,YAA0B;QAC9BjB,WAAW;YACTgB,WAAW;YACXd,UAAUK;YACVH,QAAQI;YACRF,OAAOI;YACPC;YACAC;YACAC;QACF;KACD;IAED,IAAIC,gBAAgB;QAClBC,WAAWG,IAAI,CAACnB,SAAS;YAAEiB,WAAW;YAASd;YAAUE;YAAQE;QAAM;QACvEW,UAAUC,IAAI,CAACnB,SAAS;YAAEiB,WAAW;YAAQd,UAAUK;YAAcH,QAAQI;YAAYF,OAAOI;QAAU;IAC5G;IAEA,OAAO;QACLS,OAAOJ;QACPK,MAAMH;IACR;AACF;AAEA,6FAA6F;AAC7F,OAAO,MAAMI,SAASxB,wBAAwBI,kBAAkB"}

node_modules/@fluentui/react-motion-components-preview/lib/components/Rotate/index.js

@@ -0,0 +1 @@
+export { Rotate } from './Rotate';

node_modules/@fluentui/react-motion-components-preview/lib/components/Rotate/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Rotate/index.ts"],"sourcesContent":["export { Rotate } from './Rotate';\nexport type { RotateParams } from './rotate-types';\n"],"names":["Rotate"],"mappings":"AAAA,SAASA,MAAM,QAAQ,WAAW"}

node_modules/@fluentui/react-motion-components-preview/lib/components/Rotate/rotate-types.js

@@ -0,0 +1 @@
+export { };

node_modules/@fluentui/react-motion-components-preview/lib/components/Rotate/rotate-types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Rotate/rotate-types.ts"],"sourcesContent":["import type { BasePresenceParams, AnimateOpacity } from '../../types';\n\ntype Axis3D = 'x' | 'y' | 'z';\n\nexport type RotateParams = BasePresenceParams &\n  AnimateOpacity & {\n    /**\n     * The axis of rotation: 'x', 'y', or 'z'.\n     * Defaults to 'z'.\n     */\n    axis?: Axis3D;\n\n    /**\n     * Rotation angle for the out state (exited) in degrees.\n     * Defaults to -90.\n     */\n    outAngle?: number;\n\n    /**\n     * Rotation angle for the in state (entered) in degrees.\n     * Defaults to 0.\n     */\n    inAngle?: number;\n  };\n"],"names":[],"mappings":"AAIA,WAmBI"}

node_modules/@fluentui/react-motion-components-preview/lib/components/Scale/Scale.js

@@ -0,0 +1,65 @@
+import { motionTokens, createPresenceComponent, createPresenceComponentVariant } from '@fluentui/react-motion';
+import { fadeAtom } from '../../atoms/fade-atom';
+import { scaleAtom } from '../../atoms/scale-atom';
+/**
+ * Define a presence motion for scale in/out
+ *
+ * @param duration - Time (ms) for the enter transition (scale-in). Defaults to the `durationGentle` value (250 ms).
+ * @param easing - Easing curve for the enter transition (scale-in). Defaults to the `curveDecelerateMax` value.
+ * @param delay - Time (ms) to delay the enter transition. Defaults to 0.
+ * @param exitDuration - Time (ms) for the exit transition (scale-out). Defaults to the `durationNormal` value (200 ms).
+ * @param exitEasing - Easing curve for the exit transition (scale-out). Defaults to the `curveAccelerateMax` value.
+ * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.
+ * @param outScale - Scale for the out state (exited). Defaults to `0.9`.
+ * @param inScale - Scale for the in state (entered). Defaults to `1`.
+ * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.
+ */ const scalePresenceFn = ({ duration = motionTokens.durationGentle, easing = motionTokens.curveDecelerateMax, delay = 0, exitDuration = motionTokens.durationNormal, exitEasing = motionTokens.curveAccelerateMax, exitDelay = delay, outScale = 0.9, inScale = 1, animateOpacity = true })=>{
+    const enterAtoms = [
+        scaleAtom({
+            direction: 'enter',
+            duration,
+            easing,
+            delay,
+            outScale,
+            inScale
+        })
+    ];
+    const exitAtoms = [
+        scaleAtom({
+            direction: 'exit',
+            duration: exitDuration,
+            easing: exitEasing,
+            delay: exitDelay,
+            outScale,
+            inScale
+        })
+    ];
+    // Only add fade atoms if animateOpacity is true.
+    if (animateOpacity) {
+        enterAtoms.push(fadeAtom({
+            direction: 'enter',
+            duration,
+            easing,
+            delay
+        }));
+        exitAtoms.push(fadeAtom({
+            direction: 'exit',
+            duration: exitDuration,
+            easing: exitEasing,
+            delay: exitDelay
+        }));
+    }
+    return {
+        enter: enterAtoms,
+        exit: exitAtoms
+    };
+};
+/** A React component that applies scale in/out transitions to its children. */ export const Scale = createPresenceComponent(scalePresenceFn);
+export const ScaleSnappy = createPresenceComponentVariant(Scale, {
+    duration: motionTokens.durationNormal,
+    exitDuration: motionTokens.durationFast
+});
+export const ScaleRelaxed = createPresenceComponentVariant(Scale, {
+    duration: motionTokens.durationSlow,
+    exitDuration: motionTokens.durationGentle
+});

node_modules/@fluentui/react-motion-components-preview/lib/components/Scale/Scale.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Scale/Scale.ts"],"sourcesContent":["import {\n  motionTokens,\n  createPresenceComponent,\n  PresenceMotionFn,\n  createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { scaleAtom } from '../../atoms/scale-atom';\nimport { ScaleParams } from './scale-types';\n\n/**\n * Define a presence motion for scale in/out\n *\n * @param duration - Time (ms) for the enter transition (scale-in). Defaults to the `durationGentle` value (250 ms).\n * @param easing - Easing curve for the enter transition (scale-in). Defaults to the `curveDecelerateMax` value.\n * @param delay - Time (ms) to delay the enter transition. Defaults to 0.\n * @param exitDuration - Time (ms) for the exit transition (scale-out). Defaults to the `durationNormal` value (200 ms).\n * @param exitEasing - Easing curve for the exit transition (scale-out). Defaults to the `curveAccelerateMax` value.\n * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param outScale - Scale for the out state (exited). Defaults to `0.9`.\n * @param inScale - Scale for the in state (entered). Defaults to `1`.\n * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.\n */\nconst scalePresenceFn: PresenceMotionFn<ScaleParams> = ({\n  duration = motionTokens.durationGentle,\n  easing = motionTokens.curveDecelerateMax,\n  delay = 0,\n  exitDuration = motionTokens.durationNormal,\n  exitEasing = motionTokens.curveAccelerateMax,\n  exitDelay = delay,\n  outScale = 0.9,\n  inScale = 1,\n  animateOpacity = true,\n}) => {\n  const enterAtoms = [scaleAtom({ direction: 'enter', duration, easing, delay, outScale, inScale })];\n  const exitAtoms = [\n    scaleAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      delay: exitDelay,\n      outScale,\n      inScale,\n    }),\n  ];\n\n  // Only add fade atoms if animateOpacity is true.\n  if (animateOpacity) {\n    enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing, delay }));\n    exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing, delay: exitDelay }));\n  }\n\n  return {\n    enter: enterAtoms,\n    exit: exitAtoms,\n  };\n};\n\n/** A React component that applies scale in/out transitions to its children. */\nexport const Scale = createPresenceComponent(scalePresenceFn);\n\nexport const ScaleSnappy = createPresenceComponentVariant(Scale, {\n  duration: motionTokens.durationNormal,\n  exitDuration: motionTokens.durationFast,\n});\n\nexport const ScaleRelaxed = createPresenceComponentVariant(Scale, {\n  duration: motionTokens.durationSlow,\n  exitDuration: motionTokens.durationGentle,\n});\n"],"names":["motionTokens","createPresenceComponent","createPresenceComponentVariant","fadeAtom","scaleAtom","scalePresenceFn","duration","durationGentle","easing","curveDecelerateMax","delay","exitDuration","durationNormal","exitEasing","curveAccelerateMax","exitDelay","outScale","inScale","animateOpacity","enterAtoms","direction","exitAtoms","push","enter","exit","Scale","ScaleSnappy","durationFast","ScaleRelaxed","durationSlow"],"mappings":"AAAA,SACEA,YAAY,EACZC,uBAAuB,EAEvBC,8BAA8B,QACzB,yBAAyB;AAChC,SAASC,QAAQ,QAAQ,wBAAwB;AACjD,SAASC,SAAS,QAAQ,yBAAyB;AAGnD;;;;;;;;;;;;CAYC,GACD,MAAMC,kBAAiD,CAAC,EACtDC,WAAWN,aAAaO,cAAc,EACtCC,SAASR,aAAaS,kBAAkB,EACxCC,QAAQ,CAAC,EACTC,eAAeX,aAAaY,cAAc,EAC1CC,aAAab,aAAac,kBAAkB,EAC5CC,YAAYL,KAAK,EACjBM,WAAW,GAAG,EACdC,UAAU,CAAC,EACXC,iBAAiB,IAAI,EACtB;IACC,MAAMC,aAAa;QAACf,UAAU;YAAEgB,WAAW;YAASd;YAAUE;YAAQE;YAAOM;YAAUC;QAAQ;KAAG;IAClG,MAAMI,YAAY;QAChBjB,UAAU;YACRgB,WAAW;YACXd,UAAUK;YACVH,QAAQK;YACRH,OAAOK;YACPC;YACAC;QACF;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWG,IAAI,CAACnB,SAAS;YAAEiB,WAAW;YAASd;YAAUE;YAAQE;QAAM;QACvEW,UAAUC,IAAI,CAACnB,SAAS;YAAEiB,WAAW;YAAQd,UAAUK;YAAcH,QAAQK;YAAYH,OAAOK;QAAU;IAC5G;IAEA,OAAO;QACLQ,OAAOJ;QACPK,MAAMH;IACR;AACF;AAEA,6EAA6E,GAC7E,OAAO,MAAMI,QAAQxB,wBAAwBI,iBAAiB;AAE9D,OAAO,MAAMqB,cAAcxB,+BAA+BuB,OAAO;IAC/DnB,UAAUN,aAAaY,cAAc;IACrCD,cAAcX,aAAa2B,YAAY;AACzC,GAAG;AAEH,OAAO,MAAMC,eAAe1B,+BAA+BuB,OAAO;IAChEnB,UAAUN,aAAa6B,YAAY;IACnClB,cAAcX,aAAaO,cAAc;AAC3C,GAAG"}

node_modules/@fluentui/react-motion-components-preview/lib/components/Scale/index.js

@@ -0,0 +1 @@
+export { Scale, ScaleRelaxed, ScaleSnappy } from './Scale';

node_modules/@fluentui/react-motion-components-preview/lib/components/Scale/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Scale/index.ts"],"sourcesContent":["export { Scale, ScaleRelaxed, ScaleSnappy } from './Scale';\nexport type { ScaleParams } from './scale-types';\n"],"names":["Scale","ScaleRelaxed","ScaleSnappy"],"mappings":"AAAA,SAASA,KAAK,EAAEC,YAAY,EAAEC,WAAW,QAAQ,UAAU"}

node_modules/@fluentui/react-motion-components-preview/lib/components/Scale/scale-types.js

@@ -0,0 +1 @@
+export { };

node_modules/@fluentui/react-motion-components-preview/lib/components/Scale/scale-types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Scale/scale-types.ts"],"sourcesContent":["import type { BasePresenceParams, AnimateOpacity } from '../../types';\n\nexport type ScaleParams = BasePresenceParams &\n  AnimateOpacity & {\n    /** Scale for the out state (exited). Defaults to `0.9`. */\n    outScale?: number;\n\n    /** Scale for the in state (entered). Defaults to `1`. */\n    inScale?: number;\n  };\n"],"names":[],"mappings":"AAEA,WAOI"}

node_modules/@fluentui/react-motion-components-preview/lib/components/Slide/Slide.js

@@ -0,0 +1,70 @@
+import { motionTokens, createPresenceComponent, createPresenceComponentVariant } from '@fluentui/react-motion';
+import { fadeAtom } from '../../atoms/fade-atom';
+import { slideAtom } from '../../atoms/slide-atom';
+/**
+ * Define a presence motion for slide in/out
+ *
+ * @param duration - Time (ms) for the enter transition (slide-in). Defaults to the `durationNormal` value (200 ms).
+ * @param easing - Easing curve for the enter transition (slide-in). Defaults to the `curveDecelerateMid` value.
+ * @param delay - Time (ms) to delay the enter transition. Defaults to 0.
+ * @param exitDuration - Time (ms) for the exit transition (slide-out). Defaults to the `duration` param for symmetry.
+ * @param exitEasing - Easing curve for the exit transition (slide-out). Defaults to the `curveAccelerateMid` value.
+ * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.
+ * @param outX - X translate for the out state (exited). Defaults to `'0px'`.
+ * @param outY - Y translate for the out state (exited). Defaults to `'0px'`.
+ * @param inX - X translate for the in state (entered). Defaults to `'0px'`.
+ * @param inY - Y translate for the in state (entered). Defaults to `'0px'`.
+ * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.
+ */ const slidePresenceFn = ({ duration = motionTokens.durationNormal, easing = motionTokens.curveDecelerateMid, delay = 0, exitDuration = duration, exitEasing = motionTokens.curveAccelerateMid, exitDelay = delay, outX = '0px', outY = '0px', inX = '0px', inY = '0px', animateOpacity = true })=>{
+    const enterAtoms = [
+        slideAtom({
+            direction: 'enter',
+            duration,
+            easing,
+            delay,
+            outX,
+            outY,
+            inX,
+            inY
+        })
+    ];
+    const exitAtoms = [
+        slideAtom({
+            direction: 'exit',
+            duration: exitDuration,
+            easing: exitEasing,
+            delay: exitDelay,
+            outX,
+            outY,
+            inX,
+            inY
+        })
+    ];
+    // Only add fade atoms if animateOpacity is true.
+    if (animateOpacity) {
+        enterAtoms.push(fadeAtom({
+            direction: 'enter',
+            duration,
+            easing,
+            delay
+        }));
+        exitAtoms.push(fadeAtom({
+            direction: 'exit',
+            duration: exitDuration,
+            easing: exitEasing,
+            delay: exitDelay
+        }));
+    }
+    return {
+        enter: enterAtoms,
+        exit: exitAtoms
+    };
+};
+/** A React component that applies slide in/out transitions to its children. */ export const Slide = createPresenceComponent(slidePresenceFn);
+export const SlideSnappy = createPresenceComponentVariant(Slide, {
+    easing: motionTokens.curveDecelerateMax,
+    exitEasing: motionTokens.curveAccelerateMax
+});
+export const SlideRelaxed = createPresenceComponentVariant(Slide, {
+    duration: motionTokens.durationGentle
+});

node_modules/@fluentui/react-motion-components-preview/lib/components/Slide/Slide.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Slide/Slide.ts"],"sourcesContent":["import {\n  motionTokens,\n  createPresenceComponent,\n  PresenceMotionFn,\n  createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { slideAtom } from '../../atoms/slide-atom';\nimport { SlideParams } from './slide-types';\n\n/**\n * Define a presence motion for slide in/out\n *\n * @param duration - Time (ms) for the enter transition (slide-in). Defaults to the `durationNormal` value (200 ms).\n * @param easing - Easing curve for the enter transition (slide-in). Defaults to the `curveDecelerateMid` value.\n * @param delay - Time (ms) to delay the enter transition. Defaults to 0.\n * @param exitDuration - Time (ms) for the exit transition (slide-out). Defaults to the `duration` param for symmetry.\n * @param exitEasing - Easing curve for the exit transition (slide-out). Defaults to the `curveAccelerateMid` value.\n * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param outX - X translate for the out state (exited). Defaults to `'0px'`.\n * @param outY - Y translate for the out state (exited). Defaults to `'0px'`.\n * @param inX - X translate for the in state (entered). Defaults to `'0px'`.\n * @param inY - Y translate for the in state (entered). Defaults to `'0px'`.\n * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.\n */\nconst slidePresenceFn: PresenceMotionFn<SlideParams> = ({\n  duration = motionTokens.durationNormal,\n  easing = motionTokens.curveDecelerateMid,\n  delay = 0,\n  exitDuration = duration,\n  exitEasing = motionTokens.curveAccelerateMid,\n  exitDelay = delay,\n  outX = '0px',\n  outY = '0px',\n  inX = '0px',\n  inY = '0px',\n  animateOpacity = true,\n}: SlideParams) => {\n  const enterAtoms = [slideAtom({ direction: 'enter', duration, easing, delay, outX, outY, inX, inY })];\n  const exitAtoms = [\n    slideAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      delay: exitDelay,\n      outX,\n      outY,\n      inX,\n      inY,\n    }),\n  ];\n\n  // Only add fade atoms if animateOpacity is true.\n  if (animateOpacity) {\n    enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing, delay }));\n    exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing, delay: exitDelay }));\n  }\n\n  return {\n    enter: enterAtoms,\n    exit: exitAtoms,\n  };\n};\n\n/** A React component that applies slide in/out transitions to its children. */\nexport const Slide = createPresenceComponent(slidePresenceFn);\n\nexport const SlideSnappy = createPresenceComponentVariant(Slide, {\n  easing: motionTokens.curveDecelerateMax,\n  exitEasing: motionTokens.curveAccelerateMax,\n});\n\nexport const SlideRelaxed = createPresenceComponentVariant(Slide, {\n  duration: motionTokens.durationGentle,\n});\n"],"names":["motionTokens","createPresenceComponent","createPresenceComponentVariant","fadeAtom","slideAtom","slidePresenceFn","duration","durationNormal","easing","curveDecelerateMid","delay","exitDuration","exitEasing","curveAccelerateMid","exitDelay","outX","outY","inX","inY","animateOpacity","enterAtoms","direction","exitAtoms","push","enter","exit","Slide","SlideSnappy","curveDecelerateMax","curveAccelerateMax","SlideRelaxed","durationGentle"],"mappings":"AAAA,SACEA,YAAY,EACZC,uBAAuB,EAEvBC,8BAA8B,QACzB,yBAAyB;AAChC,SAASC,QAAQ,QAAQ,wBAAwB;AACjD,SAASC,SAAS,QAAQ,yBAAyB;AAGnD;;;;;;;;;;;;;;CAcC,GACD,MAAMC,kBAAiD,CAAC,EACtDC,WAAWN,aAAaO,cAAc,EACtCC,SAASR,aAAaS,kBAAkB,EACxCC,QAAQ,CAAC,EACTC,eAAeL,QAAQ,EACvBM,aAAaZ,aAAaa,kBAAkB,EAC5CC,YAAYJ,KAAK,EACjBK,OAAO,KAAK,EACZC,OAAO,KAAK,EACZC,MAAM,KAAK,EACXC,MAAM,KAAK,EACXC,iBAAiB,IAAI,EACT;IACZ,MAAMC,aAAa;QAAChB,UAAU;YAAEiB,WAAW;YAASf;YAAUE;YAAQE;YAAOK;YAAMC;YAAMC;YAAKC;QAAI;KAAG;IACrG,MAAMI,YAAY;QAChBlB,UAAU;YACRiB,WAAW;YACXf,UAAUK;YACVH,QAAQI;YACRF,OAAOI;YACPC;YACAC;YACAC;YACAC;QACF;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWG,IAAI,CAACpB,SAAS;YAAEkB,WAAW;YAASf;YAAUE;YAAQE;QAAM;QACvEY,UAAUC,IAAI,CAACpB,SAAS;YAAEkB,WAAW;YAAQf,UAAUK;YAAcH,QAAQI;YAAYF,OAAOI;QAAU;IAC5G;IAEA,OAAO;QACLU,OAAOJ;QACPK,MAAMH;IACR;AACF;AAEA,6EAA6E,GAC7E,OAAO,MAAMI,QAAQzB,wBAAwBI,iBAAiB;AAE9D,OAAO,MAAMsB,cAAczB,+BAA+BwB,OAAO;IAC/DlB,QAAQR,aAAa4B,kBAAkB;IACvChB,YAAYZ,aAAa6B,kBAAkB;AAC7C,GAAG;AAEH,OAAO,MAAMC,eAAe5B,+BAA+BwB,OAAO;IAChEpB,UAAUN,aAAa+B,cAAc;AACvC,GAAG"}

node_modules/@fluentui/react-motion-components-preview/lib/components/Slide/index.js

@@ -0,0 +1 @@
+export { Slide, SlideRelaxed, SlideSnappy } from './Slide';

node_modules/@fluentui/react-motion-components-preview/lib/components/Slide/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Slide/index.ts"],"sourcesContent":["export { Slide, SlideRelaxed, SlideSnappy } from './Slide';\nexport type { SlideParams } from './slide-types';\n"],"names":["Slide","SlideRelaxed","SlideSnappy"],"mappings":"AAAA,SAASA,KAAK,EAAEC,YAAY,EAAEC,WAAW,QAAQ,UAAU"}

node_modules/@fluentui/react-motion-components-preview/lib/components/Slide/slide-types.js

@@ -0,0 +1 @@
+export { };

node_modules/@fluentui/react-motion-components-preview/lib/components/Slide/slide-types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Slide/slide-types.ts"],"sourcesContent":["import type { BasePresenceParams, AnimateOpacity } from '../../types';\n\nexport type SlideParams = BasePresenceParams &\n  AnimateOpacity & {\n    /** X translate for the out state (exited). Defaults to `'0px'`. */\n    outX?: string;\n\n    /** Y translate for the out state (exited). Defaults to `'0px'`. */\n    outY?: string;\n\n    /** X translate for the in state (entered). Defaults to `'0px'`. */\n    inX?: string;\n\n    /** Y translate for the in state (entered). Defaults to `'0px'`. */\n    inY?: string;\n  };\n"],"names":[],"mappings":"AAEA,WAaI"}

node_modules/@fluentui/react-motion-components-preview/lib/index.js

@@ -0,0 +1,13 @@
+export { Collapse, CollapseSnappy, CollapseRelaxed, CollapseDelayed } from './components/Collapse';
+export { Fade, FadeSnappy, FadeRelaxed } from './components/Fade';
+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

node_modules/@fluentui/react-motion-components-preview/lib/index.js.map

@@ -0,0 +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';\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"}

node_modules/@fluentui/react-motion-components-preview/lib/types.js

@@ -0,0 +1,3 @@
+/**
+ * Common parameters shared by all atom functions.
+ */ export { };

node_modules/@fluentui/react-motion-components-preview/lib/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/types.ts"],"sourcesContent":["import type { MotionParam, PresenceMotion, PresenceMotionFn, PresenceDirection } from '@fluentui/react-motion';\n\n/**\n * This is a factory function that generates a motion object from variant params, e.g. duration, easing, etc.\n * The generated object defines a presence motion with `enter` and `exit` transitions.\n * This motion object is declarative, i.e. data without side effects,\n * and it is framework-independent, i.e. non-React.\n * It can be turned into a React component using `createPresenceComponent`.\n */\n// TODO: move to @fluentui/react-motion when stable\nexport type PresenceMotionCreator<MotionVariantParams extends Record<string, MotionParam> = {}> = (\n  variantParams?: MotionVariantParams,\n) => PresenceMotion;\n\n/**\n * This is a factory function that generates a motion function, which has variant params bound into it.\n * The generated motion function accepts other runtime params that aren't locked into the variant, but supplied at runtime.\n * This separation allows the variant to be defined once and reused with different runtime params which may be orthogonal to the variant params.\n * For example, a variant may define the duration and easing of a transition, which are fixed for all instances of the variant,\n * while the runtime params may give access to the target element, which is different for each instance.\n *\n * The generated motion function is also framework-independent, i.e. non-React.\n * It can be turned into a React component using `createPresenceComponent`.\n */\n// TODO: move to @fluentui/react-motion when stable\nexport type PresenceMotionFnCreator<\n  MotionVariantParams extends Record<string, MotionParam> = {},\n  MotionRuntimeParams extends Record<string, MotionParam> = {},\n> = (variantParams?: MotionVariantParams) => PresenceMotionFn<MotionRuntimeParams>;\n\n/**\n * Common duration parameters for presence motion components.\n */\nexport type PresenceDuration = {\n  /** Time (ms) for the enter transition. */\n  duration?: number;\n\n  /** Time (ms) for the exit transition. Defaults to the `duration` param for symmetry. */\n  exitDuration?: number;\n};\n\n/**\n * Common easing parameters for presence motion components.\n */\nexport type PresenceEasing = {\n  /** Easing curve for the enter transition. */\n  easing?: string;\n\n  /** Easing curve for the exit transition. Defaults to the `easing` param for symmetry. */\n  exitEasing?: string;\n};\n\n/**\n * Common delay parameters for presence motion components.\n */\nexport type PresenceDelay = {\n  /** Time (ms) to delay the enter transition. */\n  delay?: EffectTiming['delay'];\n\n  /** Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry. */\n  exitDelay?: EffectTiming['delay'];\n};\n\n/**\n * Base presence parameters combining duration, easing, and delay for motion components.\n */\nexport type BasePresenceParams = PresenceDuration & PresenceEasing & PresenceDelay;\n\n/**\n * Common opacity animation parameter for motion components.\n */\nexport type AnimateOpacity = {\n  /** Whether to animate the opacity. Defaults to `true`. */\n  animateOpacity?: boolean;\n};\n\n/**\n * Common parameters shared by all atom functions.\n */\nexport type BaseAtomParams = {\n  /** The functional direction of the motion: 'enter' or 'exit'. */\n  direction: PresenceDirection;\n  /** The duration of the motion in milliseconds. */\n  duration: number;\n  /** The easing curve for the motion. */\n  easing?: EffectTiming['easing'];\n  /** Time (ms) to delay the animation. */\n  delay?: EffectTiming['delay'];\n};\n"],"names":[],"mappings":"AA4EA;;CAEC,GACD,WASE"}