feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-message-bar/lib/components/MessageBarGroup/MessageBarGroup.js

@@ -0,0 +1,15 @@
+'use client';
+import * as React from 'react';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useMessageBarGroup_unstable } from './useMessageBarGroup';
+import { renderMessageBarGroup_unstable } from './renderMessageBarGroup';
+import { useMessageBarGroupStyles_unstable } from './useMessageBarGroupStyles.styles';
+/**
+ * MessageBarGroup component
+ */ export const MessageBarGroup = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useMessageBarGroup_unstable(props, ref);
+    useMessageBarGroupStyles_unstable(state);
+    useCustomStyleHook_unstable('useMessageBarGroupStyles_unstable')(state);
+    return renderMessageBarGroup_unstable(state);
+});
+MessageBarGroup.displayName = 'MessageBarGroup';

node_modules/@fluentui/react-message-bar/lib/components/MessageBarGroup/MessageBarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MessageBarGroup/MessageBarGroup.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useMessageBarGroup_unstable } from './useMessageBarGroup';\nimport { renderMessageBarGroup_unstable } from './renderMessageBarGroup';\nimport { useMessageBarGroupStyles_unstable } from './useMessageBarGroupStyles.styles';\nimport type { MessageBarGroupProps } from './MessageBarGroup.types';\n\n/**\n * MessageBarGroup component\n */\nexport const MessageBarGroup: ForwardRefComponent<MessageBarGroupProps> = React.forwardRef((props, ref) => {\n  const state = useMessageBarGroup_unstable(props, ref);\n\n  useMessageBarGroupStyles_unstable(state);\n  useCustomStyleHook_unstable('useMessageBarGroupStyles_unstable')(state);\n  return renderMessageBarGroup_unstable(state);\n});\n\nMessageBarGroup.displayName = 'MessageBarGroup';\n"],"names":["React","useCustomStyleHook_unstable","useMessageBarGroup_unstable","renderMessageBarGroup_unstable","useMessageBarGroupStyles_unstable","MessageBarGroup","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,iCAAiC,QAAQ,oCAAoC;AAGtF;;CAEC,GACD,OAAO,MAAMC,gCAA6DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQP,4BAA4BK,OAAOC;IAEjDJ,kCAAkCK;IAClCR,4BAA4B,qCAAqCQ;IACjE,OAAON,+BAA+BM;AACxC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}

node_modules/@fluentui/react-message-bar/lib/components/MessageBarGroup/MessageBarGroup.motions.js

@@ -0,0 +1,28 @@
+import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';
+import { fadeAtom, slideAtom } from '@fluentui/react-motion-components-preview';
+/**
+ * A presence component for a MessageBar to enter and exit from a MessageBarGroup.
+ * It has an optional enter transition of a slide-in and fade-in,
+ * when the `animate` prop is set to `'both'`.
+ * It always has an exit transition of a fade-out.
+ */ export const MessageBarMotion = createPresenceComponent(({ animate })=>{
+    const duration = motionTokens.durationGentle;
+    return {
+        enter: animate === 'both' ? [
+            fadeAtom({
+                direction: 'enter',
+                duration
+            }),
+            slideAtom({
+                direction: 'enter',
+                outY: '-100%',
+                duration
+            })
+        ] : [],
+        // Always exit with a fade
+        exit: fadeAtom({
+            direction: 'exit',
+            duration
+        })
+    };
+});

node_modules/@fluentui/react-message-bar/lib/components/MessageBarGroup/MessageBarGroup.motions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MessageBarGroup/MessageBarGroup.motions.tsx"],"sourcesContent":["import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';\nimport { fadeAtom, slideAtom } from '@fluentui/react-motion-components-preview';\nimport { MessageBarGroupProps } from './MessageBarGroup.types';\n\n/**\n * A presence component for a MessageBar to enter and exit from a MessageBarGroup.\n * It has an optional enter transition of a slide-in and fade-in,\n * when the `animate` prop is set to `'both'`.\n * It always has an exit transition of a fade-out.\n */\nexport const MessageBarMotion = createPresenceComponent<{ animate?: MessageBarGroupProps['animate'] }>(\n  ({ animate }) => {\n    const duration = motionTokens.durationGentle;\n\n    return {\n      enter:\n        animate === 'both'\n          ? // enter with slide and fade\n            [fadeAtom({ direction: 'enter', duration }), slideAtom({ direction: 'enter', outY: '-100%', duration })]\n          : [], // no enter motion\n\n      // Always exit with a fade\n      exit: fadeAtom({ direction: 'exit', duration }),\n    };\n  },\n);\n"],"names":["motionTokens","createPresenceComponent","fadeAtom","slideAtom","MessageBarMotion","animate","duration","durationGentle","enter","direction","outY","exit"],"mappings":"AAAA,SAASA,YAAY,EAAEC,uBAAuB,QAAQ,yBAAyB;AAC/E,SAASC,QAAQ,EAAEC,SAAS,QAAQ,4CAA4C;AAGhF;;;;;CAKC,GACD,OAAO,MAAMC,mBAAmBH,wBAC9B,CAAC,EAAEI,OAAO,EAAE;IACV,MAAMC,WAAWN,aAAaO,cAAc;IAE5C,OAAO;QACLC,OACEH,YAAY,SAER;YAACH,SAAS;gBAAEO,WAAW;gBAASH;YAAS;YAAIH,UAAU;gBAAEM,WAAW;gBAASC,MAAM;gBAASJ;YAAS;SAAG,GACxG,EAAE;QAER,0BAA0B;QAC1BK,MAAMT,SAAS;YAAEO,WAAW;YAAQH;QAAS;IAC/C;AACF,GACA"}

