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, "CounterBadge", {
enumerable: true,
get: function() {
return CounterBadge;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useCounterBadge = require("./useCounterBadge");
const _useCounterBadgeStylesstyles = require("./useCounterBadgeStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _index = require("../Badge/index");
const CounterBadge = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useCounterBadge.useCounterBadge_unstable)(props, ref);
(0, _useCounterBadgeStylesstyles.useCounterBadgeStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useCounterBadgeStyles_unstable')(state);
return (0, _index.renderBadge_unstable)(state);
});
CounterBadge.displayName = 'CounterBadge';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CounterBadge/CounterBadge.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCounterBadge_unstable } from './useCounterBadge';\nimport { useCounterBadgeStyles_unstable } from './useCounterBadgeStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { renderBadge_unstable } from '../Badge/index';\nimport type { CounterBadgeProps } from './CounterBadge.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled CounterBadge, using the `useCounterBadge_unstable` hook.\n */\nexport const CounterBadge: ForwardRefComponent<CounterBadgeProps> = React.forwardRef((props, ref) => {\n const state = useCounterBadge_unstable(props, ref);\n\n useCounterBadgeStyles_unstable(state);\n\n useCustomStyleHook_unstable('useCounterBadgeStyles_unstable')(state);\n\n return renderBadge_unstable(state);\n});\n\nCounterBadge.displayName = 'CounterBadge';\n"],"names":["React","useCounterBadge_unstable","useCounterBadgeStyles_unstable","useCustomStyleHook_unstable","renderBadge_unstable","CounterBadge","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;iCACU,oBAAoB;6CACd,iCAAiC;qCACpC,kCAAkC;uBACzC,iBAAiB;AAO/C,MAAMK,eAAAA,WAAAA,GAAuDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,YAAQR,yCAAAA,EAAyBM,OAAOC;QAE9CN,2DAAAA,EAA+BO;QAE/BN,gDAAAA,EAA4B,kCAAkCM;IAE9D,WAAOL,2BAAAA,EAAqBK;AAC9B,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CounterBadge/CounterBadge.types.ts"],"sourcesContent":["import type { BadgeProps, BadgeState } from '../Badge/index';\n\nexport type CounterBadgeProps = Omit<BadgeProps, 'appearance' | 'color' | 'shape'> & {\n /**\n * A Badge can have different appearances that emphasize certain parts of it:\n * - filled: The default appearance if one is not specified.\n * The badge background is filled with color with a contrasting foreground text to match.\n * - ghost: The badge background is transparent, with the foreground text taking color to emphasize it.\n * @default filled\n */\n appearance?: 'filled' | 'ghost';\n\n /**\n * Semantic colors for a counter badge\n * @default brand\n */\n color?: Extract<BadgeProps['color'], 'brand' | 'danger' | 'important' | 'informative'>;\n\n /**\n * Value displayed by the Badge\n * @default 0\n */\n count?: number;\n\n /**\n * If a dot should be displayed without the count\n * @default false\n */\n dot?: boolean;\n\n /**\n * Max number to be displayed\n * @default 99\n */\n overflowCount?: number;\n\n /**\n * A Badge can be circular or rounded\n * @default circular\n */\n shape?: 'circular' | 'rounded';\n\n /**\n * If the badge should be shown when count is 0\n * @default false\n */\n showZero?: boolean;\n};\n\nexport type CounterBadgeState = Omit<BadgeState, 'appearance' | 'color' | 'shape'> &\n Required<Pick<CounterBadgeProps, 'appearance' | 'color' | 'count' | 'dot' | 'shape' | 'showZero'>>;\n\nexport type CounterBadgeBaseProps = Omit<CounterBadgeProps, 'appearance' | 'color' | 'shape' | 'size'>;\n\nexport type CounterBadgeBaseState = Omit<CounterBadgeState, 'appearance' | 'color' | 'shape' | 'size'>;\n"],"names":[],"mappings":""}

View File

