@fluentui/react-motion-components-preview 0.8.2 → 0.10.0

package/CHANGELOG.md

@@ -1,9 +1,34 @@
 # Change Log - @fluentui/react-motion-components-preview
 
-This log was last generated on Mon, 28 Jul 2025 18:48:19 GMT and should not be manually modified.
+This log was last generated on Mon, 08 Sep 2025 12:41:49 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.10.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.10.0)
+
+Mon, 08 Sep 2025 12:41:49 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.9.0..@fluentui/react-motion-components-preview_v0.10.0)
+
+### Minor changes
+
+- feat(motion): add delay parameter to motion components ([PR #35077](https://github.com/microsoft/fluentui/pull/35077) by robertpenner@microsoft.com)
+
+### Patches
+
+- refactor(motion): normalize motion atom parameters & types ([PR #35076](https://github.com/microsoft/fluentui/pull/35076) by robertpenner@microsoft.com)
+- fix(motion): apply opacity in animations using fill mode ([PR #35078](https://github.com/microsoft/fluentui/pull/35078) by robertpenner@microsoft.com)
+- test(motion): expand motion atom testing ([PR #35079](https://github.com/microsoft/fluentui/pull/35079) by robertpenner@microsoft.com)
+- chore: extend peer dependencies versions to support React 19 ([PR #35145](https://github.com/microsoft/fluentui/pull/35145) by dmytrokirpa@microsoft.com)
+
+## [0.9.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.9.0)
+
+Thu, 21 Aug 2025 12:25:13 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.8.1..@fluentui/react-motion-components-preview_v0.9.0)
+
+### Minor changes
+
+- feat(motion): add Rotate presence motion component ([PR #34928](https://github.com/microsoft/fluentui/pull/34928) by robertpenner@microsoft.com)
+
 ## [0.8.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.8.0)
 
 Mon, 28 Jul 2025 18:48:19 GMT 

package/dist/index.d.ts

@@ -8,10 +8,17 @@ declare type AnimateOpacity = {
     animateOpacity?: boolean;
 };
 
+declare type Axis3D = 'x' | 'y' | 'z';
+
+/**
+ * Base presence parameters combining duration, easing, and delay for motion components.
+ */
+declare type BasePresenceParams = PresenceDuration & PresenceEasing & PresenceDelay;
+
 /** A React component that applies blur in/out transitions to its children. */
 export declare const Blur: PresenceComponent<BlurParams>;
 
-declare type BlurParams = PresenceDuration & PresenceEasing & AnimateOpacity & {
+export declare type BlurParams = BasePresenceParams & AnimateOpacity & {
     /** The radius of pixels to blend into the blur. A length string, defaulting to '20px'. */
     fromRadius?: string;
 };
@@ -20,7 +27,7 @@ declare type BlurParams = PresenceDuration & PresenceEasing & AnimateOpacity & {
 export declare const Collapse: PresenceComponent<CollapseParams>;
 
 /** Common properties shared by all collapse components */
-declare type CollapseBaseParams = PresenceEasing & AnimateOpacity & {
+declare type CollapseBaseParams = PresenceEasing & PresenceDelay & AnimateOpacity & {
     /** The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height. */
     orientation?: CollapseOrientation;
 };
@@ -28,7 +35,7 @@ declare type CollapseBaseParams = PresenceEasing & AnimateOpacity & {
 /** A React component that applies collapse/expand transitions with delayed fade to its children. */
 export declare const CollapseDelayed: PresenceComponent<CollapseDelayedParams>;
 
-declare type CollapseDelayedParams = CollapseBaseParams & {
+export declare type CollapseDelayedParams = CollapseBaseParams & {
     /** Time (ms) for the size expand. Defaults to the `durationNormal` value (200 ms). */
     sizeDuration?: number;
     /** Time (ms) for the fade-in. Defaults to the `sizeDuration` param, to sync fade-in with expand. */
@@ -45,20 +52,33 @@ declare type CollapseDelayedParams = CollapseBaseParams & {
 
 declare type CollapseOrientation = 'horizontal' | 'vertical';
 
-declare type CollapseParams = CollapseBaseParams & PresenceDuration;
+export declare type CollapseParams = BasePresenceParams & AnimateOpacity & {
+    /** The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height. */
+    orientation?: CollapseOrientation;
+};
 
 export declare const CollapseRelaxed: PresenceComponent<CollapseParams>;
 
 export declare const CollapseSnappy: PresenceComponent<CollapseParams>;
 
 /** A React component that applies fade in/out transitions to its children. */
-export declare const Fade: PresenceComponent<FadeParams>;
+export declare const Fade: PresenceComponent<BasePresenceParams>;
 
-declare type FadeParams = PresenceDuration & PresenceEasing;
+export declare type FadeParams = BasePresenceParams;
 
-export declare const FadeRelaxed: PresenceComponent<FadeParams>;
+export declare const FadeRelaxed: PresenceComponent<BasePresenceParams>;
 
-export declare const FadeSnappy: PresenceComponent<FadeParams>;
+export declare const FadeSnappy: PresenceComponent<BasePresenceParams>;
+
+/**
+ * Common delay parameters for presence motion components.
+ */
+declare type PresenceDelay = {
+    /** Time (ms) to delay the enter transition. */
+    delay?: EffectTiming['delay'];
+    /** Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry. */
+    exitDelay?: EffectTiming['delay'];
+};
 
 /**
  * Common duration parameters for presence motion components.
@@ -80,10 +100,30 @@ declare type PresenceEasing = {
     exitEasing?: string;
 };
 
+export declare const Rotate: PresenceComponent<RotateParams>;
+
+export declare type RotateParams = BasePresenceParams & AnimateOpacity & {
+    /**
+     * The axis of rotation: 'x', 'y', or 'z'.
+     * Defaults to 'y'.
+     */
+    axis?: Axis3D;
+    /**
+     * The starting rotation angle in degrees.
+     * Defaults to -90.
+     */
+    angle?: number;
+    /**
+     * The ending rotation angle in degrees.
+     * Defaults to the negation of `angle`.
+     */
+    exitAngle?: number;
+};
+
 /** A React component that applies scale in/out transitions to its children. */
 export declare const Scale: PresenceComponent<ScaleParams>;
 
-declare type ScaleParams = PresenceDuration & PresenceEasing & AnimateOpacity & {
+export declare type ScaleParams = BasePresenceParams & AnimateOpacity & {
     /** The scale value to animate from. Defaults to `0.9`. */
     fromScale?: number;
 };
@@ -95,7 +135,7 @@ export declare const ScaleSnappy: PresenceComponent<ScaleParams>;
 /** A React component that applies slide in/out transitions to its children. */
 export declare const Slide: PresenceComponent<SlideParams>;
 
-declare type SlideParams = PresenceDuration & PresenceEasing & AnimateOpacity & {
+export declare type SlideParams = BasePresenceParams & AnimateOpacity & {
     /** The X translate value with units to animate from. Defaults to `'0px'`. */
     fromX?: string;
     /** The Y translate value with units to animate from. Defaults to `'20px'`. */

package/lib/atoms/blur-atom.js

@@ -6,7 +6,7 @@ import { motionTokens } from '@fluentui/react-motion';
  * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
  * @param fromRadius - The blur radius value with units (e.g., '20px', '1rem'). Defaults to '20px'.
  * @returns A motion atom object with filter blur keyframes and the supplied duration and easing.
- */ export const blurAtom = ({ direction, duration, easing = motionTokens.curveLinear, fromRadius = '10px' })=>{
+ */ export const blurAtom = ({ direction, duration, easing = motionTokens.curveLinear, delay = 0, fromRadius = '10px' })=>{
     const keyframes = [
         {
             filter: `blur(${fromRadius})`
@@ -21,6 +21,7 @@ import { motionTokens } from '@fluentui/react-motion';
     return {
         keyframes,
         duration,
-        easing
+        easing,
+        delay
     };
 };

package/lib/atoms/blur-atom.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/atoms/blur-atom.ts"],"sourcesContent":["import { AtomMotion, PresenceDirection, motionTokens } from '@fluentui/react-motion';\n\ninterface BlurAtomParams {\n  direction: PresenceDirection;\n  duration: number;\n  easing?: string;\n  fromRadius?: 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 fromRadius - The blur radius value with units (e.g., '20px', '1rem'). Defaults to '20px'.\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  fromRadius = '10px',\n}: BlurAtomParams): AtomMotion => {\n  const keyframes = [{ filter: `blur(${fromRadius})` }, { filter: 'blur(0px)' }];\n  if (direction === 'exit') {\n    keyframes.reverse();\n  }\n  return {\n    keyframes,\n    duration,\n    easing,\n  };\n};\n"],"names":["motionTokens","blurAtom","direction","duration","easing","curveLinear","fromRadius","keyframes","filter","reverse"],"mappings":"AAAA,SAAwCA,YAAY,QAAQ,yBAAyB;AASrF;;;;;;;CAOC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,SAAS,EACTC,QAAQ,EACRC,SAASJ,aAAaK,WAAW,EACjCC,aAAa,MAAM,EACJ;IACf,MAAMC,YAAY;QAAC;YAAEC,QAAQ,CAAC,KAAK,EAAEF,WAAW,CAAC,CAAC;QAAC;QAAG;YAAEE,QAAQ;QAAY;KAAE;IAC9E,IAAIN,cAAc,QAAQ;QACxBK,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAJ;QACAC;IACF;AACF,EAAE"}
+{"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  fromRadius?: 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 fromRadius - The blur radius value with units (e.g., '20px', '1rem'). Defaults to '20px'.\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  fromRadius = '10px',\n}: BlurAtomParams): AtomMotion => {\n  const keyframes = [{ filter: `blur(${fromRadius})` }, { filter: 'blur(0px)' }];\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","fromRadius","keyframes","filter","reverse"],"mappings":"AAAA,SAAqBA,YAAY,QAAQ,yBAAyB;AAOlE;;;;;;;CAOC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,SAAS,EACTC,QAAQ,EACRC,SAASJ,aAAaK,WAAW,EACjCC,QAAQ,CAAC,EACTC,aAAa,MAAM,EACJ;IACf,MAAMC,YAAY;QAAC;YAAEC,QAAQ,CAAC,KAAK,EAAEF,WAAW,CAAC,CAAC;QAAC;QAAG;YAAEE,QAAQ;QAAY;KAAE;IAC9E,IAAIP,cAAc,QAAQ;QACxBM,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAL;QACAC;QACAE;IACF;AACF,EAAE"}

package/lib/atoms/fade-atom.js

@@ -4,9 +4,10 @@ import { motionTokens } from '@fluentui/react-motion';
  * @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 fromValue - The starting opacity value. Defaults to 0.
+ * @param delay - The delay before the motion starts. Defaults to 0.
+ * @param fromOpacity - The starting opacity value. Defaults to 0.
  * @returns A motion atom object with opacity keyframes and the supplied duration and easing.
- */ export const fadeAtom = ({ direction, duration, easing = motionTokens.curveLinear, fromOpacity = 0 })=>{
+ */ export const fadeAtom = ({ direction, duration, easing = motionTokens.curveLinear, delay = 0, fromOpacity = 0 })=>{
     const keyframes = [
         {
             opacity: fromOpacity
@@ -21,6 +22,10 @@ import { motionTokens } from '@fluentui/react-motion';
     return {
         keyframes,
         duration,
-        easing
+        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'
     };
 };

package/lib/atoms/fade-atom.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/atoms/fade-atom.ts"],"sourcesContent":["import { AtomMotion, PresenceDirection, motionTokens } from '@fluentui/react-motion';\n\ninterface FadeAtomParams {\n  direction: PresenceDirection;\n  duration: number;\n  easing?: string;\n  fromOpacity?: 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 fromValue - The starting opacity value. Defaults to 0.\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  fromOpacity = 0,\n}: FadeAtomParams): AtomMotion => {\n  const keyframes = [{ opacity: fromOpacity }, { opacity: 1 }];\n  if (direction === 'exit') {\n    keyframes.reverse();\n  }\n  return {\n    keyframes,\n    duration,\n    easing,\n  };\n};\n"],"names":["motionTokens","fadeAtom","direction","duration","easing","curveLinear","fromOpacity","keyframes","opacity","reverse"],"mappings":"AAAA,SAAwCA,YAAY,QAAQ,yBAAyB;AASrF;;;;;;;CAOC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,SAAS,EACTC,QAAQ,EACRC,SAASJ,aAAaK,WAAW,EACjCC,cAAc,CAAC,EACA;IACf,MAAMC,YAAY;QAAC;YAAEC,SAASF;QAAY;QAAG;YAAEE,SAAS;QAAE;KAAE;IAC5D,IAAIN,cAAc,QAAQ;QACxBK,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAJ;QACAC;IACF;AACF,EAAE"}
+{"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  /** The starting opacity value. Defaults to 0. */\n  fromOpacity?: 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 fromOpacity - The starting opacity value. Defaults to 0.\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  fromOpacity = 0,\n}: FadeAtomParams): AtomMotion => {\n  const keyframes = [{ opacity: fromOpacity }, { opacity: 1 }];\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","fromOpacity","keyframes","opacity","reverse","fill"],"mappings":"AAAA,SAAqBA,YAAY,QAAQ,yBAAyB;AAWlE;;;;;;;;CAQC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,SAAS,EACTC,QAAQ,EACRC,SAASJ,aAAaK,WAAW,EACjCC,QAAQ,CAAC,EACTC,cAAc,CAAC,EACA;IACf,MAAMC,YAAY;QAAC;YAAEC,SAASF;QAAY;QAAG;YAAEE,SAAS;QAAE;KAAE;IAC5D,IAAIP,cAAc,QAAQ;QACxBM,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAL;QACAC;QACAE;QACA,+DAA+D;QAC/D,4EAA4E;QAC5EK,MAAM;IACR;AACF,EAAE"}

package/lib/atoms/rotate-atom.js

@@ -0,0 +1,35 @@
+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 angle - The starting rotation angle in degrees. Defaults to -90.
+ * @param exitAngle - The ending rotation angle in degrees. Defaults to the negation of `angle`.
+ * @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 = 'y', angle = -90, exitAngle = -angle })=>{
+    let fromAngle = angle;
+    let toAngle = 0;
+    if (direction === 'exit') {
+        fromAngle = 0;
+        toAngle = exitAngle;
+    }
+    const keyframes = [
+        {
+            rotate: createRotateValue(axis, fromAngle)
+        },
+        {
+            rotate: createRotateValue(axis, toAngle)
+        }
+    ];
+    return {
+        keyframes,
+        duration,
+        easing,
+        delay
+    };
+};

package/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  angle?: number;\n  exitAngle?: 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 angle - The starting rotation angle in degrees. Defaults to -90.\n * @param exitAngle - The ending rotation angle in degrees. Defaults to the negation of `angle`.\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 = 'y',\n  angle = -90,\n  exitAngle = -angle,\n}: RotateAtomParams): AtomMotion => {\n  let fromAngle = angle;\n  let toAngle = 0;\n\n  if (direction === 'exit') {\n    fromAngle = 0;\n    toAngle = exitAngle;\n  }\n  const keyframes = [{ rotate: createRotateValue(axis, fromAngle) }, { rotate: createRotateValue(axis, toAngle) }];\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","exitAngle","fromAngle","toAngle","keyframes","rotate"],"mappings":"AAAA,SAAqBA,YAAY,QAAQ,yBAAyB;AAYlE,MAAMC,oBAAoB,CAACC,MAAcC;IACvC,OAAO,GAAGD,KAAKE,WAAW,GAAG,CAAC,EAAED,MAAM,GAAG,CAAC;AAC5C;AAEA;;;;;;;;;CASC,GACD,OAAO,MAAME,aAAa,CAAC,EACzBC,SAAS,EACTC,QAAQ,EACRC,SAASR,aAAaS,WAAW,EACjCC,QAAQ,CAAC,EACTR,OAAO,GAAG,EACVC,QAAQ,CAAC,EAAE,EACXQ,YAAY,CAACR,KAAK,EACD;IACjB,IAAIS,YAAYT;IAChB,IAAIU,UAAU;IAEd,IAAIP,cAAc,QAAQ;QACxBM,YAAY;QACZC,UAAUF;IACZ;IACA,MAAMG,YAAY;QAAC;YAAEC,QAAQd,kBAAkBC,MAAMU;QAAW;QAAG;YAAEG,QAAQd,kBAAkBC,MAAMW;QAAS;KAAE;IAEhH,OAAO;QACLC;QACAP;QACAC;QACAE;IACF;AACF,EAAE"}

package/lib/atoms/scale-atom.js

@@ -7,7 +7,7 @@ import { motionTokens } from '@fluentui/react-motion';
  * @param fromScale - The starting scale value. Defaults to 0.9.
  * @param toScale - The ending scale value. Defaults to 1.
  * @returns A motion atom object with scale keyframes and the supplied duration and easing.
- */ export const scaleAtom = ({ direction, duration, easing = motionTokens.curveLinear, fromScale = 0.9, toScale = 1 })=>{
+ */ export const scaleAtom = ({ direction, duration, easing = motionTokens.curveLinear, delay = 0, fromScale = 0.9, toScale = 1 })=>{
     const keyframes = [
         {
             scale: fromScale
@@ -22,6 +22,7 @@ import { motionTokens } from '@fluentui/react-motion';
     return {
         keyframes,
         duration,
-        easing
+        easing,
+        delay
     };
 };

package/lib/atoms/scale-atom.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/atoms/scale-atom.ts"],"sourcesContent":["import { AtomMotion, PresenceDirection, motionTokens } from '@fluentui/react-motion';\n\ninterface ScaleAtomParams {\n  direction: PresenceDirection;\n  duration: number;\n  easing?: string;\n  fromScale?: number;\n  toScale?: 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 fromScale - The starting scale value. Defaults to 0.9.\n * @param toScale - The ending scale value. Defaults to 1.\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  fromScale = 0.9,\n  toScale = 1,\n}: ScaleAtomParams): AtomMotion => {\n  const keyframes = [{ scale: fromScale }, { scale: toScale }];\n  if (direction === 'exit') {\n    keyframes.reverse();\n  }\n  return {\n    keyframes,\n    duration,\n    easing,\n  };\n};\n"],"names":["motionTokens","scaleAtom","direction","duration","easing","curveLinear","fromScale","toScale","keyframes","scale","reverse"],"mappings":"AAAA,SAAwCA,YAAY,QAAQ,yBAAyB;AAUrF;;;;;;;;CAQC,GACD,OAAO,MAAMC,YAAY,CAAC,EACxBC,SAAS,EACTC,QAAQ,EACRC,SAASJ,aAAaK,WAAW,EACjCC,YAAY,GAAG,EACfC,UAAU,CAAC,EACK;IAChB,MAAMC,YAAY;QAAC;YAAEC,OAAOH;QAAU;QAAG;YAAEG,OAAOF;QAAQ;KAAE;IAC5D,IAAIL,cAAc,QAAQ;QACxBM,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAL;QACAC;IACF;AACF,EAAE"}
+{"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  fromScale?: number;\n  toScale?: 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 fromScale - The starting scale value. Defaults to 0.9.\n * @param toScale - The ending scale value. Defaults to 1.\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  fromScale = 0.9,\n  toScale = 1,\n}: ScaleAtomParams): AtomMotion => {\n  const keyframes = [{ scale: fromScale }, { scale: toScale }];\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","fromScale","toScale","keyframes","scale","reverse"],"mappings":"AAAA,SAAqBA,YAAY,QAAQ,yBAAyB;AAQlE;;;;;;;;CAQC,GACD,OAAO,MAAMC,YAAY,CAAC,EACxBC,SAAS,EACTC,QAAQ,EACRC,SAASJ,aAAaK,WAAW,EACjCC,QAAQ,CAAC,EACTC,YAAY,GAAG,EACfC,UAAU,CAAC,EACK;IAChB,MAAMC,YAAY;QAAC;YAAEC,OAAOH;QAAU;QAAG;YAAEG,OAAOF;QAAQ;KAAE;IAC5D,IAAIN,cAAc,QAAQ;QACxBO,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAN;QACAC;QACAE;IACF;AACF,EAAE"}

package/lib/atoms/slide-atom.js

@@ -7,7 +7,7 @@ import { motionTokens } from '@fluentui/react-motion';
  * @param fromX - The starting X translate value with units (e.g., '0px', '100%'). Defaults to '0px'.
  * @param fromY - The starting Y translate value with units (e.g., '-20px', '100%'). Defaults to '0px'.
  * @returns A motion atom object with translate keyframes and the supplied duration and easing.
- */ export const slideAtom = ({ direction, duration, easing = motionTokens.curveLinear, fromX = '0px', fromY = '20px' })=>{
+ */ export const slideAtom = ({ direction, duration, easing = motionTokens.curveLinear, delay = 0, fromX = '0px', fromY = '20px' })=>{
     const keyframes = [
         {
             translate: `${fromX} ${fromY}`
@@ -22,6 +22,7 @@ import { motionTokens } from '@fluentui/react-motion';
     return {
         keyframes,
         duration,
-        easing
+        easing,
+        delay
     };
 };

package/lib/atoms/slide-atom.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/atoms/slide-atom.ts"],"sourcesContent":["import { AtomMotion, PresenceDirection, motionTokens } from '@fluentui/react-motion';\n\ninterface SlideAtomParams {\n  direction: PresenceDirection;\n  duration: number;\n  easing?: string;\n  fromX?: string;\n  fromY?: 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 fromX - The starting X translate value with units (e.g., '0px', '100%'). Defaults to '0px'.\n * @param fromY - The starting Y translate value with units (e.g., '-20px', '100%'). Defaults to '0px'.\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  fromX = '0px',\n  fromY = '20px',\n}: SlideAtomParams): AtomMotion => {\n  const keyframes = [{ translate: `${fromX} ${fromY}` }, { translate: '0px 0px' }];\n  if (direction === 'exit') {\n    keyframes.reverse();\n  }\n  return {\n    keyframes,\n    duration,\n    easing,\n  };\n};\n"],"names":["motionTokens","slideAtom","direction","duration","easing","curveLinear","fromX","fromY","keyframes","translate","reverse"],"mappings":"AAAA,SAAwCA,YAAY,QAAQ,yBAAyB;AAUrF;;;;;;;;CAQC,GACD,OAAO,MAAMC,YAAY,CAAC,EACxBC,SAAS,EACTC,QAAQ,EACRC,SAASJ,aAAaK,WAAW,EACjCC,QAAQ,KAAK,EACbC,QAAQ,MAAM,EACE;IAChB,MAAMC,YAAY;QAAC;YAAEC,WAAW,GAAGH,MAAM,CAAC,EAAEC,OAAO;QAAC;QAAG;YAAEE,WAAW;QAAU;KAAE;IAChF,IAAIP,cAAc,QAAQ;QACxBM,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAL;QACAC;IACF;AACF,EAAE"}
+{"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  fromX?: string;\n  fromY?: 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 fromX - The starting X translate value with units (e.g., '0px', '100%'). Defaults to '0px'.\n * @param fromY - The starting Y translate value with units (e.g., '-20px', '100%'). Defaults to '0px'.\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  fromX = '0px',\n  fromY = '20px',\n}: SlideAtomParams): AtomMotion => {\n  const keyframes = [{ translate: `${fromX} ${fromY}` }, { translate: '0px 0px' }];\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","fromX","fromY","keyframes","translate","reverse"],"mappings":"AAAA,SAAqBA,YAAY,QAAQ,yBAAyB;AAQlE;;;;;;;;CAQC,GACD,OAAO,MAAMC,YAAY,CAAC,EACxBC,SAAS,EACTC,QAAQ,EACRC,SAASJ,aAAaK,WAAW,EACjCC,QAAQ,CAAC,EACTC,QAAQ,KAAK,EACbC,QAAQ,MAAM,EACE;IAChB,MAAMC,YAAY;QAAC;YAAEC,WAAW,GAAGH,MAAM,CAAC,EAAEC,OAAO;QAAC;QAAG;YAAEE,WAAW;QAAU;KAAE;IAChF,IAAIR,cAAc,QAAQ;QACxBO,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAN;QACAC;QACAE;IACF;AACF,EAAE"}

package/lib/components/Blur/Blur.js

@@ -4,18 +4,21 @@ import { blurAtom } from '../../atoms/blur-atom';
 /**
  * Define a presence motion for blur in/out
  *
- * @param fromRadius - The radius of pixels to blend into the blur. A length string, defaulting to '10px'.
  * @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 exitDuration - Time (ms) for the exit transition (blur-out). Defaults to the enter duration.
+ * @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 fromRadius - The blur radius with units to animate from. Defaults to `'10px'`.
  * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.
- */ const blurPresenceFn = ({ fromRadius = '10px', duration = motionTokens.durationSlow, easing = motionTokens.curveDecelerateMin, exitDuration = duration, exitEasing = motionTokens.curveAccelerateMin, animateOpacity = true })=>{
+ */ const blurPresenceFn = ({ duration = motionTokens.durationSlow, easing = motionTokens.curveDecelerateMin, delay = 0, exitDuration = duration, exitEasing = motionTokens.curveAccelerateMin, exitDelay = delay, fromRadius = '10px', animateOpacity = true })=>{
     const enterAtoms = [
         blurAtom({
             direction: 'enter',
             duration,
             easing,
+            delay,
             fromRadius
         })
     ];
@@ -24,6 +27,7 @@ import { blurAtom } from '../../atoms/blur-atom';
             direction: 'exit',
             duration: exitDuration,
             easing: exitEasing,
+            delay: exitDelay,
             fromRadius
         })
     ];
@@ -32,12 +36,14 @@ import { blurAtom } from '../../atoms/blur-atom';
         enterAtoms.push(fadeAtom({
             direction: 'enter',
             duration,
-            easing
+            easing,
+            delay
         }));
         exitAtoms.push(fadeAtom({
             direction: 'exit',
             duration: exitDuration,
-            easing: exitEasing
+            easing: exitEasing,
+            delay: exitDelay
         }));
     }
     return {

package/lib/components/Blur/Blur.js.map

@@ -1 +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 fromRadius - The radius of pixels to blend into the blur. A length string, defaulting to '10px'.\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 exitDuration - Time (ms) for the exit transition (blur-out). Defaults to the enter duration.\n * @param exitEasing - Easing curve for the exit transition (blur-out). Defaults to the `curveAccelerateMin` value.\n * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.\n */\nconst blurPresenceFn: PresenceMotionFn<BlurParams> = ({\n  fromRadius = '10px',\n  duration = motionTokens.durationSlow,\n  easing = motionTokens.curveDecelerateMin,\n  exitDuration = duration,\n  exitEasing = motionTokens.curveAccelerateMin,\n  animateOpacity = true,\n}) => {\n  const enterAtoms = [blurAtom({ direction: 'enter', duration, easing, fromRadius })];\n  const exitAtoms = [\n    blurAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      fromRadius,\n    }),\n  ];\n\n  // Only add fade atoms if animateOpacity is true.\n  if (animateOpacity) {\n    enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing }));\n    exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing }));\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","fromRadius","duration","durationSlow","easing","curveDecelerateMin","exitDuration","exitEasing","curveAccelerateMin","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;;;;;;;;;CASC,GACD,MAAMC,iBAA+C,CAAC,EACpDC,aAAa,MAAM,EACnBC,WAAWN,aAAaO,YAAY,EACpCC,SAASR,aAAaS,kBAAkB,EACxCC,eAAeJ,QAAQ,EACvBK,aAAaX,aAAaY,kBAAkB,EAC5CC,iBAAiB,IAAI,EACtB;IACC,MAAMC,aAAa;QAACX,SAAS;YAAEY,WAAW;YAAST;YAAUE;YAAQH;QAAW;KAAG;IACnF,MAAMW,YAAY;QAChBb,SAAS;YACPY,WAAW;YACXT,UAAUI;YACVF,QAAQG;YACRN;QACF;KACD;IAED,iDAAiD;IACjD,IAAIQ,gBAAgB;QAClBC,WAAWG,IAAI,CAACf,SAAS;YAAEa,WAAW;YAAST;YAAUE;QAAO;QAChEQ,UAAUC,IAAI,CAACf,SAAS;YAAEa,WAAW;YAAQT,UAAUI;YAAcF,QAAQG;QAAW;IAC1F;IAEA,OAAO;QACLO,OAAOJ;QACPK,MAAMH;IACR;AACF;AAEA,4EAA4E,GAC5E,OAAO,MAAMI,OAAOnB,wBAAwBG,gBAAgB"}
+{"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 fromRadius - The blur radius with units to animate from. Defaults to `'10px'`.\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  fromRadius = '10px',\n  animateOpacity = true,\n}) => {\n  const enterAtoms = [blurAtom({ direction: 'enter', duration, easing, delay, fromRadius })];\n  const exitAtoms = [\n    blurAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      delay: exitDelay,\n      fromRadius,\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","fromRadius","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;;;;;;;;;;;CAWC,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,aAAa,MAAM,EACnBC,iBAAiB,IAAI,EACtB;IACC,MAAMC,aAAa;QAACb,SAAS;YAAEc,WAAW;YAASZ;YAAUE;YAAQE;YAAOK;QAAW;KAAG;IAC1F,MAAMI,YAAY;QAChBf,SAAS;YACPc,WAAW;YACXZ,UAAUK;YACVH,QAAQI;YACRF,OAAOI;YACPC;QACF;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWG,IAAI,CAACjB,SAAS;YAAEe,WAAW;YAASZ;YAAUE;YAAQE;QAAM;QACvES,UAAUC,IAAI,CAACjB,SAAS;YAAEe,WAAW;YAAQZ,UAAUK;YAAcH,QAAQI;YAAYF,OAAOI;QAAU;IAC5G;IAEA,OAAO;QACLO,OAAOJ;QACPK,MAAMH;IACR;AACF;AAEA,4EAA4E,GAC5E,OAAO,MAAMI,OAAOrB,wBAAwBG,gBAAgB"}

package/lib/components/Blur/blur-types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Blur/blur-types.ts"],"sourcesContent":["import type { PresenceDuration, PresenceEasing, AnimateOpacity } from '../../types';\n\nexport type BlurParams = PresenceDuration &\n  PresenceEasing &\n  AnimateOpacity & {\n    /** The radius of pixels to blend into the blur. A length string, defaulting to '20px'. */\n    fromRadius?: string;\n  };\n"],"names":[],"mappings":"AAEA,WAKI"}
+{"version":3,"sources":["../src/components/Blur/blur-types.ts"],"sourcesContent":["import type { BasePresenceParams, AnimateOpacity } from '../../types';\n\nexport type BlurParams = BasePresenceParams &\n  AnimateOpacity & {\n    /** The radius of pixels to blend into the blur. A length string, defaulting to '20px'. */\n    fromRadius?: string;\n  };\n"],"names":[],"mappings":"AAEA,WAII"}

package/lib/components/Collapse/collapse-types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Collapse/collapse-types.ts"],"sourcesContent":["import type { PresenceDuration, PresenceEasing, AnimateOpacity } from '../../types';\n\nexport type CollapseOrientation = 'horizontal' | 'vertical';\n\n/** Common properties shared by all collapse components */\ntype CollapseBaseParams = PresenceEasing &\n  AnimateOpacity & {\n    /** The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height. */\n    orientation?: CollapseOrientation;\n  };\n\nexport type CollapseParams = CollapseBaseParams & PresenceDuration;\n\nexport type CollapseDelayedParams = CollapseBaseParams & {\n  /** Time (ms) for the size expand. Defaults to the `durationNormal` value (200 ms). */\n  sizeDuration?: number;\n\n  /** Time (ms) for the fade-in. Defaults to the `sizeDuration` param, to sync fade-in with expand. */\n  opacityDuration?: number;\n\n  /** Time (ms) for the size collapse. Defaults to the `sizeDuration` param, for temporal symmetry. */\n  exitSizeDuration?: number;\n\n  /** Time (ms) for the fade-out. Defaults to the `exitSizeDuration` param, to sync the fade-out with the collapse. */\n  exitOpacityDuration?: number;\n\n  /** Time (ms) between the size expand start and the fade-in start. Defaults to `0`. */\n  delay?: number;\n\n  /** Time (ms) between the fade-out start and the size collapse start. Defaults to `0`. */\n  exitDelay?: number;\n};\n"],"names":[],"mappings":"AAaA,WAkBE"}
+{"version":3,"sources":["../src/components/Collapse/collapse-types.ts"],"sourcesContent":["import type { BasePresenceParams, PresenceEasing, PresenceDelay, AnimateOpacity } from '../../types';\n\nexport type CollapseOrientation = 'horizontal' | 'vertical';\n\n/** Common properties shared by all collapse components */\ntype CollapseBaseParams = PresenceEasing &\n  PresenceDelay &\n  AnimateOpacity & {\n    /** The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height. */\n    orientation?: CollapseOrientation;\n  };\n\nexport type CollapseParams = BasePresenceParams &\n  AnimateOpacity & {\n    /** The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height. */\n    orientation?: CollapseOrientation;\n  };\n\nexport type CollapseDelayedParams = CollapseBaseParams & {\n  /** Time (ms) for the size expand. Defaults to the `durationNormal` value (200 ms). */\n  sizeDuration?: number;\n\n  /** Time (ms) for the fade-in. Defaults to the `sizeDuration` param, to sync fade-in with expand. */\n  opacityDuration?: number;\n\n  /** Time (ms) for the size collapse. Defaults to the `sizeDuration` param, for temporal symmetry. */\n  exitSizeDuration?: number;\n\n  /** Time (ms) for the fade-out. Defaults to the `exitSizeDuration` param, to sync the fade-out with the collapse. */\n  exitOpacityDuration?: number;\n\n  /** Time (ms) between the size expand start and the fade-in start. Defaults to `0`. */\n  delay?: number;\n\n  /** Time (ms) between the fade-out start and the size collapse start. Defaults to `0`. */\n  exitDelay?: number;\n};\n"],"names":[],"mappings":"AAkBA,WAkBE"}

package/lib/components/Collapse/index.js.map

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

package/lib/components/Fade/Fade.js

@@ -5,19 +5,23 @@ import { fadeAtom } from '../../atoms/fade-atom';
  *
  * @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.
- */ export const fadePresenceFn = ({ duration = motionTokens.durationNormal, easing = motionTokens.curveEasyEase, exitDuration = duration, exitEasing = easing })=>{
+ * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.
+ */ export const fadePresenceFn = ({ duration = motionTokens.durationNormal, easing = motionTokens.curveEasyEase, delay = 0, exitDuration = duration, exitEasing = easing, exitDelay = delay })=>{
     return {
         enter: fadeAtom({
             direction: 'enter',
             duration,
-            easing
+            easing,
+            delay
         }),
         exit: fadeAtom({
             direction: 'exit',
             duration: exitDuration,
-            easing: exitEasing
+            easing: exitEasing,
+            delay: exitDelay
         })
     };
 };

package/lib/components/Fade/Fade.js.map

@@ -1 +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 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 */\nexport const fadePresenceFn: PresenceMotionFn<FadeParams> = ({\n  duration = motionTokens.durationNormal,\n  easing = motionTokens.curveEasyEase,\n  exitDuration = duration,\n  exitEasing = easing,\n}) => {\n  return {\n    enter: fadeAtom({ direction: 'enter', duration, easing }),\n    exit: fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing }),\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","exitDuration","exitEasing","enter","direction","exit","Fade","FadeSnappy","durationFast","FadeRelaxed","durationGentle"],"mappings":"AAAA,SACEA,YAAY,EACZC,uBAAuB,EAEvBC,8BAA8B,QACzB,yBAAyB;AAChC,SAASC,QAAQ,QAAQ,wBAAwB;AAGjD;;;;;;;CAOC,GACD,OAAO,MAAMC,iBAA+C,CAAC,EAC3DC,WAAWL,aAAaM,cAAc,EACtCC,SAASP,aAAaQ,aAAa,EACnCC,eAAeJ,QAAQ,EACvBK,aAAaH,MAAM,EACpB;IACC,OAAO;QACLI,OAAOR,SAAS;YAAES,WAAW;YAASP;YAAUE;QAAO;QACvDM,MAAMV,SAAS;YAAES,WAAW;YAAQP,UAAUI;YAAcF,QAAQG;QAAW;IACjF;AACF,EAAE;AAEF,4EAA4E,GAC5E,OAAO,MAAMI,OAAOb,wBAAwBG,gBAAgB;AAE5D,OAAO,MAAMW,aAAab,+BAA+BY,MAAM;IAAET,UAAUL,aAAagB,YAAY;AAAC,GAAG;AAExG,OAAO,MAAMC,cAAcf,+BAA+BY,MAAM;IAAET,UAAUL,aAAakB,cAAc;AAAC,GAAG"}
+{"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 */\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}) => {\n  return {\n    enter: fadeAtom({ direction: 'enter', duration, easing, delay }),\n    exit: fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing, delay: exitDelay }),\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","enter","direction","exit","Fade","FadeSnappy","durationFast","FadeRelaxed","durationGentle"],"mappings":"AAAA,SACEA,YAAY,EACZC,uBAAuB,EAEvBC,8BAA8B,QACzB,yBAAyB;AAChC,SAASC,QAAQ,QAAQ,wBAAwB;AAGjD;;;;;;;;;CASC,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,EAClB;IACC,OAAO;QACLI,OAAOV,SAAS;YAAEW,WAAW;YAAST;YAAUE;YAAQE;QAAM;QAC9DM,MAAMZ,SAAS;YAAEW,WAAW;YAAQT,UAAUK;YAAcH,QAAQI;YAAYF,OAAOG;QAAU;IACnG;AACF,EAAE;AAEF,4EAA4E,GAC5E,OAAO,MAAMI,OAAOf,wBAAwBG,gBAAgB;AAE5D,OAAO,MAAMa,aAAaf,+BAA+Bc,MAAM;IAAEX,UAAUL,aAAakB,YAAY;AAAC,GAAG;AAExG,OAAO,MAAMC,cAAcjB,+BAA+Bc,MAAM;IAAEX,UAAUL,aAAaoB,cAAc;AAAC,GAAG"}

package/lib/components/Fade/fade-types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Fade/fade-types.ts"],"sourcesContent":["import type { PresenceDuration, PresenceEasing } from '../../types';\n\nexport type FadeParams = PresenceDuration & PresenceEasing;\n"],"names":[],"mappings":"AAEA,WAA2D"}
+{"version":3,"sources":["../src/components/Fade/fade-types.ts"],"sourcesContent":["import type { BasePresenceParams } from '../../types';\n\nexport type FadeParams = BasePresenceParams;\n"],"names":[],"mappings":"AAEA,WAA4C"}

package/lib/components/Fade/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Fade/index.ts"],"sourcesContent":["export { Fade, FadeRelaxed, FadeSnappy } from './Fade';\n"],"names":["Fade","FadeRelaxed","FadeSnappy"],"mappings":"AAAA,SAASA,IAAI,EAAEC,WAAW,EAAEC,UAAU,QAAQ,SAAS"}
+{"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"}

package/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 'y'.
+ * @param angle - The starting rotation angle in degrees. Defaults to -90.
+ * @param exitAngle - The ending rotation angle in degrees. Defaults to the negation of `angle`.
+ * @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 = 'y', angle = -90, exitAngle = -angle, animateOpacity = true })=>{
+    const enterAtoms = [
+        rotateAtom({
+            direction: 'enter',
+            duration,
+            easing,
+            delay,
+            axis,
+            angle,
+            exitAngle
+        })
+    ];
+    const exitAtoms = [
+        rotateAtom({
+            direction: 'exit',
+            duration: exitDuration,
+            easing: exitEasing,
+            delay: exitDelay,
+            axis,
+            angle,
+            exitAngle
+        })
+    ];
+    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);

package/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 'y'.\n * @param angle - The starting rotation angle in degrees. Defaults to -90.\n * @param exitAngle - The ending rotation angle in degrees. Defaults to the negation of `angle`.\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 = 'y',\n  angle = -90,\n  exitAngle = -angle,\n  animateOpacity = true,\n}: RotateParams) => {\n  const enterAtoms: AtomMotion[] = [\n    rotateAtom({\n      direction: 'enter',\n      duration,\n      easing,\n      delay,\n      axis,\n      angle,\n      exitAngle,\n    }),\n  ];\n\n  const exitAtoms: AtomMotion[] = [\n    rotateAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      delay: exitDelay,\n      axis,\n      angle,\n      exitAngle,\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","angle","exitAngle","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,QAAQ,CAAC,EAAE,EACXC,YAAY,CAACD,KAAK,EAClBE,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"}

package/lib/components/Rotate/index.js

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

package/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"}

package/lib/components/Rotate/rotate-types.js

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

package/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 'y'.\n     */\n    axis?: Axis3D;\n\n    /**\n     * The starting rotation angle in degrees.\n     * Defaults to -90.\n     */\n    angle?: number;\n\n    /**\n     * The ending rotation angle in degrees.\n     * Defaults to the negation of `angle`.\n     */\n    exitAngle?: number;\n  };\n"],"names":[],"mappings":"AAIA,WAmBI"}

package/lib/components/Scale/Scale.js

@@ -6,17 +6,20 @@ import { scaleAtom } from '../../atoms/scale-atom';
  *
  * @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 fromScale - The scale value to animate from. Defaults to `0.9`.
  * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.
- */ const scalePresenceFn = ({ duration = motionTokens.durationGentle, easing = motionTokens.curveDecelerateMax, exitDuration = motionTokens.durationNormal, exitEasing = motionTokens.curveAccelerateMax, fromScale = 0.9, animateOpacity = true })=>{
+ */ const scalePresenceFn = ({ duration = motionTokens.durationGentle, easing = motionTokens.curveDecelerateMax, delay = 0, exitDuration = motionTokens.durationNormal, exitEasing = motionTokens.curveAccelerateMax, exitDelay = delay, fromScale = 0.9, animateOpacity = true })=>{
     const enterAtoms = [
         scaleAtom({
             direction: 'enter',
             duration,
             easing,
-            fromScale: fromScale
+            delay,
+            fromScale
         })
     ];
     const exitAtoms = [
@@ -24,6 +27,7 @@ import { scaleAtom } from '../../atoms/scale-atom';
             direction: 'exit',
             duration: exitDuration,
             easing: exitEasing,
+            delay: exitDelay,
             fromScale
         })
     ];
@@ -32,12 +36,14 @@ import { scaleAtom } from '../../atoms/scale-atom';
         enterAtoms.push(fadeAtom({
             direction: 'enter',
             duration,
-            easing
+            easing,
+            delay
         }));
         exitAtoms.push(fadeAtom({
             direction: 'exit',
             duration: exitDuration,
-            easing: exitEasing
+            easing: exitEasing,
+            delay: exitDelay
         }));
     }
     return {