feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-toolbar/lib-commonjs/components/ToolbarGroup/ToolbarGroup.js

@@ -0,0 +1,25 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ToolbarGroup", {
+    enumerable: true,
+    get: function() {
+        return ToolbarGroup;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useToolbarGroup = require("./useToolbarGroup");
+const _useToolbarGroupStylesstyles = require("./useToolbarGroupStyles.styles");
+const _renderToolbarGroup = require("./renderToolbarGroup");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const ToolbarGroup = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useToolbarGroup.useToolbarGroup_unstable)(props, ref);
+    (0, _useToolbarGroupStylesstyles.useToolbarGroupStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useToolbarGroupStyles_unstable')(state);
+    return (0, _renderToolbarGroup.renderToolbarGroup_unstable)(state);
+// Casting is required due to lack of distributive union to support unions on @types/react
+});
+ToolbarGroup.displayName = 'ToolbarGroup';

node_modules/@fluentui/react-toolbar/lib-commonjs/components/ToolbarGroup/ToolbarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToolbarGroup/ToolbarGroup.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ToolbarGroupProps } from './ToolbarGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useToolbarGroup_unstable } from './useToolbarGroup';\nimport { useToolbarGroupStyles_unstable } from './useToolbarGroupStyles.styles';\nimport { renderToolbarGroup_unstable } from './renderToolbarGroup';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ToolbarGroup component is a Button to be used inside Toolbar\n * which will respect toolbar props such as `size`\n */\nexport const ToolbarGroup: ForwardRefComponent<ToolbarGroupProps> = React.forwardRef((props, ref) => {\n  const state = useToolbarGroup_unstable(props, ref);\n\n  useToolbarGroupStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useToolbarGroupStyles_unstable')(state);\n\n  return renderToolbarGroup_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToolbarGroupProps>;\n\nToolbarGroup.displayName = 'ToolbarGroup';\n"],"names":["React","useToolbarGroup_unstable","useToolbarGroupStyles_unstable","renderToolbarGroup_unstable","useCustomStyleHook_unstable","ToolbarGroup","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;iCAGU,oBAAoB;6CACd,iCAAiC;oCACpC,uBAAuB;qCACvB,kCAAkC;AAMvE,MAAMK,eAAAA,WAAAA,GAAuDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,YAAQR,yCAAAA,EAAyBM,OAAOC;QAE9CN,2DAAAA,EAA+BO;QAE/BL,gDAAAA,EAA4B,kCAAkCK;IAE9D,WAAON,+CAAAA,EAA4BM;AACnC,0FAA0F;AAC5F,GAA6C;AAE7CJ,aAAaK,WAAW,GAAG"}

node_modules/@fluentui/react-toolbar/lib-commonjs/components/ToolbarGroup/ToolbarGroup.types.js

@@ -0,0 +1,6 @@
+/**
+ * State used in rendering ToolbarButton
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

node_modules/@fluentui/react-toolbar/lib-commonjs/components/ToolbarGroup/ToolbarGroup.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToolbarGroup/ToolbarGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ToolbarGroupSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * ToolbarButton Props\n */\nexport type ToolbarGroupProps = ComponentProps<ToolbarGroupSlots>;\n\n/**\n * State used in rendering ToolbarButton\n */\nexport type ToolbarGroupState = ComponentState<ToolbarGroupSlots> & {\n  vertical?: boolean;\n};\n"],"names":[],"mappings":"AAWA;;CAEC,GACD,WAEE"}

node_modules/@fluentui/react-toolbar/lib-commonjs/components/ToolbarGroup/index.js