node_modules/@fluentui/react-message-bar/lib/components/MessageBarGroup/MessageBarGroup.types.js

@@ -0,0 +1 @@
+import * as React from 'react';

node_modules/@fluentui/react-message-bar/lib/components/MessageBarGroup/MessageBarGroup.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MessageBarGroup/MessageBarGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type MessageBarGroupSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * MessageBarGroup Props\n */\nexport type MessageBarGroupProps = ComponentProps<MessageBarGroupSlots> & {\n  children: React.ReactElement[] | React.ReactElement;\n  animate?: 'exit-only' | 'both';\n};\n\n/**\n * State used in rendering MessageBarGroup\n */\nexport type MessageBarGroupState = ComponentState<MessageBarGroupSlots> &\n  Pick<MessageBarGroupProps, 'animate'> & {\n    /** @deprecated property is unused; these CSS animations were replaced by motion components */\n    enterStyles: string;\n    /** @deprecated property is unused; these CSS animations were replaced by motion components */\n    exitStyles: string;\n    children: React.ReactElement[];\n  };\n"],"names":["React"],"mappings":"AACA,YAAYA,WAAW,QAAQ"}

node_modules/@fluentui/react-message-bar/lib/components/MessageBarGroup/index.js

@@ -0,0 +1,4 @@
+export { MessageBarGroup } from './MessageBarGroup';
+export { renderMessageBarGroup_unstable } from './renderMessageBarGroup';
+export { useMessageBarGroup_unstable } from './useMessageBarGroup';
+export { messageBarGroupClassNames, useMessageBarGroupStyles_unstable } from './useMessageBarGroupStyles.styles';

node_modules/@fluentui/react-message-bar/lib/components/MessageBarGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MessageBarGroup/index.ts"],"sourcesContent":["export { MessageBarGroup } from './MessageBarGroup';\nexport type { MessageBarGroupProps, MessageBarGroupSlots, MessageBarGroupState } from './MessageBarGroup.types';\nexport { renderMessageBarGroup_unstable } from './renderMessageBarGroup';\nexport { useMessageBarGroup_unstable } from './useMessageBarGroup';\nexport { messageBarGroupClassNames, useMessageBarGroupStyles_unstable } from './useMessageBarGroupStyles.styles';\n"],"names":["MessageBarGroup","renderMessageBarGroup_unstable","useMessageBarGroup_unstable","messageBarGroupClassNames","useMessageBarGroupStyles_unstable"],"mappings":"AAAA,SAASA,eAAe,QAAQ,oBAAoB;AAEpD,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,yBAAyB,EAAEC,iCAAiC,QAAQ,oCAAoC"}

node_modules/@fluentui/react-message-bar/lib/components/MessageBarGroup/renderMessageBarGroup.js

@@ -0,0 +1,21 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+import { PresenceGroup } from '@fluentui/react-motion';
+import { MessageBarMotion } from './MessageBarGroup.motions';
+import { MotionRefForwarder } from '@fluentui/react-motion';
+/**
+ * Render the final JSX of MessageBarGroup
+ */ export const renderMessageBarGroup_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {
+        children: /*#__PURE__*/ _jsx(PresenceGroup, {
+            children: state.children.map((child)=>/*#__PURE__*/ _jsx(MessageBarMotion, {
+                    animate: state.animate,
+                    unmountOnExit: true,
+                    children: /*#__PURE__*/ _jsx(MotionRefForwarder, {
+                        children: child
+                    })
+                }, child.key))
+        })
+    });
+};

