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,28 @@
/* eslint-disable @typescript-eslint/no-deprecated */ "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, {
Alert: function() {
return _index.Alert;
},
alertClassNames: function() {
return _index.alertClassNames;
},
renderAlert_unstable: function() {
return _index.renderAlert_unstable;
},
useAlertStyles_unstable: function() {
return _index.useAlertStyles_unstable;
},
useAlert_unstable: function() {
return _index.useAlert_unstable;
}
});
const _index = require("./components/Alert/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/Alert.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */\nexport type { AlertProps, AlertSlots, AlertState } from './components/Alert/index';\nexport {\n Alert,\n alertClassNames,\n renderAlert_unstable,\n useAlertStyles_unstable,\n useAlert_unstable,\n} from './components/Alert/index';\n"],"names":["Alert","alertClassNames","renderAlert_unstable","useAlertStyles_unstable","useAlert_unstable"],"mappings":"AAAA,mDAAmD,GAEnD;;;;;;;;;;;;eACEA,YAAK;;;eACLC,sBAAe;;;eACfC,2BAAoB;;;eACpBC,8BAAuB;;;eACvBC,wBAAiB;;;uBACZ,2BAA2B"}

View File

@@ -0,0 +1,27 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Alert", {
enumerable: true,
get: function() {
return Alert;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _renderAlert = require("./renderAlert");
const _useAlert = require("./useAlert");
const _useAlertStylesstyles = require("./useAlertStyles.styles");
const Alert = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
// eslint-disable-next-line @typescript-eslint/no-deprecated
const state = (0, _useAlert.useAlert_unstable)(props, ref);
// eslint-disable-next-line @typescript-eslint/no-deprecated
(0, _useAlertStylesstyles.useAlertStyles_unstable)(state);
// eslint-disable-next-line @typescript-eslint/no-deprecated
return (0, _renderAlert.renderAlert_unstable)(state);
// eslint-disable-next-line @typescript-eslint/no-deprecated
});
// eslint-disable-next-line @typescript-eslint/no-deprecated
Alert.displayName = 'Alert';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Alert/Alert.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { renderAlert_unstable } from './renderAlert';\nimport { useAlert_unstable } from './useAlert';\nimport { useAlertStyles_unstable } from './useAlertStyles.styles';\n\nimport type { AlertProps } from './Alert.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * @deprecated please use the Toast or MessageBar component\n * An Alert component displays a brief, important message to attract a user's attention\n * without interrupting their current task.\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport const Alert: ForwardRefComponent<AlertProps> = React.forwardRef((props, ref) => {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n const state = useAlert_unstable(props, ref);\n\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n useAlertStyles_unstable(state);\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n return renderAlert_unstable(state);\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n}) as ForwardRefComponent<AlertProps>;\n\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nAlert.displayName = 'Alert';\n"],"names":["React","renderAlert_unstable","useAlert_unstable","useAlertStyles_unstable","Alert","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BAEM,gBAAgB;0BACnB,aAAa;sCACP,0BAA0B;AAW3D,MAAMI,QAAAA,WAAAA,GAAyCJ,OAAMK,UAAU,CAAC,CAACC,OAAOC;IAC7E,4DAA4D;IAC5D,MAAMC,YAAQN,2BAAAA,EAAkBI,OAAOC;IAEvC,4DAA4D;QAC5DJ,6CAAAA,EAAwBK;IACxB,4DAA4D;IAC5D,WAAOP,iCAAAA,EAAqBO;AAC5B,4DAA4D;AAC9D,GAAsC;AAEtC,4DAA4D;AAC5DJ,MAAMK,WAAW,GAAG"}

View File