@@ -0,0 +1,34 @@
+"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, {
+    ToolbarGroup: function() {
+        return _ToolbarGroup.ToolbarGroup;
+    },
+    renderToolbarGroup_unstable: function() {
+        return _renderToolbarGroup.renderToolbarGroup_unstable;
+    },
+    toolbarGroupClassNames: function() {
+        return _useToolbarGroupStylesstyles.toolbarGroupClassNames;
+    },
+    useToolbarGroupBase_unstable: function() {
+        return _useToolbarGroup.useToolbarGroupBase_unstable;
+    },
+    useToolbarGroupStyles_unstable: function() {
+        return _useToolbarGroupStylesstyles.useToolbarGroupStyles_unstable;
+    },
+    useToolbarGroup_unstable: function() {
+        return _useToolbarGroup.useToolbarGroup_unstable;
+    }
+});
+const _ToolbarGroup = require("./ToolbarGroup");
+const _useToolbarGroup = require("./useToolbarGroup");
+const _useToolbarGroupStylesstyles = require("./useToolbarGroupStyles.styles");
+const _renderToolbarGroup = require("./renderToolbarGroup");

node_modules/@fluentui/react-toolbar/lib-commonjs/components/ToolbarGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToolbarGroup/index.ts"],"sourcesContent":["export { ToolbarGroup } from './ToolbarGroup';\nexport type { ToolbarGroupProps, ToolbarGroupSlots, ToolbarGroupState } from './ToolbarGroup.types';\nexport { useToolbarGroup_unstable, useToolbarGroupBase_unstable } from './useToolbarGroup';\nexport { toolbarGroupClassNames, useToolbarGroupStyles_unstable } from './useToolbarGroupStyles.styles';\nexport { renderToolbarGroup_unstable } from './renderToolbarGroup';\n"],"names":["ToolbarGroup","useToolbarGroup_unstable","useToolbarGroupBase_unstable","toolbarGroupClassNames","useToolbarGroupStyles_unstable","renderToolbarGroup_unstable"],"mappings":";;;;;;;;;;;;eAASA,0BAAY;;;eAIZK,+CAA2B;;;eAD3BF,mDAAsB;;;eADID,6CAA4B;;;eAC9BE,2DAA8B;;;eADtDH,yCAAwB;;;8BAFJ,iBAAiB;iCAEyB,oBAAoB;6CACpB,iCAAiC;oCAC5D,uBAAuB"}

node_modules/@fluentui/react-toolbar/lib-commonjs/components/ToolbarGroup/renderToolbarGroup.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderToolbarGroup_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderToolbarGroup_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
+const renderToolbarGroup_unstable = (state)=>{
+    (0, _reactutilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
+        children: state.root.children
+    });
+};

node_modules/@fluentui/react-toolbar/lib-commonjs/components/ToolbarGroup/renderToolbarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToolbarGroup/renderToolbarGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { ToolbarGroupState, ToolbarGroupSlots } from './ToolbarGroup.types';\n\n/**\n * Render the final JSX of ToolbarGroup\n */\nexport const renderToolbarGroup_unstable = (state: ToolbarGroupState): JSXElement => {\n  assertSlots<ToolbarGroupSlots>(state);\n\n  return <state.root>{state.root.children}</state.root>;\n};\n"],"names":["assertSlots","renderToolbarGroup_unstable","state","root","children"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCACrB,4BAA4B;AAOjD,MAAMC,8BAA8B,CAACC;QAC1CF,2BAAAA,EAA+BE;IAE/B,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA;kBAAED,MAAMC,IAAI,CAACC,QAAQ;;AACzC,EAAE"}

node_modules/@fluentui/react-toolbar/lib-commonjs/components/ToolbarGroup/useToolbarGroup.js

@@ -0,0 +1,42 @@
+'use client';
+"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, {
+    useToolbarGroupBase_unstable: function() {
+        return useToolbarGroupBase_unstable;
+    },
+    useToolbarGroup_unstable: function() {
+        return useToolbarGroup_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactutilities = require("@fluentui/react-utilities");
+const _ToolbarContext = require("../Toolbar/ToolbarContext");
+const useToolbarGroup_unstable = (props, ref)=>{
+    return useToolbarGroupBase_unstable(props, ref);
+};
+const useToolbarGroupBase_unstable = (props, ref)=>{
+    const vertical = (0, _ToolbarContext.useToolbarContext_unstable)((ctx)=>ctx.vertical);
+    return {
+        components: {
+            root: 'div'
+        },
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
+            ref,
+            role: 'presentation',
+            ...props
+        }), {
+            elementType: 'div'
+        }),
+        vertical
+    };
+};