@@ -0,0 +1,30 @@
"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, {
CounterBadge: function() {
return _CounterBadge.CounterBadge;
},
counterBadgeClassNames: function() {
return _useCounterBadgeStylesstyles.counterBadgeClassNames;
},
useCounterBadgeBase_unstable: function() {
return _useCounterBadge.useCounterBadgeBase_unstable;
},
useCounterBadgeStyles_unstable: function() {
return _useCounterBadgeStylesstyles.useCounterBadgeStyles_unstable;
},
useCounterBadge_unstable: function() {
return _useCounterBadge.useCounterBadge_unstable;
}
});
const _CounterBadge = require("./CounterBadge");
const _useCounterBadge = require("./useCounterBadge");
const _useCounterBadgeStylesstyles = require("./useCounterBadgeStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CounterBadge/index.ts"],"sourcesContent":["export { CounterBadge } from './CounterBadge';\nexport type {\n CounterBadgeBaseProps,\n CounterBadgeBaseState,\n CounterBadgeProps,\n CounterBadgeState,\n} from './CounterBadge.types';\nexport { useCounterBadge_unstable, useCounterBadgeBase_unstable } from './useCounterBadge';\nexport { counterBadgeClassNames, useCounterBadgeStyles_unstable } from './useCounterBadgeStyles.styles';\n"],"names":["CounterBadge","useCounterBadge_unstable","useCounterBadgeBase_unstable","counterBadgeClassNames","useCounterBadgeStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,0BAAY;;;eAQZG,mDAAsB;;;eADID,6CAA4B;;;eAC9BE,2DAA8B;;;eADtDH,yCAAwB;;;8BAPJ,iBAAiB;iCAOyB,oBAAoB;6CACpB,iCAAiC"}

View File

