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, "NavSectionHeader", {
enumerable: true,
get: function() {
return NavSectionHeader;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _useNavSectionHeader = require("./useNavSectionHeader");
const _renderNavSectionHeader = require("./renderNavSectionHeader");
const _useNavSectionHeaderStylesstyles = require("./useNavSectionHeaderStyles.styles");
const NavSectionHeader = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useNavSectionHeader.useNavSectionHeader_unstable)(props, ref);
(0, _useNavSectionHeaderStylesstyles.useNavSectionHeaderStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useNavSectionHeaderStyles_unstable')(state);
return (0, _renderNavSectionHeader.renderNavSectionHeader_unstable)(state);
});
NavSectionHeader.displayName = 'NavSectionHeader';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/NavSectionHeader/NavSectionHeader.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useNavSectionHeader_unstable } from './useNavSectionHeader';\nimport { renderNavSectionHeader_unstable } from './renderNavSectionHeader';\nimport { useNavSectionHeaderStyles_unstable } from './useNavSectionHeaderStyles.styles';\nimport type { NavSectionHeaderProps } from './NavSectionHeader.types';\n\n/**\n * NavSectionHeader component\n */\nexport const NavSectionHeader: ForwardRefComponent<NavSectionHeaderProps> = React.forwardRef((props, ref) => {\n const state = useNavSectionHeader_unstable(props, ref);\n\n useNavSectionHeaderStyles_unstable(state);\n useCustomStyleHook_unstable('useNavSectionHeaderStyles_unstable')(state);\n\n return renderNavSectionHeader_unstable(state);\n});\n\nNavSectionHeader.displayName = 'NavSectionHeader';\n"],"names":["React","useCustomStyleHook_unstable","useNavSectionHeader_unstable","renderNavSectionHeader_unstable","useNavSectionHeaderStyles_unstable","NavSectionHeader","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;qCAEa,kCAAkC;qCAEjC,wBAAwB;wCACrB,2BAA2B;iDACxB,qCAAqC;AAMjF,MAAMK,mBAAAA,WAAAA,GAA+DL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACnG,MAAMC,YAAQP,iDAAAA,EAA6BK,OAAOC;QAElDJ,mEAAAA,EAAmCK;QACnCR,gDAAAA,EAA4B,sCAAsCQ;IAElE,WAAON,uDAAAA,EAAgCM;AACzC,GAAG;AAEHJ,iBAAiBK,WAAW,GAAG"}

View File

@@ -0,0 +1,8 @@
/**
* State used in rendering NavSectionHeader
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
// TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from NavSectionHeaderProps.
// & Required<Pick<NavSectionHeaderProps, 'propName'>>

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/NavSectionHeader/NavSectionHeader.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type NavSectionHeaderSlots = {\n root: Slot<'h2', 'h1' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'>;\n};\n\n/**\n * NavSectionHeader Props\n */\nexport type NavSectionHeaderProps = ComponentProps<NavSectionHeaderSlots>;\n\n/**\n * State used in rendering NavSectionHeader\n */\nexport type NavSectionHeaderState = ComponentState<NavSectionHeaderSlots>;\n// TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from NavSectionHeaderProps.\n// & Required<Pick<NavSectionHeaderProps, 'propName'>>\n"],"names":[],"mappings":"AAWA;;CAEC,GACD,WAA0E;;;;CAC1E,iIAAiI;CACjI,sDAAsD"}

View File

