@fluentui/react-badge 0.0.0-nightly-20230426-0420.1 → 0.0.0-nightly-20230428-0419.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +13 -13
- package/CHANGELOG.md +9 -9
- package/lib-commonjs/components/Badge/Badge.js +2 -2
- package/lib-commonjs/components/Badge/Badge.js.map +1 -1
- package/lib-commonjs/components/Badge/index.js +1 -1
- package/lib-commonjs/components/Badge/index.js.map +1 -1
- package/lib-commonjs/components/Badge/{useBadgeStyles.js → useBadgeStyles.styles.js} +2 -2
- package/lib-commonjs/components/Badge/useBadgeStyles.styles.js.map +1 -0
- package/lib-commonjs/components/CounterBadge/CounterBadge.js +2 -2
- package/lib-commonjs/components/CounterBadge/CounterBadge.js.map +1 -1
- package/lib-commonjs/components/CounterBadge/index.js +1 -1
- package/lib-commonjs/components/CounterBadge/index.js.map +1 -1
- package/lib-commonjs/components/CounterBadge/{useCounterBadgeStyles.js → useCounterBadgeStyles.styles.js} +4 -4
- package/lib-commonjs/components/CounterBadge/useCounterBadgeStyles.styles.js.map +1 -0
- package/lib-commonjs/components/PresenceBadge/PresenceBadge.js +2 -2
- package/lib-commonjs/components/PresenceBadge/PresenceBadge.js.map +1 -1
- package/lib-commonjs/components/PresenceBadge/index.js +1 -1
- package/lib-commonjs/components/PresenceBadge/index.js.map +1 -1
- package/lib-commonjs/components/PresenceBadge/{usePresenceBadgeStyles.js → usePresenceBadgeStyles.styles.js} +2 -2
- package/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.styles.js.map +1 -0
- package/package.json +6 -6
- package/dist/index.d.ts +0 -159
- package/lib/Badge.js +0 -2
- package/lib/Badge.js.map +0 -1
- package/lib/CounterBadge.js +0 -2
- package/lib/CounterBadge.js.map +0 -1
- package/lib/PresenceBadge.js +0 -2
- package/lib/PresenceBadge.js.map +0 -1
- package/lib/components/Badge/Badge.js +0 -16
- package/lib/components/Badge/Badge.js.map +0 -1
- package/lib/components/Badge/Badge.types.js +0 -2
- package/lib/components/Badge/Badge.types.js.map +0 -1
- package/lib/components/Badge/index.js +0 -5
- package/lib/components/Badge/index.js.map +0 -1
- package/lib/components/Badge/renderBadge.js +0 -10
- package/lib/components/Badge/renderBadge.js.map +0 -1
- package/lib/components/Badge/useBadge.js +0 -32
- package/lib/components/Badge/useBadge.js.map +0 -1
- package/lib/components/Badge/useBadgeStyles.js +0 -315
- package/lib/components/Badge/useBadgeStyles.js.map +0 -1
- package/lib/components/CounterBadge/CounterBadge.js +0 -16
- package/lib/components/CounterBadge/CounterBadge.js.map +0 -1
- package/lib/components/CounterBadge/CounterBadge.types.js +0 -2
- package/lib/components/CounterBadge/CounterBadge.types.js.map +0 -1
- package/lib/components/CounterBadge/index.js +0 -5
- package/lib/components/CounterBadge/index.js.map +0 -1
- package/lib/components/CounterBadge/useCounterBadge.js +0 -28
- package/lib/components/CounterBadge/useCounterBadge.js.map +0 -1
- package/lib/components/CounterBadge/useCounterBadgeStyles.js +0 -34
- package/lib/components/CounterBadge/useCounterBadgeStyles.js.map +0 -1
- package/lib/components/PresenceBadge/PresenceBadge.js +0 -16
- package/lib/components/PresenceBadge/PresenceBadge.js.map +0 -1
- package/lib/components/PresenceBadge/PresenceBadge.types.js +0 -2
- package/lib/components/PresenceBadge/PresenceBadge.types.js.map +0 -1
- package/lib/components/PresenceBadge/index.js +0 -5
- package/lib/components/PresenceBadge/index.js.map +0 -1
- package/lib/components/PresenceBadge/presenceIcons.js +0 -135
- package/lib/components/PresenceBadge/presenceIcons.js.map +0 -1
- package/lib/components/PresenceBadge/usePresenceBadge.js +0 -65
- package/lib/components/PresenceBadge/usePresenceBadge.js.map +0 -1
- package/lib/components/PresenceBadge/usePresenceBadgeStyles.js +0 -79
- package/lib/components/PresenceBadge/usePresenceBadgeStyles.js.map +0 -1
- package/lib/index.js +0 -4
- package/lib/index.js.map +0 -1
- package/lib-commonjs/components/Badge/useBadgeStyles.js.map +0 -1
- package/lib-commonjs/components/CounterBadge/useCounterBadgeStyles.js.map +0 -1
- package/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.js.map +0 -1
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":[],"sources":["../../../src/components/Badge/Badge.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type BadgeSlots = {\n root: Slot<'div'>;\n icon?: Slot<'span'>;\n};\n\n// react has a non-standard `color` attribute in its types\n// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/a4ab0fa432320e70da9e51c8ae2e47377f65804b/types/react/index.d.ts#L1868\nexport type BadgeProps = Omit<ComponentProps<BadgeSlots>, 'color'> & {\n /**\n * A Badge can be filled, outline, ghost, inverted\n * @defaultvalue filled\n */\n appearance?: 'filled' | 'ghost' | 'outline' | 'tint';\n\n /**\n * A Badge can be one of preset colors\n * @defaultvalue brand\n */\n color?: 'brand' | 'danger' | 'important' | 'informative' | 'severe' | 'subtle' | 'success' | 'warning';\n\n /**\n * A Badge can position the icon before or after the content.\n * @defaultvalue before\n */\n iconPosition?: 'before' | 'after';\n\n /**\n * A Badge can be square, circular or rounded.\n * @defaultvalue circular\n */\n shape?: 'circular' | 'rounded' | 'square';\n\n /**\n * A Badge can be on of several preset sizes.\n * @defaultvalue medium\n */\n size?: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';\n};\n\nexport type BadgeState = ComponentState<BadgeSlots> &\n Required<Pick<BadgeProps, 'appearance' | 'color' | 'iconPosition' | 'shape' | 'size'>>;\n"],"mappings":"AAAA"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":[],"sources":["../../../src/components/Badge/index.ts"],"sourcesContent":["export * from './Badge';\n// Explicit exports to omit BadgeCommons\nexport type { BadgeProps, BadgeSlots, BadgeState } from './Badge.types';\nexport * from './renderBadge';\nexport * from './useBadge';\nexport * from './useBadgeStyles';\n"],"mappings":"AAAA,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc"}
|
@@ -1,10 +0,0 @@
|
|
1
|
-
/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
|
2
|
-
import { getSlotsNext } from '@fluentui/react-utilities';
|
3
|
-
export const renderBadge_unstable = state => {
|
4
|
-
const {
|
5
|
-
slots,
|
6
|
-
slotProps
|
7
|
-
} = getSlotsNext(state);
|
8
|
-
return /*#__PURE__*/createElement(slots.root, slotProps.root, state.iconPosition === 'before' && slots.icon && /*#__PURE__*/createElement(slots.icon, slotProps.icon), state.root.children, state.iconPosition === 'after' && slots.icon && /*#__PURE__*/createElement(slots.icon, slotProps.icon));
|
9
|
-
};
|
10
|
-
//# sourceMappingURL=renderBadge.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["createElement","getSlotsNext","renderBadge_unstable","state","slots","slotProps","root","iconPosition","icon","children"],"sources":["../../../src/components/Badge/renderBadge.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { BadgeState, BadgeSlots } from './Badge.types';\n\nexport const renderBadge_unstable = (state: BadgeState) => {\n const { slots, slotProps } = getSlotsNext<BadgeSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {state.iconPosition === 'before' && slots.icon && <slots.icon {...slotProps.icon} />}\n {state.root.children}\n {state.iconPosition === 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n </slots.root>\n );\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAE9B,SAASC,YAAY,QAAQ;AAG7B,OAAO,MAAMC,oBAAA,GAAwBC,KAAA,IAAsB;EACzD,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,YAAA,CAAyBE,KAAA;EAEtD,oBACEH,aAXJ,CAWKI,KAAA,CAAME,IAAI,EAAKD,SAAA,CAAUC,IAAI,EAC3BH,KAAA,CAAMI,YAAY,KAAK,YAAYH,KAAA,CAAMI,IAAI,iBAAIR,aAZxD,CAYyDI,KAAA,CAAMI,IAAI,EAAKH,SAAA,CAAUG,IAAI,GAC/EL,KAAA,CAAMG,IAAI,CAACG,QAAQ,EACnBN,KAAA,CAAMI,YAAY,KAAK,WAAWH,KAAA,CAAMI,IAAI,iBAAIR,aAdvD,CAcwDI,KAAA,CAAMI,IAAI,EAAKH,SAAA,CAAUG,IAAI;AAGrF"}
|
@@ -1,32 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
|
3
|
-
/**
|
4
|
-
* Returns the props and state required to render the component
|
5
|
-
*/
|
6
|
-
export const useBadge_unstable = (props, ref) => {
|
7
|
-
const {
|
8
|
-
shape = 'circular',
|
9
|
-
size = 'medium',
|
10
|
-
iconPosition = 'before',
|
11
|
-
appearance = 'filled',
|
12
|
-
color = 'brand'
|
13
|
-
} = props;
|
14
|
-
const state = {
|
15
|
-
shape,
|
16
|
-
size,
|
17
|
-
iconPosition,
|
18
|
-
appearance,
|
19
|
-
color,
|
20
|
-
components: {
|
21
|
-
root: 'div',
|
22
|
-
icon: 'span'
|
23
|
-
},
|
24
|
-
root: getNativeElementProps('div', {
|
25
|
-
ref,
|
26
|
-
...props
|
27
|
-
}),
|
28
|
-
icon: resolveShorthand(props.icon)
|
29
|
-
};
|
30
|
-
return state;
|
31
|
-
};
|
32
|
-
//# sourceMappingURL=useBadge.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["React","getNativeElementProps","resolveShorthand","useBadge_unstable","props","ref","shape","size","iconPosition","appearance","color","state","components","root","icon"],"sources":["../../../src/components/Badge/useBadge.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { BadgeProps, BadgeState } from './Badge.types';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useBadge_unstable = (props: BadgeProps, ref: React.Ref<HTMLElement>): BadgeState => {\n const {\n shape = 'circular',\n size = 'medium',\n iconPosition = 'before',\n appearance = 'filled',\n color = 'brand',\n } = props;\n\n const state: BadgeState = {\n shape,\n size,\n iconPosition,\n appearance,\n color,\n components: {\n root: 'div',\n icon: 'span',\n },\n root: getNativeElementProps('div', {\n ref,\n ...props,\n }),\n icon: resolveShorthand(props.icon),\n };\n\n return state;\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ;AAGxD;;;AAGA,OAAO,MAAMC,iBAAA,GAAoBA,CAACC,KAAA,EAAmBC,GAAA,KAA4C;EAC/F,MAAM;IACJC,KAAA,GAAQ;IACRC,IAAA,GAAO;IACPC,YAAA,GAAe;IACfC,UAAA,GAAa;IACbC,KAAA,GAAQ;EAAO,CAChB,GAAGN,KAAA;EAEJ,MAAMO,KAAA,GAAoB;IACxBL,KAAA;IACAC,IAAA;IACAC,YAAA;IACAC,UAAA;IACAC,KAAA;IACAE,UAAA,EAAY;MACVC,IAAA,EAAM;MACNC,IAAA,EAAM;IACR;IACAD,IAAA,EAAMZ,qBAAA,CAAsB,OAAO;MACjCI,GAAA;MACA,GAAGD;IACL;IACAU,IAAA,EAAMZ,gBAAA,CAAiBE,KAAA,CAAMU,IAAI;EACnC;EAEA,OAAOH,KAAA;AACT"}
|
@@ -1,315 +0,0 @@
|
|
1
|
-
import { shorthands, __resetStyles, __styles, mergeClasses } from '@griffel/react';
|
2
|
-
import { tokens, typographyStyles } from '@fluentui/react-theme';
|
3
|
-
export const badgeClassNames = {
|
4
|
-
root: 'fui-Badge',
|
5
|
-
icon: 'fui-Badge__icon'
|
6
|
-
};
|
7
|
-
// The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.
|
8
|
-
// Instead, add extra padding to the root, and a negative margin on the icon to "remove" the extra padding on the icon.
|
9
|
-
const textPadding = tokens.spacingHorizontalXXS;
|
10
|
-
const useRootClassName = /*#__PURE__*/__resetStyles("r1l7mb74", "rntuq2r", [".r1l7mb74{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;box-sizing:border-box;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;position:relative;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase200);height:20px;width:20px;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;padding:0 calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));border-radius:var(--borderRadiusCircular);border-color:var(--colorTransparentStroke);}", ".r1l7mb74::after{content:\"\";position:absolute;top:0;left:0;bottom:0;right:0;border-style:solid;border-color:inherit;border-width:var(--strokeWidthThin);border-radius:inherit;}", ".rntuq2r{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;box-sizing:border-box;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;position:relative;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase200);height:20px;width:20px;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;padding:0 calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));border-radius:var(--borderRadiusCircular);border-color:var(--colorTransparentStroke);}", ".rntuq2r::after{content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;border-style:solid;border-color:inherit;border-width:var(--strokeWidthThin);border-radius:inherit;}"]);
|
11
|
-
const useRootStyles = /*#__PURE__*/__styles({
|
12
|
-
fontSmallToTiny: {
|
13
|
-
Bahqtrf: "fk6fouc",
|
14
|
-
Be2twd7: "f13mqy1h",
|
15
|
-
Bhrd7zp: "fl43uef",
|
16
|
-
Bg96gwp: "fcpl73t"
|
17
|
-
},
|
18
|
-
tiny: {
|
19
|
-
a9b677: "f16dn6v3",
|
20
|
-
Bqenvij: "f3mu39s",
|
21
|
-
Be2twd7: "f130uwy9",
|
22
|
-
Bg96gwp: "fod1mrr",
|
23
|
-
Bf4jedk: "f18p0k4z",
|
24
|
-
z8tnut: "f1q8r6hh",
|
25
|
-
z189sj: ["fio2s09", "fkiw60q"],
|
26
|
-
Byoj8tv: "f9yu9nh",
|
27
|
-
uwmqm3: ["fkiw60q", "fio2s09"]
|
28
|
-
},
|
29
|
-
"extra-small": {
|
30
|
-
a9b677: "fpd43o0",
|
31
|
-
Bqenvij: "f30q22z",
|
32
|
-
Be2twd7: "f1tccstq",
|
33
|
-
Bg96gwp: "f1y3arg5",
|
34
|
-
Bf4jedk: "f18p0k4z",
|
35
|
-
z8tnut: "f1q8r6hh",
|
36
|
-
z189sj: ["fio2s09", "fkiw60q"],
|
37
|
-
Byoj8tv: "f9yu9nh",
|
38
|
-
uwmqm3: ["fkiw60q", "fio2s09"]
|
39
|
-
},
|
40
|
-
small: {
|
41
|
-
a9b677: "fjw5fx7",
|
42
|
-
Bqenvij: "fd461yt",
|
43
|
-
z8tnut: "f1g0x7ka",
|
44
|
-
z189sj: ["fps1v9c", "f17ae1jz"],
|
45
|
-
Byoj8tv: "f1qch9an",
|
46
|
-
uwmqm3: ["f17ae1jz", "fps1v9c"]
|
47
|
-
},
|
48
|
-
medium: {},
|
49
|
-
large: {
|
50
|
-
a9b677: "fq4mcun",
|
51
|
-
Bqenvij: "frvgh55",
|
52
|
-
z8tnut: "f1g0x7ka",
|
53
|
-
z189sj: ["f17a92cs", "f1pe0i86"],
|
54
|
-
Byoj8tv: "f1qch9an",
|
55
|
-
uwmqm3: ["f1pe0i86", "f17a92cs"]
|
56
|
-
},
|
57
|
-
"extra-large": {
|
58
|
-
a9b677: "f1szoe96",
|
59
|
-
Bqenvij: "f1d2rq10",
|
60
|
-
z8tnut: "f1g0x7ka",
|
61
|
-
z189sj: ["fqznh8f", "f1xile11"],
|
62
|
-
Byoj8tv: "f1qch9an",
|
63
|
-
uwmqm3: ["f1xile11", "fqznh8f"]
|
64
|
-
},
|
65
|
-
square: {
|
66
|
-
Bbmb7ep: ["fzi6hpg", "fyowgf4"],
|
67
|
-
Beyfa6y: ["fyowgf4", "fzi6hpg"],
|
68
|
-
B7oj6ja: ["f3fg2lr", "f13av6d4"],
|
69
|
-
Btl43ni: ["f13av6d4", "f3fg2lr"]
|
70
|
-
},
|
71
|
-
rounded: {
|
72
|
-
Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
|
73
|
-
Beyfa6y: ["f16jpd5f", "f1aa9q02"],
|
74
|
-
B7oj6ja: ["f1jar5jt", "fyu767a"],
|
75
|
-
Btl43ni: ["fyu767a", "f1jar5jt"]
|
76
|
-
},
|
77
|
-
roundedSmallToTiny: {
|
78
|
-
Bbmb7ep: ["f1g3puop", "fi2rrw2"],
|
79
|
-
Beyfa6y: ["fi2rrw2", "f1g3puop"],
|
80
|
-
B7oj6ja: ["f1rstyi9", "f1s4nn1u"],
|
81
|
-
Btl43ni: ["f1s4nn1u", "f1rstyi9"]
|
82
|
-
},
|
83
|
-
circular: {},
|
84
|
-
borderGhost: {
|
85
|
-
ap17g6: "f10ludwy"
|
86
|
-
},
|
87
|
-
filled: {},
|
88
|
-
"filled-brand": {
|
89
|
-
De3pzq: "ffp7eso",
|
90
|
-
sj55zd: "f1phragk"
|
91
|
-
},
|
92
|
-
"filled-danger": {
|
93
|
-
De3pzq: "fdl5y0r",
|
94
|
-
sj55zd: "f1phragk"
|
95
|
-
},
|
96
|
-
"filled-important": {
|
97
|
-
De3pzq: "f1c73kur",
|
98
|
-
sj55zd: "fr0bkrk"
|
99
|
-
},
|
100
|
-
"filled-informative": {
|
101
|
-
De3pzq: "f3vzo32",
|
102
|
-
sj55zd: "f11d4kpn"
|
103
|
-
},
|
104
|
-
"filled-severe": {
|
105
|
-
De3pzq: "f1s438gw",
|
106
|
-
sj55zd: "f1phragk"
|
107
|
-
},
|
108
|
-
"filled-subtle": {
|
109
|
-
De3pzq: "fxugw4r",
|
110
|
-
sj55zd: "f19n0e5"
|
111
|
-
},
|
112
|
-
"filled-success": {
|
113
|
-
De3pzq: "flxk52p",
|
114
|
-
sj55zd: "f1phragk"
|
115
|
-
},
|
116
|
-
"filled-warning": {
|
117
|
-
De3pzq: "ffq97bm",
|
118
|
-
sj55zd: "ff5vbop"
|
119
|
-
},
|
120
|
-
ghost: {},
|
121
|
-
"ghost-brand": {
|
122
|
-
sj55zd: "f16muhyy"
|
123
|
-
},
|
124
|
-
"ghost-danger": {
|
125
|
-
sj55zd: "f1whyuy6"
|
126
|
-
},
|
127
|
-
"ghost-important": {
|
128
|
-
sj55zd: "f19n0e5"
|
129
|
-
},
|
130
|
-
"ghost-informative": {
|
131
|
-
sj55zd: "f11d4kpn"
|
132
|
-
},
|
133
|
-
"ghost-severe": {
|
134
|
-
sj55zd: "f1l8vj45"
|
135
|
-
},
|
136
|
-
"ghost-subtle": {
|
137
|
-
sj55zd: "fonrgv7"
|
138
|
-
},
|
139
|
-
"ghost-success": {
|
140
|
-
sj55zd: "f1m7fhi8"
|
141
|
-
},
|
142
|
-
"ghost-warning": {
|
143
|
-
sj55zd: "fpti2h4"
|
144
|
-
},
|
145
|
-
outline: {
|
146
|
-
g2u3we: "f23ftbb",
|
147
|
-
h3c5rm: ["f1gkuv52", "f1p1bl80"],
|
148
|
-
B9xav0g: "fioka3i",
|
149
|
-
zhjwy3: ["f1p1bl80", "f1gkuv52"]
|
150
|
-
},
|
151
|
-
"outline-brand": {
|
152
|
-
sj55zd: "f16muhyy"
|
153
|
-
},
|
154
|
-
"outline-danger": {
|
155
|
-
sj55zd: "f1whyuy6",
|
156
|
-
g2u3we: "fyqpifd",
|
157
|
-
h3c5rm: ["f3ukxca", "f1k7dugc"],
|
158
|
-
B9xav0g: "f1njxb2b",
|
159
|
-
zhjwy3: ["f1k7dugc", "f3ukxca"]
|
160
|
-
},
|
161
|
-
"outline-important": {
|
162
|
-
sj55zd: "f11d4kpn",
|
163
|
-
g2u3we: "fq0vr37",
|
164
|
-
h3c5rm: ["f1byw159", "f11cr0be"],
|
165
|
-
B9xav0g: "f1c1zstj",
|
166
|
-
zhjwy3: ["f11cr0be", "f1byw159"]
|
167
|
-
},
|
168
|
-
"outline-informative": {
|
169
|
-
sj55zd: "f11d4kpn",
|
170
|
-
g2u3we: "f68mrw8",
|
171
|
-
h3c5rm: ["f7pw515", "fw35ms5"],
|
172
|
-
B9xav0g: "frpde29",
|
173
|
-
zhjwy3: ["fw35ms5", "f7pw515"]
|
174
|
-
},
|
175
|
-
"outline-severe": {
|
176
|
-
sj55zd: "f1l8vj45"
|
177
|
-
},
|
178
|
-
"outline-subtle": {
|
179
|
-
sj55zd: "fonrgv7"
|
180
|
-
},
|
181
|
-
"outline-success": {
|
182
|
-
sj55zd: "f1m7fhi8",
|
183
|
-
g2u3we: "f1mmhl11",
|
184
|
-
h3c5rm: ["f1tjpp2f", "f1ocn5n7"],
|
185
|
-
B9xav0g: "f1gjv25d",
|
186
|
-
zhjwy3: ["f1ocn5n7", "f1tjpp2f"]
|
187
|
-
},
|
188
|
-
"outline-warning": {
|
189
|
-
sj55zd: "fpti2h4"
|
190
|
-
},
|
191
|
-
tint: {},
|
192
|
-
"tint-brand": {
|
193
|
-
De3pzq: "f16xkysk",
|
194
|
-
sj55zd: "faj9fo0",
|
195
|
-
g2u3we: "f161y7kd",
|
196
|
-
h3c5rm: ["f1c8dzaj", "f1sl6hi9"],
|
197
|
-
B9xav0g: "f1619yhw",
|
198
|
-
zhjwy3: ["f1sl6hi9", "f1c8dzaj"]
|
199
|
-
},
|
200
|
-
"tint-danger": {
|
201
|
-
De3pzq: "ff0poqj",
|
202
|
-
sj55zd: "f1hcrxcs",
|
203
|
-
g2u3we: "f1oqjm8o",
|
204
|
-
h3c5rm: ["fkgrb8g", "frb5wm0"],
|
205
|
-
B9xav0g: "f1iai1ph",
|
206
|
-
zhjwy3: ["frb5wm0", "fkgrb8g"]
|
207
|
-
},
|
208
|
-
"tint-important": {
|
209
|
-
De3pzq: "f945g0u",
|
210
|
-
sj55zd: "fr0bkrk",
|
211
|
-
g2u3we: "fghlq4f",
|
212
|
-
h3c5rm: ["f1gn591s", "fjscplz"],
|
213
|
-
B9xav0g: "fb073pr",
|
214
|
-
zhjwy3: ["fjscplz", "f1gn591s"]
|
215
|
-
},
|
216
|
-
"tint-informative": {
|
217
|
-
De3pzq: "f1ctqxl6",
|
218
|
-
sj55zd: "f11d4kpn",
|
219
|
-
g2u3we: "f68mrw8",
|
220
|
-
h3c5rm: ["f7pw515", "fw35ms5"],
|
221
|
-
B9xav0g: "frpde29",
|
222
|
-
zhjwy3: ["fw35ms5", "f7pw515"]
|
223
|
-
},
|
224
|
-
"tint-severe": {
|
225
|
-
De3pzq: "f1xzsg4",
|
226
|
-
sj55zd: "f1k5f75o",
|
227
|
-
g2u3we: "fxy9dsj",
|
228
|
-
h3c5rm: ["f54u6j2", "fcm23ze"],
|
229
|
-
B9xav0g: "f4vf0uq",
|
230
|
-
zhjwy3: ["fcm23ze", "f54u6j2"]
|
231
|
-
},
|
232
|
-
"tint-subtle": {
|
233
|
-
De3pzq: "fxugw4r",
|
234
|
-
sj55zd: "f11d4kpn",
|
235
|
-
g2u3we: "f68mrw8",
|
236
|
-
h3c5rm: ["f7pw515", "fw35ms5"],
|
237
|
-
B9xav0g: "frpde29",
|
238
|
-
zhjwy3: ["fw35ms5", "f7pw515"]
|
239
|
-
},
|
240
|
-
"tint-success": {
|
241
|
-
De3pzq: "f2vsrz6",
|
242
|
-
sj55zd: "ffmvakt",
|
243
|
-
g2u3we: "fdmic9h",
|
244
|
-
h3c5rm: ["f196y6m", "fetptd8"],
|
245
|
-
B9xav0g: "f1pev5xq",
|
246
|
-
zhjwy3: ["fetptd8", "f196y6m"]
|
247
|
-
},
|
248
|
-
"tint-warning": {
|
249
|
-
De3pzq: "f10s6hli",
|
250
|
-
sj55zd: "f42v8de",
|
251
|
-
g2u3we: "fn9i3n",
|
252
|
-
h3c5rm: ["f1aw8cx4", "f51if14"],
|
253
|
-
B9xav0g: "fvq8iai",
|
254
|
-
zhjwy3: ["f51if14", "f1aw8cx4"]
|
255
|
-
}
|
256
|
-
}, {
|
257
|
-
d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".f16dn6v3{width:6px;}", ".f3mu39s{height:6px;}", ".f130uwy9{font-size:4px;}", ".fod1mrr{line-height:4px;}", ".f18p0k4z{min-width:unset;}", ".f1q8r6hh{padding-top:unset;}", ".fio2s09{padding-right:unset;}", ".fkiw60q{padding-left:unset;}", ".f9yu9nh{padding-bottom:unset;}", ".fpd43o0{width:10px;}", ".f30q22z{height:10px;}", ".f1tccstq{font-size:6px;}", ".f1y3arg5{line-height:6px;}", ".fjw5fx7{width:16px;}", ".fd461yt{height:16px;}", ".f1g0x7ka{padding-top:0;}", ".fps1v9c{padding-right:calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}", ".f17ae1jz{padding-left:calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}", ".f1qch9an{padding-bottom:0;}", ".fq4mcun{width:24px;}", ".frvgh55{height:24px;}", ".f17a92cs{padding-right:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".f1pe0i86{padding-left:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".f1szoe96{width:32px;}", ".f1d2rq10{height:32px;}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1g3puop{border-bottom-right-radius:var(--borderRadiusSmall);}", ".fi2rrw2{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f1rstyi9{border-top-right-radius:var(--borderRadiusSmall);}", ".f1s4nn1u{border-top-left-radius:var(--borderRadiusSmall);}", ".f10ludwy::after{display:none;}", ".ffp7eso{background-color:var(--colorBrandBackground);}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}", ".f1c73kur{background-color:var(--colorNeutralForeground1);}", ".fr0bkrk{color:var(--colorNeutralBackground1);}", ".f3vzo32{background-color:var(--colorNeutralBackground5);}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f1s438gw{background-color:var(--colorPaletteDarkOrangeBackground3);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".flxk52p{background-color:var(--colorPaletteGreenBackground3);}", ".ffq97bm{background-color:var(--colorPaletteYellowBackground3);}", ".ff5vbop{color:var(--colorNeutralForeground1Static);}", ".f16muhyy{color:var(--colorBrandForeground1);}", ".f1whyuy6{color:var(--colorPaletteRedForeground3);}", ".f1l8vj45{color:var(--colorPaletteDarkOrangeForeground3);}", ".fonrgv7{color:var(--colorNeutralForegroundStaticInverted);}", ".f1m7fhi8{color:var(--colorPaletteGreenForeground3);}", ".fpti2h4{color:var(--colorPaletteYellowForeground2);}", ".f23ftbb{border-top-color:currentColor;}", ".f1gkuv52{border-right-color:currentColor;}", ".f1p1bl80{border-left-color:currentColor;}", ".fioka3i{border-bottom-color:currentColor;}", ".fyqpifd{border-top-color:var(--colorPaletteRedBorder2);}", ".f3ukxca{border-right-color:var(--colorPaletteRedBorder2);}", ".f1k7dugc{border-left-color:var(--colorPaletteRedBorder2);}", ".f1njxb2b{border-bottom-color:var(--colorPaletteRedBorder2);}", ".fq0vr37{border-top-color:var(--colorNeutralStrokeAccessible);}", ".f1byw159{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f11cr0be{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f68mrw8{border-top-color:var(--colorNeutralStroke2);}", ".f7pw515{border-right-color:var(--colorNeutralStroke2);}", ".fw35ms5{border-left-color:var(--colorNeutralStroke2);}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".f1mmhl11{border-top-color:var(--colorPaletteGreenBorder2);}", ".f1tjpp2f{border-right-color:var(--colorPaletteGreenBorder2);}", ".f1ocn5n7{border-left-color:var(--colorPaletteGreenBorder2);}", ".f1gjv25d{border-bottom-color:var(--colorPaletteGreenBorder2);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".faj9fo0{color:var(--colorBrandForeground2);}", ".f161y7kd{border-top-color:var(--colorBrandStroke2);}", ".f1c8dzaj{border-right-color:var(--colorBrandStroke2);}", ".f1sl6hi9{border-left-color:var(--colorBrandStroke2);}", ".f1619yhw{border-bottom-color:var(--colorBrandStroke2);}", ".ff0poqj{background-color:var(--colorPaletteRedBackground1);}", ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".f1oqjm8o{border-top-color:var(--colorPaletteRedBorder1);}", ".fkgrb8g{border-right-color:var(--colorPaletteRedBorder1);}", ".frb5wm0{border-left-color:var(--colorPaletteRedBorder1);}", ".f1iai1ph{border-bottom-color:var(--colorPaletteRedBorder1);}", ".f945g0u{background-color:var(--colorNeutralForeground3);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f1ctqxl6{background-color:var(--colorNeutralBackground4);}", ".f1xzsg4{background-color:var(--colorPaletteDarkOrangeBackground1);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".fxy9dsj{border-top-color:var(--colorPaletteDarkOrangeBorder1);}", ".f54u6j2{border-right-color:var(--colorPaletteDarkOrangeBorder1);}", ".fcm23ze{border-left-color:var(--colorPaletteDarkOrangeBorder1);}", ".f4vf0uq{border-bottom-color:var(--colorPaletteDarkOrangeBorder1);}", ".f2vsrz6{background-color:var(--colorPaletteGreenBackground1);}", ".ffmvakt{color:var(--colorPaletteGreenForeground1);}", ".fdmic9h{border-top-color:var(--colorPaletteGreenBorder1);}", ".f196y6m{border-right-color:var(--colorPaletteGreenBorder1);}", ".fetptd8{border-left-color:var(--colorPaletteGreenBorder1);}", ".f1pev5xq{border-bottom-color:var(--colorPaletteGreenBorder1);}", ".f10s6hli{background-color:var(--colorPaletteYellowBackground1);}", ".f42v8de{color:var(--colorPaletteYellowForeground1);}", ".fn9i3n{border-top-color:var(--colorPaletteYellowBorder1);}", ".f1aw8cx4{border-right-color:var(--colorPaletteYellowBorder1);}", ".f51if14{border-left-color:var(--colorPaletteYellowBorder1);}", ".fvq8iai{border-bottom-color:var(--colorPaletteYellowBorder1);}"]
|
258
|
-
});
|
259
|
-
const useIconRootClassName = /*#__PURE__*/__resetStyles("rttl5z0", null, [".rttl5z0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;line-height:1;margin:0 calc(-1 * var(--spacingHorizontalXXS));font-size:12px;}"]);
|
260
|
-
const useIconStyles = /*#__PURE__*/__styles({
|
261
|
-
beforeText: {
|
262
|
-
t21cq0: ["f1t8l4o1", "f11juvx6"]
|
263
|
-
},
|
264
|
-
afterText: {
|
265
|
-
Frg6f3: ["f11juvx6", "f1t8l4o1"]
|
266
|
-
},
|
267
|
-
beforeTextXL: {
|
268
|
-
t21cq0: ["f1rs9grm", "f1kwmkpi"]
|
269
|
-
},
|
270
|
-
afterTextXL: {
|
271
|
-
Frg6f3: ["f1kwmkpi", "f1rs9grm"]
|
272
|
-
},
|
273
|
-
tiny: {
|
274
|
-
Be2twd7: "f1tccstq"
|
275
|
-
},
|
276
|
-
"extra-small": {
|
277
|
-
Be2twd7: "fnmn6fi"
|
278
|
-
},
|
279
|
-
small: {
|
280
|
-
Be2twd7: "f1ugzwwg"
|
281
|
-
},
|
282
|
-
medium: {},
|
283
|
-
large: {
|
284
|
-
Be2twd7: "f4ybsrx"
|
285
|
-
},
|
286
|
-
"extra-large": {
|
287
|
-
Be2twd7: "fe5j1ua"
|
288
|
-
}
|
289
|
-
}, {
|
290
|
-
d: [".f1t8l4o1{margin-right:calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}", ".f11juvx6{margin-left:calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}", ".f1rs9grm{margin-right:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".f1kwmkpi{margin-left:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".f1tccstq{font-size:6px;}", ".fnmn6fi{font-size:10px;}", ".f1ugzwwg{font-size:12px;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}"]
|
291
|
-
});
|
292
|
-
/**
|
293
|
-
* Applies style classnames to slots
|
294
|
-
*/
|
295
|
-
export const useBadgeStyles_unstable = state => {
|
296
|
-
const rootClassName = useRootClassName();
|
297
|
-
const rootStyles = useRootStyles();
|
298
|
-
const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';
|
299
|
-
state.root.className = mergeClasses(badgeClassNames.root, rootClassName, smallToTiny && rootStyles.fontSmallToTiny, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny, state.appearance === 'ghost' && rootStyles.borderGhost, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);
|
300
|
-
const iconRootClassName = useIconRootClassName();
|
301
|
-
const iconStyles = useIconStyles();
|
302
|
-
if (state.icon) {
|
303
|
-
let iconPositionClass;
|
304
|
-
if (state.root.children) {
|
305
|
-
if (state.size === 'extra-large') {
|
306
|
-
iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;
|
307
|
-
} else {
|
308
|
-
iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;
|
309
|
-
}
|
310
|
-
}
|
311
|
-
state.icon.className = mergeClasses(badgeClassNames.icon, iconRootClassName, iconPositionClass, iconStyles[state.size], state.icon.className);
|
312
|
-
}
|
313
|
-
return state;
|
314
|
-
};
|
315
|
-
//# sourceMappingURL=useBadgeStyles.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["shorthands","__resetStyles","__styles","mergeClasses","tokens","typographyStyles","badgeClassNames","root","icon","textPadding","spacingHorizontalXXS","useRootClassName","useRootStyles","fontSmallToTiny","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","tiny","a9b677","Bqenvij","Bf4jedk","z8tnut","z189sj","Byoj8tv","uwmqm3","small","medium","large","square","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","rounded","roundedSmallToTiny","circular","borderGhost","ap17g6","filled","De3pzq","sj55zd","ghost","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","tint","d","useIconRootClassName","useIconStyles","beforeText","t21cq0","afterText","Frg6f3","beforeTextXL","afterTextXL","useBadgeStyles_unstable","state","rootClassName","rootStyles","smallToTiny","size","className","shape","appearance","color","iconRootClassName","iconStyles","iconPositionClass","children","iconPosition"],"sources":["../../../src/components/Badge/useBadgeStyles.ts"],"sourcesContent":["import { shorthands, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { BadgeSlots, BadgeState } from './Badge.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const badgeClassNames: SlotClassNames<BadgeSlots> = {\n root: 'fui-Badge',\n icon: 'fui-Badge__icon',\n};\n\n// The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.\n// Instead, add extra padding to the root, and a negative margin on the icon to \"remove\" the extra padding on the icon.\nconst textPadding = tokens.spacingHorizontalXXS;\n\nconst useRootClassName = makeResetStyles({\n display: 'inline-flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n ...typographyStyles.caption1Strong,\n height: '20px',\n width: '20px',\n minWidth: 'max-content',\n padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n borderRadius: tokens.borderRadiusCircular,\n // Use a transparent stroke (rather than no border) so the border is visible in high contrast\n borderColor: tokens.colorTransparentStroke,\n\n '::after': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n borderStyle: 'solid',\n borderColor: 'inherit',\n borderWidth: tokens.strokeWidthThin,\n borderRadius: 'inherit',\n },\n});\n\nconst useRootStyles = makeStyles({\n fontSmallToTiny: {\n ...typographyStyles.caption2Strong,\n },\n\n // size\n\n tiny: {\n width: '6px',\n height: '6px',\n fontSize: '4px',\n lineHeight: '4px',\n minWidth: 'unset',\n ...shorthands.padding('unset'),\n },\n 'extra-small': {\n width: '10px',\n height: '10px',\n fontSize: '6px',\n lineHeight: '6px',\n minWidth: 'unset',\n ...shorthands.padding('unset'),\n },\n small: {\n width: '16px',\n height: '16px',\n ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`),\n },\n medium: {\n // Set by useRootClassName\n },\n large: {\n width: '24px',\n height: '24px',\n ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXS} + ${textPadding})`),\n },\n 'extra-large': {\n width: '32px',\n height: '32px',\n ...shorthands.padding(0, `calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`),\n },\n\n // shape\n\n square: {\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n },\n rounded: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n roundedSmallToTiny: {\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n },\n circular: {\n // Set by useRootClassName\n },\n\n // hide the boder when appearance is \"ghost\"\n\n borderGhost: {\n // The border is applied in an ::after pseudo-element because it should not affect layout.\n // The padding and size of the badge should be the same regardless of whether or not it has a border.\n '::after': {\n display: 'none',\n },\n },\n\n // appearance: filled\n\n filled: {\n // Set by useRootClassName\n },\n 'filled-brand': {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-danger': {\n backgroundColor: tokens.colorPaletteRedBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-important': {\n backgroundColor: tokens.colorNeutralForeground1,\n color: tokens.colorNeutralBackground1,\n },\n 'filled-informative': {\n backgroundColor: tokens.colorNeutralBackground5,\n color: tokens.colorNeutralForeground3,\n },\n 'filled-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n },\n 'filled-success': {\n backgroundColor: tokens.colorPaletteGreenBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground3,\n color: tokens.colorNeutralForeground1Static,\n },\n\n // appearance: ghost\n\n ghost: {\n // No shared colors between ghost appearances\n },\n 'ghost-brand': {\n color: tokens.colorBrandForeground1,\n },\n 'ghost-danger': {\n color: tokens.colorPaletteRedForeground3,\n },\n 'ghost-important': {\n color: tokens.colorNeutralForeground1,\n },\n 'ghost-informative': {\n color: tokens.colorNeutralForeground3,\n },\n 'ghost-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3,\n },\n 'ghost-subtle': {\n color: tokens.colorNeutralForegroundStaticInverted,\n },\n 'ghost-success': {\n color: tokens.colorPaletteGreenForeground3,\n },\n 'ghost-warning': {\n color: tokens.colorPaletteYellowForeground2,\n },\n\n // appearance: outline\n\n outline: {\n ...shorthands.borderColor('currentColor'),\n },\n 'outline-brand': {\n color: tokens.colorBrandForeground1,\n },\n 'outline-danger': {\n color: tokens.colorPaletteRedForeground3,\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n 'outline-important': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n 'outline-informative': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'outline-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3,\n },\n 'outline-subtle': {\n color: tokens.colorNeutralForegroundStaticInverted,\n },\n 'outline-success': {\n color: tokens.colorPaletteGreenForeground3,\n ...shorthands.borderColor(tokens.colorPaletteGreenBorder2),\n },\n 'outline-warning': {\n color: tokens.colorPaletteYellowForeground2,\n },\n\n // appearance: tint\n\n tint: {\n // No shared colors between tint appearances\n },\n 'tint-brand': {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2,\n ...shorthands.borderColor(tokens.colorBrandStroke2),\n },\n 'tint-danger': {\n backgroundColor: tokens.colorPaletteRedBackground1,\n color: tokens.colorPaletteRedForeground1,\n ...shorthands.borderColor(tokens.colorPaletteRedBorder1),\n },\n 'tint-important': {\n backgroundColor: tokens.colorNeutralForeground3,\n color: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n 'tint-informative': {\n backgroundColor: tokens.colorNeutralBackground4,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'tint-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground1,\n color: tokens.colorPaletteDarkOrangeForeground1,\n ...shorthands.borderColor(tokens.colorPaletteDarkOrangeBorder1),\n },\n 'tint-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'tint-success': {\n backgroundColor: tokens.colorPaletteGreenBackground1,\n color: tokens.colorPaletteGreenForeground1,\n ...shorthands.borderColor(tokens.colorPaletteGreenBorder1),\n },\n 'tint-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground1,\n color: tokens.colorPaletteYellowForeground1,\n ...shorthands.borderColor(tokens.colorPaletteYellowBorder1),\n },\n});\n\nconst useIconRootClassName = makeResetStyles({\n display: 'flex',\n lineHeight: '1',\n margin: `0 calc(-1 * ${textPadding})`, // Remove text padding added to root\n fontSize: '12px',\n});\n\nconst useIconStyles = makeStyles({\n beforeText: {\n marginRight: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n },\n afterText: {\n marginLeft: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n },\n\n beforeTextXL: {\n marginRight: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n },\n afterTextXL: {\n marginLeft: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n },\n\n // size\n\n tiny: {\n fontSize: '6px',\n },\n 'extra-small': {\n fontSize: '10px',\n },\n small: {\n fontSize: '12px',\n },\n medium: {\n // Set by useIconRootClassName\n },\n large: {\n fontSize: '16px',\n },\n 'extra-large': {\n fontSize: '20px',\n },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useBadgeStyles_unstable = (state: BadgeState): BadgeState => {\n const rootClassName = useRootClassName();\n const rootStyles = useRootStyles();\n\n const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';\n\n state.root.className = mergeClasses(\n badgeClassNames.root,\n rootClassName,\n smallToTiny && rootStyles.fontSmallToTiny,\n rootStyles[state.size],\n rootStyles[state.shape],\n state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny,\n state.appearance === 'ghost' && rootStyles.borderGhost,\n rootStyles[state.appearance],\n rootStyles[`${state.appearance}-${state.color}` as const],\n state.root.className,\n );\n\n const iconRootClassName = useIconRootClassName();\n const iconStyles = useIconStyles();\n if (state.icon) {\n let iconPositionClass;\n if (state.root.children) {\n if (state.size === 'extra-large') {\n iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;\n } else {\n iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;\n }\n }\n\n state.icon.className = mergeClasses(\n badgeClassNames.icon,\n iconRootClassName,\n iconPositionClass,\n iconStyles[state.size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"mappings":"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"}
|
@@ -1,16 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import { useCounterBadge_unstable } from './useCounterBadge';
|
3
|
-
import { useCounterBadgeStyles_unstable } from './useCounterBadgeStyles';
|
4
|
-
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
|
5
|
-
import { renderBadge_unstable } from '../Badge/index';
|
6
|
-
/**
|
7
|
-
* Define a styled CounterBadge, using the `useCounterBadge_unstable` hook.
|
8
|
-
*/
|
9
|
-
export const CounterBadge = /*#__PURE__*/React.forwardRef((props, ref) => {
|
10
|
-
const state = useCounterBadge_unstable(props, ref);
|
11
|
-
useCounterBadgeStyles_unstable(state);
|
12
|
-
useCustomStyleHook_unstable('useCounterBadgeStyles_unstable')(state);
|
13
|
-
return renderBadge_unstable(state);
|
14
|
-
});
|
15
|
-
CounterBadge.displayName = 'CounterBadge';
|
16
|
-
//# sourceMappingURL=CounterBadge.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["React","useCounterBadge_unstable","useCounterBadgeStyles_unstable","useCustomStyleHook_unstable","renderBadge_unstable","CounterBadge","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/CounterBadge/CounterBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCounterBadge_unstable } from './useCounterBadge';\nimport { useCounterBadgeStyles_unstable } from './useCounterBadgeStyles';\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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,wBAAwB,QAAQ;AACzC,SAASC,8BAA8B,QAAQ;AAC/C,SAASC,2BAA2B,QAAQ;AAC5C,SAASC,oBAAoB,QAAQ;AAIrC;;;AAGA,OAAO,MAAMC,YAAA,gBAAuDL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACnG,MAAMC,KAAA,GAAQR,wBAAA,CAAyBM,KAAA,EAAOC,GAAA;EAE9CN,8BAAA,CAA+BO,KAAA;EAE/BN,2BAAA,CAA4B,kCAAkCM,KAAA;EAE9D,OAAOL,oBAAA,CAAqBK,KAAA;AAC9B;AAEAJ,YAAA,CAAaK,WAAW,GAAG"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":[],"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"],"mappings":"AAAA"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":[],"sources":["../../../src/components/CounterBadge/index.ts"],"sourcesContent":["export * from './CounterBadge';\nexport * from './CounterBadge.types';\nexport * from './useCounterBadge';\nexport * from './useCounterBadgeStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
|
@@ -1,28 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import { useBadge_unstable } from '../Badge/index';
|
3
|
-
/**
|
4
|
-
* Returns the props and state required to render the component
|
5
|
-
*/
|
6
|
-
export const useCounterBadge_unstable = (props, ref) => {
|
7
|
-
const {
|
8
|
-
shape = 'circular',
|
9
|
-
appearance = 'filled',
|
10
|
-
showZero = false,
|
11
|
-
overflowCount = 99,
|
12
|
-
count = 0,
|
13
|
-
dot = false
|
14
|
-
} = props;
|
15
|
-
const state = {
|
16
|
-
...useBadge_unstable(props, ref),
|
17
|
-
shape,
|
18
|
-
appearance,
|
19
|
-
showZero,
|
20
|
-
count,
|
21
|
-
dot
|
22
|
-
};
|
23
|
-
if ((count !== 0 || showZero) && !dot && !state.root.children) {
|
24
|
-
state.root.children = count > overflowCount ? `${overflowCount}+` : `${count}`;
|
25
|
-
}
|
26
|
-
return state;
|
27
|
-
};
|
28
|
-
//# sourceMappingURL=useCounterBadge.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["React","useBadge_unstable","useCounterBadge_unstable","props","ref","shape","appearance","showZero","overflowCount","count","dot","state","root","children"],"sources":["../../../src/components/CounterBadge/useCounterBadge.ts"],"sourcesContent":["import * as React from 'react';\nimport type { BadgeState } from '../Badge/index';\nimport { useBadge_unstable } from '../Badge/index';\nimport type { CounterBadgeProps, CounterBadgeState } 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 {\n shape = 'circular',\n appearance = 'filled',\n showZero = false,\n overflowCount = 99,\n count = 0,\n dot = false,\n } = props;\n\n const state: CounterBadgeState = {\n ...(useBadge_unstable(props, ref) as Pick<CounterBadgeState, keyof BadgeState>),\n shape,\n appearance,\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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAEvB,SAASC,iBAAiB,QAAQ;AAGlC;;;AAGA,OAAO,MAAMC,wBAAA,GAA2BA,CAACC,KAAA,EAA0BC,GAAA,KAAmD;EACpH,MAAM;IACJC,KAAA,GAAQ;IACRC,UAAA,GAAa;IACbC,QAAA,GAAW,KAAK;IAChBC,aAAA,GAAgB;IAChBC,KAAA,GAAQ;IACRC,GAAA,GAAM;EAAK,CACZ,GAAGP,KAAA;EAEJ,MAAMQ,KAAA,GAA2B;IAC/B,GAAIV,iBAAA,CAAkBE,KAAA,EAAOC,GAAA,CAAI;IACjCC,KAAA;IACAC,UAAA;IACAC,QAAA;IACAE,KAAA;IACAC;EACF;EAEA,IAAI,CAACD,KAAA,KAAU,KAAKF,QAAO,KAAM,CAACG,GAAA,IAAO,CAACC,KAAA,CAAMC,IAAI,CAACC,QAAQ,EAAE;IAC7DF,KAAA,CAAMC,IAAI,CAACC,QAAQ,GAAGJ,KAAA,GAAQD,aAAA,GAAiB,GAAEA,aAAc,GAAE,GAAI,GAAEC,KAAM,EAAC;EAChF;EAEA,OAAOE,KAAA;AACT"}
|
@@ -1,34 +0,0 @@
|
|
1
|
-
import { shorthands, mergeClasses, __styles } from '@griffel/react';
|
2
|
-
import { useBadgeStyles_unstable } from '../Badge/useBadgeStyles';
|
3
|
-
export const counterBadgeClassNames = {
|
4
|
-
root: 'fui-CounterBadge',
|
5
|
-
icon: 'fui-CounterBadge__icon'
|
6
|
-
};
|
7
|
-
const useStyles = /*#__PURE__*/__styles({
|
8
|
-
dot: {
|
9
|
-
Bf4jedk: "fgfkb25",
|
10
|
-
a9b677: "f16dn6v3",
|
11
|
-
Bqenvij: "f3mu39s",
|
12
|
-
z8tnut: "f1g0x7ka",
|
13
|
-
z189sj: ["fhxju0i", "f1cnd47f"],
|
14
|
-
Byoj8tv: "f1qch9an",
|
15
|
-
uwmqm3: ["f1cnd47f", "fhxju0i"]
|
16
|
-
},
|
17
|
-
hide: {
|
18
|
-
mc9l5x: "fjseox"
|
19
|
-
}
|
20
|
-
}, {
|
21
|
-
d: [".fgfkb25{min-width:auto;}", ".f16dn6v3{width:6px;}", ".f3mu39s{height:6px;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".fjseox{display:none;}"]
|
22
|
-
});
|
23
|
-
/**
|
24
|
-
* Applies style classnames to slots
|
25
|
-
*/
|
26
|
-
export const useCounterBadgeStyles_unstable = state => {
|
27
|
-
const styles = useStyles();
|
28
|
-
state.root.className = mergeClasses(counterBadgeClassNames.root, state.dot && styles.dot, !state.root.children && !state.dot && styles.hide, state.root.className);
|
29
|
-
if (state.icon) {
|
30
|
-
state.icon.className = mergeClasses(counterBadgeClassNames.icon, state.icon.className);
|
31
|
-
}
|
32
|
-
return useBadgeStyles_unstable(state);
|
33
|
-
};
|
34
|
-
//# sourceMappingURL=useCounterBadgeStyles.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["shorthands","mergeClasses","__styles","useBadgeStyles_unstable","counterBadgeClassNames","root","icon","useStyles","dot","Bf4jedk","a9b677","Bqenvij","z8tnut","z189sj","Byoj8tv","uwmqm3","hide","mc9l5x","d","useCounterBadgeStyles_unstable","state","styles","className","children"],"sources":["../../../src/components/CounterBadge/useCounterBadgeStyles.ts"],"sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useBadgeStyles_unstable } from '../Badge/useBadgeStyles';\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 ...shorthands.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 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"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAAC,QAAA,QAAoB;AACrD,SAASC,uBAAuB,QAAQ;AAKxC,OAAO,MAAMC,sBAAA,GAAqD;EAChEC,IAAA,EAAM;EACNC,IAAA,EAAM;AACR;AAEA,MAAMC,SAAA,gBAAYL,QAAA;EAAAM,GAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,IAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAUlB;AAEA;;;AAGA,OAAO,MAAMC,8BAAA,GAAkCC,KAAA,IAAgD;EAC7F,MAAMC,MAAA,GAASd,SAAA;EACfa,KAAA,CAAMf,IAAI,CAACiB,SAAS,GAAGrB,YAAA,CACrBG,sBAAA,CAAuBC,IAAI,EAC3Be,KAAA,CAAMZ,GAAG,IAAIa,MAAA,CAAOb,GAAG,EACvB,CAACY,KAAA,CAAMf,IAAI,CAACkB,QAAQ,IAAI,CAACH,KAAA,CAAMZ,GAAG,IAAIa,MAAA,CAAOL,IAAI,EACjDI,KAAA,CAAMf,IAAI,CAACiB,SAAS;EAGtB,IAAIF,KAAA,CAAMd,IAAI,EAAE;IACdc,KAAA,CAAMd,IAAI,CAACgB,SAAS,GAAGrB,YAAA,CAAaG,sBAAA,CAAuBE,IAAI,EAAEc,KAAA,CAAMd,IAAI,CAACgB,SAAS;EACvF;EAEA,OAAOnB,uBAAA,CAAwBiB,KAAA;AACjC"}
|
@@ -1,16 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import { usePresenceBadge_unstable } from './usePresenceBadge';
|
3
|
-
import { usePresenceBadgeStyles_unstable } from './usePresenceBadgeStyles';
|
4
|
-
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
|
5
|
-
import { renderBadge_unstable } from '../../Badge';
|
6
|
-
/**
|
7
|
-
* Define a styled Badge, using the `useBadge_unstable` hook.
|
8
|
-
*/
|
9
|
-
export const PresenceBadge = /*#__PURE__*/React.forwardRef((props, ref) => {
|
10
|
-
const state = usePresenceBadge_unstable(props, ref);
|
11
|
-
usePresenceBadgeStyles_unstable(state);
|
12
|
-
useCustomStyleHook_unstable('usePresenceBadgeStyles_unstable')(state);
|
13
|
-
return renderBadge_unstable(state);
|
14
|
-
});
|
15
|
-
PresenceBadge.displayName = 'PresenceBadge';
|
16
|
-
//# sourceMappingURL=PresenceBadge.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["React","usePresenceBadge_unstable","usePresenceBadgeStyles_unstable","useCustomStyleHook_unstable","renderBadge_unstable","PresenceBadge","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/PresenceBadge/PresenceBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePresenceBadge_unstable } from './usePresenceBadge';\nimport { usePresenceBadgeStyles_unstable } from './usePresenceBadgeStyles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { renderBadge_unstable } from '../../Badge';\nimport type { PresenceBadgeProps } from './PresenceBadge.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled Badge, using the `useBadge_unstable` hook.\n */\nexport const PresenceBadge: ForwardRefComponent<PresenceBadgeProps> = React.forwardRef((props, ref) => {\n const state = usePresenceBadge_unstable(props, ref);\n\n usePresenceBadgeStyles_unstable(state);\n\n useCustomStyleHook_unstable('usePresenceBadgeStyles_unstable')(state);\n\n return renderBadge_unstable(state);\n});\n\nPresenceBadge.displayName = 'PresenceBadge';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,+BAA+B,QAAQ;AAChD,SAASC,2BAA2B,QAAQ;AAC5C,SAASC,oBAAoB,QAAQ;AAIrC;;;AAGA,OAAO,MAAMC,aAAA,gBAAyDL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACrG,MAAMC,KAAA,GAAQR,yBAAA,CAA0BM,KAAA,EAAOC,GAAA;EAE/CN,+BAAA,CAAgCO,KAAA;EAEhCN,2BAAA,CAA4B,mCAAmCM,KAAA;EAE/D,OAAOL,oBAAA,CAAqBK,KAAA;AAC9B;AAEAJ,aAAA,CAAcK,WAAW,GAAG"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":[],"sources":["../../../src/components/PresenceBadge/PresenceBadge.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport type { BadgeProps, BadgeState, BadgeSlots } from '../Badge/Badge.types';\n\nexport type PresenceBadgeStatus =\n | 'busy'\n | 'out-of-office'\n | 'away'\n | 'available'\n | 'offline'\n | 'do-not-disturb'\n | 'unknown'\n | 'blocked';\n\nexport type PresenceBadgeProps = Omit<ComponentProps<Pick<BadgeSlots, 'root' | 'icon'>>, 'color'> &\n Pick<BadgeProps, 'size'> & {\n /**\n * Represents several status\n * @default available\n */\n status?: PresenceBadgeStatus;\n\n /**\n * Modifies the display to indicate that the user is out of office.\n * This can be combined with any status to display an out-of-office version of that status\n * @default false\n */\n outOfOffice?: boolean;\n };\n\nexport type PresenceBadgeState = ComponentState<BadgeSlots> &\n BadgeState &\n Required<Pick<PresenceBadgeProps, 'status' | 'outOfOffice'>>;\n"],"mappings":"AAAA"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":[],"sources":["../../../src/components/PresenceBadge/index.ts"],"sourcesContent":["export * from './PresenceBadge';\nexport * from './PresenceBadge.types';\nexport * from './usePresenceBadge';\nexport * from './usePresenceBadgeStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
|