Private
Public Access
1
0

feat: Fluent UI Outlook Lite + connections mockup

This commit is contained in:
2026-04-14 18:52:25 +00:00
parent 1199eff6c3
commit dfa4010406
34820 changed files with 1003813 additions and 205 deletions

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "NavDrawerFooter", {
enumerable: true,
get: function() {
return NavDrawerFooter;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactdrawer = require("@fluentui/react-drawer");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _useNavDrawerFooter = require("./useNavDrawerFooter");
const _useNavDrawerFooterStylesstyles = require("./useNavDrawerFooterStyles.styles");
const NavDrawerFooter = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useNavDrawerFooter.useNavDrawerFooter_unstable)(props, ref);
(0, _useNavDrawerFooterStylesstyles.useNavDrawerFooterStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useNavDrawerFooterStyles_unstable')(state);
return (0, _reactdrawer.renderDrawerFooter_unstable)(state);
});
NavDrawerFooter.displayName = 'NavDrawerFooter';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/NavDrawerFooter/NavDrawerFooter.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderDrawerFooter_unstable } from '@fluentui/react-drawer';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useNavDrawerFooter_unstable } from './useNavDrawerFooter';\nimport { useNavDrawerFooterStyles_unstable } from './useNavDrawerFooterStyles.styles';\nimport type { NavDrawerFooterProps } from './NavDrawerFooter.types';\n\n/**\n * NavDrawerFooter component\n */\nexport const NavDrawerFooter: ForwardRefComponent<NavDrawerFooterProps> = React.forwardRef((props, ref) => {\n const state = useNavDrawerFooter_unstable(props, ref);\n\n useNavDrawerFooterStyles_unstable(state);\n useCustomStyleHook_unstable('useNavDrawerFooterStyles_unstable')(state);\n\n return renderDrawerFooter_unstable(state);\n});\n\nNavDrawerFooter.displayName = 'NavDrawerFooter';\n"],"names":["React","renderDrawerFooter_unstable","useCustomStyleHook_unstable","useNavDrawerFooter_unstable","useNavDrawerFooterStyles_unstable","NavDrawerFooter","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BACa,yBAAyB;qCAEzB,kCAAkC;oCAElC,uBAAuB;gDACjB,oCAAoC;AAM/E,MAAMK,kBAAAA,WAAAA,GAA6DL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,YAAQN,+CAAAA,EAA4BI,OAAOC;QAEjDJ,iEAAAA,EAAkCK;QAClCP,gDAAAA,EAA4B,qCAAqCO;IAEjE,WAAOR,wCAAAA,EAA4BQ;AACrC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/NavDrawerFooter/NavDrawerFooter.types.ts"],"sourcesContent":["import type { DrawerFooterProps, DrawerFooterSlots, DrawerFooterState } from '@fluentui/react-drawer';\n\nexport type NavDrawerFooterSlots = DrawerFooterSlots;\n\n/**\n * NavDrawerFooter Props\n */\nexport type NavDrawerFooterProps = DrawerFooterProps;\n\n/**\n * State used in rendering NavDrawerFooter\n */\nexport type NavDrawerFooterState = DrawerFooterState;\n"],"names":[],"mappings":"AASA;;CAEC,GACD,WAAqD"}

View File

@@ -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, {
NavDrawerFooter: function() {
return _NavDrawerFooter.NavDrawerFooter;
},
navDrawerFooterClassNames: function() {
return _useNavDrawerFooterStylesstyles.navDrawerFooterClassNames;
},
useNavDrawerFooterStyles_unstable: function() {
return _useNavDrawerFooterStylesstyles.useNavDrawerFooterStyles_unstable;
},
useNavDrawerFooter_unstable: function() {
return _useNavDrawerFooter.useNavDrawerFooter_unstable;
}
});
const _NavDrawerFooter = require("./NavDrawerFooter");
const _useNavDrawerFooter = require("./useNavDrawerFooter");
const _useNavDrawerFooterStylesstyles = require("./useNavDrawerFooterStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/NavDrawerFooter/index.ts"],"sourcesContent":["export { NavDrawerFooter } from './NavDrawerFooter';\nexport type { NavDrawerFooterProps, NavDrawerFooterSlots, NavDrawerFooterState } from './NavDrawerFooter.types';\nexport { useNavDrawerFooter_unstable } from './useNavDrawerFooter';\nexport { navDrawerFooterClassNames, useNavDrawerFooterStyles_unstable } from './useNavDrawerFooterStyles.styles';\n"],"names":["NavDrawerFooter","useNavDrawerFooter_unstable","navDrawerFooterClassNames","useNavDrawerFooterStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,gCAAe;;;eAGfE,yDAAyB;;;eAAEC,iEAAiC;;;eAD5DF,+CAA2B;;;iCAFJ,oBAAoB;oCAER,uBAAuB;gDACU,oCAAoC"}

