feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,133 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Collapse: function() {
+        return Collapse;
+    },
+    CollapseDelayed: function() {
+        return CollapseDelayed;
+    },
+    CollapseRelaxed: function() {
+        return CollapseRelaxed;
+    },
+    CollapseSnappy: function() {
+        return CollapseSnappy;
+    }
+});
+const _reactmotion = require("@fluentui/react-motion");
+const _collapseatoms = require("./collapse-atoms");
+const _fadeatom = require("../../atoms/fade-atom");
+/**
+ * Define a presence motion for collapse/expand
+ *
+ * @param element - The element to apply the collapse motion to
+ * @param duration - Time (ms) for the enter transition (expand). Defaults to the `durationNormal` value (200 ms)
+ * @param easing - Easing curve for the enter transition. Defaults to the `curveEasyEaseMax` value
+ * @param delay - Time (ms) to delay the entire enter transition. Defaults to 0
+ * @param exitDuration - Time (ms) for the exit transition (collapse). Defaults to the `duration` param for symmetry
+ * @param exitEasing - Easing curve for the exit transition. Defaults to the `easing` param for symmetry
+ * @param exitDelay - Time (ms) to delay the entire exit transition. Defaults to the `delay` param for symmetry
+ * @param staggerDelay - Time (ms) offset between the size and opacity animations. Defaults to 0
+ * @param exitStaggerDelay - Time (ms) offset between the size and opacity animations on exit. Defaults to the `staggerDelay` param for symmetry
+ * @param sizeDuration - Time (ms) for the size animation during enter. Defaults to `duration` for unified timing
+ * @param opacityDuration - Time (ms) for the opacity animation during enter. Defaults to `sizeDuration` for synchronized timing
+ * @param exitSizeDuration - Time (ms) for the size animation during exit. Defaults to `exitDuration` for unified timing
+ * @param exitOpacityDuration - Time (ms) for the opacity animation during exit. Defaults to `exitSizeDuration` for synchronized timing
+ * @param animateOpacity - Whether to animate the opacity. Defaults to `true`
+ * @param orientation - The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height
+ * @param outSize - Size for the out state (collapsed). Defaults to `'0px'`
+ */ const collapsePresenceFn = ({ element, // Primary duration controls (simple API)
+duration = _reactmotion.motionTokens.durationNormal, exitDuration = duration, // Granular duration controls with smart defaults (advanced API)
+sizeDuration = duration, opacityDuration = sizeDuration, exitSizeDuration = exitDuration, exitOpacityDuration = exitSizeDuration, // Other timing controls
+easing = _reactmotion.motionTokens.curveEasyEaseMax, delay = 0, exitEasing = easing, exitDelay = delay, staggerDelay = 0, exitStaggerDelay = staggerDelay, // Animation controls
+animateOpacity = true, orientation = 'vertical', outSize = '0px' })=>{
+    // ----- ENTER -----
+    // The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.
+    // For enter: size expands first, then opacity fades in after staggerDelay
+    const enterAtoms = [
+        // Apply global delay to size atom - size expansion starts first
+        (0, _collapseatoms.sizeEnterAtom)({
+            orientation,
+            duration: sizeDuration,
+            easing,
+            element,
+            outSize,
+            delay
+        }),
+        (0, _collapseatoms.whitespaceAtom)({
+            direction: 'enter',
+            orientation,
+            duration: sizeDuration,
+            easing,
+            delay
+        })
+    ];
+    // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.
+    if (animateOpacity) {
+        enterAtoms.push((0, _fadeatom.fadeAtom)({
+            direction: 'enter',
+            duration: opacityDuration,
+            easing,
+            delay: delay + staggerDelay
+        }));
+    }
+    // ----- EXIT -----
+    // The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.
+    // For exit: opacity fades out first, then size collapses after exitStaggerDelay
+    const exitAtoms = [];
+    // Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected.
+    if (animateOpacity) {
+        exitAtoms.push((0, _fadeatom.fadeAtom)({
+            direction: 'exit',
+            duration: exitOpacityDuration,
+            easing: exitEasing,
+            delay: exitDelay
+        }));
+    }
+    exitAtoms.push((0, _collapseatoms.sizeExitAtom)({
+        orientation,
+        duration: exitSizeDuration,
+        easing: exitEasing,
+        element,
+        delay: exitDelay + exitStaggerDelay,
+        outSize
+    }), (0, _collapseatoms.whitespaceAtom)({
+        direction: 'exit',
+        orientation,
+        duration: exitSizeDuration,
+        easing: exitEasing,
+        delay: exitDelay + exitStaggerDelay
+    }));
+    return {
+        enter: enterAtoms,
+        exit: exitAtoms
+    };
+};
+const Collapse = (0, _reactmotion.createPresenceComponent)(collapsePresenceFn);
+const CollapseSnappy = (0, _reactmotion.createPresenceComponentVariant)(Collapse, {
+    duration: _reactmotion.motionTokens.durationFast
+});
+const CollapseRelaxed = (0, _reactmotion.createPresenceComponentVariant)(Collapse, {
+    duration: _reactmotion.motionTokens.durationSlower
+});
+const CollapseDelayed = (0, _reactmotion.createPresenceComponentVariant)(Collapse, {
+    // Enter timing per motion design spec
+    sizeDuration: _reactmotion.motionTokens.durationNormal,
+    opacityDuration: _reactmotion.motionTokens.durationSlower,
+    staggerDelay: _reactmotion.motionTokens.durationNormal,
+    // Exit timing per motion design spec
+    exitSizeDuration: _reactmotion.motionTokens.durationNormal,
+    exitOpacityDuration: _reactmotion.motionTokens.durationSlower,
+    exitStaggerDelay: _reactmotion.motionTokens.durationSlower,
+    // Easing per motion design spec
+    easing: _reactmotion.motionTokens.curveEasyEase,
+    exitEasing: _reactmotion.motionTokens.curveEasyEase
+});

