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

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @fluentui/react-motion-components-preview
 
-This log was last generated on Fri, 03 Oct 2025 14:18:15 GMT and should not be manually modified.
+This log was last generated on Fri, 31 Oct 2025 16:17:37 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.12.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.12.0)
+
+Fri, 31 Oct 2025 16:17:37 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.11.0..@fluentui/react-motion-components-preview_v0.12.0)
+
+### Minor changes
+
+- feat(motion): standardize from/to parameters ([PR #35419](https://github.com/microsoft/fluentui/pull/35419) by robertpenner@microsoft.com)
+
 ## [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 
+Fri, 03 Oct 2025 14:19:04 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

package/dist/index.d.ts

@@ -19,8 +19,10 @@ declare type BasePresenceParams = PresenceDuration & PresenceEasing & PresenceDe
 export declare const Blur: PresenceComponent<BlurParams>;
 
 export declare type BlurParams = BasePresenceParams & AnimateOpacity & {
-    /** The radius of pixels to blend into the blur. A length string, defaulting to '20px'. */
+    /** 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;
 };
 
 /** A React component that applies collapse/expand transitions to its children. */
@@ -67,13 +69,18 @@ export declare const CollapseRelaxed: PresenceComponent<CollapseParams>;
 export declare const CollapseSnappy: PresenceComponent<CollapseParams>;
 
 /** A React component that applies fade in/out transitions to its children. */
-export declare const Fade: PresenceComponent<BasePresenceParams>;
+export declare const Fade: PresenceComponent<FadeParams>;
 
-export declare type FadeParams = BasePresenceParams;
+export declare type FadeParams = BasePresenceParams & {
+    /** The starting opacity value. Defaults to 0. */
+    fromOpacity?: number;
+    /** The ending opacity value. Defaults to 1. */
+    toOpacity?: number;
+};
 
-export declare const FadeRelaxed: PresenceComponent<BasePresenceParams>;
+export declare const FadeRelaxed: PresenceComponent<FadeParams>;
 
-export declare const FadeSnappy: PresenceComponent<BasePresenceParams>;
+export declare const FadeSnappy: PresenceComponent<FadeParams>;
 
 /**
  * Common delay parameters for presence motion components.
@@ -110,19 +117,19 @@ export declare const Rotate: PresenceComponent<RotateParams>;
 export declare type RotateParams = BasePresenceParams & AnimateOpacity & {
     /**
      * The axis of rotation: 'x', 'y', or 'z'.
-     * Defaults to 'y'.
+     * Defaults to 'z'.
      */
     axis?: Axis3D;
     /**
      * The starting rotation angle in degrees.
      * Defaults to -90.
      */
-    angle?: number;
+    fromAngle?: number;
     /**
      * The ending rotation angle in degrees.
-     * Defaults to the negation of `angle`.
+     * Defaults to 0.
      */
-    exitAngle?: number;
+    toAngle?: number;
 };
 
 /** A React component that applies scale in/out transitions to its children. */
@@ -131,6 +138,8 @@ export declare const Scale: PresenceComponent<ScaleParams>;
 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;
 };
 
 export declare const ScaleRelaxed: PresenceComponent<ScaleParams>;
@@ -145,6 +154,10 @@ export declare type SlideParams = BasePresenceParams & AnimateOpacity & {
     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;
 };
 
 export declare const SlideRelaxed: PresenceComponent<SlideParams>;

package/lib/atoms/blur-atom.js

@@ -4,16 +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 '20px'.
+ * @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 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' })=>{
+ */ export const blurAtom = ({ direction, duration, easing = motionTokens.curveLinear, delay = 0, fromRadius = '10px', toRadius = '0px' })=>{
     const keyframes = [
         {
             filter: `blur(${fromRadius})`
         },
         {
-            filter: 'blur(0px)'
+            filter: `blur(${toRadius})`
         }
     ];
     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}\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"}
+{"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"}

package/lib/atoms/fade-atom.js

@@ -6,14 +6,15 @@ import { motionTokens } from '@fluentui/react-motion';
  * @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.
  * @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 })=>{
+ */ export const fadeAtom = ({ direction, duration, easing = motionTokens.curveLinear, delay = 0, fromOpacity = 0, toOpacity = 1 })=>{
     const keyframes = [
         {
             opacity: fromOpacity
         },
         {
-            opacity: 1
+            opacity: toOpacity
         }
     ];
     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\n/**\n * Generates a motion atom object for a fade-in or fade-out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param delay - The delay before the motion starts. Defaults to 0.\n * @param fromOpacity - The starting opacity value. Defaults to 0.\n * @returns A motion atom object with opacity keyframes and the supplied duration and easing.\n */\nexport const fadeAtom = ({\n  direction,\n  duration,\n  easing = motionTokens.curveLinear,\n  delay = 0,\n  fromOpacity = 0,\n}: FadeAtomParams): AtomMotion => {\n  const keyframes = [{ opacity: fromOpacity }, { opacity: 1 }];\n  if (direction === 'exit') {\n    keyframes.reverse();\n  }\n  return {\n    keyframes,\n    duration,\n    easing,\n    delay,\n    // Applying opacity backwards and forwards in time is important\n    // to avoid a bug where a delayed animation is not hidden when it should be.\n    fill: 'both',\n  };\n};\n"],"names":["motionTokens","fadeAtom","direction","duration","easing","curveLinear","delay","fromOpacity","keyframes","opacity","reverse","fill"],"mappings":"AAAA,SAAqBA,YAAY,QAAQ,yBAAyB;AAWlE;;;;;;;;CAQC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,SAAS,EACTC,QAAQ,EACRC,SAASJ,aAAaK,WAAW,EACjCC,QAAQ,CAAC,EACTC,cAAc,CAAC,EACA;IACf,MAAMC,YAAY;QAAC;YAAEC,SAASF;QAAY;QAAG;YAAEE,SAAS;QAAE;KAAE;IAC5D,IAAIP,cAAc,QAAQ;QACxBM,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAL;QACAC;QACAE;QACA,+DAA+D;QAC/D,4EAA4E;QAC5EK,MAAM;IACR;AACF,EAAE"}
+{"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"}

package/lib/atoms/rotate-atom.js

@@ -8,17 +8,11 @@ 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 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 fromAngle - The starting rotation angle in degrees. Defaults to -90.
+ * @param toAngle - The ending rotation angle 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 = 'y', angle = -90, exitAngle = -angle })=>{
-    let fromAngle = angle;
-    let toAngle = 0;
-    if (direction === 'exit') {
-        fromAngle = 0;
-        toAngle = exitAngle;
-    }
+ */ export const rotateAtom = ({ direction, duration, easing = motionTokens.curveLinear, delay = 0, axis = 'z', fromAngle = -90, toAngle = 0 })=>{
     const keyframes = [
         {
             rotate: createRotateValue(axis, fromAngle)
@@ -27,6 +21,9 @@ const createRotateValue = (axis, angle)=>{
             rotate: createRotateValue(axis, toAngle)
         }
     ];
+    if (direction === 'exit') {
+        keyframes.reverse();
+    }
     return {
         keyframes,
         duration,

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 * @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"}
+{"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"}

package/lib/atoms/slide-atom.js

@@ -4,17 +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., '0px', '100%'). Defaults to '0px'.
- * @param fromY - The starting Y translate value with units (e.g., '-20px', '100%'). Defaults to '0px'.
+ * @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 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' })=>{
+ */ export const slideAtom = ({ direction, duration, easing = motionTokens.curveLinear, delay = 0, fromX = '0px', fromY = '0px', toX = '0px', toY = '0px' })=>{
     const keyframes = [
         {
             translate: `${fromX} ${fromY}`
         },
         {
-            translate: '0px 0px'
+            translate: `${toX} ${toY}`
         }
     ];
     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}\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"}
+{"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"}

package/lib/components/Blur/Blur.js

@@ -11,15 +11,17 @@ import { blurAtom } from '../../atoms/blur-atom';
  * @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 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', animateOpacity = 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 enterAtoms = [
         blurAtom({
             direction: 'enter',
             duration,
             easing,
             delay,
-            fromRadius
+            fromRadius,
+            toRadius
         })
     ];
     const exitAtoms = [
@@ -28,7 +30,8 @@ import { blurAtom } from '../../atoms/blur-atom';
             duration: exitDuration,
             easing: exitEasing,
             delay: exitDelay,
-            fromRadius
+            fromRadius,
+            toRadius
         })
     ];
     // 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 animateOpacity - Whether to animate the opacity. Defaults to `true`.\n */\nconst blurPresenceFn: PresenceMotionFn<BlurParams> = ({\n  duration = motionTokens.durationSlow,\n  easing = motionTokens.curveDecelerateMin,\n  delay = 0,\n  exitDuration = duration,\n  exitEasing = motionTokens.curveAccelerateMin,\n  exitDelay = delay,\n  fromRadius = '10px',\n  animateOpacity = true,\n}) => {\n  const enterAtoms = [blurAtom({ direction: 'enter', duration, easing, delay, fromRadius })];\n  const exitAtoms = [\n    blurAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      delay: exitDelay,\n      fromRadius,\n    }),\n  ];\n\n  // Only add fade atoms if animateOpacity is true.\n  if (animateOpacity) {\n    enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing, delay }));\n    exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing, delay: exitDelay }));\n  }\n\n  return {\n    enter: enterAtoms,\n    exit: exitAtoms,\n  };\n};\n\n/** A React component that applies blur in/out transitions to its children. */\nexport const Blur = createPresenceComponent(blurPresenceFn);\n"],"names":["motionTokens","createPresenceComponent","fadeAtom","blurAtom","blurPresenceFn","duration","durationSlow","easing","curveDecelerateMin","delay","exitDuration","exitEasing","curveAccelerateMin","exitDelay","fromRadius","animateOpacity","enterAtoms","direction","exitAtoms","push","enter","exit","Blur"],"mappings":"AAAA,SAASA,YAAY,EAAEC,uBAAuB,QAA0B,yBAAyB;AACjG,SAASC,QAAQ,QAAQ,wBAAwB;AACjD,SAASC,QAAQ,QAAQ,wBAAwB;AAGjD;;;;;;;;;;;CAWC,GACD,MAAMC,iBAA+C,CAAC,EACpDC,WAAWL,aAAaM,YAAY,EACpCC,SAASP,aAAaQ,kBAAkB,EACxCC,QAAQ,CAAC,EACTC,eAAeL,QAAQ,EACvBM,aAAaX,aAAaY,kBAAkB,EAC5CC,YAAYJ,KAAK,EACjBK,aAAa,MAAM,EACnBC,iBAAiB,IAAI,EACtB;IACC,MAAMC,aAAa;QAACb,SAAS;YAAEc,WAAW;YAASZ;YAAUE;YAAQE;YAAOK;QAAW;KAAG;IAC1F,MAAMI,YAAY;QAChBf,SAAS;YACPc,WAAW;YACXZ,UAAUK;YACVH,QAAQI;YACRF,OAAOI;YACPC;QACF;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWG,IAAI,CAACjB,SAAS;YAAEe,WAAW;YAASZ;YAAUE;YAAQE;QAAM;QACvES,UAAUC,IAAI,CAACjB,SAAS;YAAEe,WAAW;YAAQZ,UAAUK;YAAcH,QAAQI;YAAYF,OAAOI;QAAU;IAC5G;IAEA,OAAO;QACLO,OAAOJ;QACPK,MAAMH;IACR;AACF;AAEA,4EAA4E,GAC5E,OAAO,MAAMI,OAAOrB,wBAAwBG,gBAAgB"}
+{"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"}

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 radius of pixels to blend into the blur. A length string, defaulting to '20px'. */\n    fromRadius?: string;\n  };\n"],"names":[],"mappings":"AAEA,WAII"}
+{"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"}

package/lib/components/Fade/Fade.js

@@ -9,19 +9,25 @@ import { fadeAtom } from '../../atoms/fade-atom';
  * @param exitDuration - Time (ms) for the exit transition (fade-out). Defaults to the `duration` param for symmetry.
  * @param exitEasing - Easing curve for the exit transition (fade-out). Defaults to the `easing` param for symmetry.
  * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.
- */ export const fadePresenceFn = ({ duration = motionTokens.durationNormal, easing = motionTokens.curveEasyEase, delay = 0, exitDuration = duration, exitEasing = easing, exitDelay = delay })=>{
+ * @param fromOpacity - The starting opacity value. Defaults to 0.
+ * @param toOpacity - The ending opacity value. Defaults to 1.
+ */ export const fadePresenceFn = ({ duration = motionTokens.durationNormal, easing = motionTokens.curveEasyEase, delay = 0, exitDuration = duration, exitEasing = easing, exitDelay = delay, fromOpacity = 0, toOpacity = 1 })=>{
     return {
         enter: fadeAtom({
             direction: 'enter',
             duration,
             easing,
-            delay
+            delay,
+            fromOpacity,
+            toOpacity
         }),
         exit: fadeAtom({
             direction: 'exit',
             duration: exitDuration,
             easing: exitEasing,
-            delay: exitDelay
+            delay: exitDelay,
+            fromOpacity,
+            toOpacity
         })
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Fade/Fade.ts"],"sourcesContent":["import {\n  motionTokens,\n  createPresenceComponent,\n  PresenceMotionFn,\n  createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { FadeParams } from './fade-types';\n\n/**\n * Define a presence motion for fade in/out\n *\n * @param duration - Time (ms) for the enter transition (fade-in). Defaults to the `durationNormal` value (200 ms).\n * @param easing - Easing curve for the enter transition (fade-in). Defaults to the `curveEasyEase` value.\n * @param delay - Time (ms) to delay the enter transition. Defaults to 0.\n * @param exitDuration - Time (ms) for the exit transition (fade-out). Defaults to the `duration` param for symmetry.\n * @param exitEasing - Easing curve for the exit transition (fade-out). Defaults to the `easing` param for symmetry.\n * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n */\nexport const fadePresenceFn: PresenceMotionFn<FadeParams> = ({\n  duration = motionTokens.durationNormal,\n  easing = motionTokens.curveEasyEase,\n  delay = 0,\n  exitDuration = duration,\n  exitEasing = easing,\n  exitDelay = delay,\n}) => {\n  return {\n    enter: fadeAtom({ direction: 'enter', duration, easing, delay }),\n    exit: fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing, delay: exitDelay }),\n  };\n};\n\n/** A React component that applies fade in/out transitions to its children. */\nexport const Fade = createPresenceComponent(fadePresenceFn);\n\nexport const FadeSnappy = createPresenceComponentVariant(Fade, { duration: motionTokens.durationFast });\n\nexport const FadeRelaxed = createPresenceComponentVariant(Fade, { duration: motionTokens.durationGentle });\n"],"names":["motionTokens","createPresenceComponent","createPresenceComponentVariant","fadeAtom","fadePresenceFn","duration","durationNormal","easing","curveEasyEase","delay","exitDuration","exitEasing","exitDelay","enter","direction","exit","Fade","FadeSnappy","durationFast","FadeRelaxed","durationGentle"],"mappings":"AAAA,SACEA,YAAY,EACZC,uBAAuB,EAEvBC,8BAA8B,QACzB,yBAAyB;AAChC,SAASC,QAAQ,QAAQ,wBAAwB;AAGjD;;;;;;;;;CASC,GACD,OAAO,MAAMC,iBAA+C,CAAC,EAC3DC,WAAWL,aAAaM,cAAc,EACtCC,SAASP,aAAaQ,aAAa,EACnCC,QAAQ,CAAC,EACTC,eAAeL,QAAQ,EACvBM,aAAaJ,MAAM,EACnBK,YAAYH,KAAK,EAClB;IACC,OAAO;QACLI,OAAOV,SAAS;YAAEW,WAAW;YAAST;YAAUE;YAAQE;QAAM;QAC9DM,MAAMZ,SAAS;YAAEW,WAAW;YAAQT,UAAUK;YAAcH,QAAQI;YAAYF,OAAOG;QAAU;IACnG;AACF,EAAE;AAEF,4EAA4E,GAC5E,OAAO,MAAMI,OAAOf,wBAAwBG,gBAAgB;AAE5D,OAAO,MAAMa,aAAaf,+BAA+Bc,MAAM;IAAEX,UAAUL,aAAakB,YAAY;AAAC,GAAG;AAExG,OAAO,MAAMC,cAAcjB,+BAA+Bc,MAAM;IAAEX,UAAUL,aAAaoB,cAAc;AAAC,GAAG"}
+{"version":3,"sources":["../src/components/Fade/Fade.ts"],"sourcesContent":["import {\n  motionTokens,\n  createPresenceComponent,\n  PresenceMotionFn,\n  createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { FadeParams } from './fade-types';\n\n/**\n * Define a presence motion for fade in/out\n *\n * @param duration - Time (ms) for the enter transition (fade-in). Defaults to the `durationNormal` value (200 ms).\n * @param easing - Easing curve for the enter transition (fade-in). Defaults to the `curveEasyEase` value.\n * @param delay - Time (ms) to delay the enter transition. Defaults to 0.\n * @param exitDuration - Time (ms) for the exit transition (fade-out). Defaults to the `duration` param for symmetry.\n * @param exitEasing - Easing curve for the exit transition (fade-out). Defaults to the `easing` param for symmetry.\n * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param fromOpacity - The starting opacity value. Defaults to 0.\n * @param toOpacity - The ending opacity value. Defaults to 1.\n */\nexport const fadePresenceFn: PresenceMotionFn<FadeParams> = ({\n  duration = motionTokens.durationNormal,\n  easing = motionTokens.curveEasyEase,\n  delay = 0,\n  exitDuration = duration,\n  exitEasing = easing,\n  exitDelay = delay,\n  fromOpacity = 0,\n  toOpacity = 1,\n}) => {\n  return {\n    enter: fadeAtom({ direction: 'enter', duration, easing, delay, fromOpacity, toOpacity }),\n    exit: fadeAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      delay: exitDelay,\n      fromOpacity,\n      toOpacity,\n    }),\n  };\n};\n\n/** A React component that applies fade in/out transitions to its children. */\nexport const Fade = createPresenceComponent(fadePresenceFn);\n\nexport const FadeSnappy = createPresenceComponentVariant(Fade, { duration: motionTokens.durationFast });\n\nexport const FadeRelaxed = createPresenceComponentVariant(Fade, { duration: motionTokens.durationGentle });\n"],"names":["motionTokens","createPresenceComponent","createPresenceComponentVariant","fadeAtom","fadePresenceFn","duration","durationNormal","easing","curveEasyEase","delay","exitDuration","exitEasing","exitDelay","fromOpacity","toOpacity","enter","direction","exit","Fade","FadeSnappy","durationFast","FadeRelaxed","durationGentle"],"mappings":"AAAA,SACEA,YAAY,EACZC,uBAAuB,EAEvBC,8BAA8B,QACzB,yBAAyB;AAChC,SAASC,QAAQ,QAAQ,wBAAwB;AAGjD;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,iBAA+C,CAAC,EAC3DC,WAAWL,aAAaM,cAAc,EACtCC,SAASP,aAAaQ,aAAa,EACnCC,QAAQ,CAAC,EACTC,eAAeL,QAAQ,EACvBM,aAAaJ,MAAM,EACnBK,YAAYH,KAAK,EACjBI,cAAc,CAAC,EACfC,YAAY,CAAC,EACd;IACC,OAAO;QACLC,OAAOZ,SAAS;YAAEa,WAAW;YAASX;YAAUE;YAAQE;YAAOI;YAAaC;QAAU;QACtFG,MAAMd,SAAS;YACba,WAAW;YACXX,UAAUK;YACVH,QAAQI;YACRF,OAAOG;YACPC;YACAC;QACF;IACF;AACF,EAAE;AAEF,4EAA4E,GAC5E,OAAO,MAAMI,OAAOjB,wBAAwBG,gBAAgB;AAE5D,OAAO,MAAMe,aAAajB,+BAA+BgB,MAAM;IAAEb,UAAUL,aAAaoB,YAAY;AAAC,GAAG;AAExG,OAAO,MAAMC,cAAcnB,+BAA+BgB,MAAM;IAAEb,UAAUL,aAAasB,cAAc;AAAC,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Fade/fade-types.ts"],"sourcesContent":["import type { BasePresenceParams } from '../../types';\n\nexport type FadeParams = BasePresenceParams;\n"],"names":[],"mappings":"AAEA,WAA4C"}
+{"version":3,"sources":["../src/components/Fade/fade-types.ts"],"sourcesContent":["import type { BasePresenceParams } from '../../types';\n\nexport type FadeParams = BasePresenceParams & {\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"],"names":[],"mappings":"AAEA,WAME"}

package/lib/components/Rotate/Rotate.js

@@ -10,11 +10,11 @@ import { rotateAtom } from '../../atoms/rotate-atom';
  * @param exitDuration - Time (ms) for the exit transition (rotate-out). Defaults to the `duration` param for symmetry.
  * @param exitEasing - Easing curve for the exit transition (rotate-out). Defaults to the `curveAccelerateMax` value.
  * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.
- * @param axis - The axis of rotation: 'x', 'y', or 'z'. Defaults to 'y'.
- * @param angle - The starting rotation angle in degrees. Defaults to -90.
- * @param exitAngle - The ending rotation angle in degrees. Defaults to the negation of `angle`.
+ * @param axis - The axis of rotation: 'x', 'y', or 'z'. Defaults to 'z'.
+ * @param fromAngle - The starting rotation angle in degrees. Defaults to -90.
+ * @param toAngle - The ending rotation angle in degrees. Defaults to 0.
  * @param animateOpacity - Whether to animate the opacity during the rotation. Defaults to `true`.
- */ const rotatePresenceFn = ({ duration = motionTokens.durationGentle, easing = motionTokens.curveDecelerateMax, delay = 0, exitDuration = duration, exitEasing = motionTokens.curveAccelerateMax, exitDelay = delay, axis = 'y', angle = -90, exitAngle = -angle, animateOpacity = true })=>{
+ */ const rotatePresenceFn = ({ duration = motionTokens.durationGentle, easing = motionTokens.curveDecelerateMax, delay = 0, exitDuration = duration, exitEasing = motionTokens.curveAccelerateMax, exitDelay = delay, axis = 'z', fromAngle = -90, toAngle = 0, animateOpacity = true })=>{
     const enterAtoms = [
         rotateAtom({
             direction: 'enter',
@@ -22,8 +22,8 @@ import { rotateAtom } from '../../atoms/rotate-atom';
             easing,
             delay,
             axis,
-            angle,
-            exitAngle
+            fromAngle,
+            toAngle
         })
     ];
     const exitAtoms = [
@@ -33,8 +33,8 @@ import { rotateAtom } from '../../atoms/rotate-atom';
             easing: exitEasing,
             delay: exitDelay,
             axis,
-            angle,
-            exitAngle
+            fromAngle,
+            toAngle
         })
     ];
     if (animateOpacity) {

package/lib/components/Rotate/Rotate.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Rotate/Rotate.ts"],"sourcesContent":["import { AtomMotion, createPresenceComponent, motionTokens, PresenceMotionFn } from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { rotateAtom } from '../../atoms/rotate-atom';\nimport { RotateParams } from './rotate-types';\n\n/**\n * Define a presence motion for rotate in/out\n *\n * @param duration - Time (ms) for the enter transition (rotate-in). Defaults to the `durationGentle` value.\n * @param easing - Easing curve for the enter transition (rotate-in). Defaults to the `curveDecelerateMax` value.\n * @param delay - Time (ms) to delay the enter transition. Defaults to 0.\n * @param exitDuration - Time (ms) for the exit transition (rotate-out). Defaults to the `duration` param for symmetry.\n * @param exitEasing - Easing curve for the exit transition (rotate-out). Defaults to the `curveAccelerateMax` value.\n * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param axis - The axis of rotation: 'x', 'y', or 'z'. Defaults to 'y'.\n * @param angle - The starting rotation angle in degrees. Defaults to -90.\n * @param exitAngle - The ending rotation angle in degrees. Defaults to the negation of `angle`.\n * @param animateOpacity - Whether to animate the opacity during the rotation. Defaults to `true`.\n */\nconst rotatePresenceFn: PresenceMotionFn<RotateParams> = ({\n  duration = motionTokens.durationGentle,\n  easing = motionTokens.curveDecelerateMax,\n  delay = 0,\n  exitDuration = duration,\n  exitEasing = motionTokens.curveAccelerateMax,\n  exitDelay = delay,\n  axis = 'y',\n  angle = -90,\n  exitAngle = -angle,\n  animateOpacity = true,\n}: RotateParams) => {\n  const enterAtoms: AtomMotion[] = [\n    rotateAtom({\n      direction: 'enter',\n      duration,\n      easing,\n      delay,\n      axis,\n      angle,\n      exitAngle,\n    }),\n  ];\n\n  const exitAtoms: AtomMotion[] = [\n    rotateAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      delay: exitDelay,\n      axis,\n      angle,\n      exitAngle,\n    }),\n  ];\n\n  if (animateOpacity) {\n    enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing, delay }));\n    exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing, delay: exitDelay }));\n  }\n\n  return {\n    enter: enterAtoms,\n    exit: exitAtoms,\n  };\n};\n\n// Create a presence motion component to rotate an element around a single axis (x, y, or z).\nexport const Rotate = createPresenceComponent(rotatePresenceFn);\n"],"names":["createPresenceComponent","motionTokens","fadeAtom","rotateAtom","rotatePresenceFn","duration","durationGentle","easing","curveDecelerateMax","delay","exitDuration","exitEasing","curveAccelerateMax","exitDelay","axis","angle","exitAngle","animateOpacity","enterAtoms","direction","exitAtoms","push","enter","exit","Rotate"],"mappings":"AAAA,SAAqBA,uBAAuB,EAAEC,YAAY,QAA0B,yBAAyB;AAC7G,SAASC,QAAQ,QAAQ,wBAAwB;AACjD,SAASC,UAAU,QAAQ,0BAA0B;AAGrD;;;;;;;;;;;;;CAaC,GACD,MAAMC,mBAAmD,CAAC,EACxDC,WAAWJ,aAAaK,cAAc,EACtCC,SAASN,aAAaO,kBAAkB,EACxCC,QAAQ,CAAC,EACTC,eAAeL,QAAQ,EACvBM,aAAaV,aAAaW,kBAAkB,EAC5CC,YAAYJ,KAAK,EACjBK,OAAO,GAAG,EACVC,QAAQ,CAAC,EAAE,EACXC,YAAY,CAACD,KAAK,EAClBE,iBAAiB,IAAI,EACR;IACb,MAAMC,aAA2B;QAC/Bf,WAAW;YACTgB,WAAW;YACXd;YACAE;YACAE;YACAK;YACAC;YACAC;QACF;KACD;IAED,MAAMI,YAA0B;QAC9BjB,WAAW;YACTgB,WAAW;YACXd,UAAUK;YACVH,QAAQI;YACRF,OAAOI;YACPC;YACAC;YACAC;QACF;KACD;IAED,IAAIC,gBAAgB;QAClBC,WAAWG,IAAI,CAACnB,SAAS;YAAEiB,WAAW;YAASd;YAAUE;YAAQE;QAAM;QACvEW,UAAUC,IAAI,CAACnB,SAAS;YAAEiB,WAAW;YAAQd,UAAUK;YAAcH,QAAQI;YAAYF,OAAOI;QAAU;IAC5G;IAEA,OAAO;QACLS,OAAOJ;QACPK,MAAMH;IACR;AACF;AAEA,6FAA6F;AAC7F,OAAO,MAAMI,SAASxB,wBAAwBI,kBAAkB"}
+{"version":3,"sources":["../src/components/Rotate/Rotate.ts"],"sourcesContent":["import { AtomMotion, createPresenceComponent, motionTokens, PresenceMotionFn } from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { rotateAtom } from '../../atoms/rotate-atom';\nimport { RotateParams } from './rotate-types';\n\n/**\n * Define a presence motion for rotate in/out\n *\n * @param duration - Time (ms) for the enter transition (rotate-in). Defaults to the `durationGentle` value.\n * @param easing - Easing curve for the enter transition (rotate-in). Defaults to the `curveDecelerateMax` value.\n * @param delay - Time (ms) to delay the enter transition. Defaults to 0.\n * @param exitDuration - Time (ms) for the exit transition (rotate-out). Defaults to the `duration` param for symmetry.\n * @param exitEasing - Easing curve for the exit transition (rotate-out). Defaults to the `curveAccelerateMax` value.\n * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param axis - The axis of rotation: 'x', 'y', or 'z'. Defaults to 'z'.\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 animateOpacity - Whether to animate the opacity during the rotation. Defaults to `true`.\n */\nconst rotatePresenceFn: PresenceMotionFn<RotateParams> = ({\n  duration = motionTokens.durationGentle,\n  easing = motionTokens.curveDecelerateMax,\n  delay = 0,\n  exitDuration = duration,\n  exitEasing = motionTokens.curveAccelerateMax,\n  exitDelay = delay,\n  axis = 'z',\n  fromAngle = -90,\n  toAngle = 0,\n  animateOpacity = true,\n}: RotateParams) => {\n  const enterAtoms: AtomMotion[] = [\n    rotateAtom({\n      direction: 'enter',\n      duration,\n      easing,\n      delay,\n      axis,\n      fromAngle,\n      toAngle,\n    }),\n  ];\n\n  const exitAtoms: AtomMotion[] = [\n    rotateAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      delay: exitDelay,\n      axis,\n      fromAngle,\n      toAngle,\n    }),\n  ];\n\n  if (animateOpacity) {\n    enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing, delay }));\n    exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing, delay: exitDelay }));\n  }\n\n  return {\n    enter: enterAtoms,\n    exit: exitAtoms,\n  };\n};\n\n// Create a presence motion component to rotate an element around a single axis (x, y, or z).\nexport const Rotate = createPresenceComponent(rotatePresenceFn);\n"],"names":["createPresenceComponent","motionTokens","fadeAtom","rotateAtom","rotatePresenceFn","duration","durationGentle","easing","curveDecelerateMax","delay","exitDuration","exitEasing","curveAccelerateMax","exitDelay","axis","fromAngle","toAngle","animateOpacity","enterAtoms","direction","exitAtoms","push","enter","exit","Rotate"],"mappings":"AAAA,SAAqBA,uBAAuB,EAAEC,YAAY,QAA0B,yBAAyB;AAC7G,SAASC,QAAQ,QAAQ,wBAAwB;AACjD,SAASC,UAAU,QAAQ,0BAA0B;AAGrD;;;;;;;;;;;;;CAaC,GACD,MAAMC,mBAAmD,CAAC,EACxDC,WAAWJ,aAAaK,cAAc,EACtCC,SAASN,aAAaO,kBAAkB,EACxCC,QAAQ,CAAC,EACTC,eAAeL,QAAQ,EACvBM,aAAaV,aAAaW,kBAAkB,EAC5CC,YAAYJ,KAAK,EACjBK,OAAO,GAAG,EACVC,YAAY,CAAC,EAAE,EACfC,UAAU,CAAC,EACXC,iBAAiB,IAAI,EACR;IACb,MAAMC,aAA2B;QAC/Bf,WAAW;YACTgB,WAAW;YACXd;YACAE;YACAE;YACAK;YACAC;YACAC;QACF;KACD;IAED,MAAMI,YAA0B;QAC9BjB,WAAW;YACTgB,WAAW;YACXd,UAAUK;YACVH,QAAQI;YACRF,OAAOI;YACPC;YACAC;YACAC;QACF;KACD;IAED,IAAIC,gBAAgB;QAClBC,WAAWG,IAAI,CAACnB,SAAS;YAAEiB,WAAW;YAASd;YAAUE;YAAQE;QAAM;QACvEW,UAAUC,IAAI,CAACnB,SAAS;YAAEiB,WAAW;YAAQd,UAAUK;YAAcH,QAAQI;YAAYF,OAAOI;QAAU;IAC5G;IAEA,OAAO;QACLS,OAAOJ;QACPK,MAAMH;IACR;AACF;AAEA,6FAA6F;AAC7F,OAAO,MAAMI,SAASxB,wBAAwBI,kBAAkB"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Rotate/rotate-types.ts"],"sourcesContent":["import type { BasePresenceParams, AnimateOpacity } from '../../types';\n\ntype Axis3D = 'x' | 'y' | 'z';\n\nexport type RotateParams = BasePresenceParams &\n  AnimateOpacity & {\n    /**\n     * The axis of rotation: 'x', 'y', or 'z'.\n     * Defaults to 'y'.\n     */\n    axis?: Axis3D;\n\n    /**\n     * The starting rotation angle in degrees.\n     * Defaults to -90.\n     */\n    angle?: number;\n\n    /**\n     * The ending rotation angle in degrees.\n     * Defaults to the negation of `angle`.\n     */\n    exitAngle?: number;\n  };\n"],"names":[],"mappings":"AAIA,WAmBI"}
+{"version":3,"sources":["../src/components/Rotate/rotate-types.ts"],"sourcesContent":["import type { BasePresenceParams, AnimateOpacity } from '../../types';\n\ntype Axis3D = 'x' | 'y' | 'z';\n\nexport type RotateParams = BasePresenceParams &\n  AnimateOpacity & {\n    /**\n     * The axis of rotation: 'x', 'y', or 'z'.\n     * Defaults to 'z'.\n     */\n    axis?: Axis3D;\n\n    /**\n     * The starting rotation angle in degrees.\n     * Defaults to -90.\n     */\n    fromAngle?: number;\n\n    /**\n     * The ending rotation angle in degrees.\n     * Defaults to 0.\n     */\n    toAngle?: number;\n  };\n"],"names":[],"mappings":"AAIA,WAmBI"}

package/lib/components/Scale/Scale.js

@@ -11,15 +11,17 @@ import { scaleAtom } from '../../atoms/scale-atom';
  * @param exitEasing - Easing curve for the exit transition (scale-out). Defaults to the `curveAccelerateMax` value.
  * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.
  * @param fromScale - The scale value to animate from. Defaults to `0.9`.
+ * @param toScale - The scale value to animate to. Defaults to `1`.
  * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.
- */ const scalePresenceFn = ({ duration = motionTokens.durationGentle, easing = motionTokens.curveDecelerateMax, delay = 0, exitDuration = motionTokens.durationNormal, exitEasing = motionTokens.curveAccelerateMax, exitDelay = delay, fromScale = 0.9, animateOpacity = true })=>{
+ */ const scalePresenceFn = ({ duration = motionTokens.durationGentle, easing = motionTokens.curveDecelerateMax, delay = 0, exitDuration = motionTokens.durationNormal, exitEasing = motionTokens.curveAccelerateMax, exitDelay = delay, fromScale = 0.9, toScale = 1, animateOpacity = true })=>{
     const enterAtoms = [
         scaleAtom({
             direction: 'enter',
             duration,
             easing,
             delay,
-            fromScale
+            fromScale,
+            toScale
         })
     ];
     const exitAtoms = [
@@ -28,7 +30,8 @@ import { scaleAtom } from '../../atoms/scale-atom';
             duration: exitDuration,
             easing: exitEasing,
             delay: exitDelay,
-            fromScale
+            fromScale,
+            toScale
         })
     ];
     // Only add fade atoms if animateOpacity is true.

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Scale/Scale.ts"],"sourcesContent":["import {\n  motionTokens,\n  createPresenceComponent,\n  PresenceMotionFn,\n  createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { scaleAtom } from '../../atoms/scale-atom';\nimport { ScaleParams } from './scale-types';\n\n/**\n * Define a presence motion for scale in/out\n *\n * @param duration - Time (ms) for the enter transition (scale-in). Defaults to the `durationGentle` value (250 ms).\n * @param easing - Easing curve for the enter transition (scale-in). Defaults to the `curveDecelerateMax` value.\n * @param delay - Time (ms) to delay the enter transition. Defaults to 0.\n * @param exitDuration - Time (ms) for the exit transition (scale-out). Defaults to the `durationNormal` value (200 ms).\n * @param exitEasing - Easing curve for the exit transition (scale-out). Defaults to the `curveAccelerateMax` value.\n * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param fromScale - The scale value to animate from. Defaults to `0.9`.\n * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.\n */\nconst scalePresenceFn: PresenceMotionFn<ScaleParams> = ({\n  duration = motionTokens.durationGentle,\n  easing = motionTokens.curveDecelerateMax,\n  delay = 0,\n  exitDuration = motionTokens.durationNormal,\n  exitEasing = motionTokens.curveAccelerateMax,\n  exitDelay = delay,\n  fromScale = 0.9,\n  animateOpacity = true,\n}) => {\n  const enterAtoms = [scaleAtom({ direction: 'enter', duration, easing, delay, fromScale })];\n  const exitAtoms = [\n    scaleAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      delay: exitDelay,\n      fromScale,\n    }),\n  ];\n\n  // Only add fade atoms if animateOpacity is true.\n  if (animateOpacity) {\n    enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing, 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 scale in/out transitions to its children. */\nexport const Scale = createPresenceComponent(scalePresenceFn);\n\nexport const ScaleSnappy = createPresenceComponentVariant(Scale, {\n  duration: motionTokens.durationNormal,\n  exitDuration: motionTokens.durationFast,\n});\n\nexport const ScaleRelaxed = createPresenceComponentVariant(Scale, {\n  duration: motionTokens.durationSlow,\n  exitDuration: motionTokens.durationGentle,\n});\n"],"names":["motionTokens","createPresenceComponent","createPresenceComponentVariant","fadeAtom","scaleAtom","scalePresenceFn","duration","durationGentle","easing","curveDecelerateMax","delay","exitDuration","durationNormal","exitEasing","curveAccelerateMax","exitDelay","fromScale","animateOpacity","enterAtoms","direction","exitAtoms","push","enter","exit","Scale","ScaleSnappy","durationFast","ScaleRelaxed","durationSlow"],"mappings":"AAAA,SACEA,YAAY,EACZC,uBAAuB,EAEvBC,8BAA8B,QACzB,yBAAyB;AAChC,SAASC,QAAQ,QAAQ,wBAAwB;AACjD,SAASC,SAAS,QAAQ,yBAAyB;AAGnD;;;;;;;;;;;CAWC,GACD,MAAMC,kBAAiD,CAAC,EACtDC,WAAWN,aAAaO,cAAc,EACtCC,SAASR,aAAaS,kBAAkB,EACxCC,QAAQ,CAAC,EACTC,eAAeX,aAAaY,cAAc,EAC1CC,aAAab,aAAac,kBAAkB,EAC5CC,YAAYL,KAAK,EACjBM,YAAY,GAAG,EACfC,iBAAiB,IAAI,EACtB;IACC,MAAMC,aAAa;QAACd,UAAU;YAAEe,WAAW;YAASb;YAAUE;YAAQE;YAAOM;QAAU;KAAG;IAC1F,MAAMI,YAAY;QAChBhB,UAAU;YACRe,WAAW;YACXb,UAAUK;YACVH,QAAQK;YACRH,OAAOK;YACPC;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,QAAQK;YAAYH,OAAOK;QAAU;IAC5G;IAEA,OAAO;QACLO,OAAOJ;QACPK,MAAMH;IACR;AACF;AAEA,6EAA6E,GAC7E,OAAO,MAAMI,QAAQvB,wBAAwBI,iBAAiB;AAE9D,OAAO,MAAMoB,cAAcvB,+BAA+BsB,OAAO;IAC/DlB,UAAUN,aAAaY,cAAc;IACrCD,cAAcX,aAAa0B,YAAY;AACzC,GAAG;AAEH,OAAO,MAAMC,eAAezB,+BAA+BsB,OAAO;IAChElB,UAAUN,aAAa4B,YAAY;IACnCjB,cAAcX,aAAaO,cAAc;AAC3C,GAAG"}
+{"version":3,"sources":["../src/components/Scale/Scale.ts"],"sourcesContent":["import {\n  motionTokens,\n  createPresenceComponent,\n  PresenceMotionFn,\n  createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { scaleAtom } from '../../atoms/scale-atom';\nimport { ScaleParams } from './scale-types';\n\n/**\n * Define a presence motion for scale in/out\n *\n * @param duration - Time (ms) for the enter transition (scale-in). Defaults to the `durationGentle` value (250 ms).\n * @param easing - Easing curve for the enter transition (scale-in). Defaults to the `curveDecelerateMax` value.\n * @param delay - Time (ms) to delay the enter transition. Defaults to 0.\n * @param exitDuration - Time (ms) for the exit transition (scale-out). Defaults to the `durationNormal` value (200 ms).\n * @param exitEasing - Easing curve for the exit transition (scale-out). Defaults to the `curveAccelerateMax` value.\n * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param fromScale - The scale value to animate from. Defaults to `0.9`.\n * @param toScale - The scale value to animate to. Defaults to `1`.\n * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.\n */\nconst scalePresenceFn: PresenceMotionFn<ScaleParams> = ({\n  duration = motionTokens.durationGentle,\n  easing = motionTokens.curveDecelerateMax,\n  delay = 0,\n  exitDuration = motionTokens.durationNormal,\n  exitEasing = motionTokens.curveAccelerateMax,\n  exitDelay = delay,\n  fromScale = 0.9,\n  toScale = 1,\n  animateOpacity = true,\n}) => {\n  const enterAtoms = [scaleAtom({ direction: 'enter', duration, easing, delay, fromScale, toScale })];\n  const exitAtoms = [\n    scaleAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      delay: exitDelay,\n      fromScale,\n      toScale,\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 scale in/out transitions to its children. */\nexport const Scale = createPresenceComponent(scalePresenceFn);\n\nexport const ScaleSnappy = createPresenceComponentVariant(Scale, {\n  duration: motionTokens.durationNormal,\n  exitDuration: motionTokens.durationFast,\n});\n\nexport const ScaleRelaxed = createPresenceComponentVariant(Scale, {\n  duration: motionTokens.durationSlow,\n  exitDuration: motionTokens.durationGentle,\n});\n"],"names":["motionTokens","createPresenceComponent","createPresenceComponentVariant","fadeAtom","scaleAtom","scalePresenceFn","duration","durationGentle","easing","curveDecelerateMax","delay","exitDuration","durationNormal","exitEasing","curveAccelerateMax","exitDelay","fromScale","toScale","animateOpacity","enterAtoms","direction","exitAtoms","push","enter","exit","Scale","ScaleSnappy","durationFast","ScaleRelaxed","durationSlow"],"mappings":"AAAA,SACEA,YAAY,EACZC,uBAAuB,EAEvBC,8BAA8B,QACzB,yBAAyB;AAChC,SAASC,QAAQ,QAAQ,wBAAwB;AACjD,SAASC,SAAS,QAAQ,yBAAyB;AAGnD;;;;;;;;;;;;CAYC,GACD,MAAMC,kBAAiD,CAAC,EACtDC,WAAWN,aAAaO,cAAc,EACtCC,SAASR,aAAaS,kBAAkB,EACxCC,QAAQ,CAAC,EACTC,eAAeX,aAAaY,cAAc,EAC1CC,aAAab,aAAac,kBAAkB,EAC5CC,YAAYL,KAAK,EACjBM,YAAY,GAAG,EACfC,UAAU,CAAC,EACXC,iBAAiB,IAAI,EACtB;IACC,MAAMC,aAAa;QAACf,UAAU;YAAEgB,WAAW;YAASd;YAAUE;YAAQE;YAAOM;YAAWC;QAAQ;KAAG;IACnG,MAAMI,YAAY;QAChBjB,UAAU;YACRgB,WAAW;YACXd,UAAUK;YACVH,QAAQK;YACRH,OAAOK;YACPC;YACAC;QACF;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWG,IAAI,CAACnB,SAAS;YAAEiB,WAAW;YAASd;YAAUE;YAAQE;QAAM;QACvEW,UAAUC,IAAI,CAACnB,SAAS;YAAEiB,WAAW;YAAQd,UAAUK;YAAcH,QAAQK;YAAYH,OAAOK;QAAU;IAC5G;IAEA,OAAO;QACLQ,OAAOJ;QACPK,MAAMH;IACR;AACF;AAEA,6EAA6E,GAC7E,OAAO,MAAMI,QAAQxB,wBAAwBI,iBAAiB;AAE9D,OAAO,MAAMqB,cAAcxB,+BAA+BuB,OAAO;IAC/DnB,UAAUN,aAAaY,cAAc;IACrCD,cAAcX,aAAa2B,YAAY;AACzC,GAAG;AAEH,OAAO,MAAMC,eAAe1B,+BAA+BuB,OAAO;IAChEnB,UAAUN,aAAa6B,YAAY;IACnClB,cAAcX,aAAaO,cAAc;AAC3C,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Scale/scale-types.ts"],"sourcesContent":["import type { BasePresenceParams, AnimateOpacity } from '../../types';\n\nexport type ScaleParams = BasePresenceParams &\n  AnimateOpacity & {\n    /** The scale value to animate from. Defaults to `0.9`. */\n    fromScale?: number;\n  };\n"],"names":[],"mappings":"AAEA,WAII"}
+{"version":3,"sources":["../src/components/Scale/scale-types.ts"],"sourcesContent":["import type { BasePresenceParams, AnimateOpacity } from '../../types';\n\nexport type ScaleParams = BasePresenceParams &\n  AnimateOpacity & {\n    /** The scale value to animate from. Defaults to `0.9`. */\n    fromScale?: number;\n\n    /** The scale value to animate to. Defaults to `1`. */\n    toScale?: number;\n  };\n"],"names":[],"mappings":"AAEA,WAOI"}