@@ -0,0 +1,31 @@
"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, {
NavSectionHeader: function() {
return _NavSectionHeader.NavSectionHeader;
},
navSectionHeaderClassNames: function() {
return _useNavSectionHeaderStylesstyles.navSectionHeaderClassNames;
},
renderNavSectionHeader_unstable: function() {
return _renderNavSectionHeader.renderNavSectionHeader_unstable;
},
useNavSectionHeaderStyles_unstable: function() {
return _useNavSectionHeaderStylesstyles.useNavSectionHeaderStyles_unstable;
},
useNavSectionHeader_unstable: function() {
return _useNavSectionHeader.useNavSectionHeader_unstable;
}
});
const _NavSectionHeader = require("./NavSectionHeader");
const _renderNavSectionHeader = require("./renderNavSectionHeader");
const _useNavSectionHeader = require("./useNavSectionHeader");
const _useNavSectionHeaderStylesstyles = require("./useNavSectionHeaderStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/NavSectionHeader/index.ts"],"sourcesContent":["export { NavSectionHeader } from './NavSectionHeader';\nexport type { NavSectionHeaderProps, NavSectionHeaderSlots, NavSectionHeaderState } from './NavSectionHeader.types';\nexport { renderNavSectionHeader_unstable } from './renderNavSectionHeader';\nexport { useNavSectionHeader_unstable } from './useNavSectionHeader';\nexport { navSectionHeaderClassNames, useNavSectionHeaderStyles_unstable } from './useNavSectionHeaderStyles.styles';\n"],"names":["NavSectionHeader","renderNavSectionHeader_unstable","useNavSectionHeader_unstable","navSectionHeaderClassNames","useNavSectionHeaderStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,kCAAgB;;;eAIhBG,2DAA0B;;;eAF1BF,uDAA+B;;;eAEHG,mEAAkC;;;eAD9DF,iDAA4B;;;kCAHJ,qBAAqB;wCAEN,2BAA2B;qCAC9B,wBAAwB;iDACU,qCAAqC"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/NavSectionHeader/renderNavSectionHeader.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { NavSectionHeaderState, NavSectionHeaderSlots } from './NavSectionHeader.types';\n\n/**\n * Render the final JSX of NavSectionHeader\n */\nexport const renderNavSectionHeader_unstable = (state: NavSectionHeaderState): JSXElement => {\n assertSlots<NavSectionHeaderSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderNavSectionHeader_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCAErB,4BAA4B;AAOjD,MAAMC,kCAAkC,CAACC;QAC9CF,2BAAAA,EAAmCE;IAEnC,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}

View File

@@ -0,0 +1,26 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useNavSectionHeader_unstable", {
enumerable: true,
get: function() {
return useNavSectionHeader_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 useNavSectionHeader_unstable = (props, ref)=>{
return {
components: {
root: 'h3'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('h3', {
ref,
...props
}), {
elementType: 'h3'
})
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/NavSectionHeader/useNavSectionHeader.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { NavSectionHeaderProps, NavSectionHeaderState } from './NavSectionHeader.types';\n\n/**\n * Create the state required to render NavSectionHeader.\n *\n * The returned state can be modified with hooks such as useNavSectionHeaderStyles_unstable,\n * before being passed to renderNavSectionHeader_unstable.\n *\n * @param props - props from this instance of NavSectionHeader\n * @param ref - reference to root HTMLDivElement of NavSectionHeader\n */\nexport const useNavSectionHeader_unstable = (\n props: NavSectionHeaderProps,\n ref: React.Ref<HTMLDivElement>,\n): NavSectionHeaderState => {\n return {\n components: {\n root: 'h3',\n },\n root: slot.always(\n getIntrinsicElementProps('h3', {\n ref,\n ...props,\n }),\n { elementType: 'h3' },\n ),\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useNavSectionHeader_unstable","props","ref","components","root","always","elementType"],"mappings":";;;;+BAaaG;;;;;;;iEAbU,QAAQ;gCACgB,4BAA4B;AAYpE,qCAAqC,CAC1CC,OACAC;IAEA,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAML,oBAAAA,CAAKM,MAAM,KACfP,wCAAAA,EAAyB,MAAM;YAC7BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEK,aAAa;QAAK;IAExB;AACF,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, {
navSectionHeaderClassNames: function() {
return navSectionHeaderClassNames;
},
useNavSectionHeaderStyles_unstable: function() {
return useNavSectionHeaderStyles_unstable;
}
});
const _react = require("@griffel/react");
const navSectionHeaderClassNames = {
root: 'fui-NavSectionHeader'
};
/**
* Styles for the root slot
*/ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
Jyy4pa: "f1gr6hdk",
Bo78w4l: 0,
Cgygva: 0,
yil37a: "f1ulrxyd",
Bahqtrf: "fk6fouc",
Be2twd7: "fy9rknc",
Bhrd7zp: "fl43uef",
Bg96gwp: "fwrc4pm"
}
}, {
d: [
".f1gr6hdk{-webkit-margin-start:10px;margin-inline-start:10px;}",
[
".f1ulrxyd{margin-block:8px;}",
{
p: -1
}
],
".fk6fouc{font-family:var(--fontFamilyBase);}",
".fy9rknc{font-size:var(--fontSizeBase200);}",
".fl43uef{font-weight:var(--fontWeightSemibold);}",
".fwrc4pm{line-height:var(--lineHeightBase200);}"
]
});
const useNavSectionHeaderStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(navSectionHeaderClassNames.root, styles.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useNavSectionHeaderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles } from '@fluentui/react-theme';\nexport const navSectionHeaderClassNames = {\n root: 'fui-NavSectionHeader'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n marginInlineStart: `10px`,\n marginBlock: '8px',\n ...typographyStyles.caption1Strong\n }\n});\n/**\n * Apply styling to the NavSectionHeader slots based on the state\n */ export const useNavSectionHeaderStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(navSectionHeaderClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","typographyStyles","navSectionHeaderClassNames","root","useStyles","Jyy4pa","Bo78w4l","Cgygva","yil37a","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","p","useNavSectionHeaderStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,0BAA0B;;;IActBa,kCAAkC;;;;uBAhBV,gBAAgB;AAElD,mCAAmC;IACtCZ,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAMrB,CAAC;AAGS,4CAA4CE,KAAK,IAAG;IAC3D,aAAa;IACb,MAAMC,MAAM,GAAGb,SAAS,CAAC,CAAC;IAC1BY,KAAK,CAACb,IAAI,CAACe,SAAS,OAAGlB,mBAAY,EAACE,0BAA0B,CAACC,IAAI,EAAEc,MAAM,CAACd,IAAI,EAAEa,KAAK,CAACb,IAAI,CAACe,SAAS,CAAC;IACvG,OAAOF,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,39 @@
'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, {
navSectionHeaderClassNames: function() {
return navSectionHeaderClassNames;
},
useNavSectionHeaderStyles_unstable: function() {
return useNavSectionHeaderStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const navSectionHeaderClassNames = {
root: 'fui-NavSectionHeader'
};
/**
* Styles for the root slot
*/ const useStyles = (0, _react.makeStyles)({
root: {
marginInlineStart: `10px`,
marginBlock: '8px',
..._reacttheme.typographyStyles.caption1Strong
}
});
const useNavSectionHeaderStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(navSectionHeaderClassNames.root, styles.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/NavSectionHeader/useNavSectionHeaderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavSectionHeaderSlots, NavSectionHeaderState } from './NavSectionHeader.types';\nimport { typographyStyles } from '@fluentui/react-theme';\n\nexport const navSectionHeaderClassNames: SlotClassNames<NavSectionHeaderSlots> = {\n root: 'fui-NavSectionHeader',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n marginInlineStart: `10px`,\n marginBlock: '8px',\n ...typographyStyles.caption1Strong,\n },\n});\n\n/**\n * Apply styling to the NavSectionHeader slots based on the state\n */\nexport const useNavSectionHeaderStyles_unstable = (state: NavSectionHeaderState): NavSectionHeaderState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(navSectionHeaderClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","typographyStyles","navSectionHeaderClassNames","root","useStyles","marginInlineStart","marginBlock","caption1Strong","useNavSectionHeaderStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaG,0BAAAA;;;IAkBAM,kCAAAA;;;;uBAvB4B,iBAAiB;4BAGzB,wBAAwB;AAElD,mCAA0E;IAC/EL,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,qBAAAA,EAAW;IAC3BI,MAAM;QACJE,mBAAmB,CAAC,IAAI,CAAC;QACzBC,aAAa;QACb,GAAGL,4BAAAA,CAAiBM,cAAc;IACpC;AACF;AAKO,2CAA2C,CAACE;IACjD;IAEA,MAAMC,SAASN;IACfK,MAAMN,IAAI,CAACQ,SAAS,OAAGX,mBAAAA,EAAaE,2BAA2BC,IAAI,EAAEO,OAAOP,IAAI,EAAEM,MAAMN,IAAI,CAACQ,SAAS;IAEtG,OAAOF;AACT,EAAE"}