@@ -0,0 +1,46 @@
'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, {
useCounterBadgeBase_unstable: function() {
return useCounterBadgeBase_unstable;
},
useCounterBadge_unstable: function() {
return useCounterBadge_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _index = require("../Badge/index");
const useCounterBadge_unstable = (props, ref)=>{
const { shape = 'circular', appearance = 'filled', color = 'brand', size = 'medium', ...counterBadgeProps } = props;
const state = useCounterBadgeBase_unstable(counterBadgeProps, ref);
return {
...state,
shape,
appearance,
color,
size
};
};
const useCounterBadgeBase_unstable = (props, ref)=>{
const { showZero = false, overflowCount = 99, count = 0, dot = false, ...badgeProps } = props;
const state = {
...(0, _index.useBadgeBase_unstable)(badgeProps, ref),
showZero,
count,
dot
};
if ((count !== 0 || showZero) && !dot && !state.root.children) {
state.root.children = count > overflowCount ? `${overflowCount}+` : `${count}`;
}
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CounterBadge/useCounterBadge.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useBadgeBase_unstable } from '../Badge/index';\nimport type {\n CounterBadgeBaseProps,\n CounterBadgeBaseState,\n CounterBadgeProps,\n CounterBadgeState,\n} from './CounterBadge.types';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useCounterBadge_unstable = (props: CounterBadgeProps, ref: React.Ref<HTMLElement>): CounterBadgeState => {\n const { shape = 'circular', appearance = 'filled', color = 'brand', size = 'medium', ...counterBadgeProps } = props;\n\n const state = useCounterBadgeBase_unstable(counterBadgeProps, ref);\n\n return {\n ...state,\n shape,\n appearance,\n color,\n size,\n };\n};\n\n/**\n * Base hook for CounterBadge component, which manages state related to slots structure and counter logic.\n *\n * @param props - User provided props to the CounterBadge component.\n * @param ref - User provided ref to be passed to the CounterBadge component.\n */\nexport const useCounterBadgeBase_unstable = (\n props: CounterBadgeBaseProps,\n ref: React.Ref<HTMLElement>,\n): CounterBadgeBaseState => {\n const { showZero = false, overflowCount = 99, count = 0, dot = false, ...badgeProps } = props;\n\n const state: CounterBadgeBaseState = {\n ...useBadgeBase_unstable(badgeProps, ref as React.Ref<HTMLDivElement>),\n showZero,\n count,\n dot,\n };\n\n if ((count !== 0 || showZero) && !dot && !state.root.children) {\n state.root.children = count > overflowCount ? `${overflowCount}+` : `${count}`;\n }\n\n return state;\n};\n"],"names":["React","useBadgeBase_unstable","useCounterBadge_unstable","props","ref","shape","appearance","color","size","counterBadgeProps","state","useCounterBadgeBase_unstable","showZero","overflowCount","count","dot","badgeProps","root","children"],"mappings":"AAAA;;;;;;;;;;;;gCAkCaW;eAAAA;;4BApBAT;;;;;iEAZU,QAAQ;uBACO,iBAAiB;AAWhD,MAAMA,2BAA2B,CAACC,OAA0BC;IACjE,MAAM,EAAEC,QAAQ,UAAU,EAAEC,aAAa,QAAQ,EAAEC,QAAQ,OAAO,EAAEC,OAAO,QAAQ,EAAE,GAAGC,mBAAmB,GAAGN;IAE9G,MAAMO,QAAQC,6BAA6BF,mBAAmBL;IAE9D,OAAO;QACL,GAAGM,KAAK;QACRL;QACAC;QACAC;QACAC;IACF;AACF,EAAE;AAQK,qCAAqC,CAC1CL,OACAC;IAEA,MAAM,EAAEQ,WAAW,KAAK,EAAEC,gBAAgB,EAAE,EAAEC,QAAQ,CAAC,EAAEC,MAAM,KAAK,EAAE,GAAGC,YAAY,GAAGb;IAExF,MAAMO,QAA+B;QACnC,OAAGT,4BAAAA,EAAsBe,YAAYZ,IAAiC;QACtEQ;QACAE;QACAC;IACF;IAEA,IAAKD,CAAAA,UAAU,KAAKF,QAAAA,CAAO,IAAM,CAACG,OAAO,CAACL,MAAMO,IAAI,CAACC,QAAQ,EAAE;QAC7DR,MAAMO,IAAI,CAACC,QAAQ,GAAGJ,QAAQD,gBAAgB,GAAGA,cAAc,CAAC,CAAC,GAAG,GAAGC,OAAO;IAChF;IAEA,OAAOJ;AACT,EAAE"}

View File

@@ -0,0 +1,62 @@
'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, {
counterBadgeClassNames: function() {
return counterBadgeClassNames;
},
useCounterBadgeStyles_unstable: function() {
return useCounterBadgeStyles_unstable;
}
});
const _react = require("@griffel/react");
const _useBadgeStylesstyles = require("../Badge/useBadgeStyles.styles");
const counterBadgeClassNames = {
root: 'fui-CounterBadge',
icon: 'fui-CounterBadge__icon'
};
const useStyles = /*#__PURE__*/ (0, _react.__styles)({
dot: {
Bf4jedk: "fgfkb25",
a9b677: "f16dn6v3",
Bqenvij: "f3mu39s",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f1mk8lai"
},
hide: {
mc9l5x: "fjseox"
}
}, {
d: [
".fgfkb25{min-width:auto;}",
".f16dn6v3{width:6px;}",
".f3mu39s{height:6px;}",
[
".f1mk8lai{padding:0;}",
{
p: -1
}
],
".fjseox{display:none;}"
]
});
const useCounterBadgeStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(counterBadgeClassNames.root, state.dot && styles.dot, !state.root.children && !state.dot && styles.hide, state.root.className);
if (state.icon) {
state.icon.className = (0, _react.mergeClasses)(counterBadgeClassNames.icon, state.icon.className);
}
return (0, _useBadgeStylesstyles.useBadgeStyles_unstable)(state);
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useCounterBadgeStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { useBadgeStyles_unstable } from '../Badge/useBadgeStyles.styles';\nexport const counterBadgeClassNames = {\n root: 'fui-CounterBadge',\n icon: 'fui-CounterBadge__icon'\n};\nconst useStyles = makeStyles({\n dot: {\n minWidth: 'auto',\n width: '6px',\n height: '6px',\n padding: '0'\n },\n hide: {\n display: 'none'\n }\n});\n/**\n * Applies style classnames to slots\n */ export const useCounterBadgeStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(counterBadgeClassNames.root, state.dot && styles.dot, !state.root.children && !state.dot && styles.hide, state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(counterBadgeClassNames.icon, state.icon.className);\n }\n return useBadgeStyles_unstable(state);\n};\n"],"names":["mergeClasses","__styles","useBadgeStyles_unstable","counterBadgeClassNames","root","icon","useStyles","dot","Bf4jedk","a9b677","Bqenvij","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","hide","mc9l5x","d","p","useCounterBadgeStyles_unstable","state","styles","className","children"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,sBAAsB;;;kCAiBY;eAA9BiB;;;uBAnBwB,gBAAgB;sCACjB,gCAAgC;AACjE,+BAA+B;IAClChB,IAAI,EAAE,kBAAkB;IACxBC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAM,GAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,IAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;KAAA;AAAA,CAUjB,CAAC;AAGS,wCAAwCE,KAAK,IAAG;IACvD,aAAa;IACb,MAAMC,MAAM,GAAGhB,SAAS,CAAC,CAAC;IAC1Be,KAAK,CAACjB,IAAI,CAACmB,SAAS,OAAGvB,mBAAY,EAACG,sBAAsB,CAACC,IAAI,EAAEiB,KAAK,CAACd,GAAG,IAAIe,MAAM,CAACf,GAAG,EAAE,CAACc,KAAK,CAACjB,IAAI,CAACoB,QAAQ,IAAI,CAACH,KAAK,CAACd,GAAG,IAAIe,MAAM,CAACN,IAAI,EAAEK,KAAK,CAACjB,IAAI,CAACmB,SAAS,CAAC;IAClK,IAAIF,KAAK,CAAChB,IAAI,EAAE;QACZgB,KAAK,CAAChB,IAAI,CAACkB,SAAS,OAAGvB,mBAAY,EAACG,sBAAsB,CAACE,IAAI,EAAEgB,KAAK,CAAChB,IAAI,CAACkB,SAAS,CAAC;IAC1F;IACA,WAAOrB,6CAAuB,EAACmB,KAAK,CAAC;AACzC,CAAC"}

