feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,60 @@
+import { createPresenceComponent, motionTokens } from '@fluentui/react-motion';
+import { fadeAtom } from '../../atoms/fade-atom';
+import { rotateAtom } from '../../atoms/rotate-atom';
+/**
+ * Define a presence motion for rotate in/out
+ *
+ * @param duration - Time (ms) for the enter transition (rotate-in). Defaults to the `durationGentle` value.
+ * @param easing - Easing curve for the enter transition (rotate-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 (rotate-out). Defaults to the `duration` param for symmetry.
+ * @param exitEasing - Easing curve for the exit transition (rotate-out). Defaults to the `curveAccelerateMax` value.
+ * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.
+ * @param axis - The axis of rotation: 'x', 'y', or 'z'. Defaults to 'z'.
+ * @param outAngle - Rotation angle for the out state (exited) in degrees. Defaults to -90.
+ * @param inAngle - Rotation angle for the in state (entered) in degrees. Defaults to 0.
+ * @param animateOpacity - Whether to animate the opacity during the rotation. Defaults to `true`.
+ */ const rotatePresenceFn = ({ duration = motionTokens.durationGentle, easing = motionTokens.curveDecelerateMax, delay = 0, exitDuration = duration, exitEasing = motionTokens.curveAccelerateMax, exitDelay = delay, axis = 'z', outAngle = -90, inAngle = 0, animateOpacity = true })=>{
+    const enterAtoms = [
+        rotateAtom({
+            direction: 'enter',
+            duration,
+            easing,
+            delay,
+            axis,
+            outAngle,
+            inAngle
+        })
+    ];
+    const exitAtoms = [
+        rotateAtom({
+            direction: 'exit',
+            duration: exitDuration,
+            easing: exitEasing,
+            delay: exitDelay,
+            axis,
+            outAngle,
+            inAngle
+        })
+    ];
+    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
+    };
+};
+// Create a presence motion component to rotate an element around a single axis (x, y, or z).
+export const Rotate = createPresenceComponent(rotatePresenceFn);

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

@@ -0,0 +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 outAngle - Rotation angle for the out state (exited) in degrees. Defaults to -90.\n * @param inAngle - Rotation angle for the in state (entered) 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  outAngle = -90,\n  inAngle = 0,\n  animateOpacity = true,\n}: RotateParams) => {\n  const enterAtoms: AtomMotion[] = [\n    rotateAtom({\n      direction: 'enter',\n      duration,\n      easing,\n      delay,\n      axis,\n      outAngle,\n      inAngle,\n    }),\n  ];\n\n  const exitAtoms: AtomMotion[] = [\n    rotateAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      delay: exitDelay,\n      axis,\n      outAngle,\n      inAngle,\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":["createPresenceComponent","motionTokens","fadeAtom","rotateAtom","rotatePresenceFn","duration","durationGentle","easing","curveDecelerateMax","delay","exitDuration","exitEasing","curveAccelerateMax","exitDelay","axis","outAngle","inAngle","animateOpacity","enterAtoms","direction","exitAtoms","push","enter","exit","Rotate"],"mappings":"AAAA,SAAqBA,uBAAuB,EAAEC,YAAY,QAA0B,yBAAyB;AAC7G,SAASC,QAAQ,QAAQ,wBAAwB;AACjD,SAASC,UAAU,QAAQ,0BAA0B;AAGrD;;;;;;;;;;;;;CAaC,GACD,MAAMC,mBAAmD,CAAC,EACxDC,WAAWJ,aAAaK,cAAc,EACtCC,SAASN,aAAaO,kBAAkB,EACxCC,QAAQ,CAAC,EACTC,eAAeL,QAAQ,EACvBM,aAAaV,aAAaW,kBAAkB,EAC5CC,YAAYJ,KAAK,EACjBK,OAAO,GAAG,EACVC,WAAW,CAAC,EAAE,EACdC,UAAU,CAAC,EACXC,iBAAiB,IAAI,EACR;IACb,MAAMC,aAA2B;QAC/Bf,WAAW;YACTgB,WAAW;YACXd;YACAE;YACAE;YACAK;YACAC;YACAC;QACF;KACD;IAED,MAAMI,YAA0B;QAC9BjB,WAAW;YACTgB,WAAW;YACXd,UAAUK;YACVH,QAAQI;YACRF,OAAOI;YACPC;YACAC;YACAC;QACF;KACD;IAED,IAAIC,gBAAgB;QAClBC,WAAWG,IAAI,CAACnB,SAAS;YAAEiB,WAAW;YAASd;YAAUE;YAAQE;QAAM;QACvEW,UAAUC,IAAI,CAACnB,SAAS;YAAEiB,WAAW;YAAQd,UAAUK;YAAcH,QAAQI;YAAYF,OAAOI;QAAU;IAC5G;IAEA,OAAO;QACLS,OAAOJ;QACPK,MAAMH;IACR;AACF;AAEA,6FAA6F;AAC7F,OAAO,MAAMI,SAASxB,wBAAwBI,kBAAkB"}

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

@@ -0,0 +1 @@
+export { Rotate } from './Rotate';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Rotate/index.ts"],"sourcesContent":["export { Rotate } from './Rotate';\nexport type { RotateParams } from './rotate-types';\n"],"names":["Rotate"],"mappings":"AAAA,SAASA,MAAM,QAAQ,WAAW"}

node_modules/@fluentui/react-motion-components-preview/lib/components/Rotate/rotate-types.js

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

node_modules/@fluentui/react-motion-components-preview/lib/components/Rotate/rotate-types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Rotate/rotate-types.ts"],"sourcesContent":["import type { BasePresenceParams, AnimateOpacity } from '../../types';\n\ntype Axis3D = 'x' | 'y' | 'z';\n\nexport type RotateParams = BasePresenceParams &\n  AnimateOpacity & {\n    /**\n     * The axis of rotation: 'x', 'y', or 'z'.\n     * Defaults to 'z'.\n     */\n    axis?: Axis3D;\n\n    /**\n     * Rotation angle for the out state (exited) in degrees.\n     * Defaults to -90.\n     */\n    outAngle?: number;\n\n    /**\n     * Rotation angle for the in state (entered) in degrees.\n     * Defaults to 0.\n     */\n    inAngle?: number;\n  };\n"],"names":[],"mappings":"AAIA,WAmBI"}