@manakind/manuia-ui 0.11.1 → 0.11.5
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/focus-item/focus-item.css +24 -5
- package/dist/focus-item/focus-item.d.ts +3 -2
- package/dist/focus-item/focus-item.d.ts.map +1 -1
- package/dist/focus-item/focus-item.js +3 -2
- package/dist/focus-item/focus-item.js.map +1 -1
- package/dist/goal-list-item/goal-list-item.css +27 -6
- package/dist/goal-list-item/goal-list-item.d.ts +2 -2
- package/dist/goal-list-item/goal-list-item.js +2 -2
- package/dist/goal-tab-trigger/goal-tab-trigger.d.ts +12 -0
- package/dist/goal-tab-trigger/goal-tab-trigger.d.ts.map +1 -1
- package/dist/goal-tab-trigger/goal-tab-trigger.js +5 -13
- package/dist/goal-tab-trigger/goal-tab-trigger.js.map +1 -1
- package/package.json +2 -2
|
@@ -24,7 +24,8 @@
|
|
|
24
24
|
|
|
25
25
|
/*
|
|
26
26
|
* Categories and the toggle are capped so a long name or label wraps in
|
|
27
|
-
* its share instead of squeezing the title, as on GoalListItem
|
|
27
|
+
* its share instead of squeezing the title, as on GoalListItem, and the
|
|
28
|
+
* narrow cap is clamped the same way.
|
|
28
29
|
*/
|
|
29
30
|
& .mui-focus-item__row {
|
|
30
31
|
display: grid;
|
|
@@ -84,17 +85,35 @@
|
|
|
84
85
|
justify-self: end;
|
|
85
86
|
}
|
|
86
87
|
|
|
88
|
+
/* Narrow: laid out as GoalListItem's, with the toggle beside the title. */
|
|
87
89
|
@container mui-focus-item (max-width: 36rem) {
|
|
88
90
|
& .mui-focus-item__row {
|
|
89
|
-
grid-template-columns: minmax(0, 1fr) fit-content(50%);
|
|
90
|
-
grid-template-areas:
|
|
91
|
-
"main toggle"
|
|
92
|
-
"categories categories";
|
|
91
|
+
grid-template-columns: minmax(0, 1fr) fit-content(clamp(50%, 8rem, 60%));
|
|
92
|
+
grid-template-areas: none;
|
|
93
93
|
align-items: start;
|
|
94
|
+
row-gap: var(--semantic-space-gap-tight);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
& .mui-focus-item__main {
|
|
98
|
+
display: contents;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
& .mui-focus-item__title,
|
|
102
|
+
& .mui-focus-item__toggle {
|
|
103
|
+
grid-area: auto;
|
|
104
|
+
grid-row: 1;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
& .mui-focus-item__details,
|
|
108
|
+
& .mui-focus-item__actions,
|
|
109
|
+
& .mui-focus-item__categories {
|
|
110
|
+
grid-area: auto;
|
|
111
|
+
grid-column: 1 / -1;
|
|
94
112
|
}
|
|
95
113
|
|
|
96
114
|
& .mui-focus-item__categories {
|
|
97
115
|
justify-content: flex-start;
|
|
116
|
+
margin-block-start: calc(var(--semantic-space-gap) - var(--semantic-space-gap-tight));
|
|
98
117
|
}
|
|
99
118
|
}
|
|
100
119
|
}
|
|
@@ -65,8 +65,9 @@ export interface FocusItemProps {
|
|
|
65
65
|
* instead.
|
|
66
66
|
*
|
|
67
67
|
* Wide, the row reads left to right: title over its details and actions,
|
|
68
|
-
* then categories, then the toggle. Narrow, the
|
|
69
|
-
* the toggle
|
|
68
|
+
* then categories, then the toggle. Narrow, only the title shares a line
|
|
69
|
+
* with the toggle; the details, actions and categories take the full width
|
|
70
|
+
* below.
|
|
70
71
|
*/
|
|
71
72
|
export declare function FocusItem({ kind, title, kindIcon, details, categories, actions, focused, onFocusedChange, focusIcon, focusedIcon, titleAs, className, children, }: FocusItemProps): import("react/jsx-runtime").JSX.Element;
|
|
72
73
|
//# sourceMappingURL=focus-item.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"focus-item.d.ts","sourceRoot":"","sources":["../../src/focus-item/focus-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqC,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACvF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAkB,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,kBAAkB,CAAC;AAE1B,kFAAkF;AAClF,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEjD,+CAA+C;AAC/C,MAAM,WAAW,eAAe;IAC9B,yBAAyB;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;CACf;AAOD,MAAM,WAAW,cAAc;IAC7B,mFAAmF;IACnF,IAAI,EAAE,aAAa,CAAC;IACpB,8EAA8E;IAC9E,KAAK,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,qFAAqF;IACrF,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,sDAAsD;IACtD,UAAU,CAAC,EAAE,YAAY,EAAE,CAAC;IAC5B;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,sEAAsE;IACtE,OAAO,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,wFAAwF;IACxF,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,oFAAoF;IACpF,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC7B,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED
|
|
1
|
+
{"version":3,"file":"focus-item.d.ts","sourceRoot":"","sources":["../../src/focus-item/focus-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqC,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACvF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAkB,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,kBAAkB,CAAC;AAE1B,kFAAkF;AAClF,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEjD,+CAA+C;AAC/C,MAAM,WAAW,eAAe;IAC9B,yBAAyB;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;CACf;AAOD,MAAM,WAAW,cAAc;IAC7B,mFAAmF;IACnF,IAAI,EAAE,aAAa,CAAC;IACpB,8EAA8E;IAC9E,KAAK,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,qFAAqF;IACrF,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,sDAAsD;IACtD,UAAU,CAAC,EAAE,YAAY,EAAE,CAAC;IAC5B;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,sEAAsE;IACtE,OAAO,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,wFAAwF;IACxF,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,oFAAoF;IACpF,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC7B,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,OAAY,EACZ,UAAe,EACf,OAAY,EACZ,OAAO,EACP,eAAe,EACf,SAAS,EACT,WAAuB,EACvB,OAAc,EACd,SAAS,EACT,QAAQ,GACT,EAAE,cAAc,2CA+DhB"}
|
|
@@ -19,8 +19,9 @@ const KIND_LABELS = {
|
|
|
19
19
|
* instead.
|
|
20
20
|
*
|
|
21
21
|
* Wide, the row reads left to right: title over its details and actions,
|
|
22
|
-
* then categories, then the toggle. Narrow, the
|
|
23
|
-
* the toggle
|
|
22
|
+
* then categories, then the toggle. Narrow, only the title shares a line
|
|
23
|
+
* with the toggle; the details, actions and categories take the full width
|
|
24
|
+
* below.
|
|
24
25
|
*/
|
|
25
26
|
export function FocusItem({ kind, title, kindIcon, details = [], categories = [], actions = [], focused, onFocusedChange, focusIcon, focusedIcon = focusIcon, titleAs = 'h3', className, children, }) {
|
|
26
27
|
const isOutcome = kind === 'outcome';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"focus-item.js","sourceRoot":"","sources":["../../src/focus-item/focus-item.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,IAAI,EAAmB,MAAM,mBAAmB,CAAC;AAEvF,OAAO,EAAE,cAAc,EAAqB,MAAM,oBAAoB,CAAC;AACvE,OAAO,kBAAkB,CAAC;AAa1B,MAAM,WAAW,GAAkC;IACjD,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,SAAS;CACnB,CAAC;AA4CF
|
|
1
|
+
{"version":3,"file":"focus-item.js","sourceRoot":"","sources":["../../src/focus-item/focus-item.tsx"],"names":[],"mappings":"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"}
|
|
@@ -29,6 +29,9 @@
|
|
|
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 8rem where half the row is less: half of a
|
|
33
|
+
* phone's row is narrower than "Not Started" with its chevron, and the
|
|
34
|
+
* label wrapped. It stops at 60%, so the title always keeps the rest.
|
|
32
35
|
*/
|
|
33
36
|
& .mui-goal-list-item__row {
|
|
34
37
|
display: grid;
|
|
@@ -87,20 +90,38 @@
|
|
|
87
90
|
}
|
|
88
91
|
|
|
89
92
|
/*
|
|
90
|
-
* Narrow: the
|
|
91
|
-
*
|
|
93
|
+
* Narrow: the status stays beside the title, where a reader scanning the
|
|
94
|
+
* list looks for it, and everything else takes the row's full width
|
|
95
|
+
* below. Beside the status, the details had a phone's row less the
|
|
96
|
+
* status, and "MILESTONES" broke mid-word.
|
|
92
97
|
*/
|
|
93
98
|
@container mui-goal-list-item (max-width: 36rem) {
|
|
94
99
|
& .mui-goal-list-item__row {
|
|
95
|
-
grid-template-columns: minmax(0, 1fr) fit-content(50%);
|
|
96
|
-
grid-template-areas:
|
|
97
|
-
"main status"
|
|
98
|
-
"categories categories";
|
|
100
|
+
grid-template-columns: minmax(0, 1fr) fit-content(clamp(50%, 8rem, 60%));
|
|
101
|
+
grid-template-areas: none;
|
|
99
102
|
align-items: start;
|
|
103
|
+
row-gap: var(--semantic-space-gap-tight);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
& .mui-goal-list-item__main {
|
|
107
|
+
display: contents;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
& .mui-goal-list-item__title,
|
|
111
|
+
& .mui-goal-list-item__status {
|
|
112
|
+
grid-area: auto;
|
|
113
|
+
grid-row: 1;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
& .mui-goal-list-item__details,
|
|
117
|
+
& .mui-goal-list-item__categories {
|
|
118
|
+
grid-area: auto;
|
|
119
|
+
grid-column: 1 / -1;
|
|
100
120
|
}
|
|
101
121
|
|
|
102
122
|
& .mui-goal-list-item__categories {
|
|
103
123
|
justify-content: flex-start;
|
|
124
|
+
margin-block-start: calc(var(--semantic-space-gap) - var(--semantic-space-gap-tight));
|
|
104
125
|
}
|
|
105
126
|
}
|
|
106
127
|
}
|
|
@@ -68,8 +68,8 @@ export interface GoalListItemProps {
|
|
|
68
68
|
* above it, separately operable.
|
|
69
69
|
*
|
|
70
70
|
* Wide, the row reads left to right: title over its details, then categories,
|
|
71
|
-
* then status. Narrow, the
|
|
72
|
-
* the
|
|
71
|
+
* then status. Narrow, only the title shares a line with the status; the
|
|
72
|
+
* details and categories take the full width below.
|
|
73
73
|
*/
|
|
74
74
|
export declare function GoalListItem({ title, type, status, statusIcon, onStatusChange, statusMenuIndicator, statusMenuItemIndicator, periodLabel, categories, maxVisibleCategories, milestones, targetDate, typeIcon, href, linkComponent: LinkComponent, titleAs, className, children, }: GoalListItemProps): import("react/jsx-runtime").JSX.Element;
|
|
75
75
|
//# sourceMappingURL=goal-list-item.d.ts.map
|
|
@@ -15,8 +15,8 @@ import './goal-list-item.css';
|
|
|
15
15
|
* above it, separately operable.
|
|
16
16
|
*
|
|
17
17
|
* Wide, the row reads left to right: title over its details, then categories,
|
|
18
|
-
* then status. Narrow, the
|
|
19
|
-
* the
|
|
18
|
+
* then status. Narrow, only the title shares a line with the status; the
|
|
19
|
+
* details and categories take the full width below.
|
|
20
20
|
*/
|
|
21
21
|
export function GoalListItem({ title, type, status, statusIcon, onStatusChange, statusMenuIndicator, statusMenuItemIndicator, periodLabel, categories = [], maxVisibleCategories = 2, milestones, targetDate, typeIcon, href, linkComponent: LinkComponent = 'a', titleAs = 'h3', className, children, }) {
|
|
22
22
|
const completed = milestones?.filter((m) => m.completed).length ?? 0;
|
|
@@ -7,5 +7,17 @@ export interface GoalTabTriggerProps extends ComponentProps<typeof TabsTrigger>
|
|
|
7
7
|
/** How many goals fall in this timeframe. */
|
|
8
8
|
count: number;
|
|
9
9
|
}
|
|
10
|
+
/**
|
|
11
|
+
* A Manuia timeframe tab with its goal count.
|
|
12
|
+
*
|
|
13
|
+
* Composes `ui-core`'s `TabsTrigger` and `Badge`. The pairing is product
|
|
14
|
+
* specific — "a tab that carries a count of the things behind it" is a Manuia
|
|
15
|
+
* pattern, so it lives here rather than widening `TabsTrigger`.
|
|
16
|
+
*
|
|
17
|
+
* The count badge carries an `aria-label`, because a bare number announced
|
|
18
|
+
* after the label tells a screen reader user nothing. Tabs with no goals are
|
|
19
|
+
* rendered in a lighter weight, but they stay reachable — the count itself is
|
|
20
|
+
* the information.
|
|
21
|
+
*/
|
|
10
22
|
export declare function GoalTabTrigger({ label, count, className, ...props }: GoalTabTriggerProps): import("react/jsx-runtime").JSX.Element;
|
|
11
23
|
//# sourceMappingURL=goal-tab-trigger.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"goal-tab-trigger.d.ts","sourceRoot":"","sources":["../../src/goal-tab-trigger/goal-tab-trigger.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,wBAAwB,CAAC;AAEhC,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,OAAO,WAAW,CAAC;IAC7E,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;CACf;
|
|
1
|
+
{"version":3,"file":"goal-tab-trigger.d.ts","sourceRoot":"","sources":["../../src/goal-tab-trigger/goal-tab-trigger.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,wBAAwB,CAAC;AAEhC,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,OAAO,WAAW,CAAC;IAC7E,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;CACf;AAQD;;;;;;;;;;;GAWG;AACH,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAmBxF"}
|
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Badge, cx, TabsTrigger } from '@manakind/ui-core';
|
|
3
3
|
import './goal-tab-trigger.css';
|
|
4
|
+
/**
|
|
5
|
+
* Cap the visible count at `99+` to bound the badge width.
|
|
6
|
+
* The badge's `aria-label` retains the full count.
|
|
7
|
+
*/
|
|
8
|
+
const MAX_DISPLAYED_COUNT = 99;
|
|
4
9
|
/**
|
|
5
10
|
* A Manuia timeframe tab with its goal count.
|
|
6
11
|
*
|
|
@@ -13,19 +18,6 @@ import './goal-tab-trigger.css';
|
|
|
13
18
|
* rendered in a lighter weight, but they stay reachable — the count itself is
|
|
14
19
|
* the information.
|
|
15
20
|
*/
|
|
16
|
-
/**
|
|
17
|
-
* Counts stop rendering their true value here and switch to `99+`.
|
|
18
|
-
*
|
|
19
|
-
* The cap bounds how wide the badge can get: without it a five-digit count
|
|
20
|
-
* would stretch the tab arbitrarily. At `99+` the badge widens from a circle
|
|
21
|
-
* into a pill, which is what every other library does with this case and
|
|
22
|
-
* costs nothing structurally — the height is pinned, so nothing reflows and
|
|
23
|
-
* the tab strip keeps its nested radii.
|
|
24
|
-
*
|
|
25
|
-
* The cap is display only. The `aria-label` always announces the real
|
|
26
|
-
* number, so nothing is hidden from a screen reader.
|
|
27
|
-
*/
|
|
28
|
-
const MAX_DISPLAYED_COUNT = 99;
|
|
29
21
|
export function GoalTabTrigger({ label, count, className, ...props }) {
|
|
30
22
|
const hasGoals = count > 0;
|
|
31
23
|
const overflows = count > MAX_DISPLAYED_COUNT;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"goal-tab-trigger.js","sourceRoot":"","sources":["../../src/goal-tab-trigger/goal-tab-trigger.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAE3D,OAAO,wBAAwB,CAAC;AAShC
|
|
1
|
+
{"version":3,"file":"goal-tab-trigger.js","sourceRoot":"","sources":["../../src/goal-tab-trigger/goal-tab-trigger.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAE3D,OAAO,wBAAwB,CAAC;AAShC;;;GAGG;AACH,MAAM,mBAAmB,GAAG,EAAE,CAAC;AAE/B;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,cAAc,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAuB;IACvF,MAAM,QAAQ,GAAG,KAAK,GAAG,CAAC,CAAC;IAC3B,MAAM,SAAS,GAAG,KAAK,GAAG,mBAAmB,CAAC;IAE9C,OAAO,CACL,MAAC,WAAW,IACV,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,CAAC,QAAQ,IAAI,6BAA6B,EAAE,SAAS,CAAC,KACxF,KAAK,aAET,yBAAO,KAAK,GAAQ,EACpB,KAAC,KAAK,IACJ,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,gBAC7B,GAAG,KAAK,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAAE,YAEvD,SAAS,CAAC,CAAC,CAAC,GAAG,mBAAmB,GAAG,CAAC,CAAC,CAAC,KAAK,GACxC,IACI,CACf,CAAC;AACJ,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@manakind/manuia-ui",
|
|
3
|
-
"version": "0.11.
|
|
3
|
+
"version": "0.11.5",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
40
|
"@manakind/manuia-tokens": "0.10.0",
|
|
41
|
-
"@manakind/ui-core": "0.11.
|
|
41
|
+
"@manakind/ui-core": "0.11.3"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
44
44
|
"react": "^19.0.0",
|