feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,40 @@
+import { motionTokens, createPresenceComponent, createPresenceComponentVariant } from '@fluentui/react-motion';
+import { fadeAtom } from '../../atoms/fade-atom';
+/**
+ * Define a presence motion for fade in/out
+ *
+ * @param duration - Time (ms) for the enter transition (fade-in). Defaults to the `durationNormal` value (200 ms).
+ * @param easing - Easing curve for the enter transition (fade-in). Defaults to the `curveEasyEase` value.
+ * @param delay - Time (ms) to delay the enter transition. Defaults to 0.
+ * @param exitDuration - Time (ms) for the exit transition (fade-out). Defaults to the `duration` param for symmetry.
+ * @param exitEasing - Easing curve for the exit transition (fade-out). Defaults to the `easing` param for symmetry.
+ * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.
+ * @param outOpacity - Opacity for the out state (exited). Defaults to 0.
+ * @param inOpacity - Opacity for the in state (entered). Defaults to 1.
+ */ export const fadePresenceFn = ({ duration = motionTokens.durationNormal, easing = motionTokens.curveEasyEase, delay = 0, exitDuration = duration, exitEasing = easing, exitDelay = delay, outOpacity = 0, inOpacity = 1 })=>{
+    return {
+        enter: fadeAtom({
+            direction: 'enter',
+            duration,
+            easing,
+            delay,
+            outOpacity,
+            inOpacity
+        }),
+        exit: fadeAtom({
+            direction: 'exit',
+            duration: exitDuration,
+            easing: exitEasing,
+            delay: exitDelay,
+            outOpacity,
+            inOpacity
+        })
+    };
+};
+/** A React component that applies fade in/out transitions to its children. */ export const Fade = createPresenceComponent(fadePresenceFn);
+export const FadeSnappy = createPresenceComponentVariant(Fade, {
+    duration: motionTokens.durationFast
+});
+export const FadeRelaxed = createPresenceComponentVariant(Fade, {
+    duration: motionTokens.durationGentle
+});

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

@@ -0,0 +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 outOpacity - Opacity for the out state (exited). Defaults to 0.\n * @param inOpacity - Opacity for the in state (entered). 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  outOpacity = 0,\n  inOpacity = 1,\n}) => {\n  return {\n    enter: fadeAtom({ direction: 'enter', duration, easing, delay, outOpacity, inOpacity }),\n    exit: fadeAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      delay: exitDelay,\n      outOpacity,\n      inOpacity,\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":["motionTokens","createPresenceComponent","createPresenceComponentVariant","fadeAtom","fadePresenceFn","duration","durationNormal","easing","curveEasyEase","delay","exitDuration","exitEasing","exitDelay","outOpacity","inOpacity","enter","direction","exit","Fade","FadeSnappy","durationFast","FadeRelaxed","durationGentle"],"mappings":"AAAA,SACEA,YAAY,EACZC,uBAAuB,EAEvBC,8BAA8B,QACzB,yBAAyB;AAChC,SAASC,QAAQ,QAAQ,wBAAwB;AAGjD;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,iBAA+C,CAAC,EAC3DC,WAAWL,aAAaM,cAAc,EACtCC,SAASP,aAAaQ,aAAa,EACnCC,QAAQ,CAAC,EACTC,eAAeL,QAAQ,EACvBM,aAAaJ,MAAM,EACnBK,YAAYH,KAAK,EACjBI,aAAa,CAAC,EACdC,YAAY,CAAC,EACd;IACC,OAAO;QACLC,OAAOZ,SAAS;YAAEa,WAAW;YAASX;YAAUE;YAAQE;YAAOI;YAAYC;QAAU;QACrFG,MAAMd,SAAS;YACba,WAAW;YACXX,UAAUK;YACVH,QAAQI;YACRF,OAAOG;YACPC;YACAC;QACF;IACF;AACF,EAAE;AAEF,4EAA4E,GAC5E,OAAO,MAAMI,OAAOjB,wBAAwBG,gBAAgB;AAE5D,OAAO,MAAMe,aAAajB,+BAA+BgB,MAAM;IAAEb,UAAUL,aAAaoB,YAAY;AAAC,GAAG;AAExG,OAAO,MAAMC,cAAcnB,+BAA+BgB,MAAM;IAAEb,UAAUL,aAAasB,cAAc;AAAC,GAAG"}

node_modules/@fluentui/react-motion-components-preview/lib/components/Fade/fade-types.js

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

node_modules/@fluentui/react-motion-components-preview/lib/components/Fade/fade-types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Fade/fade-types.ts"],"sourcesContent":["import type { BasePresenceParams } from '../../types';\n\nexport type FadeParams = BasePresenceParams & {\n  /** Opacity for the out state (exited). Defaults to 0. */\n  outOpacity?: number;\n\n  /** Opacity for the in state (entered). Defaults to 1. */\n  inOpacity?: number;\n};\n"],"names":[],"mappings":"AAEA,WAME"}

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

@@ -0,0 +1 @@
+export { Fade, FadeRelaxed, FadeSnappy } from './Fade';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Fade/index.ts"],"sourcesContent":["export { Fade, FadeRelaxed, FadeSnappy } from './Fade';\nexport type { FadeParams } from './fade-types';\n"],"names":["Fade","FadeRelaxed","FadeSnappy"],"mappings":"AAAA,SAASA,IAAI,EAAEC,WAAW,EAAEC,UAAU,QAAQ,SAAS"}