View File

@@ -0,0 +1,17 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useNavDrawerFooter_unstable", {
enumerable: true,
get: function() {
return useNavDrawerFooter_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactdrawer = require("@fluentui/react-drawer");
const useNavDrawerFooter_unstable = (props, ref)=>{
return (0, _reactdrawer.useDrawerFooter_unstable)(props, ref);
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/NavDrawerFooter/useNavDrawerFooter.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useDrawerFooter_unstable } from '@fluentui/react-drawer';\nimport type { NavDrawerFooterProps, NavDrawerFooterState } from './NavDrawerFooter.types';\n\n/**\n * Create the state required to render NavDrawerFooter.\n *\n * The returned state can be modified with hooks such as useNavDrawerFooterStyles_unstable,\n * before being passed to renderNavDrawerFooter_unstable.\n *\n * @param props - props from this instance of NavDrawerFooter\n * @param ref - reference to root HTMLDivElement of NavDrawerFooter\n */\nexport const useNavDrawerFooter_unstable = (\n props: NavDrawerFooterProps,\n ref: React.Ref<HTMLElement>,\n): NavDrawerFooterState => {\n return useDrawerFooter_unstable(props, ref);\n};\n"],"names":["React","useDrawerFooter_unstable","useNavDrawerFooter_unstable","props","ref"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BACU,yBAAyB;AAY3D,MAAME,8BAA8B,CACzCC,OACAC;IAEA,WAAOH,qCAAAA,EAAyBE,OAAOC;AACzC,EAAE"}

View File