@@ -0,0 +1,8 @@
/**
* State used in rendering Alert
* @deprecated please use the Toast or MessageBar component
*/ // eslint-disable-next-line @typescript-eslint/no-deprecated
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Alert/Alert.types.ts"],"sourcesContent":["import { Avatar } from '@fluentui/react-avatar';\nimport { Button } from '@fluentui/react-button';\n\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * @deprecated please use the Toast or MessageBar component\n */\nexport type AlertSlots = {\n /**\n * The root slot is the top level container for the alert component\n */\n root: NonNullable<Slot<'div'>>;\n /**\n * The icon slot renders the icon determined by the `icon` or `intent` prop\n */\n icon?: Slot<'span'>;\n /**\n * The action slot renders a button that prompts the user to take action on the alert\n */\n action?: Slot<typeof Button>;\n /**\n * The avatar slot renders an avatar before the contents of the alert\n */\n avatar?: Slot<typeof Avatar>;\n};\n\n/**\n * Alert Props\n * @deprecated please use the Toast or MessageBar component\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport type AlertProps = ComponentProps<AlertSlots> & {\n /**\n * The intent prop, if present, determines the icon to be rendered in the icon slot. The icon prop\n * overrides the intent prop\n */\n intent?: 'info' | 'success' | 'error' | 'warning';\n /**\n * The appearance of the Alert.\n * @default 'primary'\n */\n appearance?: 'primary' | 'inverted';\n};\n\n/**\n * State used in rendering Alert\n * @deprecated please use the Toast or MessageBar component\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport type AlertState = ComponentState<AlertSlots> &\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n Pick<AlertProps, 'intent'> &\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n Required<Pick<AlertProps, 'appearance'>>;\n"],"names":[],"mappings":"AA6CA;;;CAGC,GACD,4DAA4D"}

View File

@@ -0,0 +1,31 @@
/* eslint-disable @typescript-eslint/no-deprecated */ "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, {
Alert: function() {
return _Alert.Alert;
},
alertClassNames: function() {
return _useAlertStylesstyles.alertClassNames;
},
renderAlert_unstable: function() {
return _renderAlert.renderAlert_unstable;
},
useAlertStyles_unstable: function() {
return _useAlertStylesstyles.useAlertStyles_unstable;
},
useAlert_unstable: function() {
return _useAlert.useAlert_unstable;
}
});
const _Alert = require("./Alert");
const _renderAlert = require("./renderAlert");
const _useAlert = require("./useAlert");
const _useAlertStylesstyles = require("./useAlertStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Alert/index.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */\nexport { Alert } from './Alert';\nexport type { AlertProps, AlertSlots, AlertState } from './Alert.types';\nexport { renderAlert_unstable } from './renderAlert';\nexport { useAlert_unstable } from './useAlert';\nexport { alertClassNames, useAlertStyles_unstable } from './useAlertStyles.styles';\n"],"names":["Alert","renderAlert_unstable","useAlert_unstable","alertClassNames","useAlertStyles_unstable"],"mappings":"AAAA,mDAAmD,GACnD;;;;;;;;;;;;eAASA,YAAK;;;eAILG,qCAAe;;;eAFfF,iCAAoB;;;eAEHG,6CAAuB;;;eADxCF,2BAAiB;;;uBAHJ,UAAU;6BAEK,gBAAgB;0BACnB,aAAa;sCACU,0BAA0B"}

View File

