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

package/CHANGELOG.md

@@ -1,12 +1,25 @@
 # Change Log - @fluentui/react-motion-components-preview
 
-This log was last generated on Mon, 08 Sep 2025 12:41:49 GMT and should not be manually modified.
+This log was last generated on Fri, 03 Oct 2025 14:18:15 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.11.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.11.0)
+
+Fri, 03 Oct 2025 14:18:15 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.10.0..@fluentui/react-motion-components-preview_v0.11.0)
+
+### Minor changes
+
+- refactor(Collapse): simplify parameter types ([PR #35262](https://github.com/microsoft/fluentui/pull/35262) by robertpenner@microsoft.com)
+
+### Patches
+
+- fix(Collapse): make size animation work with delay ([PR #35269](https://github.com/microsoft/fluentui/pull/35269) by robertpenner@microsoft.com)
+
 ## [0.10.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.10.0)
 
-Mon, 08 Sep 2025 12:41:49 GMT 
+Mon, 08 Sep 2025 12:51:10 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.9.0..@fluentui/react-motion-components-preview_v0.10.0)
 
 ### Minor changes

package/dist/index.d.ts

@@ -26,35 +26,40 @@ export declare type BlurParams = BasePresenceParams & AnimateOpacity & {
 /** 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 = PresenceEasing & PresenceDelay & AnimateOpacity & {
-    /** The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height. */
-    orientation?: CollapseOrientation;
-};
-
 /** A React component that applies collapse/expand transitions with delayed fade to its children. */
-export declare const CollapseDelayed: PresenceComponent<CollapseDelayedParams>;
+export declare const CollapseDelayed: PresenceComponent<CollapseParams>;
 
-export declare type CollapseDelayedParams = CollapseBaseParams & {
-    /** Time (ms) for the size expand. Defaults to the `durationNormal` value (200 ms). */
+/**
+ * Duration properties for granular timing control in Collapse animations.
+ */
+export declare type CollapseDurations = {
+    /** Time (ms) for the size animation during enter. Defaults to `duration` for unified timing. */
     sizeDuration?: number;
-    /** Time (ms) for the fade-in. Defaults to the `sizeDuration` param, to sync fade-in with expand. */
+    /** Time (ms) for the opacity animation during enter. Defaults to `sizeDuration` for synchronized timing. */
     opacityDuration?: number;
-    /** Time (ms) for the size collapse. Defaults to the `sizeDuration` param, for temporal symmetry. */
+    /** Time (ms) for the size animation during exit. Defaults to `exitDuration` for unified timing. */
     exitSizeDuration?: number;
-    /** Time (ms) for the fade-out. Defaults to the `exitSizeDuration` param, to sync the fade-out with the collapse. */
+    /** Time (ms) for the opacity animation during exit. Defaults to `exitSizeDuration` for synchronized timing. */
     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;
 };
 
 declare type CollapseOrientation = 'horizontal' | 'vertical';
 
-export declare type CollapseParams = BasePresenceParams & AnimateOpacity & {
+export declare type CollapseParams = BasePresenceParams & AnimateOpacity & CollapseDurations & {
     /** The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height. */
     orientation?: CollapseOrientation;
+    /** The starting size for the expand animation. Defaults to `'0px'`. */
+    fromSize?: string;
+    /**
+     * Time (ms) to delay the inner stagger between size and opacity animations.
+     * On enter this delays the opacity after size; on exit this delays the size after opacity.
+     * Defaults to 0.
+     */
+    staggerDelay?: number;
+    /**
+     * Time (ms) to delay the inner stagger during exit. Defaults to the `staggerDelay` param for symmetry.
+     */
+    exitStaggerDelay?: number;
 };
 
 export declare const CollapseRelaxed: PresenceComponent<CollapseParams>;

package/lib/atoms/blur-atom.js

@@ -5,6 +5,7 @@ import { motionTokens } from '@fluentui/react-motion';
  * @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'.
+ * @param delay - Time (ms) to delay the animation. Defaults to 0.
  * @returns A motion atom object with filter blur keyframes and the supplied duration and easing.
  */ export const blurAtom = ({ direction, duration, easing = motionTokens.curveLinear, delay = 0, fromRadius = '10px' })=>{
     const keyframes = [

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

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

package/lib/atoms/rotate-atom.js

@@ -10,6 +10,7 @@ const createRotateValue = (axis, angle)=>{
  * @param axis - The axis of rotation: 'x', 'y', or 'z'. Defaults to 'y'.
  * @param angle - The starting rotation angle in degrees. Defaults to -90.
  * @param exitAngle - The ending rotation angle in degrees. Defaults to the negation of `angle`.
+ * @param delay - Time (ms) to delay the animation. Defaults to 0.
  * @returns A motion atom object with rotate keyframes and the supplied duration and easing.
  */ export const rotateAtom = ({ direction, duration, easing = motionTokens.curveLinear, delay = 0, axis = 'y', angle = -90, exitAngle = -angle })=>{
     let fromAngle = angle;

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/atoms/rotate-atom.ts"],"sourcesContent":["import { AtomMotion, motionTokens } from '@fluentui/react-motion';\nimport type { RotateParams } from '../components/Rotate/rotate-types';\nimport { BaseAtomParams } from '../types';\n\ntype Axis3D = NonNullable<RotateParams['axis']>;\n\ninterface RotateAtomParams extends BaseAtomParams {\n  axis?: Axis3D;\n  angle?: number;\n  exitAngle?: number;\n}\n\nconst createRotateValue = (axis: Axis3D, angle: number): string => {\n  return `${axis.toLowerCase()} ${angle}deg`;\n};\n\n/**\n * Generates a motion atom object for a rotation around a single axis.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param axis - The axis of rotation: 'x', 'y', or 'z'. Defaults to 'y'.\n * @param angle - The starting rotation angle in degrees. Defaults to -90.\n * @param exitAngle - The ending rotation angle in degrees. Defaults to the negation of `angle`.\n * @returns A motion atom object with rotate keyframes and the supplied duration and easing.\n */\nexport const rotateAtom = ({\n  direction,\n  duration,\n  easing = motionTokens.curveLinear,\n  delay = 0,\n  axis = 'y',\n  angle = -90,\n  exitAngle = -angle,\n}: RotateAtomParams): AtomMotion => {\n  let fromAngle = angle;\n  let toAngle = 0;\n\n  if (direction === 'exit') {\n    fromAngle = 0;\n    toAngle = exitAngle;\n  }\n  const keyframes = [{ rotate: createRotateValue(axis, fromAngle) }, { rotate: createRotateValue(axis, toAngle) }];\n\n  return {\n    keyframes,\n    duration,\n    easing,\n    delay,\n  };\n};\n"],"names":["motionTokens","createRotateValue","axis","angle","toLowerCase","rotateAtom","direction","duration","easing","curveLinear","delay","exitAngle","fromAngle","toAngle","keyframes","rotate"],"mappings":"AAAA,SAAqBA,YAAY,QAAQ,yBAAyB;AAYlE,MAAMC,oBAAoB,CAACC,MAAcC;IACvC,OAAO,GAAGD,KAAKE,WAAW,GAAG,CAAC,EAAED,MAAM,GAAG,CAAC;AAC5C;AAEA;;;;;;;;;CASC,GACD,OAAO,MAAME,aAAa,CAAC,EACzBC,SAAS,EACTC,QAAQ,EACRC,SAASR,aAAaS,WAAW,EACjCC,QAAQ,CAAC,EACTR,OAAO,GAAG,EACVC,QAAQ,CAAC,EAAE,EACXQ,YAAY,CAACR,KAAK,EACD;IACjB,IAAIS,YAAYT;IAChB,IAAIU,UAAU;IAEd,IAAIP,cAAc,QAAQ;QACxBM,YAAY;QACZC,UAAUF;IACZ;IACA,MAAMG,YAAY;QAAC;YAAEC,QAAQd,kBAAkBC,MAAMU;QAAW;QAAG;YAAEG,QAAQd,kBAAkBC,MAAMW;QAAS;KAAE;IAEhH,OAAO;QACLC;QACAP;QACAC;QACAE;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/atoms/rotate-atom.ts"],"sourcesContent":["import { AtomMotion, motionTokens } from '@fluentui/react-motion';\nimport type { RotateParams } from '../components/Rotate/rotate-types';\nimport { BaseAtomParams } from '../types';\n\ntype Axis3D = NonNullable<RotateParams['axis']>;\n\ninterface RotateAtomParams extends BaseAtomParams {\n  axis?: Axis3D;\n  angle?: number;\n  exitAngle?: number;\n}\n\nconst createRotateValue = (axis: Axis3D, angle: number): string => {\n  return `${axis.toLowerCase()} ${angle}deg`;\n};\n\n/**\n * Generates a motion atom object for a rotation around a single axis.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param axis - The axis of rotation: 'x', 'y', or 'z'. Defaults to 'y'.\n * @param angle - The starting rotation angle in degrees. Defaults to -90.\n * @param exitAngle - The ending rotation angle in degrees. Defaults to the negation of `angle`.\n * @param delay - Time (ms) to delay the animation. Defaults to 0.\n * @returns A motion atom object with rotate keyframes and the supplied duration and easing.\n */\nexport const rotateAtom = ({\n  direction,\n  duration,\n  easing = motionTokens.curveLinear,\n  delay = 0,\n  axis = 'y',\n  angle = -90,\n  exitAngle = -angle,\n}: RotateAtomParams): AtomMotion => {\n  let fromAngle = angle;\n  let toAngle = 0;\n\n  if (direction === 'exit') {\n    fromAngle = 0;\n    toAngle = exitAngle;\n  }\n  const keyframes = [{ rotate: createRotateValue(axis, fromAngle) }, { rotate: createRotateValue(axis, toAngle) }];\n\n  return {\n    keyframes,\n    duration,\n    easing,\n    delay,\n  };\n};\n"],"names":["motionTokens","createRotateValue","axis","angle","toLowerCase","rotateAtom","direction","duration","easing","curveLinear","delay","exitAngle","fromAngle","toAngle","keyframes","rotate"],"mappings":"AAAA,SAAqBA,YAAY,QAAQ,yBAAyB;AAYlE,MAAMC,oBAAoB,CAACC,MAAcC;IACvC,OAAO,GAAGD,KAAKE,WAAW,GAAG,CAAC,EAAED,MAAM,GAAG,CAAC;AAC5C;AAEA;;;;;;;;;;CAUC,GACD,OAAO,MAAME,aAAa,CAAC,EACzBC,SAAS,EACTC,QAAQ,EACRC,SAASR,aAAaS,WAAW,EACjCC,QAAQ,CAAC,EACTR,OAAO,GAAG,EACVC,QAAQ,CAAC,EAAE,EACXQ,YAAY,CAACR,KAAK,EACD;IACjB,IAAIS,YAAYT;IAChB,IAAIU,UAAU;IAEd,IAAIP,cAAc,QAAQ;QACxBM,YAAY;QACZC,UAAUF;IACZ;IACA,MAAMG,YAAY;QAAC;YAAEC,QAAQd,kBAAkBC,MAAMU;QAAW;QAAG;YAAEG,QAAQd,kBAAkBC,MAAMW;QAAS;KAAE;IAEhH,OAAO;QACLC;QACAP;QACAC;QACAE;IACF;AACF,EAAE"}

package/lib/atoms/scale-atom.js

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

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

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

package/lib/atoms/slide-atom.js

@@ -6,6 +6,7 @@ import { motionTokens } from '@fluentui/react-motion';
  * @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'.
+ * @param delay - Time (ms) to delay the animation. Defaults to 0.
  * @returns A motion atom object with translate keyframes and the supplied duration and easing.
  */ export const slideAtom = ({ direction, duration, easing = motionTokens.curveLinear, delay = 0, fromX = '0px', fromY = '20px' })=>{
     const keyframes = [

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

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

package/lib/components/Collapse/Collapse.js

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

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/**\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"],"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"}
+{"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 { CollapseParams } from './collapse-types';\nimport { sizeEnterAtom, sizeExitAtom, whitespaceAtom } from './collapse-atoms';\nimport { fadeAtom } from '../../atoms/fade-atom';\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 delay - Time (ms) to delay the entire enter transition. Defaults to 0\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 exitDelay - Time (ms) to delay the entire exit transition. Defaults to the `delay` param for symmetry\n * @param staggerDelay - Time (ms) offset between the size and opacity animations. Defaults to 0\n * @param exitStaggerDelay - Time (ms) offset between the size and opacity animations on exit. Defaults to the `staggerDelay` param for symmetry\n * @param sizeDuration - Time (ms) for the size animation during enter. Defaults to `duration` for unified timing\n * @param opacityDuration - Time (ms) for the opacity animation during enter. Defaults to `sizeDuration` for synchronized timing\n * @param exitSizeDuration - Time (ms) for the size animation during exit. Defaults to `exitDuration` for unified timing\n * @param exitOpacityDuration - Time (ms) for the opacity animation during exit. Defaults to `exitSizeDuration` for synchronized timing\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 * @param fromSize - The starting size for the expand animation. Defaults to `'0px'`\n */\nconst collapsePresenceFn: PresenceMotionFn<CollapseParams> = ({\n  element,\n  // Primary duration controls (simple API)\n  duration = motionTokens.durationNormal,\n  exitDuration = duration,\n\n  // Granular duration controls with smart defaults (advanced API)\n  sizeDuration = duration,\n  opacityDuration = sizeDuration,\n  exitSizeDuration = exitDuration,\n  exitOpacityDuration = exitSizeDuration,\n\n  // Other timing controls\n  easing = motionTokens.curveEasyEaseMax,\n  delay = 0,\n  exitEasing = easing,\n  exitDelay = delay,\n  staggerDelay = 0,\n  exitStaggerDelay = staggerDelay,\n\n  // Animation controls\n  animateOpacity = true,\n  orientation = 'vertical',\n  fromSize = '0px',\n}) => {\n  // ----- ENTER -----\n  // The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.\n  // For enter: size expands first, then opacity fades in after staggerDelay\n  const enterAtoms: AtomMotion[] = [\n    // Apply global delay to size atom - size expansion starts first\n    sizeEnterAtom({ orientation, duration: sizeDuration, easing, element, fromSize, delay }),\n    whitespaceAtom({ direction: 'enter', orientation, duration: sizeDuration, easing, delay }),\n  ];\n  // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.\n  if (animateOpacity) {\n    enterAtoms.push(fadeAtom({ direction: 'enter', duration: opacityDuration, easing, delay: delay + staggerDelay }));\n  }\n\n  // ----- EXIT -----\n  // The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.\n  // For exit: opacity fades out first, then size collapses after exitStaggerDelay\n  const exitAtoms: AtomMotion[] = [];\n  // Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected.\n  if (animateOpacity) {\n    exitAtoms.push(\n      fadeAtom({ direction: 'exit', duration: exitOpacityDuration, easing: exitEasing, delay: exitDelay }),\n    );\n  }\n\n  exitAtoms.push(\n    sizeExitAtom({\n      orientation,\n      duration: exitSizeDuration,\n      easing: exitEasing,\n      element,\n      delay: exitDelay + exitStaggerDelay,\n      fromSize,\n    }),\n    whitespaceAtom({\n      direction: 'exit',\n      orientation,\n      duration: exitSizeDuration,\n      easing: exitEasing,\n      delay: exitDelay + exitStaggerDelay, // Size/whitespace collapse after opacity finishes fading out\n    }),\n  );\n\n  return {\n    enter: enterAtoms,\n    exit: exitAtoms,\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 = createPresenceComponentVariant(Collapse, {\n  // Enter timing per motion design spec\n  sizeDuration: motionTokens.durationNormal, // 200ms\n  opacityDuration: motionTokens.durationSlower, // 400ms\n  staggerDelay: motionTokens.durationNormal, // 200ms\n\n  // Exit timing per motion design spec\n  exitSizeDuration: motionTokens.durationNormal, // 200ms\n  exitOpacityDuration: motionTokens.durationSlower, // 400ms\n  exitStaggerDelay: motionTokens.durationSlower, // 400ms\n\n  // Easing per motion design spec\n  easing: motionTokens.curveEasyEase,\n  exitEasing: motionTokens.curveEasyEase,\n});\n"],"names":["motionTokens","createPresenceComponent","createPresenceComponentVariant","sizeEnterAtom","sizeExitAtom","whitespaceAtom","fadeAtom","collapsePresenceFn","element","duration","durationNormal","exitDuration","sizeDuration","opacityDuration","exitSizeDuration","exitOpacityDuration","easing","curveEasyEaseMax","delay","exitEasing","exitDelay","staggerDelay","exitStaggerDelay","animateOpacity","orientation","fromSize","enterAtoms","direction","push","exitAtoms","enter","exit","Collapse","CollapseSnappy","durationFast","CollapseRelaxed","durationSlower","CollapseDelayed","curveEasyEase"],"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;;;;;;;;;;;;;;;;;;;CAmBC,GACD,MAAMC,qBAAuD,CAAC,EAC5DC,OAAO,EACP,yCAAyC;AACzCC,WAAWT,aAAaU,cAAc,EACtCC,eAAeF,QAAQ,EAEvB,gEAAgE;AAChEG,eAAeH,QAAQ,EACvBI,kBAAkBD,YAAY,EAC9BE,mBAAmBH,YAAY,EAC/BI,sBAAsBD,gBAAgB,EAEtC,wBAAwB;AACxBE,SAAShB,aAAaiB,gBAAgB,EACtCC,QAAQ,CAAC,EACTC,aAAaH,MAAM,EACnBI,YAAYF,KAAK,EACjBG,eAAe,CAAC,EAChBC,mBAAmBD,YAAY,EAE/B,qBAAqB;AACrBE,iBAAiB,IAAI,EACrBC,cAAc,UAAU,EACxBC,WAAW,KAAK,EACjB;IACC,oBAAoB;IACpB,0FAA0F;IAC1F,0EAA0E;IAC1E,MAAMC,aAA2B;QAC/B,gEAAgE;QAChEvB,cAAc;YAAEqB;YAAaf,UAAUG;YAAcI;YAAQR;YAASiB;YAAUP;QAAM;QACtFb,eAAe;YAAEsB,WAAW;YAASH;YAAaf,UAAUG;YAAcI;YAAQE;QAAM;KACzF;IACD,+EAA+E;IAC/E,IAAIK,gBAAgB;QAClBG,WAAWE,IAAI,CAACtB,SAAS;YAAEqB,WAAW;YAASlB,UAAUI;YAAiBG;YAAQE,OAAOA,QAAQG;QAAa;IAChH;IAEA,mBAAmB;IACnB,yFAAyF;IACzF,gFAAgF;IAChF,MAAMQ,YAA0B,EAAE;IAClC,gFAAgF;IAChF,IAAIN,gBAAgB;QAClBM,UAAUD,IAAI,CACZtB,SAAS;YAAEqB,WAAW;YAAQlB,UAAUM;YAAqBC,QAAQG;YAAYD,OAAOE;QAAU;IAEtG;IAEAS,UAAUD,IAAI,CACZxB,aAAa;QACXoB;QACAf,UAAUK;QACVE,QAAQG;QACRX;QACAU,OAAOE,YAAYE;QACnBG;IACF,IACApB,eAAe;QACbsB,WAAW;QACXH;QACAf,UAAUK;QACVE,QAAQG;QACRD,OAAOE,YAAYE;IACrB;IAGF,OAAO;QACLQ,OAAOJ;QACPK,MAAMF;IACR;AACF;AAEA,gFAAgF,GAChF,OAAO,MAAMG,WAAW/B,wBAAwBM,oBAAoB;AAEpE,OAAO,MAAM0B,iBAAiB/B,+BAA+B8B,UAAU;IACrEvB,UAAUT,aAAakC,YAAY;AACrC,GAAG;AAEH,OAAO,MAAMC,kBAAkBjC,+BAA+B8B,UAAU;IACtEvB,UAAUT,aAAaoC,cAAc;AACvC,GAAG;AAEH,kGAAkG,GAClG,OAAO,MAAMC,kBAAkBnC,+BAA+B8B,UAAU;IACtE,sCAAsC;IACtCpB,cAAcZ,aAAaU,cAAc;IACzCG,iBAAiBb,aAAaoC,cAAc;IAC5Cf,cAAcrB,aAAaU,cAAc;IAEzC,qCAAqC;IACrCI,kBAAkBd,aAAaU,cAAc;IAC7CK,qBAAqBf,aAAaoC,cAAc;IAChDd,kBAAkBtB,aAAaoC,cAAc;IAE7C,gCAAgC;IAChCpB,QAAQhB,aAAasC,aAAa;IAClCnB,YAAYnB,aAAasC,aAAa;AACxC,GAAG"}

package/lib/components/Collapse/collapse-atoms.js

@@ -10,7 +10,7 @@ const sizeValuesForOrientation = (orientation, element)=>{
         toSize
     };
 };
-export const sizeEnterAtom = ({ orientation, duration, easing, element, fromSize = '0' })=>{
+export const sizeEnterAtom = ({ orientation, duration, easing, element, fromSize = '0', delay = 0 })=>{
     const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);
     return {
         keyframes: [
@@ -29,7 +29,9 @@ export const sizeEnterAtom = ({ orientation, duration, easing, element, fromSize
             }
         ],
         duration,
-        easing
+        easing,
+        delay,
+        fill: 'both'
     };
 };
 export const sizeExitAtom = ({ orientation, duration, easing, element, delay = 0, fromSize = '0' })=>{
@@ -47,8 +49,8 @@ export const sizeExitAtom = ({ orientation, duration, easing, element, delay = 0
         ],
         duration,
         easing,
-        fill: 'both',
-        delay
+        delay,
+        fill: 'both'
     };
 };
 // ----- WHITESPACE -----
@@ -88,14 +90,11 @@ const whitespaceValuesForOrientation = (orientation)=>{
             offset
         }
     ];
-    const atom = {
+    return {
         keyframes,
         duration,
         easing,
-        delay
+        delay,
+        fill: 'both'
     };
-    if (direction === 'exit') {
-        atom.fill = 'forwards';
-    }
-    return atom;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Collapse/collapse-atoms.ts"],"sourcesContent":["import { AtomMotion, PresenceDirection } from '@fluentui/react-motion';\nimport { CollapseOrientation } from './collapse-types';\n\n// ----- SIZE -----\n\nconst sizeValuesForOrientation = (orientation: CollapseOrientation, element: Element) => {\n  const sizeName = orientation === 'horizontal' ? 'maxWidth' : 'maxHeight';\n  const overflowName = orientation === 'horizontal' ? 'overflowX' : 'overflowY';\n  const measuredSize = orientation === 'horizontal' ? element.scrollWidth : element.scrollHeight;\n  const toSize = `${measuredSize}px`;\n  return { sizeName, overflowName, toSize };\n};\n\ninterface SizeEnterAtomParams {\n  orientation: CollapseOrientation;\n  duration: number;\n  easing: string;\n  element: HTMLElement;\n  fromSize?: string;\n}\n\nexport const sizeEnterAtom = ({\n  orientation,\n  duration,\n  easing,\n  element,\n  fromSize = '0',\n}: SizeEnterAtomParams): AtomMotion => {\n  const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);\n\n  return {\n    keyframes: [\n      { [sizeName]: fromSize, [overflowName]: 'hidden' },\n      { [sizeName]: toSize, offset: 0.9999, [overflowName]: 'hidden' },\n      { [sizeName]: 'unset', [overflowName]: 'unset' },\n    ],\n    duration,\n    easing,\n  };\n};\n\ninterface SizeExitAtomParams extends SizeEnterAtomParams {\n  delay?: number;\n}\n\nexport const sizeExitAtom = ({\n  orientation,\n  duration,\n  easing,\n  element,\n  delay = 0,\n  fromSize = '0',\n}: SizeExitAtomParams): AtomMotion => {\n  const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);\n\n  return {\n    keyframes: [\n      { [sizeName]: toSize, [overflowName]: 'hidden' },\n      { [sizeName]: fromSize, [overflowName]: 'hidden' },\n    ],\n    duration,\n    easing,\n    fill: 'both',\n    delay,\n  };\n};\n\n// ----- WHITESPACE -----\n\n// Whitespace animation includes padding and margin.\nconst whitespaceValuesForOrientation = (orientation: CollapseOrientation) => {\n  // horizontal whitespace collapse\n  if (orientation === 'horizontal') {\n    return {\n      paddingStart: 'paddingInlineStart',\n      paddingEnd: 'paddingInlineEnd',\n      marginStart: 'marginInlineStart',\n      marginEnd: 'marginInlineEnd',\n    };\n  }\n  // vertical whitespace collapse\n  return {\n    paddingStart: 'paddingBlockStart',\n    paddingEnd: 'paddingBlockEnd',\n    marginStart: 'marginBlockStart',\n    marginEnd: 'marginBlockEnd',\n  };\n};\n\ninterface WhitespaceAtomParams {\n  direction: PresenceDirection;\n  orientation: CollapseOrientation;\n  duration: number;\n  easing: string;\n  delay?: number;\n}\n\n/**\n * A collapse animates an element's height to zero,\n but the zero height does not eliminate padding or margin in the box model.\n So here we generate keyframes to animate those whitespace properties to zero.\n */\nexport const whitespaceAtom = ({\n  direction,\n  orientation,\n  duration,\n  easing,\n  delay = 0,\n}: WhitespaceAtomParams): AtomMotion => {\n  const { paddingStart, paddingEnd, marginStart, marginEnd } = whitespaceValuesForOrientation(orientation);\n  // The keyframe with zero whitespace is at the start for enter and at the end for exit.\n  const offset = direction === 'enter' ? 0 : 1;\n  const keyframes = [{ [paddingStart]: '0', [paddingEnd]: '0', [marginStart]: '0', [marginEnd]: '0', offset }];\n\n  const atom: AtomMotion = {\n    keyframes,\n    duration,\n    easing,\n    delay,\n  };\n  if (direction === 'exit') {\n    atom.fill = 'forwards';\n  }\n  return atom;\n};\n"],"names":["sizeValuesForOrientation","orientation","element","sizeName","overflowName","measuredSize","scrollWidth","scrollHeight","toSize","sizeEnterAtom","duration","easing","fromSize","keyframes","offset","sizeExitAtom","delay","fill","whitespaceValuesForOrientation","paddingStart","paddingEnd","marginStart","marginEnd","whitespaceAtom","direction","atom"],"mappings":"AAGA,mBAAmB;AAEnB,MAAMA,2BAA2B,CAACC,aAAkCC;IAClE,MAAMC,WAAWF,gBAAgB,eAAe,aAAa;IAC7D,MAAMG,eAAeH,gBAAgB,eAAe,cAAc;IAClE,MAAMI,eAAeJ,gBAAgB,eAAeC,QAAQI,WAAW,GAAGJ,QAAQK,YAAY;IAC9F,MAAMC,SAAS,GAAGH,aAAa,EAAE,CAAC;IAClC,OAAO;QAAEF;QAAUC;QAAcI;IAAO;AAC1C;AAUA,OAAO,MAAMC,gBAAgB,CAAC,EAC5BR,WAAW,EACXS,QAAQ,EACRC,MAAM,EACNT,OAAO,EACPU,WAAW,GAAG,EACM;IACpB,MAAM,EAAET,QAAQ,EAAEC,YAAY,EAAEI,MAAM,EAAE,GAAGR,yBAAyBC,aAAaC;IAEjF,OAAO;QACLW,WAAW;YACT;gBAAE,CAACV,SAAS,EAAES;gBAAU,CAACR,aAAa,EAAE;YAAS;YACjD;gBAAE,CAACD,SAAS,EAAEK;gBAAQM,QAAQ;gBAAQ,CAACV,aAAa,EAAE;YAAS;YAC/D;gBAAE,CAACD,SAAS,EAAE;gBAAS,CAACC,aAAa,EAAE;YAAQ;SAChD;QACDM;QACAC;IACF;AACF,EAAE;AAMF,OAAO,MAAMI,eAAe,CAAC,EAC3Bd,WAAW,EACXS,QAAQ,EACRC,MAAM,EACNT,OAAO,EACPc,QAAQ,CAAC,EACTJ,WAAW,GAAG,EACK;IACnB,MAAM,EAAET,QAAQ,EAAEC,YAAY,EAAEI,MAAM,EAAE,GAAGR,yBAAyBC,aAAaC;IAEjF,OAAO;QACLW,WAAW;YACT;gBAAE,CAACV,SAAS,EAAEK;gBAAQ,CAACJ,aAAa,EAAE;YAAS;YAC/C;gBAAE,CAACD,SAAS,EAAES;gBAAU,CAACR,aAAa,EAAE;YAAS;SAClD;QACDM;QACAC;QACAM,MAAM;QACND;IACF;AACF,EAAE;AAEF,yBAAyB;AAEzB,oDAAoD;AACpD,MAAME,iCAAiC,CAACjB;IACtC,iCAAiC;IACjC,IAAIA,gBAAgB,cAAc;QAChC,OAAO;YACLkB,cAAc;YACdC,YAAY;YACZC,aAAa;YACbC,WAAW;QACb;IACF;IACA,+BAA+B;IAC/B,OAAO;QACLH,cAAc;QACdC,YAAY;QACZC,aAAa;QACbC,WAAW;IACb;AACF;AAUA;;;;CAIC,GACD,OAAO,MAAMC,iBAAiB,CAAC,EAC7BC,SAAS,EACTvB,WAAW,EACXS,QAAQ,EACRC,MAAM,EACNK,QAAQ,CAAC,EACY;IACrB,MAAM,EAAEG,YAAY,EAAEC,UAAU,EAAEC,WAAW,EAAEC,SAAS,EAAE,GAAGJ,+BAA+BjB;IAC5F,uFAAuF;IACvF,MAAMa,SAASU,cAAc,UAAU,IAAI;IAC3C,MAAMX,YAAY;QAAC;YAAE,CAACM,aAAa,EAAE;YAAK,CAACC,WAAW,EAAE;YAAK,CAACC,YAAY,EAAE;YAAK,CAACC,UAAU,EAAE;YAAKR;QAAO;KAAE;IAE5G,MAAMW,OAAmB;QACvBZ;QACAH;QACAC;QACAK;IACF;IACA,IAAIQ,cAAc,QAAQ;QACxBC,KAAKR,IAAI,GAAG;IACd;IACA,OAAOQ;AACT,EAAE"}
+{"version":3,"sources":["../src/components/Collapse/collapse-atoms.ts"],"sourcesContent":["import { AtomMotion, PresenceDirection } from '@fluentui/react-motion';\nimport { CollapseOrientation } from './collapse-types';\n\n// ----- SIZE -----\n\nconst sizeValuesForOrientation = (orientation: CollapseOrientation, element: Element) => {\n  const sizeName = orientation === 'horizontal' ? 'maxWidth' : 'maxHeight';\n  const overflowName = orientation === 'horizontal' ? 'overflowX' : 'overflowY';\n  const measuredSize = orientation === 'horizontal' ? element.scrollWidth : element.scrollHeight;\n  const toSize = `${measuredSize}px`;\n  return { sizeName, overflowName, toSize };\n};\n\ninterface SizeEnterAtomParams {\n  orientation: CollapseOrientation;\n  duration: number;\n  easing: string;\n  element: HTMLElement;\n  fromSize?: string;\n  delay?: number;\n}\n\nexport const sizeEnterAtom = ({\n  orientation,\n  duration,\n  easing,\n  element,\n  fromSize = '0',\n  delay = 0,\n}: SizeEnterAtomParams): AtomMotion => {\n  const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);\n\n  return {\n    keyframes: [\n      { [sizeName]: fromSize, [overflowName]: 'hidden' },\n      { [sizeName]: toSize, offset: 0.9999, [overflowName]: 'hidden' },\n      { [sizeName]: 'unset', [overflowName]: 'unset' },\n    ],\n    duration,\n    easing,\n    delay,\n    fill: 'both',\n  };\n};\n\ninterface SizeExitAtomParams extends SizeEnterAtomParams {\n  delay?: number;\n}\n\nexport const sizeExitAtom = ({\n  orientation,\n  duration,\n  easing,\n  element,\n  delay = 0,\n  fromSize = '0',\n}: SizeExitAtomParams): AtomMotion => {\n  const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);\n\n  return {\n    keyframes: [\n      { [sizeName]: toSize, [overflowName]: 'hidden' },\n      { [sizeName]: fromSize, [overflowName]: 'hidden' },\n    ],\n    duration,\n    easing,\n    delay,\n    fill: 'both',\n  };\n};\n\n// ----- WHITESPACE -----\n\n// Whitespace animation includes padding and margin.\nconst whitespaceValuesForOrientation = (orientation: CollapseOrientation) => {\n  // horizontal whitespace collapse\n  if (orientation === 'horizontal') {\n    return {\n      paddingStart: 'paddingInlineStart',\n      paddingEnd: 'paddingInlineEnd',\n      marginStart: 'marginInlineStart',\n      marginEnd: 'marginInlineEnd',\n    };\n  }\n  // vertical whitespace collapse\n  return {\n    paddingStart: 'paddingBlockStart',\n    paddingEnd: 'paddingBlockEnd',\n    marginStart: 'marginBlockStart',\n    marginEnd: 'marginBlockEnd',\n  };\n};\n\ninterface WhitespaceAtomParams {\n  direction: PresenceDirection;\n  orientation: CollapseOrientation;\n  duration: number;\n  easing: string;\n  delay?: number;\n}\n\n/**\n * A collapse animates an element's height to zero,\n but the zero height does not eliminate padding or margin in the box model.\n So here we generate keyframes to animate those whitespace properties to zero.\n */\nexport const whitespaceAtom = ({\n  direction,\n  orientation,\n  duration,\n  easing,\n  delay = 0,\n}: WhitespaceAtomParams): AtomMotion => {\n  const { paddingStart, paddingEnd, marginStart, marginEnd } = whitespaceValuesForOrientation(orientation);\n  // The keyframe with zero whitespace is at the start for enter and at the end for exit.\n  const offset = direction === 'enter' ? 0 : 1;\n  const keyframes = [{ [paddingStart]: '0', [paddingEnd]: '0', [marginStart]: '0', [marginEnd]: '0', offset }];\n\n  return {\n    keyframes,\n    duration,\n    easing,\n    delay,\n    fill: 'both',\n  };\n};\n"],"names":["sizeValuesForOrientation","orientation","element","sizeName","overflowName","measuredSize","scrollWidth","scrollHeight","toSize","sizeEnterAtom","duration","easing","fromSize","delay","keyframes","offset","fill","sizeExitAtom","whitespaceValuesForOrientation","paddingStart","paddingEnd","marginStart","marginEnd","whitespaceAtom","direction"],"mappings":"AAGA,mBAAmB;AAEnB,MAAMA,2BAA2B,CAACC,aAAkCC;IAClE,MAAMC,WAAWF,gBAAgB,eAAe,aAAa;IAC7D,MAAMG,eAAeH,gBAAgB,eAAe,cAAc;IAClE,MAAMI,eAAeJ,gBAAgB,eAAeC,QAAQI,WAAW,GAAGJ,QAAQK,YAAY;IAC9F,MAAMC,SAAS,GAAGH,aAAa,EAAE,CAAC;IAClC,OAAO;QAAEF;QAAUC;QAAcI;IAAO;AAC1C;AAWA,OAAO,MAAMC,gBAAgB,CAAC,EAC5BR,WAAW,EACXS,QAAQ,EACRC,MAAM,EACNT,OAAO,EACPU,WAAW,GAAG,EACdC,QAAQ,CAAC,EACW;IACpB,MAAM,EAAEV,QAAQ,EAAEC,YAAY,EAAEI,MAAM,EAAE,GAAGR,yBAAyBC,aAAaC;IAEjF,OAAO;QACLY,WAAW;YACT;gBAAE,CAACX,SAAS,EAAES;gBAAU,CAACR,aAAa,EAAE;YAAS;YACjD;gBAAE,CAACD,SAAS,EAAEK;gBAAQO,QAAQ;gBAAQ,CAACX,aAAa,EAAE;YAAS;YAC/D;gBAAE,CAACD,SAAS,EAAE;gBAAS,CAACC,aAAa,EAAE;YAAQ;SAChD;QACDM;QACAC;QACAE;QACAG,MAAM;IACR;AACF,EAAE;AAMF,OAAO,MAAMC,eAAe,CAAC,EAC3BhB,WAAW,EACXS,QAAQ,EACRC,MAAM,EACNT,OAAO,EACPW,QAAQ,CAAC,EACTD,WAAW,GAAG,EACK;IACnB,MAAM,EAAET,QAAQ,EAAEC,YAAY,EAAEI,MAAM,EAAE,GAAGR,yBAAyBC,aAAaC;IAEjF,OAAO;QACLY,WAAW;YACT;gBAAE,CAACX,SAAS,EAAEK;gBAAQ,CAACJ,aAAa,EAAE;YAAS;YAC/C;gBAAE,CAACD,SAAS,EAAES;gBAAU,CAACR,aAAa,EAAE;YAAS;SAClD;QACDM;QACAC;QACAE;QACAG,MAAM;IACR;AACF,EAAE;AAEF,yBAAyB;AAEzB,oDAAoD;AACpD,MAAME,iCAAiC,CAACjB;IACtC,iCAAiC;IACjC,IAAIA,gBAAgB,cAAc;QAChC,OAAO;YACLkB,cAAc;YACdC,YAAY;YACZC,aAAa;YACbC,WAAW;QACb;IACF;IACA,+BAA+B;IAC/B,OAAO;QACLH,cAAc;QACdC,YAAY;QACZC,aAAa;QACbC,WAAW;IACb;AACF;AAUA;;;;CAIC,GACD,OAAO,MAAMC,iBAAiB,CAAC,EAC7BC,SAAS,EACTvB,WAAW,EACXS,QAAQ,EACRC,MAAM,EACNE,QAAQ,CAAC,EACY;IACrB,MAAM,EAAEM,YAAY,EAAEC,UAAU,EAAEC,WAAW,EAAEC,SAAS,EAAE,GAAGJ,+BAA+BjB;IAC5F,uFAAuF;IACvF,MAAMc,SAASS,cAAc,UAAU,IAAI;IAC3C,MAAMV,YAAY;QAAC;YAAE,CAACK,aAAa,EAAE;YAAK,CAACC,WAAW,EAAE;YAAK,CAACC,YAAY,EAAE;YAAK,CAACC,UAAU,EAAE;YAAKP;QAAO;KAAE;IAE5G,OAAO;QACLD;QACAJ;QACAC;QACAE;QACAG,MAAM;IACR;AACF,EAAE"}