feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-motion-components-preview/lib/components/Scale/Scale.js

@@ -0,0 +1,65 @@
+import { motionTokens, createPresenceComponent, createPresenceComponentVariant } from '@fluentui/react-motion';
+import { fadeAtom } from '../../atoms/fade-atom';
+import { scaleAtom } from '../../atoms/scale-atom';
+/**
+ * Define a presence motion for scale in/out
+ *
+ * @param duration - Time (ms) for the enter transition (scale-in). Defaults to the `durationGentle` value (250 ms).
+ * @param easing - Easing curve for the enter transition (scale-in). Defaults to the `curveDecelerateMax` value.
+ * @param delay - Time (ms) to delay the enter transition. Defaults to 0.
+ * @param exitDuration - Time (ms) for the exit transition (scale-out). Defaults to the `durationNormal` value (200 ms).
+ * @param exitEasing - Easing curve for the exit transition (scale-out). Defaults to the `curveAccelerateMax` value.
+ * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.
+ * @param outScale - Scale for the out state (exited). Defaults to `0.9`.
+ * @param inScale - Scale for the in state (entered). Defaults to `1`.
+ * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.
+ */ const scalePresenceFn = ({ duration = motionTokens.durationGentle, easing = motionTokens.curveDecelerateMax, delay = 0, exitDuration = motionTokens.durationNormal, exitEasing = motionTokens.curveAccelerateMax, exitDelay = delay, outScale = 0.9, inScale = 1, animateOpacity = true })=>{
+    const enterAtoms = [
+        scaleAtom({
+            direction: 'enter',
+            duration,
+            easing,
+            delay,
+            outScale,
+            inScale
+        })
+    ];
+    const exitAtoms = [
+        scaleAtom({
+            direction: 'exit',
+            duration: exitDuration,
+            easing: exitEasing,
+            delay: exitDelay,
+            outScale,
+            inScale
+        })
+    ];
+    // Only add fade atoms if animateOpacity is true.
+    if (animateOpacity) {
+        enterAtoms.push(fadeAtom({
+            direction: 'enter',
+            duration,
+            easing,
+            delay
+        }));
+        exitAtoms.push(fadeAtom({
+            direction: 'exit',
+            duration: exitDuration,
+            easing: exitEasing,
+            delay: exitDelay
+        }));
+    }
+    return {
+        enter: enterAtoms,
+        exit: exitAtoms
+    };
+};
+/** A React component that applies scale in/out transitions to its children. */ export const Scale = createPresenceComponent(scalePresenceFn);
+export const ScaleSnappy = createPresenceComponentVariant(Scale, {
+    duration: motionTokens.durationNormal,
+    exitDuration: motionTokens.durationFast
+});
+export const ScaleRelaxed = createPresenceComponentVariant(Scale, {
+    duration: motionTokens.durationSlow,
+    exitDuration: motionTokens.durationGentle
+});

node_modules/@fluentui/react-motion-components-preview/lib/components/Scale/Scale.js.map

@@ -0,0 +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 outScale - Scale for the out state (exited). Defaults to `0.9`.\n * @param inScale - Scale for the in state (entered). 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  outScale = 0.9,\n  inScale = 1,\n  animateOpacity = true,\n}) => {\n  const enterAtoms = [scaleAtom({ direction: 'enter', duration, easing, delay, outScale, inScale })];\n  const exitAtoms = [\n    scaleAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      delay: exitDelay,\n      outScale,\n      inScale,\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","outScale","inScale","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,WAAW,GAAG,EACdC,UAAU,CAAC,EACXC,iBAAiB,IAAI,EACtB;IACC,MAAMC,aAAa;QAACf,UAAU;YAAEgB,WAAW;YAASd;YAAUE;YAAQE;YAAOM;YAAUC;QAAQ;KAAG;IAClG,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"}

node_modules/@fluentui/react-motion-components-preview/lib/components/Scale/index.js

@@ -0,0 +1 @@
+export { Scale, ScaleRelaxed, ScaleSnappy } from './Scale';

node_modules/@fluentui/react-motion-components-preview/lib/components/Scale/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Scale/index.ts"],"sourcesContent":["export { Scale, ScaleRelaxed, ScaleSnappy } from './Scale';\nexport type { ScaleParams } from './scale-types';\n"],"names":["Scale","ScaleRelaxed","ScaleSnappy"],"mappings":"AAAA,SAASA,KAAK,EAAEC,YAAY,EAAEC,WAAW,QAAQ,UAAU"}

node_modules/@fluentui/react-motion-components-preview/lib/components/Scale/scale-types.js

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

node_modules/@fluentui/react-motion-components-preview/lib/components/Scale/scale-types.js.map

@@ -0,0 +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    /** Scale for the out state (exited). Defaults to `0.9`. */\n    outScale?: number;\n\n    /** Scale for the in state (entered). Defaults to `1`. */\n    inScale?: number;\n  };\n"],"names":[],"mappings":"AAEA,WAOI"}