@revikornmann/muka-ui 0.26.0 → 0.27.0
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 +79 -30
- package/dist/cjs/components/Avatar/Avatar.js +1 -1
- package/dist/cjs/components/Avatar/Avatar.js.map +1 -1
- package/dist/cjs/components/Avatar/AvatarGroup.js +4 -3
- package/dist/cjs/components/Avatar/AvatarGroup.js.map +1 -1
- package/dist/cjs/components/Button/Button.css +33 -0
- package/dist/cjs/components/Button/Button.js +2 -2
- package/dist/cjs/components/DataPieChart/DataPieChart.js +5 -2
- package/dist/cjs/components/DataPieChart/DataPieChart.js.map +1 -1
- package/dist/cjs/components/DataPieChart/index.js.map +1 -1
- package/dist/cjs/components/Tabs/Tabs.css +37 -14
- package/dist/cjs/components/Tabs/Tabs.js +30 -10
- package/dist/cjs/components/Tabs/Tabs.js.map +1 -1
- package/dist/cjs/components/index.js.map +1 -1
- package/dist/esm/components/Avatar/Avatar.css +79 -30
- package/dist/esm/components/Avatar/Avatar.js +1 -1
- package/dist/esm/components/Avatar/Avatar.js.map +1 -1
- package/dist/esm/components/Avatar/AvatarGroup.js +4 -3
- package/dist/esm/components/Avatar/AvatarGroup.js.map +1 -1
- package/dist/esm/components/Button/Button.css +33 -0
- package/dist/esm/components/Button/Button.js +2 -2
- package/dist/esm/components/DataPieChart/DataPieChart.js +4 -1
- package/dist/esm/components/DataPieChart/DataPieChart.js.map +1 -1
- package/dist/esm/components/DataPieChart/index.js.map +1 -1
- package/dist/esm/components/Tabs/Tabs.css +37 -14
- package/dist/esm/components/Tabs/Tabs.js +30 -10
- package/dist/esm/components/Tabs/Tabs.js.map +1 -1
- package/dist/esm/components/index.js.map +1 -1
- package/dist/styles/components/Avatar.css +79 -30
- package/dist/styles/components/Button.css +33 -0
- package/dist/styles/components/Tabs.css +37 -14
- package/dist/styles/index.css +796 -648
- package/dist/styles/muka-dark.css +796 -648
- package/dist/styles/muka-light.css +796 -648
- package/dist/styles/tokens-bouwplan-dark.css +48 -5
- package/dist/styles/tokens-bouwplan-light.css +48 -5
- package/dist/styles/tokens-fscl-dark.css +48 -5
- package/dist/styles/tokens-fscl-light.css +48 -5
- package/dist/styles/tokens-grip-dark.css +48 -5
- package/dist/styles/tokens-grip-light.css +48 -5
- package/dist/styles/tokens-muka-dark.css +48 -5
- package/dist/styles/tokens-muka-light.css +48 -5
- package/dist/styles/tokens-wireframe-dark.css +48 -5
- package/dist/styles/tokens-wireframe-light.css +48 -5
- package/dist/styles/wireframe-dark.css +796 -648
- package/dist/styles/wireframe-light.css +796 -648
- package/dist/types/components/Avatar/Avatar.d.ts +8 -3
- package/dist/types/components/Avatar/Avatar.d.ts.map +1 -1
- package/dist/types/components/Avatar/AvatarGroup.d.ts +10 -5
- package/dist/types/components/Avatar/AvatarGroup.d.ts.map +1 -1
- package/dist/types/components/Avatar/index.d.ts +1 -1
- package/dist/types/components/Avatar/index.d.ts.map +1 -1
- package/dist/types/components/Button/Button.d.ts +3 -3
- package/dist/types/components/Button/Button.d.ts.map +1 -1
- package/dist/types/components/DataPieChart/DataPieChart.d.ts +13 -2
- package/dist/types/components/DataPieChart/DataPieChart.d.ts.map +1 -1
- package/dist/types/components/DataPieChart/index.d.ts +1 -1
- package/dist/types/components/DataPieChart/index.d.ts.map +1 -1
- package/dist/types/components/Tabs/Tabs.d.ts +17 -2
- package/dist/types/components/Tabs/Tabs.d.ts.map +1 -1
- package/dist/types/components/index.d.ts +2 -2
- package/dist/types/components/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/tokens/t1-primitives/color.json +10 -0
- package/tokens/t2-alias/base.json +14 -0
- package/tokens/t2-alias/brand/bouwplan/dark.json +5 -0
- package/tokens/t2-alias/brand/bouwplan/light.json +5 -0
- package/tokens/t2-alias/brand/fscl/dark.json +5 -0
- package/tokens/t2-alias/brand/fscl/light.json +5 -0
- package/tokens/t2-alias/brand/grip/dark.json +14 -0
- package/tokens/t2-alias/brand/grip/light.json +14 -0
- package/tokens/t2-alias/brand/muka/dark.json +14 -0
- package/tokens/t2-alias/brand/muka/light.json +14 -0
- package/tokens/t2-alias/brand/wireframe/dark.json +14 -0
- package/tokens/t2-alias/brand/wireframe/light.json +14 -0
- package/tokens/t3-semantics/ui.json +49 -2
- package/tokens/t4-components/avatar.json +82 -18
- package/tokens/t4-components/button.json +56 -0
- package/tokens/t4-components/tabs.json +41 -1
|
@@ -12,12 +12,29 @@
|
|
|
12
12
|
vertical-align: middle;
|
|
13
13
|
background-color: var(--avatar-color-background-default);
|
|
14
14
|
color: var(--avatar-color-foreground-default);
|
|
15
|
-
border: var(--avatar-border-width) solid var(--avatar-color-border-default);
|
|
16
15
|
font-family: var(--alias-font-brand-family);
|
|
17
16
|
font-weight: var(--alias-font-brand-weight-semibold);
|
|
18
17
|
}
|
|
19
18
|
|
|
20
19
|
/* Size variants */
|
|
20
|
+
.muka-avatar--4xs {
|
|
21
|
+
width: var(--avatar-size-4xs);
|
|
22
|
+
height: var(--avatar-size-4xs);
|
|
23
|
+
font-size: var(--avatar-font-size-3xs); /* only used by an AvatarGroup "+N" */
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.muka-avatar--3xs {
|
|
27
|
+
width: var(--avatar-size-3xs);
|
|
28
|
+
height: var(--avatar-size-3xs);
|
|
29
|
+
font-size: var(--avatar-font-size-3xs);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.muka-avatar--2xs {
|
|
33
|
+
width: var(--avatar-size-2xs);
|
|
34
|
+
height: var(--avatar-size-2xs);
|
|
35
|
+
font-size: var(--avatar-font-size-2xs);
|
|
36
|
+
}
|
|
37
|
+
|
|
21
38
|
.muka-avatar--xs {
|
|
22
39
|
width: var(--avatar-size-xs);
|
|
23
40
|
height: var(--avatar-size-xs);
|
|
@@ -57,6 +74,20 @@
|
|
|
57
74
|
border-radius: var(--avatar-radius-square);
|
|
58
75
|
}
|
|
59
76
|
|
|
77
|
+
.muka-avatar--square.muka-avatar--4xs,
|
|
78
|
+
.muka-avatar--square.muka-avatar--3xs,
|
|
79
|
+
.muka-avatar--square.muka-avatar--2xs {
|
|
80
|
+
border-radius: var(--avatar-radius-square-sm);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/* 4xs is too small for initials, the fallback icon or a status dot:
|
|
84
|
+
it shows the picture, or the plain background */
|
|
85
|
+
.muka-avatar--4xs .muka-avatar__initials,
|
|
86
|
+
.muka-avatar--4xs .muka-avatar__fallback,
|
|
87
|
+
.muka-avatar--4xs .muka-avatar__status {
|
|
88
|
+
display: none;
|
|
89
|
+
}
|
|
90
|
+
|
|
60
91
|
/* Clickable state */
|
|
61
92
|
.muka-avatar--clickable {
|
|
62
93
|
cursor: pointer;
|
|
@@ -160,6 +191,16 @@
|
|
|
160
191
|
box-sizing: border-box;
|
|
161
192
|
}
|
|
162
193
|
|
|
194
|
+
.muka-avatar--3xs .muka-avatar__status {
|
|
195
|
+
width: var(--avatar-status-size-3xs);
|
|
196
|
+
height: var(--avatar-status-size-3xs);
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.muka-avatar--2xs .muka-avatar__status {
|
|
200
|
+
width: var(--avatar-status-size-2xs);
|
|
201
|
+
height: var(--avatar-status-size-2xs);
|
|
202
|
+
}
|
|
203
|
+
|
|
163
204
|
.muka-avatar--xs .muka-avatar__status {
|
|
164
205
|
width: var(--avatar-status-size-xs);
|
|
165
206
|
height: var(--avatar-status-size-xs);
|
|
@@ -213,44 +254,17 @@
|
|
|
213
254
|
background-color: var(--avatar-color-status-away);
|
|
214
255
|
}
|
|
215
256
|
|
|
216
|
-
/* Avatar Group */
|
|
257
|
+
/* Avatar Group (Figma "Avatar Stack") */
|
|
217
258
|
.muka-avatar-group {
|
|
218
259
|
display: inline-flex;
|
|
219
260
|
align-items: center;
|
|
220
261
|
flex-direction: row;
|
|
221
262
|
}
|
|
222
263
|
|
|
264
|
+
/* Later avatars sit on top of earlier ones (DOM order); a hovered one comes to the front */
|
|
223
265
|
.muka-avatar-group__item {
|
|
224
266
|
position: relative;
|
|
225
267
|
display: inline-flex;
|
|
226
|
-
border: 2px solid var(--color-surface-level1);
|
|
227
|
-
border-radius: inherit;
|
|
228
|
-
}
|
|
229
|
-
|
|
230
|
-
/* Add border radius to match avatar shape */
|
|
231
|
-
.muka-avatar-group__item .muka-avatar--circle {
|
|
232
|
-
border-radius: var(--avatar-radius-circle);
|
|
233
|
-
}
|
|
234
|
-
|
|
235
|
-
.muka-avatar-group__item .muka-avatar--square {
|
|
236
|
-
border-radius: var(--avatar-radius-square);
|
|
237
|
-
}
|
|
238
|
-
|
|
239
|
-
.muka-avatar-group__item .muka-avatar {
|
|
240
|
-
border: none;
|
|
241
|
-
}
|
|
242
|
-
|
|
243
|
-
/* Spacing variants for avatar group */
|
|
244
|
-
.muka-avatar-group--tight .muka-avatar-group__item:not(:first-child) {
|
|
245
|
-
margin-left: calc(var(--avatar-group-spacing-tight));
|
|
246
|
-
}
|
|
247
|
-
|
|
248
|
-
.muka-avatar-group--normal .muka-avatar-group__item:not(:first-child) {
|
|
249
|
-
margin-left: calc(var(--avatar-group-spacing-normal));
|
|
250
|
-
}
|
|
251
|
-
|
|
252
|
-
/* Z-index stacking for overlap effect */
|
|
253
|
-
.muka-avatar-group__item {
|
|
254
268
|
z-index: 0;
|
|
255
269
|
}
|
|
256
270
|
|
|
@@ -258,6 +272,41 @@
|
|
|
258
272
|
z-index: 10;
|
|
259
273
|
}
|
|
260
274
|
|
|
275
|
+
/* Grouped avatars get a ring outside their edge, drawn as a shadow so it
|
|
276
|
+
does not change the avatar's size or the overlap */
|
|
277
|
+
.muka-avatar-group__item .muka-avatar {
|
|
278
|
+
box-shadow: 0 0 0 var(--avatar-group-ring-width) var(--avatar-group-ring-color);
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
/* Overlap. Figma specifies exact values for 48 / 32 / 24px avatars (sm / 2xs / 3xs);
|
|
282
|
+
other sizes use the same proportions: tight 2/3, compact 1/2, spacious 1/3. */
|
|
283
|
+
.muka-avatar-group--4xs { --muka-avatar-group-size: var(--avatar-size-4xs); }
|
|
284
|
+
.muka-avatar-group--3xs { --muka-avatar-group-size: var(--avatar-size-3xs); }
|
|
285
|
+
.muka-avatar-group--2xs { --muka-avatar-group-size: var(--avatar-size-2xs); }
|
|
286
|
+
.muka-avatar-group--xs { --muka-avatar-group-size: var(--avatar-size-xs); }
|
|
287
|
+
.muka-avatar-group--sm { --muka-avatar-group-size: var(--avatar-size-sm); }
|
|
288
|
+
.muka-avatar-group--md { --muka-avatar-group-size: var(--avatar-size-md); }
|
|
289
|
+
.muka-avatar-group--lg { --muka-avatar-group-size: var(--avatar-size-lg); }
|
|
290
|
+
.muka-avatar-group--xl { --muka-avatar-group-size: var(--avatar-size-xl); }
|
|
291
|
+
|
|
292
|
+
.muka-avatar-group--tight { --muka-avatar-group-overlap: calc(var(--muka-avatar-group-size) * 2 / 3); }
|
|
293
|
+
.muka-avatar-group--compact { --muka-avatar-group-overlap: calc(var(--muka-avatar-group-size) / 2); }
|
|
294
|
+
.muka-avatar-group--spacious { --muka-avatar-group-overlap: calc(var(--muka-avatar-group-size) / 3); }
|
|
295
|
+
|
|
296
|
+
.muka-avatar-group--tight.muka-avatar-group--sm { --muka-avatar-group-overlap: var(--avatar-group-overlap-tight-sm); }
|
|
297
|
+
.muka-avatar-group--tight.muka-avatar-group--2xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-tight-2xs); }
|
|
298
|
+
.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--sm { --muka-avatar-group-overlap: var(--avatar-group-overlap-compact-sm); }
|
|
300
|
+
.muka-avatar-group--compact.muka-avatar-group--2xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-compact-2xs); }
|
|
301
|
+
.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--sm { --muka-avatar-group-overlap: var(--avatar-group-overlap-spacious-sm); }
|
|
303
|
+
.muka-avatar-group--spacious.muka-avatar-group--2xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-spacious-2xs); }
|
|
304
|
+
.muka-avatar-group--spacious.muka-avatar-group--3xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-spacious-3xs); }
|
|
305
|
+
|
|
306
|
+
.muka-avatar-group__item:not(:first-child) {
|
|
307
|
+
margin-left: calc(-1 * var(--muka-avatar-group-overlap));
|
|
308
|
+
}
|
|
309
|
+
|
|
261
310
|
/* Overflow avatar styling */
|
|
262
311
|
.muka-avatar--overflow {
|
|
263
312
|
background-color: var(--avatar-color-background-default);
|
|
@@ -26,7 +26,7 @@ function getInitials(name) {
|
|
|
26
26
|
* 4. Default icon - Generic user icon
|
|
27
27
|
*
|
|
28
28
|
* Features:
|
|
29
|
-
* -
|
|
29
|
+
* - 8 sizes: 4xs (16px) to xl (112px)
|
|
30
30
|
* - 2 shapes: circle, square
|
|
31
31
|
* - Status indicators: online, offline, busy, away
|
|
32
32
|
* - Loading and error states
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../../components/Avatar/Avatar.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;AAEb,iCAAwC;AACxC,6DAAgE;AAChE,wBAAsB;
|
|
1
|
+
{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../../components/Avatar/Avatar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -40,12 +40,13 @@ require("./Avatar.css");
|
|
|
40
40
|
/**
|
|
41
41
|
* AvatarGroup Component
|
|
42
42
|
*
|
|
43
|
-
* Displays a horizontal stack of avatars with overlap.
|
|
43
|
+
* Displays a horizontal stack of avatars with overlap (Figma "Avatar Stack").
|
|
44
|
+
* Each avatar gets a ring in the surface colour so the overlap reads clearly.
|
|
44
45
|
* When there are more avatars than `max`, shows remaining count as "+N".
|
|
45
46
|
*
|
|
46
47
|
* Features:
|
|
47
48
|
* - Configurable max visible avatars
|
|
48
|
-
* -
|
|
49
|
+
* - Three spacing modes: tight, compact, spacious
|
|
49
50
|
* - Size propagation to child avatars
|
|
50
51
|
* - Overflow counter display
|
|
51
52
|
*
|
|
@@ -53,7 +54,7 @@ require("./Avatar.css");
|
|
|
53
54
|
* - Uses role="group" with aria-label
|
|
54
55
|
* - Overflow count includes accessible label
|
|
55
56
|
*/
|
|
56
|
-
const AvatarGroup = ({ children, max = 5, size = 'md', spacing = '
|
|
57
|
+
const AvatarGroup = ({ children, max = 5, size = 'md', spacing = 'compact', className = '', 'aria-label': ariaLabel = 'Avatar group', ...props }) => {
|
|
57
58
|
const childArray = react_1.Children.toArray(children);
|
|
58
59
|
const totalCount = childArray.length;
|
|
59
60
|
const visibleCount = Math.min(max, totalCount);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../../../../components/Avatar/AvatarGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAwC;
|
|
1
|
+
{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../../../../components/Avatar/AvatarGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAwC;AAExC,wBAAsB;AAyBtB;;;;;;;;;;;;;;;;GAgBG;AACI,MAAM,WAAW,GAA+B,CAAC,EACtD,QAAQ,EACR,GAAG,GAAG,CAAC,EACP,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,SAAS,EACnB,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,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AApEW,QAAA,WAAW,eAoEtB;AAEF,kBAAe,mBAAW,CAAC"}
|
|
@@ -116,6 +116,39 @@
|
|
|
116
116
|
opacity: 1; /* Remove opacity since we have proper disabled tokens */
|
|
117
117
|
}
|
|
118
118
|
|
|
119
|
+
/* Destructive variant - primary's structure on the solid error fill, for
|
|
120
|
+
irreversible actions. Hover and pressed step away from the label color, so
|
|
121
|
+
contrast never drops (darker in light themes, lighter in dark themes).
|
|
122
|
+
Disabled is neutral grey rather than primary's brand-tinted fill. */
|
|
123
|
+
.muka-button--destructive {
|
|
124
|
+
background-color: var(--button-color-destructive-background-default);
|
|
125
|
+
color: var(--button-color-destructive-foreground-default);
|
|
126
|
+
box-shadow: var(--button-color-destructive-shadow-default);
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.muka-button--destructive:hover:not(:disabled) {
|
|
130
|
+
background-color: var(--button-color-destructive-background-hover);
|
|
131
|
+
color: var(--button-color-destructive-foreground-hover);
|
|
132
|
+
box-shadow: var(--button-color-destructive-shadow-hover);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.muka-button--destructive:active:not(:disabled),
|
|
136
|
+
.muka-button--destructive.muka-button--pressed:not(:disabled),
|
|
137
|
+
.muka-button--destructive[data-state="open"]:not(:disabled),
|
|
138
|
+
.muka-button--destructive[aria-pressed="true"]:not(:disabled) {
|
|
139
|
+
background-color: var(--button-color-destructive-background-pressed);
|
|
140
|
+
color: var(--button-color-destructive-foreground-pressed);
|
|
141
|
+
box-shadow: var(--button-color-destructive-shadow-pressed);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.muka-button--destructive:disabled {
|
|
145
|
+
background-color: var(--button-color-destructive-background-disabled);
|
|
146
|
+
color: var(--button-color-destructive-foreground-disabled);
|
|
147
|
+
box-shadow: var(--button-color-destructive-shadow-disabled);
|
|
148
|
+
cursor: not-allowed;
|
|
149
|
+
opacity: 1;
|
|
150
|
+
}
|
|
151
|
+
|
|
119
152
|
/* Secondary variant - supporting actions, no border, only bottom inner shadow */
|
|
120
153
|
.muka-button--secondary {
|
|
121
154
|
background-color: var(--button-color-secondary-background-default);
|
|
@@ -10,8 +10,8 @@ require("./Button.css");
|
|
|
10
10
|
* Button Component
|
|
11
11
|
*
|
|
12
12
|
* Built using the Muka design token system with support for:
|
|
13
|
-
* -
|
|
14
|
-
* -
|
|
13
|
+
* - 6 variants: primary, secondary, tertiary, ghost, muted, destructive
|
|
14
|
+
* - 4 sizes: sm, md, lg, xl
|
|
15
15
|
* - Interactive states: default, hover, pressed, disabled
|
|
16
16
|
* - Icons with flexible positioning (left, right, or both)
|
|
17
17
|
* - Icon-only buttons (label can be hidden)
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.DataPieChart = void 0;
|
|
3
|
+
exports.DataPieChart = exports.DATA_PIE_CHART_SIZES = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
require("./DataPieChart.css");
|
|
6
|
+
/** Named sizes from the Figma "Data Pie Chart" variants, in pixels. */
|
|
7
|
+
exports.DATA_PIE_CHART_SIZES = { xs: 24, sm: 40, md: 64, lg: 120 };
|
|
6
8
|
/** SVG geometry per variant within a 0 0 100 100 viewBox (cx = cy = 50). */
|
|
7
9
|
const GEOMETRY = {
|
|
8
10
|
donut: { radius: 40, strokeWidth: 16 },
|
|
@@ -17,7 +19,8 @@ const GEOMETRY = {
|
|
|
17
19
|
*
|
|
18
20
|
* Variants: donut (default), pie
|
|
19
21
|
*/
|
|
20
|
-
const DataPieChart = ({ value, max = 100, variant = 'donut', size =
|
|
22
|
+
const DataPieChart = ({ value, max = 100, variant = 'donut', size: sizeProp = 'lg', color, trackColor = 'var(--color-surface-level0)', showValue = false, indeterminate = false, className = '', 'aria-label': ariaLabel, ...props }) => {
|
|
23
|
+
const size = typeof sizeProp === 'number' ? sizeProp : exports.DATA_PIE_CHART_SIZES[sizeProp];
|
|
21
24
|
const { radius, strokeWidth } = GEOMETRY[variant];
|
|
22
25
|
const circumference = 2 * Math.PI * radius;
|
|
23
26
|
// Indeterminate is a donut-only spinner; ignore it for the pie variant.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataPieChart.js","sourceRoot":"","sources":["../../../../components/DataPieChart/DataPieChart.tsx"],"names":[],"mappings":";;;;AACA,8BAA4B;
|
|
1
|
+
{"version":3,"file":"DataPieChart.js","sourceRoot":"","sources":["../../../../components/DataPieChart/DataPieChart.tsx"],"names":[],"mappings":";;;;AACA,8BAA4B;AAE5B,uEAAuE;AAC1D,QAAA,oBAAoB,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,EAAW,CAAC;AA4CjF,4EAA4E;AAC5E,MAAM,QAAQ,GAAG;IACf,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE;IACtC,GAAG,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE;CAC5B,CAAC;AAEX;;;;;;;;GAQG;AACI,MAAM,YAAY,GAAgC,CAAC,EACxD,KAAK,EACL,GAAG,GAAG,GAAG,EACT,OAAO,GAAG,OAAO,EACjB,IAAI,EAAE,QAAQ,GAAG,IAAI,EACrB,KAAK,EACL,UAAU,GAAG,6BAA6B,EAC1C,SAAS,GAAG,KAAK,EACjB,aAAa,GAAG,KAAK,EACrB,SAAS,GAAG,EAAE,EACd,YAAY,EAAE,SAAS,EACvB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,IAAI,GAAG,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,4BAAoB,CAAC,QAAQ,CAAC,CAAC;IACtF,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;IAClD,MAAM,aAAa,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,MAAM,CAAC;IAE3C,wEAAwE;IACxE,MAAM,QAAQ,GAAG,aAAa,IAAI,OAAO,KAAK,OAAO,CAAC;IAEtD,wEAAwE;IACxE,yEAAyE;IACzE,MAAM,aAAa,GACjB,KAAK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAC;IAE3F,MAAM,OAAO,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAClC,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC;IAC3D,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC;IAC3C,MAAM,SAAS,GAAG,QAAQ,GAAG,aAAa,CAAC;IAE3C,MAAM,YAAY,GAAG;QACnB,qBAAqB;QACrB,wBAAwB,OAAO,EAAE;QACjC,QAAQ,IAAI,oCAAoC;QAChD,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,MAAM,KAAK,GACT,SAAS;QACT,CAAC,QAAQ;YACP,CAAC,CAAC,SAAS;YACX,CAAC,CAAC,GAAG,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,WAAW,OAAO,GAAG,CAAC,CAAC;IAErE,6EAA6E;IAC7E,6EAA6E;IAC7E,iFAAiF;IACjF,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO,CACL,iCACE,SAAS,EAAE,YAAY,EACvB,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,EACpC,IAAI,EAAC,KAAK,gBACE,KAAK,KACb,KAAK,aAET,iCACE,SAAS,EAAC,oCAAoC,iBAClC,MAAM,EAClB,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,GACjC,EACF,iCACE,SAAS,EAAC,8BAA8B,iBAC5B,MAAM,EAClB,KAAK,EAAE;wBACL,UAAU,EAAE,6BAA6B,UAAU,UAAU,aAAa,YAAY,aAAa,UAAU;qBAC9G,GACD,IACE,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,iCACE,SAAS,EAAE,YAAY,EACvB,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,EACpC,IAAI,EAAC,KAAK,gBACE,KAAK,KACb,KAAK,aAET,iCAAK,SAAS,EAAC,0BAA0B,EAAC,OAAO,EAAC,aAAa,iBAAa,MAAM,aAEhF,mCACE,SAAS,EAAC,4BAA4B,EACtC,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,CAAC,EAAE,MAAM,EACT,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,UAAU,GAClB,EACD,QAAQ,GAAG,CAAC,IAAI,CACf,mCACE,SAAS,EAAC,8BAA8B,EACxC,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,CAAC,EAAE,MAAM,EACT,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,aAAa,EACrB,eAAe,EAAE,GAAG,SAAS,IAAI,aAAa,GAAG,SAAS,EAAE,EAC5D,gBAAgB,EAAE,CAAC,GACnB,CACH,IACG,EACL,SAAS,IAAI,OAAO,KAAK,OAAO,IAAI,CACnC,kCAAM,SAAS,EAAC,4BAA4B,iBAAa,MAAM,aAC5D,OAAO,SACH,CACR,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AA/GW,QAAA,YAAY,gBA+GvB;AAEF,kBAAe,oBAAY,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/DataPieChart/index.ts"],"names":[],"mappings":";;;;;;AAAA,+
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/DataPieChart/index.ts"],"names":[],"mappings":";;;;;;AAAA,+CAA6F;AAApF,4GAAA,YAAY,OAAA;AACrB,+CAAyC;AAAhC,wHAAA,OAAO,OAAA"}
|
|
@@ -28,12 +28,17 @@
|
|
|
28
28
|
border-bottom: 1px solid var(--tabs-trigger-color-default-border);
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
+
/* Padding: inset the tabs; the divider (border) still spans the full width */
|
|
32
|
+
.muka-tabs--padding-default .muka-tabs__list {
|
|
33
|
+
padding-inline: var(--tabs-list-padding-x);
|
|
34
|
+
}
|
|
35
|
+
|
|
31
36
|
/* Tab Trigger — clean underline style */
|
|
32
37
|
.muka-tabs__trigger {
|
|
33
38
|
display: inline-flex;
|
|
34
39
|
align-items: center;
|
|
35
40
|
justify-content: center;
|
|
36
|
-
gap: var(--spacing-
|
|
41
|
+
gap: var(--spacing-1);
|
|
37
42
|
background: transparent;
|
|
38
43
|
border: none;
|
|
39
44
|
cursor: pointer;
|
|
@@ -46,8 +51,8 @@
|
|
|
46
51
|
color: var(--tabs-trigger-color-default-foreground);
|
|
47
52
|
|
|
48
53
|
/* Default MD size values */
|
|
49
|
-
height:
|
|
50
|
-
padding:
|
|
54
|
+
min-height: var(--tabs-trigger-min-height-md);
|
|
55
|
+
padding: var(--spacing-3);
|
|
51
56
|
font-family: var(--text-label-md-regular-fontFamily);
|
|
52
57
|
font-weight: var(--text-label-md-regular-fontWeight);
|
|
53
58
|
font-size: var(--text-label-md-regular-fontSize);
|
|
@@ -56,8 +61,8 @@
|
|
|
56
61
|
|
|
57
62
|
/* Size Variants */
|
|
58
63
|
.muka-tabs--size-sm .muka-tabs__trigger {
|
|
59
|
-
height:
|
|
60
|
-
padding: 0 var(--spacing-2
|
|
64
|
+
min-height: var(--tabs-trigger-min-height-sm);
|
|
65
|
+
padding: 0 var(--spacing-2);
|
|
61
66
|
font-family: var(--text-label-sm-regular-fontFamily);
|
|
62
67
|
font-weight: var(--text-label-sm-regular-fontWeight);
|
|
63
68
|
font-size: var(--text-label-sm-regular-fontSize);
|
|
@@ -65,8 +70,8 @@
|
|
|
65
70
|
}
|
|
66
71
|
|
|
67
72
|
.muka-tabs--size-lg .muka-tabs__trigger {
|
|
68
|
-
height:
|
|
69
|
-
padding:
|
|
73
|
+
min-height: var(--tabs-trigger-min-height-lg);
|
|
74
|
+
padding: var(--spacing-4);
|
|
70
75
|
font-family: var(--text-label-lg-regular-fontFamily);
|
|
71
76
|
font-weight: var(--text-label-lg-regular-fontWeight);
|
|
72
77
|
font-size: var(--text-label-lg-regular-fontSize);
|
|
@@ -90,8 +95,8 @@
|
|
|
90
95
|
bottom: -1px; /* Overlap the 1px border */
|
|
91
96
|
left: 0;
|
|
92
97
|
right: 0;
|
|
93
|
-
height:
|
|
94
|
-
background-color: var(--tabs-
|
|
98
|
+
height: var(--tabs-indicator-height-md);
|
|
99
|
+
background-color: var(--tabs-indicator-color);
|
|
95
100
|
border-bottom-left-radius: 1px;
|
|
96
101
|
border-bottom-right-radius: 1px;
|
|
97
102
|
border-top-left-radius: 3px;
|
|
@@ -99,6 +104,13 @@
|
|
|
99
104
|
z-index: 3;
|
|
100
105
|
}
|
|
101
106
|
|
|
107
|
+
.muka-tabs--size-sm .muka-tabs__trigger--current::after {
|
|
108
|
+
height: var(--tabs-indicator-height-sm);
|
|
109
|
+
}
|
|
110
|
+
.muka-tabs--size-lg .muka-tabs__trigger--current::after {
|
|
111
|
+
height: var(--tabs-indicator-height-lg);
|
|
112
|
+
}
|
|
113
|
+
|
|
102
114
|
.muka-tabs__trigger--disabled {
|
|
103
115
|
color: var(--tabs-trigger-color-disabled-foreground);
|
|
104
116
|
cursor: not-allowed;
|
|
@@ -109,18 +121,29 @@
|
|
|
109
121
|
outline-offset: -2px;
|
|
110
122
|
}
|
|
111
123
|
|
|
112
|
-
/*
|
|
113
|
-
|
|
124
|
+
/* Label: Figma pads the label 8px either side, so with the 4px gap a leading
|
|
125
|
+
item sits 12px from the text */
|
|
126
|
+
.muka-tabs__label {
|
|
127
|
+
padding: 0 var(--spacing-2);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
/* Leading item: icon, avatar, avatar group or data pie chart */
|
|
131
|
+
.muka-tabs__leading {
|
|
114
132
|
display: flex;
|
|
115
133
|
align-items: center;
|
|
116
134
|
justify-content: center;
|
|
135
|
+
flex-shrink: 0;
|
|
117
136
|
}
|
|
118
137
|
.muka-tabs__trigger .muka-icon {
|
|
119
138
|
color: inherit;
|
|
120
139
|
}
|
|
121
|
-
|
|
122
|
-
.muka-tabs--size-
|
|
123
|
-
.muka-tabs--size-
|
|
140
|
+
/* Icon sizes only: avatars and pie charts are sized through their size prop */
|
|
141
|
+
.muka-tabs--size-sm .muka-tabs__leading > svg,
|
|
142
|
+
.muka-tabs--size-sm .muka-tabs__leading > .muka-icon svg { width: 16px; height: 16px; }
|
|
143
|
+
.muka-tabs--size-md .muka-tabs__leading > svg,
|
|
144
|
+
.muka-tabs--size-md .muka-tabs__leading > .muka-icon svg { width: 20px; height: 20px; }
|
|
145
|
+
.muka-tabs--size-lg .muka-tabs__leading > svg,
|
|
146
|
+
.muka-tabs--size-lg .muka-tabs__leading > .muka-icon svg { width: 24px; height: 24px; }
|
|
124
147
|
|
|
125
148
|
/* Responsive Scroll behavior on small screens */
|
|
126
149
|
@media (max-width: 768px) {
|
|
@@ -37,6 +37,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
37
37
|
exports.TabPanel = exports.Tab = exports.TabList = exports.Tabs = void 0;
|
|
38
38
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
39
39
|
const react_1 = __importStar(require("react"));
|
|
40
|
+
const Avatar_1 = require("../Avatar");
|
|
41
|
+
const DataPieChart_1 = require("../DataPieChart");
|
|
40
42
|
require("./Tabs.css");
|
|
41
43
|
const TabsContext = (0, react_1.createContext)(null);
|
|
42
44
|
const useTabsContext = () => {
|
|
@@ -60,7 +62,7 @@ const useTabsContext = () => {
|
|
|
60
62
|
*
|
|
61
63
|
* @see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
|
|
62
64
|
*/
|
|
63
|
-
const Tabs = ({ children, defaultValue = '', value, onChange, size = 'md', alignment = 'left', className = '', }) => {
|
|
65
|
+
const Tabs = ({ children, defaultValue = '', value, onChange, size = 'md', alignment = 'left', padding = 'default', className = '', }) => {
|
|
64
66
|
const [internalValue, setInternalValue] = (0, react_1.useState)(defaultValue);
|
|
65
67
|
const activeValue = value !== undefined ? value : internalValue;
|
|
66
68
|
const setActiveValue = (0, react_1.useCallback)((newValue) => {
|
|
@@ -73,9 +75,10 @@ const Tabs = ({ children, defaultValue = '', value, onChange, size = 'md', align
|
|
|
73
75
|
'muka-tabs',
|
|
74
76
|
`muka-tabs--size-${size}`,
|
|
75
77
|
`muka-tabs--align-${alignment}`,
|
|
78
|
+
`muka-tabs--padding-${padding}`,
|
|
76
79
|
className,
|
|
77
80
|
].filter(Boolean).join(' ');
|
|
78
|
-
return ((0, jsx_runtime_1.jsx)(TabsContext.Provider, { value: { activeValue, setActiveValue }, children: (0, jsx_runtime_1.jsx)("div", { className: rootClasses, children: children }) }));
|
|
81
|
+
return ((0, jsx_runtime_1.jsx)(TabsContext.Provider, { value: { activeValue, setActiveValue, size }, children: (0, jsx_runtime_1.jsx)("div", { className: rootClasses, children: children }) }));
|
|
79
82
|
};
|
|
80
83
|
exports.Tabs = Tabs;
|
|
81
84
|
const TabList = ({ children, className = '' }) => {
|
|
@@ -121,8 +124,14 @@ const TabList = ({ children, className = '' }) => {
|
|
|
121
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 }));
|
|
122
125
|
};
|
|
123
126
|
exports.TabList = TabList;
|
|
124
|
-
|
|
125
|
-
|
|
127
|
+
/** Leading-item sizes per tab size (Figma "Tab": icon 16 / 20 / 24). */
|
|
128
|
+
const LEADING_SIZES = {
|
|
129
|
+
sm: { avatar: '4xs', pieChart: 16 },
|
|
130
|
+
md: { avatar: '2xs', pieChart: 'xs' },
|
|
131
|
+
lg: { avatar: 'sm', pieChart: 'sm' },
|
|
132
|
+
};
|
|
133
|
+
const Tab = ({ value, children, leading, icon, disabled = false, className = '', }) => {
|
|
134
|
+
const { activeValue, setActiveValue, size } = useTabsContext();
|
|
126
135
|
const isActive = activeValue === value;
|
|
127
136
|
const tabClasses = [
|
|
128
137
|
'muka-tabs__trigger',
|
|
@@ -130,13 +139,24 @@ const Tab = ({ value, children, icon, disabled = false, className = '', }) => {
|
|
|
130
139
|
disabled && 'muka-tabs__trigger--disabled',
|
|
131
140
|
className,
|
|
132
141
|
].filter(Boolean).join(' ');
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
142
|
+
const leadingItem = leading ?? icon;
|
|
143
|
+
let renderedLeading = leadingItem;
|
|
144
|
+
if (react_1.default.isValidElement(leadingItem)) {
|
|
145
|
+
const isAvatar = leadingItem.type === Avatar_1.Avatar || leadingItem.type === Avatar_1.AvatarGroup;
|
|
146
|
+
const isPieChart = leadingItem.type === DataPieChart_1.DataPieChart;
|
|
147
|
+
if (isAvatar || isPieChart) {
|
|
148
|
+
// Size media to the tab, unless the consumer chose a size
|
|
149
|
+
if (leadingItem.props.size === undefined) {
|
|
150
|
+
renderedLeading = react_1.default.cloneElement(leadingItem, {
|
|
151
|
+
size: isAvatar ? LEADING_SIZES[size].avatar : LEADING_SIZES[size].pieChart,
|
|
152
|
+
});
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
else {
|
|
156
|
+
renderedLeading = react_1.default.cloneElement(leadingItem, { variant: isActive ? 'fill' : 'line' });
|
|
157
|
+
}
|
|
138
158
|
}
|
|
139
|
-
return ((0, jsx_runtime_1.jsxs)("button", { className: tabClasses, role: "tab", "aria-selected": isActive, "aria-controls": `tabpanel-${value}`, id: `tab-${value}`, tabIndex: isActive ? 0 : -1, disabled: disabled, onClick: () => !disabled && setActiveValue(value), children: [
|
|
159
|
+
return ((0, jsx_runtime_1.jsxs)("button", { className: tabClasses, role: "tab", "aria-selected": isActive, "aria-controls": `tabpanel-${value}`, id: `tab-${value}`, tabIndex: isActive ? 0 : -1, disabled: disabled, onClick: () => !disabled && setActiveValue(value), children: [renderedLeading && ((0, jsx_runtime_1.jsx)("span", { className: "muka-tabs__leading", "aria-hidden": "true", children: renderedLeading })), (0, jsx_runtime_1.jsx)("span", { className: "muka-tabs__label", children: children })] }));
|
|
140
160
|
};
|
|
141
161
|
exports.Tab = Tab;
|
|
142
162
|
const TabPanel = ({ value, children, className = '', }) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../../components/Tabs/Tabs.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEb,+CAAmG;AACnG,sBAAoB;
|
|
1
|
+
{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../../components/Tabs/Tabs.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../components/index.ts"],"names":[],"mappings":";;;;;AAAA,gCAAgC;AAChC,mCAAoD;AAA3C,gGAAA,MAAM,OAAA;AACf,uCAA0D;AAAjD,oGAAA,QAAQ,OAAA;AACjB,iCAAiD;AAAxC,8FAAA,KAAK,OAAA;AACd,+BASgB;AARd,4FAAA,IAAI,OAAA;AAEJ,+FAAA,OAAO,OAAA;AAOT,6CAAmE;AAA1D,0GAAA,WAAW,OAAA;AACpB,+CAAsE;AAA7D,4GAAA,YAAY,OAAA;AACrB,+BAA8C;AAArC,4FAAA,IAAI,OAAA;AACb,iCAAiD;AAAxC,8FAAA,KAAK,OAAA;AACd,+BASgB;AARd,4FAAA,IAAI,OAAA;AAKJ,oGAAA,YAAY,OAAA;AACZ,2GAAA,mBAAmB,OAAA;AAGrB,+BAA8C;AAArC,4FAAA,IAAI,OAAA;AACb,qCAAuD;AAA9C,kGAAA,OAAO,OAAA;AAChB,mCAAuE;AAA9D,gGAAA,MAAM,OAAA;AACf,mDAI0B;AAHxB,gHAAA,cAAc,OAAA;AAIhB,+BAAsD;AAA7C,4FAAA,IAAI,OAAA;AAAE,+FAAA,OAAO,OAAA;AAAE,2FAAA,GAAG,OAAA;AAAE,gGAAA,QAAQ,OAAA;AAErC,iCAAiD;AAAxC,8FAAA,KAAK,OAAA;AACd,uCAA0D;AAAjD,oGAAA,QAAQ,OAAA;AACjB,mCAAoD;AAA3C,gGAAA,MAAM,OAAA;AACf,+CAAsE;AAA7D,4GAAA,YAAY,OAAA;AACrB,yCAA6D;AAApD,sGAAA,SAAS,OAAA;AAClB,iCAAiD;AAAxC,8FAAA,KAAK,OAAA;AACd,iCAAiD;AAAxC,8FAAA,KAAK,OAAA;AACd,2CAAgE;AAAvD,wGAAA,UAAU,OAAA;AACnB,qDAAyG;AAAhG,kHAAA,eAAe,OAAA;AACxB,yDAK6B;AAJ3B,sHAAA,iBAAiB,OAAA;AAKnB,mCAAsF;AAA7E,gGAAA,MAAM,OAAA;AAAoB,oGAAA,UAAU,OAAA;AAC7C,yCAAmG;AAA1F,sGAAA,SAAS,OAAA;AAAE,yGAAA,YAAY,OAAA;AAChC,mCAAoD;AAA3C,gGAAA,MAAM,OAAA;AACf,+BAA8C;AAArC,4FAAA,IAAI,OAAA;AACb,uCAA0D;AAAjD,oGAAA,QAAQ,OAAA;AACjB,+DAA8F;AAArF,4HAAA,oBAAoB,OAAA;AAC7B,qCAAuD;AAA9C,kGAAA,OAAO,OAAA;AAChB,yCAA6D;AAApD,sGAAA,SAAS,OAAA;AAClB,iCAAiD;AAAxC,8FAAA,KAAK,OAAA;AACd,6CAAmE;AAA1D,0GAAA,WAAW,OAAA;AACpB,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../components/index.ts"],"names":[],"mappings":"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"}
|