@fluentui/react-motion-components-preview 0.8.1 → 0.9.0

package/CHANGELOG.md

@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-motion-components-preview
 
-This log was last generated on Mon, 28 Jul 2025 18:48:19 GMT and should not be manually modified.
+This log was last generated on Thu, 21 Aug 2025 12:20:17 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.9.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.9.0)
+
+Thu, 21 Aug 2025 12:20:17 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.8.1..@fluentui/react-motion-components-preview_v0.9.0)
+
+### Minor changes
+
+- feat(motion): add Rotate presence motion component ([PR #34928](https://github.com/microsoft/fluentui/pull/34928) by robertpenner@microsoft.com)
+
 ## [0.8.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.8.0)
 
 Mon, 28 Jul 2025 18:48:19 GMT 

package/dist/index.d.ts

@@ -8,10 +8,12 @@ declare type AnimateOpacity = {
     animateOpacity?: boolean;
 };
 
+declare type Axis3D = 'x' | 'y' | 'z';
+
 /** A React component that applies blur in/out transitions to its children. */
 export declare const Blur: PresenceComponent<BlurParams>;
 
-declare type BlurParams = PresenceDuration & PresenceEasing & AnimateOpacity & {
+export declare type BlurParams = PresenceDuration & PresenceEasing & AnimateOpacity & {
     /** The radius of pixels to blend into the blur. A length string, defaulting to '20px'. */
     fromRadius?: string;
 };
@@ -80,6 +82,26 @@ declare type PresenceEasing = {
     exitEasing?: string;
 };
 
+export declare const Rotate: PresenceComponent<RotateParams>;
+
+export declare type RotateParams = PresenceDuration & PresenceEasing & AnimateOpacity & {
+    /**
+     * The axis of rotation: 'x', 'y', or 'z'.
+     * Defaults to 'y'.
+     */
+    axis?: Axis3D;
+    /**
+     * The starting rotation angle in degrees.
+     * Defaults to -90.
+     */
+    angle?: number;
+    /**
+     * The ending rotation angle in degrees.
+     * Defaults to the negation of `angle`.
+     */
+    exitAngle?: number;
+};
+
 /** A React component that applies scale in/out transitions to its children. */
 export declare const Scale: PresenceComponent<ScaleParams>;
 

package/lib/atoms/rotate-atom.js

@@ -0,0 +1,34 @@
+import { motionTokens } from '@fluentui/react-motion';
+const createRotateValue = (axis, angle)=>{
+    return `${axis.toLowerCase()} ${angle}deg`;
+};
+/**
+ * Generates a motion atom object for a rotation around a single axis.
+ * @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 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`.
+ * @returns A motion atom object with rotate keyframes and the supplied duration and easing.
+ */ export const rotateAtom = ({ direction, duration, easing = motionTokens.curveLinear, axis = 'y', angle = -90, exitAngle = -angle })=>{
+    let fromAngle = angle;
+    let toAngle = 0;
+    if (direction === 'exit') {
+        fromAngle = 0;
+        toAngle = exitAngle;
+    }
+    const keyframes = [
+        {
+            rotate: createRotateValue(axis, fromAngle)
+        },
+        {
+            rotate: createRotateValue(axis, toAngle)
+        }
+    ];
+    return {
+        keyframes,
+        duration,
+        easing
+    };
+};

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

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

package/lib/components/Rotate/Rotate.js

@@ -0,0 +1,54 @@
+import { createPresenceComponent, motionTokens } from '@fluentui/react-motion';
+import { fadeAtom } from '../../atoms/fade-atom';
+import { rotateAtom } from '../../atoms/rotate-atom';
+/**
+ * Define a presence motion for rotate in/out
+ *
+ * @param duration - Time (ms) for the enter transition (rotate-in). Defaults to the `durationGentle` value.
+ * @param easing - Easing curve for the enter transition (rotate-in). Defaults to the `curveDecelerateMax` value.
+ * @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 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 animateOpacity - Whether to animate the opacity during the rotation. Defaults to `true`.
+ */ const rotatePresenceFn = ({ axis = 'y', angle = -90, exitAngle = -angle, duration = motionTokens.durationGentle, exitDuration = duration, easing = motionTokens.curveDecelerateMax, exitEasing = motionTokens.curveAccelerateMax, animateOpacity = true })=>{
+    const enterAtoms = [
+        rotateAtom({
+            direction: 'enter',
+            duration,
+            easing,
+            axis,
+            angle,
+            exitAngle
+        })
+    ];
+    const exitAtoms = [
+        rotateAtom({
+            direction: 'exit',
+            duration: exitDuration,
+            easing: exitEasing,
+            axis,
+            angle,
+            exitAngle
+        })
+    ];
+    if (animateOpacity) {
+        enterAtoms.push(fadeAtom({
+            direction: 'enter',
+            duration,
+            easing
+        }));
+        exitAtoms.push(fadeAtom({
+            direction: 'exit',
+            duration: exitDuration,
+            easing: exitEasing
+        }));
+    }
+    return {
+        enter: enterAtoms,
+        exit: exitAtoms
+    };
+};
+// Create a presence motion component to rotate an element around a single axis (x, y, or z).
+export const Rotate = createPresenceComponent(rotatePresenceFn);

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

@@ -0,0 +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 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 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  axis = 'y',\n  angle = -90,\n  exitAngle = -angle,\n  duration = motionTokens.durationGentle,\n  exitDuration = duration,\n  easing = motionTokens.curveDecelerateMax,\n  exitEasing = motionTokens.curveAccelerateMax,\n  animateOpacity = true,\n}: RotateParams) => {\n  const enterAtoms: AtomMotion[] = [\n    rotateAtom({\n      direction: 'enter',\n      duration,\n      easing,\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      axis,\n      angle,\n      exitAngle,\n    }),\n  ];\n\n  if (animateOpacity) {\n    enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing }));\n    exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing }));\n  }\n\n  return {\n    enter: enterAtoms,\n    exit: exitAtoms,\n  };\n};\n\n// 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","axis","angle","exitAngle","duration","durationGentle","exitDuration","easing","curveDecelerateMax","exitEasing","curveAccelerateMax","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;;;;;;;;;;;CAWC,GACD,MAAMC,mBAAmD,CAAC,EACxDC,OAAO,GAAG,EACVC,QAAQ,CAAC,EAAE,EACXC,YAAY,CAACD,KAAK,EAClBE,WAAWP,aAAaQ,cAAc,EACtCC,eAAeF,QAAQ,EACvBG,SAASV,aAAaW,kBAAkB,EACxCC,aAAaZ,aAAaa,kBAAkB,EAC5CC,iBAAiB,IAAI,EACR;IACb,MAAMC,aAA2B;QAC/Bb,WAAW;YACTc,WAAW;YACXT;YACAG;YACAN;YACAC;YACAC;QACF;KACD;IAED,MAAMW,YAA0B;QAC9Bf,WAAW;YACTc,WAAW;YACXT,UAAUE;YACVC,QAAQE;YACRR;YACAC;YACAC;QACF;KACD;IAED,IAAIQ,gBAAgB;QAClBC,WAAWG,IAAI,CAACjB,SAAS;YAAEe,WAAW;YAAST;YAAUG;QAAO;QAChEO,UAAUC,IAAI,CAACjB,SAAS;YAAEe,WAAW;YAAQT,UAAUE;YAAcC,QAAQE;QAAW;IAC1F;IAEA,OAAO;QACLO,OAAOJ;QACPK,MAAMH;IACR;AACF;AAEA,6FAA6F;AAC7F,OAAO,MAAMI,SAAStB,wBAAwBI,kBAAkB"}