View File

@@ -0,0 +1,45 @@
'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, {
counterBadgeClassNames: function() {
return counterBadgeClassNames;
},
useCounterBadgeStyles_unstable: function() {
return useCounterBadgeStyles_unstable;
}
});
const _react = require("@griffel/react");
const _useBadgeStylesstyles = require("../Badge/useBadgeStyles.styles");
const counterBadgeClassNames = {
root: 'fui-CounterBadge',
icon: 'fui-CounterBadge__icon'
};
const useStyles = (0, _react.makeStyles)({
dot: {
minWidth: 'auto',
width: '6px',
height: '6px',
padding: '0'
},
hide: {
display: 'none'
}
});
const useCounterBadgeStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(counterBadgeClassNames.root, state.dot && styles.dot, !state.root.children && !state.dot && styles.hide, state.root.className);
if (state.icon) {
state.icon.className = (0, _react.mergeClasses)(counterBadgeClassNames.icon, state.icon.className);
}
return (0, _useBadgeStylesstyles.useBadgeStyles_unstable)(state);
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CounterBadge/useCounterBadgeStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { useBadgeStyles_unstable } from '../Badge/useBadgeStyles.styles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { BadgeSlots } from '../Badge/Badge.types';\nimport type { CounterBadgeState } from './CounterBadge.types';\n\nexport const counterBadgeClassNames: SlotClassNames<BadgeSlots> = {\n root: 'fui-CounterBadge',\n icon: 'fui-CounterBadge__icon',\n};\n\nconst useStyles = makeStyles({\n dot: {\n minWidth: 'auto',\n width: '6px',\n height: '6px',\n padding: '0',\n },\n hide: {\n display: 'none',\n },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useCounterBadgeStyles_unstable = (state: CounterBadgeState): CounterBadgeState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(\n counterBadgeClassNames.root,\n state.dot && styles.dot,\n !state.root.children && !state.dot && styles.hide,\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(counterBadgeClassNames.icon, state.icon.className);\n }\n\n return useBadgeStyles_unstable(state) as CounterBadgeState;\n};\n"],"names":["mergeClasses","makeStyles","useBadgeStyles_unstable","counterBadgeClassNames","root","icon","useStyles","dot","minWidth","width","height","padding","hide","display","useCounterBadgeStyles_unstable","state","styles","className","children"],"mappings":"AAAA;;;;;;;;;;;;IAQaG,sBAAAA;;;kCAoBAW;eAAAA;;;uBA1B4B,iBAAiB;sCAClB,iCAAiC;AAKlE,+BAA2D;IAChEV,MAAM;IACNC,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYL,iBAAAA,EAAW;IAC3BM,KAAK;QACHC,UAAU;QACVC,OAAO;QACPC,QAAQ;QACRC,SAAS;IACX;IACAC,MAAM;QACJC,SAAS;IACX;AACF;AAKO,uCAAuC,CAACE;IAC7C;IAEA,MAAMC,SAASV;IACfS,MAAMX,IAAI,CAACa,SAAS,OAAGjB,mBAAAA,EACrBG,uBAAuBC,IAAI,EAC3BW,MAAMR,GAAG,IAAIS,OAAOT,GAAG,EACvB,CAACQ,MAAMX,IAAI,CAACc,QAAQ,IAAI,CAACH,MAAMR,GAAG,IAAIS,OAAOJ,IAAI,EACjDG,MAAMX,IAAI,CAACa,SAAS;IAGtB,IAAIF,MAAMV,IAAI,EAAE;QACdU,MAAMV,IAAI,CAACY,SAAS,OAAGjB,mBAAAA,EAAaG,uBAAuBE,IAAI,EAAEU,MAAMV,IAAI,CAACY,SAAS;IACvF;IAEA,WAAOf,6CAAAA,EAAwBa;AACjC,EAAE"}