@fluentui/react-motion-components-preview 0.0.0-nightly-20240723-0406.1 → 0.1.1

package/CHANGELOG.md

@@ -1,20 +1,18 @@
 # Change Log - @fluentui/react-motion-components-preview
 
-This log was last generated on Tue, 23 Jul 2024 04:16:50 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.0.0-nightly-20240723-0406.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.0.0-nightly-20240723-0406.1)
+## [0.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.1.1)
 
-Tue, 23 Jul 2024 04:16:50 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.1.0..@fluentui/react-motion-components-preview_v0.0.0-nightly-20240723-0406.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)
 
-### Changes
+### Patches
 
-- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/react-motion to v0.0.0-nightly-20240723-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/1218096ed9f02bd5bb5860d3e0b464620998382c) by beachball)
-- Bump @fluentui/react-conformance to v0.0.0-nightly-20240723-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/1218096ed9f02bd5bb5860d3e0b464620998382c) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240723-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/1218096ed9f02bd5bb5860d3e0b464620998382c) by beachball)
+- 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)
 

package/dist/index.d.ts

@@ -0,0 +1,36 @@
+import { PresenceComponent } from '@fluentui/react-motion';
+
+/** A React component that applies collapse/expand transitions to its children. */
+export declare const Collapse: PresenceComponent<    {
+animateOpacity?: boolean | undefined;
+}>;
+
+export declare const CollapseExaggerated: PresenceComponent<    {
+animateOpacity?: boolean | undefined;
+}>;
+
+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/Collapse/Collapse.js

