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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/CHANGELOG.md +19 -1
  2. package/dist/index.d.ts +135 -9
  3. package/lib/atoms/blur-atom.js +4 -3
  4. package/lib/atoms/blur-atom.js.map +1 -1
  5. package/lib/atoms/fade-atom.js +3 -2
  6. package/lib/atoms/fade-atom.js.map +1 -1
  7. package/lib/atoms/rotate-atom.js +6 -9
  8. package/lib/atoms/rotate-atom.js.map +1 -1
  9. package/lib/atoms/slide-atom.js +6 -4
  10. package/lib/atoms/slide-atom.js.map +1 -1
  11. package/lib/components/Blur/Blur.js +6 -3
  12. package/lib/components/Blur/Blur.js.map +1 -1
  13. package/lib/components/Blur/blur-types.js.map +1 -1
  14. package/lib/components/Fade/Fade.js +9 -3
  15. package/lib/components/Fade/Fade.js.map +1 -1
  16. package/lib/components/Fade/fade-types.js.map +1 -1
  17. package/lib/components/Rotate/Rotate.js +8 -8
  18. package/lib/components/Rotate/Rotate.js.map +1 -1
  19. package/lib/components/Rotate/rotate-types.js.map +1 -1
  20. package/lib/components/Scale/Scale.js +6 -3
  21. package/lib/components/Scale/Scale.js.map +1 -1
  22. package/lib/components/Scale/scale-types.js.map +1 -1
  23. package/lib/components/Slide/Slide.js +9 -3
  24. package/lib/components/Slide/Slide.js.map +1 -1
  25. package/lib/components/Slide/slide-types.js.map +1 -1
  26. package/lib/index.js +6 -0
  27. package/lib/index.js.map +1 -1
  28. package/lib-commonjs/atoms/blur-atom.js +2 -2
  29. package/lib-commonjs/atoms/blur-atom.js.map +1 -1
  30. package/lib-commonjs/atoms/fade-atom.js +2 -2
  31. package/lib-commonjs/atoms/fade-atom.js.map +1 -1
  32. package/lib-commonjs/atoms/rotate-atom.js +4 -7
  33. package/lib-commonjs/atoms/rotate-atom.js.map +1 -1
  34. package/lib-commonjs/atoms/slide-atom.js +2 -2
  35. package/lib-commonjs/atoms/slide-atom.js.map +1 -1
  36. package/lib-commonjs/components/Blur/Blur.js +6 -3
  37. package/lib-commonjs/components/Blur/Blur.js.map +1 -1
  38. package/lib-commonjs/components/Fade/Fade.js +7 -3
  39. package/lib-commonjs/components/Fade/Fade.js.map +1 -1
  40. package/lib-commonjs/components/Rotate/Rotate.js +8 -8
  41. package/lib-commonjs/components/Rotate/Rotate.js.map +1 -1
  42. package/lib-commonjs/components/Scale/Scale.js +6 -3
  43. package/lib-commonjs/components/Scale/Scale.js.map +1 -1
  44. package/lib-commonjs/components/Slide/Slide.js +9 -3
  45. package/lib-commonjs/components/Slide/Slide.js.map +1 -1
  46. package/lib-commonjs/index.js +21 -0
  47. package/lib-commonjs/index.js.map +1 -1
  48. package/package.json +1 -1
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Scale/Scale.ts"],"sourcesContent":["import {\n motionTokens,\n createPresenceComponent,\n PresenceMotionFn,\n createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { scaleAtom } from '../../atoms/scale-atom';\nimport { ScaleParams } from './scale-types';\n\n/**\n * Define a presence motion for scale in/out\n *\n * @param duration - Time (ms) for the enter transition (scale-in). Defaults to the `durationGentle` value (250 ms).\n * @param easing - Easing curve for the enter transition (scale-in). Defaults to the `curveDecelerateMax` value.\n * @param delay - Time (ms) to delay the enter transition. Defaults to 0.\n * @param exitDuration - Time (ms) for the exit transition (scale-out). Defaults to the `durationNormal` value (200 ms).\n * @param exitEasing - Easing curve for the exit transition (scale-out). Defaults to the `curveAccelerateMax` value.\n * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param fromScale - The scale value to animate from. Defaults to `0.9`.\n * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.\n */\nconst scalePresenceFn: PresenceMotionFn<ScaleParams> = ({\n duration = motionTokens.durationGentle,\n easing = motionTokens.curveDecelerateMax,\n delay = 0,\n exitDuration = motionTokens.durationNormal,\n exitEasing = motionTokens.curveAccelerateMax,\n exitDelay = delay,\n fromScale = 0.9,\n animateOpacity = true,\n}) => {\n const enterAtoms = [scaleAtom({ direction: 'enter', duration, easing, delay, fromScale })];\n const exitAtoms = [\n scaleAtom({\n direction: 'exit',\n duration: exitDuration,\n easing: exitEasing,\n delay: exitDelay,\n fromScale,\n }),\n ];\n\n // Only add fade atoms if animateOpacity is true.\n if (animateOpacity) {\n enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing, delay }));\n exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing, delay: exitDelay }));\n }\n\n return {\n enter: enterAtoms,\n exit: exitAtoms,\n };\n};\n\n/** A React component that applies scale in/out transitions to its children. */\nexport const Scale = createPresenceComponent(scalePresenceFn);\n\nexport const ScaleSnappy = createPresenceComponentVariant(Scale, {\n duration: motionTokens.durationNormal,\n exitDuration: motionTokens.durationFast,\n});\n\nexport const ScaleRelaxed = createPresenceComponentVariant(Scale, {\n duration: motionTokens.durationSlow,\n exitDuration: motionTokens.durationGentle,\n});\n"],"names":["motionTokens","createPresenceComponent","createPresenceComponentVariant","fadeAtom","scaleAtom","scalePresenceFn","duration","durationGentle","easing","curveDecelerateMax","delay","exitDuration","durationNormal","exitEasing","curveAccelerateMax","exitDelay","fromScale","animateOpacity","enterAtoms","direction","exitAtoms","push","enter","exit","Scale","ScaleSnappy","durationFast","ScaleRelaxed","durationSlow"],"mappings":"AAAA,SACEA,YAAY,EACZC,uBAAuB,EAEvBC,8BAA8B,QACzB,yBAAyB;AAChC,SAASC,QAAQ,QAAQ,wBAAwB;AACjD,SAASC,SAAS,QAAQ,yBAAyB;AAGnD;;;;;;;;;;;CAWC,GACD,MAAMC,kBAAiD,CAAC,EACtDC,WAAWN,aAAaO,cAAc,EACtCC,SAASR,aAAaS,kBAAkB,EACxCC,QAAQ,CAAC,EACTC,eAAeX,aAAaY,cAAc,EAC1CC,aAAab,aAAac,kBAAkB,EAC5CC,YAAYL,KAAK,EACjBM,YAAY,GAAG,EACfC,iBAAiB,IAAI,EACtB;IACC,MAAMC,aAAa;QAACd,UAAU;YAAEe,WAAW;YAASb;YAAUE;YAAQE;YAAOM;QAAU;KAAG;IAC1F,MAAMI,YAAY;QAChBhB,UAAU;YACRe,WAAW;YACXb,UAAUK;YACVH,QAAQK;YACRH,OAAOK;YACPC;QACF;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWG,IAAI,CAAClB,SAAS;YAAEgB,WAAW;YAASb;YAAUE;YAAQE;QAAM;QACvEU,UAAUC,IAAI,CAAClB,SAAS;YAAEgB,WAAW;YAAQb,UAAUK;YAAcH,QAAQK;YAAYH,OAAOK;QAAU;IAC5G;IAEA,OAAO;QACLO,OAAOJ;QACPK,MAAMH;IACR;AACF;AAEA,6EAA6E,GAC7E,OAAO,MAAMI,QAAQvB,wBAAwBI,iBAAiB;AAE9D,OAAO,MAAMoB,cAAcvB,+BAA+BsB,OAAO;IAC/DlB,UAAUN,aAAaY,cAAc;IACrCD,cAAcX,aAAa0B,YAAY;AACzC,GAAG;AAEH,OAAO,MAAMC,eAAezB,+BAA+BsB,OAAO;IAChElB,UAAUN,aAAa4B,YAAY;IACnCjB,cAAcX,aAAaO,cAAc;AAC3C,GAAG"}
1
+ {"version":3,"sources":["../src/components/Scale/Scale.ts"],"sourcesContent":["import {\n motionTokens,\n createPresenceComponent,\n PresenceMotionFn,\n createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { scaleAtom } from '../../atoms/scale-atom';\nimport { ScaleParams } from './scale-types';\n\n/**\n * Define a presence motion for scale in/out\n *\n * @param duration - Time (ms) for the enter transition (scale-in). Defaults to the `durationGentle` value (250 ms).\n * @param easing - Easing curve for the enter transition (scale-in). Defaults to the `curveDecelerateMax` value.\n * @param delay - Time (ms) to delay the enter transition. Defaults to 0.\n * @param exitDuration - Time (ms) for the exit transition (scale-out). Defaults to the `durationNormal` value (200 ms).\n * @param exitEasing - Easing curve for the exit transition (scale-out). Defaults to the `curveAccelerateMax` value.\n * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param fromScale - The scale value to animate from. Defaults to `0.9`.\n * @param toScale - The scale value to animate to. Defaults to `1`.\n * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.\n */\nconst scalePresenceFn: PresenceMotionFn<ScaleParams> = ({\n duration = motionTokens.durationGentle,\n easing = motionTokens.curveDecelerateMax,\n delay = 0,\n exitDuration = motionTokens.durationNormal,\n exitEasing = motionTokens.curveAccelerateMax,\n exitDelay = delay,\n fromScale = 0.9,\n toScale = 1,\n animateOpacity = true,\n}) => {\n const enterAtoms = [scaleAtom({ direction: 'enter', duration, easing, delay, fromScale, toScale })];\n const exitAtoms = [\n scaleAtom({\n direction: 'exit',\n duration: exitDuration,\n easing: exitEasing,\n delay: exitDelay,\n fromScale,\n toScale,\n }),\n ];\n\n // Only add fade atoms if animateOpacity is true.\n if (animateOpacity) {\n enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing, delay }));\n exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing, delay: exitDelay }));\n }\n\n return {\n enter: enterAtoms,\n exit: exitAtoms,\n };\n};\n\n/** A React component that applies scale in/out transitions to its children. */\nexport const Scale = createPresenceComponent(scalePresenceFn);\n\nexport const ScaleSnappy = createPresenceComponentVariant(Scale, {\n duration: motionTokens.durationNormal,\n exitDuration: motionTokens.durationFast,\n});\n\nexport const ScaleRelaxed = createPresenceComponentVariant(Scale, {\n duration: motionTokens.durationSlow,\n exitDuration: motionTokens.durationGentle,\n});\n"],"names":["motionTokens","createPresenceComponent","createPresenceComponentVariant","fadeAtom","scaleAtom","scalePresenceFn","duration","durationGentle","easing","curveDecelerateMax","delay","exitDuration","durationNormal","exitEasing","curveAccelerateMax","exitDelay","fromScale","toScale","animateOpacity","enterAtoms","direction","exitAtoms","push","enter","exit","Scale","ScaleSnappy","durationFast","ScaleRelaxed","durationSlow"],"mappings":"AAAA,SACEA,YAAY,EACZC,uBAAuB,EAEvBC,8BAA8B,QACzB,yBAAyB;AAChC,SAASC,QAAQ,QAAQ,wBAAwB;AACjD,SAASC,SAAS,QAAQ,yBAAyB;AAGnD;;;;;;;;;;;;CAYC,GACD,MAAMC,kBAAiD,CAAC,EACtDC,WAAWN,aAAaO,cAAc,EACtCC,SAASR,aAAaS,kBAAkB,EACxCC,QAAQ,CAAC,EACTC,eAAeX,aAAaY,cAAc,EAC1CC,aAAab,aAAac,kBAAkB,EAC5CC,YAAYL,KAAK,EACjBM,YAAY,GAAG,EACfC,UAAU,CAAC,EACXC,iBAAiB,IAAI,EACtB;IACC,MAAMC,aAAa;QAACf,UAAU;YAAEgB,WAAW;YAASd;YAAUE;YAAQE;YAAOM;YAAWC;QAAQ;KAAG;IACnG,MAAMI,YAAY;QAChBjB,UAAU;YACRgB,WAAW;YACXd,UAAUK;YACVH,QAAQK;YACRH,OAAOK;YACPC;YACAC;QACF;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWG,IAAI,CAACnB,SAAS;YAAEiB,WAAW;YAASd;YAAUE;YAAQE;QAAM;QACvEW,UAAUC,IAAI,CAACnB,SAAS;YAAEiB,WAAW;YAAQd,UAAUK;YAAcH,QAAQK;YAAYH,OAAOK;QAAU;IAC5G;IAEA,OAAO;QACLQ,OAAOJ;QACPK,MAAMH;IACR;AACF;AAEA,6EAA6E,GAC7E,OAAO,MAAMI,QAAQxB,wBAAwBI,iBAAiB;AAE9D,OAAO,MAAMqB,cAAcxB,+BAA+BuB,OAAO;IAC/DnB,UAAUN,aAAaY,cAAc;IACrCD,cAAcX,aAAa2B,YAAY;AACzC,GAAG;AAEH,OAAO,MAAMC,eAAe1B,+BAA+BuB,OAAO;IAChEnB,UAAUN,aAAa6B,YAAY;IACnClB,cAAcX,aAAaO,cAAc;AAC3C,GAAG"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Scale/scale-types.ts"],"sourcesContent":["import type { BasePresenceParams, AnimateOpacity } from '../../types';\n\nexport type ScaleParams = BasePresenceParams &\n AnimateOpacity & {\n /** The scale value to animate from. Defaults to `0.9`. */\n fromScale?: number;\n };\n"],"names":[],"mappings":"AAEA,WAII"}
1
+ {"version":3,"sources":["../src/components/Scale/scale-types.ts"],"sourcesContent":["import type { BasePresenceParams, AnimateOpacity } from '../../types';\n\nexport type ScaleParams = BasePresenceParams &\n AnimateOpacity & {\n /** The scale value to animate from. Defaults to `0.9`. */\n fromScale?: number;\n\n /** The scale value to animate to. Defaults to `1`. */\n toScale?: number;\n };\n"],"names":[],"mappings":"AAEA,WAOI"}
@@ -12,8 +12,10 @@ import { slideAtom } from '../../atoms/slide-atom';
12
12
  * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.
13
13
  * @param fromX - The X translate value with units to animate from. Defaults to `'0px'`.
14
14
  * @param fromY - The Y translate value with units to animate from. Defaults to `'20px'`.
15
+ * @param toX - The X translate value with units to animate to. Defaults to `'0px'`.
16
+ * @param toY - The Y translate value with units to animate to. Defaults to `'0px'`.
15
17
  * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.
16
- */ const slidePresenceFn = ({ duration = motionTokens.durationNormal, easing = motionTokens.curveDecelerateMid, delay = 0, exitDuration = duration, exitEasing = motionTokens.curveAccelerateMid, exitDelay = delay, fromX = '0px', fromY = '20px', animateOpacity = true })=>{
18
+ */ const slidePresenceFn = ({ duration = motionTokens.durationNormal, easing = motionTokens.curveDecelerateMid, delay = 0, exitDuration = duration, exitEasing = motionTokens.curveAccelerateMid, exitDelay = delay, fromX = '0px', fromY = '20px', toX = '0px', toY = '0px', animateOpacity = true })=>{
17
19
  const enterAtoms = [
18
20
  slideAtom({
19
21
  direction: 'enter',
@@ -21,7 +23,9 @@ import { slideAtom } from '../../atoms/slide-atom';
21
23
  easing,
22
24
  delay,
23
25
  fromX,
24
- fromY
26
+ fromY,
27
+ toX,
28
+ toY
25
29
  })
26
30
  ];
27
31
  const exitAtoms = [
@@ -31,7 +35,9 @@ import { slideAtom } from '../../atoms/slide-atom';
31
35
  easing: exitEasing,
32
36
  delay: exitDelay,
33
37
  fromX,
34
- fromY
38
+ fromY,
39
+ toX,
40
+ toY
35
41
  })
36
42
  ];
37
43
  // Only add fade atoms if animateOpacity is true.
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Slide/Slide.ts"],"sourcesContent":["import {\n motionTokens,\n createPresenceComponent,\n PresenceMotionFn,\n createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { slideAtom } from '../../atoms/slide-atom';\nimport { SlideParams } from './slide-types';\n\n/**\n * Define a presence motion for slide in/out\n *\n * @param duration - Time (ms) for the enter transition (slide-in). Defaults to the `durationNormal` value (200 ms).\n * @param easing - Easing curve for the enter transition (slide-in). Defaults to the `curveDecelerateMid` value.\n * @param delay - Time (ms) to delay the enter transition. Defaults to 0.\n * @param exitDuration - Time (ms) for the exit transition (slide-out). Defaults to the `duration` param for symmetry.\n * @param exitEasing - Easing curve for the exit transition (slide-out). Defaults to the `curveAccelerateMid` value.\n * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param fromX - The X translate value with units to animate from. Defaults to `'0px'`.\n * @param fromY - The Y translate value with units to animate from. Defaults to `'20px'`.\n * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.\n */\nconst slidePresenceFn: PresenceMotionFn<SlideParams> = ({\n duration = motionTokens.durationNormal,\n easing = motionTokens.curveDecelerateMid,\n delay = 0,\n exitDuration = duration,\n exitEasing = motionTokens.curveAccelerateMid,\n exitDelay = delay,\n fromX = '0px',\n fromY = '20px',\n animateOpacity = true,\n}: SlideParams) => {\n const enterAtoms = [slideAtom({ direction: 'enter', duration, easing, delay, fromX, fromY })];\n const exitAtoms = [\n slideAtom({\n direction: 'exit',\n duration: exitDuration,\n easing: exitEasing,\n delay: exitDelay,\n fromX,\n fromY,\n }),\n ];\n\n // Only add fade atoms if animateOpacity is true.\n if (animateOpacity) {\n enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing, delay }));\n exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing, delay: exitDelay }));\n }\n\n return {\n enter: enterAtoms,\n exit: exitAtoms,\n };\n};\n\n/** A React component that applies slide in/out transitions to its children. */\nexport const Slide = createPresenceComponent(slidePresenceFn);\n\nexport const SlideSnappy = createPresenceComponentVariant(Slide, {\n easing: motionTokens.curveDecelerateMax,\n exitEasing: motionTokens.curveAccelerateMax,\n});\n\nexport const SlideRelaxed = createPresenceComponentVariant(Slide, {\n duration: motionTokens.durationGentle,\n});\n"],"names":["motionTokens","createPresenceComponent","createPresenceComponentVariant","fadeAtom","slideAtom","slidePresenceFn","duration","durationNormal","easing","curveDecelerateMid","delay","exitDuration","exitEasing","curveAccelerateMid","exitDelay","fromX","fromY","animateOpacity","enterAtoms","direction","exitAtoms","push","enter","exit","Slide","SlideSnappy","curveDecelerateMax","curveAccelerateMax","SlideRelaxed","durationGentle"],"mappings":"AAAA,SACEA,YAAY,EACZC,uBAAuB,EAEvBC,8BAA8B,QACzB,yBAAyB;AAChC,SAASC,QAAQ,QAAQ,wBAAwB;AACjD,SAASC,SAAS,QAAQ,yBAAyB;AAGnD;;;;;;;;;;;;CAYC,GACD,MAAMC,kBAAiD,CAAC,EACtDC,WAAWN,aAAaO,cAAc,EACtCC,SAASR,aAAaS,kBAAkB,EACxCC,QAAQ,CAAC,EACTC,eAAeL,QAAQ,EACvBM,aAAaZ,aAAaa,kBAAkB,EAC5CC,YAAYJ,KAAK,EACjBK,QAAQ,KAAK,EACbC,QAAQ,MAAM,EACdC,iBAAiB,IAAI,EACT;IACZ,MAAMC,aAAa;QAACd,UAAU;YAAEe,WAAW;YAASb;YAAUE;YAAQE;YAAOK;YAAOC;QAAM;KAAG;IAC7F,MAAMI,YAAY;QAChBhB,UAAU;YACRe,WAAW;YACXb,UAAUK;YACVH,QAAQI;YACRF,OAAOI;YACPC;YACAC;QACF;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWG,IAAI,CAAClB,SAAS;YAAEgB,WAAW;YAASb;YAAUE;YAAQE;QAAM;QACvEU,UAAUC,IAAI,CAAClB,SAAS;YAAEgB,WAAW;YAAQb,UAAUK;YAAcH,QAAQI;YAAYF,OAAOI;QAAU;IAC5G;IAEA,OAAO;QACLQ,OAAOJ;QACPK,MAAMH;IACR;AACF;AAEA,6EAA6E,GAC7E,OAAO,MAAMI,QAAQvB,wBAAwBI,iBAAiB;AAE9D,OAAO,MAAMoB,cAAcvB,+BAA+BsB,OAAO;IAC/DhB,QAAQR,aAAa0B,kBAAkB;IACvCd,YAAYZ,aAAa2B,kBAAkB;AAC7C,GAAG;AAEH,OAAO,MAAMC,eAAe1B,+BAA+BsB,OAAO;IAChElB,UAAUN,aAAa6B,cAAc;AACvC,GAAG"}
1
+ {"version":3,"sources":["../src/components/Slide/Slide.ts"],"sourcesContent":["import {\n motionTokens,\n createPresenceComponent,\n PresenceMotionFn,\n createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { slideAtom } from '../../atoms/slide-atom';\nimport { SlideParams } from './slide-types';\n\n/**\n * Define a presence motion for slide in/out\n *\n * @param duration - Time (ms) for the enter transition (slide-in). Defaults to the `durationNormal` value (200 ms).\n * @param easing - Easing curve for the enter transition (slide-in). Defaults to the `curveDecelerateMid` value.\n * @param delay - Time (ms) to delay the enter transition. Defaults to 0.\n * @param exitDuration - Time (ms) for the exit transition (slide-out). Defaults to the `duration` param for symmetry.\n * @param exitEasing - Easing curve for the exit transition (slide-out). Defaults to the `curveAccelerateMid` value.\n * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param fromX - The X translate value with units to animate from. Defaults to `'0px'`.\n * @param fromY - The Y translate value with units to animate from. Defaults to `'20px'`.\n * @param toX - The X translate value with units to animate to. Defaults to `'0px'`.\n * @param toY - The Y translate value with units to animate to. Defaults to `'0px'`.\n * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.\n */\nconst slidePresenceFn: PresenceMotionFn<SlideParams> = ({\n duration = motionTokens.durationNormal,\n easing = motionTokens.curveDecelerateMid,\n delay = 0,\n exitDuration = duration,\n exitEasing = motionTokens.curveAccelerateMid,\n exitDelay = delay,\n fromX = '0px',\n fromY = '20px',\n toX = '0px',\n toY = '0px',\n animateOpacity = true,\n}: SlideParams) => {\n const enterAtoms = [slideAtom({ direction: 'enter', duration, easing, delay, fromX, fromY, toX, toY })];\n const exitAtoms = [\n slideAtom({\n direction: 'exit',\n duration: exitDuration,\n easing: exitEasing,\n delay: exitDelay,\n fromX,\n fromY,\n toX,\n toY,\n }),\n ];\n\n // Only add fade atoms if animateOpacity is true.\n if (animateOpacity) {\n enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing, delay }));\n exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing, delay: exitDelay }));\n }\n\n return {\n enter: enterAtoms,\n exit: exitAtoms,\n };\n};\n\n/** A React component that applies slide in/out transitions to its children. */\nexport const Slide = createPresenceComponent(slidePresenceFn);\n\nexport const SlideSnappy = createPresenceComponentVariant(Slide, {\n easing: motionTokens.curveDecelerateMax,\n exitEasing: motionTokens.curveAccelerateMax,\n});\n\nexport const SlideRelaxed = createPresenceComponentVariant(Slide, {\n duration: motionTokens.durationGentle,\n});\n"],"names":["motionTokens","createPresenceComponent","createPresenceComponentVariant","fadeAtom","slideAtom","slidePresenceFn","duration","durationNormal","easing","curveDecelerateMid","delay","exitDuration","exitEasing","curveAccelerateMid","exitDelay","fromX","fromY","toX","toY","animateOpacity","enterAtoms","direction","exitAtoms","push","enter","exit","Slide","SlideSnappy","curveDecelerateMax","curveAccelerateMax","SlideRelaxed","durationGentle"],"mappings":"AAAA,SACEA,YAAY,EACZC,uBAAuB,EAEvBC,8BAA8B,QACzB,yBAAyB;AAChC,SAASC,QAAQ,QAAQ,wBAAwB;AACjD,SAASC,SAAS,QAAQ,yBAAyB;AAGnD;;;;;;;;;;;;;;CAcC,GACD,MAAMC,kBAAiD,CAAC,EACtDC,WAAWN,aAAaO,cAAc,EACtCC,SAASR,aAAaS,kBAAkB,EACxCC,QAAQ,CAAC,EACTC,eAAeL,QAAQ,EACvBM,aAAaZ,aAAaa,kBAAkB,EAC5CC,YAAYJ,KAAK,EACjBK,QAAQ,KAAK,EACbC,QAAQ,MAAM,EACdC,MAAM,KAAK,EACXC,MAAM,KAAK,EACXC,iBAAiB,IAAI,EACT;IACZ,MAAMC,aAAa;QAAChB,UAAU;YAAEiB,WAAW;YAASf;YAAUE;YAAQE;YAAOK;YAAOC;YAAOC;YAAKC;QAAI;KAAG;IACvG,MAAMI,YAAY;QAChBlB,UAAU;YACRiB,WAAW;YACXf,UAAUK;YACVH,QAAQI;YACRF,OAAOI;YACPC;YACAC;YACAC;YACAC;QACF;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWG,IAAI,CAACpB,SAAS;YAAEkB,WAAW;YAASf;YAAUE;YAAQE;QAAM;QACvEY,UAAUC,IAAI,CAACpB,SAAS;YAAEkB,WAAW;YAAQf,UAAUK;YAAcH,QAAQI;YAAYF,OAAOI;QAAU;IAC5G;IAEA,OAAO;QACLU,OAAOJ;QACPK,MAAMH;IACR;AACF;AAEA,6EAA6E,GAC7E,OAAO,MAAMI,QAAQzB,wBAAwBI,iBAAiB;AAE9D,OAAO,MAAMsB,cAAczB,+BAA+BwB,OAAO;IAC/DlB,QAAQR,aAAa4B,kBAAkB;IACvChB,YAAYZ,aAAa6B,kBAAkB;AAC7C,GAAG;AAEH,OAAO,MAAMC,eAAe5B,+BAA+BwB,OAAO;IAChEpB,UAAUN,aAAa+B,cAAc;AACvC,GAAG"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Slide/slide-types.ts"],"sourcesContent":["import type { BasePresenceParams, AnimateOpacity } from '../../types';\n\nexport type SlideParams = BasePresenceParams &\n AnimateOpacity & {\n /** The X translate value with units to animate from. Defaults to `'0px'`. */\n fromX?: string;\n\n /** The Y translate value with units to animate from. Defaults to `'20px'`. */\n fromY?: string;\n };\n"],"names":[],"mappings":"AAEA,WAOI"}
1
+ {"version":3,"sources":["../src/components/Slide/slide-types.ts"],"sourcesContent":["import type { BasePresenceParams, AnimateOpacity } from '../../types';\n\nexport type SlideParams = BasePresenceParams &\n AnimateOpacity & {\n /** The X translate value with units to animate from. Defaults to `'0px'`. */\n fromX?: string;\n\n /** The Y translate value with units to animate from. Defaults to `'20px'`. */\n fromY?: string;\n\n /** The X translate value with units to animate to. Defaults to `'0px'`. */\n toX?: string;\n\n /** The Y translate value with units to animate to. Defaults to `'0px'`. */\n toY?: string;\n };\n"],"names":[],"mappings":"AAEA,WAaI"}
package/lib/index.js CHANGED
@@ -4,3 +4,9 @@ export { Scale, ScaleSnappy, ScaleRelaxed } from './components/Scale';
4
4
  export { Slide, SlideSnappy, SlideRelaxed } from './components/Slide';
5
5
  export { Blur } from './components/Blur';
6
6
  export { Rotate } from './components/Rotate';
7
+ // Motion Atoms
8
+ export { blurAtom } from './atoms/blur-atom';
9
+ export { fadeAtom } from './atoms/fade-atom';
10
+ export { rotateAtom } from './atoms/rotate-atom';
11
+ export { scaleAtom } from './atoms/scale-atom';
12
+ export { slideAtom } from './atoms/slide-atom'; // TODO: consider whether to export some or all collapse atoms
package/lib/index.js.map CHANGED
@@ -1 +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"}
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\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"}
@@ -9,13 +9,13 @@ Object.defineProperty(exports, "blurAtom", {
9
9
  }
10
10
  });
11
11
  const _reactmotion = require("@fluentui/react-motion");
12
- const blurAtom = ({ direction, duration, easing = _reactmotion.motionTokens.curveLinear, delay = 0, fromRadius = '10px' })=>{
12
+ const blurAtom = ({ direction, duration, easing = _reactmotion.motionTokens.curveLinear, delay = 0, fromRadius = '10px', toRadius = '0px' })=>{
13
13
  const keyframes = [
14
14
  {
15
15
  filter: `blur(${fromRadius})`
16
16
  },
17
17
  {
18
- filter: 'blur(0px)'
18
+ filter: `blur(${toRadius})`
19
19
  }
20
20
  ];
21
21
  if (direction === 'exit') {
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/atoms/blur-atom.ts"],"sourcesContent":["import { AtomMotion, motionTokens } from '@fluentui/react-motion';\nimport { BaseAtomParams } from '../types';\n\ninterface BlurAtomParams extends BaseAtomParams {\n fromRadius?: string;\n}\n\n/**\n * Generates a motion atom object for a blur-in or blur-out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromRadius - The blur radius value with units (e.g., '20px', '1rem'). Defaults to '20px'.\n * @param delay - Time (ms) to delay the animation. Defaults to 0.\n * @returns A motion atom object with filter blur keyframes and the supplied duration and easing.\n */\nexport const blurAtom = ({\n direction,\n duration,\n easing = motionTokens.curveLinear,\n delay = 0,\n fromRadius = '10px',\n}: BlurAtomParams): AtomMotion => {\n const keyframes = [{ filter: `blur(${fromRadius})` }, { filter: 'blur(0px)' }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n return {\n keyframes,\n duration,\n easing,\n delay,\n };\n};\n"],"names":["blurAtom","direction","duration","easing","motionTokens","curveLinear","delay","fromRadius","keyframes","filter","reverse"],"mappings":";;;;+BAgBaA;;;eAAAA;;;6BAhB4B;AAgBlC,MAAMA,WAAW,CAAC,EACvBC,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,WAAW,EACjCC,QAAQ,CAAC,EACTC,aAAa,MAAM,EACJ;IACf,MAAMC,YAAY;QAAC;YAAEC,QAAQ,CAAC,KAAK,EAAEF,WAAW,CAAC,CAAC;QAAC;QAAG;YAAEE,QAAQ;QAAY;KAAE;IAC9E,IAAIR,cAAc,QAAQ;QACxBO,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAN;QACAC;QACAG;IACF;AACF"}
1
+ {"version":3,"sources":["../src/atoms/blur-atom.ts"],"sourcesContent":["import { AtomMotion, motionTokens } from '@fluentui/react-motion';\nimport { BaseAtomParams } from '../types';\n\ninterface BlurAtomParams extends BaseAtomParams {\n fromRadius?: string;\n toRadius?: string;\n}\n\n/**\n * Generates a motion atom object for a blur-in or blur-out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromRadius - The blur radius value with units (e.g., '20px', '1rem'). Defaults to '10px'.\n * @param toRadius - The ending blur radius value with units (e.g., '0px', '5px'). Defaults to '0px'.\n * @param delay - Time (ms) to delay the animation. Defaults to 0.\n * @returns A motion atom object with filter blur keyframes and the supplied duration and easing.\n */\nexport const blurAtom = ({\n direction,\n duration,\n easing = motionTokens.curveLinear,\n delay = 0,\n fromRadius = '10px',\n toRadius = '0px',\n}: BlurAtomParams): AtomMotion => {\n const keyframes = [{ filter: `blur(${fromRadius})` }, { filter: `blur(${toRadius})` }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n return {\n keyframes,\n duration,\n easing,\n delay,\n };\n};\n"],"names":["blurAtom","direction","duration","easing","motionTokens","curveLinear","delay","fromRadius","toRadius","keyframes","filter","reverse"],"mappings":";;;;+BAkBaA;;;eAAAA;;;6BAlB4B;AAkBlC,MAAMA,WAAW,CAAC,EACvBC,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,WAAW,EACjCC,QAAQ,CAAC,EACTC,aAAa,MAAM,EACnBC,WAAW,KAAK,EACD;IACf,MAAMC,YAAY;QAAC;YAAEC,QAAQ,CAAC,KAAK,EAAEH,WAAW,CAAC,CAAC;QAAC;QAAG;YAAEG,QAAQ,CAAC,KAAK,EAAEF,SAAS,CAAC,CAAC;QAAC;KAAE;IACtF,IAAIP,cAAc,QAAQ;QACxBQ,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAP;QACAC;QACAG;IACF;AACF"}
@@ -9,13 +9,13 @@ Object.defineProperty(exports, "fadeAtom", {
9
9
  }
10
10
  });
11
11
  const _reactmotion = require("@fluentui/react-motion");
12
- const fadeAtom = ({ direction, duration, easing = _reactmotion.motionTokens.curveLinear, delay = 0, fromOpacity = 0 })=>{
12
+ const fadeAtom = ({ direction, duration, easing = _reactmotion.motionTokens.curveLinear, delay = 0, fromOpacity = 0, toOpacity = 1 })=>{
13
13
  const keyframes = [
14
14
  {
15
15
  opacity: fromOpacity
16
16
  },
17
17
  {
18
- opacity: 1
18
+ opacity: toOpacity
19
19
  }
20
20
  ];
21
21
  if (direction === 'exit') {
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/atoms/fade-atom.ts"],"sourcesContent":["import { AtomMotion, motionTokens } from '@fluentui/react-motion';\nimport { BaseAtomParams } from '../types';\n\ninterface FadeAtomParams extends BaseAtomParams {\n /** Defines how values are applied before and after execution. Defaults to 'both'. */\n fill?: FillMode;\n\n /** The starting opacity value. Defaults to 0. */\n fromOpacity?: number;\n}\n\n/**\n * Generates a motion atom object for a fade-in or fade-out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param delay - The delay before the motion starts. Defaults to 0.\n * @param fromOpacity - The starting opacity value. Defaults to 0.\n * @returns A motion atom object with opacity keyframes and the supplied duration and easing.\n */\nexport const fadeAtom = ({\n direction,\n duration,\n easing = motionTokens.curveLinear,\n delay = 0,\n fromOpacity = 0,\n}: FadeAtomParams): AtomMotion => {\n const keyframes = [{ opacity: fromOpacity }, { opacity: 1 }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n return {\n keyframes,\n duration,\n easing,\n delay,\n // Applying opacity backwards and forwards in time is important\n // to avoid a bug where a delayed animation is not hidden when it should be.\n fill: 'both',\n };\n};\n"],"names":["fadeAtom","direction","duration","easing","motionTokens","curveLinear","delay","fromOpacity","keyframes","opacity","reverse","fill"],"mappings":";;;;+BAoBaA;;;eAAAA;;;6BApB4B;AAoBlC,MAAMA,WAAW,CAAC,EACvBC,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,WAAW,EACjCC,QAAQ,CAAC,EACTC,cAAc,CAAC,EACA;IACf,MAAMC,YAAY;QAAC;YAAEC,SAASF;QAAY;QAAG;YAAEE,SAAS;QAAE;KAAE;IAC5D,IAAIR,cAAc,QAAQ;QACxBO,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAN;QACAC;QACAG;QACA,+DAA+D;QAC/D,4EAA4E;QAC5EK,MAAM;IACR;AACF"}
1
+ {"version":3,"sources":["../src/atoms/fade-atom.ts"],"sourcesContent":["import { AtomMotion, motionTokens } from '@fluentui/react-motion';\nimport { BaseAtomParams } from '../types';\n\ninterface FadeAtomParams extends BaseAtomParams {\n /** Defines how values are applied before and after execution. Defaults to 'both'. */\n fill?: FillMode;\n\n /** The starting opacity value. Defaults to 0. */\n fromOpacity?: number;\n\n /** The ending opacity value. Defaults to 1. */\n toOpacity?: number;\n}\n\n/**\n * Generates a motion atom object for a fade-in or fade-out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param delay - The delay before the motion starts. Defaults to 0.\n * @param fromOpacity - The starting opacity value. Defaults to 0.\n * @param toOpacity - The ending opacity value. Defaults to 1.\n * @returns A motion atom object with opacity keyframes and the supplied duration and easing.\n */\nexport const fadeAtom = ({\n direction,\n duration,\n easing = motionTokens.curveLinear,\n delay = 0,\n fromOpacity = 0,\n toOpacity = 1,\n}: FadeAtomParams): AtomMotion => {\n const keyframes = [{ opacity: fromOpacity }, { opacity: toOpacity }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n return {\n keyframes,\n duration,\n easing,\n delay,\n // Applying opacity backwards and forwards in time is important\n // to avoid a bug where a delayed animation is not hidden when it should be.\n fill: 'both',\n };\n};\n"],"names":["fadeAtom","direction","duration","easing","motionTokens","curveLinear","delay","fromOpacity","toOpacity","keyframes","opacity","reverse","fill"],"mappings":";;;;+BAwBaA;;;eAAAA;;;6BAxB4B;AAwBlC,MAAMA,WAAW,CAAC,EACvBC,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,WAAW,EACjCC,QAAQ,CAAC,EACTC,cAAc,CAAC,EACfC,YAAY,CAAC,EACE;IACf,MAAMC,YAAY;QAAC;YAAEC,SAASH;QAAY;QAAG;YAAEG,SAASF;QAAU;KAAE;IACpE,IAAIP,cAAc,QAAQ;QACxBQ,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAP;QACAC;QACAG;QACA,+DAA+D;QAC/D,4EAA4E;QAC5EM,MAAM;IACR;AACF"}
@@ -12,13 +12,7 @@ const _reactmotion = require("@fluentui/react-motion");
12
12
  const createRotateValue = (axis, angle)=>{
13
13
  return `${axis.toLowerCase()} ${angle}deg`;
14
14
  };
15
- const rotateAtom = ({ direction, duration, easing = _reactmotion.motionTokens.curveLinear, delay = 0, axis = 'y', angle = -90, exitAngle = -angle })=>{
16
- let fromAngle = angle;
17
- let toAngle = 0;
18
- if (direction === 'exit') {
19
- fromAngle = 0;
20
- toAngle = exitAngle;
21
- }
15
+ const rotateAtom = ({ direction, duration, easing = _reactmotion.motionTokens.curveLinear, delay = 0, axis = 'z', fromAngle = -90, toAngle = 0 })=>{
22
16
  const keyframes = [
23
17
  {
24
18
  rotate: createRotateValue(axis, fromAngle)
@@ -27,6 +21,9 @@ const rotateAtom = ({ direction, duration, easing = _reactmotion.motionTokens.cu
27
21
  rotate: createRotateValue(axis, toAngle)
28
22
  }
29
23
  ];
24
+ if (direction === 'exit') {
25
+ keyframes.reverse();
26
+ }
30
27
  return {
31
28
  keyframes,
32
29
  duration,
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/atoms/rotate-atom.ts"],"sourcesContent":["import { AtomMotion, motionTokens } from '@fluentui/react-motion';\nimport type { RotateParams } from '../components/Rotate/rotate-types';\nimport { BaseAtomParams } from '../types';\n\ntype Axis3D = NonNullable<RotateParams['axis']>;\n\ninterface RotateAtomParams extends BaseAtomParams {\n axis?: Axis3D;\n angle?: number;\n exitAngle?: number;\n}\n\nconst createRotateValue = (axis: Axis3D, angle: number): string => {\n return `${axis.toLowerCase()} ${angle}deg`;\n};\n\n/**\n * Generates a motion atom object for a rotation around a single axis.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param axis - The axis of rotation: 'x', 'y', or 'z'. Defaults to 'y'.\n * @param angle - The starting rotation angle in degrees. Defaults to -90.\n * @param exitAngle - The ending rotation angle in degrees. Defaults to the negation of `angle`.\n * @param delay - Time (ms) to delay the animation. Defaults to 0.\n * @returns A motion atom object with rotate keyframes and the supplied duration and easing.\n */\nexport const rotateAtom = ({\n direction,\n duration,\n easing = motionTokens.curveLinear,\n delay = 0,\n axis = 'y',\n angle = -90,\n exitAngle = -angle,\n}: RotateAtomParams): AtomMotion => {\n let fromAngle = angle;\n let toAngle = 0;\n\n if (direction === 'exit') {\n fromAngle = 0;\n toAngle = exitAngle;\n }\n const keyframes = [{ rotate: createRotateValue(axis, fromAngle) }, { rotate: createRotateValue(axis, toAngle) }];\n\n return {\n keyframes,\n duration,\n easing,\n delay,\n };\n};\n"],"names":["rotateAtom","createRotateValue","axis","angle","toLowerCase","direction","duration","easing","motionTokens","curveLinear","delay","exitAngle","fromAngle","toAngle","keyframes","rotate"],"mappings":";;;;+BA2BaA;;;eAAAA;;;6BA3B4B;AAYzC,MAAMC,oBAAoB,CAACC,MAAcC;IACvC,OAAO,GAAGD,KAAKE,WAAW,GAAG,CAAC,EAAED,MAAM,GAAG,CAAC;AAC5C;AAaO,MAAMH,aAAa,CAAC,EACzBK,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,WAAW,EACjCC,QAAQ,CAAC,EACTR,OAAO,GAAG,EACVC,QAAQ,CAAC,EAAE,EACXQ,YAAY,CAACR,KAAK,EACD;IACjB,IAAIS,YAAYT;IAChB,IAAIU,UAAU;IAEd,IAAIR,cAAc,QAAQ;QACxBO,YAAY;QACZC,UAAUF;IACZ;IACA,MAAMG,YAAY;QAAC;YAAEC,QAAQd,kBAAkBC,MAAMU;QAAW;QAAG;YAAEG,QAAQd,kBAAkBC,MAAMW;QAAS;KAAE;IAEhH,OAAO;QACLC;QACAR;QACAC;QACAG;IACF;AACF"}
1
+ {"version":3,"sources":["../src/atoms/rotate-atom.ts"],"sourcesContent":["import { AtomMotion, motionTokens } from '@fluentui/react-motion';\nimport type { RotateParams } from '../components/Rotate/rotate-types';\nimport { BaseAtomParams } from '../types';\n\ntype Axis3D = NonNullable<RotateParams['axis']>;\n\ninterface RotateAtomParams extends BaseAtomParams {\n axis?: Axis3D;\n fromAngle?: number;\n toAngle?: number;\n}\n\nconst createRotateValue = (axis: Axis3D, angle: number): string => {\n return `${axis.toLowerCase()} ${angle}deg`;\n};\n\n/**\n * Generates a motion atom object for a rotation around a single axis.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param axis - The axis of rotation: 'x', 'y', or 'z'. Defaults to 'y'.\n * @param fromAngle - The starting rotation angle in degrees. Defaults to -90.\n * @param toAngle - The ending rotation angle in degrees. Defaults to 0.\n * @param delay - Time (ms) to delay the animation. Defaults to 0.\n * @returns A motion atom object with rotate keyframes and the supplied duration and easing.\n */\nexport const rotateAtom = ({\n direction,\n duration,\n easing = motionTokens.curveLinear,\n delay = 0,\n axis = 'z',\n fromAngle = -90,\n toAngle = 0,\n}: RotateAtomParams): AtomMotion => {\n const keyframes = [{ rotate: createRotateValue(axis, fromAngle) }, { rotate: createRotateValue(axis, toAngle) }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n\n return {\n keyframes,\n duration,\n easing,\n delay,\n };\n};\n"],"names":["rotateAtom","createRotateValue","axis","angle","toLowerCase","direction","duration","easing","motionTokens","curveLinear","delay","fromAngle","toAngle","keyframes","rotate","reverse"],"mappings":";;;;+BA2BaA;;;eAAAA;;;6BA3B4B;AAYzC,MAAMC,oBAAoB,CAACC,MAAcC;IACvC,OAAO,GAAGD,KAAKE,WAAW,GAAG,CAAC,EAAED,MAAM,GAAG,CAAC;AAC5C;AAaO,MAAMH,aAAa,CAAC,EACzBK,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,WAAW,EACjCC,QAAQ,CAAC,EACTR,OAAO,GAAG,EACVS,YAAY,CAAC,EAAE,EACfC,UAAU,CAAC,EACM;IACjB,MAAMC,YAAY;QAAC;YAAEC,QAAQb,kBAAkBC,MAAMS;QAAW;QAAG;YAAEG,QAAQb,kBAAkBC,MAAMU;QAAS;KAAE;IAChH,IAAIP,cAAc,QAAQ;QACxBQ,UAAUE,OAAO;IACnB;IAEA,OAAO;QACLF;QACAP;QACAC;QACAG;IACF;AACF"}
@@ -9,13 +9,13 @@ Object.defineProperty(exports, "slideAtom", {
9
9
  }
10
10
  });
11
11
  const _reactmotion = require("@fluentui/react-motion");
12
- const slideAtom = ({ direction, duration, easing = _reactmotion.motionTokens.curveLinear, delay = 0, fromX = '0px', fromY = '20px' })=>{
12
+ const slideAtom = ({ direction, duration, easing = _reactmotion.motionTokens.curveLinear, delay = 0, fromX = '0px', fromY = '0px', toX = '0px', toY = '0px' })=>{
13
13
  const keyframes = [
14
14
  {
15
15
  translate: `${fromX} ${fromY}`
16
16
  },
17
17
  {
18
- translate: '0px 0px'
18
+ translate: `${toX} ${toY}`
19
19
  }
20
20
  ];
21
21
  if (direction === 'exit') {
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/atoms/slide-atom.ts"],"sourcesContent":["import { AtomMotion, motionTokens } from '@fluentui/react-motion';\nimport { BaseAtomParams } from '../types';\n\ninterface SlideAtomParams extends BaseAtomParams {\n fromX?: string;\n fromY?: string;\n}\n\n/**\n * Generates a motion atom object for a slide-in or slide-out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromX - The starting X translate value with units (e.g., '0px', '100%'). Defaults to '0px'.\n * @param fromY - The starting Y translate value with units (e.g., '-20px', '100%'). Defaults to '0px'.\n * @param delay - Time (ms) to delay the animation. Defaults to 0.\n * @returns A motion atom object with translate keyframes and the supplied duration and easing.\n */\nexport const slideAtom = ({\n direction,\n duration,\n easing = motionTokens.curveLinear,\n delay = 0,\n fromX = '0px',\n fromY = '20px',\n}: SlideAtomParams): AtomMotion => {\n const keyframes = [{ translate: `${fromX} ${fromY}` }, { translate: '0px 0px' }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n return {\n keyframes,\n duration,\n easing,\n delay,\n };\n};\n"],"names":["slideAtom","direction","duration","easing","motionTokens","curveLinear","delay","fromX","fromY","keyframes","translate","reverse"],"mappings":";;;;+BAkBaA;;;eAAAA;;;6BAlB4B;AAkBlC,MAAMA,YAAY,CAAC,EACxBC,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,WAAW,EACjCC,QAAQ,CAAC,EACTC,QAAQ,KAAK,EACbC,QAAQ,MAAM,EACE;IAChB,MAAMC,YAAY;QAAC;YAAEC,WAAW,GAAGH,MAAM,CAAC,EAAEC,OAAO;QAAC;QAAG;YAAEE,WAAW;QAAU;KAAE;IAChF,IAAIT,cAAc,QAAQ;QACxBQ,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAP;QACAC;QACAG;IACF;AACF"}
1
+ {"version":3,"sources":["../src/atoms/slide-atom.ts"],"sourcesContent":["import { AtomMotion, motionTokens } from '@fluentui/react-motion';\nimport { BaseAtomParams } from '../types';\n\ninterface SlideAtomParams extends BaseAtomParams {\n fromX?: string;\n fromY?: string;\n toX?: string;\n toY?: string;\n}\n\n/**\n * Generates a motion atom object for a slide-in or slide-out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromX - The starting X translate value with units (e.g., '50px', '100%'). Defaults to '0px'.\n * @param fromY - The starting Y translate value with units (e.g., '50px', '100%'). Defaults to '0px'.\n * @param toX - The ending X translate value with units (e.g.'5px', '10%'). Defaults to '0px'.\n * @param toY - The ending Y translate value with units (e.g., '5px', '10%'). Defaults to '0px'.\n * @param delay - Time (ms) to delay the animation. Defaults to 0.\n * @returns A motion atom object with translate keyframes and the supplied duration and easing.\n */\nexport const slideAtom = ({\n direction,\n duration,\n easing = motionTokens.curveLinear,\n delay = 0,\n fromX = '0px',\n fromY = '0px',\n toX = '0px',\n toY = '0px',\n}: SlideAtomParams): AtomMotion => {\n const keyframes = [{ translate: `${fromX} ${fromY}` }, { translate: `${toX} ${toY}` }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n return {\n keyframes,\n duration,\n easing,\n delay,\n };\n};\n"],"names":["slideAtom","direction","duration","easing","motionTokens","curveLinear","delay","fromX","fromY","toX","toY","keyframes","translate","reverse"],"mappings":";;;;+BAsBaA;;;eAAAA;;;6BAtB4B;AAsBlC,MAAMA,YAAY,CAAC,EACxBC,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,WAAW,EACjCC,QAAQ,CAAC,EACTC,QAAQ,KAAK,EACbC,QAAQ,KAAK,EACbC,MAAM,KAAK,EACXC,MAAM,KAAK,EACK;IAChB,MAAMC,YAAY;QAAC;YAAEC,WAAW,GAAGL,MAAM,CAAC,EAAEC,OAAO;QAAC;QAAG;YAAEI,WAAW,GAAGH,IAAI,CAAC,EAAEC,KAAK;QAAC;KAAE;IACtF,IAAIT,cAAc,QAAQ;QACxBU,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAT;QACAC;QACAG;IACF;AACF"}
@@ -21,15 +21,17 @@ const _bluratom = require("../../atoms/blur-atom");
21
21
  * @param exitEasing - Easing curve for the exit transition (blur-out). Defaults to the `curveAccelerateMin` value.
22
22
  * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.
23
23
  * @param fromRadius - The blur radius with units to animate from. Defaults to `'10px'`.
24
+ * @param toRadius - The blur radius with units to animate to. Defaults to `'0px'`.
24
25
  * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.
25
- */ const blurPresenceFn = ({ duration = _reactmotion.motionTokens.durationSlow, easing = _reactmotion.motionTokens.curveDecelerateMin, delay = 0, exitDuration = duration, exitEasing = _reactmotion.motionTokens.curveAccelerateMin, exitDelay = delay, fromRadius = '10px', animateOpacity = true })=>{
26
+ */ const blurPresenceFn = ({ duration = _reactmotion.motionTokens.durationSlow, easing = _reactmotion.motionTokens.curveDecelerateMin, delay = 0, exitDuration = duration, exitEasing = _reactmotion.motionTokens.curveAccelerateMin, exitDelay = delay, fromRadius = '10px', toRadius = '0px', animateOpacity = true })=>{
26
27
  const enterAtoms = [
27
28
  (0, _bluratom.blurAtom)({
28
29
  direction: 'enter',
29
30
  duration,
30
31
  easing,
31
32
  delay,
32
- fromRadius
33
+ fromRadius,
34
+ toRadius
33
35
  })
34
36
  ];
35
37
  const exitAtoms = [
@@ -38,7 +40,8 @@ const _bluratom = require("../../atoms/blur-atom");
38
40
  duration: exitDuration,
39
41
  easing: exitEasing,
40
42
  delay: exitDelay,
41
- fromRadius
43
+ fromRadius,
44
+ toRadius
42
45
  })
43
46
  ];
44
47
  // Only add fade atoms if animateOpacity is true.
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Blur/Blur.ts"],"sourcesContent":["import { motionTokens, createPresenceComponent, PresenceMotionFn } from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { blurAtom } from '../../atoms/blur-atom';\nimport { BlurParams } from './blur-types';\n\n/**\n * Define a presence motion for blur in/out\n *\n * @param duration - Time (ms) for the enter transition (blur-in). Defaults to the `durationSlow` value (300 ms).\n * @param easing - Easing curve for the enter transition (blur-in). Defaults to the `curveDecelerateMin` value.\n * @param delay - Time (ms) to delay the enter transition. Defaults to 0.\n * @param exitDuration - Time (ms) for the exit transition (blur-out). Defaults to the `duration` param for symmetry.\n * @param exitEasing - Easing curve for the exit transition (blur-out). Defaults to the `curveAccelerateMin` value.\n * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param fromRadius - The blur radius with units to animate from. Defaults to `'10px'`.\n * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.\n */\nconst blurPresenceFn: PresenceMotionFn<BlurParams> = ({\n duration = motionTokens.durationSlow,\n easing = motionTokens.curveDecelerateMin,\n delay = 0,\n exitDuration = duration,\n exitEasing = motionTokens.curveAccelerateMin,\n exitDelay = delay,\n fromRadius = '10px',\n animateOpacity = true,\n}) => {\n const enterAtoms = [blurAtom({ direction: 'enter', duration, easing, delay, fromRadius })];\n const exitAtoms = [\n blurAtom({\n direction: 'exit',\n duration: exitDuration,\n easing: exitEasing,\n delay: exitDelay,\n fromRadius,\n }),\n ];\n\n // Only add fade atoms if animateOpacity is true.\n if (animateOpacity) {\n enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing, delay }));\n exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing, delay: exitDelay }));\n }\n\n return {\n enter: enterAtoms,\n exit: exitAtoms,\n };\n};\n\n/** A React component that applies blur in/out transitions to its children. */\nexport const Blur = createPresenceComponent(blurPresenceFn);\n"],"names":["Blur","blurPresenceFn","duration","motionTokens","durationSlow","easing","curveDecelerateMin","delay","exitDuration","exitEasing","curveAccelerateMin","exitDelay","fromRadius","animateOpacity","enterAtoms","blurAtom","direction","exitAtoms","push","fadeAtom","enter","exit","createPresenceComponent"],"mappings":";;;;+BAmDaA;;;eAAAA;;;6BAnD2D;0BAC/C;0BACA;AAGzB;;;;;;;;;;;CAWC,GACD,MAAMC,iBAA+C,CAAC,EACpDC,WAAWC,yBAAY,CAACC,YAAY,EACpCC,SAASF,yBAAY,CAACG,kBAAkB,EACxCC,QAAQ,CAAC,EACTC,eAAeN,QAAQ,EACvBO,aAAaN,yBAAY,CAACO,kBAAkB,EAC5CC,YAAYJ,KAAK,EACjBK,aAAa,MAAM,EACnBC,iBAAiB,IAAI,EACtB;IACC,MAAMC,aAAa;QAACC,IAAAA,kBAAQ,EAAC;YAAEC,WAAW;YAASd;YAAUG;YAAQE;YAAOK;QAAW;KAAG;IAC1F,MAAMK,YAAY;QAChBF,IAAAA,kBAAQ,EAAC;YACPC,WAAW;YACXd,UAAUM;YACVH,QAAQI;YACRF,OAAOI;YACPC;QACF;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWI,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAASd;YAAUG;YAAQE;QAAM;QACvEU,UAAUC,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAQd,UAAUM;YAAcH,QAAQI;YAAYF,OAAOI;QAAU;IAC5G;IAEA,OAAO;QACLS,OAAON;QACPO,MAAMJ;IACR;AACF;AAGO,MAAMjB,OAAOsB,IAAAA,oCAAuB,EAACrB"}
1
+ {"version":3,"sources":["../src/components/Blur/Blur.ts"],"sourcesContent":["import { motionTokens, createPresenceComponent, PresenceMotionFn } from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { blurAtom } from '../../atoms/blur-atom';\nimport { BlurParams } from './blur-types';\n\n/**\n * Define a presence motion for blur in/out\n *\n * @param duration - Time (ms) for the enter transition (blur-in). Defaults to the `durationSlow` value (300 ms).\n * @param easing - Easing curve for the enter transition (blur-in). Defaults to the `curveDecelerateMin` value.\n * @param delay - Time (ms) to delay the enter transition. Defaults to 0.\n * @param exitDuration - Time (ms) for the exit transition (blur-out). Defaults to the `duration` param for symmetry.\n * @param exitEasing - Easing curve for the exit transition (blur-out). Defaults to the `curveAccelerateMin` value.\n * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param fromRadius - The blur radius with units to animate from. Defaults to `'10px'`.\n * @param toRadius - The blur radius with units to animate to. Defaults to `'0px'`.\n * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.\n */\nconst blurPresenceFn: PresenceMotionFn<BlurParams> = ({\n duration = motionTokens.durationSlow,\n easing = motionTokens.curveDecelerateMin,\n delay = 0,\n exitDuration = duration,\n exitEasing = motionTokens.curveAccelerateMin,\n exitDelay = delay,\n fromRadius = '10px',\n toRadius = '0px',\n animateOpacity = true,\n}) => {\n const enterAtoms = [blurAtom({ direction: 'enter', duration, easing, delay, fromRadius, toRadius })];\n const exitAtoms = [\n blurAtom({\n direction: 'exit',\n duration: exitDuration,\n easing: exitEasing,\n delay: exitDelay,\n fromRadius,\n toRadius,\n }),\n ];\n\n // Only add fade atoms if animateOpacity is true.\n if (animateOpacity) {\n enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing, delay }));\n exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing, delay: exitDelay }));\n }\n\n return {\n enter: enterAtoms,\n exit: exitAtoms,\n };\n};\n\n/** A React component that applies blur in/out transitions to its children. */\nexport const Blur = createPresenceComponent(blurPresenceFn);\n"],"names":["Blur","blurPresenceFn","duration","motionTokens","durationSlow","easing","curveDecelerateMin","delay","exitDuration","exitEasing","curveAccelerateMin","exitDelay","fromRadius","toRadius","animateOpacity","enterAtoms","blurAtom","direction","exitAtoms","push","fadeAtom","enter","exit","createPresenceComponent"],"mappings":";;;;+BAsDaA;;;eAAAA;;;6BAtD2D;0BAC/C;0BACA;AAGzB;;;;;;;;;;;;CAYC,GACD,MAAMC,iBAA+C,CAAC,EACpDC,WAAWC,yBAAY,CAACC,YAAY,EACpCC,SAASF,yBAAY,CAACG,kBAAkB,EACxCC,QAAQ,CAAC,EACTC,eAAeN,QAAQ,EACvBO,aAAaN,yBAAY,CAACO,kBAAkB,EAC5CC,YAAYJ,KAAK,EACjBK,aAAa,MAAM,EACnBC,WAAW,KAAK,EAChBC,iBAAiB,IAAI,EACtB;IACC,MAAMC,aAAa;QAACC,IAAAA,kBAAQ,EAAC;YAAEC,WAAW;YAASf;YAAUG;YAAQE;YAAOK;YAAYC;QAAS;KAAG;IACpG,MAAMK,YAAY;QAChBF,IAAAA,kBAAQ,EAAC;YACPC,WAAW;YACXf,UAAUM;YACVH,QAAQI;YACRF,OAAOI;YACPC;YACAC;QACF;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWI,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAASf;YAAUG;YAAQE;QAAM;QACvEW,UAAUC,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAQf,UAAUM;YAAcH,QAAQI;YAAYF,OAAOI;QAAU;IAC5G;IAEA,OAAO;QACLU,OAAON;QACPO,MAAMJ;IACR;AACF;AAGO,MAAMlB,OAAOuB,IAAAA,oCAAuB,EAACtB"}
@@ -24,19 +24,23 @@ _export(exports, {
24
24
  });
25
25
  const _reactmotion = require("@fluentui/react-motion");
26
26
  const _fadeatom = require("../../atoms/fade-atom");
27
- const fadePresenceFn = ({ duration = _reactmotion.motionTokens.durationNormal, easing = _reactmotion.motionTokens.curveEasyEase, delay = 0, exitDuration = duration, exitEasing = easing, exitDelay = delay })=>{
27
+ const fadePresenceFn = ({ duration = _reactmotion.motionTokens.durationNormal, easing = _reactmotion.motionTokens.curveEasyEase, delay = 0, exitDuration = duration, exitEasing = easing, exitDelay = delay, fromOpacity = 0, toOpacity = 1 })=>{
28
28
  return {
29
29
  enter: (0, _fadeatom.fadeAtom)({
30
30
  direction: 'enter',
31
31
  duration,
32
32
  easing,
33
- delay
33
+ delay,
34
+ fromOpacity,
35
+ toOpacity
34
36
  }),
35
37
  exit: (0, _fadeatom.fadeAtom)({
36
38
  direction: 'exit',
37
39
  duration: exitDuration,
38
40
  easing: exitEasing,
39
- delay: exitDelay
41
+ delay: exitDelay,
42
+ fromOpacity,
43
+ toOpacity
40
44
  })
41
45
  };
42
46
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Fade/Fade.ts"],"sourcesContent":["import {\n motionTokens,\n createPresenceComponent,\n PresenceMotionFn,\n createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { FadeParams } from './fade-types';\n\n/**\n * Define a presence motion for fade in/out\n *\n * @param duration - Time (ms) for the enter transition (fade-in). Defaults to the `durationNormal` value (200 ms).\n * @param easing - Easing curve for the enter transition (fade-in). Defaults to the `curveEasyEase` value.\n * @param delay - Time (ms) to delay the enter transition. Defaults to 0.\n * @param exitDuration - Time (ms) for the exit transition (fade-out). Defaults to the `duration` param for symmetry.\n * @param exitEasing - Easing curve for the exit transition (fade-out). Defaults to the `easing` param for symmetry.\n * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n */\nexport const fadePresenceFn: PresenceMotionFn<FadeParams> = ({\n duration = motionTokens.durationNormal,\n easing = motionTokens.curveEasyEase,\n delay = 0,\n exitDuration = duration,\n exitEasing = easing,\n exitDelay = delay,\n}) => {\n return {\n enter: fadeAtom({ direction: 'enter', duration, easing, delay }),\n exit: fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing, delay: exitDelay }),\n };\n};\n\n/** A React component that applies fade in/out transitions to its children. */\nexport const Fade = createPresenceComponent(fadePresenceFn);\n\nexport const FadeSnappy = createPresenceComponentVariant(Fade, { duration: motionTokens.durationFast });\n\nexport const FadeRelaxed = createPresenceComponentVariant(Fade, { duration: motionTokens.durationGentle });\n"],"names":["Fade","FadeRelaxed","FadeSnappy","fadePresenceFn","duration","motionTokens","durationNormal","easing","curveEasyEase","delay","exitDuration","exitEasing","exitDelay","enter","fadeAtom","direction","exit","createPresenceComponent","createPresenceComponentVariant","durationFast","durationGentle"],"mappings":";;;;;;;;;;;IAkCaA,IAAI;eAAJA;;IAIAC,WAAW;eAAXA;;IAFAC,UAAU;eAAVA;;IAjBAC,cAAc;eAAdA;;;6BAdN;0BACkB;AAalB,MAAMA,iBAA+C,CAAC,EAC3DC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,aAAa,EACnCC,QAAQ,CAAC,EACTC,eAAeN,QAAQ,EACvBO,aAAaJ,MAAM,EACnBK,YAAYH,KAAK,EAClB;IACC,OAAO;QACLI,OAAOC,IAAAA,kBAAQ,EAAC;YAAEC,WAAW;YAASX;YAAUG;YAAQE;QAAM;QAC9DO,MAAMF,IAAAA,kBAAQ,EAAC;YAAEC,WAAW;YAAQX,UAAUM;YAAcH,QAAQI;YAAYF,OAAOG;QAAU;IACnG;AACF;AAGO,MAAMZ,OAAOiB,IAAAA,oCAAuB,EAACd;AAErC,MAAMD,aAAagB,IAAAA,2CAA8B,EAAClB,MAAM;IAAEI,UAAUC,yBAAY,CAACc,YAAY;AAAC;AAE9F,MAAMlB,cAAciB,IAAAA,2CAA8B,EAAClB,MAAM;IAAEI,UAAUC,yBAAY,CAACe,cAAc;AAAC"}
1
+ {"version":3,"sources":["../src/components/Fade/Fade.ts"],"sourcesContent":["import {\n motionTokens,\n createPresenceComponent,\n PresenceMotionFn,\n createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { FadeParams } from './fade-types';\n\n/**\n * Define a presence motion for fade in/out\n *\n * @param duration - Time (ms) for the enter transition (fade-in). Defaults to the `durationNormal` value (200 ms).\n * @param easing - Easing curve for the enter transition (fade-in). Defaults to the `curveEasyEase` value.\n * @param delay - Time (ms) to delay the enter transition. Defaults to 0.\n * @param exitDuration - Time (ms) for the exit transition (fade-out). Defaults to the `duration` param for symmetry.\n * @param exitEasing - Easing curve for the exit transition (fade-out). Defaults to the `easing` param for symmetry.\n * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param fromOpacity - The starting opacity value. Defaults to 0.\n * @param toOpacity - The ending opacity value. Defaults to 1.\n */\nexport const fadePresenceFn: PresenceMotionFn<FadeParams> = ({\n duration = motionTokens.durationNormal,\n easing = motionTokens.curveEasyEase,\n delay = 0,\n exitDuration = duration,\n exitEasing = easing,\n exitDelay = delay,\n fromOpacity = 0,\n toOpacity = 1,\n}) => {\n return {\n enter: fadeAtom({ direction: 'enter', duration, easing, delay, fromOpacity, toOpacity }),\n exit: fadeAtom({\n direction: 'exit',\n duration: exitDuration,\n easing: exitEasing,\n delay: exitDelay,\n fromOpacity,\n toOpacity,\n }),\n };\n};\n\n/** A React component that applies fade in/out transitions to its children. */\nexport const Fade = createPresenceComponent(fadePresenceFn);\n\nexport const FadeSnappy = createPresenceComponentVariant(Fade, { duration: motionTokens.durationFast });\n\nexport const FadeRelaxed = createPresenceComponentVariant(Fade, { duration: motionTokens.durationGentle });\n"],"names":["Fade","FadeRelaxed","FadeSnappy","fadePresenceFn","duration","motionTokens","durationNormal","easing","curveEasyEase","delay","exitDuration","exitEasing","exitDelay","fromOpacity","toOpacity","enter","fadeAtom","direction","exit","createPresenceComponent","createPresenceComponentVariant","durationFast","durationGentle"],"mappings":";;;;;;;;;;;IA6CaA,IAAI;eAAJA;;IAIAC,WAAW;eAAXA;;IAFAC,UAAU;eAAVA;;IA1BAC,cAAc;eAAdA;;;6BAhBN;0BACkB;AAelB,MAAMA,iBAA+C,CAAC,EAC3DC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,aAAa,EACnCC,QAAQ,CAAC,EACTC,eAAeN,QAAQ,EACvBO,aAAaJ,MAAM,EACnBK,YAAYH,KAAK,EACjBI,cAAc,CAAC,EACfC,YAAY,CAAC,EACd;IACC,OAAO;QACLC,OAAOC,IAAAA,kBAAQ,EAAC;YAAEC,WAAW;YAASb;YAAUG;YAAQE;YAAOI;YAAaC;QAAU;QACtFI,MAAMF,IAAAA,kBAAQ,EAAC;YACbC,WAAW;YACXb,UAAUM;YACVH,QAAQI;YACRF,OAAOG;YACPC;YACAC;QACF;IACF;AACF;AAGO,MAAMd,OAAOmB,IAAAA,oCAAuB,EAAChB;AAErC,MAAMD,aAAakB,IAAAA,2CAA8B,EAACpB,MAAM;IAAEI,UAAUC,yBAAY,CAACgB,YAAY;AAAC;AAE9F,MAAMpB,cAAcmB,IAAAA,2CAA8B,EAACpB,MAAM;IAAEI,UAAUC,yBAAY,CAACiB,cAAc;AAAC"}
@@ -20,11 +20,11 @@ const _rotateatom = require("../../atoms/rotate-atom");
20
20
  * @param exitDuration - Time (ms) for the exit transition (rotate-out). Defaults to the `duration` param for symmetry.
21
21
  * @param exitEasing - Easing curve for the exit transition (rotate-out). Defaults to the `curveAccelerateMax` value.
22
22
  * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.
23
- * @param axis - The axis of rotation: 'x', 'y', or 'z'. Defaults to 'y'.
24
- * @param angle - The starting rotation angle in degrees. Defaults to -90.
25
- * @param exitAngle - The ending rotation angle in degrees. Defaults to the negation of `angle`.
23
+ * @param axis - The axis of rotation: 'x', 'y', or 'z'. Defaults to 'z'.
24
+ * @param fromAngle - The starting rotation angle in degrees. Defaults to -90.
25
+ * @param toAngle - The ending rotation angle in degrees. Defaults to 0.
26
26
  * @param animateOpacity - Whether to animate the opacity during the rotation. Defaults to `true`.
27
- */ const rotatePresenceFn = ({ duration = _reactmotion.motionTokens.durationGentle, easing = _reactmotion.motionTokens.curveDecelerateMax, delay = 0, exitDuration = duration, exitEasing = _reactmotion.motionTokens.curveAccelerateMax, exitDelay = delay, axis = 'y', angle = -90, exitAngle = -angle, animateOpacity = true })=>{
27
+ */ const rotatePresenceFn = ({ duration = _reactmotion.motionTokens.durationGentle, easing = _reactmotion.motionTokens.curveDecelerateMax, delay = 0, exitDuration = duration, exitEasing = _reactmotion.motionTokens.curveAccelerateMax, exitDelay = delay, axis = 'z', fromAngle = -90, toAngle = 0, animateOpacity = true })=>{
28
28
  const enterAtoms = [
29
29
  (0, _rotateatom.rotateAtom)({
30
30
  direction: 'enter',
@@ -32,8 +32,8 @@ const _rotateatom = require("../../atoms/rotate-atom");
32
32
  easing,
33
33
  delay,
34
34
  axis,
35
- angle,
36
- exitAngle
35
+ fromAngle,
36
+ toAngle
37
37
  })
38
38
  ];
39
39
  const exitAtoms = [
@@ -43,8 +43,8 @@ const _rotateatom = require("../../atoms/rotate-atom");
43
43
  easing: exitEasing,
44
44
  delay: exitDelay,
45
45
  axis,
46
- angle,
47
- exitAngle
46
+ fromAngle,
47
+ toAngle
48
48
  })
49
49
  ];
50
50
  if (animateOpacity) {
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Rotate/Rotate.ts"],"sourcesContent":["import { AtomMotion, createPresenceComponent, motionTokens, PresenceMotionFn } from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { rotateAtom } from '../../atoms/rotate-atom';\nimport { RotateParams } from './rotate-types';\n\n/**\n * Define a presence motion for rotate in/out\n *\n * @param duration - Time (ms) for the enter transition (rotate-in). Defaults to the `durationGentle` value.\n * @param easing - Easing curve for the enter transition (rotate-in). Defaults to the `curveDecelerateMax` value.\n * @param delay - Time (ms) to delay the enter transition. Defaults to 0.\n * @param exitDuration - Time (ms) for the exit transition (rotate-out). Defaults to the `duration` param for symmetry.\n * @param exitEasing - Easing curve for the exit transition (rotate-out). Defaults to the `curveAccelerateMax` value.\n * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param axis - The axis of rotation: 'x', 'y', or 'z'. Defaults to 'y'.\n * @param angle - The starting rotation angle in degrees. Defaults to -90.\n * @param exitAngle - The ending rotation angle in degrees. Defaults to the negation of `angle`.\n * @param animateOpacity - Whether to animate the opacity during the rotation. Defaults to `true`.\n */\nconst rotatePresenceFn: PresenceMotionFn<RotateParams> = ({\n duration = motionTokens.durationGentle,\n easing = motionTokens.curveDecelerateMax,\n delay = 0,\n exitDuration = duration,\n exitEasing = motionTokens.curveAccelerateMax,\n exitDelay = delay,\n axis = 'y',\n angle = -90,\n exitAngle = -angle,\n animateOpacity = true,\n}: RotateParams) => {\n const enterAtoms: AtomMotion[] = [\n rotateAtom({\n direction: 'enter',\n duration,\n easing,\n delay,\n axis,\n angle,\n exitAngle,\n }),\n ];\n\n const exitAtoms: AtomMotion[] = [\n rotateAtom({\n direction: 'exit',\n duration: exitDuration,\n easing: exitEasing,\n delay: exitDelay,\n axis,\n angle,\n exitAngle,\n }),\n ];\n\n if (animateOpacity) {\n enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing, delay }));\n exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing, delay: exitDelay }));\n }\n\n return {\n enter: enterAtoms,\n exit: exitAtoms,\n };\n};\n\n// Create a presence motion component to rotate an element around a single axis (x, y, or z).\nexport const Rotate = createPresenceComponent(rotatePresenceFn);\n"],"names":["Rotate","rotatePresenceFn","duration","motionTokens","durationGentle","easing","curveDecelerateMax","delay","exitDuration","exitEasing","curveAccelerateMax","exitDelay","axis","angle","exitAngle","animateOpacity","enterAtoms","rotateAtom","direction","exitAtoms","push","fadeAtom","enter","exit","createPresenceComponent"],"mappings":";;;;+BAmEaA;;;eAAAA;;;6BAnEuE;0BAC3D;4BACE;AAG3B;;;;;;;;;;;;;CAaC,GACD,MAAMC,mBAAmD,CAAC,EACxDC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,kBAAkB,EACxCC,QAAQ,CAAC,EACTC,eAAeN,QAAQ,EACvBO,aAAaN,yBAAY,CAACO,kBAAkB,EAC5CC,YAAYJ,KAAK,EACjBK,OAAO,GAAG,EACVC,QAAQ,CAAC,EAAE,EACXC,YAAY,CAACD,KAAK,EAClBE,iBAAiB,IAAI,EACR;IACb,MAAMC,aAA2B;QAC/BC,IAAAA,sBAAU,EAAC;YACTC,WAAW;YACXhB;YACAG;YACAE;YACAK;YACAC;YACAC;QACF;KACD;IAED,MAAMK,YAA0B;QAC9BF,IAAAA,sBAAU,EAAC;YACTC,WAAW;YACXhB,UAAUM;YACVH,QAAQI;YACRF,OAAOI;YACPC;YACAC;YACAC;QACF;KACD;IAED,IAAIC,gBAAgB;QAClBC,WAAWI,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAShB;YAAUG;YAAQE;QAAM;QACvEY,UAAUC,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAQhB,UAAUM;YAAcH,QAAQI;YAAYF,OAAOI;QAAU;IAC5G;IAEA,OAAO;QACLW,OAAON;QACPO,MAAMJ;IACR;AACF;AAGO,MAAMnB,SAASwB,IAAAA,oCAAuB,EAACvB"}
1
+ {"version":3,"sources":["../src/components/Rotate/Rotate.ts"],"sourcesContent":["import { AtomMotion, createPresenceComponent, motionTokens, PresenceMotionFn } from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { rotateAtom } from '../../atoms/rotate-atom';\nimport { RotateParams } from './rotate-types';\n\n/**\n * Define a presence motion for rotate in/out\n *\n * @param duration - Time (ms) for the enter transition (rotate-in). Defaults to the `durationGentle` value.\n * @param easing - Easing curve for the enter transition (rotate-in). Defaults to the `curveDecelerateMax` value.\n * @param delay - Time (ms) to delay the enter transition. Defaults to 0.\n * @param exitDuration - Time (ms) for the exit transition (rotate-out). Defaults to the `duration` param for symmetry.\n * @param exitEasing - Easing curve for the exit transition (rotate-out). Defaults to the `curveAccelerateMax` value.\n * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param axis - The axis of rotation: 'x', 'y', or 'z'. Defaults to 'z'.\n * @param fromAngle - The starting rotation angle in degrees. Defaults to -90.\n * @param toAngle - The ending rotation angle in degrees. Defaults to 0.\n * @param animateOpacity - Whether to animate the opacity during the rotation. Defaults to `true`.\n */\nconst rotatePresenceFn: PresenceMotionFn<RotateParams> = ({\n duration = motionTokens.durationGentle,\n easing = motionTokens.curveDecelerateMax,\n delay = 0,\n exitDuration = duration,\n exitEasing = motionTokens.curveAccelerateMax,\n exitDelay = delay,\n axis = 'z',\n fromAngle = -90,\n toAngle = 0,\n animateOpacity = true,\n}: RotateParams) => {\n const enterAtoms: AtomMotion[] = [\n rotateAtom({\n direction: 'enter',\n duration,\n easing,\n delay,\n axis,\n fromAngle,\n toAngle,\n }),\n ];\n\n const exitAtoms: AtomMotion[] = [\n rotateAtom({\n direction: 'exit',\n duration: exitDuration,\n easing: exitEasing,\n delay: exitDelay,\n axis,\n fromAngle,\n toAngle,\n }),\n ];\n\n if (animateOpacity) {\n enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing, delay }));\n exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing, delay: exitDelay }));\n }\n\n return {\n enter: enterAtoms,\n exit: exitAtoms,\n };\n};\n\n// Create a presence motion component to rotate an element around a single axis (x, y, or z).\nexport const Rotate = createPresenceComponent(rotatePresenceFn);\n"],"names":["Rotate","rotatePresenceFn","duration","motionTokens","durationGentle","easing","curveDecelerateMax","delay","exitDuration","exitEasing","curveAccelerateMax","exitDelay","axis","fromAngle","toAngle","animateOpacity","enterAtoms","rotateAtom","direction","exitAtoms","push","fadeAtom","enter","exit","createPresenceComponent"],"mappings":";;;;+BAmEaA;;;eAAAA;;;6BAnEuE;0BAC3D;4BACE;AAG3B;;;;;;;;;;;;;CAaC,GACD,MAAMC,mBAAmD,CAAC,EACxDC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,kBAAkB,EACxCC,QAAQ,CAAC,EACTC,eAAeN,QAAQ,EACvBO,aAAaN,yBAAY,CAACO,kBAAkB,EAC5CC,YAAYJ,KAAK,EACjBK,OAAO,GAAG,EACVC,YAAY,CAAC,EAAE,EACfC,UAAU,CAAC,EACXC,iBAAiB,IAAI,EACR;IACb,MAAMC,aAA2B;QAC/BC,IAAAA,sBAAU,EAAC;YACTC,WAAW;YACXhB;YACAG;YACAE;YACAK;YACAC;YACAC;QACF;KACD;IAED,MAAMK,YAA0B;QAC9BF,IAAAA,sBAAU,EAAC;YACTC,WAAW;YACXhB,UAAUM;YACVH,QAAQI;YACRF,OAAOI;YACPC;YACAC;YACAC;QACF;KACD;IAED,IAAIC,gBAAgB;QAClBC,WAAWI,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAShB;YAAUG;YAAQE;QAAM;QACvEY,UAAUC,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAQhB,UAAUM;YAAcH,QAAQI;YAAYF,OAAOI;QAAU;IAC5G;IAEA,OAAO;QACLW,OAAON;QACPO,MAAMJ;IACR;AACF;AAGO,MAAMnB,SAASwB,IAAAA,oCAAuB,EAACvB"}
@@ -32,15 +32,17 @@ const _scaleatom = require("../../atoms/scale-atom");
32
32
  * @param exitEasing - Easing curve for the exit transition (scale-out). Defaults to the `curveAccelerateMax` value.
33
33
  * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.
34
34
  * @param fromScale - The scale value to animate from. Defaults to `0.9`.
35
+ * @param toScale - The scale value to animate to. Defaults to `1`.
35
36
  * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.
36
- */ const scalePresenceFn = ({ duration = _reactmotion.motionTokens.durationGentle, easing = _reactmotion.motionTokens.curveDecelerateMax, delay = 0, exitDuration = _reactmotion.motionTokens.durationNormal, exitEasing = _reactmotion.motionTokens.curveAccelerateMax, exitDelay = delay, fromScale = 0.9, animateOpacity = true })=>{
37
+ */ const scalePresenceFn = ({ duration = _reactmotion.motionTokens.durationGentle, easing = _reactmotion.motionTokens.curveDecelerateMax, delay = 0, exitDuration = _reactmotion.motionTokens.durationNormal, exitEasing = _reactmotion.motionTokens.curveAccelerateMax, exitDelay = delay, fromScale = 0.9, toScale = 1, animateOpacity = true })=>{
37
38
  const enterAtoms = [
38
39
  (0, _scaleatom.scaleAtom)({
39
40
  direction: 'enter',
40
41
  duration,
41
42
  easing,
42
43
  delay,
43
- fromScale
44
+ fromScale,
45
+ toScale
44
46
  })
45
47
  ];
46
48
  const exitAtoms = [
@@ -49,7 +51,8 @@ const _scaleatom = require("../../atoms/scale-atom");
49
51
  duration: exitDuration,
50
52
  easing: exitEasing,
51
53
  delay: exitDelay,
52
- fromScale
54
+ fromScale,
55
+ toScale
53
56
  })
54
57
  ];
55
58
  // Only add fade atoms if animateOpacity is true.
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Scale/Scale.ts"],"sourcesContent":["import {\n motionTokens,\n createPresenceComponent,\n PresenceMotionFn,\n createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { scaleAtom } from '../../atoms/scale-atom';\nimport { ScaleParams } from './scale-types';\n\n/**\n * Define a presence motion for scale in/out\n *\n * @param duration - Time (ms) for the enter transition (scale-in). Defaults to the `durationGentle` value (250 ms).\n * @param easing - Easing curve for the enter transition (scale-in). Defaults to the `curveDecelerateMax` value.\n * @param delay - Time (ms) to delay the enter transition. Defaults to 0.\n * @param exitDuration - Time (ms) for the exit transition (scale-out). Defaults to the `durationNormal` value (200 ms).\n * @param exitEasing - Easing curve for the exit transition (scale-out). Defaults to the `curveAccelerateMax` value.\n * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param fromScale - The scale value to animate from. Defaults to `0.9`.\n * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.\n */\nconst scalePresenceFn: PresenceMotionFn<ScaleParams> = ({\n duration = motionTokens.durationGentle,\n easing = motionTokens.curveDecelerateMax,\n delay = 0,\n exitDuration = motionTokens.durationNormal,\n exitEasing = motionTokens.curveAccelerateMax,\n exitDelay = delay,\n fromScale = 0.9,\n animateOpacity = true,\n}) => {\n const enterAtoms = [scaleAtom({ direction: 'enter', duration, easing, delay, fromScale })];\n const exitAtoms = [\n scaleAtom({\n direction: 'exit',\n duration: exitDuration,\n easing: exitEasing,\n delay: exitDelay,\n fromScale,\n }),\n ];\n\n // Only add fade atoms if animateOpacity is true.\n if (animateOpacity) {\n enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing, delay }));\n exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing, delay: exitDelay }));\n }\n\n return {\n enter: enterAtoms,\n exit: exitAtoms,\n };\n};\n\n/** A React component that applies scale in/out transitions to its children. */\nexport const Scale = createPresenceComponent(scalePresenceFn);\n\nexport const ScaleSnappy = createPresenceComponentVariant(Scale, {\n duration: motionTokens.durationNormal,\n exitDuration: motionTokens.durationFast,\n});\n\nexport const ScaleRelaxed = createPresenceComponentVariant(Scale, {\n duration: motionTokens.durationSlow,\n exitDuration: motionTokens.durationGentle,\n});\n"],"names":["Scale","ScaleRelaxed","ScaleSnappy","scalePresenceFn","duration","motionTokens","durationGentle","easing","curveDecelerateMax","delay","exitDuration","durationNormal","exitEasing","curveAccelerateMax","exitDelay","fromScale","animateOpacity","enterAtoms","scaleAtom","direction","exitAtoms","push","fadeAtom","enter","exit","createPresenceComponent","createPresenceComponentVariant","durationFast","durationSlow"],"mappings":";;;;;;;;;;;IAwDaA,KAAK;eAALA;;IAOAC,YAAY;eAAZA;;IALAC,WAAW;eAAXA;;;6BArDN;0BACkB;2BACC;AAG1B;;;;;;;;;;;CAWC,GACD,MAAMC,kBAAiD,CAAC,EACtDC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,kBAAkB,EACxCC,QAAQ,CAAC,EACTC,eAAeL,yBAAY,CAACM,cAAc,EAC1CC,aAAaP,yBAAY,CAACQ,kBAAkB,EAC5CC,YAAYL,KAAK,EACjBM,YAAY,GAAG,EACfC,iBAAiB,IAAI,EACtB;IACC,MAAMC,aAAa;QAACC,IAAAA,oBAAS,EAAC;YAAEC,WAAW;YAASf;YAAUG;YAAQE;YAAOM;QAAU;KAAG;IAC1F,MAAMK,YAAY;QAChBF,IAAAA,oBAAS,EAAC;YACRC,WAAW;YACXf,UAAUM;YACVH,QAAQK;YACRH,OAAOK;YACPC;QACF;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWI,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAASf;YAAUG;YAAQE;QAAM;QACvEW,UAAUC,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAQf,UAAUM;YAAcH,QAAQK;YAAYH,OAAOK;QAAU;IAC5G;IAEA,OAAO;QACLS,OAAON;QACPO,MAAMJ;IACR;AACF;AAGO,MAAMpB,QAAQyB,IAAAA,oCAAuB,EAACtB;AAEtC,MAAMD,cAAcwB,IAAAA,2CAA8B,EAAC1B,OAAO;IAC/DI,UAAUC,yBAAY,CAACM,cAAc;IACrCD,cAAcL,yBAAY,CAACsB,YAAY;AACzC;AAEO,MAAM1B,eAAeyB,IAAAA,2CAA8B,EAAC1B,OAAO;IAChEI,UAAUC,yBAAY,CAACuB,YAAY;IACnClB,cAAcL,yBAAY,CAACC,cAAc;AAC3C"}
1
+ {"version":3,"sources":["../src/components/Scale/Scale.ts"],"sourcesContent":["import {\n motionTokens,\n createPresenceComponent,\n PresenceMotionFn,\n createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { scaleAtom } from '../../atoms/scale-atom';\nimport { ScaleParams } from './scale-types';\n\n/**\n * Define a presence motion for scale in/out\n *\n * @param duration - Time (ms) for the enter transition (scale-in). Defaults to the `durationGentle` value (250 ms).\n * @param easing - Easing curve for the enter transition (scale-in). Defaults to the `curveDecelerateMax` value.\n * @param delay - Time (ms) to delay the enter transition. Defaults to 0.\n * @param exitDuration - Time (ms) for the exit transition (scale-out). Defaults to the `durationNormal` value (200 ms).\n * @param exitEasing - Easing curve for the exit transition (scale-out). Defaults to the `curveAccelerateMax` value.\n * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param fromScale - The scale value to animate from. Defaults to `0.9`.\n * @param toScale - The scale value to animate to. Defaults to `1`.\n * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.\n */\nconst scalePresenceFn: PresenceMotionFn<ScaleParams> = ({\n duration = motionTokens.durationGentle,\n easing = motionTokens.curveDecelerateMax,\n delay = 0,\n exitDuration = motionTokens.durationNormal,\n exitEasing = motionTokens.curveAccelerateMax,\n exitDelay = delay,\n fromScale = 0.9,\n toScale = 1,\n animateOpacity = true,\n}) => {\n const enterAtoms = [scaleAtom({ direction: 'enter', duration, easing, delay, fromScale, toScale })];\n const exitAtoms = [\n scaleAtom({\n direction: 'exit',\n duration: exitDuration,\n easing: exitEasing,\n delay: exitDelay,\n fromScale,\n toScale,\n }),\n ];\n\n // Only add fade atoms if animateOpacity is true.\n if (animateOpacity) {\n enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing, delay }));\n exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing, delay: exitDelay }));\n }\n\n return {\n enter: enterAtoms,\n exit: exitAtoms,\n };\n};\n\n/** A React component that applies scale in/out transitions to its children. */\nexport const Scale = createPresenceComponent(scalePresenceFn);\n\nexport const ScaleSnappy = createPresenceComponentVariant(Scale, {\n duration: motionTokens.durationNormal,\n exitDuration: motionTokens.durationFast,\n});\n\nexport const ScaleRelaxed = createPresenceComponentVariant(Scale, {\n duration: motionTokens.durationSlow,\n exitDuration: motionTokens.durationGentle,\n});\n"],"names":["Scale","ScaleRelaxed","ScaleSnappy","scalePresenceFn","duration","motionTokens","durationGentle","easing","curveDecelerateMax","delay","exitDuration","durationNormal","exitEasing","curveAccelerateMax","exitDelay","fromScale","toScale","animateOpacity","enterAtoms","scaleAtom","direction","exitAtoms","push","fadeAtom","enter","exit","createPresenceComponent","createPresenceComponentVariant","durationFast","durationSlow"],"mappings":";;;;;;;;;;;IA2DaA,KAAK;eAALA;;IAOAC,YAAY;eAAZA;;IALAC,WAAW;eAAXA;;;6BAxDN;0BACkB;2BACC;AAG1B;;;;;;;;;;;;CAYC,GACD,MAAMC,kBAAiD,CAAC,EACtDC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,kBAAkB,EACxCC,QAAQ,CAAC,EACTC,eAAeL,yBAAY,CAACM,cAAc,EAC1CC,aAAaP,yBAAY,CAACQ,kBAAkB,EAC5CC,YAAYL,KAAK,EACjBM,YAAY,GAAG,EACfC,UAAU,CAAC,EACXC,iBAAiB,IAAI,EACtB;IACC,MAAMC,aAAa;QAACC,IAAAA,oBAAS,EAAC;YAAEC,WAAW;YAAShB;YAAUG;YAAQE;YAAOM;YAAWC;QAAQ;KAAG;IACnG,MAAMK,YAAY;QAChBF,IAAAA,oBAAS,EAAC;YACRC,WAAW;YACXhB,UAAUM;YACVH,QAAQK;YACRH,OAAOK;YACPC;YACAC;QACF;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWI,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAShB;YAAUG;YAAQE;QAAM;QACvEY,UAAUC,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAQhB,UAAUM;YAAcH,QAAQK;YAAYH,OAAOK;QAAU;IAC5G;IAEA,OAAO;QACLU,OAAON;QACPO,MAAMJ;IACR;AACF;AAGO,MAAMrB,QAAQ0B,IAAAA,oCAAuB,EAACvB;AAEtC,MAAMD,cAAcyB,IAAAA,2CAA8B,EAAC3B,OAAO;IAC/DI,UAAUC,yBAAY,CAACM,cAAc;IACrCD,cAAcL,yBAAY,CAACuB,YAAY;AACzC;AAEO,MAAM3B,eAAe0B,IAAAA,2CAA8B,EAAC3B,OAAO;IAChEI,UAAUC,yBAAY,CAACwB,YAAY;IACnCnB,cAAcL,yBAAY,CAACC,cAAc;AAC3C"}
@@ -33,8 +33,10 @@ const _slideatom = require("../../atoms/slide-atom");
33
33
  * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.
34
34
  * @param fromX - The X translate value with units to animate from. Defaults to `'0px'`.
35
35
  * @param fromY - The Y translate value with units to animate from. Defaults to `'20px'`.
36
+ * @param toX - The X translate value with units to animate to. Defaults to `'0px'`.
37
+ * @param toY - The Y translate value with units to animate to. Defaults to `'0px'`.
36
38
  * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.
37
- */ const slidePresenceFn = ({ duration = _reactmotion.motionTokens.durationNormal, easing = _reactmotion.motionTokens.curveDecelerateMid, delay = 0, exitDuration = duration, exitEasing = _reactmotion.motionTokens.curveAccelerateMid, exitDelay = delay, fromX = '0px', fromY = '20px', animateOpacity = true })=>{
39
+ */ const slidePresenceFn = ({ duration = _reactmotion.motionTokens.durationNormal, easing = _reactmotion.motionTokens.curveDecelerateMid, delay = 0, exitDuration = duration, exitEasing = _reactmotion.motionTokens.curveAccelerateMid, exitDelay = delay, fromX = '0px', fromY = '20px', toX = '0px', toY = '0px', animateOpacity = true })=>{
38
40
  const enterAtoms = [
39
41
  (0, _slideatom.slideAtom)({
40
42
  direction: 'enter',
@@ -42,7 +44,9 @@ const _slideatom = require("../../atoms/slide-atom");
42
44
  easing,
43
45
  delay,
44
46
  fromX,
45
- fromY
47
+ fromY,
48
+ toX,
49
+ toY
46
50
  })
47
51
  ];
48
52
  const exitAtoms = [
@@ -52,7 +56,9 @@ const _slideatom = require("../../atoms/slide-atom");
52
56
  easing: exitEasing,
53
57
  delay: exitDelay,
54
58
  fromX,
55
- fromY
59
+ fromY,
60
+ toX,
61
+ toY
56
62
  })
57
63
  ];
58
64
  // Only add fade atoms if animateOpacity is true.
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Slide/Slide.ts"],"sourcesContent":["import {\n motionTokens,\n createPresenceComponent,\n PresenceMotionFn,\n createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { slideAtom } from '../../atoms/slide-atom';\nimport { SlideParams } from './slide-types';\n\n/**\n * Define a presence motion for slide in/out\n *\n * @param duration - Time (ms) for the enter transition (slide-in). Defaults to the `durationNormal` value (200 ms).\n * @param easing - Easing curve for the enter transition (slide-in). Defaults to the `curveDecelerateMid` value.\n * @param delay - Time (ms) to delay the enter transition. Defaults to 0.\n * @param exitDuration - Time (ms) for the exit transition (slide-out). Defaults to the `duration` param for symmetry.\n * @param exitEasing - Easing curve for the exit transition (slide-out). Defaults to the `curveAccelerateMid` value.\n * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param fromX - The X translate value with units to animate from. Defaults to `'0px'`.\n * @param fromY - The Y translate value with units to animate from. Defaults to `'20px'`.\n * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.\n */\nconst slidePresenceFn: PresenceMotionFn<SlideParams> = ({\n duration = motionTokens.durationNormal,\n easing = motionTokens.curveDecelerateMid,\n delay = 0,\n exitDuration = duration,\n exitEasing = motionTokens.curveAccelerateMid,\n exitDelay = delay,\n fromX = '0px',\n fromY = '20px',\n animateOpacity = true,\n}: SlideParams) => {\n const enterAtoms = [slideAtom({ direction: 'enter', duration, easing, delay, fromX, fromY })];\n const exitAtoms = [\n slideAtom({\n direction: 'exit',\n duration: exitDuration,\n easing: exitEasing,\n delay: exitDelay,\n fromX,\n fromY,\n }),\n ];\n\n // Only add fade atoms if animateOpacity is true.\n if (animateOpacity) {\n enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing, delay }));\n exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing, delay: exitDelay }));\n }\n\n return {\n enter: enterAtoms,\n exit: exitAtoms,\n };\n};\n\n/** A React component that applies slide in/out transitions to its children. */\nexport const Slide = createPresenceComponent(slidePresenceFn);\n\nexport const SlideSnappy = createPresenceComponentVariant(Slide, {\n easing: motionTokens.curveDecelerateMax,\n exitEasing: motionTokens.curveAccelerateMax,\n});\n\nexport const SlideRelaxed = createPresenceComponentVariant(Slide, {\n duration: motionTokens.durationGentle,\n});\n"],"names":["Slide","SlideRelaxed","SlideSnappy","slidePresenceFn","duration","motionTokens","durationNormal","easing","curveDecelerateMid","delay","exitDuration","exitEasing","curveAccelerateMid","exitDelay","fromX","fromY","animateOpacity","enterAtoms","slideAtom","direction","exitAtoms","push","fadeAtom","enter","exit","createPresenceComponent","createPresenceComponentVariant","curveDecelerateMax","curveAccelerateMax","durationGentle"],"mappings":";;;;;;;;;;;IA2DaA,KAAK;eAALA;;IAOAC,YAAY;eAAZA;;IALAC,WAAW;eAAXA;;;6BAxDN;0BACkB;2BACC;AAG1B;;;;;;;;;;;;CAYC,GACD,MAAMC,kBAAiD,CAAC,EACtDC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,kBAAkB,EACxCC,QAAQ,CAAC,EACTC,eAAeN,QAAQ,EACvBO,aAAaN,yBAAY,CAACO,kBAAkB,EAC5CC,YAAYJ,KAAK,EACjBK,QAAQ,KAAK,EACbC,QAAQ,MAAM,EACdC,iBAAiB,IAAI,EACT;IACZ,MAAMC,aAAa;QAACC,IAAAA,oBAAS,EAAC;YAAEC,WAAW;YAASf;YAAUG;YAAQE;YAAOK;YAAOC;QAAM;KAAG;IAC7F,MAAMK,YAAY;QAChBF,IAAAA,oBAAS,EAAC;YACRC,WAAW;YACXf,UAAUM;YACVH,QAAQI;YACRF,OAAOI;YACPC;YACAC;QACF;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWI,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAASf;YAAUG;YAAQE;QAAM;QACvEW,UAAUC,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAQf,UAAUM;YAAcH,QAAQI;YAAYF,OAAOI;QAAU;IAC5G;IAEA,OAAO;QACLU,OAAON;QACPO,MAAMJ;IACR;AACF;AAGO,MAAMpB,QAAQyB,IAAAA,oCAAuB,EAACtB;AAEtC,MAAMD,cAAcwB,IAAAA,2CAA8B,EAAC1B,OAAO;IAC/DO,QAAQF,yBAAY,CAACsB,kBAAkB;IACvChB,YAAYN,yBAAY,CAACuB,kBAAkB;AAC7C;AAEO,MAAM3B,eAAeyB,IAAAA,2CAA8B,EAAC1B,OAAO;IAChEI,UAAUC,yBAAY,CAACwB,cAAc;AACvC"}
1
+ {"version":3,"sources":["../src/components/Slide/Slide.ts"],"sourcesContent":["import {\n motionTokens,\n createPresenceComponent,\n PresenceMotionFn,\n createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { slideAtom } from '../../atoms/slide-atom';\nimport { SlideParams } from './slide-types';\n\n/**\n * Define a presence motion for slide in/out\n *\n * @param duration - Time (ms) for the enter transition (slide-in). Defaults to the `durationNormal` value (200 ms).\n * @param easing - Easing curve for the enter transition (slide-in). Defaults to the `curveDecelerateMid` value.\n * @param delay - Time (ms) to delay the enter transition. Defaults to 0.\n * @param exitDuration - Time (ms) for the exit transition (slide-out). Defaults to the `duration` param for symmetry.\n * @param exitEasing - Easing curve for the exit transition (slide-out). Defaults to the `curveAccelerateMid` value.\n * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param fromX - The X translate value with units to animate from. Defaults to `'0px'`.\n * @param fromY - The Y translate value with units to animate from. Defaults to `'20px'`.\n * @param toX - The X translate value with units to animate to. Defaults to `'0px'`.\n * @param toY - The Y translate value with units to animate to. Defaults to `'0px'`.\n * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.\n */\nconst slidePresenceFn: PresenceMotionFn<SlideParams> = ({\n duration = motionTokens.durationNormal,\n easing = motionTokens.curveDecelerateMid,\n delay = 0,\n exitDuration = duration,\n exitEasing = motionTokens.curveAccelerateMid,\n exitDelay = delay,\n fromX = '0px',\n fromY = '20px',\n toX = '0px',\n toY = '0px',\n animateOpacity = true,\n}: SlideParams) => {\n const enterAtoms = [slideAtom({ direction: 'enter', duration, easing, delay, fromX, fromY, toX, toY })];\n const exitAtoms = [\n slideAtom({\n direction: 'exit',\n duration: exitDuration,\n easing: exitEasing,\n delay: exitDelay,\n fromX,\n fromY,\n toX,\n toY,\n }),\n ];\n\n // Only add fade atoms if animateOpacity is true.\n if (animateOpacity) {\n enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing, delay }));\n exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing, delay: exitDelay }));\n }\n\n return {\n enter: enterAtoms,\n exit: exitAtoms,\n };\n};\n\n/** A React component that applies slide in/out transitions to its children. */\nexport const Slide = createPresenceComponent(slidePresenceFn);\n\nexport const SlideSnappy = createPresenceComponentVariant(Slide, {\n easing: motionTokens.curveDecelerateMax,\n exitEasing: motionTokens.curveAccelerateMax,\n});\n\nexport const SlideRelaxed = createPresenceComponentVariant(Slide, {\n duration: motionTokens.durationGentle,\n});\n"],"names":["Slide","SlideRelaxed","SlideSnappy","slidePresenceFn","duration","motionTokens","durationNormal","easing","curveDecelerateMid","delay","exitDuration","exitEasing","curveAccelerateMid","exitDelay","fromX","fromY","toX","toY","animateOpacity","enterAtoms","slideAtom","direction","exitAtoms","push","fadeAtom","enter","exit","createPresenceComponent","createPresenceComponentVariant","curveDecelerateMax","curveAccelerateMax","durationGentle"],"mappings":";;;;;;;;;;;IAiEaA,KAAK;eAALA;;IAOAC,YAAY;eAAZA;;IALAC,WAAW;eAAXA;;;6BA9DN;0BACkB;2BACC;AAG1B;;;;;;;;;;;;;;CAcC,GACD,MAAMC,kBAAiD,CAAC,EACtDC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,kBAAkB,EACxCC,QAAQ,CAAC,EACTC,eAAeN,QAAQ,EACvBO,aAAaN,yBAAY,CAACO,kBAAkB,EAC5CC,YAAYJ,KAAK,EACjBK,QAAQ,KAAK,EACbC,QAAQ,MAAM,EACdC,MAAM,KAAK,EACXC,MAAM,KAAK,EACXC,iBAAiB,IAAI,EACT;IACZ,MAAMC,aAAa;QAACC,IAAAA,oBAAS,EAAC;YAAEC,WAAW;YAASjB;YAAUG;YAAQE;YAAOK;YAAOC;YAAOC;YAAKC;QAAI;KAAG;IACvG,MAAMK,YAAY;QAChBF,IAAAA,oBAAS,EAAC;YACRC,WAAW;YACXjB,UAAUM;YACVH,QAAQI;YACRF,OAAOI;YACPC;YACAC;YACAC;YACAC;QACF;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWI,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAASjB;YAAUG;YAAQE;QAAM;QACvEa,UAAUC,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAQjB,UAAUM;YAAcH,QAAQI;YAAYF,OAAOI;QAAU;IAC5G;IAEA,OAAO;QACLY,OAAON;QACPO,MAAMJ;IACR;AACF;AAGO,MAAMtB,QAAQ2B,IAAAA,oCAAuB,EAACxB;AAEtC,MAAMD,cAAc0B,IAAAA,2CAA8B,EAAC5B,OAAO;IAC/DO,QAAQF,yBAAY,CAACwB,kBAAkB;IACvClB,YAAYN,yBAAY,CAACyB,kBAAkB;AAC7C;AAEO,MAAM7B,eAAe2B,IAAAA,2CAA8B,EAAC5B,OAAO;IAChEI,UAAUC,yBAAY,CAAC0B,cAAc;AACvC"}
@@ -53,6 +53,21 @@ _export(exports, {
53
53
  },
54
54
  SlideSnappy: function() {
55
55
  return _Slide.SlideSnappy;
56
+ },
57
+ blurAtom: function() {
58
+ return _bluratom.blurAtom;
59
+ },
60
+ fadeAtom: function() {
61
+ return _fadeatom.fadeAtom;
62
+ },
63
+ rotateAtom: function() {
64
+ return _rotateatom.rotateAtom;
65
+ },
66
+ scaleAtom: function() {
67
+ return _scaleatom.scaleAtom;
68
+ },
69
+ slideAtom: function() {
70
+ return _slideatom.slideAtom;
56
71
  }
57
72
  });
58
73
  const _Collapse = require("./components/Collapse");
@@ -61,3 +76,9 @@ const _Scale = require("./components/Scale");
61
76
  const _Slide = require("./components/Slide");
62
77
  const _Blur = require("./components/Blur");
63
78
  const _Rotate = require("./components/Rotate");
79
+ const _bluratom = require("./atoms/blur-atom");
80
+ const _fadeatom = require("./atoms/fade-atom");
81
+ const _rotateatom = require("./atoms/rotate-atom");
82
+ const _scaleatom = require("./atoms/scale-atom");
83
+ const _slideatom = require("./atoms/slide-atom");
84
+ // TODO: consider whether to export some or all collapse atoms
@@ -1 +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"}
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\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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-motion-components-preview",
3
- "version": "0.11.1",
3
+ "version": "0.13.0",
4
4
  "description": "A preview package for Fluent UI motion components, providing a collection of components",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",