package/lib/components/Rotate/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Rotate/index.ts"],"sourcesContent":["export { Rotate } from './Rotate';\nexport type { RotateParams } from './rotate-types';\n"],"names":["Rotate"],"mappings":"AAAA,SAASA,MAAM,QAAQ,WAAW"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Rotate/rotate-types.ts"],"sourcesContent":["import type { PresenceDuration, PresenceEasing, AnimateOpacity } from '../../types';\n\ntype Axis3D = 'x' | 'y' | 'z';\n\nexport type RotateParams = PresenceDuration &\n  PresenceEasing &\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,WAoBI"}

package/lib/index.js

@@ -3,3 +3,4 @@ export { Fade, FadeSnappy, FadeRelaxed } from './components/Fade';
 export { Scale, ScaleSnappy, ScaleRelaxed } from './components/Scale';
 export { Slide, SlideSnappy, SlideRelaxed } from './components/Slide';
 export { Blur } from './components/Blur';
+export { Rotate } from './components/Rotate';

package/lib/index.js.map

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

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

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "rotateAtom", {
+    enumerable: true,
+    get: function() {
+        return rotateAtom;
+    }
+});
+const _reactmotion = require("@fluentui/react-motion");
+const createRotateValue = (axis, angle)=>{
+    return `${axis.toLowerCase()} ${angle}deg`;
+};
+const rotateAtom = ({ direction, duration, easing = _reactmotion.motionTokens.curveLinear, axis = 'y', angle = -90, exitAngle = -angle })=>{
+    let fromAngle = angle;
+    let toAngle = 0;
+    if (direction === 'exit') {
+        fromAngle = 0;
+        toAngle = exitAngle;
+    }
+    const keyframes = [
+        {
+            rotate: createRotateValue(axis, fromAngle)
+        },
+        {
+            rotate: createRotateValue(axis, toAngle)
+        }
+    ];
+    return {
+        keyframes,
+        duration,
+        easing
+    };
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/atoms/rotate-atom.ts"],"sourcesContent":["import { AtomMotion, PresenceDirection, motionTokens } from '@fluentui/react-motion';\nimport type { RotateParams } from '../components/Rotate/rotate-types';\n\ntype Axis3D = NonNullable<RotateParams['axis']>;\n\ninterface RotateAtomParams {\n  direction: PresenceDirection;\n  duration: number;\n  easing?: string;\n  axis?: Axis3D;\n  angle?: number;\n  exitAngle?: number;\n}\n\nconst createRotateValue = (axis: Axis3D, angle: number): string => {\n  return `${axis.toLowerCase()} ${angle}deg`;\n};\n\n/**\n * Generates a motion atom object for a rotation around a single axis.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param axis - The axis of rotation: 'x', 'y', or 'z'. Defaults to 'y'.\n * @param angle - The starting rotation angle in degrees. Defaults to -90.\n * @param exitAngle - The ending rotation angle in degrees. Defaults to the negation of `angle`.\n * @returns A motion atom object with rotate keyframes and the supplied duration and easing.\n */\nexport const rotateAtom = ({\n  direction,\n  duration,\n  easing = motionTokens.curveLinear,\n  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  };\n};\n"],"names":["rotateAtom","createRotateValue","axis","angle","toLowerCase","direction","duration","easing","motionTokens","curveLinear","exitAngle","fromAngle","toAngle","keyframes","rotate"],"mappings":";;;;+BA4BaA;;;eAAAA;;;6BA5B+C;AAc5D,MAAMC,oBAAoB,CAACC,MAAcC;IACvC,OAAO,GAAGD,KAAKE,WAAW,GAAG,CAAC,EAAED,MAAM,GAAG,CAAC;AAC5C;AAYO,MAAMH,aAAa,CAAC,EACzBK,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,WAAW,EACjCP,OAAO,GAAG,EACVC,QAAQ,CAAC,EAAE,EACXO,YAAY,CAACP,KAAK,EACD;IACjB,IAAIQ,YAAYR;IAChB,IAAIS,UAAU;IAEd,IAAIP,cAAc,QAAQ;QACxBM,YAAY;QACZC,UAAUF;IACZ;IACA,MAAMG,YAAY;QAAC;YAAEC,QAAQb,kBAAkBC,MAAMS;QAAW;QAAG;YAAEG,QAAQb,kBAAkBC,MAAMU;QAAS;KAAE;IAEhH,OAAO;QACLC;QACAP;QACAC;IACF;AACF"}

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

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Rotate", {
+    enumerable: true,
+    get: function() {
+        return Rotate;
+    }
+});
+const _reactmotion = require("@fluentui/react-motion");
+const _fadeatom = require("../../atoms/fade-atom");
+const _rotateatom = require("../../atoms/rotate-atom");
+/**
+ * Define a presence motion for rotate in/out
+ *
+ * @param duration - Time (ms) for the enter transition (rotate-in). Defaults to the `durationGentle` value.
+ * @param easing - Easing curve for the enter transition (rotate-in). Defaults to the `curveDecelerateMax` value.
+ * @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 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 animateOpacity - Whether to animate the opacity during the rotation. Defaults to `true`.
+ */ const rotatePresenceFn = ({ axis = 'y', angle = -90, exitAngle = -angle, duration = _reactmotion.motionTokens.durationGentle, exitDuration = duration, easing = _reactmotion.motionTokens.curveDecelerateMax, exitEasing = _reactmotion.motionTokens.curveAccelerateMax, animateOpacity = true })=>{
+    const enterAtoms = [
+        (0, _rotateatom.rotateAtom)({
+            direction: 'enter',
+            duration,
+            easing,
+            axis,
+            angle,
+            exitAngle
+        })
+    ];
+    const exitAtoms = [
+        (0, _rotateatom.rotateAtom)({
+            direction: 'exit',
+            duration: exitDuration,
+            easing: exitEasing,
+            axis,
+            angle,
+            exitAngle
+        })
+    ];
+    if (animateOpacity) {
+        enterAtoms.push((0, _fadeatom.fadeAtom)({
+            direction: 'enter',
+            duration,
+            easing
+        }));
+        exitAtoms.push((0, _fadeatom.fadeAtom)({
+            direction: 'exit',
+            duration: exitDuration,
+            easing: exitEasing
+        }));
+    }
+    return {
+        enter: enterAtoms,
+        exit: exitAtoms
+    };
+};
+const Rotate = (0, _reactmotion.createPresenceComponent)(rotatePresenceFn);

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

