@fluentui/react-motion-components-preview 0.0.0-nightly-20250716-0406.1 → 0.0.0-nightly-20250718-0405.1

package/CHANGELOG.md

@@ -1,20 +1,31 @@
 # Change Log - @fluentui/react-motion-components-preview
 
-This log was last generated on Wed, 16 Jul 2025 04:21:22 GMT and should not be manually modified.
+This log was last generated on Fri, 18 Jul 2025 04:20:34 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20250716-0406.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.0.0-nightly-20250716-0406.1)
+## [0.0.0-nightly-20250718-0405.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.0.0-nightly-20250718-0405.1)
 
-Wed, 16 Jul 2025 04:21:22 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.6.2..@fluentui/react-motion-components-preview_v0.0.0-nightly-20250716-0406.1)
+Fri, 18 Jul 2025 04:20:34 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.7.0..@fluentui/react-motion-components-preview_v0.0.0-nightly-20250718-0405.1)
 
 ### Changes
 
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/react-motion to v0.0.0-nightly-20250716-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/e9204512f2bc5c7074316bb554fea24b68719a78) by beachball)
-- Bump @fluentui/react-conformance to v0.0.0-nightly-20250716-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/e9204512f2bc5c7074316bb554fea24b68719a78) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250716-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/e9204512f2bc5c7074316bb554fea24b68719a78) by beachball)
+- Bump @fluentui/react-motion to v0.0.0-nightly-20250718-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/ab7d5b05ebda00ad8978b3c581cc55924d972bf7) by beachball)
+- Bump @fluentui/react-conformance to v0.0.0-nightly-20250718-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/ab7d5b05ebda00ad8978b3c581cc55924d972bf7) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250718-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/ab7d5b05ebda00ad8978b3c581cc55924d972bf7) by beachball)
+
+## [0.7.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.7.0)
+
+Wed, 16 Jul 2025 13:52:47 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.6.2..@fluentui/react-motion-components-preview_v0.7.0)
+
+### Minor changes
+
+- refactor(Collapse): make consistent with other motion components ([PR #34831](https://github.com/microsoft/fluentui/pull/34831) by robertpenner@microsoft.com)
+- feat(motion): add Slide presence motion component ([PR #34774](https://github.com/microsoft/fluentui/pull/34774) by robertpenner@microsoft.com)
+- refactor(motion): apply consistent patterns across Fade and Scale ([PR #34830](https://github.com/microsoft/fluentui/pull/34830) by robertpenner@microsoft.com)
 
 ## [0.6.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.6.2)
 

package/dist/index.d.ts

@@ -1,18 +1,28 @@
 import { PresenceComponent } from '@fluentui/react-motion';
 
+/**
+ * Common opacity animation parameter for motion components.
+ */
+declare type AnimateOpacity = {
+    /** Whether to animate the opacity. Defaults to `true`. */
+    animateOpacity?: boolean;
+};
+
+/** A React component that applies blur in/out transitions to its children. */
+export declare const Blur: PresenceComponent<BlurParams>;
+
+declare type BlurParams = PresenceDuration & PresenceEasing & AnimateOpacity & {
+    /** The radius of pixels to blend into the blur. A length string, defaulting to '20px'. */
+    fromRadius?: string;
+};
+
 /** A React component that applies collapse/expand transitions to its children. */
 export declare const Collapse: PresenceComponent<CollapseParams>;
 
 /** Common properties shared by all collapse components */
-declare type CollapseBaseParams = {
-    /** Easing curve for the enter transition. Defaults to the `curveEasyEaseMax` value. */
-    easing?: string;
-    /** Easing curve for the exit transition. Defaults to the `easing` param for symmetry. */
-    exitEasing?: string;
+declare type CollapseBaseParams = PresenceEasing & AnimateOpacity & {
     /** The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height. */
     orientation?: CollapseOrientation;
-    /** Whether to animate the opacity. Defaults to `true`. */
-    animateOpacity?: boolean;
 };
 
 /** A React component that applies collapse/expand transitions with delayed fade to its children. */
@@ -35,12 +45,7 @@ declare type CollapseDelayedParams = CollapseBaseParams & {
 
 declare type CollapseOrientation = 'horizontal' | 'vertical';
 
-declare type CollapseParams = CollapseBaseParams & {
-    /** Time (ms) for the enter transition (expand). Defaults to the `durationNormal` value (200 ms). */
-    duration?: number;
-    /** Time (ms) for the exit transition (collapse). Defaults to the `duration` param for symmetry. */
-    exitDuration?: number;
-};
+declare type CollapseParams = CollapseBaseParams & PresenceDuration;
 
 export declare const CollapseRelaxed: PresenceComponent<CollapseParams>;
 
@@ -49,37 +54,38 @@ export declare const CollapseSnappy: PresenceComponent<CollapseParams>;
 /** A React component that applies fade in/out transitions to its children. */
 export declare const Fade: PresenceComponent<FadeParams>;
 
-declare type FadeParams = {
-    /** Time (ms) for the enter transition (fade-in). Defaults to the `durationNormal` value (200 ms). */
-    duration?: number;
-    /** Easing curve for the enter transition (fade-in). Defaults to the `curveEasyEase` value.  */
-    easing?: string;
-    /** Time (ms) for the exit transition (fade-out). Defaults to the `duration` param for symmetry. */
-    exitDuration?: number;
-    /** Easing curve for the exit transition (fade-out). Defaults to the `easing` param for symmetry.  */
-    exitEasing?: string;
-};
+declare type FadeParams = PresenceDuration & PresenceEasing;
 
 export declare const FadeRelaxed: PresenceComponent<FadeParams>;
 
 export declare const FadeSnappy: PresenceComponent<FadeParams>;
 
-/** A React component that applies scale in/out transitions to its children. */
-export declare const Scale: PresenceComponent<ScaleParams>;
-
-declare type ScaleParams = {
-    /** Time (ms) for the enter transition (scale-in). Defaults to the `durationGentle` value (250 ms). */
+/**
+ * Common duration parameters for presence motion components.
+ */
+declare type PresenceDuration = {
+    /** Time (ms) for the enter transition. */
     duration?: number;
-    /** Easing curve for the enter transition (scale-in). Defaults to the `curveDecelerateMax` value.  */
-    easing?: string;
-    /** Time (ms) for the exit transition (scale-out). Defaults to the `durationNormal` value (200 ms). */
+    /** Time (ms) for the exit transition. Defaults to the `duration` param for symmetry. */
     exitDuration?: number;
-    /** Easing curve for the exit transition (scale-out). Defaults to the `curveAccelerateMax` value.  */
+};
+
+/**
+ * Common easing parameters for presence motion components.
+ */
+declare type PresenceEasing = {
+    /** Easing curve for the enter transition. */
+    easing?: string;
+    /** Easing curve for the exit transition. Defaults to the `easing` param for symmetry. */
     exitEasing?: string;
+};
+
+/** A React component that applies scale in/out transitions to its children. */
+export declare const Scale: PresenceComponent<ScaleParams>;
+
+declare type ScaleParams = PresenceDuration & PresenceEasing & AnimateOpacity & {
     /** The scale value to animate from. Defaults to `0.9`. */
     fromScale?: number;
-    /** Whether to animate the opacity. Defaults to `true`. */
-    animateOpacity?: boolean;
 };
 
 export declare const ScaleRelaxed: PresenceComponent<ScaleParams>;
@@ -89,21 +95,11 @@ 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 = {
-    /** Time (ms) for the enter transition (slide-in). Defaults to the `durationNormal` value (250 ms). */
-    duration?: number;
-    /** Easing curve for the enter transition (slide-in). Defaults to the `curveDecelerateMid` value.  */
-    easing?: string;
-    /** Time (ms) for the exit transition (slide-out). Defaults to the `duration` param for symmetry. */
-    exitDuration?: number;
-    /** Easing curve for the exit transition (slide-out). Defaults to the `curveAccelerateMid` value.  */
-    exitEasing?: string;
+declare type SlideParams = PresenceDuration & PresenceEasing & 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'`. */
     fromY?: string;
-    /** Whether to animate the opacity. Defaults to `true`. */
-    animateOpacity?: boolean;
 };
 
 export declare const SlideRelaxed: PresenceComponent<SlideParams>;

package/lib/atoms/blur-atom.js

@@ -0,0 +1,26 @@
+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 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' })=>{
+    const keyframes = [
+        {
+            filter: `blur(${fromRadius})`
+        },
+        {
+            filter: 'blur(0px)'
+        }
+    ];
+    if (direction === 'exit') {
+        keyframes.reverse();
+    }
+    return {
+        keyframes,
+        duration,
+        easing
+    };
+};

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

@@ -0,0 +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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","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"}

package/lib/components/Blur/Blur.js

@@ -0,0 +1,48 @@
+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 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 exitEasing - Easing curve for the exit transition (blur-out). Defaults to the `curveAccelerateMin` value.
+ * @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 enterAtoms = [
+        blurAtom({
+            direction: 'enter',
+            duration,
+            easing,
+            fromRadius
+        })
+    ];
+    const exitAtoms = [
+        blurAtom({
+            direction: 'exit',
+            duration: exitDuration,
+            easing: exitEasing,
+            fromRadius
+        })
+    ];
+    // Only add fade atoms if animateOpacity is true.
+    if (animateOpacity) {
+        enterAtoms.push(fadeAtom({
+            direction: 'enter',
+            duration,
+            easing
+        }));
+        exitAtoms.push(fadeAtom({
+            direction: 'exit',
+            duration: exitDuration,
+            easing: exitEasing
+        }));
+    }
+    return {
+        enter: enterAtoms,
+        exit: exitAtoms
+    };
+};
+/** A React component that applies blur in/out transitions to its children. */ export const Blur = createPresenceComponent(blurPresenceFn);

package/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 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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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"}

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

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

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

@@ -0,0 +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":[],"rangeMappings":"","mappings":"AAEA,WAKI"}

package/lib/components/Blur/index.js

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

package/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"],"rangeMappings":"","mappings":"AAAA,SAASA,IAAI,QAAQ,SAAS"}

package/lib/components/Collapse/Collapse.js

@@ -61,7 +61,17 @@ exitSizeDuration, exitOpacityDuration = exitSizeDuration, exitEasing, exitDelay
         exit: exitAtoms
     };
 }
-/** Define a presence motion for collapse/expand */ const collapsePresenceFn = ({ element, duration = motionTokens.durationNormal, easing = motionTokens.curveEasyEaseMax, exitDuration = duration, exitEasing = easing, animateOpacity = true, orientation = 'vertical' })=>{
+/**
+ * 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 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 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
+ */ const collapsePresenceFn = ({ element, duration = motionTokens.durationNormal, easing = motionTokens.curveEasyEaseMax, exitDuration = duration, exitEasing = easing, animateOpacity = true, orientation = 'vertical' })=>{
     return createCollapseAtoms({
         element,
         orientation,
@@ -76,7 +86,21 @@ exitSizeDuration, exitOpacityDuration = exitSizeDuration, exitEasing, exitDelay
         exitDelay: 0
     });
 };
-/** Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay */ const collapseDelayedPresenceFn = ({ element, sizeDuration = motionTokens.durationNormal, opacityDuration = motionTokens.durationSlower, easing = motionTokens.curveEasyEase, delay = motionTokens.durationNormal, exitSizeDuration = sizeDuration, exitOpacityDuration = opacityDuration, exitEasing = easing, exitDelay = motionTokens.durationSlower, animateOpacity = true, orientation = 'vertical' })=>{
+/**
+ * Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay
+ *
+ * @param element - The element to apply the collapse motion to
+ * @param sizeDuration - Time (ms) for the size expand. Defaults to the `durationNormal` value (200 ms)
+ * @param opacityDuration - Time (ms) for the fade-in. Defaults to the `durationSlower` value (400 ms)
+ * @param easing - Easing curve for the enter transition. Defaults to the `curveEasyEase` value
+ * @param delay - Time (ms) between the size expand start and the fade-in start. Defaults to the `durationNormal` value (200 ms)
+ * @param exitSizeDuration - Time (ms) for the size collapse. Defaults to the `sizeDuration` param for temporal symmetry
+ * @param exitOpacityDuration - Time (ms) for the fade-out. Defaults to the `opacityDuration` param for temporal symmetry
+ * @param exitEasing - Easing curve for the exit transition. Defaults to the `easing` param for symmetry
+ * @param exitDelay - Time (ms) between the fade-out start and the size collapse start. Defaults to the `durationSlower` value (400 ms)
+ * @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
+ */ const collapseDelayedPresenceFn = ({ element, sizeDuration = motionTokens.durationNormal, opacityDuration = motionTokens.durationSlower, easing = motionTokens.curveEasyEase, delay = motionTokens.durationNormal, exitSizeDuration = sizeDuration, exitOpacityDuration = opacityDuration, exitEasing = easing, exitDelay = motionTokens.durationSlower, animateOpacity = true, orientation = 'vertical' })=>{
     return createCollapseAtoms({
         element,
         orientation,

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Collapse/Collapse.ts"],"sourcesContent":["import {\n  motionTokens,\n  createPresenceComponent,\n  PresenceMotionFn,\n  createPresenceComponentVariant,\n  AtomMotion,\n} from '@fluentui/react-motion';\nimport type { CollapseDelayedParams, CollapseParams } from './collapse-types';\nimport { sizeEnterAtom, sizeExitAtom, whitespaceAtom } from './collapse-atoms';\nimport { fadeAtom } from '../../atoms/fade-atom';\n\n/** Internal helper to create collapse atoms with shared logic */\nfunction createCollapseAtoms({\n  element,\n  orientation,\n  animateOpacity,\n\n  // Enter params\n  sizeDuration,\n  opacityDuration = sizeDuration,\n  easing,\n  delay,\n\n  // Exit params\n  exitSizeDuration,\n  exitOpacityDuration = exitSizeDuration,\n  exitEasing,\n  exitDelay,\n}: {\n  element: HTMLElement;\n} & Required<CollapseDelayedParams>) {\n  // ----- ENTER -----\n  // The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.\n  const enterAtoms: AtomMotion[] = [\n    sizeEnterAtom({ orientation, duration: sizeDuration, easing, element }),\n    whitespaceAtom({ direction: 'enter', orientation, duration: sizeDuration, easing }),\n  ];\n  // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.\n  if (animateOpacity) {\n    enterAtoms.push({\n      ...fadeAtom({ direction: 'enter', duration: opacityDuration, easing }),\n      delay,\n      fill: 'both',\n    });\n  }\n\n  // ----- EXIT -----\n  // The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.\n  const exitAtoms: AtomMotion[] = [];\n  // Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected.\n  if (animateOpacity) {\n    exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitOpacityDuration, easing: exitEasing }));\n  }\n\n  exitAtoms.push(\n    sizeExitAtom({ orientation, duration: exitSizeDuration, easing: exitEasing, element, delay: exitDelay }),\n    whitespaceAtom({\n      direction: 'exit',\n      orientation,\n      duration: exitSizeDuration,\n      easing: exitEasing,\n      delay: exitDelay,\n    }),\n  );\n\n  return {\n    enter: enterAtoms,\n    exit: exitAtoms,\n  };\n}\n\n/** Define a presence motion for collapse/expand */\nconst collapsePresenceFn: PresenceMotionFn<CollapseParams> = ({\n  element,\n  duration = motionTokens.durationNormal,\n  easing = motionTokens.curveEasyEaseMax,\n  exitDuration = duration,\n  exitEasing = easing,\n  animateOpacity = true,\n  orientation = 'vertical',\n}) => {\n  return createCollapseAtoms({\n    element,\n    orientation,\n    animateOpacity,\n    sizeDuration: duration,\n    opacityDuration: duration,\n    easing,\n    exitSizeDuration: exitDuration,\n    exitOpacityDuration: exitDuration,\n    exitEasing,\n    delay: 0,\n    exitDelay: 0,\n  });\n};\n\n/** Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay */\nconst collapseDelayedPresenceFn: PresenceMotionFn<CollapseDelayedParams> = ({\n  element,\n  sizeDuration = motionTokens.durationNormal,\n  opacityDuration = motionTokens.durationSlower,\n  easing = motionTokens.curveEasyEase,\n  delay = motionTokens.durationNormal,\n  exitSizeDuration = sizeDuration,\n  exitOpacityDuration = opacityDuration,\n  exitEasing = easing,\n  exitDelay = motionTokens.durationSlower,\n  animateOpacity = true,\n  orientation = 'vertical',\n}) => {\n  return createCollapseAtoms({\n    element,\n    orientation,\n    animateOpacity,\n    sizeDuration,\n    opacityDuration,\n    easing,\n    delay,\n    exitSizeDuration,\n    exitOpacityDuration,\n    exitEasing,\n    exitDelay,\n  });\n};\n\n/** A React component that applies collapse/expand transitions to its children. */\nexport const Collapse = createPresenceComponent(collapsePresenceFn);\n\nexport const CollapseSnappy = createPresenceComponentVariant(Collapse, {\n  duration: motionTokens.durationFast,\n});\n\nexport const CollapseRelaxed = createPresenceComponentVariant(Collapse, {\n  duration: motionTokens.durationSlower,\n});\n\n/** A React component that applies collapse/expand transitions with delayed fade to its children. */\nexport const CollapseDelayed = createPresenceComponent(collapseDelayedPresenceFn);\n"],"names":["motionTokens","createPresenceComponent","createPresenceComponentVariant","sizeEnterAtom","sizeExitAtom","whitespaceAtom","fadeAtom","createCollapseAtoms","element","orientation","animateOpacity","sizeDuration","opacityDuration","easing","delay","exitSizeDuration","exitOpacityDuration","exitEasing","exitDelay","enterAtoms","duration","direction","push","fill","exitAtoms","enter","exit","collapsePresenceFn","durationNormal","curveEasyEaseMax","exitDuration","collapseDelayedPresenceFn","durationSlower","curveEasyEase","Collapse","CollapseSnappy","durationFast","CollapseRelaxed","CollapseDelayed"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,YAAY,EACZC,uBAAuB,EAEvBC,8BAA8B,QAEzB,yBAAyB;AAEhC,SAASC,aAAa,EAAEC,YAAY,EAAEC,cAAc,QAAQ,mBAAmB;AAC/E,SAASC,QAAQ,QAAQ,wBAAwB;AAEjD,+DAA+D,GAC/D,SAASC,oBAAoB,EAC3BC,OAAO,EACPC,WAAW,EACXC,cAAc,EAEd,eAAe;AACfC,YAAY,EACZC,kBAAkBD,YAAY,EAC9BE,MAAM,EACNC,KAAK,EAEL,cAAc;AACdC,gBAAgB,EAChBC,sBAAsBD,gBAAgB,EACtCE,UAAU,EACVC,SAAS,EAGwB;IACjC,oBAAoB;IACpB,0FAA0F;IAC1F,MAAMC,aAA2B;QAC/BhB,cAAc;YAAEM;YAAaW,UAAUT;YAAcE;YAAQL;QAAQ;QACrEH,eAAe;YAAEgB,WAAW;YAASZ;YAAaW,UAAUT;YAAcE;QAAO;KAClF;IACD,+EAA+E;IAC/E,IAAIH,gBAAgB;QAClBS,WAAWG,IAAI,CAAC;YACd,GAAGhB,SAAS;gBAAEe,WAAW;gBAASD,UAAUR;gBAAiBC;YAAO,EAAE;YACtEC;YACAS,MAAM;QACR;IACF;IAEA,mBAAmB;IACnB,yFAAyF;IACzF,MAAMC,YAA0B,EAAE;IAClC,gFAAgF;IAChF,IAAId,gBAAgB;QAClBc,UAAUF,IAAI,CAAChB,SAAS;YAAEe,WAAW;YAAQD,UAAUJ;YAAqBH,QAAQI;QAAW;IACjG;IAEAO,UAAUF,IAAI,CACZlB,aAAa;QAAEK;QAAaW,UAAUL;QAAkBF,QAAQI;QAAYT;QAASM,OAAOI;IAAU,IACtGb,eAAe;QACbgB,WAAW;QACXZ;QACAW,UAAUL;QACVF,QAAQI;QACRH,OAAOI;IACT;IAGF,OAAO;QACLO,OAAON;QACPO,MAAMF;IACR;AACF;AAEA,iDAAiD,GACjD,MAAMG,qBAAuD,CAAC,EAC5DnB,OAAO,EACPY,WAAWpB,aAAa4B,cAAc,EACtCf,SAASb,aAAa6B,gBAAgB,EACtCC,eAAeV,QAAQ,EACvBH,aAAaJ,MAAM,EACnBH,iBAAiB,IAAI,EACrBD,cAAc,UAAU,EACzB;IACC,OAAOF,oBAAoB;QACzBC;QACAC;QACAC;QACAC,cAAcS;QACdR,iBAAiBQ;QACjBP;QACAE,kBAAkBe;QAClBd,qBAAqBc;QACrBb;QACAH,OAAO;QACPI,WAAW;IACb;AACF;AAEA,gHAAgH,GAChH,MAAMa,4BAAqE,CAAC,EAC1EvB,OAAO,EACPG,eAAeX,aAAa4B,cAAc,EAC1ChB,kBAAkBZ,aAAagC,cAAc,EAC7CnB,SAASb,aAAaiC,aAAa,EACnCnB,QAAQd,aAAa4B,cAAc,EACnCb,mBAAmBJ,YAAY,EAC/BK,sBAAsBJ,eAAe,EACrCK,aAAaJ,MAAM,EACnBK,YAAYlB,aAAagC,cAAc,EACvCtB,iBAAiB,IAAI,EACrBD,cAAc,UAAU,EACzB;IACC,OAAOF,oBAAoB;QACzBC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;AACF;AAEA,gFAAgF,GAChF,OAAO,MAAMgB,WAAWjC,wBAAwB0B,oBAAoB;AAEpE,OAAO,MAAMQ,iBAAiBjC,+BAA+BgC,UAAU;IACrEd,UAAUpB,aAAaoC,YAAY;AACrC,GAAG;AAEH,OAAO,MAAMC,kBAAkBnC,+BAA+BgC,UAAU;IACtEd,UAAUpB,aAAagC,cAAc;AACvC,GAAG;AAEH,kGAAkG,GAClG,OAAO,MAAMM,kBAAkBrC,wBAAwB8B,2BAA2B"}
+{"version":3,"sources":["../src/components/Collapse/Collapse.ts"],"sourcesContent":["import {\n  motionTokens,\n  createPresenceComponent,\n  PresenceMotionFn,\n  createPresenceComponentVariant,\n  AtomMotion,\n} from '@fluentui/react-motion';\nimport type { CollapseDelayedParams, CollapseParams } from './collapse-types';\nimport { sizeEnterAtom, sizeExitAtom, whitespaceAtom } from './collapse-atoms';\nimport { fadeAtom } from '../../atoms/fade-atom';\n\n/** Internal helper to create collapse atoms with shared logic */\nfunction createCollapseAtoms({\n  element,\n  orientation,\n  animateOpacity,\n\n  // Enter params\n  sizeDuration,\n  opacityDuration = sizeDuration,\n  easing,\n  delay,\n\n  // Exit params\n  exitSizeDuration,\n  exitOpacityDuration = exitSizeDuration,\n  exitEasing,\n  exitDelay,\n}: {\n  element: HTMLElement;\n} & Required<CollapseDelayedParams>) {\n  // ----- ENTER -----\n  // The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.\n  const enterAtoms: AtomMotion[] = [\n    sizeEnterAtom({ orientation, duration: sizeDuration, easing, element }),\n    whitespaceAtom({ direction: 'enter', orientation, duration: sizeDuration, easing }),\n  ];\n  // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.\n  if (animateOpacity) {\n    enterAtoms.push({\n      ...fadeAtom({ direction: 'enter', duration: opacityDuration, easing }),\n      delay,\n      fill: 'both',\n    });\n  }\n\n  // ----- EXIT -----\n  // The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.\n  const exitAtoms: AtomMotion[] = [];\n  // Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected.\n  if (animateOpacity) {\n    exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitOpacityDuration, easing: exitEasing }));\n  }\n\n  exitAtoms.push(\n    sizeExitAtom({ orientation, duration: exitSizeDuration, easing: exitEasing, element, delay: exitDelay }),\n    whitespaceAtom({\n      direction: 'exit',\n      orientation,\n      duration: exitSizeDuration,\n      easing: exitEasing,\n      delay: exitDelay,\n    }),\n  );\n\n  return {\n    enter: enterAtoms,\n    exit: exitAtoms,\n  };\n}\n\n/**\n * Define a presence motion for collapse/expand\n *\n * @param element - The element to apply the collapse motion to\n * @param duration - Time (ms) for the enter transition (expand). Defaults to the `durationNormal` value (200 ms)\n * @param easing - Easing curve for the enter transition. Defaults to the `curveEasyEaseMax` value\n * @param exitDuration - Time (ms) for the exit transition (collapse). Defaults to the `duration` param for symmetry\n * @param exitEasing - Easing curve for the exit transition. Defaults to the `easing` param for symmetry\n * @param animateOpacity - Whether to animate the opacity. Defaults to `true`\n * @param orientation - The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height\n */\nconst collapsePresenceFn: PresenceMotionFn<CollapseParams> = ({\n  element,\n  duration = motionTokens.durationNormal,\n  easing = motionTokens.curveEasyEaseMax,\n  exitDuration = duration,\n  exitEasing = easing,\n  animateOpacity = true,\n  orientation = 'vertical',\n}) => {\n  return createCollapseAtoms({\n    element,\n    orientation,\n    animateOpacity,\n    sizeDuration: duration,\n    opacityDuration: duration,\n    easing,\n    exitSizeDuration: exitDuration,\n    exitOpacityDuration: exitDuration,\n    exitEasing,\n    delay: 0,\n    exitDelay: 0,\n  });\n};\n\n/**\n * Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay\n *\n * @param element - The element to apply the collapse motion to\n * @param sizeDuration - Time (ms) for the size expand. Defaults to the `durationNormal` value (200 ms)\n * @param opacityDuration - Time (ms) for the fade-in. Defaults to the `durationSlower` value (400 ms)\n * @param easing - Easing curve for the enter transition. Defaults to the `curveEasyEase` value\n * @param delay - Time (ms) between the size expand start and the fade-in start. Defaults to the `durationNormal` value (200 ms)\n * @param exitSizeDuration - Time (ms) for the size collapse. Defaults to the `sizeDuration` param for temporal symmetry\n * @param exitOpacityDuration - Time (ms) for the fade-out. Defaults to the `opacityDuration` param for temporal symmetry\n * @param exitEasing - Easing curve for the exit transition. Defaults to the `easing` param for symmetry\n * @param exitDelay - Time (ms) between the fade-out start and the size collapse start. Defaults to the `durationSlower` value (400 ms)\n * @param animateOpacity - Whether to animate the opacity. Defaults to `true`\n * @param orientation - The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height\n */\nconst collapseDelayedPresenceFn: PresenceMotionFn<CollapseDelayedParams> = ({\n  element,\n  sizeDuration = motionTokens.durationNormal,\n  opacityDuration = motionTokens.durationSlower,\n  easing = motionTokens.curveEasyEase,\n  delay = motionTokens.durationNormal,\n  exitSizeDuration = sizeDuration,\n  exitOpacityDuration = opacityDuration,\n  exitEasing = easing,\n  exitDelay = motionTokens.durationSlower,\n  animateOpacity = true,\n  orientation = 'vertical',\n}) => {\n  return createCollapseAtoms({\n    element,\n    orientation,\n    animateOpacity,\n    sizeDuration,\n    opacityDuration,\n    easing,\n    delay,\n    exitSizeDuration,\n    exitOpacityDuration,\n    exitEasing,\n    exitDelay,\n  });\n};\n\n/** A React component that applies collapse/expand transitions to its children. */\nexport const Collapse = createPresenceComponent(collapsePresenceFn);\n\nexport const CollapseSnappy = createPresenceComponentVariant(Collapse, {\n  duration: motionTokens.durationFast,\n});\n\nexport const CollapseRelaxed = createPresenceComponentVariant(Collapse, {\n  duration: motionTokens.durationSlower,\n});\n\n/** A React component that applies collapse/expand transitions with delayed fade to its children. */\nexport const CollapseDelayed = createPresenceComponent(collapseDelayedPresenceFn);\n"],"names":["motionTokens","createPresenceComponent","createPresenceComponentVariant","sizeEnterAtom","sizeExitAtom","whitespaceAtom","fadeAtom","createCollapseAtoms","element","orientation","animateOpacity","sizeDuration","opacityDuration","easing","delay","exitSizeDuration","exitOpacityDuration","exitEasing","exitDelay","enterAtoms","duration","direction","push","fill","exitAtoms","enter","exit","collapsePresenceFn","durationNormal","curveEasyEaseMax","exitDuration","collapseDelayedPresenceFn","durationSlower","curveEasyEase","Collapse","CollapseSnappy","durationFast","CollapseRelaxed","CollapseDelayed"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,YAAY,EACZC,uBAAuB,EAEvBC,8BAA8B,QAEzB,yBAAyB;AAEhC,SAASC,aAAa,EAAEC,YAAY,EAAEC,cAAc,QAAQ,mBAAmB;AAC/E,SAASC,QAAQ,QAAQ,wBAAwB;AAEjD,+DAA+D,GAC/D,SAASC,oBAAoB,EAC3BC,OAAO,EACPC,WAAW,EACXC,cAAc,EAEd,eAAe;AACfC,YAAY,EACZC,kBAAkBD,YAAY,EAC9BE,MAAM,EACNC,KAAK,EAEL,cAAc;AACdC,gBAAgB,EAChBC,sBAAsBD,gBAAgB,EACtCE,UAAU,EACVC,SAAS,EAGwB;IACjC,oBAAoB;IACpB,0FAA0F;IAC1F,MAAMC,aAA2B;QAC/BhB,cAAc;YAAEM;YAAaW,UAAUT;YAAcE;YAAQL;QAAQ;QACrEH,eAAe;YAAEgB,WAAW;YAASZ;YAAaW,UAAUT;YAAcE;QAAO;KAClF;IACD,+EAA+E;IAC/E,IAAIH,gBAAgB;QAClBS,WAAWG,IAAI,CAAC;YACd,GAAGhB,SAAS;gBAAEe,WAAW;gBAASD,UAAUR;gBAAiBC;YAAO,EAAE;YACtEC;YACAS,MAAM;QACR;IACF;IAEA,mBAAmB;IACnB,yFAAyF;IACzF,MAAMC,YAA0B,EAAE;IAClC,gFAAgF;IAChF,IAAId,gBAAgB;QAClBc,UAAUF,IAAI,CAAChB,SAAS;YAAEe,WAAW;YAAQD,UAAUJ;YAAqBH,QAAQI;QAAW;IACjG;IAEAO,UAAUF,IAAI,CACZlB,aAAa;QAAEK;QAAaW,UAAUL;QAAkBF,QAAQI;QAAYT;QAASM,OAAOI;IAAU,IACtGb,eAAe;QACbgB,WAAW;QACXZ;QACAW,UAAUL;QACVF,QAAQI;QACRH,OAAOI;IACT;IAGF,OAAO;QACLO,OAAON;QACPO,MAAMF;IACR;AACF;AAEA;;;;;;;;;;CAUC,GACD,MAAMG,qBAAuD,CAAC,EAC5DnB,OAAO,EACPY,WAAWpB,aAAa4B,cAAc,EACtCf,SAASb,aAAa6B,gBAAgB,EACtCC,eAAeV,QAAQ,EACvBH,aAAaJ,MAAM,EACnBH,iBAAiB,IAAI,EACrBD,cAAc,UAAU,EACzB;IACC,OAAOF,oBAAoB;QACzBC;QACAC;QACAC;QACAC,cAAcS;QACdR,iBAAiBQ;QACjBP;QACAE,kBAAkBe;QAClBd,qBAAqBc;QACrBb;QACAH,OAAO;QACPI,WAAW;IACb;AACF;AAEA;;;;;;;;;;;;;;CAcC,GACD,MAAMa,4BAAqE,CAAC,EAC1EvB,OAAO,EACPG,eAAeX,aAAa4B,cAAc,EAC1ChB,kBAAkBZ,aAAagC,cAAc,EAC7CnB,SAASb,aAAaiC,aAAa,EACnCnB,QAAQd,aAAa4B,cAAc,EACnCb,mBAAmBJ,YAAY,EAC/BK,sBAAsBJ,eAAe,EACrCK,aAAaJ,MAAM,EACnBK,YAAYlB,aAAagC,cAAc,EACvCtB,iBAAiB,IAAI,EACrBD,cAAc,UAAU,EACzB;IACC,OAAOF,oBAAoB;QACzBC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;AACF;AAEA,gFAAgF,GAChF,OAAO,MAAMgB,WAAWjC,wBAAwB0B,oBAAoB;AAEpE,OAAO,MAAMQ,iBAAiBjC,+BAA+BgC,UAAU;IACrEd,UAAUpB,aAAaoC,YAAY;AACrC,GAAG;AAEH,OAAO,MAAMC,kBAAkBnC,+BAA+BgC,UAAU;IACtEd,UAAUpB,aAAagC,cAAc;AACvC,GAAG;AAEH,kGAAkG,GAClG,OAAO,MAAMM,kBAAkBrC,wBAAwB8B,2BAA2B"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Collapse/collapse-types.ts"],"sourcesContent":["export type CollapseOrientation = 'horizontal' | 'vertical';\n\n/** Common properties shared by all collapse components */\ntype CollapseBaseParams = {\n  /** Easing curve for the enter transition. Defaults to the `curveEasyEaseMax` value. */\n  easing?: string;\n\n  /** Easing curve for the exit transition. Defaults to the `easing` param for symmetry. */\n  exitEasing?: string;\n\n  /** The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height. */\n  orientation?: CollapseOrientation;\n\n  /** Whether to animate the opacity. Defaults to `true`. */\n  animateOpacity?: boolean;\n};\n\nexport type CollapseParams = CollapseBaseParams & {\n  /** Time (ms) for the enter transition (expand). Defaults to the `durationNormal` value (200 ms). */\n  duration?: number;\n\n  /** Time (ms) for the exit transition (collapse). Defaults to the `duration` param for symmetry. */\n  exitDuration?: number;\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":[],"rangeMappings":"","mappings":"AAyBA,WAkBE"}
+{"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":[],"rangeMappings":"","mappings":"AAaA,WAkBE"}

package/lib/components/Fade/Fade.js

@@ -1,6 +1,13 @@
 import { motionTokens, createPresenceComponent, createPresenceComponentVariant } from '@fluentui/react-motion';
 import { fadeAtom } from '../../atoms/fade-atom';
-/** Define a presence motion for fade in/out  */ export const fadePresenceFn = ({ duration = motionTokens.durationNormal, easing = motionTokens.curveEasyEase, exitDuration = duration, exitEasing = easing })=>{
+/**
+ * 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 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 })=>{
     return {
         enter: fadeAtom({
             direction: 'enter',

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/** Define a presence motion for fade in/out  */\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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,YAAY,EACZC,uBAAuB,EAEvBC,8BAA8B,QACzB,yBAAyB;AAChC,SAASC,QAAQ,QAAQ,wBAAwB;AAGjD,8CAA8C,GAC9C,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 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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Fade/fade-types.ts"],"sourcesContent":["export type FadeParams = {\n  /** Time (ms) for the enter transition (fade-in). Defaults to the `durationNormal` value (200 ms). */\n  duration?: number;\n\n  /** Easing curve for the enter transition (fade-in). Defaults to the `curveEasyEase` value.  */\n  easing?: string;\n\n  /** Time (ms) for the exit transition (fade-out). Defaults to the `duration` param for symmetry. */\n  exitDuration?: number;\n\n  /** Easing curve for the exit transition (fade-out). Defaults to the `easing` param for symmetry.  */\n  exitEasing?: string;\n};\n"],"names":[],"rangeMappings":"","mappings":"AAAA,WAYE"}
+{"version":3,"sources":["../src/components/Fade/fade-types.ts"],"sourcesContent":["import type { PresenceDuration, PresenceEasing } from '../../types';\n\nexport type FadeParams = PresenceDuration & PresenceEasing;\n"],"names":[],"rangeMappings":"","mappings":"AAEA,WAA2D"}

package/lib/components/Scale/Scale.js

@@ -1,7 +1,16 @@
 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 */ const scalePresenceFn = ({ duration = motionTokens.durationGentle, easing = motionTokens.curveDecelerateMax, exitDuration = motionTokens.durationNormal, exitEasing = motionTokens.curveAccelerateMax, fromScale = 0.9, animateOpacity = true })=>{
+/**
+ * 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 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 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 enterAtoms = [
         scaleAtom({
             direction: 'enter',
@@ -15,7 +24,7 @@ import { scaleAtom } from '../../atoms/scale-atom';
             direction: 'exit',
             duration: exitDuration,
             easing: exitEasing,
-            fromScale: fromScale
+            fromScale
         })
     ];
     // Only add fade atoms if animateOpacity is true.

package/lib/components/Scale/Scale.js.map

@@ -1 +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/** Define a presence motion for scale in/out */\nconst scalePresenceFn: PresenceMotionFn<ScaleParams> = ({\n  duration = motionTokens.durationGentle,\n  easing = motionTokens.curveDecelerateMax,\n  exitDuration = motionTokens.durationNormal,\n  exitEasing = motionTokens.curveAccelerateMax,\n  fromScale = 0.9,\n  animateOpacity = true,\n}) => {\n  const enterAtoms = [scaleAtom({ direction: 'enter', duration, easing, fromScale: fromScale })];\n  const exitAtoms = [\n    scaleAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      fromScale: fromScale,\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 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","exitDuration","durationNormal","exitEasing","curveAccelerateMax","fromScale","animateOpacity","enterAtoms","direction","exitAtoms","push","enter","exit","Scale","ScaleSnappy","durationFast","ScaleRelaxed","durationSlow"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,YAAY,EACZC,uBAAuB,EAEvBC,8BAA8B,QACzB,yBAAyB;AAChC,SAASC,QAAQ,QAAQ,wBAAwB;AACjD,SAASC,SAAS,QAAQ,yBAAyB;AAGnD,8CAA8C,GAC9C,MAAMC,kBAAiD,CAAC,EACtDC,WAAWN,aAAaO,cAAc,EACtCC,SAASR,aAAaS,kBAAkB,EACxCC,eAAeV,aAAaW,cAAc,EAC1CC,aAAaZ,aAAaa,kBAAkB,EAC5CC,YAAY,GAAG,EACfC,iBAAiB,IAAI,EACtB;IACC,MAAMC,aAAa;QAACZ,UAAU;YAAEa,WAAW;YAASX;YAAUE;YAAQM,WAAWA;QAAU;KAAG;IAC9F,MAAMI,YAAY;QAChBd,UAAU;YACRa,WAAW;YACXX,UAAUI;YACVF,QAAQI;YACRE,WAAWA;QACb;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWG,IAAI,CAAChB,SAAS;YAAEc,WAAW;YAASX;YAAUE;QAAO;QAChEU,UAAUC,IAAI,CAAChB,SAAS;YAAEc,WAAW;YAAQX,UAAUI;YAAcF,QAAQI;QAAW;IAC1F;IAEA,OAAO;QACLQ,OAAOJ;QACPK,MAAMH;IACR;AACF;AAEA,6EAA6E,GAC7E,OAAO,MAAMI,QAAQrB,wBAAwBI,iBAAiB;AAE9D,OAAO,MAAMkB,cAAcrB,+BAA+BoB,OAAO;IAC/DhB,UAAUN,aAAaW,cAAc;IACrCD,cAAcV,aAAawB,YAAY;AACzC,GAAG;AAEH,OAAO,MAAMC,eAAevB,+BAA+BoB,OAAO;IAChEhB,UAAUN,aAAa0B,YAAY;IACnChB,cAAcV,aAAaO,cAAc;AAC3C,GAAG"}
+{"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 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 fromScale - The scale value to animate from. Defaults to `0.9`.\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  exitDuration = motionTokens.durationNormal,\n  exitEasing = motionTokens.curveAccelerateMax,\n  fromScale = 0.9,\n  animateOpacity = true,\n}) => {\n  const enterAtoms = [scaleAtom({ direction: 'enter', duration, easing, fromScale: fromScale })];\n  const exitAtoms = [\n    scaleAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      fromScale,\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 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","exitDuration","durationNormal","exitEasing","curveAccelerateMax","fromScale","animateOpacity","enterAtoms","direction","exitAtoms","push","enter","exit","Scale","ScaleSnappy","durationFast","ScaleRelaxed","durationSlow"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,YAAY,EACZC,uBAAuB,EAEvBC,8BAA8B,QACzB,yBAAyB;AAChC,SAASC,QAAQ,QAAQ,wBAAwB;AACjD,SAASC,SAAS,QAAQ,yBAAyB;AAGnD;;;;;;;;;CASC,GACD,MAAMC,kBAAiD,CAAC,EACtDC,WAAWN,aAAaO,cAAc,EACtCC,SAASR,aAAaS,kBAAkB,EACxCC,eAAeV,aAAaW,cAAc,EAC1CC,aAAaZ,aAAaa,kBAAkB,EAC5CC,YAAY,GAAG,EACfC,iBAAiB,IAAI,EACtB;IACC,MAAMC,aAAa;QAACZ,UAAU;YAAEa,WAAW;YAASX;YAAUE;YAAQM,WAAWA;QAAU;KAAG;IAC9F,MAAMI,YAAY;QAChBd,UAAU;YACRa,WAAW;YACXX,UAAUI;YACVF,QAAQI;YACRE;QACF;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWG,IAAI,CAAChB,SAAS;YAAEc,WAAW;YAASX;YAAUE;QAAO;QAChEU,UAAUC,IAAI,CAAChB,SAAS;YAAEc,WAAW;YAAQX,UAAUI;YAAcF,QAAQI;QAAW;IAC1F;IAEA,OAAO;QACLQ,OAAOJ;QACPK,MAAMH;IACR;AACF;AAEA,6EAA6E,GAC7E,OAAO,MAAMI,QAAQrB,wBAAwBI,iBAAiB;AAE9D,OAAO,MAAMkB,cAAcrB,+BAA+BoB,OAAO;IAC/DhB,UAAUN,aAAaW,cAAc;IACrCD,cAAcV,aAAawB,YAAY;AACzC,GAAG;AAEH,OAAO,MAAMC,eAAevB,+BAA+BoB,OAAO;IAChEhB,UAAUN,aAAa0B,YAAY;IACnChB,cAAcV,aAAaO,cAAc;AAC3C,GAAG"}

package/lib/components/Scale/scale-types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Scale/scale-types.ts"],"sourcesContent":["export type ScaleParams = {\n  /** Time (ms) for the enter transition (scale-in). Defaults to the `durationGentle` value (250 ms). */\n  duration?: number;\n\n  /** Easing curve for the enter transition (scale-in). Defaults to the `curveDecelerateMax` value.  */\n  easing?: string;\n\n  /** Time (ms) for the exit transition (scale-out). Defaults to the `durationNormal` value (200 ms). */\n  exitDuration?: number;\n\n  /** Easing curve for the exit transition (scale-out). Defaults to the `curveAccelerateMax` value.  */\n  exitEasing?: string;\n\n  /** The scale value to animate from. Defaults to `0.9`. */\n  fromScale?: number;\n\n  /** Whether to animate the opacity. Defaults to `true`. */\n  animateOpacity?: boolean;\n};\n"],"names":[],"rangeMappings":"","mappings":"AAAA,WAkBE"}
+{"version":3,"sources":["../src/components/Scale/scale-types.ts"],"sourcesContent":["import type { PresenceDuration, PresenceEasing, AnimateOpacity } from '../../types';\n\nexport type ScaleParams = PresenceDuration &\n  PresenceEasing &\n  AnimateOpacity & {\n    /** The scale value to animate from. Defaults to `0.9`. */\n    fromScale?: number;\n  };\n"],"names":[],"rangeMappings":"","mappings":"AAEA,WAKI"}

package/lib/components/Slide/Slide.js

@@ -1,7 +1,17 @@
 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 */ const slidePresenceFn = ({ duration = motionTokens.durationNormal, easing = motionTokens.curveDecelerateMid, exitDuration = duration, exitEasing = motionTokens.curveAccelerateMid, fromX = '0px', fromY = '20px', animateOpacity = true })=>{
+/**
+ * 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 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 fromX - The X translate value with units to animate from. Defaults to `'0px'`.
+ * @param fromY - The Y translate value with units to animate from. Defaults to `'20px'`.
+ * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.
+ */ const slidePresenceFn = ({ duration = motionTokens.durationNormal, easing = motionTokens.curveDecelerateMid, exitDuration = duration, exitEasing = motionTokens.curveAccelerateMid, fromX = '0px', fromY = '20px', animateOpacity = true })=>{
     const enterAtoms = [
         slideAtom({
             direction: 'enter',

package/lib/components/Slide/Slide.js.map

@@ -1 +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/** Define a presence motion for slide in/out */\nconst slidePresenceFn: PresenceMotionFn<SlideParams> = ({\n  duration = motionTokens.durationNormal,\n  easing = motionTokens.curveDecelerateMid,\n  exitDuration = duration,\n  exitEasing = motionTokens.curveAccelerateMid,\n  fromX = '0px',\n  fromY = '20px',\n  animateOpacity = true,\n}: SlideParams) => {\n  const enterAtoms = [slideAtom({ direction: 'enter', duration, easing, fromX, fromY })];\n  const exitAtoms = [\n    slideAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      fromX,\n      fromY,\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 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","exitDuration","exitEasing","curveAccelerateMid","fromX","fromY","animateOpacity","enterAtoms","direction","exitAtoms","push","enter","exit","Slide","SlideSnappy","curveDecelerateMax","curveAccelerateMax","SlideRelaxed","durationGentle"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,YAAY,EACZC,uBAAuB,EAEvBC,8BAA8B,QACzB,yBAAyB;AAChC,SAASC,QAAQ,QAAQ,wBAAwB;AACjD,SAASC,SAAS,QAAQ,yBAAyB;AAGnD,8CAA8C,GAC9C,MAAMC,kBAAiD,CAAC,EACtDC,WAAWN,aAAaO,cAAc,EACtCC,SAASR,aAAaS,kBAAkB,EACxCC,eAAeJ,QAAQ,EACvBK,aAAaX,aAAaY,kBAAkB,EAC5CC,QAAQ,KAAK,EACbC,QAAQ,MAAM,EACdC,iBAAiB,IAAI,EACT;IACZ,MAAMC,aAAa;QAACZ,UAAU;YAAEa,WAAW;YAASX;YAAUE;YAAQK;YAAOC;QAAM;KAAG;IACtF,MAAMI,YAAY;QAChBd,UAAU;YACRa,WAAW;YACXX,UAAUI;YACVF,QAAQG;YACRE;YACAC;QACF;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWG,IAAI,CAAChB,SAAS;YAAEc,WAAW;YAASX;YAAUE;QAAO;QAChEU,UAAUC,IAAI,CAAChB,SAAS;YAAEc,WAAW;YAAQX,UAAUI;YAAcF,QAAQG;QAAW;IAC1F;IAEA,OAAO;QACLS,OAAOJ;QACPK,MAAMH;IACR;AACF;AAEA,6EAA6E,GAC7E,OAAO,MAAMI,QAAQrB,wBAAwBI,iBAAiB;AAE9D,OAAO,MAAMkB,cAAcrB,+BAA+BoB,OAAO;IAC/Dd,QAAQR,aAAawB,kBAAkB;IACvCb,YAAYX,aAAayB,kBAAkB;AAC7C,GAAG;AAEH,OAAO,MAAMC,eAAexB,+BAA+BoB,OAAO;IAChEhB,UAAUN,aAAa2B,cAAc;AACvC,GAAG"}
+{"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 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 fromX - The X translate value with units to animate from. Defaults to `'0px'`.\n * @param fromY - The Y translate value with units to animate from. Defaults to `'20px'`.\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  exitDuration = duration,\n  exitEasing = motionTokens.curveAccelerateMid,\n  fromX = '0px',\n  fromY = '20px',\n  animateOpacity = true,\n}: SlideParams) => {\n  const enterAtoms = [slideAtom({ direction: 'enter', duration, easing, fromX, fromY })];\n  const exitAtoms = [\n    slideAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      fromX,\n      fromY,\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 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","exitDuration","exitEasing","curveAccelerateMid","fromX","fromY","animateOpacity","enterAtoms","direction","exitAtoms","push","enter","exit","Slide","SlideSnappy","curveDecelerateMax","curveAccelerateMax","SlideRelaxed","durationGentle"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,YAAY,EACZC,uBAAuB,EAEvBC,8BAA8B,QACzB,yBAAyB;AAChC,SAASC,QAAQ,QAAQ,wBAAwB;AACjD,SAASC,SAAS,QAAQ,yBAAyB;AAGnD;;;;;;;;;;CAUC,GACD,MAAMC,kBAAiD,CAAC,EACtDC,WAAWN,aAAaO,cAAc,EACtCC,SAASR,aAAaS,kBAAkB,EACxCC,eAAeJ,QAAQ,EACvBK,aAAaX,aAAaY,kBAAkB,EAC5CC,QAAQ,KAAK,EACbC,QAAQ,MAAM,EACdC,iBAAiB,IAAI,EACT;IACZ,MAAMC,aAAa;QAACZ,UAAU;YAAEa,WAAW;YAASX;YAAUE;YAAQK;YAAOC;QAAM;KAAG;IACtF,MAAMI,YAAY;QAChBd,UAAU;YACRa,WAAW;YACXX,UAAUI;YACVF,QAAQG;YACRE;YACAC;QACF;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWG,IAAI,CAAChB,SAAS;YAAEc,WAAW;YAASX;YAAUE;QAAO;QAChEU,UAAUC,IAAI,CAAChB,SAAS;YAAEc,WAAW;YAAQX,UAAUI;YAAcF,QAAQG;QAAW;IAC1F;IAEA,OAAO;QACLS,OAAOJ;QACPK,MAAMH;IACR;AACF;AAEA,6EAA6E,GAC7E,OAAO,MAAMI,QAAQrB,wBAAwBI,iBAAiB;AAE9D,OAAO,MAAMkB,cAAcrB,+BAA+BoB,OAAO;IAC/Dd,QAAQR,aAAawB,kBAAkB;IACvCb,YAAYX,aAAayB,kBAAkB;AAC7C,GAAG;AAEH,OAAO,MAAMC,eAAexB,+BAA+BoB,OAAO;IAChEhB,UAAUN,aAAa2B,cAAc;AACvC,GAAG"}

package/lib/components/Slide/slide-types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Slide/slide-types.ts"],"sourcesContent":["export type SlideParams = {\n  /** Time (ms) for the enter transition (slide-in). Defaults to the `durationNormal` value (250 ms). */\n  duration?: number;\n\n  /** Easing curve for the enter transition (slide-in). Defaults to the `curveDecelerateMid` value.  */\n  easing?: string;\n\n  /** Time (ms) for the exit transition (slide-out). Defaults to the `duration` param for symmetry. */\n  exitDuration?: number;\n\n  /** Easing curve for the exit transition (slide-out). Defaults to the `curveAccelerateMid` value.  */\n  exitEasing?: string;\n\n  /** The X translate value with units to animate from. Defaults to `'0px'`. */\n  fromX?: string;\n\n  /** The Y translate value with units to animate from. Defaults to `'20px'`. */\n  fromY?: string;\n\n  /** Whether to animate the opacity. Defaults to `true`. */\n  animateOpacity?: boolean;\n};\n"],"names":[],"rangeMappings":"","mappings":"AAAA,WAqBE"}
+{"version":3,"sources":["../src/components/Slide/slide-types.ts"],"sourcesContent":["import type { PresenceDuration, PresenceEasing, AnimateOpacity } from '../../types';\n\nexport type SlideParams = PresenceDuration &\n  PresenceEasing &\n  AnimateOpacity & {\n    /** The X translate value with units to animate from. Defaults to `'0px'`. */\n    fromX?: string;\n\n    /** The Y translate value with units to animate from. Defaults to `'20px'`. */\n    fromY?: string;\n  };\n"],"names":[],"rangeMappings":"","mappings":"AAEA,WAQI"}

package/lib/index.js

@@ -2,3 +2,4 @@ export { Collapse, CollapseSnappy, CollapseRelaxed, CollapseDelayed } from './co
 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';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Collapse, CollapseSnappy, CollapseRelaxed, CollapseDelayed } from './components/Collapse';\nexport { Fade, FadeSnappy, FadeRelaxed } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleRelaxed } from './components/Scale';\nexport { Slide, SlideSnappy, SlideRelaxed } from './components/Slide';\n"],"names":["Collapse","CollapseSnappy","CollapseRelaxed","CollapseDelayed","Fade","FadeSnappy","FadeRelaxed","Scale","ScaleSnappy","ScaleRelaxed","Slide","SlideSnappy","SlideRelaxed"],"rangeMappings":";;;","mappings":"AAAA,SAASA,QAAQ,EAAEC,cAAc,EAAEC,eAAe,EAAEC,eAAe,QAAQ,wBAAwB;AACnG,SAASC,IAAI,EAAEC,UAAU,EAAEC,WAAW,QAAQ,oBAAoB;AAClE,SAASC,KAAK,EAAEC,WAAW,EAAEC,YAAY,QAAQ,qBAAqB;AACtE,SAASC,KAAK,EAAEC,WAAW,EAAEC,YAAY,QAAQ,qBAAqB"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Collapse, CollapseSnappy, CollapseRelaxed, CollapseDelayed } from './components/Collapse';\nexport { Fade, FadeSnappy, FadeRelaxed } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleRelaxed } from './components/Scale';\nexport { Slide, SlideSnappy, SlideRelaxed } from './components/Slide';\nexport { Blur } from './components/Blur';\n"],"names":["Collapse","CollapseSnappy","CollapseRelaxed","CollapseDelayed","Fade","FadeSnappy","FadeRelaxed","Scale","ScaleSnappy","ScaleRelaxed","Slide","SlideSnappy","SlideRelaxed","Blur"],"rangeMappings":";;;;","mappings":"AAAA,SAASA,QAAQ,EAAEC,cAAc,EAAEC,eAAe,EAAEC,eAAe,QAAQ,wBAAwB;AACnG,SAASC,IAAI,EAAEC,UAAU,EAAEC,WAAW,QAAQ,oBAAoB;AAClE,SAASC,KAAK,EAAEC,WAAW,EAAEC,YAAY,QAAQ,qBAAqB;AACtE,SAASC,KAAK,EAAEC,WAAW,EAAEC,YAAY,QAAQ,qBAAqB;AACtE,SAASC,IAAI,QAAQ,oBAAoB"}

package/lib/types.js

@@ -1,11 +1,3 @@
 /**
- * This is a factory function that generates a motion function, which has variant params bound into it.
- * The generated motion function accepts other runtime params that aren't locked into the variant, but supplied at runtime.
- * This separation allows the variant to be defined once and reused with different runtime params which may be orthogonal to the variant params.
- * For example, a variant may define the duration and easing of a transition, which are fixed for all instances of the variant,
- * while the runtime params may give access to the target element, which is different for each instance.
- *
- * The generated motion function is also framework-independent, i.e. non-React.
- * It can be turned into a React component using `createPresenceComponent`.
- */ // TODO: move to @fluentui/react-motion when stable
-export { };
+ * Common opacity animation parameter for motion components.
+ */ export { };

package/lib/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/types.ts"],"sourcesContent":["import type { MotionParam, PresenceMotion, PresenceMotionFn } 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"],"names":[],"rangeMappings":";;;;;;;;;;","mappings":"AAcA;;;;;;;;;CASC,GACD,mDAAmD;AACnD,WAGmF"}
+{"version":3,"sources":["../src/types.ts"],"sourcesContent":["import type { MotionParam, PresenceMotion, PresenceMotionFn } 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 opacity animation parameter for motion components.\n */\nexport type AnimateOpacity = {\n  /** Whether to animate the opacity. Defaults to `true`. */\n  animateOpacity?: boolean;\n};\n"],"names":[],"rangeMappings":";;","mappings":"AAoDA;;CAEC,GACD,WAGE"}

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "blurAtom", {
+    enumerable: true,
+    get: function() {
+        return blurAtom;
+    }
+});
+const _reactmotion = require("@fluentui/react-motion");
+const blurAtom = ({ direction, duration, easing = _reactmotion.motionTokens.curveLinear, fromRadius = '10px' })=>{
+    const keyframes = [
+        {
+            filter: `blur(${fromRadius})`
+        },
+        {
+            filter: 'blur(0px)'
+        }
+    ];
+    if (direction === 'exit') {
+        keyframes.reverse();
+    }
+    return {
+        keyframes,
+        duration,
+        easing
+    };
+};

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

@@ -0,0 +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":["blurAtom","direction","duration","easing","motionTokens","curveLinear","fromRadius","keyframes","filter","reverse"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAiBaA;;;eAAAA;;;6BAjB+C;AAiBrD,MAAMA,WAAW,CAAC,EACvBC,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,WAAW,EACjCC,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;IACF;AACF"}

package/lib-commonjs/components/Blur/Blur.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Blur", {
+    enumerable: true,
+    get: function() {
+        return Blur;
+    }
+});
+const _reactmotion = require("@fluentui/react-motion");
+const _fadeatom = require("../../atoms/fade-atom");
+const _bluratom = require("../../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 exitEasing - Easing curve for the exit transition (blur-out). Defaults to the `curveAccelerateMin` value.
+ * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.
+ */ const blurPresenceFn = ({ fromRadius = '10px', duration = _reactmotion.motionTokens.durationSlow, easing = _reactmotion.motionTokens.curveDecelerateMin, exitDuration = duration, exitEasing = _reactmotion.motionTokens.curveAccelerateMin, animateOpacity = true })=>{
+    const enterAtoms = [
+        (0, _bluratom.blurAtom)({
+            direction: 'enter',
+            duration,
+            easing,
+            fromRadius
+        })
+    ];
+    const exitAtoms = [
+        (0, _bluratom.blurAtom)({
+            direction: 'exit',
+            duration: exitDuration,
+            easing: exitEasing,
+            fromRadius
+        })
+    ];
+    // Only add fade atoms if animateOpacity is true.
+    if (animateOpacity) {
+        enterAtoms.push((0, _fadeatom.fadeAtom)({
+            direction: 'enter',
+            duration,
+            easing
+        }));
+        exitAtoms.push((0, _fadeatom.fadeAtom)({
+            direction: 'exit',
+            duration: exitDuration,
+            easing: exitEasing
+        }));
+    }
+    return {
+        enter: enterAtoms,
+        exit: exitAtoms
+    };
+};
+const Blur = (0, _reactmotion.createPresenceComponent)(blurPresenceFn);

package/lib-commonjs/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 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":["Blur","blurPresenceFn","fromRadius","duration","motionTokens","durationSlow","easing","curveDecelerateMin","exitDuration","exitEasing","curveAccelerateMin","animateOpacity","enterAtoms","blurAtom","direction","exitAtoms","push","fadeAtom","enter","exit","createPresenceComponent"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA8CaA;;;eAAAA;;;6BA9C2D;0BAC/C;0BACA;AAGzB;;;;;;;;;CASC,GACD,MAAMC,iBAA+C,CAAC,EACpDC,aAAa,MAAM,EACnBC,WAAWC,yBAAY,CAACC,YAAY,EACpCC,SAASF,yBAAY,CAACG,kBAAkB,EACxCC,eAAeL,QAAQ,EACvBM,aAAaL,yBAAY,CAACM,kBAAkB,EAC5CC,iBAAiB,IAAI,EACtB;IACC,MAAMC,aAAa;QAACC,IAAAA,kBAAQ,EAAC;YAAEC,WAAW;YAASX;YAAUG;YAAQJ;QAAW;KAAG;IACnF,MAAMa,YAAY;QAChBF,IAAAA,kBAAQ,EAAC;YACPC,WAAW;YACXX,UAAUK;YACVF,QAAQG;YACRP;QACF;KACD;IAED,iDAAiD;IACjD,IAAIS,gBAAgB;QAClBC,WAAWI,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAASX;YAAUG;QAAO;QAChES,UAAUC,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAQX,UAAUK;YAAcF,QAAQG;QAAW;IAC1F;IAEA,OAAO;QACLS,OAAON;QACPO,MAAMJ;IACR;AACF;AAGO,MAAMf,OAAOoB,IAAAA,oCAAuB,EAACnB"}

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"rangeMappings":"","mappings":""}

package/lib-commonjs/components/Blur/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Blur", {
+    enumerable: true,
+    get: function() {
+        return _Blur.Blur;
+    }
+});
+const _Blur = require("./Blur");

package/lib-commonjs/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"],"rangeMappings":";;;;;;;;;;","mappings":";;;;+BAASA;;;eAAAA,UAAI;;;sBAAQ"}

package/lib-commonjs/components/Collapse/Collapse.js

@@ -85,7 +85,17 @@ exitSizeDuration, exitOpacityDuration = exitSizeDuration, exitEasing, exitDelay
         exit: exitAtoms
     };
 }
-/** Define a presence motion for collapse/expand */ const collapsePresenceFn = ({ element, duration = _reactmotion.motionTokens.durationNormal, easing = _reactmotion.motionTokens.curveEasyEaseMax, exitDuration = duration, exitEasing = easing, animateOpacity = true, orientation = 'vertical' })=>{
+/**
+ * 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 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 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
+ */ const collapsePresenceFn = ({ element, duration = _reactmotion.motionTokens.durationNormal, easing = _reactmotion.motionTokens.curveEasyEaseMax, exitDuration = duration, exitEasing = easing, animateOpacity = true, orientation = 'vertical' })=>{
     return createCollapseAtoms({
         element,
         orientation,
@@ -100,7 +110,21 @@ exitSizeDuration, exitOpacityDuration = exitSizeDuration, exitEasing, exitDelay
         exitDelay: 0
     });
 };
-/** Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay */ const collapseDelayedPresenceFn = ({ element, sizeDuration = _reactmotion.motionTokens.durationNormal, opacityDuration = _reactmotion.motionTokens.durationSlower, easing = _reactmotion.motionTokens.curveEasyEase, delay = _reactmotion.motionTokens.durationNormal, exitSizeDuration = sizeDuration, exitOpacityDuration = opacityDuration, exitEasing = easing, exitDelay = _reactmotion.motionTokens.durationSlower, animateOpacity = true, orientation = 'vertical' })=>{
+/**
+ * Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay
+ *
+ * @param element - The element to apply the collapse motion to
+ * @param sizeDuration - Time (ms) for the size expand. Defaults to the `durationNormal` value (200 ms)
+ * @param opacityDuration - Time (ms) for the fade-in. Defaults to the `durationSlower` value (400 ms)
+ * @param easing - Easing curve for the enter transition. Defaults to the `curveEasyEase` value
+ * @param delay - Time (ms) between the size expand start and the fade-in start. Defaults to the `durationNormal` value (200 ms)
+ * @param exitSizeDuration - Time (ms) for the size collapse. Defaults to the `sizeDuration` param for temporal symmetry
+ * @param exitOpacityDuration - Time (ms) for the fade-out. Defaults to the `opacityDuration` param for temporal symmetry
+ * @param exitEasing - Easing curve for the exit transition. Defaults to the `easing` param for symmetry
+ * @param exitDelay - Time (ms) between the fade-out start and the size collapse start. Defaults to the `durationSlower` value (400 ms)
+ * @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
+ */ const collapseDelayedPresenceFn = ({ element, sizeDuration = _reactmotion.motionTokens.durationNormal, opacityDuration = _reactmotion.motionTokens.durationSlower, easing = _reactmotion.motionTokens.curveEasyEase, delay = _reactmotion.motionTokens.durationNormal, exitSizeDuration = sizeDuration, exitOpacityDuration = opacityDuration, exitEasing = easing, exitDelay = _reactmotion.motionTokens.durationSlower, animateOpacity = true, orientation = 'vertical' })=>{
     return createCollapseAtoms({
         element,
         orientation,

package/lib-commonjs/components/Collapse/Collapse.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Collapse/Collapse.ts"],"sourcesContent":["import {\n  motionTokens,\n  createPresenceComponent,\n  PresenceMotionFn,\n  createPresenceComponentVariant,\n  AtomMotion,\n} from '@fluentui/react-motion';\nimport type { CollapseDelayedParams, CollapseParams } from './collapse-types';\nimport { sizeEnterAtom, sizeExitAtom, whitespaceAtom } from './collapse-atoms';\nimport { fadeAtom } from '../../atoms/fade-atom';\n\n/** Internal helper to create collapse atoms with shared logic */\nfunction createCollapseAtoms({\n  element,\n  orientation,\n  animateOpacity,\n\n  // Enter params\n  sizeDuration,\n  opacityDuration = sizeDuration,\n  easing,\n  delay,\n\n  // Exit params\n  exitSizeDuration,\n  exitOpacityDuration = exitSizeDuration,\n  exitEasing,\n  exitDelay,\n}: {\n  element: HTMLElement;\n} & Required<CollapseDelayedParams>) {\n  // ----- ENTER -----\n  // The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.\n  const enterAtoms: AtomMotion[] = [\n    sizeEnterAtom({ orientation, duration: sizeDuration, easing, element }),\n    whitespaceAtom({ direction: 'enter', orientation, duration: sizeDuration, easing }),\n  ];\n  // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.\n  if (animateOpacity) {\n    enterAtoms.push({\n      ...fadeAtom({ direction: 'enter', duration: opacityDuration, easing }),\n      delay,\n      fill: 'both',\n    });\n  }\n\n  // ----- EXIT -----\n  // The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.\n  const exitAtoms: AtomMotion[] = [];\n  // Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected.\n  if (animateOpacity) {\n    exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitOpacityDuration, easing: exitEasing }));\n  }\n\n  exitAtoms.push(\n    sizeExitAtom({ orientation, duration: exitSizeDuration, easing: exitEasing, element, delay: exitDelay }),\n    whitespaceAtom({\n      direction: 'exit',\n      orientation,\n      duration: exitSizeDuration,\n      easing: exitEasing,\n      delay: exitDelay,\n    }),\n  );\n\n  return {\n    enter: enterAtoms,\n    exit: exitAtoms,\n  };\n}\n\n/** Define a presence motion for collapse/expand */\nconst collapsePresenceFn: PresenceMotionFn<CollapseParams> = ({\n  element,\n  duration = motionTokens.durationNormal,\n  easing = motionTokens.curveEasyEaseMax,\n  exitDuration = duration,\n  exitEasing = easing,\n  animateOpacity = true,\n  orientation = 'vertical',\n}) => {\n  return createCollapseAtoms({\n    element,\n    orientation,\n    animateOpacity,\n    sizeDuration: duration,\n    opacityDuration: duration,\n    easing,\n    exitSizeDuration: exitDuration,\n    exitOpacityDuration: exitDuration,\n    exitEasing,\n    delay: 0,\n    exitDelay: 0,\n  });\n};\n\n/** Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay */\nconst collapseDelayedPresenceFn: PresenceMotionFn<CollapseDelayedParams> = ({\n  element,\n  sizeDuration = motionTokens.durationNormal,\n  opacityDuration = motionTokens.durationSlower,\n  easing = motionTokens.curveEasyEase,\n  delay = motionTokens.durationNormal,\n  exitSizeDuration = sizeDuration,\n  exitOpacityDuration = opacityDuration,\n  exitEasing = easing,\n  exitDelay = motionTokens.durationSlower,\n  animateOpacity = true,\n  orientation = 'vertical',\n}) => {\n  return createCollapseAtoms({\n    element,\n    orientation,\n    animateOpacity,\n    sizeDuration,\n    opacityDuration,\n    easing,\n    delay,\n    exitSizeDuration,\n    exitOpacityDuration,\n    exitEasing,\n    exitDelay,\n  });\n};\n\n/** A React component that applies collapse/expand transitions to its children. */\nexport const Collapse = createPresenceComponent(collapsePresenceFn);\n\nexport const CollapseSnappy = createPresenceComponentVariant(Collapse, {\n  duration: motionTokens.durationFast,\n});\n\nexport const CollapseRelaxed = createPresenceComponentVariant(Collapse, {\n  duration: motionTokens.durationSlower,\n});\n\n/** A React component that applies collapse/expand transitions with delayed fade to its children. */\nexport const CollapseDelayed = createPresenceComponent(collapseDelayedPresenceFn);\n"],"names":["Collapse","CollapseDelayed","CollapseRelaxed","CollapseSnappy","createCollapseAtoms","element","orientation","animateOpacity","sizeDuration","opacityDuration","easing","delay","exitSizeDuration","exitOpacityDuration","exitEasing","exitDelay","enterAtoms","sizeEnterAtom","duration","whitespaceAtom","direction","push","fadeAtom","fill","exitAtoms","sizeExitAtom","enter","exit","collapsePresenceFn","motionTokens","durationNormal","curveEasyEaseMax","exitDuration","collapseDelayedPresenceFn","durationSlower","curveEasyEase","createPresenceComponent","createPresenceComponentVariant","durationFast"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA8HaA,QAAQ;eAARA;;IAWAC,eAAe;eAAfA;;IALAC,eAAe;eAAfA;;IAJAC,cAAc;eAAdA;;;6BA1HN;+BAEqD;0BACnC;AAEzB,+DAA+D,GAC/D,SAASC,oBAAoB,EAC3BC,OAAO,EACPC,WAAW,EACXC,cAAc,EAEd,eAAe;AACfC,YAAY,EACZC,kBAAkBD,YAAY,EAC9BE,MAAM,EACNC,KAAK,EAEL,cAAc;AACdC,gBAAgB,EAChBC,sBAAsBD,gBAAgB,EACtCE,UAAU,EACVC,SAAS,EAGwB;IACjC,oBAAoB;IACpB,0FAA0F;IAC1F,MAAMC,aAA2B;QAC/BC,IAAAA,4BAAa,EAAC;YAAEX;YAAaY,UAAUV;YAAcE;YAAQL;QAAQ;QACrEc,IAAAA,6BAAc,EAAC;YAAEC,WAAW;YAASd;YAAaY,UAAUV;YAAcE;QAAO;KAClF;IACD,+EAA+E;IAC/E,IAAIH,gBAAgB;QAClBS,WAAWK,IAAI,CAAC;YACd,GAAGC,IAAAA,kBAAQ,EAAC;gBAAEF,WAAW;gBAASF,UAAUT;gBAAiBC;YAAO,EAAE;YACtEC;YACAY,MAAM;QACR;IACF;IAEA,mBAAmB;IACnB,yFAAyF;IACzF,MAAMC,YAA0B,EAAE;IAClC,gFAAgF;IAChF,IAAIjB,gBAAgB;QAClBiB,UAAUH,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEF,WAAW;YAAQF,UAAUL;YAAqBH,QAAQI;QAAW;IACjG;IAEAU,UAAUH,IAAI,CACZI,IAAAA,2BAAY,EAAC;QAAEnB;QAAaY,UAAUN;QAAkBF,QAAQI;QAAYT;QAASM,OAAOI;IAAU,IACtGI,IAAAA,6BAAc,EAAC;QACbC,WAAW;QACXd;QACAY,UAAUN;QACVF,QAAQI;QACRH,OAAOI;IACT;IAGF,OAAO;QACLW,OAAOV;QACPW,MAAMH;IACR;AACF;AAEA,iDAAiD,GACjD,MAAMI,qBAAuD,CAAC,EAC5DvB,OAAO,EACPa,WAAWW,yBAAY,CAACC,cAAc,EACtCpB,SAASmB,yBAAY,CAACE,gBAAgB,EACtCC,eAAed,QAAQ,EACvBJ,aAAaJ,MAAM,EACnBH,iBAAiB,IAAI,EACrBD,cAAc,UAAU,EACzB;IACC,OAAOF,oBAAoB;QACzBC;QACAC;QACAC;QACAC,cAAcU;QACdT,iBAAiBS;QACjBR;QACAE,kBAAkBoB;QAClBnB,qBAAqBmB;QACrBlB;QACAH,OAAO;QACPI,WAAW;IACb;AACF;AAEA,gHAAgH,GAChH,MAAMkB,4BAAqE,CAAC,EAC1E5B,OAAO,EACPG,eAAeqB,yBAAY,CAACC,cAAc,EAC1CrB,kBAAkBoB,yBAAY,CAACK,cAAc,EAC7CxB,SAASmB,yBAAY,CAACM,aAAa,EACnCxB,QAAQkB,yBAAY,CAACC,cAAc,EACnClB,mBAAmBJ,YAAY,EAC/BK,sBAAsBJ,eAAe,EACrCK,aAAaJ,MAAM,EACnBK,YAAYc,yBAAY,CAACK,cAAc,EACvC3B,iBAAiB,IAAI,EACrBD,cAAc,UAAU,EACzB;IACC,OAAOF,oBAAoB;QACzBC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;AACF;AAGO,MAAMf,WAAWoC,IAAAA,oCAAuB,EAACR;AAEzC,MAAMzB,iBAAiBkC,IAAAA,2CAA8B,EAACrC,UAAU;IACrEkB,UAAUW,yBAAY,CAACS,YAAY;AACrC;AAEO,MAAMpC,kBAAkBmC,IAAAA,2CAA8B,EAACrC,UAAU;IACtEkB,UAAUW,yBAAY,CAACK,cAAc;AACvC;AAGO,MAAMjC,kBAAkBmC,IAAAA,oCAAuB,EAACH"}
+{"version":3,"sources":["../src/components/Collapse/Collapse.ts"],"sourcesContent":["import {\n  motionTokens,\n  createPresenceComponent,\n  PresenceMotionFn,\n  createPresenceComponentVariant,\n  AtomMotion,\n} from '@fluentui/react-motion';\nimport type { CollapseDelayedParams, CollapseParams } from './collapse-types';\nimport { sizeEnterAtom, sizeExitAtom, whitespaceAtom } from './collapse-atoms';\nimport { fadeAtom } from '../../atoms/fade-atom';\n\n/** Internal helper to create collapse atoms with shared logic */\nfunction createCollapseAtoms({\n  element,\n  orientation,\n  animateOpacity,\n\n  // Enter params\n  sizeDuration,\n  opacityDuration = sizeDuration,\n  easing,\n  delay,\n\n  // Exit params\n  exitSizeDuration,\n  exitOpacityDuration = exitSizeDuration,\n  exitEasing,\n  exitDelay,\n}: {\n  element: HTMLElement;\n} & Required<CollapseDelayedParams>) {\n  // ----- ENTER -----\n  // The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.\n  const enterAtoms: AtomMotion[] = [\n    sizeEnterAtom({ orientation, duration: sizeDuration, easing, element }),\n    whitespaceAtom({ direction: 'enter', orientation, duration: sizeDuration, easing }),\n  ];\n  // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.\n  if (animateOpacity) {\n    enterAtoms.push({\n      ...fadeAtom({ direction: 'enter', duration: opacityDuration, easing }),\n      delay,\n      fill: 'both',\n    });\n  }\n\n  // ----- EXIT -----\n  // The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.\n  const exitAtoms: AtomMotion[] = [];\n  // Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected.\n  if (animateOpacity) {\n    exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitOpacityDuration, easing: exitEasing }));\n  }\n\n  exitAtoms.push(\n    sizeExitAtom({ orientation, duration: exitSizeDuration, easing: exitEasing, element, delay: exitDelay }),\n    whitespaceAtom({\n      direction: 'exit',\n      orientation,\n      duration: exitSizeDuration,\n      easing: exitEasing,\n      delay: exitDelay,\n    }),\n  );\n\n  return {\n    enter: enterAtoms,\n    exit: exitAtoms,\n  };\n}\n\n/**\n * Define a presence motion for collapse/expand\n *\n * @param element - The element to apply the collapse motion to\n * @param duration - Time (ms) for the enter transition (expand). Defaults to the `durationNormal` value (200 ms)\n * @param easing - Easing curve for the enter transition. Defaults to the `curveEasyEaseMax` value\n * @param exitDuration - Time (ms) for the exit transition (collapse). Defaults to the `duration` param for symmetry\n * @param exitEasing - Easing curve for the exit transition. Defaults to the `easing` param for symmetry\n * @param animateOpacity - Whether to animate the opacity. Defaults to `true`\n * @param orientation - The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height\n */\nconst collapsePresenceFn: PresenceMotionFn<CollapseParams> = ({\n  element,\n  duration = motionTokens.durationNormal,\n  easing = motionTokens.curveEasyEaseMax,\n  exitDuration = duration,\n  exitEasing = easing,\n  animateOpacity = true,\n  orientation = 'vertical',\n}) => {\n  return createCollapseAtoms({\n    element,\n    orientation,\n    animateOpacity,\n    sizeDuration: duration,\n    opacityDuration: duration,\n    easing,\n    exitSizeDuration: exitDuration,\n    exitOpacityDuration: exitDuration,\n    exitEasing,\n    delay: 0,\n    exitDelay: 0,\n  });\n};\n\n/**\n * Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay\n *\n * @param element - The element to apply the collapse motion to\n * @param sizeDuration - Time (ms) for the size expand. Defaults to the `durationNormal` value (200 ms)\n * @param opacityDuration - Time (ms) for the fade-in. Defaults to the `durationSlower` value (400 ms)\n * @param easing - Easing curve for the enter transition. Defaults to the `curveEasyEase` value\n * @param delay - Time (ms) between the size expand start and the fade-in start. Defaults to the `durationNormal` value (200 ms)\n * @param exitSizeDuration - Time (ms) for the size collapse. Defaults to the `sizeDuration` param for temporal symmetry\n * @param exitOpacityDuration - Time (ms) for the fade-out. Defaults to the `opacityDuration` param for temporal symmetry\n * @param exitEasing - Easing curve for the exit transition. Defaults to the `easing` param for symmetry\n * @param exitDelay - Time (ms) between the fade-out start and the size collapse start. Defaults to the `durationSlower` value (400 ms)\n * @param animateOpacity - Whether to animate the opacity. Defaults to `true`\n * @param orientation - The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height\n */\nconst collapseDelayedPresenceFn: PresenceMotionFn<CollapseDelayedParams> = ({\n  element,\n  sizeDuration = motionTokens.durationNormal,\n  opacityDuration = motionTokens.durationSlower,\n  easing = motionTokens.curveEasyEase,\n  delay = motionTokens.durationNormal,\n  exitSizeDuration = sizeDuration,\n  exitOpacityDuration = opacityDuration,\n  exitEasing = easing,\n  exitDelay = motionTokens.durationSlower,\n  animateOpacity = true,\n  orientation = 'vertical',\n}) => {\n  return createCollapseAtoms({\n    element,\n    orientation,\n    animateOpacity,\n    sizeDuration,\n    opacityDuration,\n    easing,\n    delay,\n    exitSizeDuration,\n    exitOpacityDuration,\n    exitEasing,\n    exitDelay,\n  });\n};\n\n/** A React component that applies collapse/expand transitions to its children. */\nexport const Collapse = createPresenceComponent(collapsePresenceFn);\n\nexport const CollapseSnappy = createPresenceComponentVariant(Collapse, {\n  duration: motionTokens.durationFast,\n});\n\nexport const CollapseRelaxed = createPresenceComponentVariant(Collapse, {\n  duration: motionTokens.durationSlower,\n});\n\n/** A React component that applies collapse/expand transitions with delayed fade to its children. */\nexport const CollapseDelayed = createPresenceComponent(collapseDelayedPresenceFn);\n"],"names":["Collapse","CollapseDelayed","CollapseRelaxed","CollapseSnappy","createCollapseAtoms","element","orientation","animateOpacity","sizeDuration","opacityDuration","easing","delay","exitSizeDuration","exitOpacityDuration","exitEasing","exitDelay","enterAtoms","sizeEnterAtom","duration","whitespaceAtom","direction","push","fadeAtom","fill","exitAtoms","sizeExitAtom","enter","exit","collapsePresenceFn","motionTokens","durationNormal","curveEasyEaseMax","exitDuration","collapseDelayedPresenceFn","durationSlower","curveEasyEase","createPresenceComponent","createPresenceComponentVariant","durationFast"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAsJaA,QAAQ;eAARA;;IAWAC,eAAe;eAAfA;;IALAC,eAAe;eAAfA;;IAJAC,cAAc;eAAdA;;;6BAlJN;+BAEqD;0BACnC;AAEzB,+DAA+D,GAC/D,SAASC,oBAAoB,EAC3BC,OAAO,EACPC,WAAW,EACXC,cAAc,EAEd,eAAe;AACfC,YAAY,EACZC,kBAAkBD,YAAY,EAC9BE,MAAM,EACNC,KAAK,EAEL,cAAc;AACdC,gBAAgB,EAChBC,sBAAsBD,gBAAgB,EACtCE,UAAU,EACVC,SAAS,EAGwB;IACjC,oBAAoB;IACpB,0FAA0F;IAC1F,MAAMC,aAA2B;QAC/BC,IAAAA,4BAAa,EAAC;YAAEX;YAAaY,UAAUV;YAAcE;YAAQL;QAAQ;QACrEc,IAAAA,6BAAc,EAAC;YAAEC,WAAW;YAASd;YAAaY,UAAUV;YAAcE;QAAO;KAClF;IACD,+EAA+E;IAC/E,IAAIH,gBAAgB;QAClBS,WAAWK,IAAI,CAAC;YACd,GAAGC,IAAAA,kBAAQ,EAAC;gBAAEF,WAAW;gBAASF,UAAUT;gBAAiBC;YAAO,EAAE;YACtEC;YACAY,MAAM;QACR;IACF;IAEA,mBAAmB;IACnB,yFAAyF;IACzF,MAAMC,YAA0B,EAAE;IAClC,gFAAgF;IAChF,IAAIjB,gBAAgB;QAClBiB,UAAUH,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEF,WAAW;YAAQF,UAAUL;YAAqBH,QAAQI;QAAW;IACjG;IAEAU,UAAUH,IAAI,CACZI,IAAAA,2BAAY,EAAC;QAAEnB;QAAaY,UAAUN;QAAkBF,QAAQI;QAAYT;QAASM,OAAOI;IAAU,IACtGI,IAAAA,6BAAc,EAAC;QACbC,WAAW;QACXd;QACAY,UAAUN;QACVF,QAAQI;QACRH,OAAOI;IACT;IAGF,OAAO;QACLW,OAAOV;QACPW,MAAMH;IACR;AACF;AAEA;;;;;;;;;;CAUC,GACD,MAAMI,qBAAuD,CAAC,EAC5DvB,OAAO,EACPa,WAAWW,yBAAY,CAACC,cAAc,EACtCpB,SAASmB,yBAAY,CAACE,gBAAgB,EACtCC,eAAed,QAAQ,EACvBJ,aAAaJ,MAAM,EACnBH,iBAAiB,IAAI,EACrBD,cAAc,UAAU,EACzB;IACC,OAAOF,oBAAoB;QACzBC;QACAC;QACAC;QACAC,cAAcU;QACdT,iBAAiBS;QACjBR;QACAE,kBAAkBoB;QAClBnB,qBAAqBmB;QACrBlB;QACAH,OAAO;QACPI,WAAW;IACb;AACF;AAEA;;;;;;;;;;;;;;CAcC,GACD,MAAMkB,4BAAqE,CAAC,EAC1E5B,OAAO,EACPG,eAAeqB,yBAAY,CAACC,cAAc,EAC1CrB,kBAAkBoB,yBAAY,CAACK,cAAc,EAC7CxB,SAASmB,yBAAY,CAACM,aAAa,EACnCxB,QAAQkB,yBAAY,CAACC,cAAc,EACnClB,mBAAmBJ,YAAY,EAC/BK,sBAAsBJ,eAAe,EACrCK,aAAaJ,MAAM,EACnBK,YAAYc,yBAAY,CAACK,cAAc,EACvC3B,iBAAiB,IAAI,EACrBD,cAAc,UAAU,EACzB;IACC,OAAOF,oBAAoB;QACzBC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;AACF;AAGO,MAAMf,WAAWoC,IAAAA,oCAAuB,EAACR;AAEzC,MAAMzB,iBAAiBkC,IAAAA,2CAA8B,EAACrC,UAAU;IACrEkB,UAAUW,yBAAY,CAACS,YAAY;AACrC;AAEO,MAAMpC,kBAAkBmC,IAAAA,2CAA8B,EAACrC,UAAU;IACtEkB,UAAUW,yBAAY,CAACK,cAAc;AACvC;AAGO,MAAMjC,kBAAkBmC,IAAAA,oCAAuB,EAACH"}

package/lib-commonjs/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/** Define a presence motion for fade in/out  */\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":["Fade","FadeRelaxed","FadeSnappy","fadePresenceFn","duration","motionTokens","durationNormal","easing","curveEasyEase","exitDuration","exitEasing","enter","fadeAtom","direction","exit","createPresenceComponent","createPresenceComponentVariant","durationFast","durationGentle"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAuBaA,IAAI;eAAJA;;IAIAC,WAAW;eAAXA;;IAFAC,UAAU;eAAVA;;IAfAC,cAAc;eAAdA;;;6BALN;0BACkB;AAIlB,MAAMA,iBAA+C,CAAC,EAC3DC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,aAAa,EACnCC,eAAeL,QAAQ,EACvBM,aAAaH,MAAM,EACpB;IACC,OAAO;QACLI,OAAOC,IAAAA,kBAAQ,EAAC;YAAEC,WAAW;YAAST;YAAUG;QAAO;QACvDO,MAAMF,IAAAA,kBAAQ,EAAC;YAAEC,WAAW;YAAQT,UAAUK;YAAcF,QAAQG;QAAW;IACjF;AACF;AAGO,MAAMV,OAAOe,IAAAA,oCAAuB,EAACZ;AAErC,MAAMD,aAAac,IAAAA,2CAA8B,EAAChB,MAAM;IAAEI,UAAUC,yBAAY,CAACY,YAAY;AAAC;AAE9F,MAAMhB,cAAce,IAAAA,2CAA8B,EAAChB,MAAM;IAAEI,UAAUC,yBAAY,CAACa,cAAc;AAAC"}
+{"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":["Fade","FadeRelaxed","FadeSnappy","fadePresenceFn","duration","motionTokens","durationNormal","easing","curveEasyEase","exitDuration","exitEasing","enter","fadeAtom","direction","exit","createPresenceComponent","createPresenceComponentVariant","durationFast","durationGentle"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA8BaA,IAAI;eAAJA;;IAIAC,WAAW;eAAXA;;IAFAC,UAAU;eAAVA;;IAfAC,cAAc;eAAdA;;;6BAZN;0BACkB;AAWlB,MAAMA,iBAA+C,CAAC,EAC3DC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,aAAa,EACnCC,eAAeL,QAAQ,EACvBM,aAAaH,MAAM,EACpB;IACC,OAAO;QACLI,OAAOC,IAAAA,kBAAQ,EAAC;YAAEC,WAAW;YAAST;YAAUG;QAAO;QACvDO,MAAMF,IAAAA,kBAAQ,EAAC;YAAEC,WAAW;YAAQT,UAAUK;YAAcF,QAAQG;QAAW;IACjF;AACF;AAGO,MAAMV,OAAOe,IAAAA,oCAAuB,EAACZ;AAErC,MAAMD,aAAac,IAAAA,2CAA8B,EAAChB,MAAM;IAAEI,UAAUC,yBAAY,CAACY,YAAY;AAAC;AAE9F,MAAMhB,cAAce,IAAAA,2CAA8B,EAAChB,MAAM;IAAEI,UAAUC,yBAAY,CAACa,cAAc;AAAC"}

package/lib-commonjs/components/Scale/Scale.js

@@ -22,7 +22,16 @@ _export(exports, {
 const _reactmotion = require("@fluentui/react-motion");
 const _fadeatom = require("../../atoms/fade-atom");
 const _scaleatom = require("../../atoms/scale-atom");
-/** Define a presence motion for scale in/out */ const scalePresenceFn = ({ duration = _reactmotion.motionTokens.durationGentle, easing = _reactmotion.motionTokens.curveDecelerateMax, exitDuration = _reactmotion.motionTokens.durationNormal, exitEasing = _reactmotion.motionTokens.curveAccelerateMax, fromScale = 0.9, animateOpacity = true })=>{
+/**
+ * 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 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 fromScale - The scale value to animate from. Defaults to `0.9`.
+ * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.
+ */ const scalePresenceFn = ({ duration = _reactmotion.motionTokens.durationGentle, easing = _reactmotion.motionTokens.curveDecelerateMax, exitDuration = _reactmotion.motionTokens.durationNormal, exitEasing = _reactmotion.motionTokens.curveAccelerateMax, fromScale = 0.9, animateOpacity = true })=>{
     const enterAtoms = [
         (0, _scaleatom.scaleAtom)({
             direction: 'enter',
@@ -36,7 +45,7 @@ const _scaleatom = require("../../atoms/scale-atom");
             direction: 'exit',
             duration: exitDuration,
             easing: exitEasing,
-            fromScale: fromScale
+            fromScale
         })
     ];
     // Only add fade atoms if animateOpacity is true.

package/lib-commonjs/components/Scale/Scale.js.map

@@ -1 +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/** Define a presence motion for scale in/out */\nconst scalePresenceFn: PresenceMotionFn<ScaleParams> = ({\n  duration = motionTokens.durationGentle,\n  easing = motionTokens.curveDecelerateMax,\n  exitDuration = motionTokens.durationNormal,\n  exitEasing = motionTokens.curveAccelerateMax,\n  fromScale = 0.9,\n  animateOpacity = true,\n}) => {\n  const enterAtoms = [scaleAtom({ direction: 'enter', duration, easing, fromScale: fromScale })];\n  const exitAtoms = [\n    scaleAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      fromScale: fromScale,\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 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":["Scale","ScaleRelaxed","ScaleSnappy","scalePresenceFn","duration","motionTokens","durationGentle","easing","curveDecelerateMax","exitDuration","durationNormal","exitEasing","curveAccelerateMax","fromScale","animateOpacity","enterAtoms","scaleAtom","direction","exitAtoms","push","fadeAtom","enter","exit","createPresenceComponent","createPresenceComponentVariant","durationFast","durationSlow"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA0CaA,KAAK;eAALA;;IAOAC,YAAY;eAAZA;;IALAC,WAAW;eAAXA;;;6BAvCN;0BACkB;2BACC;AAG1B,8CAA8C,GAC9C,MAAMC,kBAAiD,CAAC,EACtDC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,kBAAkB,EACxCC,eAAeJ,yBAAY,CAACK,cAAc,EAC1CC,aAAaN,yBAAY,CAACO,kBAAkB,EAC5CC,YAAY,GAAG,EACfC,iBAAiB,IAAI,EACtB;IACC,MAAMC,aAAa;QAACC,IAAAA,oBAAS,EAAC;YAAEC,WAAW;YAASb;YAAUG;YAAQM,WAAWA;QAAU;KAAG;IAC9F,MAAMK,YAAY;QAChBF,IAAAA,oBAAS,EAAC;YACRC,WAAW;YACXb,UAAUK;YACVF,QAAQI;YACRE,WAAWA;QACb;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWI,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAASb;YAAUG;QAAO;QAChEW,UAAUC,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAQb,UAAUK;YAAcF,QAAQI;QAAW;IAC1F;IAEA,OAAO;QACLU,OAAON;QACPO,MAAMJ;IACR;AACF;AAGO,MAAMlB,QAAQuB,IAAAA,oCAAuB,EAACpB;AAEtC,MAAMD,cAAcsB,IAAAA,2CAA8B,EAACxB,OAAO;IAC/DI,UAAUC,yBAAY,CAACK,cAAc;IACrCD,cAAcJ,yBAAY,CAACoB,YAAY;AACzC;AAEO,MAAMxB,eAAeuB,IAAAA,2CAA8B,EAACxB,OAAO;IAChEI,UAAUC,yBAAY,CAACqB,YAAY;IACnCjB,cAAcJ,yBAAY,CAACC,cAAc;AAC3C"}
+{"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 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 fromScale - The scale value to animate from. Defaults to `0.9`.\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  exitDuration = motionTokens.durationNormal,\n  exitEasing = motionTokens.curveAccelerateMax,\n  fromScale = 0.9,\n  animateOpacity = true,\n}) => {\n  const enterAtoms = [scaleAtom({ direction: 'enter', duration, easing, fromScale: fromScale })];\n  const exitAtoms = [\n    scaleAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      fromScale,\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 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":["Scale","ScaleRelaxed","ScaleSnappy","scalePresenceFn","duration","motionTokens","durationGentle","easing","curveDecelerateMax","exitDuration","durationNormal","exitEasing","curveAccelerateMax","fromScale","animateOpacity","enterAtoms","scaleAtom","direction","exitAtoms","push","fadeAtom","enter","exit","createPresenceComponent","createPresenceComponentVariant","durationFast","durationSlow"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAmDaA,KAAK;eAALA;;IAOAC,YAAY;eAAZA;;IALAC,WAAW;eAAXA;;;6BAhDN;0BACkB;2BACC;AAG1B;;;;;;;;;CASC,GACD,MAAMC,kBAAiD,CAAC,EACtDC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,kBAAkB,EACxCC,eAAeJ,yBAAY,CAACK,cAAc,EAC1CC,aAAaN,yBAAY,CAACO,kBAAkB,EAC5CC,YAAY,GAAG,EACfC,iBAAiB,IAAI,EACtB;IACC,MAAMC,aAAa;QAACC,IAAAA,oBAAS,EAAC;YAAEC,WAAW;YAASb;YAAUG;YAAQM,WAAWA;QAAU;KAAG;IAC9F,MAAMK,YAAY;QAChBF,IAAAA,oBAAS,EAAC;YACRC,WAAW;YACXb,UAAUK;YACVF,QAAQI;YACRE;QACF;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWI,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAASb;YAAUG;QAAO;QAChEW,UAAUC,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAQb,UAAUK;YAAcF,QAAQI;QAAW;IAC1F;IAEA,OAAO;QACLU,OAAON;QACPO,MAAMJ;IACR;AACF;AAGO,MAAMlB,QAAQuB,IAAAA,oCAAuB,EAACpB;AAEtC,MAAMD,cAAcsB,IAAAA,2CAA8B,EAACxB,OAAO;IAC/DI,UAAUC,yBAAY,CAACK,cAAc;IACrCD,cAAcJ,yBAAY,CAACoB,YAAY;AACzC;AAEO,MAAMxB,eAAeuB,IAAAA,2CAA8B,EAACxB,OAAO;IAChEI,UAAUC,yBAAY,CAACqB,YAAY;IACnCjB,cAAcJ,yBAAY,CAACC,cAAc;AAC3C"}

package/lib-commonjs/components/Slide/Slide.js

@@ -22,7 +22,17 @@ _export(exports, {
 const _reactmotion = require("@fluentui/react-motion");
 const _fadeatom = require("../../atoms/fade-atom");
 const _slideatom = require("../../atoms/slide-atom");
-/** Define a presence motion for slide in/out */ const slidePresenceFn = ({ duration = _reactmotion.motionTokens.durationNormal, easing = _reactmotion.motionTokens.curveDecelerateMid, exitDuration = duration, exitEasing = _reactmotion.motionTokens.curveAccelerateMid, fromX = '0px', fromY = '20px', animateOpacity = true })=>{
+/**
+ * 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 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 fromX - The X translate value with units to animate from. Defaults to `'0px'`.
+ * @param fromY - The Y translate value with units to animate from. Defaults to `'20px'`.
+ * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.
+ */ const slidePresenceFn = ({ duration = _reactmotion.motionTokens.durationNormal, easing = _reactmotion.motionTokens.curveDecelerateMid, exitDuration = duration, exitEasing = _reactmotion.motionTokens.curveAccelerateMid, fromX = '0px', fromY = '20px', animateOpacity = true })=>{
     const enterAtoms = [
         (0, _slideatom.slideAtom)({
             direction: 'enter',

package/lib-commonjs/components/Slide/Slide.js.map

@@ -1 +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/** Define a presence motion for slide in/out */\nconst slidePresenceFn: PresenceMotionFn<SlideParams> = ({\n  duration = motionTokens.durationNormal,\n  easing = motionTokens.curveDecelerateMid,\n  exitDuration = duration,\n  exitEasing = motionTokens.curveAccelerateMid,\n  fromX = '0px',\n  fromY = '20px',\n  animateOpacity = true,\n}: SlideParams) => {\n  const enterAtoms = [slideAtom({ direction: 'enter', duration, easing, fromX, fromY })];\n  const exitAtoms = [\n    slideAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      fromX,\n      fromY,\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 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":["Slide","SlideRelaxed","SlideSnappy","slidePresenceFn","duration","motionTokens","durationNormal","easing","curveDecelerateMid","exitDuration","exitEasing","curveAccelerateMid","fromX","fromY","animateOpacity","enterAtoms","slideAtom","direction","exitAtoms","push","fadeAtom","enter","exit","createPresenceComponent","createPresenceComponentVariant","curveDecelerateMax","curveAccelerateMax","durationGentle"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA4CaA,KAAK;eAALA;;IAOAC,YAAY;eAAZA;;IALAC,WAAW;eAAXA;;;6BAzCN;0BACkB;2BACC;AAG1B,8CAA8C,GAC9C,MAAMC,kBAAiD,CAAC,EACtDC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,kBAAkB,EACxCC,eAAeL,QAAQ,EACvBM,aAAaL,yBAAY,CAACM,kBAAkB,EAC5CC,QAAQ,KAAK,EACbC,QAAQ,MAAM,EACdC,iBAAiB,IAAI,EACT;IACZ,MAAMC,aAAa;QAACC,IAAAA,oBAAS,EAAC;YAAEC,WAAW;YAASb;YAAUG;YAAQK;YAAOC;QAAM;KAAG;IACtF,MAAMK,YAAY;QAChBF,IAAAA,oBAAS,EAAC;YACRC,WAAW;YACXb,UAAUK;YACVF,QAAQG;YACRE;YACAC;QACF;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWI,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAASb;YAAUG;QAAO;QAChEW,UAAUC,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAQb,UAAUK;YAAcF,QAAQG;QAAW;IAC1F;IAEA,OAAO;QACLW,OAAON;QACPO,MAAMJ;IACR;AACF;AAGO,MAAMlB,QAAQuB,IAAAA,oCAAuB,EAACpB;AAEtC,MAAMD,cAAcsB,IAAAA,2CAA8B,EAACxB,OAAO;IAC/DO,QAAQF,yBAAY,CAACoB,kBAAkB;IACvCf,YAAYL,yBAAY,CAACqB,kBAAkB;AAC7C;AAEO,MAAMzB,eAAeuB,IAAAA,2CAA8B,EAACxB,OAAO;IAChEI,UAAUC,yBAAY,CAACsB,cAAc;AACvC"}
+{"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 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 fromX - The X translate value with units to animate from. Defaults to `'0px'`.\n * @param fromY - The Y translate value with units to animate from. Defaults to `'20px'`.\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  exitDuration = duration,\n  exitEasing = motionTokens.curveAccelerateMid,\n  fromX = '0px',\n  fromY = '20px',\n  animateOpacity = true,\n}: SlideParams) => {\n  const enterAtoms = [slideAtom({ direction: 'enter', duration, easing, fromX, fromY })];\n  const exitAtoms = [\n    slideAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      fromX,\n      fromY,\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 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":["Slide","SlideRelaxed","SlideSnappy","slidePresenceFn","duration","motionTokens","durationNormal","easing","curveDecelerateMid","exitDuration","exitEasing","curveAccelerateMid","fromX","fromY","animateOpacity","enterAtoms","slideAtom","direction","exitAtoms","push","fadeAtom","enter","exit","createPresenceComponent","createPresenceComponentVariant","curveDecelerateMax","curveAccelerateMax","durationGentle"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAsDaA,KAAK;eAALA;;IAOAC,YAAY;eAAZA;;IALAC,WAAW;eAAXA;;;6BAnDN;0BACkB;2BACC;AAG1B;;;;;;;;;;CAUC,GACD,MAAMC,kBAAiD,CAAC,EACtDC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,kBAAkB,EACxCC,eAAeL,QAAQ,EACvBM,aAAaL,yBAAY,CAACM,kBAAkB,EAC5CC,QAAQ,KAAK,EACbC,QAAQ,MAAM,EACdC,iBAAiB,IAAI,EACT;IACZ,MAAMC,aAAa;QAACC,IAAAA,oBAAS,EAAC;YAAEC,WAAW;YAASb;YAAUG;YAAQK;YAAOC;QAAM;KAAG;IACtF,MAAMK,YAAY;QAChBF,IAAAA,oBAAS,EAAC;YACRC,WAAW;YACXb,UAAUK;YACVF,QAAQG;YACRE;YACAC;QACF;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWI,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAASb;YAAUG;QAAO;QAChEW,UAAUC,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAQb,UAAUK;YAAcF,QAAQG;QAAW;IAC1F;IAEA,OAAO;QACLW,OAAON;QACPO,MAAMJ;IACR;AACF;AAGO,MAAMlB,QAAQuB,IAAAA,oCAAuB,EAACpB;AAEtC,MAAMD,cAAcsB,IAAAA,2CAA8B,EAACxB,OAAO;IAC/DO,QAAQF,yBAAY,CAACoB,kBAAkB;IACvCf,YAAYL,yBAAY,CAACqB,kBAAkB;AAC7C;AAEO,MAAMzB,eAAeuB,IAAAA,2CAA8B,EAACxB,OAAO;IAChEI,UAAUC,yBAAY,CAACsB,cAAc;AACvC"}

package/lib-commonjs/index.js

@@ -9,6 +9,9 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    Blur: function() {
+        return _Blur.Blur;
+    },
     Collapse: function() {
         return _Collapse.Collapse;
     },
@@ -53,3 +56,4 @@ const _Collapse = require("./components/Collapse");
 const _Fade = require("./components/Fade");
 const _Scale = require("./components/Scale");
 const _Slide = require("./components/Slide");
+const _Blur = require("./components/Blur");

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Collapse, CollapseSnappy, CollapseRelaxed, CollapseDelayed } from './components/Collapse';\nexport { Fade, FadeSnappy, FadeRelaxed } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleRelaxed } from './components/Scale';\nexport { Slide, SlideSnappy, SlideRelaxed } from './components/Slide';\n"],"names":["Collapse","CollapseDelayed","CollapseRelaxed","CollapseSnappy","Fade","FadeRelaxed","FadeSnappy","Scale","ScaleRelaxed","ScaleSnappy","Slide","SlideRelaxed","SlideSnappy"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,QAAQ;eAARA,kBAAQ;;IAAmCC,eAAe;eAAfA,yBAAe;;IAAhCC,eAAe;eAAfA,yBAAe;;IAA/BC,cAAc;eAAdA,wBAAc;;IACxBC,IAAI;eAAJA,UAAI;;IAAcC,WAAW;eAAXA,iBAAW;;IAAvBC,UAAU;eAAVA,gBAAU;;IAChBC,KAAK;eAALA,YAAK;;IAAeC,YAAY;eAAZA,mBAAY;;IAAzBC,WAAW;eAAXA,kBAAW;;IAClBC,KAAK;eAALA,YAAK;;IAAeC,YAAY;eAAZA,mBAAY;;IAAzBC,WAAW;eAAXA,kBAAW;;;0BAHgD;sBAC7B;uBACG;uBACA"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Collapse, CollapseSnappy, CollapseRelaxed, CollapseDelayed } from './components/Collapse';\nexport { Fade, FadeSnappy, FadeRelaxed } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleRelaxed } from './components/Scale';\nexport { Slide, SlideSnappy, SlideRelaxed } from './components/Slide';\nexport { Blur } from './components/Blur';\n"],"names":["Blur","Collapse","CollapseDelayed","CollapseRelaxed","CollapseSnappy","Fade","FadeRelaxed","FadeSnappy","Scale","ScaleRelaxed","ScaleSnappy","Slide","SlideRelaxed","SlideSnappy"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAISA,IAAI;eAAJA,UAAI;;IAJJC,QAAQ;eAARA,kBAAQ;;IAAmCC,eAAe;eAAfA,yBAAe;;IAAhCC,eAAe;eAAfA,yBAAe;;IAA/BC,cAAc;eAAdA,wBAAc;;IACxBC,IAAI;eAAJA,UAAI;;IAAcC,WAAW;eAAXA,iBAAW;;IAAvBC,UAAU;eAAVA,gBAAU;;IAChBC,KAAK;eAALA,YAAK;;IAAeC,YAAY;eAAZA,mBAAY;;IAAzBC,WAAW;eAAXA,kBAAW;;IAClBC,KAAK;eAALA,YAAK;;IAAeC,YAAY;eAAZA,mBAAY;;IAAzBC,WAAW;eAAXA,kBAAW;;;0BAHgD;sBAC7B;uBACG;uBACA;sBAC5B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-motion-components-preview",
-  "version": "0.0.0-nightly-20250716-0406.1",
+  "version": "0.0.0-nightly-20250718-0405.1",
   "description": "A preview package for Fluent UI motion components, providing a collection of components",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -19,12 +19,12 @@
   "license": "MIT",
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-conformance": "0.0.0-nightly-20250716-0406.1",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20250716-0406.1",
+    "@fluentui/react-conformance": "0.0.0-nightly-20250718-0405.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20250718-0405.1",
     "@fluentui/scripts-api-extractor": "*"
   },
   "dependencies": {
-    "@fluentui/react-motion": "0.0.0-nightly-20250716-0406.1",
+    "@fluentui/react-motion": "0.0.0-nightly-20250718-0405.1",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {