feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,25 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ToolbarButton", {
+    enumerable: true,
+    get: function() {
+        return ToolbarButton;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactbutton = require("@fluentui/react-button");
+const _useToolbarButtonStylesstyles = require("./useToolbarButtonStyles.styles");
+const _useToolbarButton = require("./useToolbarButton");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const ToolbarButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useToolbarButton.useToolbarButton_unstable)(props, ref);
+    (0, _useToolbarButtonStylesstyles.useToolbarButtonStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useToolbarButtonStyles_unstable')(state);
+    return (0, _reactbutton.renderButton_unstable)(state);
+// Casting is required due to lack of distributive union to support unions on @types/react
+});
+ToolbarButton.displayName = 'ToolbarButton';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToolbarButton/ToolbarButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ToolbarButtonProps } from './ToolbarButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderButton_unstable } from '@fluentui/react-button';\nimport { useToolbarButtonStyles_unstable } from './useToolbarButtonStyles.styles';\nimport { useToolbarButton_unstable } from './useToolbarButton';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ToolbarButton component is a Button to be used inside Toolbar\n * which will respect toolbar props such as `size`\n */\nexport const ToolbarButton: ForwardRefComponent<ToolbarButtonProps> = React.forwardRef((props, ref) => {\n  const state = useToolbarButton_unstable(props, ref);\n\n  useToolbarButtonStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useToolbarButtonStyles_unstable')(state);\n\n  return renderButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToolbarButtonProps>;\n\nToolbarButton.displayName = 'ToolbarButton';\n"],"names":["React","renderButton_unstable","useToolbarButtonStyles_unstable","useToolbarButton_unstable","useCustomStyleHook_unstable","ToolbarButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BAGO,yBAAyB;8CACf,kCAAkC;kCACxC,qBAAqB;qCACnB,kCAAkC;AAMvE,MAAMK,gBAAAA,WAAAA,GAAyDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,YAAQN,2CAAAA,EAA0BI,OAAOC;QAE/CN,6DAAAA,EAAgCO;QAEhCL,gDAAAA,EAA4B,mCAAmCK;IAE/D,WAAOR,kCAAAA,EAAsBQ;AAC7B,0FAA0F;AAC5F,GAA8C;AAE9CJ,cAAcK,WAAW,GAAG"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToolbarButton/ToolbarButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, DistributiveOmit } from '@fluentui/react-utilities';\nimport { ButtonProps, ButtonSlots, ButtonState } from '@fluentui/react-button';\n\n/**\n * ToolbarButton Props\n */\nexport type ToolbarButtonProps = ComponentProps<ButtonSlots> &\n  Partial<Pick<ButtonProps, 'disabled' | 'disabledFocusable'>> & {\n    appearance?: 'primary' | 'subtle' | 'transparent';\n  } & {\n    vertical?: boolean;\n  };\n\nexport type ToolbarButtonBaseProps = DistributiveOmit<ToolbarButtonProps, 'appearance'>;\n\n/**\n * State used in rendering ToolbarButton\n */\nexport type ToolbarButtonState = ComponentState<Partial<ButtonSlots>> &\n  ButtonState &\n  Required<Pick<ToolbarButtonProps, 'vertical'>>;\n\nexport type ToolbarButtonBaseState = DistributiveOmit<ToolbarButtonState, 'appearance' | 'size' | 'shape'>;\n"],"names":[],"mappings":""}

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

@@ -0,0 +1,27 @@
+"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, {
+    ToolbarButton: function() {
+        return _ToolbarButton.ToolbarButton;
+    },
+    useToolbarButtonBase_unstable: function() {
+        return _useToolbarButton.useToolbarButtonBase_unstable;
+    },
+    useToolbarButtonStyles_unstable: function() {
+        return _useToolbarButtonStylesstyles.useToolbarButtonStyles_unstable;
+    },
+    useToolbarButton_unstable: function() {
+        return _useToolbarButton.useToolbarButton_unstable;
+    }
+});
+const _ToolbarButton = require("./ToolbarButton");
+const _useToolbarButton = require("./useToolbarButton");
+const _useToolbarButtonStylesstyles = require("./useToolbarButtonStyles.styles");

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToolbarButton/index.ts"],"sourcesContent":["export { ToolbarButton } from './ToolbarButton';\nexport type {\n  ToolbarButtonBaseProps,\n  ToolbarButtonProps,\n  ToolbarButtonBaseState,\n  ToolbarButtonState,\n} from './ToolbarButton.types';\nexport { useToolbarButton_unstable, useToolbarButtonBase_unstable } from './useToolbarButton';\nexport { useToolbarButtonStyles_unstable } from './useToolbarButtonStyles.styles';\n"],"names":["ToolbarButton","useToolbarButton_unstable","useToolbarButtonBase_unstable","useToolbarButtonStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,4BAAa;;;eAOcE,+CAA6B;;;eACxDC,6DAA+B;;;eAD/BF,2CAAyB;;;+BAPJ,kBAAkB;kCAOyB,qBAAqB;8CAC9C,kCAAkC"}

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