@@ -0,0 +1,24 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderAlert_unstable", {
enumerable: true,
get: function() {
return renderAlert_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderAlert_unstable = (state)=>{
// eslint-disable-next-line @typescript-eslint/no-deprecated
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
children: [
state.icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.icon, {}),
state.avatar && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.avatar, {}),
state.root.children,
state.action && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.action, {})
]
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Alert/renderAlert.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type * as React from 'react';\n\nimport type { AlertState, AlertSlots } from './Alert.types';\n\n/**\n * @deprecated please use the Toast or MessageBar component\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport const renderAlert_unstable = (state: AlertState): React.ReactElement => {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n assertSlots<AlertSlots>(state);\n\n return (\n <state.root>\n {state.icon && <state.icon />}\n {state.avatar && <state.avatar />}\n {state.root.children}\n {state.action && <state.action />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderAlert_unstable","state","root","icon","avatar","children","action"],"mappings":";;;;+BAWaC;;;;;;4BAVb,iCAAiD;gCACrB,4BAA4B;AASjD,6BAA6B,CAACC;IACnC,4DAA4D;QAC5DF,2BAAAA,EAAwBE;IAExB,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAME,IAAI,IAAA,WAAA,OAAI,eAAA,EAACF,MAAME,IAAI,EAAA,CAAA;YACzBF,MAAMG,MAAM,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,MAAM,EAAA,CAAA;YAC7BH,MAAMC,IAAI,CAACG,QAAQ;YACnBJ,MAAMK,MAAM,IAAA,WAAA,OAAI,eAAA,EAACL,MAAMK,MAAM,EAAA,CAAA;;;AAGpC,EAAE"}

View File

@@ -0,0 +1,80 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useAlert_unstable", {
enumerable: true,
get: function() {
return useAlert_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactavatar = require("@fluentui/react-avatar");
const _reactbutton = require("@fluentui/react-button");
const _reacticons = require("@fluentui/react-icons");
const _reactutilities = require("@fluentui/react-utilities");
const useAlert_unstable = (props, ref)=>{
const { appearance = 'primary', intent } = props;
/** Determine the role and icon to render based on the intent */ let defaultIcon;
let defaultRole = 'status';
switch(intent){
case 'success':
defaultIcon = /*#__PURE__*/ _react.createElement(_reacticons.CheckmarkCircleFilled, null);
break;
case 'error':
defaultIcon = /*#__PURE__*/ _react.createElement(_reacticons.DismissCircleFilled, null);
defaultRole = 'alert';
break;
case 'warning':
defaultIcon = /*#__PURE__*/ _react.createElement(_reacticons.WarningFilled, null);
defaultRole = 'alert';
break;
case 'info':
defaultIcon = /*#__PURE__*/ _react.createElement(_reacticons.InfoFilled, null);
break;
}
const action = _reactutilities.slot.optional(props.action, {
defaultProps: {
appearance: 'transparent'
},
elementType: _reactbutton.Button
});
const avatar = _reactutilities.slot.optional(props.avatar, {
elementType: _reactavatar.Avatar
});
let icon;
/** Avatar prop takes precedence over the icon or intent prop */ if (!avatar) {
icon = _reactutilities.slot.optional(props.icon, {
defaultProps: {
children: defaultIcon
},
renderByDefault: !!props.intent,
elementType: 'span'
});
}
return {
action,
appearance,
avatar,
components: {
root: 'div',
icon: 'span',
action: _reactbutton.Button,
avatar: _reactavatar.Avatar
},
icon,
intent,
root: _reactutilities.slot.always((0, _reactutilities.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,
role: defaultRole,
children: props.children,
...props
}), {
elementType: 'div'
})
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Alert/useAlert.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Avatar } from '@fluentui/react-avatar';\nimport { Button } from '@fluentui/react-button';\nimport { CheckmarkCircleFilled, DismissCircleFilled, InfoFilled, WarningFilled } from '@fluentui/react-icons';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\n\nimport type { AlertProps, AlertState } from './Alert.types';\n\n/**\n * @deprecated please use the Toast or MessageBar component\n * Create the state required to render Alert.\n *\n * The returned state can be modified with hooks such as useAlertStyles_unstable,\n * before being passed to renderAlert_unstable.\n *\n * @param props - props from this instance of Alert\n * @param ref - reference to root HTMLElement of Alert\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport const useAlert_unstable = (props: AlertProps, ref: React.Ref<HTMLElement>): AlertState => {\n const { appearance = 'primary', intent } = props;\n\n /** Determine the role and icon to render based on the intent */\n let defaultIcon;\n let defaultRole = 'status';\n switch (intent) {\n case 'success':\n defaultIcon = <CheckmarkCircleFilled />;\n break;\n case 'error':\n defaultIcon = <DismissCircleFilled />;\n defaultRole = 'alert';\n break;\n case 'warning':\n defaultIcon = <WarningFilled />;\n defaultRole = 'alert';\n break;\n case 'info':\n defaultIcon = <InfoFilled />;\n break;\n }\n\n const action = slot.optional(props.action, { defaultProps: { appearance: 'transparent' }, elementType: Button });\n const avatar = slot.optional(props.avatar, { elementType: Avatar });\n let icon;\n /** Avatar prop takes precedence over the icon or intent prop */ if (!avatar) {\n icon = slot.optional(props.icon, {\n defaultProps: { children: defaultIcon },\n renderByDefault: !!props.intent,\n elementType: 'span',\n });\n }\n return {\n action,\n appearance,\n avatar,\n components: { root: 'div', icon: 'span', action: Button, avatar: Avatar },\n icon,\n intent,\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 role: defaultRole,\n children: props.children,\n ...props,\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["React","Avatar","Button","CheckmarkCircleFilled","DismissCircleFilled","InfoFilled","WarningFilled","getIntrinsicElementProps","slot","useAlert_unstable","props","ref","appearance","intent","defaultIcon","defaultRole","action","optional","defaultProps","elementType","avatar","icon","children","renderByDefault","components","root","always","role"],"mappings":";;;;+BAoBaS;;;;;;;iEApBU,QAAQ;6BAER,yBAAyB;6BACzB,yBAAyB;4BACsC,wBAAwB;gCAC/D,4BAA4B;AAepE,0BAA0B,CAACC,OAAmBC;IACnD,MAAM,EAAEC,aAAa,SAAS,EAAEC,MAAM,EAAE,GAAGH;IAE3C,8DAA8D,GAC9D,IAAII;IACJ,IAAIC,cAAc;IAClB,OAAQF;QACN,KAAK;YACHC,cAAAA,WAAAA,GAAc,OAAA,aAAA,CAACX,iCAAAA,EAAAA;YACf;QACF,KAAK;YACHW,cAAAA,WAAAA,GAAc,OAAA,aAAA,CAACV,+BAAAA,EAAAA;YACfW,cAAc;YACd;QACF,KAAK;YACHD,cAAAA,WAAAA,GAAc,OAAA,aAAA,CAACR,yBAAAA,EAAAA;YACfS,cAAc;YACd;QACF,KAAK;YACHD,cAAAA,WAAAA,GAAc,OAAA,aAAA,CAACT,sBAAAA,EAAAA;YACf;IACJ;IAEA,MAAMW,SAASR,oBAAAA,CAAKS,QAAQ,CAACP,MAAMM,MAAM,EAAE;QAAEE,cAAc;YAAEN,YAAY;QAAc;QAAGO,aAAajB,mBAAAA;IAAO;IAC9G,MAAMkB,SAASZ,oBAAAA,CAAKS,QAAQ,CAACP,MAAMU,MAAM,EAAE;QAAED,aAAalB,mBAAAA;IAAO;IACjE,IAAIoB;IACJ,8DAA8D,GAAG,IAAI,CAACD,QAAQ;QAC5EC,OAAOb,oBAAAA,CAAKS,QAAQ,CAACP,MAAMW,IAAI,EAAE;YAC/BH,cAAc;gBAAEI,UAAUR;YAAY;YACtCS,iBAAiB,CAAC,CAACb,MAAMG,MAAM;YAC/BM,aAAa;QACf;IACF;IACA,OAAO;QACLH;QACAJ;QACAQ;QACAI,YAAY;YAAEC,MAAM;YAAOJ,MAAM;YAAQL,QAAQd,mBAAAA;YAAQkB,QAAQnB,mBAAAA;QAAO;QACxEoB;QACAR;QACAY,MAAMjB,oBAAAA,CAAKkB,MAAM,KACfnB,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FI,KAAKA;YACLgB,MAAMZ;YACNO,UAAUZ,MAAMY,QAAQ;YACxB,GAAGZ,KAAK;QACV,IACA;YAAES,aAAa;QAAM;IAEzB;AACF,EAAE"}

