@fluentui/react-motion-components-preview 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -1,12 +1,22 @@
 # Change Log - @fluentui/react-motion-components-preview
 
-This log was last generated on Mon, 15 Jul 2024 17:20:20 GMT and should not be manually modified.
+This log was last generated on Tue, 23 Jul 2024 20:09:19 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.1.1)
+
+Tue, 23 Jul 2024 20:09:19 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.1.0..@fluentui/react-motion-components-preview_v0.1.1)
+
+### Patches
+
+- feat: add Fade motion component ([PR #32020](https://github.com/microsoft/fluentui/pull/32020) by olkatruk@microsoft.com)
+- feat(motion): add Scale motion component ([PR #32021](https://github.com/microsoft/fluentui/pull/32021) by olkatruk@microsoft.com)
+
 ## [0.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.1.0)
 
-Mon, 15 Jul 2024 17:20:20 GMT
+Mon, 15 Jul 2024 17:25:37 GMT
 
 ### Minor changes
 

package/dist/index.d.ts

@@ -13,4 +13,24 @@ export declare const CollapseSnappy: PresenceComponent<    {
 animateOpacity?: boolean | undefined;
 }>;
 
+/** A React component that applies fade in/out transitions to its children. */
+export declare const Fade: PresenceComponent<    {}>;
+
+export declare const FadeExaggerated: PresenceComponent<    {}>;
+
+export declare const FadeSnappy: PresenceComponent<    {}>;
+
+/** A React component that applies scale in/out transitions to its children. */
+export declare const Scale: PresenceComponent<    {
+animateOpacity?: boolean | undefined;
+}>;
+
+export declare const ScaleExaggerated: PresenceComponent<    {
+animateOpacity?: boolean | undefined;
+}>;
+
+export declare const ScaleSnappy: PresenceComponent<    {
+animateOpacity?: boolean | undefined;
+}>;
+
 export { }

package/lib/components/Fade/Fade.js

@@ -0,0 +1,40 @@
+import { motionTokens, createPresenceComponent, createPresenceComponentVariant } from '@fluentui/react-motion';
+const duration = motionTokens.durationNormal;
+const easing = motionTokens.curveEasyEase;
+/** Define a presence motion for fade in/out  */ const fadeMotion = {
+    enter: {
+        duration,
+        easing,
+        keyframes: [
+            {
+                opacity: 0
+            },
+            {
+                opacity: 1
+            }
+        ]
+    },
+    exit: {
+        duration,
+        easing,
+        keyframes: [
+            {
+                opacity: 1
+            },
+            {
+                opacity: 0
+            }
+        ]
+    }
+};
+/** A React component that applies fade in/out transitions to its children. */ export const Fade = createPresenceComponent(fadeMotion);
+export const FadeSnappy = createPresenceComponentVariant(Fade, {
+    all: {
+        duration: motionTokens.durationFast
+    }
+});
+export const FadeExaggerated = createPresenceComponentVariant(Fade, {
+    all: {
+        duration: motionTokens.durationGentle
+    }
+});

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Fade.ts"],"sourcesContent":["import {\n  motionTokens,\n  PresenceMotion,\n  createPresenceComponent,\n  createPresenceComponentVariant,\n} from '@fluentui/react-motion';\n\nconst duration = motionTokens.durationNormal;\nconst easing = motionTokens.curveEasyEase;\n\n/** Define a presence motion for fade in/out  */\nconst fadeMotion: PresenceMotion = {\n  enter: { duration, easing, keyframes: [{ opacity: 0 }, { opacity: 1 }] },\n  exit: { duration, easing, keyframes: [{ opacity: 1 }, { opacity: 0 }] },\n};\n\n/** A React component that applies fade in/out transitions to its children. */\nexport const Fade = createPresenceComponent(fadeMotion);\n\nexport const FadeSnappy = createPresenceComponentVariant(Fade, { all: { duration: motionTokens.durationFast } });\n\nexport const FadeExaggerated = createPresenceComponentVariant(Fade, { all: { duration: motionTokens.durationGentle } });\n"],"names":["motionTokens","createPresenceComponent","createPresenceComponentVariant","duration","durationNormal","easing","curveEasyEase","fadeMotion","enter","keyframes","opacity","exit","Fade","FadeSnappy","all","durationFast","FadeExaggerated","durationGentle"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,YAAY,EAEZC,uBAAuB,EACvBC,8BAA8B,QACzB,yBAAyB;AAEhC,MAAMC,WAAWH,aAAaI,cAAc;AAC5C,MAAMC,SAASL,aAAaM,aAAa;AAEzC,8CAA8C,GAC9C,MAAMC,aAA6B;IACjCC,OAAO;QAAEL;QAAUE;QAAQI,WAAW;YAAC;gBAAEC,SAAS;YAAE;YAAG;gBAAEA,SAAS;YAAE;SAAE;IAAC;IACvEC,MAAM;QAAER;QAAUE;QAAQI,WAAW;YAAC;gBAAEC,SAAS;YAAE;YAAG;gBAAEA,SAAS;YAAE;SAAE;IAAC;AACxE;AAEA,4EAA4E,GAC5E,OAAO,MAAME,OAAOX,wBAAwBM,YAAY;AAExD,OAAO,MAAMM,aAAaX,+BAA+BU,MAAM;IAAEE,KAAK;QAAEX,UAAUH,aAAae,YAAY;IAAC;AAAE,GAAG;AAEjH,OAAO,MAAMC,kBAAkBd,+BAA+BU,MAAM;IAAEE,KAAK;QAAEX,UAAUH,aAAaiB,cAAc;IAAC;AAAE,GAAG"}

package/lib/components/Fade/index.js

@@ -0,0 +1 @@
+export * from './Fade';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Fade';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,SAAS"}

package/lib/components/Scale/Scale.js

@@ -0,0 +1,62 @@
+import { motionTokens, createPresenceComponent, createPresenceComponentVariant } from '@fluentui/react-motion';
+/** Define a presence motion for scale in/out */ const scaleMotion = ({ animateOpacity = true })=>{
+    const fromOpacity = animateOpacity ? 0 : 1;
+    const toOpacity = 1;
+    const fromScale = 0.9; // Could be a custom param in the future
+    const toScale = 1;
+    const enterKeyframes = [
+        {
+            opacity: fromOpacity,
+            transform: `scale3d(${fromScale}, ${fromScale}, 1)`,
+            visibility: 'visible'
+        },
+        {
+            opacity: toOpacity,
+            transform: `scale3d(${toScale}, ${toScale}, 1)`
+        }
+    ];
+    const exitKeyframes = [
+        {
+            opacity: toOpacity,
+            transform: `scale3d(${toScale}, ${toScale}, 1)`
+        },
+        {
+            opacity: fromOpacity,
+            transform: `scale3d(${fromScale}, ${fromScale}, 1)`,
+            visibility: 'hidden'
+        }
+    ];
+    return {
+        enter: {
+            duration: motionTokens.durationGentle,
+            easing: motionTokens.curveDecelerateMax,
+            keyframes: enterKeyframes
+        },
+        exit: {
+            duration: motionTokens.durationNormal,
+            easing: motionTokens.curveAccelerateMax,
+            keyframes: exitKeyframes
+        }
+    };
+};
+/** A React component that applies scale in/out transitions to its children. */ export const Scale = createPresenceComponent(scaleMotion);
+export const ScaleSnappy = createPresenceComponentVariant(Scale, {
+    enter: {
+        duration: motionTokens.durationNormal,
+        easing: motionTokens.curveDecelerateMax
+    },
+    exit: {
+        duration: motionTokens.durationFast,
+        easing: motionTokens.curveAccelerateMax
+    }
+});
+export const ScaleExaggerated = createPresenceComponentVariant(Scale, {
+    enter: {
+        duration: motionTokens.durationSlow,
+        easing: motionTokens.curveDecelerateMax
+    },
+    exit: {
+        duration: motionTokens.durationGentle,
+        easing: motionTokens.curveAccelerateMax
+    }
+});

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Scale.ts"],"sourcesContent":["import {\n  motionTokens,\n  PresenceMotionFn,\n  createPresenceComponent,\n  createPresenceComponentVariant,\n} from '@fluentui/react-motion';\n\n/** Define a presence motion for scale in/out */\nconst scaleMotion: PresenceMotionFn<{ animateOpacity?: boolean }> = ({ animateOpacity = true }) => {\n  const fromOpacity = animateOpacity ? 0 : 1;\n  const toOpacity = 1;\n  const fromScale = 0.9; // Could be a custom param in the future\n  const toScale = 1;\n\n  const enterKeyframes = [\n    { opacity: fromOpacity, transform: `scale3d(${fromScale}, ${fromScale}, 1)`, visibility: 'visible' },\n    { opacity: toOpacity, transform: `scale3d(${toScale}, ${toScale}, 1)` },\n  ];\n\n  const exitKeyframes = [\n    { opacity: toOpacity, transform: `scale3d(${toScale}, ${toScale}, 1)` },\n    { opacity: fromOpacity, transform: `scale3d(${fromScale}, ${fromScale}, 1)`, visibility: 'hidden' },\n  ];\n\n  return {\n    enter: {\n      duration: motionTokens.durationGentle,\n      easing: motionTokens.curveDecelerateMax,\n      keyframes: enterKeyframes,\n    },\n    exit: { duration: motionTokens.durationNormal, easing: motionTokens.curveAccelerateMax, keyframes: exitKeyframes },\n  };\n};\n\n/** A React component that applies scale in/out transitions to its children. */\nexport const Scale = createPresenceComponent(scaleMotion);\n\nexport const ScaleSnappy = createPresenceComponentVariant(Scale, {\n  enter: { duration: motionTokens.durationNormal, easing: motionTokens.curveDecelerateMax },\n  exit: { duration: motionTokens.durationFast, easing: motionTokens.curveAccelerateMax },\n});\n\nexport const ScaleExaggerated = createPresenceComponentVariant(Scale, {\n  enter: { duration: motionTokens.durationSlow, easing: motionTokens.curveDecelerateMax },\n  exit: { duration: motionTokens.durationGentle, easing: motionTokens.curveAccelerateMax },\n});\n"],"names":["motionTokens","createPresenceComponent","createPresenceComponentVariant","scaleMotion","animateOpacity","fromOpacity","toOpacity","fromScale","toScale","enterKeyframes","opacity","transform","visibility","exitKeyframes","enter","duration","durationGentle","easing","curveDecelerateMax","keyframes","exit","durationNormal","curveAccelerateMax","Scale","ScaleSnappy","durationFast","ScaleExaggerated","durationSlow"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,YAAY,EAEZC,uBAAuB,EACvBC,8BAA8B,QACzB,yBAAyB;AAEhC,8CAA8C,GAC9C,MAAMC,cAA8D,CAAC,EAAEC,iBAAiB,IAAI,EAAE;IAC5F,MAAMC,cAAcD,iBAAiB,IAAI;IACzC,MAAME,YAAY;IAClB,MAAMC,YAAY,KAAK,wCAAwC;IAC/D,MAAMC,UAAU;IAEhB,MAAMC,iBAAiB;QACrB;YAAEC,SAASL;YAAaM,WAAW,CAAC,QAAQ,EAAEJ,UAAU,EAAE,EAAEA,UAAU,IAAI,CAAC;YAAEK,YAAY;QAAU;QACnG;YAAEF,SAASJ;YAAWK,WAAW,CAAC,QAAQ,EAAEH,QAAQ,EAAE,EAAEA,QAAQ,IAAI,CAAC;QAAC;KACvE;IAED,MAAMK,gBAAgB;QACpB;YAAEH,SAASJ;YAAWK,WAAW,CAAC,QAAQ,EAAEH,QAAQ,EAAE,EAAEA,QAAQ,IAAI,CAAC;QAAC;QACtE;YAAEE,SAASL;YAAaM,WAAW,CAAC,QAAQ,EAAEJ,UAAU,EAAE,EAAEA,UAAU,IAAI,CAAC;YAAEK,YAAY;QAAS;KACnG;IAED,OAAO;QACLE,OAAO;YACLC,UAAUf,aAAagB,cAAc;YACrCC,QAAQjB,aAAakB,kBAAkB;YACvCC,WAAWV;QACb;QACAW,MAAM;YAAEL,UAAUf,aAAaqB,cAAc;YAAEJ,QAAQjB,aAAasB,kBAAkB;YAAEH,WAAWN;QAAc;IACnH;AACF;AAEA,6EAA6E,GAC7E,OAAO,MAAMU,QAAQtB,wBAAwBE,aAAa;AAE1D,OAAO,MAAMqB,cAActB,+BAA+BqB,OAAO;IAC/DT,OAAO;QAAEC,UAAUf,aAAaqB,cAAc;QAAEJ,QAAQjB,aAAakB,kBAAkB;IAAC;IACxFE,MAAM;QAAEL,UAAUf,aAAayB,YAAY;QAAER,QAAQjB,aAAasB,kBAAkB;IAAC;AACvF,GAAG;AAEH,OAAO,MAAMI,mBAAmBxB,+BAA+BqB,OAAO;IACpET,OAAO;QAAEC,UAAUf,aAAa2B,YAAY;QAAEV,QAAQjB,aAAakB,kBAAkB;IAAC;IACtFE,MAAM;QAAEL,UAAUf,aAAagB,cAAc;QAAEC,QAAQjB,aAAasB,kBAAkB;IAAC;AACzF,GAAG"}

package/lib/components/Scale/index.js

@@ -0,0 +1 @@
+export * from './Scale';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Scale';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,UAAU"}

package/lib/index.js

@@ -1 +1,3 @@
 export { Collapse, CollapseSnappy, CollapseExaggerated } from './components/Collapse';
+export { Fade, FadeSnappy, FadeExaggerated } from './components/Fade';
+export { Scale, ScaleSnappy, ScaleExaggerated } from './components/Scale';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export { Collapse, CollapseSnappy, CollapseExaggerated } from './components/Collapse';\n"],"names":["Collapse","CollapseSnappy","CollapseExaggerated"],"rangeMappings":"","mappings":"AAAA,SAASA,QAAQ,EAAEC,cAAc,EAAEC,mBAAmB,QAAQ,wBAAwB"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export { Collapse, CollapseSnappy, CollapseExaggerated } from './components/Collapse';\nexport { Fade, FadeSnappy, FadeExaggerated } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleExaggerated } from './components/Scale';\n"],"names":["Collapse","CollapseSnappy","CollapseExaggerated","Fade","FadeSnappy","FadeExaggerated","Scale","ScaleSnappy","ScaleExaggerated"],"rangeMappings":";;","mappings":"AAAA,SAASA,QAAQ,EAAEC,cAAc,EAAEC,mBAAmB,QAAQ,wBAAwB;AACtF,SAASC,IAAI,EAAEC,UAAU,EAAEC,eAAe,QAAQ,oBAAoB;AACtE,SAASC,KAAK,EAAEC,WAAW,EAAEC,gBAAgB,QAAQ,qBAAqB"}

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

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Fade: function() {
+        return Fade;
+    },
+    FadeExaggerated: function() {
+        return FadeExaggerated;
+    },
+    FadeSnappy: function() {
+        return FadeSnappy;
+    }
+});
+const _reactmotion = require("@fluentui/react-motion");
+const duration = _reactmotion.motionTokens.durationNormal;
+const easing = _reactmotion.motionTokens.curveEasyEase;
+/** Define a presence motion for fade in/out  */ const fadeMotion = {
+    enter: {
+        duration,
+        easing,
+        keyframes: [
+            {
+                opacity: 0
+            },
+            {
+                opacity: 1
+            }
+        ]
+    },
+    exit: {
+        duration,
+        easing,
+        keyframes: [
+            {
+                opacity: 1
+            },
+            {
+                opacity: 0
+            }
+        ]
+    }
+};
+const Fade = (0, _reactmotion.createPresenceComponent)(fadeMotion);
+const FadeSnappy = (0, _reactmotion.createPresenceComponentVariant)(Fade, {
+    all: {
+        duration: _reactmotion.motionTokens.durationFast
+    }
+});
+const FadeExaggerated = (0, _reactmotion.createPresenceComponentVariant)(Fade, {
+    all: {
+        duration: _reactmotion.motionTokens.durationGentle
+    }
+});

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Fade.ts"],"sourcesContent":["import {\n  motionTokens,\n  PresenceMotion,\n  createPresenceComponent,\n  createPresenceComponentVariant,\n} from '@fluentui/react-motion';\n\nconst duration = motionTokens.durationNormal;\nconst easing = motionTokens.curveEasyEase;\n\n/** Define a presence motion for fade in/out  */\nconst fadeMotion: PresenceMotion = {\n  enter: { duration, easing, keyframes: [{ opacity: 0 }, { opacity: 1 }] },\n  exit: { duration, easing, keyframes: [{ opacity: 1 }, { opacity: 0 }] },\n};\n\n/** A React component that applies fade in/out transitions to its children. */\nexport const Fade = createPresenceComponent(fadeMotion);\n\nexport const FadeSnappy = createPresenceComponentVariant(Fade, { all: { duration: motionTokens.durationFast } });\n\nexport const FadeExaggerated = createPresenceComponentVariant(Fade, { all: { duration: motionTokens.durationGentle } });\n"],"names":["Fade","FadeExaggerated","FadeSnappy","duration","motionTokens","durationNormal","easing","curveEasyEase","fadeMotion","enter","keyframes","opacity","exit","createPresenceComponent","createPresenceComponentVariant","all","durationFast","durationGentle"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAiBaA,IAAAA;eAAAA;;IAIAC,eAAAA;eAAAA;;IAFAC,UAAAA;eAAAA;;;6BAdN;AAEP,MAAMC,WAAWC,yBAAAA,CAAaC,cAAc;AAC5C,MAAMC,SAASF,yBAAAA,CAAaG,aAAa;AAEzC,8CAA8C,GAC9C,MAAMC,aAA6B;IACjCC,OAAO;QAAEN;QAAUG;QAAQI,WAAW;YAAC;gBAAEC,SAAS;YAAE;YAAG;gBAAEA,SAAS;YAAE;SAAE;IAAC;IACvEC,MAAM;QAAET;QAAUG;QAAQI,WAAW;YAAC;gBAAEC,SAAS;YAAE;YAAG;gBAAEA,SAAS;YAAE;SAAE;IAAC;AACxE;AAGO,MAAMX,OAAOa,IAAAA,oCAAAA,EAAwBL;AAErC,MAAMN,aAAaY,IAAAA,2CAAAA,EAA+Bd,MAAM;IAAEe,KAAK;QAAEZ,UAAUC,yBAAAA,CAAaY,YAAY;IAAC;AAAE;AAEvG,MAAMf,kBAAkBa,IAAAA,2CAAAA,EAA+Bd,MAAM;IAAEe,KAAK;QAAEZ,UAAUC,yBAAAA,CAAaa,cAAc;IAAC;AAAE"}

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./Fade"), exports);

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Fade';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}

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

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Scale: function() {
+        return Scale;
+    },
+    ScaleExaggerated: function() {
+        return ScaleExaggerated;
+    },
+    ScaleSnappy: function() {
+        return ScaleSnappy;
+    }
+});
+const _reactmotion = require("@fluentui/react-motion");
+/** Define a presence motion for scale in/out */ const scaleMotion = ({ animateOpacity = true })=>{
+    const fromOpacity = animateOpacity ? 0 : 1;
+    const toOpacity = 1;
+    const fromScale = 0.9; // Could be a custom param in the future
+    const toScale = 1;
+    const enterKeyframes = [
+        {
+            opacity: fromOpacity,
+            transform: `scale3d(${fromScale}, ${fromScale}, 1)`,
+            visibility: 'visible'
+        },
+        {
+            opacity: toOpacity,
+            transform: `scale3d(${toScale}, ${toScale}, 1)`
+        }
+    ];
+    const exitKeyframes = [
+        {
+            opacity: toOpacity,
+            transform: `scale3d(${toScale}, ${toScale}, 1)`
+        },
+        {
+            opacity: fromOpacity,
+            transform: `scale3d(${fromScale}, ${fromScale}, 1)`,
+            visibility: 'hidden'
+        }
+    ];
+    return {
+        enter: {
+            duration: _reactmotion.motionTokens.durationGentle,
+            easing: _reactmotion.motionTokens.curveDecelerateMax,
+            keyframes: enterKeyframes
+        },
+        exit: {
+            duration: _reactmotion.motionTokens.durationNormal,
+            easing: _reactmotion.motionTokens.curveAccelerateMax,
+            keyframes: exitKeyframes
+        }
+    };
+};
+const Scale = (0, _reactmotion.createPresenceComponent)(scaleMotion);
+const ScaleSnappy = (0, _reactmotion.createPresenceComponentVariant)(Scale, {
+    enter: {
+        duration: _reactmotion.motionTokens.durationNormal,
+        easing: _reactmotion.motionTokens.curveDecelerateMax
+    },
+    exit: {
+        duration: _reactmotion.motionTokens.durationFast,
+        easing: _reactmotion.motionTokens.curveAccelerateMax
+    }
+});
+const ScaleExaggerated = (0, _reactmotion.createPresenceComponentVariant)(Scale, {
+    enter: {
+        duration: _reactmotion.motionTokens.durationSlow,
+        easing: _reactmotion.motionTokens.curveDecelerateMax
+    },
+    exit: {
+        duration: _reactmotion.motionTokens.durationGentle,
+        easing: _reactmotion.motionTokens.curveAccelerateMax
+    }
+});

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Scale.ts"],"sourcesContent":["import {\n  motionTokens,\n  PresenceMotionFn,\n  createPresenceComponent,\n  createPresenceComponentVariant,\n} from '@fluentui/react-motion';\n\n/** Define a presence motion for scale in/out */\nconst scaleMotion: PresenceMotionFn<{ animateOpacity?: boolean }> = ({ animateOpacity = true }) => {\n  const fromOpacity = animateOpacity ? 0 : 1;\n  const toOpacity = 1;\n  const fromScale = 0.9; // Could be a custom param in the future\n  const toScale = 1;\n\n  const enterKeyframes = [\n    { opacity: fromOpacity, transform: `scale3d(${fromScale}, ${fromScale}, 1)`, visibility: 'visible' },\n    { opacity: toOpacity, transform: `scale3d(${toScale}, ${toScale}, 1)` },\n  ];\n\n  const exitKeyframes = [\n    { opacity: toOpacity, transform: `scale3d(${toScale}, ${toScale}, 1)` },\n    { opacity: fromOpacity, transform: `scale3d(${fromScale}, ${fromScale}, 1)`, visibility: 'hidden' },\n  ];\n\n  return {\n    enter: {\n      duration: motionTokens.durationGentle,\n      easing: motionTokens.curveDecelerateMax,\n      keyframes: enterKeyframes,\n    },\n    exit: { duration: motionTokens.durationNormal, easing: motionTokens.curveAccelerateMax, keyframes: exitKeyframes },\n  };\n};\n\n/** A React component that applies scale in/out transitions to its children. */\nexport const Scale = createPresenceComponent(scaleMotion);\n\nexport const ScaleSnappy = createPresenceComponentVariant(Scale, {\n  enter: { duration: motionTokens.durationNormal, easing: motionTokens.curveDecelerateMax },\n  exit: { duration: motionTokens.durationFast, easing: motionTokens.curveAccelerateMax },\n});\n\nexport const ScaleExaggerated = createPresenceComponentVariant(Scale, {\n  enter: { duration: motionTokens.durationSlow, easing: motionTokens.curveDecelerateMax },\n  exit: { duration: motionTokens.durationGentle, easing: motionTokens.curveAccelerateMax },\n});\n"],"names":["Scale","ScaleExaggerated","ScaleSnappy","scaleMotion","animateOpacity","fromOpacity","toOpacity","fromScale","toScale","enterKeyframes","opacity","transform","visibility","exitKeyframes","enter","duration","motionTokens","durationGentle","easing","curveDecelerateMax","keyframes","exit","durationNormal","curveAccelerateMax","createPresenceComponent","createPresenceComponentVariant","durationFast","durationSlow"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAmCaA,KAAAA;eAAAA;;IAOAC,gBAAAA;eAAAA;;IALAC,WAAAA;eAAAA;;;6BAhCN;AAEP,8CAA8C,GAC9C,MAAMC,cAA8D,CAAC,EAAEC,iBAAiB,IAAI,EAAE;IAC5F,MAAMC,cAAcD,iBAAiB,IAAI;IACzC,MAAME,YAAY;IAClB,MAAMC,YAAY,KAAK,wCAAwC;IAC/D,MAAMC,UAAU;IAEhB,MAAMC,iBAAiB;QACrB;YAAEC,SAASL;YAAaM,WAAW,CAAC,QAAQ,EAAEJ,UAAU,EAAE,EAAEA,UAAU,IAAI,CAAC;YAAEK,YAAY;QAAU;QACnG;YAAEF,SAASJ;YAAWK,WAAW,CAAC,QAAQ,EAAEH,QAAQ,EAAE,EAAEA,QAAQ,IAAI,CAAC;QAAC;KACvE;IAED,MAAMK,gBAAgB;QACpB;YAAEH,SAASJ;YAAWK,WAAW,CAAC,QAAQ,EAAEH,QAAQ,EAAE,EAAEA,QAAQ,IAAI,CAAC;QAAC;QACtE;YAAEE,SAASL;YAAaM,WAAW,CAAC,QAAQ,EAAEJ,UAAU,EAAE,EAAEA,UAAU,IAAI,CAAC;YAAEK,YAAY;QAAS;KACnG;IAED,OAAO;QACLE,OAAO;YACLC,UAAUC,yBAAAA,CAAaC,cAAc;YACrCC,QAAQF,yBAAAA,CAAaG,kBAAkB;YACvCC,WAAWX;QACb;QACAY,MAAM;YAAEN,UAAUC,yBAAAA,CAAaM,cAAc;YAAEJ,QAAQF,yBAAAA,CAAaO,kBAAkB;YAAEH,WAAWP;QAAc;IACnH;AACF;AAGO,MAAMb,QAAQwB,IAAAA,oCAAAA,EAAwBrB;AAEtC,MAAMD,cAAcuB,IAAAA,2CAAAA,EAA+BzB,OAAO;IAC/Dc,OAAO;QAAEC,UAAUC,yBAAAA,CAAaM,cAAc;QAAEJ,QAAQF,yBAAAA,CAAaG,kBAAkB;IAAC;IACxFE,MAAM;QAAEN,UAAUC,yBAAAA,CAAaU,YAAY;QAAER,QAAQF,yBAAAA,CAAaO,kBAAkB;IAAC;AACvF;AAEO,MAAMtB,mBAAmBwB,IAAAA,2CAAAA,EAA+BzB,OAAO;IACpEc,OAAO;QAAEC,UAAUC,yBAAAA,CAAaW,YAAY;QAAET,QAAQF,yBAAAA,CAAaG,kBAAkB;IAAC;IACtFE,MAAM;QAAEN,UAAUC,yBAAAA,CAAaC,cAAc;QAAEC,QAAQF,yBAAAA,CAAaO,kBAAkB;IAAC;AACzF"}

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./Scale"), exports);

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Scale';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}

package/lib-commonjs/index.js

@@ -17,6 +17,26 @@ _export(exports, {
     },
     CollapseSnappy: function() {
         return _Collapse.CollapseSnappy;
+    },
+    Fade: function() {
+        return _Fade.Fade;
+    },
+    FadeExaggerated: function() {
+        return _Fade.FadeExaggerated;
+    },
+    FadeSnappy: function() {
+        return _Fade.FadeSnappy;
+    },
+    Scale: function() {
+        return _Scale.Scale;
+    },
+    ScaleExaggerated: function() {
+        return _Scale.ScaleExaggerated;
+    },
+    ScaleSnappy: function() {
+        return _Scale.ScaleSnappy;
     }
 });
 const _Collapse = require("./components/Collapse");