package/lib/components/Slide/Slide.js

@@ -12,8 +12,10 @@ import { slideAtom } from '../../atoms/slide-atom';
  * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.
  * @param fromX - The X translate value with units to animate from. Defaults to `'0px'`.
  * @param fromY - The Y translate value with units to animate from. Defaults to `'20px'`.
+ * @param toX - The X translate value with units to animate to. Defaults to `'0px'`.
+ * @param toY - The Y translate value with units to animate to. Defaults to `'0px'`.
  * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.
- */ const slidePresenceFn = ({ duration = motionTokens.durationNormal, easing = motionTokens.curveDecelerateMid, delay = 0, exitDuration = duration, exitEasing = motionTokens.curveAccelerateMid, exitDelay = delay, fromX = '0px', fromY = '20px', animateOpacity = true })=>{
+ */ const slidePresenceFn = ({ duration = motionTokens.durationNormal, easing = motionTokens.curveDecelerateMid, delay = 0, exitDuration = duration, exitEasing = motionTokens.curveAccelerateMid, exitDelay = delay, fromX = '0px', fromY = '20px', toX = '0px', toY = '0px', animateOpacity = true })=>{
     const enterAtoms = [
         slideAtom({
             direction: 'enter',
@@ -21,7 +23,9 @@ import { slideAtom } from '../../atoms/slide-atom';
             easing,
             delay,
             fromX,
-            fromY
+            fromY,
+            toX,
+            toY
         })
     ];
     const exitAtoms = [
@@ -31,7 +35,9 @@ import { slideAtom } from '../../atoms/slide-atom';
             easing: exitEasing,
             delay: exitDelay,
             fromX,
-            fromY
+            fromY,
+            toX,
+            toY
         })
     ];
     // Only add fade atoms if animateOpacity is true.

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Slide/Slide.ts"],"sourcesContent":["import {\n  motionTokens,\n  createPresenceComponent,\n  PresenceMotionFn,\n  createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { slideAtom } from '../../atoms/slide-atom';\nimport { SlideParams } from './slide-types';\n\n/**\n * Define a presence motion for slide in/out\n *\n * @param duration - Time (ms) for the enter transition (slide-in). Defaults to the `durationNormal` value (200 ms).\n * @param easing - Easing curve for the enter transition (slide-in). Defaults to the `curveDecelerateMid` value.\n * @param delay - Time (ms) to delay the enter transition. Defaults to 0.\n * @param exitDuration - Time (ms) for the exit transition (slide-out). Defaults to the `duration` param for symmetry.\n * @param exitEasing - Easing curve for the exit transition (slide-out). Defaults to the `curveAccelerateMid` value.\n * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param fromX - The X translate value with units to animate from. Defaults to `'0px'`.\n * @param fromY - The Y translate value with units to animate from. Defaults to `'20px'`.\n * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.\n */\nconst slidePresenceFn: PresenceMotionFn<SlideParams> = ({\n  duration = motionTokens.durationNormal,\n  easing = motionTokens.curveDecelerateMid,\n  delay = 0,\n  exitDuration = duration,\n  exitEasing = motionTokens.curveAccelerateMid,\n  exitDelay = delay,\n  fromX = '0px',\n  fromY = '20px',\n  animateOpacity = true,\n}: SlideParams) => {\n  const enterAtoms = [slideAtom({ direction: 'enter', duration, easing, delay, fromX, fromY })];\n  const exitAtoms = [\n    slideAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      delay: exitDelay,\n      fromX,\n      fromY,\n    }),\n  ];\n\n  // Only add fade atoms if animateOpacity is true.\n  if (animateOpacity) {\n    enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing, 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 slide in/out transitions to its children. */\nexport const Slide = createPresenceComponent(slidePresenceFn);\n\nexport const SlideSnappy = createPresenceComponentVariant(Slide, {\n  easing: motionTokens.curveDecelerateMax,\n  exitEasing: motionTokens.curveAccelerateMax,\n});\n\nexport const SlideRelaxed = createPresenceComponentVariant(Slide, {\n  duration: motionTokens.durationGentle,\n});\n"],"names":["motionTokens","createPresenceComponent","createPresenceComponentVariant","fadeAtom","slideAtom","slidePresenceFn","duration","durationNormal","easing","curveDecelerateMid","delay","exitDuration","exitEasing","curveAccelerateMid","exitDelay","fromX","fromY","animateOpacity","enterAtoms","direction","exitAtoms","push","enter","exit","Slide","SlideSnappy","curveDecelerateMax","curveAccelerateMax","SlideRelaxed","durationGentle"],"mappings":"AAAA,SACEA,YAAY,EACZC,uBAAuB,EAEvBC,8BAA8B,QACzB,yBAAyB;AAChC,SAASC,QAAQ,QAAQ,wBAAwB;AACjD,SAASC,SAAS,QAAQ,yBAAyB;AAGnD;;;;;;;;;;;;CAYC,GACD,MAAMC,kBAAiD,CAAC,EACtDC,WAAWN,aAAaO,cAAc,EACtCC,SAASR,aAAaS,kBAAkB,EACxCC,QAAQ,CAAC,EACTC,eAAeL,QAAQ,EACvBM,aAAaZ,aAAaa,kBAAkB,EAC5CC,YAAYJ,KAAK,EACjBK,QAAQ,KAAK,EACbC,QAAQ,MAAM,EACdC,iBAAiB,IAAI,EACT;IACZ,MAAMC,aAAa;QAACd,UAAU;YAAEe,WAAW;YAASb;YAAUE;YAAQE;YAAOK;YAAOC;QAAM;KAAG;IAC7F,MAAMI,YAAY;QAChBhB,UAAU;YACRe,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,6EAA6E,GAC7E,OAAO,MAAMI,QAAQvB,wBAAwBI,iBAAiB;AAE9D,OAAO,MAAMoB,cAAcvB,+BAA+BsB,OAAO;IAC/DhB,QAAQR,aAAa0B,kBAAkB;IACvCd,YAAYZ,aAAa2B,kBAAkB;AAC7C,GAAG;AAEH,OAAO,MAAMC,eAAe1B,+BAA+BsB,OAAO;IAChElB,UAAUN,aAAa6B,cAAc;AACvC,GAAG"}
+{"version":3,"sources":["../src/components/Slide/Slide.ts"],"sourcesContent":["import {\n  motionTokens,\n  createPresenceComponent,\n  PresenceMotionFn,\n  createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { slideAtom } from '../../atoms/slide-atom';\nimport { SlideParams } from './slide-types';\n\n/**\n * Define a presence motion for slide in/out\n *\n * @param duration - Time (ms) for the enter transition (slide-in). Defaults to the `durationNormal` value (200 ms).\n * @param easing - Easing curve for the enter transition (slide-in). Defaults to the `curveDecelerateMid` value.\n * @param delay - Time (ms) to delay the enter transition. Defaults to 0.\n * @param exitDuration - Time (ms) for the exit transition (slide-out). Defaults to the `duration` param for symmetry.\n * @param exitEasing - Easing curve for the exit transition (slide-out). Defaults to the `curveAccelerateMid` value.\n * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param fromX - The X translate value with units to animate from. Defaults to `'0px'`.\n * @param fromY - The Y translate value with units to animate from. Defaults to `'20px'`.\n * @param toX - The X translate value with units to animate to. Defaults to `'0px'`.\n * @param toY - The Y translate value with units to animate to. Defaults to `'0px'`.\n * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.\n */\nconst slidePresenceFn: PresenceMotionFn<SlideParams> = ({\n  duration = motionTokens.durationNormal,\n  easing = motionTokens.curveDecelerateMid,\n  delay = 0,\n  exitDuration = duration,\n  exitEasing = motionTokens.curveAccelerateMid,\n  exitDelay = delay,\n  fromX = '0px',\n  fromY = '20px',\n  toX = '0px',\n  toY = '0px',\n  animateOpacity = true,\n}: SlideParams) => {\n  const enterAtoms = [slideAtom({ direction: 'enter', duration, easing, delay, fromX, fromY, toX, toY })];\n  const exitAtoms = [\n    slideAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      delay: exitDelay,\n      fromX,\n      fromY,\n      toX,\n      toY,\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 slide in/out transitions to its children. */\nexport const Slide = createPresenceComponent(slidePresenceFn);\n\nexport const SlideSnappy = createPresenceComponentVariant(Slide, {\n  easing: motionTokens.curveDecelerateMax,\n  exitEasing: motionTokens.curveAccelerateMax,\n});\n\nexport const SlideRelaxed = createPresenceComponentVariant(Slide, {\n  duration: motionTokens.durationGentle,\n});\n"],"names":["motionTokens","createPresenceComponent","createPresenceComponentVariant","fadeAtom","slideAtom","slidePresenceFn","duration","durationNormal","easing","curveDecelerateMid","delay","exitDuration","exitEasing","curveAccelerateMid","exitDelay","fromX","fromY","toX","toY","animateOpacity","enterAtoms","direction","exitAtoms","push","enter","exit","Slide","SlideSnappy","curveDecelerateMax","curveAccelerateMax","SlideRelaxed","durationGentle"],"mappings":"AAAA,SACEA,YAAY,EACZC,uBAAuB,EAEvBC,8BAA8B,QACzB,yBAAyB;AAChC,SAASC,QAAQ,QAAQ,wBAAwB;AACjD,SAASC,SAAS,QAAQ,yBAAyB;AAGnD;;;;;;;;;;;;;;CAcC,GACD,MAAMC,kBAAiD,CAAC,EACtDC,WAAWN,aAAaO,cAAc,EACtCC,SAASR,aAAaS,kBAAkB,EACxCC,QAAQ,CAAC,EACTC,eAAeL,QAAQ,EACvBM,aAAaZ,aAAaa,kBAAkB,EAC5CC,YAAYJ,KAAK,EACjBK,QAAQ,KAAK,EACbC,QAAQ,MAAM,EACdC,MAAM,KAAK,EACXC,MAAM,KAAK,EACXC,iBAAiB,IAAI,EACT;IACZ,MAAMC,aAAa;QAAChB,UAAU;YAAEiB,WAAW;YAASf;YAAUE;YAAQE;YAAOK;YAAOC;YAAOC;YAAKC;QAAI;KAAG;IACvG,MAAMI,YAAY;QAChBlB,UAAU;YACRiB,WAAW;YACXf,UAAUK;YACVH,QAAQI;YACRF,OAAOI;YACPC;YACAC;YACAC;YACAC;QACF;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWG,IAAI,CAACpB,SAAS;YAAEkB,WAAW;YAASf;YAAUE;YAAQE;QAAM;QACvEY,UAAUC,IAAI,CAACpB,SAAS;YAAEkB,WAAW;YAAQf,UAAUK;YAAcH,QAAQI;YAAYF,OAAOI;QAAU;IAC5G;IAEA,OAAO;QACLU,OAAOJ;QACPK,MAAMH;IACR;AACF;AAEA,6EAA6E,GAC7E,OAAO,MAAMI,QAAQzB,wBAAwBI,iBAAiB;AAE9D,OAAO,MAAMsB,cAAczB,+BAA+BwB,OAAO;IAC/DlB,QAAQR,aAAa4B,kBAAkB;IACvChB,YAAYZ,aAAa6B,kBAAkB;AAC7C,GAAG;AAEH,OAAO,MAAMC,eAAe5B,+BAA+BwB,OAAO;IAChEpB,UAAUN,aAAa+B,cAAc;AACvC,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Slide/slide-types.ts"],"sourcesContent":["import type { BasePresenceParams, AnimateOpacity } from '../../types';\n\nexport type SlideParams = BasePresenceParams &\n  AnimateOpacity & {\n    /** The X translate value with units to animate from. Defaults to `'0px'`. */\n    fromX?: string;\n\n    /** The Y translate value with units to animate from. Defaults to `'20px'`. */\n    fromY?: string;\n  };\n"],"names":[],"mappings":"AAEA,WAOI"}
+{"version":3,"sources":["../src/components/Slide/slide-types.ts"],"sourcesContent":["import type { BasePresenceParams, AnimateOpacity } from '../../types';\n\nexport type SlideParams = BasePresenceParams &\n  AnimateOpacity & {\n    /** The X translate value with units to animate from. Defaults to `'0px'`. */\n    fromX?: string;\n\n    /** The Y translate value with units to animate from. Defaults to `'20px'`. */\n    fromY?: string;\n\n    /** The X translate value with units to animate to. Defaults to `'0px'`. */\n    toX?: string;\n\n    /** The Y translate value with units to animate to. Defaults to `'0px'`. */\n    toY?: string;\n  };\n"],"names":[],"mappings":"AAEA,WAaI"}

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

