@fluentui/react-motion-components-preview 0.0.0-nightly-20260106-0406.1 → 0.0.0-nightly-20260108-0406.1

package/CHANGELOG.md

@@ -1,19 +1,19 @@
 # Change Log - @fluentui/react-motion-components-preview
 
-This log was last generated on Tue, 06 Jan 2026 04:21:37 GMT and should not be manually modified.
+This log was last generated on Thu, 08 Jan 2026 04:21:48 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20260106-0406.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.0.0-nightly-20260106-0406.1)
+## [0.0.0-nightly-20260108-0406.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.0.0-nightly-20260108-0406.1)
 
-Tue, 06 Jan 2026 04:21:37 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.14.1..@fluentui/react-motion-components-preview_v0.0.0-nightly-20260106-0406.1)
+Thu, 08 Jan 2026 04:21:48 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.14.1..@fluentui/react-motion-components-preview_v0.0.0-nightly-20260108-0406.1)
 
 ### Changes
 
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/react-motion to v0.0.0-nightly-20260106-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/dd312938a66ffac97bfd02649352bd0f04daf3cb) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20260106-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/dd312938a66ffac97bfd02649352bd0f04daf3cb) by beachball)
+- Bump @fluentui/react-motion to v0.0.0-nightly-20260108-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/699a5d7ffebdd85d3b9a321e43788800f3056ded) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20260108-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/699a5d7ffebdd85d3b9a321e43788800f3056ded) by beachball)
 
 ## [0.14.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.14.0)
 

package/dist/index.d.ts

@@ -43,23 +43,25 @@ export declare const Blur: PresenceComponent<BlurParams>;
  * @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 '10px'.
- * @param toRadius - The ending blur radius value with units (e.g., '0px', '5px'). Defaults to '0px'.
+ * @param outRadius - Blur radius for the out state (exited) with units (e.g., '20px', '1rem'). Defaults to '10px'.
+ * @param inRadius - Blur radius for the in state (entered) with units (e.g., '0px', '5px'). Defaults to '0px'.
  * @param delay - Time (ms) to delay the animation. Defaults to 0.
  * @returns A motion atom object with filter blur keyframes and the supplied duration and easing.
  */
-export declare const blurAtom: ({ direction, duration, easing, delay, fromRadius, toRadius, }: BlurAtomParams) => AtomMotion;
+export declare const blurAtom: ({ direction, duration, easing, delay, outRadius, inRadius, }: BlurAtomParams) => AtomMotion;
 
 declare interface BlurAtomParams extends BaseAtomParams {
-    fromRadius?: string;
-    toRadius?: string;
+    /** Blur radius for the out state (exited). Defaults to '10px'. */
+    outRadius?: string;
+    /** Blur radius for the in state (entered). Defaults to '0px'. */
+    inRadius?: string;
 }
 
 export declare type BlurParams = BasePresenceParams & AnimateOpacity & {
-    /** The blur radius with units to animate from. Defaults to '10px'. */
-    fromRadius?: string;
-    /** The blur radius with units to animate to. Defaults to '0px'. */
-    toRadius?: string;
+    /** Blur radius for the out state (exited). Defaults to '10px'. */
+    outRadius?: string;
+    /** Blur radius for the in state (entered). Defaults to '0px'. */
+    inRadius?: string;
 };
 
 /** A React component that applies collapse/expand transitions to its children. */
@@ -87,8 +89,8 @@ declare type CollapseOrientation = 'horizontal' | 'vertical';
 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;
+    /** Size for the out state (collapsed). Defaults to `'0px'`. */
+    outSize?: 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.
@@ -114,26 +116,26 @@ export declare const Fade: PresenceComponent<FadeParams>;
  * @param duration - The duration of the motion in milliseconds.
  * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
  * @param delay - The delay before the motion starts. Defaults to 0.