View File

@@ -0,0 +1,258 @@
'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, {
alertClassNames: function() {
return alertClassNames;
},
useAlertStyles_unstable: function() {
return useAlertStyles_unstable;
}
});
const _react = require("@griffel/react");
const alertClassNames = {
root: 'fui-Alert',
icon: 'fui-Alert__icon',
action: 'fui-Alert__action',
avatar: 'fui-Alert__avatar'
};
const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
mc9l5x: "f22iagw",
Bt984gj: "f122n59",
sshi5w: "f5pgtk9",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f1oic3e7",
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "ff3glw6",
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: "f9ggezi",
E5pizo: "fz58gqq",
Be2twd7: "fkhj508",
Bhrd7zp: "fl43uef",
sj55zd: "f19n0e5",
De3pzq: "fxugw4r"
},
inverted: {
sj55zd: "f1w7i9ko",
De3pzq: "f5pduvr"
},
icon: {
Bqenvij: "fd461yt",
Be2twd7: "f4ybsrx",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: [
"fhivll6",
"f1cgepy8"
]
},
avatar: {
jrapky: 0,
Frg6f3: 0,
t21cq0: 0,
B6of3ja: 0,
B74szlk: [
"fxal17o",
"ftghr3s"
]
},
action: {
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f4jnnbt",
Bf4jedk: "fy77jfu",
Frg6f3: [
"fcgxt0o",
"f1ujusj6"
],
sj55zd: "f16muhyy"
}
}, {
d: [
".f22iagw{display:flex;}",
".f122n59{align-items:center;}",
".f5pgtk9{min-height:44px;}",
[
".f1oic3e7{padding:0 12px;}",
{
p: -1
}
],
[
".ff3glw6{border-radius:4px;}",
{
p: -1
}
],
[
".f9ggezi{border:1px solid var(--colorTransparentStroke);}",
{
p: -2
}
],
".fz58gqq{box-shadow:var(--shadow8);}",
".fkhj508{font-size:var(--fontSizeBase300);}",
".fl43uef{font-weight:var(--fontWeightSemibold);}",
".f19n0e5{color:var(--colorNeutralForeground1);}",
".fxugw4r{background-color:var(--colorNeutralBackground1);}",
".f1w7i9ko{color:var(--colorNeutralForegroundInverted2);}",
".f5pduvr{background-color:var(--colorNeutralBackgroundInverted);}",
".fd461yt{height:16px;}",
".f4ybsrx{font-size:16px;}",
[
".fhivll6{padding:0 8px 0 0;}",
{
p: -1
}
],
[
".f1cgepy8{padding:0 0 0 8px;}",
{
p: -1
}
],
[
".fxal17o{margin:0 8px 0 0;}",
{
p: -1
}
],
[
".ftghr3s{margin:0 0 0 8px;}",
{
p: -1
}
],
[
".f4jnnbt{padding:5px 10px;}",
{
p: -1
}
],
".fy77jfu{min-width:0;}",
".fcgxt0o{margin-left:auto;}",
".f1ujusj6{margin-right:auto;}",
".f16muhyy{color:var(--colorBrandForeground1);}"
]
});
const useIntentIconStyles = /*#__PURE__*/ (0, _react.__styles)({
success: {
sj55zd: "f1m7fhi8"
},
error: {
sj55zd: "f1whyuy6"
},
warning: {
sj55zd: "fpti2h4"
},
info: {
sj55zd: "fkfq4zb"
}
}, {
d: [
".f1m7fhi8{color:var(--colorPaletteGreenForeground3);}",
".f1whyuy6{color:var(--colorPaletteRedForeground3);}",
".fpti2h4{color:var(--colorPaletteYellowForeground2);}",
".fkfq4zb{color:var(--colorNeutralForeground2);}"
]
});
const useIntentIconStylesInverted = /*#__PURE__*/ (0, _react.__styles)({
success: {
sj55zd: "f1pvjcpr"
},
error: {
sj55zd: "fcrp5ll"
},
warning: {
sj55zd: "f1r8f1cl"
},
info: {
sj55zd: "f1w7i9ko"
}
}, {
d: [
".f1pvjcpr{color:var(--colorPaletteGreenForegroundInverted);}",
".fcrp5ll{color:var(--colorPaletteRedForegroundInverted);}",
".f1r8f1cl{color:var(--colorPaletteYellowForegroundInverted);}",
".f1w7i9ko{color:var(--colorNeutralForegroundInverted2);}"
]
});
const useActionButtonColorInverted = /*#__PURE__*/ (0, _react.__styles)({
action: {
sj55zd: "f1qz2gb0",
B8q5s1w: "fa5e339",
Bci5o5g: [
"fk4svks",
"fqzoz0o"
],
n8qw10: "fw8q0i0",
Bdrgwmp: [
"fqzoz0o",
"fk4svks"
],
Bfpq7zp: "f1dlk4fq"
}
}, {
d: [
".f1qz2gb0{color:var(--colorBrandForegroundInverted);}",
".fa5e339[data-fui-focus-visible]{border-top-color:var(--colorTransparentStrokeInteractive);}",
".fk4svks[data-fui-focus-visible]{border-right-color:var(--colorTransparentStrokeInteractive);}",
".fqzoz0o[data-fui-focus-visible]{border-left-color:var(--colorTransparentStrokeInteractive);}",
".fw8q0i0[data-fui-focus-visible]{border-bottom-color:var(--colorTransparentStrokeInteractive);}",
".f1dlk4fq[data-fui-focus-visible]{outline-color:var(--colorNeutralBackground5Pressed);}"
]
});
const useAlertStyles_unstable = (state)=>{
const inverted = state.appearance === 'inverted';
const styles = useStyles();
const intentIconStylesPrimary = useIntentIconStyles();
const intentIconStylesInverted = useIntentIconStylesInverted();
const actionStylesInverted = useActionButtonColorInverted();
// eslint-disable-next-line react-compiler/react-compiler
state.root.className = (0, _react.mergeClasses)(alertClassNames.root, styles.root, inverted && styles.inverted, state.root.className);
if (state.icon) {
state.icon.className = (0, _react.mergeClasses)(alertClassNames.icon, styles.icon, state.intent && (inverted ? intentIconStylesInverted[state.intent] : intentIconStylesPrimary[state.intent]), state.icon.className);
}
if (state.avatar) {
state.avatar.className = (0, _react.mergeClasses)(alertClassNames.avatar, styles.avatar, state.avatar.className);
}
if (state.action) {
// Note: inverted && actionStylesInverted.action has the highest piority and must be merged last
state.action.className = (0, _react.mergeClasses)(alertClassNames.action, styles.action, inverted && actionStylesInverted.action, state.action.className);
}
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,120 @@
'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, {
alertClassNames: function() {
return alertClassNames;
},
useAlertStyles_unstable: function() {
return useAlertStyles_unstable;
}
});
const _reacttheme = require("@fluentui/react-theme");
const _react = require("@griffel/react");
const _reacttabster = require("@fluentui/react-tabster");
const alertClassNames = {
root: 'fui-Alert',
icon: 'fui-Alert__icon',
action: 'fui-Alert__action',
avatar: 'fui-Alert__avatar'
};
const useStyles = (0, _react.makeStyles)({
root: {
display: 'flex',
alignItems: 'center',
minHeight: '44px',
padding: '0 12px',
borderRadius: '4px',
border: `1px solid ${_reacttheme.tokens.colorTransparentStroke}`,
boxShadow: _reacttheme.tokens.shadow8,
fontSize: _reacttheme.tokens.fontSizeBase300,
fontWeight: _reacttheme.tokens.fontWeightSemibold,
color: _reacttheme.tokens.colorNeutralForeground1,
backgroundColor: _reacttheme.tokens.colorNeutralBackground1
},
inverted: {
color: _reacttheme.tokens.colorNeutralForegroundInverted2,
backgroundColor: _reacttheme.tokens.colorNeutralBackgroundInverted
},
icon: {
height: '16px',
fontSize: '16px',
padding: '0 8px 0 0'
},
avatar: {
margin: '0 8px 0 0'
},
action: {
padding: '5px 10px',
minWidth: 0,
marginLeft: 'auto',
color: _reacttheme.tokens.colorBrandForeground1
}
});
const useIntentIconStyles = (0, _react.makeStyles)({
success: {
color: _reacttheme.tokens.colorPaletteGreenForeground3
},
error: {
color: _reacttheme.tokens.colorPaletteRedForeground3
},
warning: {
color: _reacttheme.tokens.colorPaletteYellowForeground2
},
info: {
color: _reacttheme.tokens.colorNeutralForeground2
}
});
const useIntentIconStylesInverted = (0, _react.makeStyles)({
success: {
color: _reacttheme.tokens.colorPaletteGreenForegroundInverted
},
error: {
color: _reacttheme.tokens.colorPaletteRedForegroundInverted
},
warning: {
color: _reacttheme.tokens.colorPaletteYellowForegroundInverted
},
info: {
color: _reacttheme.tokens.colorNeutralForegroundInverted2
}
});
const useActionButtonColorInverted = (0, _react.makeStyles)({
action: {
color: _reacttheme.tokens.colorBrandForegroundInverted,
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
..._react.shorthands.borderColor(_reacttheme.tokens.colorTransparentStrokeInteractive),
outlineColor: _reacttheme.tokens.colorNeutralBackground5Pressed
}, {
enableOutline: true
})
}
});
const useAlertStyles_unstable = (state)=>{
const inverted = state.appearance === 'inverted';
const styles = useStyles();
const intentIconStylesPrimary = useIntentIconStyles();
const intentIconStylesInverted = useIntentIconStylesInverted();
const actionStylesInverted = useActionButtonColorInverted();
// eslint-disable-next-line react-compiler/react-compiler
state.root.className = (0, _react.mergeClasses)(alertClassNames.root, styles.root, inverted && styles.inverted, state.root.className);
if (state.icon) {
state.icon.className = (0, _react.mergeClasses)(alertClassNames.icon, styles.icon, state.intent && (inverted ? intentIconStylesInverted[state.intent] : intentIconStylesPrimary[state.intent]), state.icon.className);
}
if (state.avatar) {
state.avatar.className = (0, _react.mergeClasses)(alertClassNames.avatar, styles.avatar, state.avatar.className);
}
if (state.action) {
// Note: inverted && actionStylesInverted.action has the highest piority and must be merged last
state.action.className = (0, _react.mergeClasses)(alertClassNames.action, styles.action, inverted && actionStylesInverted.action, state.action.className);
}
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,29 @@
// eslint-disable-next-line @typescript-eslint/no-deprecated
"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, {
Alert: function() {
return _Alert.Alert;
},
alertClassNames: function() {
return _Alert.alertClassNames;
},
renderAlert_unstable: function() {
return _Alert.renderAlert_unstable;
},
useAlertStyles_unstable: function() {
return _Alert.useAlertStyles_unstable;
},
useAlert_unstable: function() {
return _Alert.useAlert_unstable;
}
});
const _Alert = require("./Alert");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport { Alert, alertClassNames, renderAlert_unstable, useAlertStyles_unstable, useAlert_unstable } from './Alert';\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport type { AlertProps, AlertSlots, AlertState } from './Alert';\n"],"names":["Alert","alertClassNames","renderAlert_unstable","useAlertStyles_unstable","useAlert_unstable"],"mappings":"AAAA,4DAA4D;;;;;;;;;;;;;eACnDA,YAAK;;;eAAEC,sBAAe;;;eAAEC,2BAAoB;;;eAAEC,8BAAuB;;;eAAEC,wBAAiB;;;uBAAQ,UAAU"}