@manakind/manuia-ui 0.15.0 → 0.16.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/action-item/action-item.css +61 -7
- package/dist/action-item/action-item.d.ts +3 -2
- package/dist/action-item/action-item.d.ts.map +1 -1
- package/dist/action-item/action-item.js +3 -2
- package/dist/action-item/action-item.js.map +1 -1
- package/dist/action-list/action-list.css +1 -1
- package/dist/category-card/category-card.css +1 -1
- package/dist/focus-item/focus-item.css +11 -6
- package/dist/focus-list/focus-list.css +1 -1
- package/dist/goal-card/goal-card.css +6 -1
- package/dist/goal-card/goal-card.d.ts.map +1 -1
- package/dist/goal-card/goal-card.js +1 -10
- package/dist/goal-card/goal-card.js.map +1 -1
- package/dist/goal-list/goal-list.css +1 -1
- package/dist/goal-list-item/goal-list-item.css +11 -7
- package/dist/goal-status-menu/goal-status-menu.css +0 -45
- package/dist/goal-status-menu/goal-status-menu.d.ts +1 -6
- package/dist/goal-status-menu/goal-status-menu.d.ts.map +1 -1
- package/dist/goal-status-menu/goal-status-menu.js +4 -4
- package/dist/goal-status-menu/goal-status-menu.js.map +1 -1
- package/package.json +3 -3
|
@@ -5,6 +5,12 @@
|
|
|
5
5
|
* narrow column collapses the same way a list on a phone does.
|
|
6
6
|
*/
|
|
7
7
|
container: mui-action-item / inline-size;
|
|
8
|
+
|
|
9
|
+
/*
|
|
10
|
+
* The second line sits well clear of the facts: the gap the column
|
|
11
|
+
* already holds plus this margin, 24px.
|
|
12
|
+
*/
|
|
13
|
+
--mui-action-item-footer-space: var(--semantic-space-gap-relaxed);
|
|
8
14
|
display: grid;
|
|
9
15
|
grid-template-columns: minmax(0, 1fr);
|
|
10
16
|
gap: var(--semantic-space-gap-tight);
|
|
@@ -34,14 +40,23 @@
|
|
|
34
40
|
gap: var(--semantic-space-gap) var(--semantic-space-gap-relaxed);
|
|
35
41
|
}
|
|
36
42
|
|
|
43
|
+
/*
|
|
44
|
+
* The rhythm groups the card: the title, then its facts held close
|
|
45
|
+
* together, then the controls set apart from both.
|
|
46
|
+
*/
|
|
37
47
|
& .mui-action-item__main {
|
|
38
48
|
display: flex;
|
|
39
49
|
flex: 1 1 0;
|
|
40
50
|
flex-direction: column;
|
|
41
|
-
gap: var(--semantic-space-gap
|
|
51
|
+
gap: var(--semantic-space-gap);
|
|
42
52
|
min-width: 0;
|
|
43
53
|
}
|
|
44
54
|
|
|
55
|
+
/* Set on what follows the title, so a title with nothing under it keeps no space. */
|
|
56
|
+
& .mui-action-item__title + :is(.mui-action-item__details, .mui-action-item__categories) {
|
|
57
|
+
margin-block-start: var(--semantic-space-gap);
|
|
58
|
+
}
|
|
59
|
+
|
|
45
60
|
&.mui-action-item--completed .mui-action-item__title {
|
|
46
61
|
--ds-card-text: var(--ds-card-text-muted);
|
|
47
62
|
text-decoration: line-through;
|
|
@@ -51,7 +66,7 @@
|
|
|
51
66
|
display: flex;
|
|
52
67
|
flex-wrap: wrap;
|
|
53
68
|
align-items: center;
|
|
54
|
-
gap: var(--semantic-space-gap
|
|
69
|
+
gap: var(--semantic-space-gap) var(--semantic-space-gap-relaxed);
|
|
55
70
|
margin: 0;
|
|
56
71
|
color: var(--semantic-color-text-muted);
|
|
57
72
|
font-size: var(--primitives-font-size-xs);
|
|
@@ -69,6 +84,7 @@
|
|
|
69
84
|
flex-wrap: wrap;
|
|
70
85
|
align-items: center;
|
|
71
86
|
gap: var(--semantic-space-gap);
|
|
87
|
+
margin-block-start: var(--mui-action-item-footer-space);
|
|
72
88
|
}
|
|
73
89
|
|
|
74
90
|
& .mui-action-item__controls {
|
|
@@ -83,13 +99,36 @@
|
|
|
83
99
|
|
|
84
100
|
/*
|
|
85
101
|
* Narrow: the row wraps. The toggle, the title and the checkbox keep the
|
|
86
|
-
* first line
|
|
87
|
-
*
|
|
102
|
+
* first line. The details and categories follow, lined up under the title
|
|
103
|
+
* rather than the toggle, so the text keeps one left edge. The second
|
|
104
|
+
* line and the controls make a footer across the card's full width, the
|
|
105
|
+
* controls at its end, so a phone spends no line on two icon buttons.
|
|
88
106
|
*/
|
|
89
107
|
@container mui-action-item (max-width: 36rem) {
|
|
90
108
|
& .mui-action-item__row {
|
|
109
|
+
--mui-action-item-indent: 0px;
|
|
91
110
|
flex-wrap: wrap;
|
|
92
|
-
row-gap: var(--semantic-space-gap
|
|
111
|
+
row-gap: var(--semantic-space-gap);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
/*
|
|
115
|
+
* A zero-height full line ahead of everything ordered after the title's
|
|
116
|
+
* line. The title's flex basis is 0, so without it a row with no
|
|
117
|
+
* details or categories pulls the footer up beside the title. Its
|
|
118
|
+
* negative margin takes back the row gap its empty line adds.
|
|
119
|
+
*/
|
|
120
|
+
& .mui-action-item__row::before {
|
|
121
|
+
content: "";
|
|
122
|
+
flex: 0 0 100%;
|
|
123
|
+
order: 1;
|
|
124
|
+
margin-block-start: calc(-1 * var(--semantic-space-gap));
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
& .mui-action-item__row:has(> .mui-action-item__complete) {
|
|
128
|
+
--mui-action-item-indent: calc(
|
|
129
|
+
var(--ds-button-size-md-icon-only-size) +
|
|
130
|
+
var(--semantic-space-gap-relaxed)
|
|
131
|
+
);
|
|
93
132
|
}
|
|
94
133
|
|
|
95
134
|
& .mui-action-item__main {
|
|
@@ -107,13 +146,28 @@
|
|
|
107
146
|
& .mui-action-item__categories,
|
|
108
147
|
& .mui-action-item__secondary,
|
|
109
148
|
& .mui-action-item__controls {
|
|
110
|
-
flex: 0 0 100%;
|
|
111
149
|
order: 1;
|
|
112
150
|
max-width: none;
|
|
113
151
|
}
|
|
114
152
|
|
|
153
|
+
/* Basis plus margin make a full line each, indented under the title. */
|
|
154
|
+
& .mui-action-item__details,
|
|
155
|
+
& .mui-action-item__categories {
|
|
156
|
+
flex: 0 0 calc(100% - var(--mui-action-item-indent));
|
|
157
|
+
margin-inline-start: var(--mui-action-item-indent);
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
& .mui-action-item__secondary {
|
|
161
|
+
flex: 1 1 auto;
|
|
162
|
+
align-self: center;
|
|
163
|
+
}
|
|
164
|
+
|
|
115
165
|
& .mui-action-item__controls {
|
|
116
|
-
|
|
166
|
+
flex: 0 1 auto;
|
|
167
|
+
align-self: center;
|
|
168
|
+
max-width: 100%;
|
|
169
|
+
margin-block-start: var(--mui-action-item-footer-space);
|
|
170
|
+
margin-inline-start: auto;
|
|
117
171
|
}
|
|
118
172
|
|
|
119
173
|
& .mui-action-item__select {
|
|
@@ -79,8 +79,9 @@ export interface ActionItemProps extends Omit<ComponentProps<'li'>, 'title' | 'c
|
|
|
79
79
|
* keeps its change idempotent.
|
|
80
80
|
*
|
|
81
81
|
* Wide, the row reads left to right. Narrow, the toggle, the title and the
|
|
82
|
-
* checkbox share the first line; the details
|
|
83
|
-
*
|
|
82
|
+
* checkbox share the first line; the details and categories follow, lined up
|
|
83
|
+
* under the title, and the second line and the controls share a footer
|
|
84
|
+
* across the full width. Attributes other than the props land
|
|
84
85
|
* on the `<li>`: a virtualised list gives each row `aria-setsize` and
|
|
85
86
|
* `aria-posinset`, so the count a screen reader hears is the whole list's.
|
|
86
87
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"action-item.d.ts","sourceRoot":"","sources":["../../src/action-item/action-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,YAAY,EAOjB,KAAK,UAAU,EAChB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAkB,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,mBAAmB,CAAC;AAE3B,gGAAgG;AAChG,MAAM,WAAW,gBAAgB;IAC/B,kEAAkE;IAClE,KAAK,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAED,4GAA4G;AAC5G,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC,YAAY,EAAE,OAAO,GAAG,SAAS,CAAC,CAAC;AAE5E,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,WAAW,CAAC;IACtE,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAC;IACd,uFAAuF;IACvF,SAAS,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,+DAA+D;IAC/D,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,gEAAgE;IAChE,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC7B,wDAAwD;IACxD,UAAU,CAAC,EAAE,YAAY,EAAE,CAAC;IAC5B,yGAAyG;IACzG,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2GAA2G;IAC3G,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yGAAyG;IACzG,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,oFAAoF;IACpF,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC7B,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED
|
|
1
|
+
{"version":3,"file":"action-item.d.ts","sourceRoot":"","sources":["../../src/action-item/action-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,YAAY,EAOjB,KAAK,UAAU,EAChB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAkB,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,mBAAmB,CAAC;AAE3B,gGAAgG;AAChG,MAAM,WAAW,gBAAgB;IAC/B,kEAAkE;IAClE,KAAK,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAED,4GAA4G;AAC5G,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC,YAAY,EAAE,OAAO,GAAG,SAAS,CAAC,CAAC;AAE5E,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,WAAW,CAAC;IACtE,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAC;IACd,uFAAuF;IACvF,SAAS,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,+DAA+D;IAC/D,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,gEAAgE;IAChE,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC7B,wDAAwD;IACxD,UAAU,CAAC,EAAE,YAAY,EAAE,CAAC;IAC5B,yGAAyG;IACzG,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2GAA2G;IAC3G,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yGAAyG;IACzG,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,oFAAoF;IACpF,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC7B,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,SAAS,EACT,iBAAiB,EACjB,YAAY,EACZ,OAAY,EACZ,UAAe,EACf,oBAAwB,EACxB,IAAI,EACJ,QAAkB,EAClB,QAAgB,EAChB,gBAAgB,EAChB,QAAQ,EACR,SAAS,EACT,OAAc,EACd,SAAS,EACT,QAAQ,EACR,GAAG,aAAa,EACjB,EAAE,eAAe,2CAmFjB"}
|
|
@@ -15,8 +15,9 @@ import './action-item.css';
|
|
|
15
15
|
* keeps its change idempotent.
|
|
16
16
|
*
|
|
17
17
|
* Wide, the row reads left to right. Narrow, the toggle, the title and the
|
|
18
|
-
* checkbox share the first line; the details
|
|
19
|
-
*
|
|
18
|
+
* checkbox share the first line; the details and categories follow, lined up
|
|
19
|
+
* under the title, and the second line and the controls share a footer
|
|
20
|
+
* across the full width. Attributes other than the props land
|
|
20
21
|
* on the `<li>`: a virtualised list gives each row `aria-setsize` and
|
|
21
22
|
* `aria-posinset`, so the count a screen reader hears is the whole list's.
|
|
22
23
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"action-item.js","sourceRoot":"","sources":["../../src/action-item/action-item.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,KAAK,EAEL,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,EAAE,EACF,IAAI,EACJ,UAAU,GAEX,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,cAAc,EAAqB,MAAM,oBAAoB,CAAC;AACvE,OAAO,mBAAmB,CAAC;AAsE3B
|
|
1
|
+
{"version":3,"file":"action-item.js","sourceRoot":"","sources":["../../src/action-item/action-item.tsx"],"names":[],"mappings":"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"}
|
|
@@ -104,7 +104,7 @@
|
|
|
104
104
|
color: var(--semantic-color-text-muted);
|
|
105
105
|
font-size: var(--primitives-font-size-xs);
|
|
106
106
|
font-weight: var(--primitives-font-weight-semibold);
|
|
107
|
-
letter-spacing:
|
|
107
|
+
letter-spacing: var(--semantic-letter-spacing-label);
|
|
108
108
|
line-height: var(--primitives-line-height-tight);
|
|
109
109
|
text-transform: uppercase;
|
|
110
110
|
}
|
|
@@ -35,11 +35,12 @@
|
|
|
35
35
|
gap: var(--semantic-space-gap) var(--semantic-space-gap-relaxed);
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
+
/* The title, then its facts and actions held close together, as on ActionItem. */
|
|
38
39
|
& .mui-focus-item__main {
|
|
39
40
|
grid-area: main;
|
|
40
41
|
display: flex;
|
|
41
42
|
flex-direction: column;
|
|
42
|
-
gap: var(--semantic-space-gap
|
|
43
|
+
gap: var(--semantic-space-gap);
|
|
43
44
|
min-width: 0;
|
|
44
45
|
}
|
|
45
46
|
|
|
@@ -47,11 +48,16 @@
|
|
|
47
48
|
--ds-card-text: var(--ds-card-text-muted);
|
|
48
49
|
}
|
|
49
50
|
|
|
51
|
+
/* Set on what follows the title, as on ActionItem. */
|
|
52
|
+
& .mui-focus-item__title + .mui-focus-item__details {
|
|
53
|
+
margin-block-start: var(--semantic-space-gap);
|
|
54
|
+
}
|
|
55
|
+
|
|
50
56
|
& .mui-focus-item__details {
|
|
51
57
|
display: flex;
|
|
52
58
|
flex-wrap: wrap;
|
|
53
59
|
align-items: center;
|
|
54
|
-
gap: var(--semantic-space-gap
|
|
60
|
+
gap: var(--semantic-space-gap) var(--semantic-space-gap-relaxed);
|
|
55
61
|
margin: 0;
|
|
56
62
|
color: var(--semantic-color-text-muted);
|
|
57
63
|
font-size: var(--primitives-font-size-xs);
|
|
@@ -68,11 +74,11 @@
|
|
|
68
74
|
& .mui-focus-item__actions {
|
|
69
75
|
display: flex;
|
|
70
76
|
flex-direction: column;
|
|
71
|
-
gap: var(--semantic-space-gap
|
|
77
|
+
gap: var(--semantic-space-gap);
|
|
72
78
|
margin: 0;
|
|
73
79
|
padding-inline-start: var(--semantic-space-padding);
|
|
74
80
|
color: var(--semantic-color-text-muted);
|
|
75
|
-
font-size: var(--primitives-font-size-
|
|
81
|
+
font-size: var(--primitives-font-size-xs);
|
|
76
82
|
}
|
|
77
83
|
|
|
78
84
|
& .mui-focus-item__categories {
|
|
@@ -91,7 +97,7 @@
|
|
|
91
97
|
grid-template-columns: minmax(0, 1fr) fit-content(clamp(50%, 8rem, 60%));
|
|
92
98
|
grid-template-areas: none;
|
|
93
99
|
align-items: start;
|
|
94
|
-
row-gap: var(--semantic-space-gap
|
|
100
|
+
row-gap: var(--semantic-space-gap);
|
|
95
101
|
}
|
|
96
102
|
|
|
97
103
|
& .mui-focus-item__main {
|
|
@@ -113,7 +119,6 @@
|
|
|
113
119
|
|
|
114
120
|
& .mui-focus-item__categories {
|
|
115
121
|
justify-content: flex-start;
|
|
116
|
-
margin-block-start: calc(var(--semantic-space-gap) - var(--semantic-space-gap-tight));
|
|
117
122
|
}
|
|
118
123
|
}
|
|
119
124
|
}
|
|
@@ -262,6 +262,8 @@
|
|
|
262
262
|
height: var(--mui-tier-emblem-size);
|
|
263
263
|
border-radius: var(--semantic-radius-pill);
|
|
264
264
|
color: var(--mui-tier-emblem-icon);
|
|
265
|
+
/* The glyph is sized by its tier, through the icon's own contract key. */
|
|
266
|
+
--ds-icon-size-md: var(--mui-tier-emblem-glyph-size);
|
|
265
267
|
/*
|
|
266
268
|
* Rare has no mid stop; its fallback is the sRGB midpoint, which draws
|
|
267
269
|
* exactly the two-stop gradient. `in srgb` pins the space so that a
|
|
@@ -456,7 +458,7 @@
|
|
|
456
458
|
& .mui-goal-card__milestones-label {
|
|
457
459
|
font-weight: var(--primitives-font-weight-semibold);
|
|
458
460
|
font-size: var(--primitives-font-size-xs);
|
|
459
|
-
letter-spacing:
|
|
461
|
+
letter-spacing: var(--semantic-letter-spacing-label);
|
|
460
462
|
line-height: var(--primitives-line-height-tight);
|
|
461
463
|
text-transform: uppercase;
|
|
462
464
|
}
|
|
@@ -484,6 +486,7 @@
|
|
|
484
486
|
--mui-tier-emblem-to: var(--component-goal-card-legendary-emblem-to);
|
|
485
487
|
--mui-tier-emblem-icon: var(--component-goal-card-legendary-emblem-icon);
|
|
486
488
|
--mui-tier-emblem-size: var(--component-goal-card-legendary-emblem-size);
|
|
489
|
+
--mui-tier-emblem-glyph-size: var(--component-goal-card-legendary-emblem-glyph-size);
|
|
487
490
|
--mui-tier-emblem-ring-color: var(--mui-tier-accent);
|
|
488
491
|
--mui-tier-emblem-ring-width: 2px;
|
|
489
492
|
--mui-tier-emblem-ring-alpha: 50%;
|
|
@@ -518,6 +521,7 @@
|
|
|
518
521
|
--mui-tier-emblem-to: var(--component-goal-card-epic-emblem-to);
|
|
519
522
|
--mui-tier-emblem-icon: var(--component-goal-card-epic-emblem-icon);
|
|
520
523
|
--mui-tier-emblem-size: var(--component-goal-card-epic-emblem-size);
|
|
524
|
+
--mui-tier-emblem-glyph-size: var(--component-goal-card-epic-emblem-glyph-size);
|
|
521
525
|
--mui-tier-emblem-ring-color: var(--mui-tier-accent);
|
|
522
526
|
--mui-tier-emblem-ring-width: 1px;
|
|
523
527
|
--mui-tier-emblem-ring-alpha: 40%;
|
|
@@ -551,6 +555,7 @@
|
|
|
551
555
|
--mui-tier-emblem-to: var(--component-goal-card-rare-emblem-to);
|
|
552
556
|
--mui-tier-emblem-icon: var(--component-goal-card-rare-emblem-icon);
|
|
553
557
|
--mui-tier-emblem-size: var(--component-goal-card-rare-emblem-size);
|
|
558
|
+
--mui-tier-emblem-glyph-size: var(--component-goal-card-rare-emblem-glyph-size);
|
|
554
559
|
--mui-tier-emblem-ring-color: var(--component-goal-card-rare-emblem-ring-color);
|
|
555
560
|
--mui-tier-emblem-ring-width: 1px;
|
|
556
561
|
--mui-tier-emblem-ring-alpha: 40%;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"goal-card.d.ts","sourceRoot":"","sources":["../../src/goal-card/goal-card.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"goal-card.d.ts","sourceRoot":"","sources":["../../src/goal-card/goal-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,UAAU,EAEhB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAkB,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,EAAE,KAAK,UAAU,EAAkB,MAAM,qBAAqB,CAAC;AACtE,OAAO,iBAAiB,CAAC;AAEzB,uDAAuD;AACvD,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEhF,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,aAAa;IAC5B,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gDAAgD;IAChD,IAAI,EAAE,QAAQ,CAAC;IACf,yCAAyC;IACzC,MAAM,EAAE,UAAU,CAAC;IACnB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;;OAIG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAC9C,+FAA+F;IAC/F,mBAAmB,CAAC,EAAE,UAAU,CAAC;IACjC,mGAAmG;IACnG,uBAAuB,CAAC,EAAE,UAAU,CAAC;IACrC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,WAAW,CAAC,aAAa,CAAC,CAAC;IAC3C;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uCAAuC;IACvC,UAAU,CAAC,EAAE,YAAY,EAAE,CAAC;IAC5B,oEAAoE;IACpE,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,+DAA+D;IAC/D,UAAU,CAAC,EAAE,aAAa,EAAE,CAAC;IAC7B,yGAAyG;IACzG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,mEAAmE;IACnE,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B,uFAAuF;IACvF,sBAAsB,CAAC,EAAE,UAAU,CAAC;IACpC;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC7B,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAWD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,MAAM,EACN,UAAU,EACV,cAAc,EACd,mBAAmB,EACnB,uBAAuB,EACvB,IAAI,EACJ,aAAa,EAAE,aAAmB,EAClC,WAAW,EACX,UAAe,EACf,oBAAwB,EACxB,UAAU,EACV,UAAU,EACV,QAAQ,EACR,aAAa,EACb,sBAAuC,EACvC,UAAU,EACV,OAAc,EACd,SAAS,GACV,EAAE,aAAa,2CAyHf"}
|
|
@@ -3,15 +3,6 @@ import { Card, CardContent, CardHeader, CardLink, CardTitle, cx, Icon, Progress,
|
|
|
3
3
|
import { GoalCategories } from '../goal-categories';
|
|
4
4
|
import { GoalStatusMenu } from '../goal-status-menu';
|
|
5
5
|
import './goal-card.css';
|
|
6
|
-
/**
|
|
7
|
-
* Emblem glyph size per tier, mirroring the product (20 / 16 / 14). The ring
|
|
8
|
-
* around it is sized in CSS from the tier tokens; this is the icon inside it.
|
|
9
|
-
*/
|
|
10
|
-
const TIER_EMBLEM_ICON_SIZE = {
|
|
11
|
-
'5 Year': 'lg',
|
|
12
|
-
'1 Year': 'md',
|
|
13
|
-
Quarterly: 'sm',
|
|
14
|
-
};
|
|
15
6
|
/** Maps a timeframe to its CSS tier modifier. */
|
|
16
7
|
const TIER_CLASS = {
|
|
17
8
|
'5 Year': 'legendary',
|
|
@@ -59,7 +50,7 @@ export function GoalCard({ title, description, type, status, statusIcon, onStatu
|
|
|
59
50
|
* treatment stays entirely in `goal-card.css` — one place to read what a
|
|
60
51
|
* tier looks like, and no second definition here to drift from it.
|
|
61
52
|
*/
|
|
62
|
-
return (_jsxs(Card, { interactive: Boolean(href), className: cx('mui-goal-card', `mui-goal-card--${TIER_CLASS[type]}`, className), children: [_jsx("span", { className: "mui-goal-card__ornament", "aria-hidden": "true" }), _jsxs("span", { className: "mui-goal-card__corners", "aria-hidden": "true", children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {}), _jsx("span", {})] }), _jsxs(CardHeader, { className: "mui-goal-card__header", children: [_jsxs("div", { className: "mui-goal-card__meta", children: [_jsxs("span", { className: "mui-goal-card__meta-start", children: [emblemIcon && (_jsx("span", { className: "mui-goal-card__emblem", "aria-hidden": "true", children: _jsx(Icon, { source: emblemIcon, size:
|
|
53
|
+
return (_jsxs(Card, { interactive: Boolean(href), className: cx('mui-goal-card', `mui-goal-card--${TIER_CLASS[type]}`, className), children: [_jsx("span", { className: "mui-goal-card__ornament", "aria-hidden": "true" }), _jsxs("span", { className: "mui-goal-card__corners", "aria-hidden": "true", children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {}), _jsx("span", {})] }), _jsxs(CardHeader, { className: "mui-goal-card__header", children: [_jsxs("div", { className: "mui-goal-card__meta", children: [_jsxs("span", { className: "mui-goal-card__meta-start", children: [emblemIcon && (_jsx("span", { className: "mui-goal-card__emblem", "aria-hidden": "true", children: _jsx(Icon, { source: emblemIcon, size: "md", decorative: true }) })), _jsxs("span", { className: "mui-goal-card__type", children: [typeIcon && _jsx(Icon, { source: typeIcon, size: "sm", decorative: true }), type, periodLabel && (_jsxs("span", { className: "mui-goal-card__period", children: [' ', _jsx("span", { "aria-hidden": "true", children: "\u00B7" }), " ", periodLabel] }))] })] }), _jsx(GoalStatusMenu, { labelClassName: "mui-goal-card__status-label", status: status, statusIcon: statusIcon, onStatusChange: onStatusChange, indicator: statusMenuIndicator, itemIndicator: statusMenuItemIndicator })] }), _jsx(GoalCategories, { className: "mui-goal-card__categories", categories: categories, maxVisible: maxVisibleCategories }), _jsx(CardTitle, { as: titleAs, className: "mui-goal-card__title", children: href ? (_jsx(CardLink, { asChild: true, children: _jsx(LinkComponent, { href: href, children: title }) })) : (title) }), _jsx("span", { className: "mui-goal-card__divider", "aria-hidden": "true" })] }), _jsxs(CardContent, { className: "mui-goal-card__content", children: [_jsx("p", { className: "mui-goal-card__description", children: description || 'No description provided.' }), total > 0 && (_jsxs("div", { className: "mui-goal-card__milestones", children: [_jsx(Progress, { size: "sm", value: completed, max: total, label: _jsx("span", { className: "mui-goal-card__milestones-label", children: "Milestones" }), valueText: `${completed} of ${total}` }), _jsx("ul", { className: "mui-goal-card__milestone-list", children: milestones?.map((milestone) => (_jsxs("li", { className: cx('mui-goal-card__milestone', milestone.completed && 'mui-goal-card__milestone--done'), children: [_jsx("span", { className: "mui-goal-card__milestone-marker", "aria-hidden": "true", children: milestone.completed && milestoneIcon && (_jsx(Icon, { source: milestoneIcon, size: "sm", decorative: true })) }), _jsx("span", { className: "mui-goal-card__milestone-title", children: milestone.title }), milestone.convertedToGoal && (_jsx("span", { className: "mui-goal-card__milestone-converted", children: _jsx(Icon, { source: milestoneConvertedIcon, size: "sm", label: "Converted to a goal" }) }))] }, milestone.id))) })] })), targetDate && (_jsxs("p", { className: "mui-goal-card__target", children: [_jsx("span", { className: "mui-goal-card__target-label", children: "Target:" }), " ", targetDate] }))] })] }));
|
|
63
54
|
}
|
|
64
55
|
/*
|
|
65
56
|
* Fallback glyph, inlined because this package is public and may not
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"goal-card.js","sourceRoot":"","sources":["../../src/goal-card/goal-card.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,IAAI,EACJ,WAAW,EACX,UAAU,EACV,QAAQ,EACR,SAAS,EACT,EAAE,EACF,IAAI,
|
|
1
|
+
{"version":3,"file":"goal-card.js","sourceRoot":"","sources":["../../src/goal-card/goal-card.tsx"],"names":[],"mappings":"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"}
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
* grows to its one-line width, and a goal with three long categories, or
|
|
30
30
|
* a status label too long to break, squeezed its own title into a sliver.
|
|
31
31
|
* Capped, they wrap inside their share and the title keeps the rest.
|
|
32
|
-
* Narrow, the status's cap is
|
|
32
|
+
* Narrow, the status's cap is 8.5rem where half the row is less: half of a
|
|
33
33
|
* phone's row is narrower than "Not Started" with its chevron, and the
|
|
34
34
|
* label wrapped. It stops at 60%, so the title always keeps the rest.
|
|
35
35
|
*/
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
grid-area: main;
|
|
46
46
|
display: flex;
|
|
47
47
|
flex-direction: column;
|
|
48
|
-
gap: var(--semantic-space-gap
|
|
48
|
+
gap: var(--semantic-space-gap);
|
|
49
49
|
min-width: 0;
|
|
50
50
|
}
|
|
51
51
|
|
|
@@ -54,11 +54,16 @@
|
|
|
54
54
|
--ds-card-text: var(--ds-card-text-muted);
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
+
/* Set on what follows the title, as on ActionItem. */
|
|
58
|
+
& .mui-goal-list-item__title + .mui-goal-list-item__details {
|
|
59
|
+
margin-block-start: var(--semantic-space-gap);
|
|
60
|
+
}
|
|
61
|
+
|
|
57
62
|
& .mui-goal-list-item__details {
|
|
58
63
|
display: flex;
|
|
59
64
|
flex-wrap: wrap;
|
|
60
65
|
align-items: center;
|
|
61
|
-
gap: var(--semantic-space-gap
|
|
66
|
+
gap: var(--semantic-space-gap) var(--semantic-space-gap-relaxed);
|
|
62
67
|
margin: 0;
|
|
63
68
|
color: var(--semantic-color-text-muted);
|
|
64
69
|
font-size: var(--primitives-font-size-xs);
|
|
@@ -75,7 +80,7 @@
|
|
|
75
80
|
/* GoalCard's small-caps label, so the two views name their details alike. */
|
|
76
81
|
& .mui-goal-list-item__detail-label {
|
|
77
82
|
font-weight: var(--primitives-font-weight-semibold);
|
|
78
|
-
letter-spacing:
|
|
83
|
+
letter-spacing: var(--semantic-letter-spacing-label);
|
|
79
84
|
text-transform: uppercase;
|
|
80
85
|
}
|
|
81
86
|
|
|
@@ -97,10 +102,10 @@
|
|
|
97
102
|
*/
|
|
98
103
|
@container mui-goal-list-item (max-width: 36rem) {
|
|
99
104
|
& .mui-goal-list-item__row {
|
|
100
|
-
grid-template-columns: minmax(0, 1fr) fit-content(clamp(50%,
|
|
105
|
+
grid-template-columns: minmax(0, 1fr) fit-content(clamp(50%, 8.5rem, 60%));
|
|
101
106
|
grid-template-areas: none;
|
|
102
107
|
align-items: start;
|
|
103
|
-
row-gap: var(--semantic-space-gap
|
|
108
|
+
row-gap: var(--semantic-space-gap);
|
|
104
109
|
}
|
|
105
110
|
|
|
106
111
|
& .mui-goal-list-item__main {
|
|
@@ -121,7 +126,6 @@
|
|
|
121
126
|
|
|
122
127
|
& .mui-goal-list-item__categories {
|
|
123
128
|
justify-content: flex-start;
|
|
124
|
-
margin-block-start: calc(var(--semantic-space-gap) - var(--semantic-space-gap-tight));
|
|
125
129
|
}
|
|
126
130
|
}
|
|
127
131
|
}
|
|
@@ -1,9 +1,4 @@
|
|
|
1
1
|
@layer components {
|
|
2
|
-
/*
|
|
3
|
-
* A bare button around the plain status badge. The badge keeps its own look;
|
|
4
|
-
* the button adds only what says "this opens something": the chevron, a fill
|
|
5
|
-
* on hover, and the focus ring.
|
|
6
|
-
*/
|
|
7
2
|
/*
|
|
8
3
|
* The trigger raises itself above a host card's stretched link (ui-core's
|
|
9
4
|
* CardLink), so it keeps its own clicks wherever it sits. Only the trigger:
|
|
@@ -14,51 +9,11 @@
|
|
|
14
9
|
.mui-goal-status-menu {
|
|
15
10
|
position: relative;
|
|
16
11
|
z-index: 1;
|
|
17
|
-
display: inline-flex;
|
|
18
|
-
align-items: center;
|
|
19
12
|
flex-shrink: 0;
|
|
20
|
-
max-width: 100%;
|
|
21
|
-
gap: var(--semantic-space-gap-tight);
|
|
22
|
-
margin: 0;
|
|
23
|
-
padding: 0 var(--semantic-space-gap-tight);
|
|
24
|
-
border: 0;
|
|
25
|
-
border-radius: var(--semantic-radius-interactive);
|
|
26
|
-
background-color: transparent;
|
|
27
|
-
color: inherit;
|
|
28
|
-
font: inherit;
|
|
29
|
-
cursor: pointer;
|
|
30
|
-
transition: background-color 150ms cubic-bezier(0, 0, 0.2, 1);
|
|
31
|
-
|
|
32
|
-
&:hover,
|
|
33
|
-
&[data-state="open"] {
|
|
34
|
-
background-color: var(--semantic-color-surface-muted);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
&:focus-visible {
|
|
38
|
-
outline: 2px solid var(--semantic-color-focus-ring);
|
|
39
|
-
outline-offset: 3px;
|
|
40
|
-
}
|
|
41
13
|
|
|
42
14
|
/* A Badge never gives way in a row, but inside the capped trigger it must, or the chevron goes. */
|
|
43
15
|
& .mui-goal-status-menu__badge {
|
|
44
16
|
flex-shrink: 1;
|
|
45
17
|
}
|
|
46
|
-
|
|
47
|
-
& .mui-goal-status-menu__indicator {
|
|
48
|
-
color: var(--semantic-color-text-muted);
|
|
49
|
-
transform: rotate(90deg);
|
|
50
|
-
transition: transform 150ms cubic-bezier(0, 0, 0.2, 1);
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
&[data-state="open"] .mui-goal-status-menu__indicator {
|
|
54
|
-
transform: rotate(-90deg);
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
@media (prefers-reduced-motion: reduce) {
|
|
60
|
-
.mui-goal-status-menu,
|
|
61
|
-
.mui-goal-status-menu .mui-goal-status-menu__indicator {
|
|
62
|
-
transition: none;
|
|
63
18
|
}
|
|
64
19
|
}
|
|
@@ -20,12 +20,7 @@ export interface GoalStatusMenuProps {
|
|
|
20
20
|
* Without it the badge is a plain, non-interactive status.
|
|
21
21
|
*/
|
|
22
22
|
onStatusChange?: (status: GoalStatus) => void;
|
|
23
|
-
/**
|
|
24
|
-
* Glyph after the badge saying it opens a menu. Must point RIGHT, as
|
|
25
|
-
* Select's indicator does: the component turns it down while closed and
|
|
26
|
-
* up while open, so one glyph serves both states.
|
|
27
|
-
* Defaults to a plain built-in chevron.
|
|
28
|
-
*/
|
|
23
|
+
/** Glyph after the badge saying it opens a menu. Must point RIGHT; see `MenuTrigger`'s `indicator`. */
|
|
29
24
|
indicator?: IconSource;
|
|
30
25
|
/** Glyph marking the current status in the menu. Defaults to Menu's built-in check. */
|
|
31
26
|
itemIndicator?: IconSource;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"goal-status-menu.d.ts","sourceRoot":"","sources":["../../src/goal-status-menu/goal-status-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"goal-status-menu.d.ts","sourceRoot":"","sources":["../../src/goal-status-menu/goal-status-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,UAAU,EAAoC,MAAM,mBAAmB,CAAC;AACjG,OAAO,wBAAwB,CAAC;AAEhC,+EAA+E;AAC/E,eAAO,MAAM,aAAa,sDAAuD,CAAC;AAElF,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAaxD,MAAM,WAAW,mBAAmB;IAClC,mDAAmD;IACnD,MAAM,EAAE,UAAU,CAAC;IACnB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAC9C,uGAAuG;IACvG,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,uFAAuF;IACvF,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,yFAAyF;IACzF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,UAAU,EACV,cAAc,EACd,SAAS,EACT,aAAa,EACb,cAAc,EACd,SAAS,GACV,EAAE,mBAAmB,2CAkCrB"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { jsx as _jsx
|
|
2
|
-
import { Badge, cx,
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Badge, cx, Menu, MenuTrigger } from '@manakind/ui-core';
|
|
3
3
|
import './goal-status-menu.css';
|
|
4
4
|
/** A Manuia goal's progress states, in the order a goal moves through them. */
|
|
5
5
|
export const GOAL_STATUSES = ['Not Started', 'In Progress', 'Completed'];
|
|
@@ -24,10 +24,10 @@ const STATUS_ITEMS = GOAL_STATUSES.map((status) => ({
|
|
|
24
24
|
* The trigger is named "Status: In Progress. Change status": the current
|
|
25
25
|
* status and what pressing it does, which also names the menu it opens.
|
|
26
26
|
*/
|
|
27
|
-
export function GoalStatusMenu({ status, statusIcon, onStatusChange, indicator
|
|
27
|
+
export function GoalStatusMenu({ status, statusIcon, onStatusChange, indicator, itemIndicator, labelClassName, className, }) {
|
|
28
28
|
const badge = (_jsx(Badge, { variant: STATUS_VARIANT[status], appearance: "plain", icon: statusIcon, labelClassName: cx('mui-goal-status-menu__label', labelClassName), "aria-label": status, className: onStatusChange ? 'mui-goal-status-menu__badge' : className, children: status }));
|
|
29
29
|
if (!onStatusChange)
|
|
30
30
|
return badge;
|
|
31
|
-
return (_jsx(Menu, { label: "Status", items: STATUS_ITEMS, value: status, onValueChange: onStatusChange, itemIndicator: itemIndicator, trigger:
|
|
31
|
+
return (_jsx(Menu, { label: "Status", items: STATUS_ITEMS, value: status, onValueChange: onStatusChange, itemIndicator: itemIndicator, trigger: _jsx(MenuTrigger, { indicator: indicator, className: cx('mui-goal-status-menu', className), "aria-label": `Status: ${status}. Change status`, children: badge }) }));
|
|
32
32
|
}
|
|
33
33
|
//# sourceMappingURL=goal-status-menu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"goal-status-menu.js","sourceRoot":"","sources":["../../src/goal-status-menu/goal-status-menu.tsx"],"names":[],"mappings":";AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"goal-status-menu.js","sourceRoot":"","sources":["../../src/goal-status-menu/goal-status-menu.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,EAAE,EAAmB,IAAI,EAAiB,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACjG,OAAO,wBAAwB,CAAC;AAEhC,+EAA+E;AAC/E,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,aAAa,EAAE,aAAa,EAAE,WAAW,CAAU,CAAC;AAIlF,MAAM,cAAc,GAAqD;IACvE,aAAa,EAAE,OAAO;IACtB,aAAa,EAAE,MAAM;IACrB,SAAS,EAAE,SAAS;CACrB,CAAC;AAEF,MAAM,YAAY,GAA2B,aAAa,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;IAC1E,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,MAAM;CACd,CAAC,CAAC,CAAC;AAiCJ;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,cAAc,CAAC,EAC7B,MAAM,EACN,UAAU,EACV,cAAc,EACd,SAAS,EACT,aAAa,EACb,cAAc,EACd,SAAS,GACW;IACpB,MAAM,KAAK,GAAG,CACZ,KAAC,KAAK,IACJ,OAAO,EAAE,cAAc,CAAC,MAAM,CAAC,EAC/B,UAAU,EAAC,OAAO,EAClB,IAAI,EAAE,UAAU,EAChB,cAAc,EAAE,EAAE,CAAC,6BAA6B,EAAE,cAAc,CAAC,gBACrD,MAAM,EAClB,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAC,CAAC,SAAS,YAEpE,MAAM,GACD,CACT,CAAC;IAEF,IAAI,CAAC,cAAc;QAAE,OAAO,KAAK,CAAC;IAElC,OAAO,CACL,KAAC,IAAI,IACH,KAAK,EAAC,QAAQ,EACd,KAAK,EAAE,YAAY,EACnB,KAAK,EAAE,MAAM,EACb,aAAa,EAAE,cAAc,EAC7B,aAAa,EAAE,aAAa,EAC5B,OAAO,EACL,KAAC,WAAW,IACV,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,SAAS,CAAC,gBACpC,WAAW,MAAM,iBAAiB,YAE7C,KAAK,GACM,GAEhB,CACH,CAAC;AACJ,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@manakind/manuia-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.16.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -37,8 +37,8 @@
|
|
|
37
37
|
"vr": "playwright test"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@manakind/manuia-tokens": "0.
|
|
41
|
-
"@manakind/ui-core": "0.
|
|
40
|
+
"@manakind/manuia-tokens": "0.15.0",
|
|
41
|
+
"@manakind/ui-core": "0.16.0"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
44
44
|
"react": "^19.0.0",
|