node_modules/@fluentui/react-motion-components-preview/lib-commonjs/components/Collapse/collapse-atoms.js

@@ -0,0 +1,117 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    sizeEnterAtom: function() {
+        return sizeEnterAtom;
+    },
+    sizeExitAtom: function() {
+        return sizeExitAtom;
+    },
+    whitespaceAtom: function() {
+        return whitespaceAtom;
+    }
+});
+// ----- SIZE -----
+const sizeValuesForOrientation = (orientation, element)=>{
+    const sizeName = orientation === 'horizontal' ? 'maxWidth' : 'maxHeight';
+    const overflowName = orientation === 'horizontal' ? 'overflowX' : 'overflowY';
+    const measuredSize = orientation === 'horizontal' ? element.scrollWidth : element.scrollHeight;
+    const toSize = `${measuredSize}px`;
+    return {
+        sizeName,
+        overflowName,
+        toSize
+    };
+};
+const sizeEnterAtom = ({ orientation, duration, easing, element, outSize = '0', delay = 0 })=>{
+    const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);
+    return {
+        keyframes: [
+            {
+                [sizeName]: outSize,
+                [overflowName]: 'hidden'
+            },
+            {
+                [sizeName]: toSize,
+                offset: 0.9999,
+                [overflowName]: 'hidden'
+            },
+            {
+                [sizeName]: 'unset',
+                [overflowName]: 'unset'
+            }
+        ],
+        duration,
+        easing,
+        delay,
+        fill: 'both'
+    };
+};
+const sizeExitAtom = ({ orientation, duration, easing, element, delay = 0, outSize = '0' })=>{
+    const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);
+    return {
+        keyframes: [
+            {
+                [sizeName]: toSize,
+                [overflowName]: 'hidden'
+            },
+            {
+                [sizeName]: outSize,
+                [overflowName]: 'hidden'
+            }
+        ],
+        duration,
+        easing,
+        delay,
+        fill: 'both'
+    };
+};
+// ----- WHITESPACE -----
+// Whitespace animation includes padding and margin.
+const whitespaceValuesForOrientation = (orientation)=>{
+    // horizontal whitespace collapse
+    if (orientation === 'horizontal') {
+        return {
+            paddingStart: 'paddingInlineStart',
+            paddingEnd: 'paddingInlineEnd',
+            marginStart: 'marginInlineStart',
+            marginEnd: 'marginInlineEnd'
+        };
+    }
+    // vertical whitespace collapse
+    return {
+        paddingStart: 'paddingBlockStart',
+        paddingEnd: 'paddingBlockEnd',
+        marginStart: 'marginBlockStart',
+        marginEnd: 'marginBlockEnd'
+    };
+};
+const whitespaceAtom = ({ direction, orientation, duration, easing, delay = 0 })=>{
+    const { paddingStart, paddingEnd, marginStart, marginEnd } = whitespaceValuesForOrientation(orientation);
+    // The keyframe with zero whitespace is at the start for enter and at the end for exit.
+    const offset = direction === 'enter' ? 0 : 1;
+    const keyframes = [
+        {
+            [paddingStart]: '0',
+            [paddingEnd]: '0',
+            [marginStart]: '0',
+            [marginEnd]: '0',
+            offset
+        }
+    ];
+    return {
+        keyframes,
+        duration,
+        easing,
+        delay,
+        fill: 'both'
+    };
+};

