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

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @fluentui/react-motion-components-preview
 
-This log was last generated on Fri, 31 Oct 2025 16:17:37 GMT and should not be manually modified.
+This log was last generated on Thu, 06 Nov 2025 14:56:59 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.13.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.13.0)
+
+Thu, 06 Nov 2025 14:56:59 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.12.0..@fluentui/react-motion-components-preview_v0.13.0)
+
+### Minor changes
+
+- feat(motion): export standard motion atoms ([PR #35421](https://github.com/microsoft/fluentui/pull/35421) by robertpenner@microsoft.com)
+
 ## [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 
+Fri, 31 Oct 2025 16:22:05 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

package/dist/index.d.ts

@@ -1,4 +1,6 @@
+import { AtomMotion } from '@fluentui/react-motion';
 import { PresenceComponent } from '@fluentui/react-motion';
+import type { PresenceDirection } from '@fluentui/react-motion';
 
 /**
  * Common opacity animation parameter for motion components.
@@ -10,6 +12,22 @@ declare type AnimateOpacity = {
 
 declare type Axis3D = 'x' | 'y' | 'z';
 
+declare type Axis3D_2 = NonNullable<RotateParams['axis']>;
+
+/**
+ * Common parameters shared by all atom functions.
+ */
+declare type BaseAtomParams = {
+    /** The functional direction of the motion: 'enter' or 'exit'. */
+    direction: PresenceDirection;
+    /** The duration of the motion in milliseconds. */
+    duration: number;
+    /** The easing curve for the motion. */
+    easing?: EffectTiming['easing'];
+    /** Time (ms) to delay the animation. */
+    delay?: EffectTiming['delay'];
+};
+
 /**
  * Base presence parameters combining duration, easing, and delay for motion components.
  */
@@ -18,6 +36,23 @@ declare type BasePresenceParams = PresenceDuration & PresenceEasing & PresenceDe
 /** A React component that applies blur in/out transitions to its children. */
 export declare const Blur: PresenceComponent<BlurParams>;
 
+/**
+ * Generates a motion atom object for a blur-in or blur-out.
+ * @param direction - The functional direction of the motion: 'enter' or 'exit'.
+ * @param duration - The duration of the motion in milliseconds.
+ * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
+ * @param fromRadius - The blur radius value with units (e.g., '20px', '1rem'). Defaults to '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 declare const blurAtom: ({ direction, duration, easing, delay, fromRadius, toRadius, }: BlurAtomParams) => AtomMotion;
+
+declare interface BlurAtomParams extends BaseAtomParams {
+    fromRadius?: string;
+    toRadius?: string;
+}
+
 export declare type BlurParams = BasePresenceParams & AnimateOpacity & {
     /** The blur radius with units to animate from. Defaults to '10px'. */
     fromRadius?: string;
@@ -71,6 +106,27 @@ export declare const CollapseSnappy: PresenceComponent<CollapseParams>;
 /** A React component that applies fade in/out transitions to its children. */
 export declare const Fade: PresenceComponent<FadeParams>;
 
+/**
+ * Generates a motion atom object for a fade-in or fade-out.
+ * @param direction - The functional direction of the motion: 'enter' or 'exit'.
+ * @param duration - The duration of the motion in milliseconds.
+ * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
+ * @param 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 declare const fadeAtom: ({ direction, duration, easing, delay, fromOpacity, toOpacity, }: FadeAtomParams) => AtomMotion;
+
+declare interface FadeAtomParams extends BaseAtomParams {
+    /** Defines how values are applied before and after execution. Defaults to 'both'. */
+    fill?: FillMode;
+    /** The starting opacity value. Defaults to 0. */
+    fromOpacity?: number;
+    /** The ending opacity value. Defaults to 1. */
+    toOpacity?: number;
+}
+
 export declare type FadeParams = BasePresenceParams & {
     /** The starting opacity value. Defaults to 0. */
     fromOpacity?: number;
@@ -114,6 +170,25 @@ declare type PresenceEasing = {
 
 export declare const Rotate: PresenceComponent<RotateParams>;
 
+/**
+ * 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 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 declare const rotateAtom: ({ direction, duration, easing, delay, axis, fromAngle, toAngle, }: RotateAtomParams) => AtomMotion;
+
+declare interface RotateAtomParams extends BaseAtomParams {
+    axis?: Axis3D_2;
+    fromAngle?: number;
+    toAngle?: number;
+}
+
 export declare type RotateParams = BasePresenceParams & AnimateOpacity & {
     /**
      * The axis of rotation: 'x', 'y', or 'z'.
@@ -135,6 +210,23 @@ export declare type RotateParams = BasePresenceParams & AnimateOpacity & {
 /** A React component that applies scale in/out transitions to its children. */
 export declare const Scale: PresenceComponent<ScaleParams>;
 
+/**
+ * Generates a motion atom object for a scale in or scale out.
+ * @param direction - The functional direction of the motion: 'enter' or 'exit'.
+ * @param duration - The duration of the motion in milliseconds.
+ * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
+ * @param fromScale - The starting scale value. Defaults to 0.9.
+ * @param toScale - The ending scale value. Defaults to 1.
+ * @param delay - Time (ms) to delay the animation. Defaults to 0.
+ * @returns A motion atom object with scale keyframes and the supplied duration and easing.
+ */
+export declare const scaleAtom: ({ direction, duration, easing, delay, fromScale, toScale, }: ScaleAtomParams) => AtomMotion;
+
+declare interface ScaleAtomParams extends BaseAtomParams {
+    fromScale?: number;
+    toScale?: number;
+}
+
 export declare type ScaleParams = BasePresenceParams & AnimateOpacity & {
     /** The scale value to animate from. Defaults to `0.9`. */
     fromScale?: number;
@@ -149,6 +241,27 @@ export declare const ScaleSnappy: PresenceComponent<ScaleParams>;
 /** A React component that applies slide in/out transitions to its children. */
 export declare const Slide: PresenceComponent<SlideParams>;
 
+/**
+ * Generates a motion atom object for a slide-in or slide-out.
+ * @param direction - The functional direction of the motion: 'enter' or 'exit'.
+ * @param duration - The duration of the motion in milliseconds.
+ * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
+ * @param fromX - The starting X translate value with units (e.g., '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 declare const slideAtom: ({ direction, duration, easing, delay, fromX, fromY, toX, toY, }: SlideAtomParams) => AtomMotion;
+
+declare interface SlideAtomParams extends BaseAtomParams {
+    fromX?: string;
+    fromY?: string;
+    toX?: string;
+    toY?: string;
+}
+
 export declare type SlideParams = BasePresenceParams & AnimateOpacity & {
     /** The X translate value with units to animate from. Defaults to `'0px'`. */
     fromX?: string;

package/lib/index.js

@@ -4,3 +4,9 @@ export { Scale, ScaleSnappy, ScaleRelaxed } from './components/Scale';
 export { Slide, SlideSnappy, SlideRelaxed } from './components/Slide';
 export { Blur } from './components/Blur';
 export { Rotate } from './components/Rotate';
+// Motion Atoms
+export { blurAtom } from './atoms/blur-atom';
+export { fadeAtom } from './atoms/fade-atom';
+export { rotateAtom } from './atoms/rotate-atom';
+export { scaleAtom } from './atoms/scale-atom';
+export { slideAtom } from './atoms/slide-atom'; // TODO: consider whether to export some or all collapse atoms

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Collapse,\n  CollapseSnappy,\n  CollapseRelaxed,\n  CollapseDelayed,\n  type CollapseParams,\n  type CollapseDurations,\n} from './components/Collapse';\nexport { Fade, FadeSnappy, FadeRelaxed, type FadeParams } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleRelaxed, type ScaleParams } from './components/Scale';\nexport { Slide, SlideSnappy, SlideRelaxed, type SlideParams } 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,SACEA,QAAQ,EACRC,cAAc,EACdC,eAAe,EACfC,eAAe,QAGV,wBAAwB;AAC/B,SAASC,IAAI,EAAEC,UAAU,EAAEC,WAAW,QAAyB,oBAAoB;AACnF,SAASC,KAAK,EAAEC,WAAW,EAAEC,YAAY,QAA0B,qBAAqB;AACxF,SAASC,KAAK,EAAEC,WAAW,EAAEC,YAAY,QAA0B,qBAAqB;AACxF,SAASC,IAAI,QAAyB,oBAAoB;AAC1D,SAASC,MAAM,QAA2B,sBAAsB"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Collapse,\n  CollapseSnappy,\n  CollapseRelaxed,\n  CollapseDelayed,\n  type CollapseParams,\n  type CollapseDurations,\n} from './components/Collapse';\nexport { Fade, FadeSnappy, FadeRelaxed, type FadeParams } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleRelaxed, type ScaleParams } from './components/Scale';\nexport { Slide, SlideSnappy, SlideRelaxed, type SlideParams } from './components/Slide';\nexport { Blur, type BlurParams } from './components/Blur';\nexport { Rotate, type RotateParams } from './components/Rotate';\n\n// Motion Atoms\nexport { blurAtom } from './atoms/blur-atom';\nexport { fadeAtom } from './atoms/fade-atom';\nexport { rotateAtom } from './atoms/rotate-atom';\nexport { scaleAtom } from './atoms/scale-atom';\nexport { slideAtom } from './atoms/slide-atom';\n// TODO: consider whether to export some or all collapse atoms\n"],"names":["Collapse","CollapseSnappy","CollapseRelaxed","CollapseDelayed","Fade","FadeSnappy","FadeRelaxed","Scale","ScaleSnappy","ScaleRelaxed","Slide","SlideSnappy","SlideRelaxed","Blur","Rotate","blurAtom","fadeAtom","rotateAtom","scaleAtom","slideAtom"],"mappings":"AAAA,SACEA,QAAQ,EACRC,cAAc,EACdC,eAAe,EACfC,eAAe,QAGV,wBAAwB;AAC/B,SAASC,IAAI,EAAEC,UAAU,EAAEC,WAAW,QAAyB,oBAAoB;AACnF,SAASC,KAAK,EAAEC,WAAW,EAAEC,YAAY,QAA0B,qBAAqB;AACxF,SAASC,KAAK,EAAEC,WAAW,EAAEC,YAAY,QAA0B,qBAAqB;AACxF,SAASC,IAAI,QAAyB,oBAAoB;AAC1D,SAASC,MAAM,QAA2B,sBAAsB;AAEhE,eAAe;AACf,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,UAAU,QAAQ,sBAAsB;AACjD,SAASC,SAAS,QAAQ,qBAAqB;AAC/C,SAASC,SAAS,QAAQ,qBAAqB,CAC/C,8DAA8D"}