@@ -0,0 +1,43 @@
+'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, {
+    useToolbarButtonBase_unstable: function() {
+        return useToolbarButtonBase_unstable;
+    },
+    useToolbarButton_unstable: function() {
+        return useToolbarButton_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactbutton = require("@fluentui/react-button");
+const useToolbarButton_unstable = (props, ref)=>{
+    const state = useToolbarButtonBase_unstable(props, ref);
+    return {
+        appearance: 'subtle',
+        size: 'medium',
+        shape: 'rounded',
+        ...state
+    };
+};
+const useToolbarButtonBase_unstable = (props, ref)=>{
+    const { vertical = false, ...buttonProps } = props;
+    const state = (0, _reactbutton.useButton_unstable)({
+        appearance: 'subtle',
+        ...buttonProps,
+        size: 'medium'
+    }, ref);
+    return {
+        vertical,
+        ...state
+    };
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToolbarButton/useToolbarButton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useButton_unstable } from '@fluentui/react-button';\nimport type {\n  ToolbarButtonBaseProps,\n  ToolbarButtonBaseState,\n  ToolbarButtonProps,\n  ToolbarButtonState,\n} from './ToolbarButton.types';\n\n/**\n * Given user props, defines default props for the Button, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useToolbarButton_unstable = (\n  props: ToolbarButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarButtonState => {\n  const state = useToolbarButtonBase_unstable(props, ref);\n\n  return {\n    appearance: 'subtle',\n    size: 'medium',\n    shape: 'rounded',\n    ...state,\n  };\n};\n\n/**\n * Base hook that builds Toolbar Button 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 Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useToolbarButtonBase_unstable = (\n  props: ToolbarButtonBaseProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarButtonBaseState => {\n  const { vertical = false, ...buttonProps } = props;\n  const state = useButton_unstable(\n    {\n      appearance: 'subtle',\n      ...buttonProps,\n      size: 'medium',\n    },\n    ref,\n  );\n\n  return {\n    vertical,\n    ...state,\n  };\n};\n"],"names":["React","useButton_unstable","useToolbarButton_unstable","props","ref","state","useToolbarButtonBase_unstable","appearance","size","shape","vertical","buttonProps"],"mappings":"AAAA;;;;;;;;;;;;iCAuCaM;eAAAA;;6BAtBAJ;;;;;iEAfU,QAAQ;6BACI,yBAAyB;AAcrD,MAAMA,4BAA4B,CACvCC,OACAC;IAEA,MAAMC,QAAQC,8BAA8BH,OAAOC;IAEnD,OAAO;QACLG,YAAY;QACZC,MAAM;QACNC,OAAO;QACP,GAAGJ,KAAK;IACV;AACF,EAAE;AAUK,sCAAsC,CAC3CF,OACAC;IAEA,MAAM,EAAEM,WAAW,KAAK,EAAE,GAAGC,aAAa,GAAGR;IAC7C,MAAME,YAAQJ,+BAAAA,EACZ;QACEM,YAAY;QACZ,GAAGI,WAAW;QACdH,MAAM;IACR,GACAJ;IAGF,OAAO;QACLM;QACA,GAAGL,KAAK;IACV;AACF,EAAE"}

node_modules/@fluentui/react-toolbar/lib-commonjs/components/ToolbarButton/useToolbarButtonStyles.styles.js

@@ -0,0 +1,46 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useToolbarButtonStyles_unstable", {
+    enumerable: true,
+    get: function() {
+        return useToolbarButtonStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reactbutton = require("@fluentui/react-button");
+const useBaseStyles = /*#__PURE__*/ (0, _react.__styles)({
+    vertical: {
+        Beiy3e4: "f1vx9l62"
+    },
+    verticalIcon: {
+        Be2twd7: "f1rt2boy",
+        jrapky: 0,
+        Frg6f3: 0,
+        t21cq0: 0,
+        B6of3ja: 0,
+        B74szlk: "f1s184ao"
+    }
+}, {
+    d: [
+        ".f1vx9l62{flex-direction:column;}",
+        ".f1rt2boy{font-size:24px;}",
+        [
+            ".f1s184ao{margin:0;}",
+            {
+                p: -1
+            }
+        ]
+    ]
+});
+const useToolbarButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const buttonStyles = useBaseStyles();
+    state.root.className = (0, _react.mergeClasses)(state.vertical && buttonStyles.vertical, state.root.className);
+    if (state.icon) {
+        state.icon.className = (0, _react.mergeClasses)(state.vertical && buttonStyles.verticalIcon, state.icon.className);
+    }
+    (0, _reactbutton.useButtonStyles_unstable)(state);
+};