- * @param fromOpacity - The starting opacity value. Defaults to 0.
- * @param toOpacity - The ending opacity value. Defaults to 1.
+ * @param outOpacity - Opacity for the out state (exited). Defaults to 0.
+ * @param inOpacity - Opacity for the in state (entered). Defaults to 1.
  * @returns A motion atom object with opacity keyframes and the supplied duration and easing.
  */
-export declare const fadeAtom: ({ direction, duration, easing, delay, fromOpacity, toOpacity, }: FadeAtomParams) => AtomMotion;
+export declare const fadeAtom: ({ direction, duration, easing, delay, outOpacity, inOpacity, }: FadeAtomParams) => AtomMotion;
 
 declare interface FadeAtomParams extends BaseAtomParams {
     /** Defines how values are applied before and after execution. Defaults to 'both'. */
     fill?: FillMode;
-    /** The starting opacity value. Defaults to 0. */
-    fromOpacity?: number;
-    /** The ending opacity value. Defaults to 1. */
-    toOpacity?: number;
+    /** Opacity for the out state (exited). Defaults to 0. */
+    outOpacity?: number;
+    /** Opacity for the in state (entered). Defaults to 1. */
+    inOpacity?: number;
 }
 
 export declare type FadeParams = BasePresenceParams & {
-    /** The starting opacity value. Defaults to 0. */
-    fromOpacity?: number;
-    /** The ending opacity value. Defaults to 1. */
-    toOpacity?: number;
+    /** Opacity for the out state (exited). Defaults to 0. */
+    outOpacity?: number;
+    /** Opacity for the in state (entered). Defaults to 1. */
+    inOpacity?: number;
 };
 
 export declare const FadeRelaxed: PresenceComponent<FadeParams>;
@@ -178,17 +180,19 @@ export declare const Rotate: PresenceComponent<RotateParams>;
  * @param duration - The duration of the motion in milliseconds.
  * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
  * @param axis - The axis of rotation: 'x', 'y', or 'z'. Defaults to 'y'.
- * @param fromAngle - The starting rotation angle in degrees. Defaults to -90.
- * @param toAngle - The ending rotation angle in degrees. Defaults to 0.
+ * @param outAngle - Rotation angle for the out state (exited) in degrees. Defaults to -90.
+ * @param inAngle - Rotation angle for the in state (entered) in degrees. Defaults to 0.
  * @param delay - Time (ms) to delay the animation. Defaults to 0.
  * @returns A motion atom object with rotate keyframes and the supplied duration and easing.
  */
