@fluentui/react-motion-components-preview 0.6.2 → 0.8.0

package/CHANGELOG.md

@@ -1,12 +1,32 @@
 # Change Log - @fluentui/react-motion-components-preview
 
-This log was last generated on Thu, 26 Jun 2025 14:07:52 GMT and should not be manually modified.
+This log was last generated on Mon, 28 Jul 2025 18:44:10 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.8.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.8.0)
+
+Mon, 28 Jul 2025 18:44:10 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.7.0..@fluentui/react-motion-components-preview_v0.8.0)
+
+### Minor changes
+
+- feat(motion): add Fade presence motion component ([PR #34839](https://github.com/microsoft/fluentui/pull/34839) by robertpenner@microsoft.com)
+
+## [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)
 
-Thu, 26 Jun 2025 14:07:52 GMT 
+Thu, 26 Jun 2025 14:11:54 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.5.0..@fluentui/react-motion-components-preview_v0.6.2)
 
 ### Patches

package/dist/index.d.ts

@@ -1,111 +1,109 @@
-import type { MotionParam } from '@fluentui/react-motion';
 import { PresenceComponent } from '@fluentui/react-motion';
-import type { PresenceMotionFn } from '@fluentui/react-motion';
 
-/** A React component that applies collapse/expand transitions to its children. */
-export declare const Collapse: PresenceComponent<CollapseRuntimeParams>;
+/**
+ * Common opacity animation parameter for motion components.
+ */
+declare type AnimateOpacity = {
+    /** Whether to animate the opacity. Defaults to `true`. */
+    animateOpacity?: boolean;
+};
 
-export declare const CollapseDelayed: PresenceComponent<CollapseRuntimeParams>;
+/** A React component that applies blur in/out transitions to its children. */
+export declare const Blur: PresenceComponent<BlurParams>;
 
-declare type CollapseDelayedVariantParams = {
-    /** Time (ms) for the size expand. Defaults to the durationNormal value (200 ms). */
-    enterSizeDuration?: number;
-    /** Time (ms) for the fade-in. Defaults to the enterSizeDuration param, to sync fade-in with expand. */
-    enterOpacityDuration?: number;
-    /** Time (ms) for the size collapse. Defaults to the enterSizeDuration param, for temporal symmetry.. */
-    exitSizeDuration?: number;
-    /** Defaults to the exitSizeDuration param, to sync the fade-out with the collapse. */
-    exitOpacityDuration?: number;
-    /** Time (ms) between the size expand start and the fade-in start. Defaults to `0`.  */
-    enterDelay?: number;
-    /** Time (ms) between the fade-out start and the size collapse start. Defaults to `0`.  */
-    exitDelay?: number;
-    /** Easing curve for the enter transition, shared by size and opacity. Defaults to the easeEaseMax value.  */
-    enterEasing?: string;
-    /** Easing curve for the exit transition, shared by size and opacity. Defaults to the enterEasing param. */
-    exitEasing?: string;
+declare type BlurParams = PresenceDuration & PresenceEasing & AnimateOpacity & {
+    /** The radius of pixels to blend into the blur. A length string, defaulting to '20px'. */
+    fromRadius?: string;
 };
 
-declare type CollapseOrientation = 'horizontal' | 'vertical';
-
-export declare const CollapseRelaxed: PresenceComponent<CollapseRuntimeParams>;
+/** A React component that applies collapse/expand transitions to its children. */
+export declare const Collapse: PresenceComponent<CollapseParams>;
 
-export declare type CollapseRuntimeParams = {
-    /** Whether to animate the opacity. Defaults to `true`. */
-    animateOpacity?: boolean;
+/** Common properties shared by all collapse components */
+declare type CollapseBaseParams = PresenceEasing & AnimateOpacity & {
     /** The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height. */
     orientation?: CollapseOrientation;
 };
 
-export declare const CollapseSnappy: PresenceComponent<CollapseRuntimeParams>;
+/** A React component that applies collapse/expand transitions with delayed fade to its children. */
+export declare const CollapseDelayed: PresenceComponent<CollapseDelayedParams>;
 
-declare type CollapseVariantParams = {
-    /** Time (ms) for the enter transition (expand). Defaults to the `durationNormal` value (200 ms). */
-    enterDuration?: number;
-    /** Easing curve for the enter transition (expand). Defaults to the `easeEaseMax` value.  */
-    enterEasing?: string;
-    /** Time (ms) for the exit transition (collapse). Defaults to the `enterDuration` param for symmetry. */
-    exitDuration?: number;
-    /** Easing curve for the exit transition (collapse). Defaults to the `enterEasing` param for symmetry.  */
-    exitEasing?: string;
+declare type CollapseDelayedParams = CollapseBaseParams & {
+    /** Time (ms) for the size expand. Defaults to the `durationNormal` value (200 ms). */
+    sizeDuration?: number;
+    /** Time (ms) for the fade-in. Defaults to the `sizeDuration` param, to sync fade-in with expand. */
+    opacityDuration?: number;
+    /** Time (ms) for the size collapse. Defaults to the `sizeDuration` param, for temporal symmetry. */
+    exitSizeDuration?: number;
+    /** Time (ms) for the fade-out. Defaults to the `exitSizeDuration` param, to sync the fade-out with the collapse. */
+    exitOpacityDuration?: number;
+    /** Time (ms) between the size expand start and the fade-in start. Defaults to `0`. */
+    delay?: number;
+    /** Time (ms) between the fade-out start and the size collapse start. Defaults to `0`. */
+    exitDelay?: number;
 };
 
-/** Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay. */
-export declare const createCollapseDelayedPresence: PresenceMotionFnCreator<CollapseDelayedVariantParams, CollapseRuntimeParams>;
+declare type CollapseOrientation = 'horizontal' | 'vertical';
+
+declare type CollapseParams = CollapseBaseParams & PresenceDuration;
+
+export declare const CollapseRelaxed: PresenceComponent<CollapseParams>;
 
-/** Defines a presence motion for collapse/expand. */
-export declare const createCollapsePresence: PresenceMotionFnCreator<CollapseVariantParams, CollapseRuntimeParams>;
+export declare const CollapseSnappy: PresenceComponent<CollapseParams>;
 
 /** A React component that applies fade in/out transitions to its children. */
-export declare const Fade: PresenceComponent<FadeVariantParams>;
+export declare const Fade: PresenceComponent<FadeParams>;
 
-export declare const FadeRelaxed: PresenceComponent<FadeVariantParams>;
+declare type FadeParams = PresenceDuration & PresenceEasing;
 
-export declare const FadeSnappy: PresenceComponent<FadeVariantParams>;
+export declare const FadeRelaxed: PresenceComponent<FadeParams>;
 
-declare type FadeVariantParams = {
-    /** Time (ms) for the enter transition (fade-in). Defaults to the `durationNormal` value (200 ms). */
+export declare const FadeSnappy: PresenceComponent<FadeParams>;
+
+/**
+ * Common duration parameters for presence motion components.
+ */
+declare type PresenceDuration = {
+    /** Time (ms) for the enter transition. */
     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. */
+    /** Time (ms) for the exit transition. 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;
 };
 
 /**
- * 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`.
+ * Common easing parameters for presence motion components.
  */
-declare type PresenceMotionFnCreator<MotionVariantParams extends Record<string, MotionParam> = {}, MotionRuntimeParams extends Record<string, MotionParam> = {}> = (variantParams?: MotionVariantParams) => PresenceMotionFn<MotionRuntimeParams>;
+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<ScaleVariantParams>;
-
-export declare const ScaleRelaxed: PresenceComponent<ScaleVariantParams>;
+export declare const Scale: PresenceComponent<ScaleParams>;
 
-export declare const ScaleSnappy: PresenceComponent<ScaleVariantParams>;
-
-declare type ScaleVariantParams = {
-    /** Time (ms) for the enter transition (scale-in). Defaults to the `durationGentle` value (250 ms). */
-    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). */
-    exitDuration?: number;
-    /** Easing curve for the exit transition (scale-out). Defaults to the `curveAccelerateMax` value.  */
-    exitEasing?: string;
+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>;
+
+export declare const ScaleSnappy: PresenceComponent<ScaleParams>;
+
+/** A React component that applies slide in/out transitions to its children. */
+export declare const Slide: PresenceComponent<SlideParams>;
+
+declare type SlideParams = PresenceDuration & PresenceEasing & AnimateOpacity & {
+    /** 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;
+};
+
+export declare const SlideRelaxed: PresenceComponent<SlideParams>;
+
+export declare const SlideSnappy: PresenceComponent<SlideParams>;
+
 export { }

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"],"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/atoms/fade-atom.js

@@ -1,15 +1,15 @@
 import { motionTokens } from '@fluentui/react-motion';
 /**
- * Generates a motion atom object for a fade in or fade out.
+ * Generates a motion atom object for a fade-in or fade-out.
  * @param direction - The functional direction of the motion: 'enter' or 'exit'.
  * @param duration - The duration of the motion in milliseconds.
  * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
  * @param fromValue - The starting opacity value. Defaults to 0.
  * @returns A motion atom object with opacity keyframes and the supplied duration and easing.
- */ export const fadeAtom = ({ direction, duration, easing = motionTokens.curveLinear, fromValue = 0 })=>{
+ */ export const fadeAtom = ({ direction, duration, easing = motionTokens.curveLinear, fromOpacity = 0 })=>{
     const keyframes = [
         {
-            opacity: fromValue
+            opacity: fromOpacity
         },
         {
             opacity: 1

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/atoms/fade-atom.ts"],"sourcesContent":["import { AtomMotion, PresenceDirection, motionTokens } from '@fluentui/react-motion';\n\ninterface FadeAtomParams {\n  direction: PresenceDirection;\n  duration: number;\n  easing?: string;\n  fromValue?: number;\n}\n\n/**\n * Generates a motion atom object for a fade in or fade out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromValue - The starting opacity value. Defaults to 0.\n * @returns A motion atom object with opacity keyframes and the supplied duration and easing.\n */\nexport const fadeAtom = ({\n  direction,\n  duration,\n  easing = motionTokens.curveLinear,\n  fromValue = 0,\n}: FadeAtomParams): AtomMotion => {\n  const keyframes = [{ opacity: fromValue }, { opacity: 1 }];\n  if (direction === 'exit') {\n    keyframes.reverse();\n  }\n  return {\n    keyframes,\n    duration,\n    easing,\n  };\n};\n"],"names":["motionTokens","fadeAtom","direction","duration","easing","curveLinear","fromValue","keyframes","opacity","reverse"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAAwCA,YAAY,QAAQ,yBAAyB;AASrF;;;;;;;CAOC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,SAAS,EACTC,QAAQ,EACRC,SAASJ,aAAaK,WAAW,EACjCC,YAAY,CAAC,EACE;IACf,MAAMC,YAAY;QAAC;YAAEC,SAASF;QAAU;QAAG;YAAEE,SAAS;QAAE;KAAE;IAC1D,IAAIN,cAAc,QAAQ;QACxBK,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAJ;QACAC;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/atoms/fade-atom.ts"],"sourcesContent":["import { AtomMotion, PresenceDirection, motionTokens } from '@fluentui/react-motion';\n\ninterface FadeAtomParams {\n  direction: PresenceDirection;\n  duration: number;\n  easing?: string;\n  fromOpacity?: number;\n}\n\n/**\n * Generates a motion atom object for a fade-in or fade-out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromValue - The starting opacity value. Defaults to 0.\n * @returns A motion atom object with opacity keyframes and the supplied duration and easing.\n */\nexport const fadeAtom = ({\n  direction,\n  duration,\n  easing = motionTokens.curveLinear,\n  fromOpacity = 0,\n}: FadeAtomParams): AtomMotion => {\n  const keyframes = [{ opacity: fromOpacity }, { opacity: 1 }];\n  if (direction === 'exit') {\n    keyframes.reverse();\n  }\n  return {\n    keyframes,\n    duration,\n    easing,\n  };\n};\n"],"names":["motionTokens","fadeAtom","direction","duration","easing","curveLinear","fromOpacity","keyframes","opacity","reverse"],"mappings":"AAAA,SAAwCA,YAAY,QAAQ,yBAAyB;AASrF;;;;;;;CAOC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,SAAS,EACTC,QAAQ,EACRC,SAASJ,aAAaK,WAAW,EACjCC,cAAc,CAAC,EACA;IACf,MAAMC,YAAY;QAAC;YAAEC,SAASF;QAAY;QAAG;YAAEE,SAAS;QAAE;KAAE;IAC5D,IAAIN,cAAc,QAAQ;QACxBK,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAJ;QACAC;IACF;AACF,EAAE"}

package/lib/atoms/scale-atom.js

@@ -4,16 +4,16 @@ import { motionTokens } from '@fluentui/react-motion';
  * @param direction - The functional direction of the motion: 'enter' or 'exit'.
  * @param duration - The duration of the motion in milliseconds.
  * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
- * @param fromValue - The starting scale value. Defaults to 0.9.
- * @param toValue - The ending scale value. Defaults to 1.
+ * @param fromScale - The starting scale value. Defaults to 0.9.
+ * @param toScale - The ending scale value. Defaults to 1.
  * @returns A motion atom object with scale keyframes and the supplied duration and easing.
- */ export const scaleAtom = ({ direction, duration, easing = motionTokens.curveLinear, fromValue = 0.9, toValue = 1 })=>{
+ */ export const scaleAtom = ({ direction, duration, easing = motionTokens.curveLinear, fromScale = 0.9, toScale = 1 })=>{
     const keyframes = [
         {
-            scale: fromValue
+            scale: fromScale
         },
         {
-            scale: toValue
+            scale: toScale
         }
     ];
     if (direction === 'exit') {

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/atoms/scale-atom.ts"],"sourcesContent":["import { AtomMotion, PresenceDirection, motionTokens } from '@fluentui/react-motion';\n\ninterface ScaleAtomParams {\n  direction: PresenceDirection;\n  duration: number;\n  easing?: string;\n  fromValue?: number;\n  toValue?: number;\n}\n\n/**\n * Generates a motion atom object for a scale in or scale out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromValue - The starting scale value. Defaults to 0.9.\n * @param toValue - The ending scale value. Defaults to 1.\n * @returns A motion atom object with scale keyframes and the supplied duration and easing.\n */\nexport const scaleAtom = ({\n  direction,\n  duration,\n  easing = motionTokens.curveLinear,\n  fromValue = 0.9,\n  toValue = 1,\n}: ScaleAtomParams): AtomMotion => {\n  const keyframes = [{ scale: fromValue }, { scale: toValue }];\n  if (direction === 'exit') {\n    keyframes.reverse();\n  }\n  return {\n    keyframes,\n    duration,\n    easing,\n  };\n};\n"],"names":["motionTokens","scaleAtom","direction","duration","easing","curveLinear","fromValue","toValue","keyframes","scale","reverse"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAAwCA,YAAY,QAAQ,yBAAyB;AAUrF;;;;;;;;CAQC,GACD,OAAO,MAAMC,YAAY,CAAC,EACxBC,SAAS,EACTC,QAAQ,EACRC,SAASJ,aAAaK,WAAW,EACjCC,YAAY,GAAG,EACfC,UAAU,CAAC,EACK;IAChB,MAAMC,YAAY;QAAC;YAAEC,OAAOH;QAAU;QAAG;YAAEG,OAAOF;QAAQ;KAAE;IAC5D,IAAIL,cAAc,QAAQ;QACxBM,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAL;QACAC;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/atoms/scale-atom.ts"],"sourcesContent":["import { AtomMotion, PresenceDirection, motionTokens } from '@fluentui/react-motion';\n\ninterface ScaleAtomParams {\n  direction: PresenceDirection;\n  duration: number;\n  easing?: string;\n  fromScale?: number;\n  toScale?: number;\n}\n\n/**\n * Generates a motion atom object for a scale in or scale out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromScale - The starting scale value. Defaults to 0.9.\n * @param toScale - The ending scale value. Defaults to 1.\n * @returns A motion atom object with scale keyframes and the supplied duration and easing.\n */\nexport const scaleAtom = ({\n  direction,\n  duration,\n  easing = motionTokens.curveLinear,\n  fromScale = 0.9,\n  toScale = 1,\n}: ScaleAtomParams): AtomMotion => {\n  const keyframes = [{ scale: fromScale }, { scale: toScale }];\n  if (direction === 'exit') {\n    keyframes.reverse();\n  }\n  return {\n    keyframes,\n    duration,\n    easing,\n  };\n};\n"],"names":["motionTokens","scaleAtom","direction","duration","easing","curveLinear","fromScale","toScale","keyframes","scale","reverse"],"mappings":"AAAA,SAAwCA,YAAY,QAAQ,yBAAyB;AAUrF;;;;;;;;CAQC,GACD,OAAO,MAAMC,YAAY,CAAC,EACxBC,SAAS,EACTC,QAAQ,EACRC,SAASJ,aAAaK,WAAW,EACjCC,YAAY,GAAG,EACfC,UAAU,CAAC,EACK;IAChB,MAAMC,YAAY;QAAC;YAAEC,OAAOH;QAAU;QAAG;YAAEG,OAAOF;QAAQ;KAAE;IAC5D,IAAIL,cAAc,QAAQ;QACxBM,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAL;QACAC;IACF;AACF,EAAE"}

package/lib/atoms/slide-atom.js

@@ -0,0 +1,27 @@
+import { motionTokens } from '@fluentui/react-motion';
+/**
+ * Generates a motion atom object for a slide-in or slide-out.
+ * @param direction - The functional direction of the motion: 'enter' or 'exit'.
+ * @param duration - The duration of the motion in milliseconds.
+ * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
+ * @param fromX - The starting X translate value with units (e.g., '0px', '100%'). Defaults to '0px'.
+ * @param fromY - The starting Y translate value with units (e.g., '-20px', '100%'). Defaults to '0px'.
+ * @returns A motion atom object with translate keyframes and the supplied duration and easing.
+ */ export const slideAtom = ({ direction, duration, easing = motionTokens.curveLinear, fromX = '0px', fromY = '20px' })=>{
+    const keyframes = [
+        {
+            translate: `${fromX} ${fromY}`
+        },
+        {
+            translate: '0px 0px'
+        }
+    ];
+    if (direction === 'exit') {
+        keyframes.reverse();
+    }
+    return {
+        keyframes,
+        duration,
+        easing
+    };
+};

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

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

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

package/lib/components/Collapse/Collapse.js

@@ -1,85 +1,125 @@
-import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';
+import { motionTokens, createPresenceComponent, createPresenceComponentVariant } from '@fluentui/react-motion';
 import { sizeEnterAtom, sizeExitAtom, whitespaceAtom } from './collapse-atoms';
 import { fadeAtom } from '../../atoms/fade-atom';
-/** Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay. */ export const createCollapseDelayedPresence = ({ // enter
-enterSizeDuration = motionTokens.durationNormal, enterOpacityDuration = enterSizeDuration, enterEasing = motionTokens.curveEasyEaseMax, enterDelay = 0, // exit: durations and easing default to enter values for symmetry
-exitSizeDuration = enterSizeDuration, exitOpacityDuration = enterOpacityDuration, exitEasing = enterEasing, exitDelay = 0 } = {})=>({ element, animateOpacity = true, orientation = 'vertical' })=>{
-        // ----- ENTER -----
-        // The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.
-        const enterAtoms = [
-            sizeEnterAtom({
-                orientation,
-                duration: enterSizeDuration,
-                easing: enterEasing,
-                element
-            }),
-            whitespaceAtom({
-                direction: 'enter',
-                orientation,
-                duration: enterSizeDuration,
-                easing: enterEasing
-            })
-        ];
-        // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.
-        if (animateOpacity) {
-            enterAtoms.push({
-                ...fadeAtom({
-                    direction: 'enter',
-                    duration: enterOpacityDuration,
-                    easing: enterEasing
-                }),
-                delay: enterDelay,
-                fill: 'both'
-            });
-        }
-        // ----- EXIT -----
-        // The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.
-        const exitAtoms = [];
-        // Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected.
-        if (animateOpacity) {
-            exitAtoms.push(fadeAtom({
-                direction: 'exit',
-                duration: exitOpacityDuration,
-                easing: exitEasing
-            }));
-        }
-        exitAtoms.push(sizeExitAtom({
+/** Internal helper to create collapse atoms with shared logic */ function createCollapseAtoms({ element, orientation, animateOpacity, // Enter params
+sizeDuration, opacityDuration = sizeDuration, easing, delay, // Exit params
+exitSizeDuration, exitOpacityDuration = exitSizeDuration, exitEasing, exitDelay }) {
+    // ----- ENTER -----
+    // The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.
+    const enterAtoms = [
+        sizeEnterAtom({
             orientation,
-            duration: exitSizeDuration,
-            easing: exitEasing,
-            element,
-            delay: exitDelay
-        }), whitespaceAtom({
-            direction: 'exit',
+            duration: sizeDuration,
+            easing,
+            element
+        }),
+        whitespaceAtom({
+            direction: 'enter',
             orientation,
-            duration: exitSizeDuration,
-            easing: exitEasing,
-            delay: exitDelay
+            duration: sizeDuration,
+            easing
+        })
+    ];
+    // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.
+    if (animateOpacity) {
+        enterAtoms.push({
+            ...fadeAtom({
+                direction: 'enter',
+                duration: opacityDuration,
+                easing
+            }),
+            delay,
+            fill: 'both'
+        });
+    }
+    // ----- EXIT -----
+    // The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.
+    const exitAtoms = [];
+    // Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected.
+    if (animateOpacity) {
+        exitAtoms.push(fadeAtom({
+            direction: 'exit',
+            duration: exitOpacityDuration,
+            easing: exitEasing
         }));
-        return {
-            enter: enterAtoms,
-            exit: exitAtoms
-        };
+    }
+    exitAtoms.push(sizeExitAtom({
+        orientation,
+        duration: exitSizeDuration,
+        easing: exitEasing,
+        element,
+        delay: exitDelay
+    }), whitespaceAtom({
+        direction: 'exit',
+        orientation,
+        duration: exitSizeDuration,
+        easing: exitEasing,
+        delay: exitDelay
+    }));
+    return {
+        enter: enterAtoms,
+        exit: exitAtoms
     };
-/** Defines a presence motion for collapse/expand. */ export const createCollapsePresence = ({ enterDuration = motionTokens.durationNormal, enterEasing = motionTokens.curveEasyEaseMax, exitDuration = enterDuration, exitEasing = enterEasing } = {})=>// Implement a regular collapse as a special case of the delayed collapse,
-    // where the delays are zero, and the size and opacity durations are equal.
-    createCollapseDelayedPresence({
-        enterSizeDuration: enterDuration,
-        enterEasing,
+}
+/**
+ * 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,
+        animateOpacity,
+        sizeDuration: duration,
+        opacityDuration: duration,
+        easing,
         exitSizeDuration: exitDuration,
-        exitEasing
+        exitOpacityDuration: exitDuration,
+        exitEasing,
+        delay: 0,
+        exitDelay: 0
+    });
+};
+/**
+ * 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,
+        animateOpacity,
+        sizeDuration,
+        opacityDuration,
+        easing,
+        delay,
+        exitSizeDuration,
+        exitOpacityDuration,
+        exitEasing,
+        exitDelay
     });
-/** A React component that applies collapse/expand transitions to its children. */ export const Collapse = createPresenceComponent(createCollapsePresence());
-export const CollapseSnappy = createPresenceComponent(createCollapsePresence({
-    enterDuration: motionTokens.durationFast
-}));
-export const CollapseRelaxed = createPresenceComponent(createCollapsePresence({
-    enterDuration: motionTokens.durationSlower
-}));
-export const CollapseDelayed = createPresenceComponent(createCollapseDelayedPresence({
-    enterSizeDuration: motionTokens.durationNormal,
-    enterOpacityDuration: motionTokens.durationSlower,
-    enterDelay: motionTokens.durationNormal,
-    exitDelay: motionTokens.durationSlower,
-    enterEasing: motionTokens.curveEasyEase
-}));
+};
+/** A React component that applies collapse/expand transitions to its children. */ export const Collapse = createPresenceComponent(collapsePresenceFn);
+export const CollapseSnappy = createPresenceComponentVariant(Collapse, {
+    duration: motionTokens.durationFast
+});
+export const CollapseRelaxed = createPresenceComponentVariant(Collapse, {
+    duration: motionTokens.durationSlower
+});
+/** A React component that applies collapse/expand transitions with delayed fade to its children. */ export const CollapseDelayed = createPresenceComponent(collapseDelayedPresenceFn);