@@ -0,0 +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 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 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  axis = 'y',\n  angle = -90,\n  exitAngle = -angle,\n  duration = motionTokens.durationGentle,\n  exitDuration = duration,\n  easing = motionTokens.curveDecelerateMax,\n  exitEasing = motionTokens.curveAccelerateMax,\n  animateOpacity = true,\n}: RotateParams) => {\n  const enterAtoms: AtomMotion[] = [\n    rotateAtom({\n      direction: 'enter',\n      duration,\n      easing,\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      axis,\n      angle,\n      exitAngle,\n    }),\n  ];\n\n  if (animateOpacity) {\n    enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing }));\n    exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing }));\n  }\n\n  return {\n    enter: enterAtoms,\n    exit: exitAtoms,\n  };\n};\n\n// 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","axis","angle","exitAngle","duration","motionTokens","durationGentle","exitDuration","easing","curveDecelerateMax","exitEasing","curveAccelerateMax","animateOpacity","enterAtoms","rotateAtom","direction","exitAtoms","push","fadeAtom","enter","exit","createPresenceComponent"],"mappings":";;;;+BA6DaA;;;eAAAA;;;6BA7DuE;0BAC3D;4BACE;AAG3B;;;;;;;;;;;CAWC,GACD,MAAMC,mBAAmD,CAAC,EACxDC,OAAO,GAAG,EACVC,QAAQ,CAAC,EAAE,EACXC,YAAY,CAACD,KAAK,EAClBE,WAAWC,yBAAY,CAACC,cAAc,EACtCC,eAAeH,QAAQ,EACvBI,SAASH,yBAAY,CAACI,kBAAkB,EACxCC,aAAaL,yBAAY,CAACM,kBAAkB,EAC5CC,iBAAiB,IAAI,EACR;IACb,MAAMC,aAA2B;QAC/BC,IAAAA,sBAAU,EAAC;YACTC,WAAW;YACXX;YACAI;YACAP;YACAC;YACAC;QACF;KACD;IAED,MAAMa,YAA0B;QAC9BF,IAAAA,sBAAU,EAAC;YACTC,WAAW;YACXX,UAAUG;YACVC,QAAQE;YACRT;YACAC;YACAC;QACF;KACD;IAED,IAAIS,gBAAgB;QAClBC,WAAWI,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAASX;YAAUI;QAAO;QAChEQ,UAAUC,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAQX,UAAUG;YAAcC,QAAQE;QAAW;IAC1F;IAEA,OAAO;QACLS,OAAON;QACPO,MAAMJ;IACR;AACF;AAGO,MAAMjB,SAASsB,IAAAA,oCAAuB,EAACrB"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Rotate/index.ts"],"sourcesContent":["export { Rotate } from './Rotate';\nexport type { RotateParams } from './rotate-types';\n"],"names":["Rotate"],"mappings":";;;;+BAASA;;;eAAAA,cAAM;;;wBAAQ"}

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

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

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

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

package/lib-commonjs/index.js

@@ -33,6 +33,9 @@ _export(exports, {
     FadeSnappy: function() {
         return _Fade.FadeSnappy;
     },
+    Rotate: function() {
+        return _Rotate.Rotate;
+    },
     Scale: function() {
         return _Scale.Scale;
     },
@@ -57,3 +60,4 @@ const _Fade = require("./components/Fade");
 const _Scale = require("./components/Scale");
 const _Slide = require("./components/Slide");
 const _Blur = require("./components/Blur");
+const _Rotate = require("./components/Rotate");

package/lib-commonjs/index.js.map

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

package/package.json

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