node_modules/@fluentui/react-toolbar/lib-commonjs/components/ToolbarButton/useToolbarButtonStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useToolbarButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nconst useBaseStyles = makeStyles({\n    vertical: {\n        flexDirection: 'column'\n    },\n    verticalIcon: {\n        fontSize: '24px',\n        margin: '0'\n    }\n});\n/**\n * Apply styling to the ToolbarButton slots based on the state\n */ export const useToolbarButtonStyles_unstable = (state)=>{\n    'use no memo';\n    const buttonStyles = useBaseStyles();\n    state.root.className = mergeClasses(state.vertical && buttonStyles.vertical, state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(state.vertical && buttonStyles.verticalIcon, state.icon.className);\n    }\n    useButtonStyles_unstable(state);\n};\n"],"names":["__styles","mergeClasses","useButtonStyles_unstable","useBaseStyles","vertical","Beiy3e4","verticalIcon","Be2twd7","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","d","p","useToolbarButtonStyles_unstable","state","buttonStyles","root","className","icon"],"mappings":"AAAA,YAAY;;;;;+BAcKe,+BAA+B;;;;;;uBAbP,gBAAgB;6BAChB,wBAAwB;AACjE,MAAMZ,aAAa,GAAA,WAAA,OAAGH,eAAA,EAAA;IAAAI,QAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,YAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAQrB,CAAC;AAGS,yCAAyCE,KAAK,IAAG;IACxD,aAAa;IACb,MAAMC,YAAY,GAAGd,aAAa,CAAC,CAAC;IACpCa,KAAK,CAACE,IAAI,CAACC,SAAS,OAAGlB,mBAAY,EAACe,KAAK,CAACZ,QAAQ,IAAIa,YAAY,CAACb,QAAQ,EAAEY,KAAK,CAACE,IAAI,CAACC,SAAS,CAAC;IAClG,IAAIH,KAAK,CAACI,IAAI,EAAE;QACZJ,KAAK,CAACI,IAAI,CAACD,SAAS,OAAGlB,mBAAY,EAACe,KAAK,CAACZ,QAAQ,IAAIa,YAAY,CAACX,YAAY,EAAEU,KAAK,CAACI,IAAI,CAACD,SAAS,CAAC;IAC1G;QACAjB,qCAAwB,EAACc,KAAK,CAAC;AACnC,CAAC"}

node_modules/@fluentui/react-toolbar/lib-commonjs/components/ToolbarButton/useToolbarButtonStyles.styles.raw.js

@@ -0,0 +1,31 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useToolbarButtonStyles_unstable", {
+    enumerable: true,
+    get: function() {
+        return useToolbarButtonStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reactbutton = require("@fluentui/react-button");
+const useBaseStyles = (0, _react.makeStyles)({
+    vertical: {
+        flexDirection: 'column'
+    },
+    verticalIcon: {
+        fontSize: '24px',
+        margin: '0'
+    }
+});
+const useToolbarButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const buttonStyles = useBaseStyles();
+    state.root.className = (0, _react.mergeClasses)(state.vertical && buttonStyles.vertical, state.root.className);
+    if (state.icon) {
+        state.icon.className = (0, _react.mergeClasses)(state.vertical && buttonStyles.verticalIcon, state.icon.className);
+    }
+    (0, _reactbutton.useButtonStyles_unstable)(state);
+};

node_modules/@fluentui/react-toolbar/lib-commonjs/components/ToolbarButton/useToolbarButtonStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToolbarButton/useToolbarButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarButtonState } from './ToolbarButton.types';\n\nconst useBaseStyles = makeStyles({\n  vertical: {\n    flexDirection: 'column',\n  },\n  verticalIcon: {\n    fontSize: '24px',\n    margin: '0',\n  },\n});\n\n/**\n * Apply styling to the ToolbarButton slots based on the state\n */\nexport const useToolbarButtonStyles_unstable = (state: ToolbarButtonState): void => {\n  'use no memo';\n\n  const buttonStyles = useBaseStyles();\n\n  state.root.className = mergeClasses(state.vertical && buttonStyles.vertical, state.root.className);\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(state.vertical && buttonStyles.verticalIcon, state.icon.className);\n  }\n\n  useButtonStyles_unstable(state);\n};\n"],"names":["makeStyles","mergeClasses","useButtonStyles_unstable","useBaseStyles","vertical","flexDirection","verticalIcon","fontSize","margin","useToolbarButtonStyles_unstable","state","buttonStyles","root","className","icon"],"mappings":"AAAA;;;;;;;;;;;uBAEyC,iBAAiB;6BACjB,yBAAyB;AAGlE,MAAMG,oBAAgBH,iBAAAA,EAAW;IAC/BI,UAAU;QACRC,eAAe;IACjB;IACAC,cAAc;QACZC,UAAU;QACVC,QAAQ;IACV;AACF;AAKO,MAAMC,kCAAkC,CAACC;IAC9C;IAEA,MAAMC,eAAeR;IAErBO,MAAME,IAAI,CAACC,SAAS,OAAGZ,mBAAAA,EAAaS,MAAMN,QAAQ,IAAIO,aAAaP,QAAQ,EAAEM,MAAME,IAAI,CAACC,SAAS;IAEjG,IAAIH,MAAMI,IAAI,EAAE;QACdJ,MAAMI,IAAI,CAACD,SAAS,OAAGZ,mBAAAA,EAAaS,MAAMN,QAAQ,IAAIO,aAAaL,YAAY,EAAEI,MAAMI,IAAI,CAACD,SAAS;IACvG;QAEAX,qCAAAA,EAAyBQ;AAC3B,EAAE"}