@revikornmann/muka-ui 0.27.0 → 0.27.2
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/dist/cjs/components/Avatar/Avatar.css +15 -4
- package/dist/cjs/components/Avatar/Avatar.js +23 -1
- package/dist/cjs/components/Avatar/Avatar.js.map +1 -1
- package/dist/cjs/components/Avatar/AvatarGroup.js +4 -2
- package/dist/cjs/components/Avatar/AvatarGroup.js.map +1 -1
- package/dist/cjs/components/Tabs/Tabs.js +6 -3
- package/dist/cjs/components/Tabs/Tabs.js.map +1 -1
- package/dist/esm/components/Avatar/Avatar.css +15 -4
- package/dist/esm/components/Avatar/Avatar.js +24 -2
- package/dist/esm/components/Avatar/Avatar.js.map +1 -1
- package/dist/esm/components/Avatar/AvatarGroup.js +4 -2
- package/dist/esm/components/Avatar/AvatarGroup.js.map +1 -1
- package/dist/esm/components/Tabs/Tabs.js +6 -3
- package/dist/esm/components/Tabs/Tabs.js.map +1 -1
- package/dist/styles/components/Avatar.css +15 -4
- package/dist/styles/index.css +483 -471
- package/dist/styles/muka-dark.css +483 -471
- package/dist/styles/muka-light.css +483 -471
- package/dist/styles/tokens-bouwplan-dark.css +7 -6
- package/dist/styles/tokens-bouwplan-light.css +7 -6
- package/dist/styles/tokens-fscl-dark.css +7 -6
- package/dist/styles/tokens-fscl-light.css +7 -6
- package/dist/styles/tokens-grip-dark.css +7 -6
- package/dist/styles/tokens-grip-light.css +7 -6
- package/dist/styles/tokens-muka-dark.css +7 -6
- package/dist/styles/tokens-muka-light.css +7 -6
- package/dist/styles/tokens-wireframe-dark.css +7 -6
- package/dist/styles/tokens-wireframe-light.css +7 -6
- package/dist/styles/wireframe-dark.css +483 -471
- package/dist/styles/wireframe-light.css +483 -471
- package/dist/types/components/Avatar/Avatar.d.ts.map +1 -1
- package/dist/types/components/Avatar/AvatarGroup.d.ts +8 -0
- package/dist/types/components/Avatar/AvatarGroup.d.ts.map +1 -1
- package/dist/types/components/Tabs/Tabs.d.ts.map +1 -1
- package/package.json +1 -1
- package/tokens/t4-components/avatar.json +13 -7
|
@@ -256,9 +256,12 @@
|
|
|
256
256
|
|
|
257
257
|
/* Avatar Group (Figma "Avatar Stack") */
|
|
258
258
|
.muka-avatar-group {
|
|
259
|
+
position: relative;
|
|
259
260
|
display: inline-flex;
|
|
260
261
|
align-items: center;
|
|
261
262
|
flex-direction: row;
|
|
263
|
+
/* Never stretch to a grid cell or column, so the badge stays on the last avatar */
|
|
264
|
+
width: fit-content;
|
|
262
265
|
}
|
|
263
266
|
|
|
264
267
|
/* Later avatars sit on top of earlier ones (DOM order); a hovered one comes to the front */
|
|
@@ -278,7 +281,7 @@
|
|
|
278
281
|
box-shadow: 0 0 0 var(--avatar-group-ring-width) var(--avatar-group-ring-color);
|
|
279
282
|
}
|
|
280
283
|
|
|
281
|
-
/* Overlap. Figma specifies exact values for
|
|
284
|
+
/* Overlap. Figma specifies exact values for 40 / 32 / 24px avatars (xs / 2xs / 3xs);
|
|
282
285
|
other sizes use the same proportions: tight 2/3, compact 1/2, spacious 1/3. */
|
|
283
286
|
.muka-avatar-group--4xs { --muka-avatar-group-size: var(--avatar-size-4xs); }
|
|
284
287
|
.muka-avatar-group--3xs { --muka-avatar-group-size: var(--avatar-size-3xs); }
|
|
@@ -293,13 +296,13 @@
|
|
|
293
296
|
.muka-avatar-group--compact { --muka-avatar-group-overlap: calc(var(--muka-avatar-group-size) / 2); }
|
|
294
297
|
.muka-avatar-group--spacious { --muka-avatar-group-overlap: calc(var(--muka-avatar-group-size) / 3); }
|
|
295
298
|
|
|
296
|
-
.muka-avatar-group--tight.muka-avatar-group--
|
|
299
|
+
.muka-avatar-group--tight.muka-avatar-group--xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-tight-xs); }
|
|
297
300
|
.muka-avatar-group--tight.muka-avatar-group--2xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-tight-2xs); }
|
|
298
301
|
.muka-avatar-group--tight.muka-avatar-group--3xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-tight-3xs); }
|
|
299
|
-
.muka-avatar-group--compact.muka-avatar-group--
|
|
302
|
+
.muka-avatar-group--compact.muka-avatar-group--xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-compact-xs); }
|
|
300
303
|
.muka-avatar-group--compact.muka-avatar-group--2xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-compact-2xs); }
|
|
301
304
|
.muka-avatar-group--compact.muka-avatar-group--3xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-compact-3xs); }
|
|
302
|
-
.muka-avatar-group--spacious.muka-avatar-group--
|
|
305
|
+
.muka-avatar-group--spacious.muka-avatar-group--xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-spacious-xs); }
|
|
303
306
|
.muka-avatar-group--spacious.muka-avatar-group--2xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-spacious-2xs); }
|
|
304
307
|
.muka-avatar-group--spacious.muka-avatar-group--3xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-spacious-3xs); }
|
|
305
308
|
|
|
@@ -307,6 +310,14 @@
|
|
|
307
310
|
margin-left: calc(-1 * var(--muka-avatar-group-overlap));
|
|
308
311
|
}
|
|
309
312
|
|
|
313
|
+
/* Badge: a BadgeNumber on the top-right corner of the stack, above every avatar */
|
|
314
|
+
.muka-avatar-group__badge {
|
|
315
|
+
position: absolute;
|
|
316
|
+
top: calc(-1 * var(--avatar-group-badge-offset));
|
|
317
|
+
right: calc(-1 * var(--avatar-group-badge-offset));
|
|
318
|
+
z-index: 20;
|
|
319
|
+
}
|
|
320
|
+
|
|
310
321
|
/* Overflow avatar styling */
|
|
311
322
|
.muka-avatar--overflow {
|
|
312
323
|
background-color: var(--avatar-color-background-default);
|
|
@@ -41,6 +41,28 @@ function getInitials(name) {
|
|
|
41
41
|
const Avatar = ({ src, alt, icon, name, size = 'md', shape = 'circle', status, statusPosition = 'bottom-right', onClick, className = '', 'aria-label': ariaLabel, }) => {
|
|
42
42
|
const [imageError, setImageError] = (0, react_1.useState)(false);
|
|
43
43
|
const [imageLoading, setImageLoading] = (0, react_1.useState)(!!src);
|
|
44
|
+
const imgRef = (0, react_1.useRef)(null);
|
|
45
|
+
// A new src starts over: show the shimmer again and retry the image even if
|
|
46
|
+
// the previous one failed. Reset during render so the <img> is back in the
|
|
47
|
+
// tree before the effect below checks it.
|
|
48
|
+
const [prevSrc, setPrevSrc] = (0, react_1.useState)(src);
|
|
49
|
+
if (src !== prevSrc) {
|
|
50
|
+
setPrevSrc(src);
|
|
51
|
+
setImageError(false);
|
|
52
|
+
setImageLoading(!!src);
|
|
53
|
+
}
|
|
54
|
+
// With server rendering the browser can finish loading the image before
|
|
55
|
+
// React hydrates and attaches onLoad/onError, so those never fire. Read the
|
|
56
|
+
// element's own state instead of waiting for an event that already happened.
|
|
57
|
+
(0, react_1.useEffect)(() => {
|
|
58
|
+
const img = imgRef.current;
|
|
59
|
+
if (!img || !img.complete)
|
|
60
|
+
return;
|
|
61
|
+
if (img.naturalWidth === 0) {
|
|
62
|
+
setImageError(true);
|
|
63
|
+
}
|
|
64
|
+
setImageLoading(false);
|
|
65
|
+
}, [src]);
|
|
44
66
|
// Warn if src provided without alt
|
|
45
67
|
(0, accessibility_1.warnMissingA11yProp)('Avatar', !!(src && !alt), 'Avatar with src requires alt text for accessibility');
|
|
46
68
|
const handleImageLoad = () => {
|
|
@@ -97,7 +119,7 @@ const Avatar = ({ src, alt, icon, name, size = 'md', shape = 'circle', status, s
|
|
|
97
119
|
role: 'img',
|
|
98
120
|
'aria-label': computedAriaLabel,
|
|
99
121
|
};
|
|
100
|
-
return ((0, jsx_runtime_1.jsxs)(WrapperTag, { className: avatarClasses, ...wrapperProps, children: [showImage && ((0, jsx_runtime_1.jsx)("img", { src: src, alt: alt, className: "muka-avatar__image", onLoad: handleImageLoad, onError: handleImageError })), showIcon && ((0, jsx_runtime_1.jsx)("span", { className: "muka-avatar__icon", "aria-hidden": "true", children: icon })), showInitials && ((0, jsx_runtime_1.jsx)("span", { className: "muka-avatar__initials", "aria-hidden": "true", children: getInitials(name) })), showFallback && ((0, jsx_runtime_1.jsx)("svg", { className: "muka-avatar__fallback", "aria-hidden": "true", viewBox: "0 0 24 24", fill: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z" }) })), imageLoading && ((0, jsx_runtime_1.jsx)("span", { className: "muka-avatar__skeleton", "aria-hidden": "true" })), status && ((0, jsx_runtime_1.jsx)("span", { className: statusClasses, "aria-label": statusLabels[status], role: "status" }))] }));
|
|
122
|
+
return ((0, jsx_runtime_1.jsxs)(WrapperTag, { className: avatarClasses, ...wrapperProps, children: [showImage && ((0, jsx_runtime_1.jsx)("img", { ref: imgRef, src: src, alt: alt, className: "muka-avatar__image", onLoad: handleImageLoad, onError: handleImageError })), showIcon && ((0, jsx_runtime_1.jsx)("span", { className: "muka-avatar__icon", "aria-hidden": "true", children: icon })), showInitials && ((0, jsx_runtime_1.jsx)("span", { className: "muka-avatar__initials", "aria-hidden": "true", children: getInitials(name) })), showFallback && ((0, jsx_runtime_1.jsx)("svg", { className: "muka-avatar__fallback", "aria-hidden": "true", viewBox: "0 0 24 24", fill: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z" }) })), imageLoading && ((0, jsx_runtime_1.jsx)("span", { className: "muka-avatar__skeleton", "aria-hidden": "true" })), status && ((0, jsx_runtime_1.jsx)("span", { className: statusClasses, "aria-label": statusLabels[status], role: "status" }))] }));
|
|
101
123
|
};
|
|
102
124
|
exports.Avatar = Avatar;
|
|
103
125
|
exports.default = exports.Avatar;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../../components/Avatar/Avatar.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;AAEb,
|
|
1
|
+
{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../../components/Avatar/Avatar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -36,6 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
36
36
|
exports.AvatarGroup = void 0;
|
|
37
37
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
38
|
const react_1 = __importStar(require("react"));
|
|
39
|
+
const BadgeNumber_1 = require("../BadgeNumber");
|
|
39
40
|
require("./Avatar.css");
|
|
40
41
|
/**
|
|
41
42
|
* AvatarGroup Component
|
|
@@ -49,12 +50,13 @@ require("./Avatar.css");
|
|
|
49
50
|
* - Three spacing modes: tight, compact, spacious
|
|
50
51
|
* - Size propagation to child avatars
|
|
51
52
|
* - Overflow counter display
|
|
53
|
+
* - Optional number badge on the top-right corner
|
|
52
54
|
*
|
|
53
55
|
* @accessibility WCAG 2.1 AA compliant
|
|
54
56
|
* - Uses role="group" with aria-label
|
|
55
57
|
* - Overflow count includes accessible label
|
|
56
58
|
*/
|
|
57
|
-
const AvatarGroup = ({ children, max = 5, size = 'md', spacing = 'compact', className = '', 'aria-label': ariaLabel = 'Avatar group', ...props }) => {
|
|
59
|
+
const AvatarGroup = ({ children, max = 5, size = 'md', spacing = 'compact', badge, badgeLabel, className = '', 'aria-label': ariaLabel = 'Avatar group', ...props }) => {
|
|
58
60
|
const childArray = react_1.Children.toArray(children);
|
|
59
61
|
const totalCount = childArray.length;
|
|
60
62
|
const visibleCount = Math.min(max, totalCount);
|
|
@@ -81,7 +83,7 @@ const AvatarGroup = ({ children, max = 5, size = 'md', spacing = 'compact', clas
|
|
|
81
83
|
size: child.props.size || size,
|
|
82
84
|
...child.props,
|
|
83
85
|
}) }, index));
|
|
84
|
-
}), overflowCount > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "muka-avatar-group__item", children: (0, jsx_runtime_1.jsx)("div", { className: overflowClasses, role: "img", "aria-label": `${overflowCount} more ${overflowCount === 1 ? 'person' : 'people'}`, children: (0, jsx_runtime_1.jsxs)("span", { className: "muka-avatar__overflow-count", children: ["+", overflowCount] }) }) }))] }));
|
|
86
|
+
}), overflowCount > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "muka-avatar-group__item", children: (0, jsx_runtime_1.jsx)("div", { className: overflowClasses, role: "img", "aria-label": `${overflowCount} more ${overflowCount === 1 ? 'person' : 'people'}`, children: (0, jsx_runtime_1.jsxs)("span", { className: "muka-avatar__overflow-count", children: ["+", overflowCount] }) }) })), badge !== undefined && badge !== null && badge !== false && ((0, jsx_runtime_1.jsx)(BadgeNumber_1.BadgeNumber, { variant: "info", size: "2xs", className: "muka-avatar-group__badge", "aria-label": badgeLabel, children: badge }))] }));
|
|
85
87
|
};
|
|
86
88
|
exports.AvatarGroup = AvatarGroup;
|
|
87
89
|
exports.default = exports.AvatarGroup;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../../../../components/Avatar/AvatarGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAwC;AAExC,wBAAsB;
|
|
1
|
+
{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../../../../components/Avatar/AvatarGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAwC;AAExC,gDAA6C;AAC7C,wBAAsB;AAkCtB;;;;;;;;;;;;;;;;;GAiBG;AACI,MAAM,WAAW,GAA+B,CAAC,EACtD,QAAQ,EACR,GAAG,GAAG,CAAC,EACP,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,SAAS,EACnB,KAAK,EACL,UAAU,EACV,SAAS,GAAG,EAAE,EACd,YAAY,EAAE,SAAS,GAAG,cAAc,EACxC,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,gBAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAC9C,MAAM,UAAU,GAAG,UAAU,CAAC,MAAM,CAAC;IACrC,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC;IAC/C,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,GAAG,GAAG,CAAC,CAAC;IAEpD,MAAM,eAAe,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC;IAE1D,MAAM,YAAY,GAAG;QACnB,mBAAmB;QACnB,sBAAsB,OAAO,EAAE;QAC/B,sBAAsB,IAAI,EAAE;QAC5B,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,MAAM,eAAe,GAAG;QACtB,aAAa;QACb,uBAAuB;QACvB,gBAAgB,IAAI,EAAE;QACtB,qBAAqB;KACtB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,CACL,iCACE,SAAS,EAAE,YAAY,EACvB,IAAI,EAAC,OAAO,gBACA,SAAS,KACjB,KAAK,aAER,eAAe,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;gBACpC,IAAI,CAAC,eAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;oBACjC,OAAO,KAAK,CAAC;gBACf,CAAC;gBAED,sDAAsD;gBACtD,OAAO,CACL,gCAAiB,SAAS,EAAC,yBAAyB,YACjD,eAAK,CAAC,YAAY,CAAC,KAAK,EAAE;wBACzB,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI;wBAC9B,GAAG,KAAK,CAAC,KAAK;qBACY,CAAC,IAJrB,KAAK,CAKT,CACP,CAAC;YACJ,CAAC,CAAC,EAED,aAAa,GAAG,CAAC,IAAI,CACpB,gCAAK,SAAS,EAAC,yBAAyB,YACtC,gCACE,SAAS,EAAE,eAAe,EAC1B,IAAI,EAAC,KAAK,gBACE,GAAG,aAAa,SAAS,aAAa,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,EAAE,YAEhF,kCAAM,SAAS,EAAC,6BAA6B,kBACzC,aAAa,IACV,GACH,GACF,CACP,EAEA,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,KAAK,IAAI,CAC3D,uBAAC,yBAAW,IACV,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,KAAK,EACV,SAAS,EAAC,0BAA0B,gBACxB,UAAU,YAErB,KAAK,GACM,CACf,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAjFW,QAAA,WAAW,eAiFtB;AAEF,kBAAe,mBAAW,CAAC"}
|
|
@@ -124,11 +124,14 @@ const TabList = ({ children, className = '' }) => {
|
|
|
124
124
|
return ((0, jsx_runtime_1.jsx)("div", { ref: listRef, className: `muka-tabs__list ${className}`.trim(), role: "tablist", "aria-orientation": "horizontal", onKeyDown: handleKeyDown, tabIndex: -1, children: children }));
|
|
125
125
|
};
|
|
126
126
|
exports.TabList = TabList;
|
|
127
|
-
/**
|
|
127
|
+
/**
|
|
128
|
+
* Leading-item sizes per tab size (Figma "Tab label": icon 16 / 20 / 24,
|
|
129
|
+
* avatar and avatar group 24 / 32 / 40).
|
|
130
|
+
*/
|
|
128
131
|
const LEADING_SIZES = {
|
|
129
|
-
sm: { avatar: '
|
|
132
|
+
sm: { avatar: '3xs', pieChart: 16 },
|
|
130
133
|
md: { avatar: '2xs', pieChart: 'xs' },
|
|
131
|
-
lg: { avatar: '
|
|
134
|
+
lg: { avatar: 'xs', pieChart: 'sm' },
|
|
132
135
|
};
|
|
133
136
|
const Tab = ({ value, children, leading, icon, disabled = false, className = '', }) => {
|
|
134
137
|
const { activeValue, setActiveValue, size } = useTabsContext();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../../components/Tabs/Tabs.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../../components/Tabs/Tabs.tsx"],"names":[],"mappings":"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"}
|
|
@@ -256,9 +256,12 @@
|
|
|
256
256
|
|
|
257
257
|
/* Avatar Group (Figma "Avatar Stack") */
|
|
258
258
|
.muka-avatar-group {
|
|
259
|
+
position: relative;
|
|
259
260
|
display: inline-flex;
|
|
260
261
|
align-items: center;
|
|
261
262
|
flex-direction: row;
|
|
263
|
+
/* Never stretch to a grid cell or column, so the badge stays on the last avatar */
|
|
264
|
+
width: fit-content;
|
|
262
265
|
}
|
|
263
266
|
|
|
264
267
|
/* Later avatars sit on top of earlier ones (DOM order); a hovered one comes to the front */
|
|
@@ -278,7 +281,7 @@
|
|
|
278
281
|
box-shadow: 0 0 0 var(--avatar-group-ring-width) var(--avatar-group-ring-color);
|
|
279
282
|
}
|
|
280
283
|
|
|
281
|
-
/* Overlap. Figma specifies exact values for
|
|
284
|
+
/* Overlap. Figma specifies exact values for 40 / 32 / 24px avatars (xs / 2xs / 3xs);
|
|
282
285
|
other sizes use the same proportions: tight 2/3, compact 1/2, spacious 1/3. */
|
|
283
286
|
.muka-avatar-group--4xs { --muka-avatar-group-size: var(--avatar-size-4xs); }
|
|
284
287
|
.muka-avatar-group--3xs { --muka-avatar-group-size: var(--avatar-size-3xs); }
|
|
@@ -293,13 +296,13 @@
|
|
|
293
296
|
.muka-avatar-group--compact { --muka-avatar-group-overlap: calc(var(--muka-avatar-group-size) / 2); }
|
|
294
297
|
.muka-avatar-group--spacious { --muka-avatar-group-overlap: calc(var(--muka-avatar-group-size) / 3); }
|
|
295
298
|
|
|
296
|
-
.muka-avatar-group--tight.muka-avatar-group--
|
|
299
|
+
.muka-avatar-group--tight.muka-avatar-group--xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-tight-xs); }
|
|
297
300
|
.muka-avatar-group--tight.muka-avatar-group--2xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-tight-2xs); }
|
|
298
301
|
.muka-avatar-group--tight.muka-avatar-group--3xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-tight-3xs); }
|
|
299
|
-
.muka-avatar-group--compact.muka-avatar-group--
|
|
302
|
+
.muka-avatar-group--compact.muka-avatar-group--xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-compact-xs); }
|
|
300
303
|
.muka-avatar-group--compact.muka-avatar-group--2xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-compact-2xs); }
|
|
301
304
|
.muka-avatar-group--compact.muka-avatar-group--3xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-compact-3xs); }
|
|
302
|
-
.muka-avatar-group--spacious.muka-avatar-group--
|
|
305
|
+
.muka-avatar-group--spacious.muka-avatar-group--xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-spacious-xs); }
|
|
303
306
|
.muka-avatar-group--spacious.muka-avatar-group--2xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-spacious-2xs); }
|
|
304
307
|
.muka-avatar-group--spacious.muka-avatar-group--3xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-spacious-3xs); }
|
|
305
308
|
|
|
@@ -307,6 +310,14 @@
|
|
|
307
310
|
margin-left: calc(-1 * var(--muka-avatar-group-overlap));
|
|
308
311
|
}
|
|
309
312
|
|
|
313
|
+
/* Badge: a BadgeNumber on the top-right corner of the stack, above every avatar */
|
|
314
|
+
.muka-avatar-group__badge {
|
|
315
|
+
position: absolute;
|
|
316
|
+
top: calc(-1 * var(--avatar-group-badge-offset));
|
|
317
|
+
right: calc(-1 * var(--avatar-group-badge-offset));
|
|
318
|
+
z-index: 20;
|
|
319
|
+
}
|
|
320
|
+
|
|
310
321
|
/* Overflow avatar styling */
|
|
311
322
|
.muka-avatar--overflow {
|
|
312
323
|
background-color: var(--avatar-color-background-default);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useState } from 'react';
|
|
3
|
+
import { useEffect, useRef, useState } from 'react';
|
|
4
4
|
import { warnMissingA11yProp } from '../../utils/accessibility';
|
|
5
5
|
import './Avatar.css';
|
|
6
6
|
/**
|
|
@@ -38,6 +38,28 @@ function getInitials(name) {
|
|
|
38
38
|
export const Avatar = ({ src, alt, icon, name, size = 'md', shape = 'circle', status, statusPosition = 'bottom-right', onClick, className = '', 'aria-label': ariaLabel, }) => {
|
|
39
39
|
const [imageError, setImageError] = useState(false);
|
|
40
40
|
const [imageLoading, setImageLoading] = useState(!!src);
|
|
41
|
+
const imgRef = useRef(null);
|
|
42
|
+
// A new src starts over: show the shimmer again and retry the image even if
|
|
43
|
+
// the previous one failed. Reset during render so the <img> is back in the
|
|
44
|
+
// tree before the effect below checks it.
|
|
45
|
+
const [prevSrc, setPrevSrc] = useState(src);
|
|
46
|
+
if (src !== prevSrc) {
|
|
47
|
+
setPrevSrc(src);
|
|
48
|
+
setImageError(false);
|
|
49
|
+
setImageLoading(!!src);
|
|
50
|
+
}
|
|
51
|
+
// With server rendering the browser can finish loading the image before
|
|
52
|
+
// React hydrates and attaches onLoad/onError, so those never fire. Read the
|
|
53
|
+
// element's own state instead of waiting for an event that already happened.
|
|
54
|
+
useEffect(() => {
|
|
55
|
+
const img = imgRef.current;
|
|
56
|
+
if (!img || !img.complete)
|
|
57
|
+
return;
|
|
58
|
+
if (img.naturalWidth === 0) {
|
|
59
|
+
setImageError(true);
|
|
60
|
+
}
|
|
61
|
+
setImageLoading(false);
|
|
62
|
+
}, [src]);
|
|
41
63
|
// Warn if src provided without alt
|
|
42
64
|
warnMissingA11yProp('Avatar', !!(src && !alt), 'Avatar with src requires alt text for accessibility');
|
|
43
65
|
const handleImageLoad = () => {
|
|
@@ -94,7 +116,7 @@ export const Avatar = ({ src, alt, icon, name, size = 'md', shape = 'circle', st
|
|
|
94
116
|
role: 'img',
|
|
95
117
|
'aria-label': computedAriaLabel,
|
|
96
118
|
};
|
|
97
|
-
return (_jsxs(WrapperTag, { className: avatarClasses, ...wrapperProps, children: [showImage && (_jsx("img", { src: src, alt: alt, className: "muka-avatar__image", onLoad: handleImageLoad, onError: handleImageError })), showIcon && (_jsx("span", { className: "muka-avatar__icon", "aria-hidden": "true", children: icon })), showInitials && (_jsx("span", { className: "muka-avatar__initials", "aria-hidden": "true", children: getInitials(name) })), showFallback && (_jsx("svg", { className: "muka-avatar__fallback", "aria-hidden": "true", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z" }) })), imageLoading && (_jsx("span", { className: "muka-avatar__skeleton", "aria-hidden": "true" })), status && (_jsx("span", { className: statusClasses, "aria-label": statusLabels[status], role: "status" }))] }));
|
|
119
|
+
return (_jsxs(WrapperTag, { className: avatarClasses, ...wrapperProps, children: [showImage && (_jsx("img", { ref: imgRef, src: src, alt: alt, className: "muka-avatar__image", onLoad: handleImageLoad, onError: handleImageError })), showIcon && (_jsx("span", { className: "muka-avatar__icon", "aria-hidden": "true", children: icon })), showInitials && (_jsx("span", { className: "muka-avatar__initials", "aria-hidden": "true", children: getInitials(name) })), showFallback && (_jsx("svg", { className: "muka-avatar__fallback", "aria-hidden": "true", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z" }) })), imageLoading && (_jsx("span", { className: "muka-avatar__skeleton", "aria-hidden": "true" })), status && (_jsx("span", { className: statusClasses, "aria-label": statusLabels[status], role: "status" }))] }));
|
|
98
120
|
};
|
|
99
121
|
export default Avatar;
|
|
100
122
|
//# sourceMappingURL=Avatar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../../components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../../components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,cAAc,CAAC;AA2CtB;;GAEG;AACH,SAAS,WAAW,CAAC,IAAY;IAC/B,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACvC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACvB,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;IAC1C,CAAC;IACD,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;AAChF,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAC5C,GAAG,EACH,GAAG,EACH,IAAI,EACJ,IAAI,EACJ,IAAI,GAAG,IAAI,EACX,KAAK,GAAG,QAAQ,EAChB,MAAM,EACN,cAAc,GAAG,cAAc,EAC/B,OAAO,EACP,SAAS,GAAG,EAAE,EACd,YAAY,EAAE,SAAS,GACxB,EAAE,EAAE;IACH,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;IACxD,MAAM,MAAM,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAE9C,4EAA4E;IAC5E,2EAA2E;IAC3E,0CAA0C;IAC1C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC5C,IAAI,GAAG,KAAK,OAAO,EAAE,CAAC;QACpB,UAAU,CAAC,GAAG,CAAC,CAAC;QAChB,aAAa,CAAC,KAAK,CAAC,CAAC;QACrB,eAAe,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;IACzB,CAAC;IAED,wEAAwE;IACxE,4EAA4E;IAC5E,6EAA6E;IAC7E,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,GAAG,GAAG,MAAM,CAAC,OAAO,CAAC;QAC3B,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ;YAAE,OAAO;QAClC,IAAI,GAAG,CAAC,YAAY,KAAK,CAAC,EAAE,CAAC;YAC3B,aAAa,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC;QACD,eAAe,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,mCAAmC;IACnC,mBAAmB,CACjB,QAAQ,EACR,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,EACf,qDAAqD,CACtD,CAAC;IAEF,MAAM,eAAe,GAAG,GAAG,EAAE;QAC3B,eAAe,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,aAAa,CAAC,IAAI,CAAC,CAAC;QACpB,eAAe,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,EAAE,CAAC;QACZ,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,CAAsB,EAAE,EAAE;QAC/C,IAAI,OAAO,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE,CAAC;YACpD,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,OAAO,EAAE,CAAC;QACZ,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG;QACpB,aAAa;QACb,gBAAgB,IAAI,EAAE;QACtB,gBAAgB,KAAK,EAAE;QACvB,OAAO,IAAI,wBAAwB;QACnC,YAAY,IAAI,sBAAsB;QACtC,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,MAAM,aAAa,GAAG;QACpB,qBAAqB;QACrB,wBAAwB,MAAM,EAAE;QAChC,wBAAwB,cAAc,EAAE;KACzC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,6CAA6C;IAC7C,MAAM,SAAS,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC;IACrC,MAAM,QAAQ,GAAG,CAAC,SAAS,IAAI,IAAI,CAAC;IACpC,MAAM,YAAY,GAAG,CAAC,SAAS,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC;IACrD,MAAM,YAAY,GAAG,CAAC,SAAS,IAAI,CAAC,QAAQ,IAAI,CAAC,YAAY,CAAC;IAE9D,4BAA4B;IAC5B,MAAM,iBAAiB,GAAG,SAAS,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,GAAG,IAAI,aAAa,CAAC,CAAC;IAEjF,MAAM,YAAY,GAAG;QACnB,MAAM,EAAE,QAAQ;QAChB,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;KACb,CAAC;IAEF,MAAM,UAAU,GAAG,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;IAC9C,MAAM,YAAY,GAAG,OAAO,CAAC,CAAC,CAAC;QAC7B,IAAI,EAAE,QAAiB;QACvB,OAAO,EAAE,WAAW;QACpB,SAAS,EAAE,aAAa;QACxB,YAAY,EAAE,iBAAiB;KAChC,CAAC,CAAC,CAAC;QACF,IAAI,EAAE,KAAK;QACX,YAAY,EAAE,iBAAiB;KAChC,CAAC;IAEF,OAAO,CACL,MAAC,UAAU,IACT,SAAS,EAAE,aAAa,KACpB,YAAY,aAEf,SAAS,IAAI,CACZ,cACE,GAAG,EAAE,MAAM,EACX,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,eAAe,EACvB,OAAO,EAAE,gBAAgB,GACzB,CACH,EAEA,QAAQ,IAAI,CACX,eAAM,SAAS,EAAC,mBAAmB,iBAAa,MAAM,YACnD,IAAI,GACA,CACR,EAEA,YAAY,IAAI,CACf,eAAM,SAAS,EAAC,uBAAuB,iBAAa,MAAM,YACvD,WAAW,CAAC,IAAK,CAAC,GACd,CACR,EAEA,YAAY,IAAI,CACf,cACE,SAAS,EAAC,uBAAuB,iBACrB,MAAM,EAClB,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,cAAc,YAEnB,eAAM,CAAC,EAAC,qOAAqO,GAAE,GAC3O,CACP,EAEA,YAAY,IAAI,CACf,eAAM,SAAS,EAAC,uBAAuB,iBAAa,MAAM,GAAG,CAC9D,EAEA,MAAM,IAAI,CACT,eACE,SAAS,EAAE,aAAa,gBACZ,YAAY,CAAC,MAAM,CAAC,EAChC,IAAI,EAAC,QAAQ,GACb,CACH,IACU,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import React, { Children } from 'react';
|
|
3
|
+
import { BadgeNumber } from '../BadgeNumber';
|
|
3
4
|
import './Avatar.css';
|
|
4
5
|
/**
|
|
5
6
|
* AvatarGroup Component
|
|
@@ -13,12 +14,13 @@ import './Avatar.css';
|
|
|
13
14
|
* - Three spacing modes: tight, compact, spacious
|
|
14
15
|
* - Size propagation to child avatars
|
|
15
16
|
* - Overflow counter display
|
|
17
|
+
* - Optional number badge on the top-right corner
|
|
16
18
|
*
|
|
17
19
|
* @accessibility WCAG 2.1 AA compliant
|
|
18
20
|
* - Uses role="group" with aria-label
|
|
19
21
|
* - Overflow count includes accessible label
|
|
20
22
|
*/
|
|
21
|
-
export const AvatarGroup = ({ children, max = 5, size = 'md', spacing = 'compact', className = '', 'aria-label': ariaLabel = 'Avatar group', ...props }) => {
|
|
23
|
+
export const AvatarGroup = ({ children, max = 5, size = 'md', spacing = 'compact', badge, badgeLabel, className = '', 'aria-label': ariaLabel = 'Avatar group', ...props }) => {
|
|
22
24
|
const childArray = Children.toArray(children);
|
|
23
25
|
const totalCount = childArray.length;
|
|
24
26
|
const visibleCount = Math.min(max, totalCount);
|
|
@@ -45,7 +47,7 @@ export const AvatarGroup = ({ children, max = 5, size = 'md', spacing = 'compact
|
|
|
45
47
|
size: child.props.size || size,
|
|
46
48
|
...child.props,
|
|
47
49
|
}) }, index));
|
|
48
|
-
}), overflowCount > 0 && (_jsx("div", { className: "muka-avatar-group__item", children: _jsx("div", { className: overflowClasses, role: "img", "aria-label": `${overflowCount} more ${overflowCount === 1 ? 'person' : 'people'}`, children: _jsxs("span", { className: "muka-avatar__overflow-count", children: ["+", overflowCount] }) }) }))] }));
|
|
50
|
+
}), overflowCount > 0 && (_jsx("div", { className: "muka-avatar-group__item", children: _jsx("div", { className: overflowClasses, role: "img", "aria-label": `${overflowCount} more ${overflowCount === 1 ? 'person' : 'people'}`, children: _jsxs("span", { className: "muka-avatar__overflow-count", children: ["+", overflowCount] }) }) })), badge !== undefined && badge !== null && badge !== false && (_jsx(BadgeNumber, { variant: "info", size: "2xs", className: "muka-avatar-group__badge", "aria-label": badgeLabel, children: badge }))] }));
|
|
49
51
|
};
|
|
50
52
|
export default AvatarGroup;
|
|
51
53
|
//# sourceMappingURL=AvatarGroup.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../../../../components/Avatar/AvatarGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../../../../components/Avatar/AvatarGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,cAAc,CAAC;AAkCtB;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,WAAW,GAA+B,CAAC,EACtD,QAAQ,EACR,GAAG,GAAG,CAAC,EACP,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,SAAS,EACnB,KAAK,EACL,UAAU,EACV,SAAS,GAAG,EAAE,EACd,YAAY,EAAE,SAAS,GAAG,cAAc,EACxC,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAC9C,MAAM,UAAU,GAAG,UAAU,CAAC,MAAM,CAAC;IACrC,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC;IAC/C,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,GAAG,GAAG,CAAC,CAAC;IAEpD,MAAM,eAAe,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC;IAE1D,MAAM,YAAY,GAAG;QACnB,mBAAmB;QACnB,sBAAsB,OAAO,EAAE;QAC/B,sBAAsB,IAAI,EAAE;QAC5B,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,MAAM,eAAe,GAAG;QACtB,aAAa;QACb,uBAAuB;QACvB,gBAAgB,IAAI,EAAE;QACtB,qBAAqB;KACtB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,CACL,eACE,SAAS,EAAE,YAAY,EACvB,IAAI,EAAC,OAAO,gBACA,SAAS,KACjB,KAAK,aAER,eAAe,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;gBACpC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;oBACjC,OAAO,KAAK,CAAC;gBACf,CAAC;gBAED,sDAAsD;gBACtD,OAAO,CACL,cAAiB,SAAS,EAAC,yBAAyB,YACjD,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;wBACzB,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI;wBAC9B,GAAG,KAAK,CAAC,KAAK;qBACY,CAAC,IAJrB,KAAK,CAKT,CACP,CAAC;YACJ,CAAC,CAAC,EAED,aAAa,GAAG,CAAC,IAAI,CACpB,cAAK,SAAS,EAAC,yBAAyB,YACtC,cACE,SAAS,EAAE,eAAe,EAC1B,IAAI,EAAC,KAAK,gBACE,GAAG,aAAa,SAAS,aAAa,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,EAAE,YAEhF,gBAAM,SAAS,EAAC,6BAA6B,kBACzC,aAAa,IACV,GACH,GACF,CACP,EAEA,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,KAAK,IAAI,CAC3D,KAAC,WAAW,IACV,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,KAAK,EACV,SAAS,EAAC,0BAA0B,gBACxB,UAAU,YAErB,KAAK,GACM,CACf,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -86,11 +86,14 @@ export const TabList = ({ children, className = '' }) => {
|
|
|
86
86
|
};
|
|
87
87
|
return (_jsx("div", { ref: listRef, className: `muka-tabs__list ${className}`.trim(), role: "tablist", "aria-orientation": "horizontal", onKeyDown: handleKeyDown, tabIndex: -1, children: children }));
|
|
88
88
|
};
|
|
89
|
-
/**
|
|
89
|
+
/**
|
|
90
|
+
* Leading-item sizes per tab size (Figma "Tab label": icon 16 / 20 / 24,
|
|
91
|
+
* avatar and avatar group 24 / 32 / 40).
|
|
92
|
+
*/
|
|
90
93
|
const LEADING_SIZES = {
|
|
91
|
-
sm: { avatar: '
|
|
94
|
+
sm: { avatar: '3xs', pieChart: 16 },
|
|
92
95
|
md: { avatar: '2xs', pieChart: 'xs' },
|
|
93
|
-
lg: { avatar: '
|
|
96
|
+
lg: { avatar: 'xs', pieChart: 'sm' },
|
|
94
97
|
};
|
|
95
98
|
export const Tab = ({ value, children, leading, icon, disabled = false, className = '', }) => {
|
|
96
99
|
const { activeValue, setActiveValue, size } = useTabsContext();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../../components/Tabs/Tabs.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../../components/Tabs/Tabs.tsx"],"names":[],"mappings":"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"}
|
|
@@ -256,9 +256,12 @@
|
|
|
256
256
|
|
|
257
257
|
/* Avatar Group (Figma "Avatar Stack") */
|
|
258
258
|
.muka-avatar-group {
|
|
259
|
+
position: relative;
|
|
259
260
|
display: inline-flex;
|
|
260
261
|
align-items: center;
|
|
261
262
|
flex-direction: row;
|
|
263
|
+
/* Never stretch to a grid cell or column, so the badge stays on the last avatar */
|
|
264
|
+
width: fit-content;
|
|
262
265
|
}
|
|
263
266
|
|
|
264
267
|
/* Later avatars sit on top of earlier ones (DOM order); a hovered one comes to the front */
|
|
@@ -278,7 +281,7 @@
|
|
|
278
281
|
box-shadow: 0 0 0 var(--avatar-group-ring-width) var(--avatar-group-ring-color);
|
|
279
282
|
}
|
|
280
283
|
|
|
281
|
-
/* Overlap. Figma specifies exact values for
|
|
284
|
+
/* Overlap. Figma specifies exact values for 40 / 32 / 24px avatars (xs / 2xs / 3xs);
|
|
282
285
|
other sizes use the same proportions: tight 2/3, compact 1/2, spacious 1/3. */
|
|
283
286
|
.muka-avatar-group--4xs { --muka-avatar-group-size: var(--avatar-size-4xs); }
|
|
284
287
|
.muka-avatar-group--3xs { --muka-avatar-group-size: var(--avatar-size-3xs); }
|
|
@@ -293,13 +296,13 @@
|
|
|
293
296
|
.muka-avatar-group--compact { --muka-avatar-group-overlap: calc(var(--muka-avatar-group-size) / 2); }
|
|
294
297
|
.muka-avatar-group--spacious { --muka-avatar-group-overlap: calc(var(--muka-avatar-group-size) / 3); }
|
|
295
298
|
|
|
296
|
-
.muka-avatar-group--tight.muka-avatar-group--
|
|
299
|
+
.muka-avatar-group--tight.muka-avatar-group--xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-tight-xs); }
|
|
297
300
|
.muka-avatar-group--tight.muka-avatar-group--2xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-tight-2xs); }
|
|
298
301
|
.muka-avatar-group--tight.muka-avatar-group--3xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-tight-3xs); }
|
|
299
|
-
.muka-avatar-group--compact.muka-avatar-group--
|
|
302
|
+
.muka-avatar-group--compact.muka-avatar-group--xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-compact-xs); }
|
|
300
303
|
.muka-avatar-group--compact.muka-avatar-group--2xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-compact-2xs); }
|
|
301
304
|
.muka-avatar-group--compact.muka-avatar-group--3xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-compact-3xs); }
|
|
302
|
-
.muka-avatar-group--spacious.muka-avatar-group--
|
|
305
|
+
.muka-avatar-group--spacious.muka-avatar-group--xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-spacious-xs); }
|
|
303
306
|
.muka-avatar-group--spacious.muka-avatar-group--2xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-spacious-2xs); }
|
|
304
307
|
.muka-avatar-group--spacious.muka-avatar-group--3xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-spacious-3xs); }
|
|
305
308
|
|
|
@@ -307,6 +310,14 @@
|
|
|
307
310
|
margin-left: calc(-1 * var(--muka-avatar-group-overlap));
|
|
308
311
|
}
|
|
309
312
|
|
|
313
|
+
/* Badge: a BadgeNumber on the top-right corner of the stack, above every avatar */
|
|
314
|
+
.muka-avatar-group__badge {
|
|
315
|
+
position: absolute;
|
|
316
|
+
top: calc(-1 * var(--avatar-group-badge-offset));
|
|
317
|
+
right: calc(-1 * var(--avatar-group-badge-offset));
|
|
318
|
+
z-index: 20;
|
|
319
|
+
}
|
|
320
|
+
|
|
310
321
|
/* Overflow avatar styling */
|
|
311
322
|
.muka-avatar--overflow {
|
|
312
323
|
background-color: var(--avatar-color-background-default);
|