@revikornmann/muka-ui 0.27.1 → 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/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/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 +397 -385
- package/dist/styles/muka-dark.css +397 -385
- package/dist/styles/muka-light.css +397 -385
- 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 +397 -385
- package/dist/styles/wireframe-light.css +397 -385
- 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);
|
|
@@ -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,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);
|