feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-toast/lib/components/Toast/Toast.js

@@ -0,0 +1,16 @@
+'use client';
+import * as React from 'react';
+import { useToast_unstable } from './useToast';
+import { renderToast_unstable } from './renderToast';
+import { useToastStyles_unstable } from './useToastStyles.styles';
+import { useToastContextValues_unstable } from './useToastContextValues';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * Toast component
+ */ export const Toast = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useToast_unstable(props, ref);
+    useToastStyles_unstable(state);
+    useCustomStyleHook_unstable('useToastStyles_unstable')(state);
+    return renderToast_unstable(state, useToastContextValues_unstable(state));
+});
+Toast.displayName = 'Toast';

node_modules/@fluentui/react-toast/lib/components/Toast/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Toast/Toast.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useToast_unstable } from './useToast';\nimport { renderToast_unstable } from './renderToast';\nimport { useToastStyles_unstable } from './useToastStyles.styles';\nimport type { ToastProps } from './Toast.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useToastContextValues_unstable } from './useToastContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Toast component\n */\nexport const Toast: ForwardRefComponent<ToastProps> = React.forwardRef((props, ref) => {\n  const state = useToast_unstable(props, ref);\n\n  useToastStyles_unstable(state);\n  useCustomStyleHook_unstable('useToastStyles_unstable')(state);\n\n  return renderToast_unstable(state, useToastContextValues_unstable(state));\n});\n\nToast.displayName = 'Toast';\n"],"names":["React","useToast_unstable","renderToast_unstable","useToastStyles_unstable","useToastContextValues_unstable","useCustomStyleHook_unstable","Toast","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,0BAA0B;AAGlE,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,sBAAyCN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC7E,MAAMC,QAAQT,kBAAkBO,OAAOC;IAEvCN,wBAAwBO;IACxBL,4BAA4B,2BAA2BK;IAEvD,OAAOR,qBAAqBQ,OAAON,+BAA+BM;AACpE,GAAG;AAEHJ,MAAMK,WAAW,GAAG"}

node_modules/@fluentui/react-toast/lib/components/Toast/Toast.types.js

@@ -0,0 +1,3 @@
+/**
+ * State used in rendering Toast
+ */ export { };

node_modules/@fluentui/react-toast/lib/components/Toast/Toast.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Toast/Toast.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { BackgroundAppearanceContextValue } from '@fluentui/react-shared-contexts';\nimport type { ToastIntent } from '../../state/types';\n\nexport type ToastSlots = {\n  root: Slot<'div'>;\n};\n\nexport type ToastContextValues = {\n  backgroundAppearance: BackgroundAppearanceContextValue;\n};\n\n/**\n * Toast Props\n */\nexport type ToastProps = ComponentProps<ToastSlots> & {\n  appearance?: BackgroundAppearanceContextValue;\n};\n\n/**\n * State used in rendering Toast\n */\nexport type ToastState = ComponentState<ToastSlots> & {\n  backgroundAppearance: BackgroundAppearanceContextValue;\n  intent?: ToastIntent | undefined;\n};\n"],"names":[],"mappings":"AAmBA;;CAEC,GACD,WAGE"}

node_modules/@fluentui/react-toast/lib/components/Toast/index.js

@@ -0,0 +1,4 @@
+export { Toast } from './Toast';
+export { renderToast_unstable } from './renderToast';
+export { useToast_unstable } from './useToast';
+export { toastClassNames, useToastStyles_unstable } from './useToastStyles.styles';

node_modules/@fluentui/react-toast/lib/components/Toast/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Toast/index.ts"],"sourcesContent":["export { Toast } from './Toast';\nexport type { ToastContextValues, ToastProps, ToastSlots, ToastState } from './Toast.types';\nexport { renderToast_unstable } from './renderToast';\nexport { useToast_unstable } from './useToast';\nexport { toastClassNames, useToastStyles_unstable } from './useToastStyles.styles';\n"],"names":["Toast","renderToast_unstable","useToast_unstable","toastClassNames","useToastStyles_unstable"],"mappings":"AAAA,SAASA,KAAK,QAAQ,UAAU;AAEhC,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,eAAe,EAAEC,uBAAuB,QAAQ,0BAA0B"}

node_modules/@fluentui/react-toast/lib/components/Toast/renderToast.js