@@ -0,0 +1,57 @@
'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, {
navDrawerFooterClassNames: function() {
return navDrawerFooterClassNames;
},
useNavDrawerFooterStyles_unstable: function() {
return useNavDrawerFooterStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reactdrawer = require("@fluentui/react-drawer");
const navDrawerFooterClassNames = {
root: 'fui-NavDrawerFooter'
};
/**
* Styles for the root slot
*/ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f1j1cbdv",
mc9l5x: "f22iagw",
Beiy3e4: "f1vx9l62",
Belr9w4: "f1j0q4x9"
}
}, {
d: [
[
".f1j1cbdv{padding:var(--spacingVerticalXXS) var(--spacingHorizontalXS) var(--spacingVerticalXXS) var(--spacingVerticalXS) var(--spacingHorizontalMNudge);}",
{
p: -1
}
],
".f22iagw{display:flex;}",
".f1vx9l62{flex-direction:column;}",
".f1j0q4x9{row-gap:var(--spacingVerticalXXS);}"
]
});
const useNavDrawerFooterStyles_unstable = (state)=>{
'use no memo';
(0, _reactdrawer.useDrawerFooterStyles_unstable)(state);
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(navDrawerFooterClassNames.root, styles.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useNavDrawerFooterStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useDrawerFooterStyles_unstable } from '@fluentui/react-drawer';\nexport const navDrawerFooterClassNames = {\n root: 'fui-NavDrawerFooter'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalXXS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalMNudge}`,\n display: 'flex',\n flexDirection: 'column',\n rowGap: tokens.spacingVerticalXXS\n }\n});\n/**\n * Apply styling to the NavDrawerFooter slots based on the state\n */ export const useNavDrawerFooterStyles_unstable = (state)=>{\n 'use no memo';\n useDrawerFooterStyles_unstable(state);\n const styles = useStyles();\n state.root.className = mergeClasses(navDrawerFooterClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","tokens","useDrawerFooterStyles_unstable","navDrawerFooterClassNames","root","useStyles","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","mc9l5x","Beiy3e4","Belr9w4","d","p","useNavDrawerFooterStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICI,yBAAyB;;;IAerBa,iCAAiC;;;;uBAlBT,gBAAgB;6BAEV,wBAAwB;AAChE,kCAAkC;IACrCZ,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGN,eAAA,EAAA;IAAAK,IAAA,EAAA;QAAAE,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAOrB,CAAC;AAGS,2CAA2CE,KAAK,IAAG;IAC1D,aAAa;QACbf,2CAA8B,EAACe,KAAK,CAAC;IACrC,MAAMC,MAAM,GAAGb,SAAS,CAAC,CAAC;IAC1BY,KAAK,CAACb,IAAI,CAACe,SAAS,OAAGnB,mBAAY,EAACG,yBAAyB,CAACC,IAAI,EAAEc,MAAM,CAACd,IAAI,EAAEa,KAAK,CAACb,IAAI,CAACe,SAAS,CAAC;IACtG,OAAOF,KAAK;AAChB,CAAC"}

View File

@@ -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, {
navDrawerFooterClassNames: function() {
return navDrawerFooterClassNames;
},
useNavDrawerFooterStyles_unstable: function() {
return useNavDrawerFooterStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const _reactdrawer = require("@fluentui/react-drawer");
const navDrawerFooterClassNames = {
root: 'fui-NavDrawerFooter'
};
/**
* Styles for the root slot
*/ const useStyles = (0, _react.makeStyles)({
root: {
padding: `${_reacttheme.tokens.spacingVerticalXXS} ${_reacttheme.tokens.spacingHorizontalXS} ${_reacttheme.tokens.spacingVerticalXXS} ${_reacttheme.tokens.spacingVerticalXS} ${_reacttheme.tokens.spacingHorizontalMNudge}`,
display: 'flex',
flexDirection: 'column',
rowGap: _reacttheme.tokens.spacingVerticalXXS
}
});
const useNavDrawerFooterStyles_unstable = (state)=>{
'use no memo';
(0, _reactdrawer.useDrawerFooterStyles_unstable)(state);
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(navDrawerFooterClassNames.root, styles.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/NavDrawerFooter/useNavDrawerFooterStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useDrawerFooterStyles_unstable } from '@fluentui/react-drawer';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavDrawerFooterSlots, NavDrawerFooterState } from './NavDrawerFooter.types';\n\nexport const navDrawerFooterClassNames: SlotClassNames<NavDrawerFooterSlots> = {\n root: 'fui-NavDrawerFooter',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalXXS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalMNudge}`,\n display: 'flex',\n flexDirection: 'column',\n rowGap: tokens.spacingVerticalXXS,\n },\n});\n\n/**\n * Apply styling to the NavDrawerFooter slots based on the state\n */\nexport const useNavDrawerFooterStyles_unstable = (state: NavDrawerFooterState): NavDrawerFooterState => {\n 'use no memo';\n\n useDrawerFooterStyles_unstable(state);\n const styles = useStyles();\n state.root.className = mergeClasses(navDrawerFooterClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","useDrawerFooterStyles_unstable","navDrawerFooterClassNames","root","useStyles","padding","spacingVerticalXXS","spacingHorizontalXS","spacingVerticalXS","spacingHorizontalMNudge","display","flexDirection","rowGap","useNavDrawerFooterStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAQaI,yBAAAA;;;qCAmBAW;;;;uBAzB4B,iBAAiB;4BACnC,wBAAwB;6BACA,yBAAyB;AAIjE,kCAAwE;IAC7EV,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYN,iBAAAA,EAAW;IAC3BK,MAAM;QACJE,SAAS,GAAGL,kBAAAA,CAAOM,kBAAkB,CAAC,CAAC,EAAEN,kBAAAA,CAAOO,mBAAmB,CAAC,CAAC,EAAEP,kBAAAA,CAAOM,kBAAkB,CAAC,CAAC,EAAEN,kBAAAA,CAAOQ,iBAAiB,CAAC,EAAE,EAAER,kBAAAA,CAAOS,uBAAuB,EAAE;QACjKC,SAAS;QACTC,eAAe;QACfC,QAAQZ,kBAAAA,CAAOM,kBAAkB;IACnC;AACF;AAKO,MAAMO,oCAAoC,CAACC;IAChD;IAEAb,+CAAAA,EAA+Ba;IAC/B,MAAMC,SAASX;IACfU,MAAMX,IAAI,CAACa,SAAS,OAAGjB,mBAAAA,EAAaG,0BAA0BC,IAAI,EAAEY,OAAOZ,IAAI,EAAEW,MAAMX,IAAI,CAACa,SAAS;IAErG,OAAOF;AACT,EAAE"}