node_modules/@fluentui/react-motion-components-preview/lib-commonjs/components/Collapse/collapse-test-utils.js

@@ -0,0 +1,155 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    getCollapseDurationInfo: function() {
+        return getCollapseDurationInfo;
+    },
+    getCollapseMotionValidation: function() {
+        return getCollapseMotionValidation;
+    },
+    getCollapseOrientationInfo: function() {
+        return getCollapseOrientationInfo;
+    },
+    getCollapseTimingInfo: function() {
+        return getCollapseTimingInfo;
+    },
+    getOpacityComparisonInfo: function() {
+        return getOpacityComparisonInfo;
+    },
+    getSizeAtomInfo: function() {
+        return getSizeAtomInfo;
+    },
+    getWhitespaceAtomInfo: function() {
+        return getWhitespaceAtomInfo;
+    }
+});
+function getCollapseMotionValidation(motion) {
+    return {
+        enterCount: motion.enter.length,
+        exitCount: motion.exit.length,
+        hasEnterOpacity: motion.enter.length === 3 && 'opacity' in (motion.enter[2].keyframes[0] || {}),
+        hasExitOpacity: motion.exit.length === 3 && 'opacity' in (motion.exit[0].keyframes[0] || {}),
+        enterStructure: motion.enter.map((atom)=>({
+                hasKeyframes: Array.isArray(atom.keyframes),
+                hasDuration: typeof atom.duration === 'number',
+                hasEasing: typeof atom.easing === 'string',
+                hasDelay: typeof atom.delay === 'number'
+            })),
+        exitStructure: motion.exit.map((atom)=>({
+                hasKeyframes: Array.isArray(atom.keyframes),
+                hasDuration: typeof atom.duration === 'number',
+                hasEasing: typeof atom.easing === 'string',
+                hasDelay: typeof atom.delay === 'number'
+            }))
+    };
+}
+function getCollapseTimingInfo(motion, animateOpacity = true) {
+    var _motion_enter_, _motion_enter_1, _motion_enter_2, _motion_exit_, _motion_exit_1, _motion_exit_2, _motion_exit_3, _motion_exit_4;
+    var _motion_enter__delay, _motion_enter__delay1, _motion_enter__delay2;
+    const enterDelays = {
+        size: (_motion_enter__delay = (_motion_enter_ = motion.enter[0]) === null || _motion_enter_ === void 0 ? void 0 : _motion_enter_.delay) !== null && _motion_enter__delay !== void 0 ? _motion_enter__delay : 0,
+        whitespace: (_motion_enter__delay1 = (_motion_enter_1 = motion.enter[1]) === null || _motion_enter_1 === void 0 ? void 0 : _motion_enter_1.delay) !== null && _motion_enter__delay1 !== void 0 ? _motion_enter__delay1 : 0,
+        opacity: animateOpacity ? (_motion_enter__delay2 = (_motion_enter_2 = motion.enter[2]) === null || _motion_enter_2 === void 0 ? void 0 : _motion_enter_2.delay) !== null && _motion_enter__delay2 !== void 0 ? _motion_enter__delay2 : 0 : undefined
+    };
+    var _motion_exit__delay, _motion_exit__delay1, _motion_exit__delay2, _motion_exit__delay3, _motion_exit__delay4;
+    const exitDelays = animateOpacity ? {
+        opacity: (_motion_exit__delay = (_motion_exit_ = motion.exit[0]) === null || _motion_exit_ === void 0 ? void 0 : _motion_exit_.delay) !== null && _motion_exit__delay !== void 0 ? _motion_exit__delay : 0,
+        size: (_motion_exit__delay1 = (_motion_exit_1 = motion.exit[1]) === null || _motion_exit_1 === void 0 ? void 0 : _motion_exit_1.delay) !== null && _motion_exit__delay1 !== void 0 ? _motion_exit__delay1 : 0,
+        whitespace: (_motion_exit__delay2 = (_motion_exit_2 = motion.exit[2]) === null || _motion_exit_2 === void 0 ? void 0 : _motion_exit_2.delay) !== null && _motion_exit__delay2 !== void 0 ? _motion_exit__delay2 : 0
+    } : {
+        size: (_motion_exit__delay3 = (_motion_exit_3 = motion.exit[0]) === null || _motion_exit_3 === void 0 ? void 0 : _motion_exit_3.delay) !== null && _motion_exit__delay3 !== void 0 ? _motion_exit__delay3 : 0,
+        whitespace: (_motion_exit__delay4 = (_motion_exit_4 = motion.exit[1]) === null || _motion_exit_4 === void 0 ? void 0 : _motion_exit_4.delay) !== null && _motion_exit__delay4 !== void 0 ? _motion_exit__delay4 : 0
+    };
+    return {
+        enter: enterDelays,
+        exit: exitDelays
+    };
+}
+function getCollapseDurationInfo(motion, animateOpacity = true) {
+    var _motion_enter_, _motion_enter_1, _motion_enter_2, _motion_exit_, _motion_exit_1, _motion_exit_2, _motion_exit_3, _motion_exit_4;
+    var _motion_enter__duration, _motion_enter__duration1, _motion_enter__duration2;
+    const enterDurations = {
+        size: (_motion_enter__duration = (_motion_enter_ = motion.enter[0]) === null || _motion_enter_ === void 0 ? void 0 : _motion_enter_.duration) !== null && _motion_enter__duration !== void 0 ? _motion_enter__duration : 0,
+        whitespace: (_motion_enter__duration1 = (_motion_enter_1 = motion.enter[1]) === null || _motion_enter_1 === void 0 ? void 0 : _motion_enter_1.duration) !== null && _motion_enter__duration1 !== void 0 ? _motion_enter__duration1 : 0,
+        opacity: animateOpacity ? (_motion_enter__duration2 = (_motion_enter_2 = motion.enter[2]) === null || _motion_enter_2 === void 0 ? void 0 : _motion_enter_2.duration) !== null && _motion_enter__duration2 !== void 0 ? _motion_enter__duration2 : 0 : undefined
+    };
+    var _motion_exit__duration, _motion_exit__duration1, _motion_exit__duration2, _motion_exit__duration3, _motion_exit__duration4;
+    const exitDurations = animateOpacity ? {
+        opacity: (_motion_exit__duration = (_motion_exit_ = motion.exit[0]) === null || _motion_exit_ === void 0 ? void 0 : _motion_exit_.duration) !== null && _motion_exit__duration !== void 0 ? _motion_exit__duration : 0,
+        size: (_motion_exit__duration1 = (_motion_exit_1 = motion.exit[1]) === null || _motion_exit_1 === void 0 ? void 0 : _motion_exit_1.duration) !== null && _motion_exit__duration1 !== void 0 ? _motion_exit__duration1 : 0,
+        whitespace: (_motion_exit__duration2 = (_motion_exit_2 = motion.exit[2]) === null || _motion_exit_2 === void 0 ? void 0 : _motion_exit_2.duration) !== null && _motion_exit__duration2 !== void 0 ? _motion_exit__duration2 : 0
+    } : {
+        size: (_motion_exit__duration3 = (_motion_exit_3 = motion.exit[0]) === null || _motion_exit_3 === void 0 ? void 0 : _motion_exit_3.duration) !== null && _motion_exit__duration3 !== void 0 ? _motion_exit__duration3 : 0,
+        whitespace: (_motion_exit__duration4 = (_motion_exit_4 = motion.exit[1]) === null || _motion_exit_4 === void 0 ? void 0 : _motion_exit_4.duration) !== null && _motion_exit__duration4 !== void 0 ? _motion_exit__duration4 : 0
+    };
+    return {
+        enter: enterDurations,
+        exit: exitDurations
+    };
+}
+function getCollapseOrientationInfo(motion, animateOpacity = true) {
+    const enterSizeAtom = motion.enter[0];
+    const enterWhitespaceAtom = motion.enter[1];
+    const exitOffset = animateOpacity ? 1 : 0;
+    const exitSizeAtom = motion.exit[exitOffset];
+    const exitWhitespaceAtom = motion.exit[exitOffset + 1];
+    return {
+        enter: {
+            sizeProperties: Object.keys((enterSizeAtom === null || enterSizeAtom === void 0 ? void 0 : enterSizeAtom.keyframes[0]) || {}),
+            whitespaceProperties: Object.keys((enterWhitespaceAtom === null || enterWhitespaceAtom === void 0 ? void 0 : enterWhitespaceAtom.keyframes[0]) || {})
+        },
+        exit: {
+            sizeProperties: Object.keys((exitSizeAtom === null || exitSizeAtom === void 0 ? void 0 : exitSizeAtom.keyframes[0]) || {}),
+            whitespaceProperties: Object.keys((exitWhitespaceAtom === null || exitWhitespaceAtom === void 0 ? void 0 : exitWhitespaceAtom.keyframes[0]) || {})
+        }
+    };
+}
+function getSizeAtomInfo(sizeAtom, direction) {
+    const keyframes = sizeAtom.keyframes;
+    const properties = Object.keys(keyframes[0] || {});
+    return {
+        keyframeCount: keyframes.length,
+        properties,
+        hasOffset: direction === 'enter' ? 'offset' in (keyframes[1] || {}) : false,
+        hasFill: 'fill' in sizeAtom,
+        fillValue: sizeAtom.fill,
+        firstFrameValues: keyframes[0] || {},
+        lastFrameValues: keyframes[keyframes.length - 1] || {}
+    };
+}
+function getWhitespaceAtomInfo(whitespaceAtom, direction) {
+    const keyframe = whitespaceAtom.keyframes[0] || {};
+    return {
+        properties: Object.keys(keyframe),
+        offset: keyframe.offset,
+        expectedOffset: direction === 'enter' ? 0 : 1,
+        hasFill: 'fill' in whitespaceAtom,
+        fillValue: whitespaceAtom.fill,
+        isVertical: 'paddingBlockStart' in keyframe,
+        isHorizontal: 'paddingInlineStart' in keyframe
+    };
+}
+function getOpacityComparisonInfo(withOpacity, withoutOpacity) {
+    return {
+        withOpacity: {
+            enterCount: withOpacity.enter.length,
+            exitCount: withOpacity.exit.length,
+            hasEnterOpacity: withOpacity.enter.length === 3,
+            hasExitOpacity: withOpacity.exit.length === 3
+        },
+        withoutOpacity: {
+            enterCount: withoutOpacity.enter.length,
+            exitCount: withoutOpacity.exit.length,
+            hasEnterOpacity: false,
+            hasExitOpacity: false
+        }
+    };
+}

node_modules/@fluentui/react-motion-components-preview/lib-commonjs/components/Collapse/collapse-types.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

node_modules/@fluentui/react-motion-components-preview/lib-commonjs/components/Collapse/collapse-types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":""}

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Collapse: function() {
+        return _Collapse.Collapse;
+    },
+    CollapseDelayed: function() {
+        return _Collapse.CollapseDelayed;
+    },
+    CollapseRelaxed: function() {
+        return _Collapse.CollapseRelaxed;
+    },
+    CollapseSnappy: function() {
+        return _Collapse.CollapseSnappy;
+    }
+});
+const _Collapse = require("./Collapse");

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Collapse/index.ts"],"sourcesContent":["export { Collapse, CollapseDelayed, CollapseRelaxed, CollapseSnappy } from './Collapse';\nexport type { CollapseParams, CollapseDurations } from './collapse-types';\n"],"names":["Collapse","CollapseDelayed","CollapseRelaxed","CollapseSnappy"],"mappings":";;;;;;;;;;;IAASA,QAAQ;eAARA,kBAAQ;;IAAEC,eAAe;eAAfA,yBAAe;;IAAEC,eAAe;eAAfA,yBAAe;;IAAEC,cAAc;eAAdA,wBAAc;;;0BAAQ"}