package/lib-commonjs/index.js

@@ -53,6 +53,21 @@ _export(exports, {
     },
     SlideSnappy: function() {
         return _Slide.SlideSnappy;
+    },
+    blurAtom: function() {
+        return _bluratom.blurAtom;
+    },
+    fadeAtom: function() {
+        return _fadeatom.fadeAtom;
+    },
+    rotateAtom: function() {
+        return _rotateatom.rotateAtom;
+    },
+    scaleAtom: function() {
+        return _scaleatom.scaleAtom;
+    },
+    slideAtom: function() {
+        return _slideatom.slideAtom;
     }
 });
 const _Collapse = require("./components/Collapse");
@@ -61,3 +76,9 @@ const _Scale = require("./components/Scale");
 const _Slide = require("./components/Slide");
 const _Blur = require("./components/Blur");
 const _Rotate = require("./components/Rotate");
+const _bluratom = require("./atoms/blur-atom");
+const _fadeatom = require("./atoms/fade-atom");
+const _rotateatom = require("./atoms/rotate-atom");
+const _scaleatom = require("./atoms/scale-atom");
+const _slideatom = require("./atoms/slide-atom");
+ // TODO: consider whether to export some or all collapse atoms

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Collapse,\n  CollapseSnappy,\n  CollapseRelaxed,\n  CollapseDelayed,\n  type CollapseParams,\n  type CollapseDurations,\n} from './components/Collapse';\nexport { Fade, FadeSnappy, FadeRelaxed, type FadeParams } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleRelaxed, type ScaleParams } from './components/Scale';\nexport { Slide, SlideSnappy, SlideRelaxed, type SlideParams } 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":";;;;;;;;;;;IAWSA,IAAI;eAAJA,UAAI;;IAVXC,QAAQ;eAARA,kBAAQ;;IAGRC,eAAe;eAAfA,yBAAe;;IADfC,eAAe;eAAfA,yBAAe;;IADfC,cAAc;eAAdA,wBAAc;;IAMPC,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;;;0BAHpB;sBACwD;uBACI;uBACA;sBAC7B;wBACI"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Collapse,\n  CollapseSnappy,\n  CollapseRelaxed,\n  CollapseDelayed,\n  type CollapseParams,\n  type CollapseDurations,\n} from './components/Collapse';\nexport { Fade, FadeSnappy, FadeRelaxed, type FadeParams } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleRelaxed, type ScaleParams } from './components/Scale';\nexport { Slide, SlideSnappy, SlideRelaxed, type SlideParams } from './components/Slide';\nexport { Blur, type BlurParams } from './components/Blur';\nexport { Rotate, type RotateParams } from './components/Rotate';\n\n// Motion Atoms\nexport { blurAtom } from './atoms/blur-atom';\nexport { fadeAtom } from './atoms/fade-atom';\nexport { rotateAtom } from './atoms/rotate-atom';\nexport { scaleAtom } from './atoms/scale-atom';\nexport { slideAtom } from './atoms/slide-atom';\n// TODO: consider whether to export some or all collapse atoms\n"],"names":["Blur","Collapse","CollapseDelayed","CollapseRelaxed","CollapseSnappy","Fade","FadeRelaxed","FadeSnappy","Rotate","Scale","ScaleRelaxed","ScaleSnappy","Slide","SlideRelaxed","SlideSnappy","blurAtom","fadeAtom","rotateAtom","scaleAtom","slideAtom"],"mappings":";;;;;;;;;;;IAWSA,IAAI;eAAJA,UAAI;;IAVXC,QAAQ;eAARA,kBAAQ;;IAGRC,eAAe;eAAfA,yBAAe;;IADfC,eAAe;eAAfA,yBAAe;;IADfC,cAAc;eAAdA,wBAAc;;IAMPC,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;;IAKlBC,QAAQ;eAARA,kBAAQ;;IACRC,QAAQ;eAARA,kBAAQ;;IACRC,UAAU;eAAVA,sBAAU;;IACVC,SAAS;eAATA,oBAAS;;IACTC,SAAS;eAATA,oBAAS;;;0BAZX;sBACwD;uBACI;uBACA;sBAC7B;wBACI;0BAGjB;0BACA;4BACE;2BACD;2BACA;CAC1B,8DAA8D"}

package/package.json

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