@@ -0,0 +1,71 @@
+import { motionTokens, createPresenceComponent, createPresenceComponentVariant } from '@fluentui/react-motion';
+/** Define a presence motion for collapse/expand */ const collapseMotion = ({ element, animateOpacity = true })=>{
+    const fromOpacity = animateOpacity ? 0 : 1;
+    const toOpacity = 1;
+    const fromHeight = '0'; // Could be a custom param in the future: start partially expanded
+    const toHeight = `${element.scrollHeight}px`;
+    const overflow = 'hidden';
+    const duration = motionTokens.durationNormal;
+    const easing = motionTokens.curveEasyEaseMax;
+    const enterKeyframes = [
+        {
+            opacity: fromOpacity,
+            maxHeight: fromHeight,
+            overflow
+        },
+        // Transition to the height of the content, at 99.99% of the duration.
+        {
+            opacity: toOpacity,
+            maxHeight: toHeight,
+            offset: 0.9999,
+            overflow
+        },
+        // On completion, remove the maxHeight because the content might need to expand later.
+        // This extra keyframe is simpler than firing a callback on completion.
+        {
+            opacity: toOpacity,
+            maxHeight: 'unset',
+            overflow
+        }
+    ];
+    const exitKeyframes = [
+        {
+            opacity: toOpacity,
+            maxHeight: toHeight,
+            overflow
+        },
+        {
+            opacity: fromOpacity,
+            maxHeight: fromHeight,
+            overflow
+        }
+    ];
+    return {
+        enter: {
+            duration,
+            easing,
+            keyframes: enterKeyframes
+        },
+        exit: {
+            duration,
+            easing,
+            keyframes: exitKeyframes
+        }
+    };
+};
+/** A React component that applies collapse/expand transitions to its children. */ export const Collapse = createPresenceComponent(collapseMotion);
+export const CollapseSnappy = createPresenceComponentVariant(Collapse, {
+    all: {
+        duration: motionTokens.durationUltraFast
+    }
+});
+export const CollapseExaggerated = createPresenceComponentVariant(Collapse, {
+    enter: {
+        duration: motionTokens.durationSlow,
+        easing: motionTokens.curveEasyEaseMax
+    },
+    exit: {
+        duration: motionTokens.durationNormal,
+        easing: motionTokens.curveEasyEaseMax
+    }
+});

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Collapse.ts"],"sourcesContent":["import {\n  motionTokens,\n  type PresenceMotionFn,\n  createPresenceComponent,\n  createPresenceComponentVariant,\n} from '@fluentui/react-motion';\n\n/** Define a presence motion for collapse/expand */\nconst collapseMotion: PresenceMotionFn<{ animateOpacity?: boolean }> = ({ element, animateOpacity = true }) => {\n  const fromOpacity = animateOpacity ? 0 : 1;\n  const toOpacity = 1;\n  const fromHeight = '0'; // Could be a custom param in the future: start partially expanded\n  const toHeight = `${element.scrollHeight}px`;\n  const overflow = 'hidden';\n\n  const duration = motionTokens.durationNormal;\n  const easing = motionTokens.curveEasyEaseMax;\n\n  const enterKeyframes = [\n    { opacity: fromOpacity, maxHeight: fromHeight, overflow },\n    // Transition to the height of the content, at 99.99% of the duration.\n    { opacity: toOpacity, maxHeight: toHeight, offset: 0.9999, overflow },\n    // On completion, remove the maxHeight because the content might need to expand later.\n    // This extra keyframe is simpler than firing a callback on completion.\n    { opacity: toOpacity, maxHeight: 'unset', overflow },\n  ];\n\n  const exitKeyframes = [\n    { opacity: toOpacity, maxHeight: toHeight, overflow },\n    { opacity: fromOpacity, maxHeight: fromHeight, overflow },\n  ];\n\n  return {\n    enter: { duration, easing, keyframes: enterKeyframes },\n    exit: { duration, easing, keyframes: exitKeyframes },\n  };\n};\n\n/** A React component that applies collapse/expand transitions to its children. */\nexport const Collapse = createPresenceComponent(collapseMotion);\n\nexport const CollapseSnappy = createPresenceComponentVariant(Collapse, {\n  all: { duration: motionTokens.durationUltraFast },\n});\n\nexport const CollapseExaggerated = createPresenceComponentVariant(Collapse, {\n  enter: { duration: motionTokens.durationSlow, easing: motionTokens.curveEasyEaseMax },\n  exit: { duration: motionTokens.durationNormal, easing: motionTokens.curveEasyEaseMax },\n});\n"],"names":["motionTokens","createPresenceComponent","createPresenceComponentVariant","collapseMotion","element","animateOpacity","fromOpacity","toOpacity","fromHeight","toHeight","scrollHeight","overflow","duration","durationNormal","easing","curveEasyEaseMax","enterKeyframes","opacity","maxHeight","offset","exitKeyframes","enter","keyframes","exit","Collapse","CollapseSnappy","all","durationUltraFast","CollapseExaggerated","durationSlow"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,YAAY,EAEZC,uBAAuB,EACvBC,8BAA8B,QACzB,yBAAyB;AAEhC,iDAAiD,GACjD,MAAMC,iBAAiE,CAAC,EAAEC,OAAO,EAAEC,iBAAiB,IAAI,EAAE;IACxG,MAAMC,cAAcD,iBAAiB,IAAI;IACzC,MAAME,YAAY;IAClB,MAAMC,aAAa,KAAK,kEAAkE;IAC1F,MAAMC,WAAW,CAAC,EAAEL,QAAQM,YAAY,CAAC,EAAE,CAAC;IAC5C,MAAMC,WAAW;IAEjB,MAAMC,WAAWZ,aAAaa,cAAc;IAC5C,MAAMC,SAASd,aAAae,gBAAgB;IAE5C,MAAMC,iBAAiB;QACrB;YAAEC,SAASX;YAAaY,WAAWV;YAAYG;QAAS;QACxD,sEAAsE;QACtE;YAAEM,SAASV;YAAWW,WAAWT;YAAUU,QAAQ;YAAQR;QAAS;QACpE,sFAAsF;QACtF,uEAAuE;QACvE;YAAEM,SAASV;YAAWW,WAAW;YAASP;QAAS;KACpD;IAED,MAAMS,gBAAgB;QACpB;YAAEH,SAASV;YAAWW,WAAWT;YAAUE;QAAS;QACpD;YAAEM,SAASX;YAAaY,WAAWV;YAAYG;QAAS;KACzD;IAED,OAAO;QACLU,OAAO;YAAET;YAAUE;YAAQQ,WAAWN;QAAe;QACrDO,MAAM;YAAEX;YAAUE;YAAQQ,WAAWF;QAAc;IACrD;AACF;AAEA,gFAAgF,GAChF,OAAO,MAAMI,WAAWvB,wBAAwBE,gBAAgB;AAEhE,OAAO,MAAMsB,iBAAiBvB,+BAA+BsB,UAAU;IACrEE,KAAK;QAAEd,UAAUZ,aAAa2B,iBAAiB;IAAC;AAClD,GAAG;AAEH,OAAO,MAAMC,sBAAsB1B,+BAA+BsB,UAAU;IAC1EH,OAAO;QAAET,UAAUZ,aAAa6B,YAAY;QAAEf,QAAQd,aAAae,gBAAgB;IAAC;IACpFQ,MAAM;QAAEX,UAAUZ,aAAaa,cAAc;QAAEC,QAAQd,aAAae,gBAAgB;IAAC;AACvF,GAAG"}

package/lib/components/Collapse/index.js

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

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

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

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

@@ -0,0 +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

@@ -0,0 +1 @@
+{"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/Collapse/Collapse.js

@@ -0,0 +1,92 @@
+"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, {
+    Collapse: function() {
+        return Collapse;
+    },
+    CollapseExaggerated: function() {
+        return CollapseExaggerated;
+    },
+    CollapseSnappy: function() {
+        return CollapseSnappy;
+    }
+});
+const _reactmotion = require("@fluentui/react-motion");
+/** Define a presence motion for collapse/expand */ const collapseMotion = ({ element, animateOpacity = true })=>{
+    const fromOpacity = animateOpacity ? 0 : 1;
+    const toOpacity = 1;
+    const fromHeight = '0'; // Could be a custom param in the future: start partially expanded
+    const toHeight = `${element.scrollHeight}px`;
+    const overflow = 'hidden';
+    const duration = _reactmotion.motionTokens.durationNormal;
+    const easing = _reactmotion.motionTokens.curveEasyEaseMax;
+    const enterKeyframes = [
+        {
+            opacity: fromOpacity,
+            maxHeight: fromHeight,
+            overflow
+        },
+        // Transition to the height of the content, at 99.99% of the duration.
+        {
+            opacity: toOpacity,
+            maxHeight: toHeight,
+            offset: 0.9999,
+            overflow
+        },
+        // On completion, remove the maxHeight because the content might need to expand later.
+        // This extra keyframe is simpler than firing a callback on completion.
+        {
+            opacity: toOpacity,
+            maxHeight: 'unset',
+            overflow
+        }
+    ];
+    const exitKeyframes = [
+        {
+            opacity: toOpacity,
+            maxHeight: toHeight,
+            overflow
+        },
+        {
+            opacity: fromOpacity,
+            maxHeight: fromHeight,
+            overflow
+        }
+    ];
+    return {
+        enter: {
+            duration,
+            easing,
+            keyframes: enterKeyframes
+        },
+        exit: {
+            duration,
+            easing,
+            keyframes: exitKeyframes
+        }
+    };
+};
+const Collapse = (0, _reactmotion.createPresenceComponent)(collapseMotion);
+const CollapseSnappy = (0, _reactmotion.createPresenceComponentVariant)(Collapse, {
+    all: {
+        duration: _reactmotion.motionTokens.durationUltraFast
+    }
+});
+const CollapseExaggerated = (0, _reactmotion.createPresenceComponentVariant)(Collapse, {
+    enter: {
+        duration: _reactmotion.motionTokens.durationSlow,
+        easing: _reactmotion.motionTokens.curveEasyEaseMax
+    },
+    exit: {
+        duration: _reactmotion.motionTokens.durationNormal,
+        easing: _reactmotion.motionTokens.curveEasyEaseMax
+    }
+});

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Collapse.ts"],"sourcesContent":["import {\n  motionTokens,\n  type PresenceMotionFn,\n  createPresenceComponent,\n  createPresenceComponentVariant,\n} from '@fluentui/react-motion';\n\n/** Define a presence motion for collapse/expand */\nconst collapseMotion: PresenceMotionFn<{ animateOpacity?: boolean }> = ({ element, animateOpacity = true }) => {\n  const fromOpacity = animateOpacity ? 0 : 1;\n  const toOpacity = 1;\n  const fromHeight = '0'; // Could be a custom param in the future: start partially expanded\n  const toHeight = `${element.scrollHeight}px`;\n  const overflow = 'hidden';\n\n  const duration = motionTokens.durationNormal;\n  const easing = motionTokens.curveEasyEaseMax;\n\n  const enterKeyframes = [\n    { opacity: fromOpacity, maxHeight: fromHeight, overflow },\n    // Transition to the height of the content, at 99.99% of the duration.\n    { opacity: toOpacity, maxHeight: toHeight, offset: 0.9999, overflow },\n    // On completion, remove the maxHeight because the content might need to expand later.\n    // This extra keyframe is simpler than firing a callback on completion.\n    { opacity: toOpacity, maxHeight: 'unset', overflow },\n  ];\n\n  const exitKeyframes = [\n    { opacity: toOpacity, maxHeight: toHeight, overflow },\n    { opacity: fromOpacity, maxHeight: fromHeight, overflow },\n  ];\n\n  return {\n    enter: { duration, easing, keyframes: enterKeyframes },\n    exit: { duration, easing, keyframes: exitKeyframes },\n  };\n};\n\n/** A React component that applies collapse/expand transitions to its children. */\nexport const Collapse = createPresenceComponent(collapseMotion);\n\nexport const CollapseSnappy = createPresenceComponentVariant(Collapse, {\n  all: { duration: motionTokens.durationUltraFast },\n});\n\nexport const CollapseExaggerated = createPresenceComponentVariant(Collapse, {\n  enter: { duration: motionTokens.durationSlow, easing: motionTokens.curveEasyEaseMax },\n  exit: { duration: motionTokens.durationNormal, easing: motionTokens.curveEasyEaseMax },\n});\n"],"names":["Collapse","CollapseExaggerated","CollapseSnappy","collapseMotion","element","animateOpacity","fromOpacity","toOpacity","fromHeight","toHeight","scrollHeight","overflow","duration","motionTokens","durationNormal","easing","curveEasyEaseMax","enterKeyframes","opacity","maxHeight","offset","exitKeyframes","enter","keyframes","exit","createPresenceComponent","createPresenceComponentVariant","all","durationUltraFast","durationSlow"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAuCaA,QAAAA;eAAAA;;IAMAC,mBAAAA;eAAAA;;IAJAC,cAAAA;eAAAA;;;6BApCN;AAEP,iDAAiD,GACjD,MAAMC,iBAAiE,CAAC,EAAEC,OAAO,EAAEC,iBAAiB,IAAI,EAAE;IACxG,MAAMC,cAAcD,iBAAiB,IAAI;IACzC,MAAME,YAAY;IAClB,MAAMC,aAAa,KAAK,kEAAkE;IAC1F,MAAMC,WAAW,CAAC,EAAEL,QAAQM,YAAY,CAAC,EAAE,CAAC;IAC5C,MAAMC,WAAW;IAEjB,MAAMC,WAAWC,yBAAAA,CAAaC,cAAc;IAC5C,MAAMC,SAASF,yBAAAA,CAAaG,gBAAgB;IAE5C,MAAMC,iBAAiB;QACrB;YAAEC,SAASZ;YAAaa,WAAWX;YAAYG;QAAS;QACxD,sEAAsE;QACtE;YAAEO,SAASX;YAAWY,WAAWV;YAAUW,QAAQ;YAAQT;QAAS;QACpE,sFAAsF;QACtF,uEAAuE;QACvE;YAAEO,SAASX;YAAWY,WAAW;YAASR;QAAS;KACpD;IAED,MAAMU,gBAAgB;QACpB;YAAEH,SAASX;YAAWY,WAAWV;YAAUE;QAAS;QACpD;YAAEO,SAASZ;YAAaa,WAAWX;YAAYG;QAAS;KACzD;IAED,OAAO;QACLW,OAAO;YAAEV;YAAUG;YAAQQ,WAAWN;QAAe;QACrDO,MAAM;YAAEZ;YAAUG;YAAQQ,WAAWF;QAAc;IACrD;AACF;AAGO,MAAMrB,WAAWyB,IAAAA,oCAAAA,EAAwBtB;AAEzC,MAAMD,iBAAiBwB,IAAAA,2CAAAA,EAA+B1B,UAAU;IACrE2B,KAAK;QAAEf,UAAUC,yBAAAA,CAAae,iBAAiB;IAAC;AAClD;AAEO,MAAM3B,sBAAsByB,IAAAA,2CAAAA,EAA+B1B,UAAU;IAC1EsB,OAAO;QAAEV,UAAUC,yBAAAA,CAAagB,YAAY;QAAEd,QAAQF,yBAAAA,CAAaG,gBAAgB;IAAC;IACpFQ,MAAM;QAAEZ,UAAUC,yBAAAA,CAAaC,cAAc;QAAEC,QAAQF,yBAAAA,CAAaG,gBAAgB;IAAC;AACvF"}

package/lib-commonjs/components/Collapse/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("./Collapse"), exports);

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

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

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

@@ -0,0 +1,42 @@
+"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, {
+    Collapse: function() {
+        return _Collapse.Collapse;
+    },
+    CollapseExaggerated: function() {
+        return _Collapse.CollapseExaggerated;
+    },
+    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

@@ -0,0 +1 @@
+{"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.0.0-nightly-20240723-0406.1",
+  "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",
@@ -29,13 +29,13 @@
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-conformance": "0.0.0-nightly-20240723-0406.1",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20240723-0406.1",
+    "@fluentui/react-conformance": "*",
+    "@fluentui/react-conformance-griffel": "*",
     "@fluentui/scripts-api-extractor": "*",
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-motion": "0.0.0-nightly-20240723-0406.1",
+    "@fluentui/react-motion": "*",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
@@ -53,5 +53,10 @@
     },
     "./package.json": "./package.json"
   },
-  "beachball": {}
+  "beachball": {
+    "disallowedChangeTypes": [
+      "major",
+      "prerelease"
+    ]
+  }
 }