-export declare const rotateAtom: ({ direction, duration, easing, delay, axis, fromAngle, toAngle, }: RotateAtomParams) => AtomMotion;
+export declare const rotateAtom: ({ direction, duration, easing, delay, axis, outAngle, inAngle, }: RotateAtomParams) => AtomMotion;
 
 declare interface RotateAtomParams extends BaseAtomParams {
     axis?: Axis3D_2;
-    fromAngle?: number;
-    toAngle?: number;
+    /** Rotation angle for the out state (exited) in degrees. Defaults to -90. */
+    outAngle?: number;
+    /** Rotation angle for the in state (entered) in degrees. Defaults to 0. */
+    inAngle?: number;
 }
 
 export declare type RotateParams = BasePresenceParams & AnimateOpacity & {
@@ -198,15 +202,15 @@ export declare type RotateParams = BasePresenceParams & AnimateOpacity & {
      */
     axis?: Axis3D;
     /**
-     * The starting rotation angle in degrees.
+     * Rotation angle for the out state (exited) in degrees.
      * Defaults to -90.
      */
-    fromAngle?: number;
+    outAngle?: number;
     /**
-     * The ending rotation angle in degrees.
+     * Rotation angle for the in state (entered) in degrees.
      * Defaults to 0.
      */
-    toAngle?: number;
+    inAngle?: number;
 };
 
 /** A React component that applies scale in/out transitions to its children. */
@@ -217,23 +221,25 @@ export declare const Scale: PresenceComponent<ScaleParams>;
  * @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 fromScale - The starting scale value. Defaults to 0.9.
- * @param toScale - The ending scale value. Defaults to 1.
+ * @param outScale - Scale for the out state (exited). Defaults to 0.9.
+ * @param inScale - Scale for the in state (entered). Defaults to 1.
  * @param delay - Time (ms) to delay the animation. Defaults to 0.
  * @returns A motion atom object with scale keyframes and the supplied duration and easing.
  */
-export declare const scaleAtom: ({ direction, duration, easing, delay, fromScale, toScale, }: ScaleAtomParams) => AtomMotion;
+export declare const scaleAtom: ({ direction, duration, easing, delay, outScale, inScale, }: ScaleAtomParams) => AtomMotion;
 
 declare interface ScaleAtomParams extends BaseAtomParams {
-    fromScale?: number;
-    toScale?: number;
+    /** Scale for the out state (exited). Defaults to 0.9. */
+    outScale?: number;
+    /** Scale for the in state (entered). Defaults to 1. */
+    inScale?: number;
 }
 
 export declare type ScaleParams = BasePresenceParams & AnimateOpacity & {
-    /** The scale value to animate from. Defaults to `0.9`. */
-    fromScale?: number;
-    /** The scale value to animate to. Defaults to `1`. */
-    toScale?: number;
+    /** Scale for the out state (exited). Defaults to `0.9`. */
+    outScale?: number;
+    /** Scale for the in state (entered). Defaults to `1`. */
+    inScale?: number;
 };
 
 export declare const ScaleRelaxed: PresenceComponent<ScaleParams>;
@@ -248,31 +254,35 @@ export declare const Slide: PresenceComponent<SlideParams>;
  * @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., '50px', '100%'). Defaults to '0px'.
- * @param fromY - The starting Y translate value with units (e.g., '50px', '100%'). Defaults to '0px'.
- * @param toX - The ending X translate value with units (e.g.'5px', '10%'). Defaults to '0px'.
- * @param toY - The ending Y translate value with units (e.g., '5px', '10%'). Defaults to '0px'.
+ * @param outX - X translate for the out state (exited) with units (e.g., '50px', '100%'). Defaults to '0px'.
+ * @param outY - Y translate for the out state (exited) with units (e.g., '50px', '100%'). Defaults to '0px'.
+ * @param inX - X translate for the in state (entered) with units (e.g., '5px', '10%'). Defaults to '0px'.
+ * @param inY - Y translate for the in state (entered) with units (e.g., '5px', '10%'). Defaults to '0px'.
  * @param delay - Time (ms) to delay the animation. Defaults to 0.
  * @returns A motion atom object with translate keyframes and the supplied duration and easing.
  */
-export declare const slideAtom: ({ direction, duration, easing, delay, fromX, fromY, toX, toY, }: SlideAtomParams) => AtomMotion;
+export declare const slideAtom: ({ direction, duration, easing, delay, outX, outY, inX, inY, }: SlideAtomParams) => AtomMotion;
 
 declare interface SlideAtomParams extends BaseAtomParams {
-    fromX?: string;
-    fromY?: string;
-    toX?: string;
-    toY?: string;
+    /** X translate for the out state (exited). Defaults to '0px'. */
+    outX?: string;
+    /** Y translate for the out state (exited). Defaults to '0px'. */
+    outY?: string;
+    /** X translate for the in state (entered). Defaults to '0px'. */
+    inX?: string;
+    /** Y translate for the in state (entered). Defaults to '0px'. */
+    inY?: string;
 }
 
 export declare type SlideParams = BasePresenceParams & AnimateOpacity & {
-    /** The X translate value with units to animate from. Defaults to `'0px'`. */
-    fromX?: string;
-    /** The Y translate value with units to animate from. Defaults to `'20px'`. */
-    fromY?: string;
-    /** The X translate value with units to animate to. Defaults to `'0px'`. */
-    toX?: string;
-    /** The Y translate value with units to animate to. Defaults to `'0px'`. */
-    toY?: string;
+    /** X translate for the out state (exited). Defaults to `'0px'`. */
+    outX?: string;
+    /** Y translate for the out state (exited). Defaults to `'0px'`. */
+    outY?: string;
+    /** X translate for the in state (entered). Defaults to `'0px'`. */
+    inX?: string;
+    /** Y translate for the in state (entered). Defaults to `'0px'`. */
+    inY?: string;
 };
 
 export declare const SlideRelaxed: PresenceComponent<SlideParams>;

