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, "Hamburger", {
enumerable: true,
get: function() {
return Hamburger;
}
});
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 _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _useHamburger = require("./useHamburger");
const _useHamburgerStylesstyles = require("./useHamburgerStyles.styles");
const Hamburger = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useHamburger.useHamburger_unstable)(props, ref);
(0, _useHamburgerStylesstyles.useHamburgerStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useHamburgerStyles_unstable')(state);
return (0, _reactbutton.renderButton_unstable)(state);
});
Hamburger.displayName = 'Hamburger';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Hamburger/Hamburger.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderButton_unstable } from '@fluentui/react-button';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useHamburger_unstable } from './useHamburger';\nimport { useHamburgerStyles_unstable } from './useHamburgerStyles.styles';\nimport type { HamburgerProps } from './Hamburger.types';\n\n/**\n * Hamburger component - a button that toggles a menu or navigation drawer.\n */\nexport const Hamburger: ForwardRefComponent<HamburgerProps> = React.forwardRef((props, ref) => {\n const state = useHamburger_unstable(props, ref);\n\n useHamburgerStyles_unstable(state);\n useCustomStyleHook_unstable('useHamburgerStyles_unstable')(state);\n\n return renderButton_unstable(state);\n}) as ForwardRefComponent<HamburgerProps>;\n\nHamburger.displayName = 'Hamburger';\n"],"names":["React","renderButton_unstable","useCustomStyleHook_unstable","useHamburger_unstable","useHamburgerStyles_unstable","Hamburger","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BAEO,yBAAyB;qCACnB,kCAAkC;8BAExC,iBAAiB;0CACX,8BAA8B;AAMnE,MAAMK,YAAAA,WAAAA,GAAiDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,YAAQN,mCAAAA,EAAsBI,OAAOC;QAE3CJ,qDAAAA,EAA4BK;QAC5BP,gDAAAA,EAA4B,+BAA+BO;IAE3D,WAAOR,kCAAAA,EAAsBQ;AAC/B,GAA0C;AAE1CJ,UAAUK,WAAW,GAAG"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Hamburger/Hamburger.types.ts"],"sourcesContent":["import { ButtonProps, ButtonState } from '@fluentui/react-button';\n\n/**\n * Hamburger Props\n */\nexport type HamburgerProps = ButtonProps;\n\n/**\n * State used in rendering Hamburger\n */\nexport type HamburgerState = ButtonState;\n"],"names":[],"mappings":"AAOA;;CAEC,GACD,WAAyC"}

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, {
Hamburger: function() {
return _Hamburger.Hamburger;
},
hamburgerClassNames: function() {
return _useHamburgerStylesstyles.hamburgerClassNames;
},
useHamburgerStyles_unstable: function() {
return _useHamburgerStylesstyles.useHamburgerStyles_unstable;
},
useHamburger_unstable: function() {
return _useHamburger.useHamburger_unstable;
}
});
const _Hamburger = require("./Hamburger");
const _useHamburger = require("./useHamburger");
const _useHamburgerStylesstyles = require("./useHamburgerStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Hamburger/index.ts"],"sourcesContent":["export { Hamburger } from './Hamburger';\nexport type { HamburgerProps, HamburgerState } from './Hamburger.types';\nexport { useHamburger_unstable } from './useHamburger';\nexport { hamburgerClassNames, useHamburgerStyles_unstable } from './useHamburgerStyles.styles';\n"],"names":["Hamburger","useHamburger_unstable","hamburgerClassNames","useHamburgerStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,oBAAS;;;eAGTE,6CAAmB;;;eAAEC,qDAA2B;;;eADhDF,mCAAqB;;;2BAFJ,cAAc;8BAEF,iBAAiB;0CACU,8BAA8B"}

View File