@@ -0,0 +1,12 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+import { BackgroundAppearanceProvider } from '@fluentui/react-shared-contexts';
+/**
+ * Render the final JSX of Toast
+ */ export const renderToast_unstable = (state, contextValues)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(BackgroundAppearanceProvider, {
+        value: contextValues.backgroundAppearance,
+        children: /*#__PURE__*/ _jsx(state.root, {})
+    });
+};

node_modules/@fluentui/react-toast/lib/components/Toast/renderToast.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Toast/renderToast.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { BackgroundAppearanceProvider } from '@fluentui/react-shared-contexts';\nimport type { ToastState, ToastSlots, ToastContextValues } from './Toast.types';\n\n/**\n * Render the final JSX of Toast\n */\nexport const renderToast_unstable = (state: ToastState, contextValues: ToastContextValues): JSXElement => {\n  assertSlots<ToastSlots>(state);\n\n  return (\n    <BackgroundAppearanceProvider value={contextValues.backgroundAppearance}>\n      <state.root />\n    </BackgroundAppearanceProvider>\n  );\n};\n"],"names":["assertSlots","BackgroundAppearanceProvider","renderToast_unstable","state","contextValues","value","backgroundAppearance","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,4BAA4B,QAAQ,kCAAkC;AAG/E;;CAEC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAmBC;IACtDJ,YAAwBG;IAExB,qBACE,KAACF;QAA6BI,OAAOD,cAAcE,oBAAoB;kBACrE,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}

node_modules/@fluentui/react-toast/lib/components/Toast/useToast.js

@@ -0,0 +1,31 @@
+'use client';
+import * as React from 'react';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { useToastContainerContext } from '../../contexts/toastContainerContext';
+/**
+ * Create the state required to render Toast.
+ *
+ * The returned state can be modified with hooks such as useToastStyles_unstable,
+ * before being passed to renderToast_unstable.
+ *
+ * @param props - props from this instance of Toast
+ * @param ref - reference to root HTMLElement of Toast
+ */ export const useToast_unstable = (props, ref)=>{
+    const { intent } = useToastContainerContext();
+    return {
+        components: {
+            root: 'div'
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            // FIXME:
+            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+            ref: ref,
+            ...props
+        }), {
+            elementType: 'div'
+        }),
+        backgroundAppearance: props.appearance,
+        intent
+    };
+};

node_modules/@fluentui/react-toast/lib/components/Toast/useToast.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Toast/useToast.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { ToastProps, ToastState } from './Toast.types';\nimport { useToastContainerContext } from '../../contexts/toastContainerContext';\n\n/**\n * Create the state required to render Toast.\n *\n * The returned state can be modified with hooks such as useToastStyles_unstable,\n * before being passed to renderToast_unstable.\n *\n * @param props - props from this instance of Toast\n * @param ref - reference to root HTMLElement of Toast\n */\nexport const useToast_unstable = (props: ToastProps, ref: React.Ref<HTMLElement>): ToastState => {\n  const { intent } = useToastContainerContext();\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    backgroundAppearance: props.appearance,\n    intent,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useToastContainerContext","useToast_unstable","props","ref","intent","components","root","always","elementType","backgroundAppearance","appearance"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,wBAAwB,QAAQ,uCAAuC;AAEhF;;;;;;;;CAQC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC;IACnD,MAAM,EAAEC,MAAM,EAAE,GAAGJ;IAEnB,OAAO;QACLK,YAAY;YACVC,MAAM;QACR;QACAA,MAAMP,KAAKQ,MAAM,CACfT,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FK,KAAKA;YACL,GAAGD,KAAK;QACV,IACA;YAAEM,aAAa;QAAM;QAEvBC,sBAAsBP,MAAMQ,UAAU;QACtCN;IACF;AACF,EAAE"}

node_modules/@fluentui/react-toast/lib/components/Toast/useToastContextValues.js

@@ -0,0 +1,6 @@
+export function useToastContextValues_unstable(state) {
+    const { backgroundAppearance } = state;
+    return {
+        backgroundAppearance
+    };
+}