package/lib/atoms/blur-atom.js

@@ -4,17 +4,17 @@ 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 fromRadius - The blur radius value with units (e.g., '20px', '1rem'). Defaults to '10px'.
- * @param toRadius - The ending blur radius value with units (e.g., '0px', '5px'). Defaults to '0px'.
+ * @param outRadius - Blur radius for the out state (exited) with units (e.g., '20px', '1rem'). Defaults to '10px'.
+ * @param inRadius - Blur radius for the in state (entered) with units (e.g., '0px', '5px'). Defaults to '0px'.
  * @param delay - Time (ms) to delay the animation. Defaults to 0.
  * @returns A motion atom object with filter blur keyframes and the supplied duration and easing.
- */ export const blurAtom = ({ direction, duration, easing = motionTokens.curveLinear, delay = 0, fromRadius = '10px', toRadius = '0px' })=>{
+ */ export const blurAtom = ({ direction, duration, easing = motionTokens.curveLinear, delay = 0, outRadius = '10px', inRadius = '0px' })=>{
     const keyframes = [
         {
-            filter: `blur(${fromRadius})`
+            filter: `blur(${outRadius})`
         },
         {
-            filter: `blur(${toRadius})`
+            filter: `blur(${inRadius})`
         }
     ];
     if (direction === 'exit') {

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

package/lib/atoms/fade-atom.js

@@ -5,16 +5,16 @@ 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 delay - The delay before the motion starts. Defaults to 0.
- * @param fromOpacity - The starting opacity value. Defaults to 0.
- * @param toOpacity - The ending opacity value. Defaults to 1.
+ * @param outOpacity - Opacity for the out state (exited). Defaults to 0.
+ * @param inOpacity - Opacity for the in state (entered). Defaults to 1.
  * @returns A motion atom object with opacity keyframes and the supplied duration and easing.
- */ export const fadeAtom = ({ direction, duration, easing = motionTokens.curveLinear, delay = 0, fromOpacity = 0, toOpacity = 1 })=>{
+ */ export const fadeAtom = ({ direction, duration, easing = motionTokens.curveLinear, delay = 0, outOpacity = 0, inOpacity = 1 })=>{
     const keyframes = [
         {
-            opacity: fromOpacity
+            opacity: outOpacity
         },
         {
-            opacity: toOpacity
+            opacity: inOpacity
         }
     ];
     if (direction === 'exit') {

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

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

package/lib/atoms/rotate-atom.js

@@ -8,17 +8,17 @@ const createRotateValue = (axis, angle)=>{
  * @param duration - The duration of the motion in milliseconds.
  * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
  * @param axis - The axis of rotation: 'x', 'y', or 'z'. Defaults to 'y'.
- * @param fromAngle - The starting rotation angle in degrees. Defaults to -90.
- * @param toAngle - The ending rotation angle in degrees. Defaults to 0.
+ * @param outAngle - Rotation angle for the out state (exited) in degrees. Defaults to -90.
+ * @param inAngle - Rotation angle for the in state (entered) in degrees. Defaults to 0.
  * @param delay - Time (ms) to delay the animation. Defaults to 0.
  * @returns A motion atom object with rotate keyframes and the supplied duration and easing.
- */ export const rotateAtom = ({ direction, duration, easing = motionTokens.curveLinear, delay = 0, axis = 'z', fromAngle = -90, toAngle = 0 })=>{
+ */ export const rotateAtom = ({ direction, duration, easing = motionTokens.curveLinear, delay = 0, axis = 'z', outAngle = -90, inAngle = 0 })=>{
     const keyframes = [
         {
-            rotate: createRotateValue(axis, fromAngle)
+            rotate: createRotateValue(axis, outAngle)
         },
         {
-            rotate: createRotateValue(axis, toAngle)
+            rotate: createRotateValue(axis, inAngle)
         }
     ];
     if (direction === 'exit') {

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

package/lib/atoms/scale-atom.js

@@ -4,17 +4,17 @@ 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 fromScale - The starting scale value. Defaults to 0.9.
- * @param toScale - The ending scale value. Defaults to 1.
+ * @param outScale - Scale for the out state (exited). Defaults to 0.9.
+ * @param inScale - Scale for the in state (entered). Defaults to 1.
  * @param delay - Time (ms) to delay the animation. Defaults to 0.
  * @returns A motion atom object with scale keyframes and the supplied duration and easing.
- */ export const scaleAtom = ({ direction, duration, easing = motionTokens.curveLinear, delay = 0, fromScale = 0.9, toScale = 1 })=>{
+ */ export const scaleAtom = ({ direction, duration, easing = motionTokens.curveLinear, delay = 0, outScale = 0.9, inScale = 1 })=>{
     const keyframes = [
         {
-            scale: fromScale
+            scale: outScale
         },
         {
-            scale: toScale
+            scale: inScale
         }
     ];
     if (direction === 'exit') {

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

package/lib/atoms/slide-atom.js

@@ -4,19 +4,19 @@ 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 fromX - The starting X translate value with units (e.g., '50px', '100%'). Defaults to '0px'.
- * @param fromY - The starting Y translate value with units (e.g., '50px', '100%'). Defaults to '0px'.
- * @param toX - The ending X translate value with units (e.g.'5px', '10%'). Defaults to '0px'.
- * @param toY - The ending Y translate value with units (e.g., '5px', '10%'). Defaults to '0px'.
+ * @param outX - X translate for the out state (exited) with units (e.g., '50px', '100%'). Defaults to '0px'.
+ * @param outY - Y translate for the out state (exited) with units (e.g., '50px', '100%'). Defaults to '0px'.
+ * @param inX - X translate for the in state (entered) with units (e.g., '5px', '10%'). Defaults to '0px'.
+ * @param inY - Y translate for the in state (entered) with units (e.g., '5px', '10%'). Defaults to '0px'.
  * @param delay - Time (ms) to delay the animation. Defaults to 0.
  * @returns A motion atom object with translate keyframes and the supplied duration and easing.
- */ export const slideAtom = ({ direction, duration, easing = motionTokens.curveLinear, delay = 0, fromX = '0px', fromY = '0px', toX = '0px', toY = '0px' })=>{
+ */ export const slideAtom = ({ direction, duration, easing = motionTokens.curveLinear, delay = 0, outX = '0px', outY = '0px', inX = '0px', inY = '0px' })=>{
     const keyframes = [
         {
-            translate: `${fromX} ${fromY}`
+            translate: `${outX} ${outY}`
         },
         {
-            translate: `${toX} ${toY}`
+            translate: `${inX} ${inY}`
         }
     ];
     if (direction === 'exit') {

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

package/lib/components/Blur/Blur.js

@@ -10,18 +10,18 @@ import { blurAtom } from '../../atoms/blur-atom';
  * @param exitDuration - Time (ms) for the exit transition (blur-out). Defaults to the `duration` param for symmetry.
  * @param exitEasing - Easing curve for the exit transition (blur-out). Defaults to the `curveAccelerateMin` value.
  * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.
- * @param fromRadius - The blur radius with units to animate from. Defaults to `'10px'`.
- * @param toRadius - The blur radius with units to animate to. Defaults to `'0px'`.
+ * @param outRadius - Blur radius for the out state (exited). Defaults to `'10px'`.
+ * @param inRadius - Blur radius for the in state (entered). Defaults to `'0px'`.
  * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.
- */ const blurPresenceFn = ({ duration = motionTokens.durationSlow, easing = motionTokens.curveDecelerateMin, delay = 0, exitDuration = duration, exitEasing = motionTokens.curveAccelerateMin, exitDelay = delay, fromRadius = '10px', toRadius = '0px', animateOpacity = true })=>{
+ */ const blurPresenceFn = ({ duration = motionTokens.durationSlow, easing = motionTokens.curveDecelerateMin, delay = 0, exitDuration = duration, exitEasing = motionTokens.curveAccelerateMin, exitDelay = delay, outRadius = '10px', inRadius = '0px', animateOpacity = true })=>{
     const enterAtoms = [
         blurAtom({
             direction: 'enter',
             duration,
             easing,
             delay,
-            fromRadius,
-            toRadius
+            outRadius,
+            inRadius
         })
     ];
     const exitAtoms = [
@@ -30,8 +30,8 @@ import { blurAtom } from '../../atoms/blur-atom';
             duration: exitDuration,
             easing: exitEasing,
             delay: exitDelay,
-            fromRadius,
-            toRadius
+            outRadius,
+            inRadius
         })
     ];
     // Only add fade atoms if animateOpacity is true.

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

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

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

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

package/lib/components/Collapse/Collapse.js

@@ -19,12 +19,12 @@ import { fadeAtom } from '../../atoms/fade-atom';
  * @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'`
+ * @param outSize - Size for the out state (collapsed). Defaults to `'0px'`
  */ const collapsePresenceFn = ({ element, // Primary duration controls (simple API)
 duration = motionTokens.durationNormal, exitDuration = duration, // Granular duration controls with smart defaults (advanced API)
 sizeDuration = duration, opacityDuration = sizeDuration, exitSizeDuration = exitDuration, exitOpacityDuration = exitSizeDuration, // Other timing controls
 easing = motionTokens.curveEasyEaseMax, delay = 0, exitEasing = easing, exitDelay = delay, staggerDelay = 0, exitStaggerDelay = staggerDelay, // Animation controls
-animateOpacity = true, orientation = 'vertical', fromSize = '0px' })=>{
+animateOpacity = true, orientation = 'vertical', outSize = '0px' })=>{
     // ----- ENTER -----
     // The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.
     // For enter: size expands first, then opacity fades in after staggerDelay
@@ -35,7 +35,7 @@ animateOpacity = true, orientation = 'vertical', fromSize = '0px' })=>{
             duration: sizeDuration,
             easing,
             element,
-            fromSize,
+            outSize,
             delay
         }),
         whitespaceAtom({
@@ -74,7 +74,7 @@ animateOpacity = true, orientation = 'vertical', fromSize = '0px' })=>{
         easing: exitEasing,
         element,
         delay: exitDelay + exitStaggerDelay,
-        fromSize
+        outSize
     }), whitespaceAtom({
         direction: 'exit',
         orientation,

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Collapse/Collapse.ts"],"sourcesContent":["import {\n  motionTokens,\n  createPresenceComponent,\n  PresenceMotionFn,\n  createPresenceComponentVariant,\n  AtomMotion,\n} from '@fluentui/react-motion';\nimport type { 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"}
+{"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 outSize - Size for the out state (collapsed). 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  outSize = '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, outSize, 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      outSize,\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","outSize","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,UAAU,KAAK,EAChB;IACC,oBAAoB;IACpB,0FAA0F;IAC1F,0EAA0E;IAC1E,MAAMC,aAA2B;QAC/B,gEAAgE;QAChEvB,cAAc;YAAEqB;YAAaf,UAAUG;YAAcI;YAAQR;YAASiB;YAASP;QAAM;QACrFb,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"}