@@ -0,0 +1,22 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useHamburger_unstable", {
enumerable: true,
get: function() {
return useHamburger_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 _reacticons = require("@fluentui/react-icons");
const useHamburger_unstable = (props, ref)=>{
return (0, _reactbutton.useButton_unstable)({
icon: /*#__PURE__*/ _react.createElement(_reacticons.Navigation20Filled, null),
appearance: 'transparent',
...props
}, ref);
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Hamburger/useHamburger.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useButton_unstable } from '@fluentui/react-button';\nimport { Navigation20Filled } from '@fluentui/react-icons';\nimport type { HamburgerProps, HamburgerState } from './Hamburger.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 useHamburger_unstable = (\n props: HamburgerProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): HamburgerState => {\n return useButton_unstable({ icon: <Navigation20Filled />, appearance: 'transparent', ...props }, ref);\n};\n"],"names":["React","useButton_unstable","Navigation20Filled","useHamburger_unstable","props","ref","icon","appearance"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BACI,yBAAyB;4BACzB,wBAAwB;AASpD,MAAMG,wBAAwB,CACnCC,OACAC;IAEA,WAAOJ,+BAAAA,EAAmB;QAAEK,MAAAA,WAAAA,GAAM,OAAA,aAAA,CAACJ,8BAAAA,EAAAA;QAAuBK,YAAY;QAAe,GAAGH,KAAK;IAAC,GAAGC;AACnG,EAAE"}

View File

@@ -0,0 +1,79 @@
'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, {
hamburgerClassNames: function() {
return hamburgerClassNames;
},
useHamburgerStyles_unstable: function() {
return useHamburgerStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reactbutton = require("@fluentui/react-button");
const hamburgerClassNames = {
root: 'fui-Hamburger',
icon: 'fui-Hamburger__icon'
};
/**
* Styles for the root slot
*/ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
w71qe1: "f1iuv45f",
De3pzq: "f1ctqxl6",
Bgfg5da: 0,
B9xav0g: 0,
oivjwe: 0,
Bn0qgzm: 0,
B4g9neb: 0,
zhjwy3: 0,
wvpqe5: 0,
ibv6hh: 0,
u1mtju: 0,
h3c5rm: 0,
vrafjx: 0,
Bekrc4i: 0,
i8vvqc: 0,
g2u3we: 0,
icvyot: 0,
B4j52fo: 0,
irswps: "f3bhgqh",
Jwef8y: "f11oyicx",
ecr2s2: "f9fof1w"
}
}, {
d: [
".f1iuv45f{text-decoration-line:none;}",
".f1ctqxl6{background-color:var(--colorNeutralBackground4);}",
[
".f3bhgqh{border:none;}",
{
p: -2
}
]
],
h: [
".f11oyicx:hover{background-color:var(--colorNeutralBackground4Hover);}"
],
a: [
".f9fof1w:active{background-color:var(--colorNeutralBackground4Pressed);}"
]
});
const useHamburgerStyles_unstable = (state)=>{
'use no memo';
(0, _reactbutton.useButtonStyles_unstable)(state);
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(hamburgerClassNames.root, styles.root, state.root.className);
if (state.icon) {
state.icon.className = (0, _react.mergeClasses)(hamburgerClassNames.icon, state.icon.className);
}
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useHamburgerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nimport { navItemTokens } from '../sharedNavStyles.styles';\nexport const hamburgerClassNames = {\n root: 'fui-Hamburger',\n icon: 'fui-Hamburger__icon'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n textDecorationLine: 'none',\n backgroundColor: navItemTokens.backgroundColor,\n border: 'none',\n ':hover': {\n backgroundColor: navItemTokens.backgroundColorHover\n },\n ':active': {\n backgroundColor: navItemTokens.backgroundColorPressed\n }\n }\n});\n/**\n * Apply styling to the Hamburger slots based on the state\n */ export const useHamburgerStyles_unstable = (state)=>{\n 'use no memo';\n useButtonStyles_unstable(state);\n const styles = useStyles();\n state.root.className = mergeClasses(hamburgerClassNames.root, styles.root, state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(hamburgerClassNames.icon, state.icon.className);\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","useButtonStyles_unstable","navItemTokens","hamburgerClassNames","root","icon","useStyles","w71qe1","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Jwef8y","ecr2s2","d","p","h","a","useHamburgerStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICI,mBAAmB;;;IAqBf6B,2BAA2B;;;;uBAxBH,gBAAgB;6BAChB,wBAAwB;AAE1D,4BAA4B;IAC/B5B,IAAI,EAAE,eAAe;IACrBC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGP,eAAA,EAAA;IAAAK,IAAA,EAAA;QAAAG,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAYrB,CAAC;AAGS,oCAAqCE,KAAK,IAAG;IACpD,aAAa;QACbhC,qCAAwB,EAACgC,KAAK,CAAC;IAC/B,MAAMC,MAAM,GAAG5B,SAAS,CAAC,CAAC;IAC1B2B,KAAK,CAAC7B,IAAI,CAAC+B,SAAS,OAAGnC,mBAAY,EAACG,mBAAmB,CAACC,IAAI,EAAE8B,MAAM,CAAC9B,IAAI,EAAE6B,KAAK,CAAC7B,IAAI,CAAC+B,SAAS,CAAC;IAChG,IAAIF,KAAK,CAAC5B,IAAI,EAAE;QACZ4B,KAAK,CAAC5B,IAAI,CAAC8B,SAAS,OAAGnC,mBAAY,EAACG,mBAAmB,CAACE,IAAI,EAAE4B,KAAK,CAAC5B,IAAI,CAAC8B,SAAS,CAAC;IACvF;IACA,OAAOF,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,51 @@
'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, {
hamburgerClassNames: function() {
return hamburgerClassNames;
},
useHamburgerStyles_unstable: function() {
return useHamburgerStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reactbutton = require("@fluentui/react-button");
const _sharedNavStylesstyles = require("../sharedNavStyles.styles");
const hamburgerClassNames = {
root: 'fui-Hamburger',
icon: 'fui-Hamburger__icon'
};
/**
* Styles for the root slot
*/ const useStyles = (0, _react.makeStyles)({
root: {
textDecorationLine: 'none',
backgroundColor: _sharedNavStylesstyles.navItemTokens.backgroundColor,
border: 'none',
':hover': {
backgroundColor: _sharedNavStylesstyles.navItemTokens.backgroundColorHover
},
':active': {
backgroundColor: _sharedNavStylesstyles.navItemTokens.backgroundColorPressed
}
}
});
const useHamburgerStyles_unstable = (state)=>{
'use no memo';
(0, _reactbutton.useButtonStyles_unstable)(state);
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(hamburgerClassNames.root, styles.root, state.root.className);
if (state.icon) {
state.icon.className = (0, _react.mergeClasses)(hamburgerClassNames.icon, state.icon.className);
}
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Hamburger/useHamburgerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { ButtonSlots, useButtonStyles_unstable } from '@fluentui/react-button';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { HamburgerState } from './Hamburger.types';\nimport { navItemTokens } from '../sharedNavStyles.styles';\n\nexport const hamburgerClassNames: SlotClassNames<ButtonSlots> = {\n root: 'fui-Hamburger',\n icon: 'fui-Hamburger__icon',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n textDecorationLine: 'none',\n backgroundColor: navItemTokens.backgroundColor,\n border: 'none',\n ':hover': {\n backgroundColor: navItemTokens.backgroundColorHover,\n },\n ':active': {\n backgroundColor: navItemTokens.backgroundColorPressed,\n },\n },\n});\n\n/**\n * Apply styling to the Hamburger slots based on the state\n */\nexport const useHamburgerStyles_unstable = (state: HamburgerState): HamburgerState => {\n 'use no memo';\n\n useButtonStyles_unstable(state);\n const styles = useStyles();\n\n state.root.className = mergeClasses(hamburgerClassNames.root, styles.root, state.root.className);\n\n if (state.icon) {\n state.icon.className = mergeClasses(hamburgerClassNames.icon, state.icon.className);\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","useButtonStyles_unstable","navItemTokens","hamburgerClassNames","root","icon","useStyles","textDecorationLine","backgroundColor","border","backgroundColorHover","backgroundColorPressed","useHamburgerStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAQaI,mBAAAA;;;+BAyBAS;eAAAA;;;uBA/B4B,iBAAiB;6BACJ,yBAAyB;uCAGjD,4BAA4B;AAEnD,4BAAyD;IAC9DR,MAAM;IACNC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYP,iBAAAA,EAAW;IAC3BK,MAAM;QACJG,oBAAoB;QACpBC,iBAAiBN,oCAAAA,CAAcM,eAAe;QAC9CC,QAAQ;QACR,UAAU;YACRD,iBAAiBN,oCAAAA,CAAcQ,oBAAoB;QACrD;QACA,WAAW;YACTF,iBAAiBN,oCAAAA,CAAcS,sBAAsB;QACvD;IACF;AACF;AAKO,oCAAoC,CAACE;IAC1C;QAEAZ,qCAAAA,EAAyBY;IACzB,MAAMC,SAASR;IAEfO,MAAMT,IAAI,CAACW,SAAS,OAAGf,mBAAAA,EAAaG,oBAAoBC,IAAI,EAAEU,OAAOV,IAAI,EAAES,MAAMT,IAAI,CAACW,SAAS;IAE/F,IAAIF,MAAMR,IAAI,EAAE;QACdQ,MAAMR,IAAI,CAACU,SAAS,OAAGf,mBAAAA,EAAaG,oBAAoBE,IAAI,EAAEQ,MAAMR,IAAI,CAACU,SAAS;IACpF;IAEA,OAAOF;AACT,EAAE"}