node_modules/@fluentui/react-message-bar/lib/components/MessageBarGroup/renderMessageBarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MessageBarGroup/renderMessageBarGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { MessageBarGroupState, MessageBarGroupSlots } from './MessageBarGroup.types';\nimport { PresenceGroup } from '@fluentui/react-motion';\nimport { MessageBarMotion } from './MessageBarGroup.motions';\nimport { MotionRefForwarder } from '@fluentui/react-motion';\n\n/**\n * Render the final JSX of MessageBarGroup\n */\nexport const renderMessageBarGroup_unstable = (state: MessageBarGroupState): JSXElement => {\n  assertSlots<MessageBarGroupSlots>(state);\n\n  return (\n    <state.root>\n      <PresenceGroup>\n        {state.children.map(child => (\n          <MessageBarMotion key={child.key} animate={state.animate} unmountOnExit>\n            <MotionRefForwarder>{child}</MotionRefForwarder>\n          </MessageBarMotion>\n        ))}\n      </PresenceGroup>\n    </state.root>\n  );\n};\n"],"names":["assertSlots","PresenceGroup","MessageBarMotion","MotionRefForwarder","renderMessageBarGroup_unstable","state","root","children","map","child","animate","unmountOnExit","key"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,aAAa,QAAQ,yBAAyB;AACvD,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,kBAAkB,QAAQ,yBAAyB;AAE5D;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7CL,YAAkCK;IAElC,qBACE,KAACA,MAAMC,IAAI;kBACT,cAAA,KAACL;sBACEI,MAAME,QAAQ,CAACC,GAAG,CAACC,CAAAA,sBAClB,KAACP;oBAAiCQ,SAASL,MAAMK,OAAO;oBAAEC,aAAa;8BACrE,cAAA,KAACR;kCAAoBM;;mBADAA,MAAMG,GAAG;;;AAO1C,EAAE"}

node_modules/@fluentui/react-message-bar/lib/components/MessageBarGroup/useMessageBarGroup.js

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+/**
+ * Create the state required to render MessageBarGroup.
+ *
+ * The returned state can be modified with hooks such as useMessageBarGroupStyles_unstable,
+ * before being passed to renderMessageBarGroup_unstable.
+ *
+ * @param props - props from this instance of MessageBarGroup
+ * @param ref - reference to root HTMLElement of MessageBarGroup
+ */ export const useMessageBarGroup_unstable = (props, ref)=>{
+    if (process.env.NODE_ENV !== 'production') {
+        React.Children.forEach(props.children, (c)=>{
+            if (!React.isValidElement(c) || c.type === React.Fragment) {
+                throw new Error("MessageBarGroup: children must be valid MessageBar components. Please ensure you're not using fragments. ");
+            }
+        });
+    }
+    var _props_children;
+    const children = React.Children.map((_props_children = props.children) !== null && _props_children !== void 0 ? _props_children : [], (c)=>React.isValidElement(c) && c.type !== React.Fragment ? c : null).filter(Boolean);
+    var _props_animate;
+    return {
+        components: {
+            root: 'div'
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ref,
+            ...props
+        }), {
+            elementType: 'div'
+        }),
+        children,
+        animate: (_props_animate = props.animate) !== null && _props_animate !== void 0 ? _props_animate : 'exit-only',
+        enterStyles: '',
+        exitStyles: ''
+    };
+};