node_modules/@fluentui/react-toast/lib/components/Toast/useToastContextValues.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Toast/useToastContextValues.ts"],"sourcesContent":["import { ToastContextValues, ToastState } from './Toast.types';\n\nexport function useToastContextValues_unstable(state: ToastState): ToastContextValues {\n  const { backgroundAppearance } = state;\n\n  return {\n    backgroundAppearance,\n  };\n}\n"],"names":["useToastContextValues_unstable","state","backgroundAppearance"],"mappings":"AAEA,OAAO,SAASA,+BAA+BC,KAAiB;IAC9D,MAAM,EAAEC,oBAAoB,EAAE,GAAGD;IAEjC,OAAO;QACLC;IACF;AACF"}

node_modules/@fluentui/react-toast/lib/components/Toast/useToastStyles.styles.js

@@ -0,0 +1,27 @@
+'use client';
+
+import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const toastClassNames = {
+  root: 'fui-Toast'
+};
+const useRootBaseClassName = /*#__PURE__*/__resetStyles("rhf7k35", null, [".rhf7k35{display:grid;grid-template-columns:auto 1fr auto;padding:12px;border-radius:var(--borderRadiusMedium);border:1px solid var(--colorTransparentStroke);box-shadow:var(--shadow8);font-size:var(--fontSizeBase300);line-height:20px;font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1);background-color:var(--colorNeutralBackground1);}"]);
+const useStyles = /*#__PURE__*/__styles({
+  inverted: {
+    sj55zd: "f1w7i9ko",
+    De3pzq: "f5pduvr"
+  }
+}, {
+  d: [".f1w7i9ko{color:var(--colorNeutralForegroundInverted2);}", ".f5pduvr{background-color:var(--colorNeutralBackgroundInverted);}"]
+});
+/**
+ * Apply styling to the Toast slots based on the state
+ */
+export const useToastStyles_unstable = state => {
+  'use no memo';
+
+  const rootBaseClassName = useRootBaseClassName();
+  const styles = useStyles();
+  state.root.className = mergeClasses(toastClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && styles.inverted, state.root.className);
+  return state;
+};