+const _Fade = require("./components/Fade");
+const _Scale = require("./components/Scale");

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export { Collapse, CollapseSnappy, CollapseExaggerated } from './components/Collapse';\n"],"names":["Collapse","CollapseExaggerated","CollapseSnappy"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,QAAQ;eAARA,kBAAQ;;IAAkBC,mBAAmB;eAAnBA,6BAAmB;;IAAnCC,cAAc;eAAdA,wBAAc;;;0BAA6B"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export { Collapse, CollapseSnappy, CollapseExaggerated } from './components/Collapse';\nexport { Fade, FadeSnappy, FadeExaggerated } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleExaggerated } from './components/Scale';\n"],"names":["Collapse","CollapseExaggerated","CollapseSnappy","Fade","FadeExaggerated","FadeSnappy","Scale","ScaleExaggerated","ScaleSnappy"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,QAAQ;eAARA,kBAAQ;;IAAkBC,mBAAmB;eAAnBA,6BAAmB;;IAAnCC,cAAc;eAAdA,wBAAc;;IACxBC,IAAI;eAAJA,UAAI;;IAAcC,eAAe;eAAfA,qBAAe;;IAA3BC,UAAU;eAAVA,gBAAU;;IAChBC,KAAK;eAALA,YAAK;;IAAeC,gBAAgB;eAAhBA,uBAAgB;;IAA7BC,WAAW;eAAXA,kBAAW;;;0BAFmC;sBACZ;uBACG"}

package/package.json

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