node_modules/@fluentui/react-message-bar/lib/components/MessageBarGroup/useMessageBarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MessageBarGroup/useMessageBarGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport type { MessageBarGroupProps, MessageBarGroupState } from './MessageBarGroup.types';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render MessageBarGroup.\n *\n * The returned state can be modified with hooks such as useMessageBarGroupStyles_unstable,\n * before being passed to renderMessageBarGroup_unstable.\n *\n * @param props - props from this instance of MessageBarGroup\n * @param ref - reference to root HTMLElement of MessageBarGroup\n */\nexport const useMessageBarGroup_unstable = (\n  props: MessageBarGroupProps,\n  ref: React.Ref<HTMLDivElement>,\n): MessageBarGroupState => {\n  if (process.env.NODE_ENV !== 'production') {\n    React.Children.forEach(props.children, c => {\n      if (!React.isValidElement(c) || c.type === React.Fragment) {\n        throw new Error(\n          \"MessageBarGroup: children must be valid MessageBar components. Please ensure you're not using fragments. \",\n        );\n      }\n    });\n  }\n\n  const children = React.Children.map(props.children ?? [], c =>\n    React.isValidElement(c) && c.type !== React.Fragment ? c : null,\n  ).filter(Boolean);\n\n  return {\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    children,\n    animate: props.animate ?? 'exit-only',\n    enterStyles: '',\n    exitStyles: '',\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useMessageBarGroup_unstable","props","ref","process","env","NODE_ENV","Children","forEach","children","c","isValidElement","type","Fragment","Error","map","filter","Boolean","components","root","always","elementType","animate","enterStyles","exitStyles"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzCR,MAAMS,QAAQ,CAACC,OAAO,CAACN,MAAMO,QAAQ,EAAEC,CAAAA;YACrC,IAAI,CAACZ,MAAMa,cAAc,CAACD,MAAMA,EAAEE,IAAI,KAAKd,MAAMe,QAAQ,EAAE;gBACzD,MAAM,IAAIC,MACR;YAEJ;QACF;IACF;QAEoCZ;IAApC,MAAMO,WAAWX,MAAMS,QAAQ,CAACQ,GAAG,CAACb,CAAAA,kBAAAA,MAAMO,QAAQ,cAAdP,6BAAAA,kBAAkB,EAAE,EAAEQ,CAAAA,IACxDZ,MAAMa,cAAc,CAACD,MAAMA,EAAEE,IAAI,KAAKd,MAAMe,QAAQ,GAAGH,IAAI,MAC3DM,MAAM,CAACC;QAeEf;IAbX,OAAO;QACLgB,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMnB,KAAKoB,MAAM,CACfrB,yBAAyB,OAAO;YAC9BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEmB,aAAa;QAAM;QAEvBZ;QACAa,SAASpB,CAAAA,iBAAAA,MAAMoB,OAAO,cAAbpB,4BAAAA,iBAAiB;QAC1BqB,aAAa;QACbC,YAAY;IACd;AACF,EAAE"}

node_modules/@fluentui/react-message-bar/lib/components/MessageBarGroup/useMessageBarGroupStyles.styles.js

@@ -0,0 +1,13 @@
+import { mergeClasses } from '@griffel/react';
+export const messageBarGroupClassNames = {
+  root: 'fui-MessageBarGroup'
+};
+/**
+ * Apply styling to the MessageBarGroup slots based on the state
+ */
+export const useMessageBarGroupStyles_unstable = state => {
+  'use no memo';
+
+  state.root.className = mergeClasses(messageBarGroupClassNames.root, state.root.className);
+  return state;
+};

node_modules/@fluentui/react-message-bar/lib/components/MessageBarGroup/useMessageBarGroupStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["mergeClasses","messageBarGroupClassNames","root","useMessageBarGroupStyles_unstable","state","className"],"sources":["useMessageBarGroupStyles.styles.js"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nexport const messageBarGroupClassNames = {\n    root: 'fui-MessageBarGroup'\n};\n/**\n * Apply styling to the MessageBarGroup slots based on the state\n */ export const useMessageBarGroupStyles_unstable = (state)=>{\n    'use no memo';\n    state.root.className = mergeClasses(messageBarGroupClassNames.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB;AAC7C,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACbA,KAAK,CAACF,IAAI,CAACG,SAAS,GAAGL,YAAY,CAACC,yBAAyB,CAACC,IAAI,EAAEE,KAAK,CAACF,IAAI,CAACG,SAAS,CAAC;EACzF,OAAOD,KAAK;AAChB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-message-bar/lib/components/MessageBarGroup/useMessageBarGroupStyles.styles.raw.js

@@ -0,0 +1,11 @@
+import { mergeClasses } from '@griffel/react';
+export const messageBarGroupClassNames = {
+    root: 'fui-MessageBarGroup'
+};
+/**
+ * Apply styling to the MessageBarGroup slots based on the state
+ */ export const useMessageBarGroupStyles_unstable = (state)=>{
+    'use no memo';
+    state.root.className = mergeClasses(messageBarGroupClassNames.root, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-message-bar/lib/components/MessageBarGroup/useMessageBarGroupStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MessageBarGroup/useMessageBarGroupStyles.styles.ts"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MessageBarGroupSlots, MessageBarGroupState } from './MessageBarGroup.types';\n\nexport const messageBarGroupClassNames: SlotClassNames<MessageBarGroupSlots> = {\n  root: 'fui-MessageBarGroup',\n};\n\n/**\n * Apply styling to the MessageBarGroup slots based on the state\n */\nexport const useMessageBarGroupStyles_unstable = (state: MessageBarGroupState): MessageBarGroupState => {\n  'use no memo';\n\n  state.root.className = mergeClasses(messageBarGroupClassNames.root, state.root.className);\n  return state;\n};\n"],"names":["mergeClasses","messageBarGroupClassNames","root","useMessageBarGroupStyles_unstable","state","className"],"mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAI9C,OAAO,MAAMC,4BAAkE;IAC7EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,oCAAoC,CAACC;IAChD;IAEAA,MAAMF,IAAI,CAACG,SAAS,GAAGL,aAAaC,0BAA0BC,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IACxF,OAAOD;AACT,EAAE"}