node_modules/@fluentui/react-toast/lib/components/Toast/useToastStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","toastClassNames","root","useRootBaseClassName","useStyles","inverted","sj55zd","De3pzq","d","useToastStyles_unstable","state","rootBaseClassName","styles","className","backgroundAppearance"],"sources":["useToastStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const toastClassNames = {\n    root: 'fui-Toast'\n};\nconst useRootBaseClassName = makeResetStyles({\n    display: 'grid',\n    gridTemplateColumns: 'auto 1fr auto',\n    padding: '12px',\n    borderRadius: tokens.borderRadiusMedium,\n    border: `1px solid ${tokens.colorTransparentStroke}`,\n    boxShadow: tokens.shadow8,\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: '20px',\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.colorNeutralForeground1,\n    backgroundColor: tokens.colorNeutralBackground1\n});\nconst useStyles = makeStyles({\n    inverted: {\n        color: tokens.colorNeutralForegroundInverted2,\n        backgroundColor: tokens.colorNeutralBackgroundInverted\n    }\n});\n/**\n * Apply styling to the Toast slots based on the state\n */ export const useToastStyles_unstable = (state)=>{\n    'use no memo';\n    const rootBaseClassName = useRootBaseClassName();\n    const styles = useStyles();\n    state.root.className = mergeClasses(toastClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && styles.inverted, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,eAAe,GAAG;EAC3BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,oBAAoB,gBAAGN,aAAA,4XAY5B,CAAC;AACF,MAAMO,SAAS,gBAAGN,QAAA;EAAAO,QAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAKjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,uBAAuB,GAAIC,KAAK,IAAG;EAChD,aAAa;;EACb,MAAMC,iBAAiB,GAAGR,oBAAoB,CAAC,CAAC;EAChD,MAAMS,MAAM,GAAGR,SAAS,CAAC,CAAC;EAC1BM,KAAK,CAACR,IAAI,CAACW,SAAS,GAAGd,YAAY,CAACE,eAAe,CAACC,IAAI,EAAES,iBAAiB,EAAED,KAAK,CAACI,oBAAoB,KAAK,UAAU,IAAIF,MAAM,CAACP,QAAQ,EAAEK,KAAK,CAACR,IAAI,CAACW,SAAS,CAAC;EAChK,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-toast/lib/components/Toast/useToastStyles.styles.raw.js

@@ -0,0 +1,34 @@
+'use client';
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const toastClassNames = {
+    root: 'fui-Toast'
+};
+const useRootBaseClassName = makeResetStyles({
+    display: 'grid',
+    gridTemplateColumns: 'auto 1fr auto',
+    padding: '12px',
+    borderRadius: tokens.borderRadiusMedium,
+    border: `1px solid ${tokens.colorTransparentStroke}`,
+    boxShadow: tokens.shadow8,
+    fontSize: tokens.fontSizeBase300,
+    lineHeight: '20px',
+    fontWeight: tokens.fontWeightSemibold,
+    color: tokens.colorNeutralForeground1,
+    backgroundColor: tokens.colorNeutralBackground1
+});
+const useStyles = makeStyles({
+    inverted: {
+        color: tokens.colorNeutralForegroundInverted2,
+        backgroundColor: tokens.colorNeutralBackgroundInverted
+    }
+});
+/**
+ * Apply styling to the Toast slots based on the state
+ */ export const useToastStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseClassName = useRootBaseClassName();
+    const styles = useStyles();
+    state.root.className = mergeClasses(toastClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && styles.inverted, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-toast/lib/components/Toast/useToastStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Toast/useToastStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ToastSlots, ToastState } from './Toast.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const toastClassNames: SlotClassNames<ToastSlots> = {\n  root: 'fui-Toast',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n  display: 'grid',\n  gridTemplateColumns: 'auto 1fr auto',\n  padding: '12px',\n  borderRadius: tokens.borderRadiusMedium,\n  border: `1px solid ${tokens.colorTransparentStroke}`,\n  boxShadow: tokens.shadow8,\n  fontSize: tokens.fontSizeBase300,\n  lineHeight: '20px',\n  fontWeight: tokens.fontWeightSemibold,\n  color: tokens.colorNeutralForeground1,\n  backgroundColor: tokens.colorNeutralBackground1,\n});\n\nconst useStyles = makeStyles({\n  inverted: {\n    color: tokens.colorNeutralForegroundInverted2,\n    backgroundColor: tokens.colorNeutralBackgroundInverted,\n  },\n});\n\n/**\n * Apply styling to the Toast slots based on the state\n */\nexport const useToastStyles_unstable = (state: ToastState): ToastState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    toastClassNames.root,\n    rootBaseClassName,\n    state.backgroundAppearance === 'inverted' && styles.inverted,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","toastClassNames","root","useRootBaseClassName","display","gridTemplateColumns","padding","borderRadius","borderRadiusMedium","border","colorTransparentStroke","boxShadow","shadow8","fontSize","fontSizeBase300","lineHeight","fontWeight","fontWeightSemibold","color","colorNeutralForeground1","backgroundColor","colorNeutralBackground1","useStyles","inverted","colorNeutralForegroundInverted2","colorNeutralBackgroundInverted","useToastStyles_unstable","state","rootBaseClassName","styles","className","backgroundAppearance"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,kBAA8C;IACzDC,MAAM;AACR,EAAE;AAEF,MAAMC,uBAAuBN,gBAAgB;IAC3CO,SAAS;IACTC,qBAAqB;IACrBC,SAAS;IACTC,cAAcP,OAAOQ,kBAAkB;IACvCC,QAAQ,CAAC,UAAU,EAAET,OAAOU,sBAAsB,EAAE;IACpDC,WAAWX,OAAOY,OAAO;IACzBC,UAAUb,OAAOc,eAAe;IAChCC,YAAY;IACZC,YAAYhB,OAAOiB,kBAAkB;IACrCC,OAAOlB,OAAOmB,uBAAuB;IACrCC,iBAAiBpB,OAAOqB,uBAAuB;AACjD;AAEA,MAAMC,YAAYxB,WAAW;IAC3ByB,UAAU;QACRL,OAAOlB,OAAOwB,+BAA+B;QAC7CJ,iBAAiBpB,OAAOyB,8BAA8B;IACxD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC;IACtC;IAEA,MAAMC,oBAAoBzB;IAC1B,MAAM0B,SAASP;IACfK,MAAMzB,IAAI,CAAC4B,SAAS,GAAG/B,aACrBE,gBAAgBC,IAAI,EACpB0B,mBACAD,MAAMI,oBAAoB,KAAK,cAAcF,OAAON,QAAQ,EAC5DI,MAAMzB,IAAI,CAAC4B,SAAS;IAGtB,OAAOH;AACT,EAAE"}