node_modules/@fluentui/react-toolbar/lib-commonjs/components/ToolbarGroup/useToolbarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToolbarGroup/useToolbarGroup.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport type { ToolbarGroupProps, ToolbarGroupState } from './ToolbarGroup.types';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\n\n/**\n * Given user props, defines default props for the Group\n * @param props - User provided props to the Group component.\n * @param ref - User provided ref to be passed to the Group component.\n */\nexport const useToolbarGroup_unstable = (\n  props: ToolbarGroupProps,\n  ref: React.Ref<HTMLDivElement>,\n): ToolbarGroupState => {\n  return useToolbarGroupBase_unstable(props, ref);\n};\n\n/**\n * Base hook that builds Toolbar Group state for behavior and structure only.\n * It does not provide any design-related defaults.\n *\n * @internal\n * @param props - User provided props to the Group component.\n * @param ref - User provided ref to be passed to the Group component.\n */\nexport const useToolbarGroupBase_unstable = (\n  props: ToolbarGroupProps,\n  ref: React.Ref<HTMLDivElement>,\n): ToolbarGroupState => {\n  const vertical = useToolbarContext_unstable(ctx => ctx.vertical);\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps<React.HTMLAttributes<HTMLDivElement>>('div', {\n        ref,\n        role: 'presentation',\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    vertical,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useToolbarContext_unstable","useToolbarGroup_unstable","props","ref","useToolbarGroupBase_unstable","vertical","ctx","components","root","always","role","elementType"],"mappings":"AAAA;;;;;;;;;;;;gCA4BaO;eAAAA;;4BAfAH;;;;;iEAXU,QAAQ;gCAGgB,4BAA4B;gCAChC,4BAA4B;AAOhE,MAAMA,2BAA2B,CACtCC,OACAC;IAEA,OAAOC,6BAA6BF,OAAOC;AAC7C,EAAE;AAUK,qCAAqC,CAC1CD,OACAC;IAEA,MAAME,eAAWL,0CAAAA,EAA2BM,CAAAA,MAAOA,IAAID,QAAQ;IAE/D,OAAO;QACLE,YAAY;YACVC,MAAM;QACR;QACAA,MAAMT,oBAAAA,CAAKU,MAAM,KACfX,wCAAAA,EAA+D,OAAO;YACpEK;YACAO,MAAM;YACN,GAAGR,KAAK;QACV,IACA;YAAES,aAAa;QAAM;QAEvBN;IACF;AACF,EAAE"}

node_modules/@fluentui/react-toolbar/lib-commonjs/components/ToolbarGroup/useToolbarGroupStyles.styles.js

@@ -0,0 +1,47 @@
+'use client';
+"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, {
+    toolbarGroupClassNames: function() {
+        return toolbarGroupClassNames;
+    },
+    useToolbarGroupStyles_unstable: function() {
+        return useToolbarGroupStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const toolbarGroupClassNames = {
+    root: 'fui-ToolbarGroup'
+};
+const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        mc9l5x: "f22iagw",
+        Bt984gj: "f122n59"
+    },
+    vertical: {
+        Beiy3e4: "f1vx9l62",
+        a9b677: "f1acs6jw"
+    }
+}, {
+    d: [
+        ".f22iagw{display:flex;}",
+        ".f122n59{align-items:center;}",
+        ".f1vx9l62{flex-direction:column;}",
+        ".f1acs6jw{width:fit-content;}"
+    ]
+});
+const useToolbarGroupStyles_unstable = (state)=>{
+    'use no memo';
+    const { vertical } = state;
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(toolbarGroupClassNames.root, styles.root, vertical && styles.vertical, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-toolbar/lib-commonjs/components/ToolbarGroup/useToolbarGroupStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useToolbarGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const toolbarGroupClassNames = {\n    root: 'fui-ToolbarGroup'\n};\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        alignItems: 'center'\n    },\n    vertical: {\n        flexDirection: 'column',\n        width: 'fit-content'\n    }\n});\n/**\n * Apply styling to the Toolbar slots based on the state\n */ export const useToolbarGroupStyles_unstable = (state)=>{\n    'use no memo';\n    const { vertical } = state;\n    const styles = useStyles();\n    state.root.className = mergeClasses(toolbarGroupClassNames.root, styles.root, vertical && styles.vertical, state.root.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","toolbarGroupClassNames","root","useStyles","mc9l5x","Bt984gj","vertical","Beiy3e4","a9b677","d","useToolbarGroupStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECE,sBAAsB;;;kCAeY;eAA9BS;;;uBAhBwB,gBAAgB;AAClD,+BAA+B;IAClCR,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAG,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CASjB,CAAC;AAGS,wCAAwCE,KAAK,IAAG;IACvD,aAAa;IACb,MAAM,EAAEL,QAAAA,EAAU,GAAGK,KAAK;IAC1B,MAAMC,MAAM,GAAGT,SAAS,CAAC,CAAC;IAC1BQ,KAAK,CAACT,IAAI,CAACW,SAAS,OAAGb,mBAAY,EAACC,sBAAsB,CAACC,IAAI,EAAEU,MAAM,CAACV,IAAI,EAAEI,QAAQ,IAAIM,MAAM,CAACN,QAAQ,EAAEK,KAAK,CAACT,IAAI,CAACW,SAAS,CAAC;IAChI,OAAOF,KAAK;AAChB,CAAC"}

node_modules/@fluentui/react-toolbar/lib-commonjs/components/ToolbarGroup/useToolbarGroupStyles.styles.raw.js

@@ -0,0 +1,40 @@
+'use client';
+"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, {
+    toolbarGroupClassNames: function() {
+        return toolbarGroupClassNames;
+    },
+    useToolbarGroupStyles_unstable: function() {
+        return useToolbarGroupStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const toolbarGroupClassNames = {
+    root: 'fui-ToolbarGroup'
+};
+const useStyles = (0, _react.makeStyles)({
+    root: {
+        display: 'flex',
+        alignItems: 'center'
+    },
+    vertical: {
+        flexDirection: 'column',
+        width: 'fit-content'
+    }
+});
+const useToolbarGroupStyles_unstable = (state)=>{
+    'use no memo';
+    const { vertical } = state;
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(toolbarGroupClassNames.root, styles.root, vertical && styles.vertical, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-toolbar/lib-commonjs/components/ToolbarGroup/useToolbarGroupStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToolbarGroup/useToolbarGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\n\nimport type { ToolbarGroupSlots, ToolbarGroupState } from './ToolbarGroup.types';\n\nexport const toolbarGroupClassNames: SlotClassNames<ToolbarGroupSlots> = {\n  root: 'fui-ToolbarGroup',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n  vertical: {\n    flexDirection: 'column',\n    width: 'fit-content',\n  },\n});\n\n/**\n * Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarGroupStyles_unstable = (state: ToolbarGroupState): ToolbarGroupState => {\n  'use no memo';\n\n  const { vertical } = state;\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(\n    toolbarGroupClassNames.root,\n    styles.root,\n    vertical && styles.vertical,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","toolbarGroupClassNames","root","useStyles","display","alignItems","vertical","flexDirection","width","useToolbarGroupStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaE,sBAAAA;;;IAkBAQ,8BAAAA;;;;uBAtB4B,iBAAiB;AAInD,+BAAkE;IACvEP,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYJ,iBAAAA,EAAW;IAC3BG,MAAM;QACJE,SAAS;QACTC,YAAY;IACd;IACAC,UAAU;QACRC,eAAe;QACfC,OAAO;IACT;AACF;AAKO,uCAAuC,CAACE;IAC7C;IAEA,MAAM,EAAEJ,QAAQ,EAAE,GAAGI;IACrB,MAAMC,SAASR;IAEfO,MAAMR,IAAI,CAACU,SAAS,OAAGZ,mBAAAA,EACrBC,uBAAuBC,IAAI,EAC3BS,OAAOT,IAAI,EACXI,YAAYK,OAAOL,QAAQ,EAC3BI,MAAMR,IAAI,CAACU,SAAS;IAGtB,OAAOF;AACT,EAAE"}