@@ -9,13 +9,13 @@ Object.defineProperty(exports, "blurAtom", {
     }
 });
 const _reactmotion = require("@fluentui/react-motion");
-const blurAtom = ({ direction, duration, easing = _reactmotion.motionTokens.curveLinear, delay = 0, fromRadius = '10px' })=>{
+const blurAtom = ({ direction, duration, easing = _reactmotion.motionTokens.curveLinear, delay = 0, fromRadius = '10px', toRadius = '0px' })=>{
     const keyframes = [
         {
             filter: `blur(${fromRadius})`
         },
         {
-            filter: 'blur(0px)'
+            filter: `blur(${toRadius})`
         }
     ];
     if (direction === 'exit') {

package/lib-commonjs/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 * @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":["blurAtom","direction","duration","easing","motionTokens","curveLinear","delay","fromRadius","keyframes","filter","reverse"],"mappings":";;;;+BAgBaA;;;eAAAA;;;6BAhB4B;AAgBlC,MAAMA,WAAW,CAAC,EACvBC,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,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,IAAIR,cAAc,QAAQ;QACxBO,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAN;QACAC;QACAG;IACF;AACF"}
+{"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":["blurAtom","direction","duration","easing","motionTokens","curveLinear","delay","fromRadius","toRadius","keyframes","filter","reverse"],"mappings":";;;;+BAkBaA;;;eAAAA;;;6BAlB4B;AAkBlC,MAAMA,WAAW,CAAC,EACvBC,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,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,IAAIP,cAAc,QAAQ;QACxBQ,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAP;QACAC;QACAG;IACF;AACF"}

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

@@ -9,13 +9,13 @@ Object.defineProperty(exports, "fadeAtom", {
     }
 });
 const _reactmotion = require("@fluentui/react-motion");
-const fadeAtom = ({ direction, duration, easing = _reactmotion.motionTokens.curveLinear, delay = 0, fromOpacity = 0 })=>{
+const fadeAtom = ({ direction, duration, easing = _reactmotion.motionTokens.curveLinear, delay = 0, fromOpacity = 0, toOpacity = 1 })=>{
     const keyframes = [
         {
             opacity: fromOpacity
         },
         {
-            opacity: 1
+            opacity: toOpacity
         }
     ];
     if (direction === 'exit') {

package/lib-commonjs/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\n/**\n * Generates a motion atom object for a fade-in or fade-out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param delay - The delay before the motion starts. Defaults to 0.\n * @param fromOpacity - The starting opacity value. Defaults to 0.\n * @returns A motion atom object with opacity keyframes and the supplied duration and easing.\n */\nexport const fadeAtom = ({\n  direction,\n  duration,\n  easing = motionTokens.curveLinear,\n  delay = 0,\n  fromOpacity = 0,\n}: FadeAtomParams): AtomMotion => {\n  const keyframes = [{ opacity: fromOpacity }, { opacity: 1 }];\n  if (direction === 'exit') {\n    keyframes.reverse();\n  }\n  return {\n    keyframes,\n    duration,\n    easing,\n    delay,\n    // Applying opacity backwards and forwards in time is important\n    // to avoid a bug where a delayed animation is not hidden when it should be.\n    fill: 'both',\n  };\n};\n"],"names":["fadeAtom","direction","duration","easing","motionTokens","curveLinear","delay","fromOpacity","keyframes","opacity","reverse","fill"],"mappings":";;;;+BAoBaA;;;eAAAA;;;6BApB4B;AAoBlC,MAAMA,WAAW,CAAC,EACvBC,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,WAAW,EACjCC,QAAQ,CAAC,EACTC,cAAc,CAAC,EACA;IACf,MAAMC,YAAY;QAAC;YAAEC,SAASF;QAAY;QAAG;YAAEE,SAAS;QAAE;KAAE;IAC5D,IAAIR,cAAc,QAAQ;QACxBO,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAN;QACAC;QACAG;QACA,+DAA+D;QAC/D,4EAA4E;QAC5EK,MAAM;IACR;AACF"}
+{"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":["fadeAtom","direction","duration","easing","motionTokens","curveLinear","delay","fromOpacity","toOpacity","keyframes","opacity","reverse","fill"],"mappings":";;;;+BAwBaA;;;eAAAA;;;6BAxB4B;AAwBlC,MAAMA,WAAW,CAAC,EACvBC,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,WAAW,EACjCC,QAAQ,CAAC,EACTC,cAAc,CAAC,EACfC,YAAY,CAAC,EACE;IACf,MAAMC,YAAY;QAAC;YAAEC,SAASH;QAAY;QAAG;YAAEG,SAASF;QAAU;KAAE;IACpE,IAAIP,cAAc,QAAQ;QACxBQ,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAP;QACAC;QACAG;QACA,+DAA+D;QAC/D,4EAA4E;QAC5EM,MAAM;IACR;AACF"}

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

@@ -12,13 +12,7 @@ const _reactmotion = require("@fluentui/react-motion");
 const createRotateValue = (axis, angle)=>{
     return `${axis.toLowerCase()} ${angle}deg`;
 };
-const rotateAtom = ({ direction, duration, easing = _reactmotion.motionTokens.curveLinear, delay = 0, axis = 'y', angle = -90, exitAngle = -angle })=>{
-    let fromAngle = angle;
-    let toAngle = 0;
-    if (direction === 'exit') {
-        fromAngle = 0;
-        toAngle = exitAngle;
-    }
+const rotateAtom = ({ direction, duration, easing = _reactmotion.motionTokens.curveLinear, delay = 0, axis = 'z', fromAngle = -90, toAngle = 0 })=>{
     const keyframes = [
         {
             rotate: createRotateValue(axis, fromAngle)
@@ -27,6 +21,9 @@ const rotateAtom = ({ direction, duration, easing = _reactmotion.motionTokens.cu
             rotate: createRotateValue(axis, toAngle)
         }
     ];
+    if (direction === 'exit') {
+        keyframes.reverse();
+    }
     return {
         keyframes,
         duration,

package/lib-commonjs/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 * @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":["rotateAtom","createRotateValue","axis","angle","toLowerCase","direction","duration","easing","motionTokens","curveLinear","delay","exitAngle","fromAngle","toAngle","keyframes","rotate"],"mappings":";;;;+BA2BaA;;;eAAAA;;;6BA3B4B;AAYzC,MAAMC,oBAAoB,CAACC,MAAcC;IACvC,OAAO,GAAGD,KAAKE,WAAW,GAAG,CAAC,EAAED,MAAM,GAAG,CAAC;AAC5C;AAaO,MAAMH,aAAa,CAAC,EACzBK,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,WAAW,EACjCC,QAAQ,CAAC,EACTR,OAAO,GAAG,EACVC,QAAQ,CAAC,EAAE,EACXQ,YAAY,CAACR,KAAK,EACD;IACjB,IAAIS,YAAYT;IAChB,IAAIU,UAAU;IAEd,IAAIR,cAAc,QAAQ;QACxBO,YAAY;QACZC,UAAUF;IACZ;IACA,MAAMG,YAAY;QAAC;YAAEC,QAAQd,kBAAkBC,MAAMU;QAAW;QAAG;YAAEG,QAAQd,kBAAkBC,MAAMW;QAAS;KAAE;IAEhH,OAAO;QACLC;QACAR;QACAC;QACAG;IACF;AACF"}
+{"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":["rotateAtom","createRotateValue","axis","angle","toLowerCase","direction","duration","easing","motionTokens","curveLinear","delay","fromAngle","toAngle","keyframes","rotate","reverse"],"mappings":";;;;+BA2BaA;;;eAAAA;;;6BA3B4B;AAYzC,MAAMC,oBAAoB,CAACC,MAAcC;IACvC,OAAO,GAAGD,KAAKE,WAAW,GAAG,CAAC,EAAED,MAAM,GAAG,CAAC;AAC5C;AAaO,MAAMH,aAAa,CAAC,EACzBK,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,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,IAAIP,cAAc,QAAQ;QACxBQ,UAAUE,OAAO;IACnB;IAEA,OAAO;QACLF;QACAP;QACAC;QACAG;IACF;AACF"}

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

@@ -9,13 +9,13 @@ Object.defineProperty(exports, "slideAtom", {
     }
 });
 const _reactmotion = require("@fluentui/react-motion");
-const slideAtom = ({ direction, duration, easing = _reactmotion.motionTokens.curveLinear, delay = 0, fromX = '0px', fromY = '20px' })=>{
+const slideAtom = ({ direction, duration, easing = _reactmotion.motionTokens.curveLinear, delay = 0, fromX = '0px', fromY = '0px', toX = '0px', toY = '0px' })=>{
     const keyframes = [
         {
             translate: `${fromX} ${fromY}`
         },
         {
-            translate: '0px 0px'
+            translate: `${toX} ${toY}`
         }
     ];
     if (direction === 'exit') {

package/lib-commonjs/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 * @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":["slideAtom","direction","duration","easing","motionTokens","curveLinear","delay","fromX","fromY","keyframes","translate","reverse"],"mappings":";;;;+BAkBaA;;;eAAAA;;;6BAlB4B;AAkBlC,MAAMA,YAAY,CAAC,EACxBC,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,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,IAAIT,cAAc,QAAQ;QACxBQ,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAP;QACAC;QACAG;IACF;AACF"}
+{"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":["slideAtom","direction","duration","easing","motionTokens","curveLinear","delay","fromX","fromY","toX","toY","keyframes","translate","reverse"],"mappings":";;;;+BAsBaA;;;eAAAA;;;6BAtB4B;AAsBlC,MAAMA,YAAY,CAAC,EACxBC,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,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,IAAIT,cAAc,QAAQ;QACxBU,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAT;QACAC;QACAG;IACF;AACF"}

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

@@ -21,15 +21,17 @@ const _bluratom = require("../../atoms/blur-atom");
  * @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 animateOpacity - Whether to animate the opacity. Defaults to `true`.
- */ const blurPresenceFn = ({ duration = _reactmotion.motionTokens.durationSlow, easing = _reactmotion.motionTokens.curveDecelerateMin, delay = 0, exitDuration = duration, exitEasing = _reactmotion.motionTokens.curveAccelerateMin, exitDelay = delay, fromRadius = '10px', animateOpacity = true })=>{
+ */ const blurPresenceFn = ({ duration = _reactmotion.motionTokens.durationSlow, easing = _reactmotion.motionTokens.curveDecelerateMin, delay = 0, exitDuration = duration, exitEasing = _reactmotion.motionTokens.curveAccelerateMin, exitDelay = delay, fromRadius = '10px', toRadius = '0px', animateOpacity = true })=>{
     const enterAtoms = [
         (0, _bluratom.blurAtom)({
             direction: 'enter',
             duration,
             easing,
             delay,
-            fromRadius
+            fromRadius,
+            toRadius
         })
     ];
     const exitAtoms = [
@@ -38,7 +40,8 @@ const _bluratom = require("../../atoms/blur-atom");
             duration: exitDuration,
             easing: exitEasing,
             delay: exitDelay,
-            fromRadius
+            fromRadius,
+            toRadius
         })
     ];
     // Only add fade atoms if animateOpacity is true.

package/lib-commonjs/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 animateOpacity - Whether to animate the opacity. Defaults to `true`.\n */\nconst blurPresenceFn: PresenceMotionFn<BlurParams> = ({\n  duration = motionTokens.durationSlow,\n  easing = motionTokens.curveDecelerateMin,\n  delay = 0,\n  exitDuration = duration,\n  exitEasing = motionTokens.curveAccelerateMin,\n  exitDelay = delay,\n  fromRadius = '10px',\n  animateOpacity = true,\n}) => {\n  const enterAtoms = [blurAtom({ direction: 'enter', duration, easing, delay, fromRadius })];\n  const exitAtoms = [\n    blurAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      delay: exitDelay,\n      fromRadius,\n    }),\n  ];\n\n  // Only add fade atoms if animateOpacity is true.\n  if (animateOpacity) {\n    enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing, delay }));\n    exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing, delay: exitDelay }));\n  }\n\n  return {\n    enter: enterAtoms,\n    exit: exitAtoms,\n  };\n};\n\n/** A React component that applies blur in/out transitions to its children. */\nexport const Blur = createPresenceComponent(blurPresenceFn);\n"],"names":["Blur","blurPresenceFn","duration","motionTokens","durationSlow","easing","curveDecelerateMin","delay","exitDuration","exitEasing","curveAccelerateMin","exitDelay","fromRadius","animateOpacity","enterAtoms","blurAtom","direction","exitAtoms","push","fadeAtom","enter","exit","createPresenceComponent"],"mappings":";;;;+BAmDaA;;;eAAAA;;;6BAnD2D;0BAC/C;0BACA;AAGzB;;;;;;;;;;;CAWC,GACD,MAAMC,iBAA+C,CAAC,EACpDC,WAAWC,yBAAY,CAACC,YAAY,EACpCC,SAASF,yBAAY,CAACG,kBAAkB,EACxCC,QAAQ,CAAC,EACTC,eAAeN,QAAQ,EACvBO,aAAaN,yBAAY,CAACO,kBAAkB,EAC5CC,YAAYJ,KAAK,EACjBK,aAAa,MAAM,EACnBC,iBAAiB,IAAI,EACtB;IACC,MAAMC,aAAa;QAACC,IAAAA,kBAAQ,EAAC;YAAEC,WAAW;YAASd;YAAUG;YAAQE;YAAOK;QAAW;KAAG;IAC1F,MAAMK,YAAY;QAChBF,IAAAA,kBAAQ,EAAC;YACPC,WAAW;YACXd,UAAUM;YACVH,QAAQI;YACRF,OAAOI;YACPC;QACF;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWI,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAASd;YAAUG;YAAQE;QAAM;QACvEU,UAAUC,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAQd,UAAUM;YAAcH,QAAQI;YAAYF,OAAOI;QAAU;IAC5G;IAEA,OAAO;QACLS,OAAON;QACPO,MAAMJ;IACR;AACF;AAGO,MAAMjB,OAAOsB,IAAAA,oCAAuB,EAACrB"}
+{"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":["Blur","blurPresenceFn","duration","motionTokens","durationSlow","easing","curveDecelerateMin","delay","exitDuration","exitEasing","curveAccelerateMin","exitDelay","fromRadius","toRadius","animateOpacity","enterAtoms","blurAtom","direction","exitAtoms","push","fadeAtom","enter","exit","createPresenceComponent"],"mappings":";;;;+BAsDaA;;;eAAAA;;;6BAtD2D;0BAC/C;0BACA;AAGzB;;;;;;;;;;;;CAYC,GACD,MAAMC,iBAA+C,CAAC,EACpDC,WAAWC,yBAAY,CAACC,YAAY,EACpCC,SAASF,yBAAY,CAACG,kBAAkB,EACxCC,QAAQ,CAAC,EACTC,eAAeN,QAAQ,EACvBO,aAAaN,yBAAY,CAACO,kBAAkB,EAC5CC,YAAYJ,KAAK,EACjBK,aAAa,MAAM,EACnBC,WAAW,KAAK,EAChBC,iBAAiB,IAAI,EACtB;IACC,MAAMC,aAAa;QAACC,IAAAA,kBAAQ,EAAC;YAAEC,WAAW;YAASf;YAAUG;YAAQE;YAAOK;YAAYC;QAAS;KAAG;IACpG,MAAMK,YAAY;QAChBF,IAAAA,kBAAQ,EAAC;YACPC,WAAW;YACXf,UAAUM;YACVH,QAAQI;YACRF,OAAOI;YACPC;YACAC;QACF;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWI,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAASf;YAAUG;YAAQE;QAAM;QACvEW,UAAUC,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAQf,UAAUM;YAAcH,QAAQI;YAAYF,OAAOI;QAAU;IAC5G;IAEA,OAAO;QACLU,OAAON;QACPO,MAAMJ;IACR;AACF;AAGO,MAAMlB,OAAOuB,IAAAA,oCAAuB,EAACtB"}

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

@@ -24,19 +24,23 @@ _export(exports, {
 });
 const _reactmotion = require("@fluentui/react-motion");
 const _fadeatom = require("../../atoms/fade-atom");
-const fadePresenceFn = ({ duration = _reactmotion.motionTokens.durationNormal, easing = _reactmotion.motionTokens.curveEasyEase, delay = 0, exitDuration = duration, exitEasing = easing, exitDelay = delay })=>{
+const fadePresenceFn = ({ duration = _reactmotion.motionTokens.durationNormal, easing = _reactmotion.motionTokens.curveEasyEase, delay = 0, exitDuration = duration, exitEasing = easing, exitDelay = delay, fromOpacity = 0, toOpacity = 1 })=>{
     return {
         enter: (0, _fadeatom.fadeAtom)({
             direction: 'enter',
             duration,
             easing,
-            delay
+            delay,
+            fromOpacity,
+            toOpacity
         }),
         exit: (0, _fadeatom.fadeAtom)({
             direction: 'exit',
             duration: exitDuration,
             easing: exitEasing,
-            delay: exitDelay
+            delay: exitDelay,
+            fromOpacity,
+            toOpacity
         })
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Fade/Fade.ts"],"sourcesContent":["import {\n  motionTokens,\n  createPresenceComponent,\n  PresenceMotionFn,\n  createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { FadeParams } from './fade-types';\n\n/**\n * Define a presence motion for fade in/out\n *\n * @param duration - Time (ms) for the enter transition (fade-in). Defaults to the `durationNormal` value (200 ms).\n * @param easing - Easing curve for the enter transition (fade-in). Defaults to the `curveEasyEase` value.\n * @param delay - Time (ms) to delay the enter transition. Defaults to 0.\n * @param exitDuration - Time (ms) for the exit transition (fade-out). Defaults to the `duration` param for symmetry.\n * @param exitEasing - Easing curve for the exit transition (fade-out). Defaults to the `easing` param for symmetry.\n * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n */\nexport const fadePresenceFn: PresenceMotionFn<FadeParams> = ({\n  duration = motionTokens.durationNormal,\n  easing = motionTokens.curveEasyEase,\n  delay = 0,\n  exitDuration = duration,\n  exitEasing = easing,\n  exitDelay = delay,\n}) => {\n  return {\n    enter: fadeAtom({ direction: 'enter', duration, easing, delay }),\n    exit: fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing, delay: exitDelay }),\n  };\n};\n\n/** A React component that applies fade in/out transitions to its children. */\nexport const Fade = createPresenceComponent(fadePresenceFn);\n\nexport const FadeSnappy = createPresenceComponentVariant(Fade, { duration: motionTokens.durationFast });\n\nexport const FadeRelaxed = createPresenceComponentVariant(Fade, { duration: motionTokens.durationGentle });\n"],"names":["Fade","FadeRelaxed","FadeSnappy","fadePresenceFn","duration","motionTokens","durationNormal","easing","curveEasyEase","delay","exitDuration","exitEasing","exitDelay","enter","fadeAtom","direction","exit","createPresenceComponent","createPresenceComponentVariant","durationFast","durationGentle"],"mappings":";;;;;;;;;;;IAkCaA,IAAI;eAAJA;;IAIAC,WAAW;eAAXA;;IAFAC,UAAU;eAAVA;;IAjBAC,cAAc;eAAdA;;;6BAdN;0BACkB;AAalB,MAAMA,iBAA+C,CAAC,EAC3DC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,aAAa,EACnCC,QAAQ,CAAC,EACTC,eAAeN,QAAQ,EACvBO,aAAaJ,MAAM,EACnBK,YAAYH,KAAK,EAClB;IACC,OAAO;QACLI,OAAOC,IAAAA,kBAAQ,EAAC;YAAEC,WAAW;YAASX;YAAUG;YAAQE;QAAM;QAC9DO,MAAMF,IAAAA,kBAAQ,EAAC;YAAEC,WAAW;YAAQX,UAAUM;YAAcH,QAAQI;YAAYF,OAAOG;QAAU;IACnG;AACF;AAGO,MAAMZ,OAAOiB,IAAAA,oCAAuB,EAACd;AAErC,MAAMD,aAAagB,IAAAA,2CAA8B,EAAClB,MAAM;IAAEI,UAAUC,yBAAY,CAACc,YAAY;AAAC;AAE9F,MAAMlB,cAAciB,IAAAA,2CAA8B,EAAClB,MAAM;IAAEI,UAAUC,yBAAY,CAACe,cAAc;AAAC"}
+{"version":3,"sources":["../src/components/Fade/Fade.ts"],"sourcesContent":["import {\n  motionTokens,\n  createPresenceComponent,\n  PresenceMotionFn,\n  createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { FadeParams } from './fade-types';\n\n/**\n * Define a presence motion for fade in/out\n *\n * @param duration - Time (ms) for the enter transition (fade-in). Defaults to the `durationNormal` value (200 ms).\n * @param easing - Easing curve for the enter transition (fade-in). Defaults to the `curveEasyEase` value.\n * @param delay - Time (ms) to delay the enter transition. Defaults to 0.\n * @param exitDuration - Time (ms) for the exit transition (fade-out). Defaults to the `duration` param for symmetry.\n * @param exitEasing - Easing curve for the exit transition (fade-out). Defaults to the `easing` param for symmetry.\n * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param fromOpacity - The starting opacity value. Defaults to 0.\n * @param toOpacity - The ending opacity value. Defaults to 1.\n */\nexport const fadePresenceFn: PresenceMotionFn<FadeParams> = ({\n  duration = motionTokens.durationNormal,\n  easing = motionTokens.curveEasyEase,\n  delay = 0,\n  exitDuration = duration,\n  exitEasing = easing,\n  exitDelay = delay,\n  fromOpacity = 0,\n  toOpacity = 1,\n}) => {\n  return {\n    enter: fadeAtom({ direction: 'enter', duration, easing, delay, fromOpacity, toOpacity }),\n    exit: fadeAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      delay: exitDelay,\n      fromOpacity,\n      toOpacity,\n    }),\n  };\n};\n\n/** A React component that applies fade in/out transitions to its children. */\nexport const Fade = createPresenceComponent(fadePresenceFn);\n\nexport const FadeSnappy = createPresenceComponentVariant(Fade, { duration: motionTokens.durationFast });\n\nexport const FadeRelaxed = createPresenceComponentVariant(Fade, { duration: motionTokens.durationGentle });\n"],"names":["Fade","FadeRelaxed","FadeSnappy","fadePresenceFn","duration","motionTokens","durationNormal","easing","curveEasyEase","delay","exitDuration","exitEasing","exitDelay","fromOpacity","toOpacity","enter","fadeAtom","direction","exit","createPresenceComponent","createPresenceComponentVariant","durationFast","durationGentle"],"mappings":";;;;;;;;;;;IA6CaA,IAAI;eAAJA;;IAIAC,WAAW;eAAXA;;IAFAC,UAAU;eAAVA;;IA1BAC,cAAc;eAAdA;;;6BAhBN;0BACkB;AAelB,MAAMA,iBAA+C,CAAC,EAC3DC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,aAAa,EACnCC,QAAQ,CAAC,EACTC,eAAeN,QAAQ,EACvBO,aAAaJ,MAAM,EACnBK,YAAYH,KAAK,EACjBI,cAAc,CAAC,EACfC,YAAY,CAAC,EACd;IACC,OAAO;QACLC,OAAOC,IAAAA,kBAAQ,EAAC;YAAEC,WAAW;YAASb;YAAUG;YAAQE;YAAOI;YAAaC;QAAU;QACtFI,MAAMF,IAAAA,kBAAQ,EAAC;YACbC,WAAW;YACXb,UAAUM;YACVH,QAAQI;YACRF,OAAOG;YACPC;YACAC;QACF;IACF;AACF;AAGO,MAAMd,OAAOmB,IAAAA,oCAAuB,EAAChB;AAErC,MAAMD,aAAakB,IAAAA,2CAA8B,EAACpB,MAAM;IAAEI,UAAUC,yBAAY,CAACgB,YAAY;AAAC;AAE9F,MAAMpB,cAAcmB,IAAAA,2CAA8B,EAACpB,MAAM;IAAEI,UAAUC,yBAAY,CAACiB,cAAc;AAAC"}

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

@@ -20,11 +20,11 @@ const _rotateatom = require("../../atoms/rotate-atom");
  * @param exitDuration - Time (ms) for the exit transition (rotate-out). Defaults to the `duration` param for symmetry.
  * @param exitEasing - Easing curve for the exit transition (rotate-out). Defaults to the `curveAccelerateMax` value.
  * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.
- * @param axis - The axis of rotation: 'x', 'y', or 'z'. Defaults to 'y'.
- * @param angle - The starting rotation angle in degrees. Defaults to -90.
- * @param exitAngle - The ending rotation angle in degrees. Defaults to the negation of `angle`.
+ * @param axis - The axis of rotation: 'x', 'y', or 'z'. Defaults to 'z'.
+ * @param fromAngle - The starting rotation angle in degrees. Defaults to -90.
+ * @param toAngle - The ending rotation angle in degrees. Defaults to 0.
  * @param animateOpacity - Whether to animate the opacity during the rotation. Defaults to `true`.
- */ const rotatePresenceFn = ({ duration = _reactmotion.motionTokens.durationGentle, easing = _reactmotion.motionTokens.curveDecelerateMax, delay = 0, exitDuration = duration, exitEasing = _reactmotion.motionTokens.curveAccelerateMax, exitDelay = delay, axis = 'y', angle = -90, exitAngle = -angle, animateOpacity = true })=>{
+ */ const rotatePresenceFn = ({ duration = _reactmotion.motionTokens.durationGentle, easing = _reactmotion.motionTokens.curveDecelerateMax, delay = 0, exitDuration = duration, exitEasing = _reactmotion.motionTokens.curveAccelerateMax, exitDelay = delay, axis = 'z', fromAngle = -90, toAngle = 0, animateOpacity = true })=>{
     const enterAtoms = [
         (0, _rotateatom.rotateAtom)({
             direction: 'enter',
@@ -32,8 +32,8 @@ const _rotateatom = require("../../atoms/rotate-atom");
             easing,
             delay,
             axis,
-            angle,
-            exitAngle
+            fromAngle,
+            toAngle
         })
     ];
     const exitAtoms = [
@@ -43,8 +43,8 @@ const _rotateatom = require("../../atoms/rotate-atom");
             easing: exitEasing,
             delay: exitDelay,
             axis,
-            angle,
-            exitAngle
+            fromAngle,
+            toAngle
         })
     ];
     if (animateOpacity) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Rotate/Rotate.ts"],"sourcesContent":["import { AtomMotion, createPresenceComponent, motionTokens, PresenceMotionFn } from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { rotateAtom } from '../../atoms/rotate-atom';\nimport { RotateParams } from './rotate-types';\n\n/**\n * Define a presence motion for rotate in/out\n *\n * @param duration - Time (ms) for the enter transition (rotate-in). Defaults to the `durationGentle` value.\n * @param easing - Easing curve for the enter transition (rotate-in). Defaults to the `curveDecelerateMax` value.\n * @param delay - Time (ms) to delay the enter transition. Defaults to 0.\n * @param exitDuration - Time (ms) for the exit transition (rotate-out). Defaults to the `duration` param for symmetry.\n * @param exitEasing - Easing curve for the exit transition (rotate-out). Defaults to the `curveAccelerateMax` value.\n * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param axis - The axis of rotation: 'x', 'y', or 'z'. Defaults to 'y'.\n * @param angle - The starting rotation angle in degrees. Defaults to -90.\n * @param exitAngle - The ending rotation angle in degrees. Defaults to the negation of `angle`.\n * @param animateOpacity - Whether to animate the opacity during the rotation. Defaults to `true`.\n */\nconst rotatePresenceFn: PresenceMotionFn<RotateParams> = ({\n  duration = motionTokens.durationGentle,\n  easing = motionTokens.curveDecelerateMax,\n  delay = 0,\n  exitDuration = duration,\n  exitEasing = motionTokens.curveAccelerateMax,\n  exitDelay = delay,\n  axis = 'y',\n  angle = -90,\n  exitAngle = -angle,\n  animateOpacity = true,\n}: RotateParams) => {\n  const enterAtoms: AtomMotion[] = [\n    rotateAtom({\n      direction: 'enter',\n      duration,\n      easing,\n      delay,\n      axis,\n      angle,\n      exitAngle,\n    }),\n  ];\n\n  const exitAtoms: AtomMotion[] = [\n    rotateAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      delay: exitDelay,\n      axis,\n      angle,\n      exitAngle,\n    }),\n  ];\n\n  if (animateOpacity) {\n    enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing, delay }));\n    exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing, delay: exitDelay }));\n  }\n\n  return {\n    enter: enterAtoms,\n    exit: exitAtoms,\n  };\n};\n\n// Create a presence motion component to rotate an element around a single axis (x, y, or z).\nexport const Rotate = createPresenceComponent(rotatePresenceFn);\n"],"names":["Rotate","rotatePresenceFn","duration","motionTokens","durationGentle","easing","curveDecelerateMax","delay","exitDuration","exitEasing","curveAccelerateMax","exitDelay","axis","angle","exitAngle","animateOpacity","enterAtoms","rotateAtom","direction","exitAtoms","push","fadeAtom","enter","exit","createPresenceComponent"],"mappings":";;;;+BAmEaA;;;eAAAA;;;6BAnEuE;0BAC3D;4BACE;AAG3B;;;;;;;;;;;;;CAaC,GACD,MAAMC,mBAAmD,CAAC,EACxDC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,kBAAkB,EACxCC,QAAQ,CAAC,EACTC,eAAeN,QAAQ,EACvBO,aAAaN,yBAAY,CAACO,kBAAkB,EAC5CC,YAAYJ,KAAK,EACjBK,OAAO,GAAG,EACVC,QAAQ,CAAC,EAAE,EACXC,YAAY,CAACD,KAAK,EAClBE,iBAAiB,IAAI,EACR;IACb,MAAMC,aAA2B;QAC/BC,IAAAA,sBAAU,EAAC;YACTC,WAAW;YACXhB;YACAG;YACAE;YACAK;YACAC;YACAC;QACF;KACD;IAED,MAAMK,YAA0B;QAC9BF,IAAAA,sBAAU,EAAC;YACTC,WAAW;YACXhB,UAAUM;YACVH,QAAQI;YACRF,OAAOI;YACPC;YACAC;YACAC;QACF;KACD;IAED,IAAIC,gBAAgB;QAClBC,WAAWI,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAShB;YAAUG;YAAQE;QAAM;QACvEY,UAAUC,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAQhB,UAAUM;YAAcH,QAAQI;YAAYF,OAAOI;QAAU;IAC5G;IAEA,OAAO;QACLW,OAAON;QACPO,MAAMJ;IACR;AACF;AAGO,MAAMnB,SAASwB,IAAAA,oCAAuB,EAACvB"}
+{"version":3,"sources":["../src/components/Rotate/Rotate.ts"],"sourcesContent":["import { AtomMotion, createPresenceComponent, motionTokens, PresenceMotionFn } from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { rotateAtom } from '../../atoms/rotate-atom';\nimport { RotateParams } from './rotate-types';\n\n/**\n * Define a presence motion for rotate in/out\n *\n * @param duration - Time (ms) for the enter transition (rotate-in). Defaults to the `durationGentle` value.\n * @param easing - Easing curve for the enter transition (rotate-in). Defaults to the `curveDecelerateMax` value.\n * @param delay - Time (ms) to delay the enter transition. Defaults to 0.\n * @param exitDuration - Time (ms) for the exit transition (rotate-out). Defaults to the `duration` param for symmetry.\n * @param exitEasing - Easing curve for the exit transition (rotate-out). Defaults to the `curveAccelerateMax` value.\n * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param axis - The axis of rotation: 'x', 'y', or 'z'. Defaults to 'z'.\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 animateOpacity - Whether to animate the opacity during the rotation. Defaults to `true`.\n */\nconst rotatePresenceFn: PresenceMotionFn<RotateParams> = ({\n  duration = motionTokens.durationGentle,\n  easing = motionTokens.curveDecelerateMax,\n  delay = 0,\n  exitDuration = duration,\n  exitEasing = motionTokens.curveAccelerateMax,\n  exitDelay = delay,\n  axis = 'z',\n  fromAngle = -90,\n  toAngle = 0,\n  animateOpacity = true,\n}: RotateParams) => {\n  const enterAtoms: AtomMotion[] = [\n    rotateAtom({\n      direction: 'enter',\n      duration,\n      easing,\n      delay,\n      axis,\n      fromAngle,\n      toAngle,\n    }),\n  ];\n\n  const exitAtoms: AtomMotion[] = [\n    rotateAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      delay: exitDelay,\n      axis,\n      fromAngle,\n      toAngle,\n    }),\n  ];\n\n  if (animateOpacity) {\n    enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing, delay }));\n    exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing, delay: exitDelay }));\n  }\n\n  return {\n    enter: enterAtoms,\n    exit: exitAtoms,\n  };\n};\n\n// Create a presence motion component to rotate an element around a single axis (x, y, or z).\nexport const Rotate = createPresenceComponent(rotatePresenceFn);\n"],"names":["Rotate","rotatePresenceFn","duration","motionTokens","durationGentle","easing","curveDecelerateMax","delay","exitDuration","exitEasing","curveAccelerateMax","exitDelay","axis","fromAngle","toAngle","animateOpacity","enterAtoms","rotateAtom","direction","exitAtoms","push","fadeAtom","enter","exit","createPresenceComponent"],"mappings":";;;;+BAmEaA;;;eAAAA;;;6BAnEuE;0BAC3D;4BACE;AAG3B;;;;;;;;;;;;;CAaC,GACD,MAAMC,mBAAmD,CAAC,EACxDC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,kBAAkB,EACxCC,QAAQ,CAAC,EACTC,eAAeN,QAAQ,EACvBO,aAAaN,yBAAY,CAACO,kBAAkB,EAC5CC,YAAYJ,KAAK,EACjBK,OAAO,GAAG,EACVC,YAAY,CAAC,EAAE,EACfC,UAAU,CAAC,EACXC,iBAAiB,IAAI,EACR;IACb,MAAMC,aAA2B;QAC/BC,IAAAA,sBAAU,EAAC;YACTC,WAAW;YACXhB;YACAG;YACAE;YACAK;YACAC;YACAC;QACF;KACD;IAED,MAAMK,YAA0B;QAC9BF,IAAAA,sBAAU,EAAC;YACTC,WAAW;YACXhB,UAAUM;YACVH,QAAQI;YACRF,OAAOI;YACPC;YACAC;YACAC;QACF;KACD;IAED,IAAIC,gBAAgB;QAClBC,WAAWI,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAShB;YAAUG;YAAQE;QAAM;QACvEY,UAAUC,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAQhB,UAAUM;YAAcH,QAAQI;YAAYF,OAAOI;QAAU;IAC5G;IAEA,OAAO;QACLW,OAAON;QACPO,MAAMJ;IACR;AACF;AAGO,MAAMnB,SAASwB,IAAAA,oCAAuB,EAACvB"}

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

@@ -32,15 +32,17 @@ const _scaleatom = require("../../atoms/scale-atom");
  * @param exitEasing - Easing curve for the exit transition (scale-out). Defaults to the `curveAccelerateMax` value.
  * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.
  * @param fromScale - The scale value to animate from. Defaults to `0.9`.
+ * @param toScale - The scale value to animate to. Defaults to `1`.
  * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.
- */ const scalePresenceFn = ({ duration = _reactmotion.motionTokens.durationGentle, easing = _reactmotion.motionTokens.curveDecelerateMax, delay = 0, exitDuration = _reactmotion.motionTokens.durationNormal, exitEasing = _reactmotion.motionTokens.curveAccelerateMax, exitDelay = delay, fromScale = 0.9, animateOpacity = true })=>{
+ */ const scalePresenceFn = ({ duration = _reactmotion.motionTokens.durationGentle, easing = _reactmotion.motionTokens.curveDecelerateMax, delay = 0, exitDuration = _reactmotion.motionTokens.durationNormal, exitEasing = _reactmotion.motionTokens.curveAccelerateMax, exitDelay = delay, fromScale = 0.9, toScale = 1, animateOpacity = true })=>{
     const enterAtoms = [
         (0, _scaleatom.scaleAtom)({
             direction: 'enter',
             duration,
             easing,
             delay,
-            fromScale
+            fromScale,
+            toScale
         })
     ];
     const exitAtoms = [
@@ -49,7 +51,8 @@ const _scaleatom = require("../../atoms/scale-atom");
             duration: exitDuration,
             easing: exitEasing,
             delay: exitDelay,
-            fromScale
+            fromScale,
+            toScale
         })
     ];
     // Only add fade atoms if animateOpacity is true.

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Scale/Scale.ts"],"sourcesContent":["import {\n  motionTokens,\n  createPresenceComponent,\n  PresenceMotionFn,\n  createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { scaleAtom } from '../../atoms/scale-atom';\nimport { ScaleParams } from './scale-types';\n\n/**\n * Define a presence motion for scale in/out\n *\n * @param duration - Time (ms) for the enter transition (scale-in). Defaults to the `durationGentle` value (250 ms).\n * @param easing - Easing curve for the enter transition (scale-in). Defaults to the `curveDecelerateMax` value.\n * @param delay - Time (ms) to delay the enter transition. Defaults to 0.\n * @param exitDuration - Time (ms) for the exit transition (scale-out). Defaults to the `durationNormal` value (200 ms).\n * @param exitEasing - Easing curve for the exit transition (scale-out). Defaults to the `curveAccelerateMax` value.\n * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param fromScale - The scale value to animate from. Defaults to `0.9`.\n * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.\n */\nconst scalePresenceFn: PresenceMotionFn<ScaleParams> = ({\n  duration = motionTokens.durationGentle,\n  easing = motionTokens.curveDecelerateMax,\n  delay = 0,\n  exitDuration = motionTokens.durationNormal,\n  exitEasing = motionTokens.curveAccelerateMax,\n  exitDelay = delay,\n  fromScale = 0.9,\n  animateOpacity = true,\n}) => {\n  const enterAtoms = [scaleAtom({ direction: 'enter', duration, easing, delay, fromScale })];\n  const exitAtoms = [\n    scaleAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      delay: exitDelay,\n      fromScale,\n    }),\n  ];\n\n  // Only add fade atoms if animateOpacity is true.\n  if (animateOpacity) {\n    enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing, 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 scale in/out transitions to its children. */\nexport const Scale = createPresenceComponent(scalePresenceFn);\n\nexport const ScaleSnappy = createPresenceComponentVariant(Scale, {\n  duration: motionTokens.durationNormal,\n  exitDuration: motionTokens.durationFast,\n});\n\nexport const ScaleRelaxed = createPresenceComponentVariant(Scale, {\n  duration: motionTokens.durationSlow,\n  exitDuration: motionTokens.durationGentle,\n});\n"],"names":["Scale","ScaleRelaxed","ScaleSnappy","scalePresenceFn","duration","motionTokens","durationGentle","easing","curveDecelerateMax","delay","exitDuration","durationNormal","exitEasing","curveAccelerateMax","exitDelay","fromScale","animateOpacity","enterAtoms","scaleAtom","direction","exitAtoms","push","fadeAtom","enter","exit","createPresenceComponent","createPresenceComponentVariant","durationFast","durationSlow"],"mappings":";;;;;;;;;;;IAwDaA,KAAK;eAALA;;IAOAC,YAAY;eAAZA;;IALAC,WAAW;eAAXA;;;6BArDN;0BACkB;2BACC;AAG1B;;;;;;;;;;;CAWC,GACD,MAAMC,kBAAiD,CAAC,EACtDC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,kBAAkB,EACxCC,QAAQ,CAAC,EACTC,eAAeL,yBAAY,CAACM,cAAc,EAC1CC,aAAaP,yBAAY,CAACQ,kBAAkB,EAC5CC,YAAYL,KAAK,EACjBM,YAAY,GAAG,EACfC,iBAAiB,IAAI,EACtB;IACC,MAAMC,aAAa;QAACC,IAAAA,oBAAS,EAAC;YAAEC,WAAW;YAASf;YAAUG;YAAQE;YAAOM;QAAU;KAAG;IAC1F,MAAMK,YAAY;QAChBF,IAAAA,oBAAS,EAAC;YACRC,WAAW;YACXf,UAAUM;YACVH,QAAQK;YACRH,OAAOK;YACPC;QACF;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWI,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAASf;YAAUG;YAAQE;QAAM;QACvEW,UAAUC,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAQf,UAAUM;YAAcH,QAAQK;YAAYH,OAAOK;QAAU;IAC5G;IAEA,OAAO;QACLS,OAAON;QACPO,MAAMJ;IACR;AACF;AAGO,MAAMpB,QAAQyB,IAAAA,oCAAuB,EAACtB;AAEtC,MAAMD,cAAcwB,IAAAA,2CAA8B,EAAC1B,OAAO;IAC/DI,UAAUC,yBAAY,CAACM,cAAc;IACrCD,cAAcL,yBAAY,CAACsB,YAAY;AACzC;AAEO,MAAM1B,eAAeyB,IAAAA,2CAA8B,EAAC1B,OAAO;IAChEI,UAAUC,yBAAY,CAACuB,YAAY;IACnClB,cAAcL,yBAAY,CAACC,cAAc;AAC3C"}
+{"version":3,"sources":["../src/components/Scale/Scale.ts"],"sourcesContent":["import {\n  motionTokens,\n  createPresenceComponent,\n  PresenceMotionFn,\n  createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { scaleAtom } from '../../atoms/scale-atom';\nimport { ScaleParams } from './scale-types';\n\n/**\n * Define a presence motion for scale in/out\n *\n * @param duration - Time (ms) for the enter transition (scale-in). Defaults to the `durationGentle` value (250 ms).\n * @param easing - Easing curve for the enter transition (scale-in). Defaults to the `curveDecelerateMax` value.\n * @param delay - Time (ms) to delay the enter transition. Defaults to 0.\n * @param exitDuration - Time (ms) for the exit transition (scale-out). Defaults to the `durationNormal` value (200 ms).\n * @param exitEasing - Easing curve for the exit transition (scale-out). Defaults to the `curveAccelerateMax` value.\n * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param fromScale - The scale value to animate from. Defaults to `0.9`.\n * @param toScale - The scale value to animate to. Defaults to `1`.\n * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.\n */\nconst scalePresenceFn: PresenceMotionFn<ScaleParams> = ({\n  duration = motionTokens.durationGentle,\n  easing = motionTokens.curveDecelerateMax,\n  delay = 0,\n  exitDuration = motionTokens.durationNormal,\n  exitEasing = motionTokens.curveAccelerateMax,\n  exitDelay = delay,\n  fromScale = 0.9,\n  toScale = 1,\n  animateOpacity = true,\n}) => {\n  const enterAtoms = [scaleAtom({ direction: 'enter', duration, easing, delay, fromScale, toScale })];\n  const exitAtoms = [\n    scaleAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      delay: exitDelay,\n      fromScale,\n      toScale,\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 scale in/out transitions to its children. */\nexport const Scale = createPresenceComponent(scalePresenceFn);\n\nexport const ScaleSnappy = createPresenceComponentVariant(Scale, {\n  duration: motionTokens.durationNormal,\n  exitDuration: motionTokens.durationFast,\n});\n\nexport const ScaleRelaxed = createPresenceComponentVariant(Scale, {\n  duration: motionTokens.durationSlow,\n  exitDuration: motionTokens.durationGentle,\n});\n"],"names":["Scale","ScaleRelaxed","ScaleSnappy","scalePresenceFn","duration","motionTokens","durationGentle","easing","curveDecelerateMax","delay","exitDuration","durationNormal","exitEasing","curveAccelerateMax","exitDelay","fromScale","toScale","animateOpacity","enterAtoms","scaleAtom","direction","exitAtoms","push","fadeAtom","enter","exit","createPresenceComponent","createPresenceComponentVariant","durationFast","durationSlow"],"mappings":";;;;;;;;;;;IA2DaA,KAAK;eAALA;;IAOAC,YAAY;eAAZA;;IALAC,WAAW;eAAXA;;;6BAxDN;0BACkB;2BACC;AAG1B;;;;;;;;;;;;CAYC,GACD,MAAMC,kBAAiD,CAAC,EACtDC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,kBAAkB,EACxCC,QAAQ,CAAC,EACTC,eAAeL,yBAAY,CAACM,cAAc,EAC1CC,aAAaP,yBAAY,CAACQ,kBAAkB,EAC5CC,YAAYL,KAAK,EACjBM,YAAY,GAAG,EACfC,UAAU,CAAC,EACXC,iBAAiB,IAAI,EACtB;IACC,MAAMC,aAAa;QAACC,IAAAA,oBAAS,EAAC;YAAEC,WAAW;YAAShB;YAAUG;YAAQE;YAAOM;YAAWC;QAAQ;KAAG;IACnG,MAAMK,YAAY;QAChBF,IAAAA,oBAAS,EAAC;YACRC,WAAW;YACXhB,UAAUM;YACVH,QAAQK;YACRH,OAAOK;YACPC;YACAC;QACF;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWI,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAShB;YAAUG;YAAQE;QAAM;QACvEY,UAAUC,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAQhB,UAAUM;YAAcH,QAAQK;YAAYH,OAAOK;QAAU;IAC5G;IAEA,OAAO;QACLU,OAAON;QACPO,MAAMJ;IACR;AACF;AAGO,MAAMrB,QAAQ0B,IAAAA,oCAAuB,EAACvB;AAEtC,MAAMD,cAAcyB,IAAAA,2CAA8B,EAAC3B,OAAO;IAC/DI,UAAUC,yBAAY,CAACM,cAAc;IACrCD,cAAcL,yBAAY,CAACuB,YAAY;AACzC;AAEO,MAAM3B,eAAe0B,IAAAA,2CAA8B,EAAC3B,OAAO;IAChEI,UAAUC,yBAAY,CAACwB,YAAY;IACnCnB,cAAcL,yBAAY,CAACC,cAAc;AAC3C"}

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

@@ -33,8 +33,10 @@ const _slideatom = require("../../atoms/slide-atom");
  * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.
  * @param fromX - The X translate value with units to animate from. Defaults to `'0px'`.
  * @param fromY - The Y translate value with units to animate from. Defaults to `'20px'`.
+ * @param toX - The X translate value with units to animate to. Defaults to `'0px'`.
+ * @param toY - The Y translate value with units to animate to. Defaults to `'0px'`.
  * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.
- */ const slidePresenceFn = ({ duration = _reactmotion.motionTokens.durationNormal, easing = _reactmotion.motionTokens.curveDecelerateMid, delay = 0, exitDuration = duration, exitEasing = _reactmotion.motionTokens.curveAccelerateMid, exitDelay = delay, fromX = '0px', fromY = '20px', animateOpacity = true })=>{
+ */ const slidePresenceFn = ({ duration = _reactmotion.motionTokens.durationNormal, easing = _reactmotion.motionTokens.curveDecelerateMid, delay = 0, exitDuration = duration, exitEasing = _reactmotion.motionTokens.curveAccelerateMid, exitDelay = delay, fromX = '0px', fromY = '20px', toX = '0px', toY = '0px', animateOpacity = true })=>{
     const enterAtoms = [
         (0, _slideatom.slideAtom)({
             direction: 'enter',
@@ -42,7 +44,9 @@ const _slideatom = require("../../atoms/slide-atom");
             easing,
             delay,
             fromX,
-            fromY
+            fromY,
+            toX,
+            toY
         })
     ];
     const exitAtoms = [
@@ -52,7 +56,9 @@ const _slideatom = require("../../atoms/slide-atom");
             easing: exitEasing,
             delay: exitDelay,
             fromX,
-            fromY
+            fromY,
+            toX,
+            toY
         })
     ];
     // Only add fade atoms if animateOpacity is true.

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Slide/Slide.ts"],"sourcesContent":["import {\n  motionTokens,\n  createPresenceComponent,\n  PresenceMotionFn,\n  createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { slideAtom } from '../../atoms/slide-atom';\nimport { SlideParams } from './slide-types';\n\n/**\n * Define a presence motion for slide in/out\n *\n * @param duration - Time (ms) for the enter transition (slide-in). Defaults to the `durationNormal` value (200 ms).\n * @param easing - Easing curve for the enter transition (slide-in). Defaults to the `curveDecelerateMid` value.\n * @param delay - Time (ms) to delay the enter transition. Defaults to 0.\n * @param exitDuration - Time (ms) for the exit transition (slide-out). Defaults to the `duration` param for symmetry.\n * @param exitEasing - Easing curve for the exit transition (slide-out). Defaults to the `curveAccelerateMid` value.\n * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param fromX - The X translate value with units to animate from. Defaults to `'0px'`.\n * @param fromY - The Y translate value with units to animate from. Defaults to `'20px'`.\n * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.\n */\nconst slidePresenceFn: PresenceMotionFn<SlideParams> = ({\n  duration = motionTokens.durationNormal,\n  easing = motionTokens.curveDecelerateMid,\n  delay = 0,\n  exitDuration = duration,\n  exitEasing = motionTokens.curveAccelerateMid,\n  exitDelay = delay,\n  fromX = '0px',\n  fromY = '20px',\n  animateOpacity = true,\n}: SlideParams) => {\n  const enterAtoms = [slideAtom({ direction: 'enter', duration, easing, delay, fromX, fromY })];\n  const exitAtoms = [\n    slideAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      delay: exitDelay,\n      fromX,\n      fromY,\n    }),\n  ];\n\n  // Only add fade atoms if animateOpacity is true.\n  if (animateOpacity) {\n    enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing, 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 slide in/out transitions to its children. */\nexport const Slide = createPresenceComponent(slidePresenceFn);\n\nexport const SlideSnappy = createPresenceComponentVariant(Slide, {\n  easing: motionTokens.curveDecelerateMax,\n  exitEasing: motionTokens.curveAccelerateMax,\n});\n\nexport const SlideRelaxed = createPresenceComponentVariant(Slide, {\n  duration: motionTokens.durationGentle,\n});\n"],"names":["Slide","SlideRelaxed","SlideSnappy","slidePresenceFn","duration","motionTokens","durationNormal","easing","curveDecelerateMid","delay","exitDuration","exitEasing","curveAccelerateMid","exitDelay","fromX","fromY","animateOpacity","enterAtoms","slideAtom","direction","exitAtoms","push","fadeAtom","enter","exit","createPresenceComponent","createPresenceComponentVariant","curveDecelerateMax","curveAccelerateMax","durationGentle"],"mappings":";;;;;;;;;;;IA2DaA,KAAK;eAALA;;IAOAC,YAAY;eAAZA;;IALAC,WAAW;eAAXA;;;6BAxDN;0BACkB;2BACC;AAG1B;;;;;;;;;;;;CAYC,GACD,MAAMC,kBAAiD,CAAC,EACtDC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,kBAAkB,EACxCC,QAAQ,CAAC,EACTC,eAAeN,QAAQ,EACvBO,aAAaN,yBAAY,CAACO,kBAAkB,EAC5CC,YAAYJ,KAAK,EACjBK,QAAQ,KAAK,EACbC,QAAQ,MAAM,EACdC,iBAAiB,IAAI,EACT;IACZ,MAAMC,aAAa;QAACC,IAAAA,oBAAS,EAAC;YAAEC,WAAW;YAASf;YAAUG;YAAQE;YAAOK;YAAOC;QAAM;KAAG;IAC7F,MAAMK,YAAY;QAChBF,IAAAA,oBAAS,EAAC;YACRC,WAAW;YACXf,UAAUM;YACVH,QAAQI;YACRF,OAAOI;YACPC;YACAC;QACF;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWI,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAASf;YAAUG;YAAQE;QAAM;QACvEW,UAAUC,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAQf,UAAUM;YAAcH,QAAQI;YAAYF,OAAOI;QAAU;IAC5G;IAEA,OAAO;QACLU,OAAON;QACPO,MAAMJ;IACR;AACF;AAGO,MAAMpB,QAAQyB,IAAAA,oCAAuB,EAACtB;AAEtC,MAAMD,cAAcwB,IAAAA,2CAA8B,EAAC1B,OAAO;IAC/DO,QAAQF,yBAAY,CAACsB,kBAAkB;IACvChB,YAAYN,yBAAY,CAACuB,kBAAkB;AAC7C;AAEO,MAAM3B,eAAeyB,IAAAA,2CAA8B,EAAC1B,OAAO;IAChEI,UAAUC,yBAAY,CAACwB,cAAc;AACvC"}
+{"version":3,"sources":["../src/components/Slide/Slide.ts"],"sourcesContent":["import {\n  motionTokens,\n  createPresenceComponent,\n  PresenceMotionFn,\n  createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { slideAtom } from '../../atoms/slide-atom';\nimport { SlideParams } from './slide-types';\n\n/**\n * Define a presence motion for slide in/out\n *\n * @param duration - Time (ms) for the enter transition (slide-in). Defaults to the `durationNormal` value (200 ms).\n * @param easing - Easing curve for the enter transition (slide-in). Defaults to the `curveDecelerateMid` value.\n * @param delay - Time (ms) to delay the enter transition. Defaults to 0.\n * @param exitDuration - Time (ms) for the exit transition (slide-out). Defaults to the `duration` param for symmetry.\n * @param exitEasing - Easing curve for the exit transition (slide-out). Defaults to the `curveAccelerateMid` value.\n * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param fromX - The X translate value with units to animate from. Defaults to `'0px'`.\n * @param fromY - The Y translate value with units to animate from. Defaults to `'20px'`.\n * @param toX - The X translate value with units to animate to. Defaults to `'0px'`.\n * @param toY - The Y translate value with units to animate to. Defaults to `'0px'`.\n * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.\n */\nconst slidePresenceFn: PresenceMotionFn<SlideParams> = ({\n  duration = motionTokens.durationNormal,\n  easing = motionTokens.curveDecelerateMid,\n  delay = 0,\n  exitDuration = duration,\n  exitEasing = motionTokens.curveAccelerateMid,\n  exitDelay = delay,\n  fromX = '0px',\n  fromY = '20px',\n  toX = '0px',\n  toY = '0px',\n  animateOpacity = true,\n}: SlideParams) => {\n  const enterAtoms = [slideAtom({ direction: 'enter', duration, easing, delay, fromX, fromY, toX, toY })];\n  const exitAtoms = [\n    slideAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      delay: exitDelay,\n      fromX,\n      fromY,\n      toX,\n      toY,\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 slide in/out transitions to its children. */\nexport const Slide = createPresenceComponent(slidePresenceFn);\n\nexport const SlideSnappy = createPresenceComponentVariant(Slide, {\n  easing: motionTokens.curveDecelerateMax,\n  exitEasing: motionTokens.curveAccelerateMax,\n});\n\nexport const SlideRelaxed = createPresenceComponentVariant(Slide, {\n  duration: motionTokens.durationGentle,\n});\n"],"names":["Slide","SlideRelaxed","SlideSnappy","slidePresenceFn","duration","motionTokens","durationNormal","easing","curveDecelerateMid","delay","exitDuration","exitEasing","curveAccelerateMid","exitDelay","fromX","fromY","toX","toY","animateOpacity","enterAtoms","slideAtom","direction","exitAtoms","push","fadeAtom","enter","exit","createPresenceComponent","createPresenceComponentVariant","curveDecelerateMax","curveAccelerateMax","durationGentle"],"mappings":";;;;;;;;;;;IAiEaA,KAAK;eAALA;;IAOAC,YAAY;eAAZA;;IALAC,WAAW;eAAXA;;;6BA9DN;0BACkB;2BACC;AAG1B;;;;;;;;;;;;;;CAcC,GACD,MAAMC,kBAAiD,CAAC,EACtDC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,kBAAkB,EACxCC,QAAQ,CAAC,EACTC,eAAeN,QAAQ,EACvBO,aAAaN,yBAAY,CAACO,kBAAkB,EAC5CC,YAAYJ,KAAK,EACjBK,QAAQ,KAAK,EACbC,QAAQ,MAAM,EACdC,MAAM,KAAK,EACXC,MAAM,KAAK,EACXC,iBAAiB,IAAI,EACT;IACZ,MAAMC,aAAa;QAACC,IAAAA,oBAAS,EAAC;YAAEC,WAAW;YAASjB;YAAUG;YAAQE;YAAOK;YAAOC;YAAOC;YAAKC;QAAI;KAAG;IACvG,MAAMK,YAAY;QAChBF,IAAAA,oBAAS,EAAC;YACRC,WAAW;YACXjB,UAAUM;YACVH,QAAQI;YACRF,OAAOI;YACPC;YACAC;YACAC;YACAC;QACF;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWI,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAASjB;YAAUG;YAAQE;QAAM;QACvEa,UAAUC,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAQjB,UAAUM;YAAcH,QAAQI;YAAYF,OAAOI;QAAU;IAC5G;IAEA,OAAO;QACLY,OAAON;QACPO,MAAMJ;IACR;AACF;AAGO,MAAMtB,QAAQ2B,IAAAA,oCAAuB,EAACxB;AAEtC,MAAMD,cAAc0B,IAAAA,2CAA8B,EAAC5B,OAAO;IAC/DO,QAAQF,yBAAY,CAACwB,kBAAkB;IACvClB,YAAYN,yBAAY,CAACyB,kBAAkB;AAC7C;AAEO,MAAM7B,eAAe2B,IAAAA,2CAA8B,EAAC5B,OAAO;IAChEI,UAAUC,yBAAY,CAAC0B,cAAc;AACvC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-motion-components-preview",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "A preview package for Fluent UI motion components, providing a collection of components",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",