@manakind/manuia-ui 0.13.0 → 0.15.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.
@@ -0,0 +1,124 @@
1
+ @layer components {
2
+ .mui-action-item {
3
+ /*
4
+ * The row lays out by its own width, as FocusItem does, so a list in a
5
+ * narrow column collapses the same way a list on a phone does.
6
+ */
7
+ container: mui-action-item / inline-size;
8
+ display: grid;
9
+ grid-template-columns: minmax(0, 1fr);
10
+ gap: var(--semantic-space-gap-tight);
11
+ overflow-wrap: anywhere;
12
+
13
+ & .mui-action-item__card {
14
+ --ds-card-padding: var(--semantic-space-padding);
15
+ --ds-card-title-font-size: var(--primitives-font-size-md);
16
+ --ds-card-title-font-weight: var(--primitives-font-weight-medium);
17
+ }
18
+
19
+ /* A selected row carries a second border in the strong primary, as a chosen card does. */
20
+ &.mui-action-item--selected .mui-action-item__card {
21
+ --ds-card-border: var(--semantic-color-action-primary-strong);
22
+ box-shadow: 0 0 0 1px var(--semantic-color-action-primary-strong);
23
+ }
24
+
25
+ /*
26
+ * Toggle, main, controls, checkbox, in a flex row rather than a grid: the
27
+ * toggle, controls and checkbox are each optional, and an absent flex
28
+ * item leaves no track and no gap behind. The controls are capped so a
29
+ * long label in them wraps in its share instead of squeezing the title.
30
+ */
31
+ & .mui-action-item__row {
32
+ display: flex;
33
+ align-items: start;
34
+ gap: var(--semantic-space-gap) var(--semantic-space-gap-relaxed);
35
+ }
36
+
37
+ & .mui-action-item__main {
38
+ display: flex;
39
+ flex: 1 1 0;
40
+ flex-direction: column;
41
+ gap: var(--semantic-space-gap-tight);
42
+ min-width: 0;
43
+ }
44
+
45
+ &.mui-action-item--completed .mui-action-item__title {
46
+ --ds-card-text: var(--ds-card-text-muted);
47
+ text-decoration: line-through;
48
+ }
49
+
50
+ & .mui-action-item__details {
51
+ display: flex;
52
+ flex-wrap: wrap;
53
+ align-items: center;
54
+ gap: var(--semantic-space-gap-tight) var(--semantic-space-gap-relaxed);
55
+ margin: 0;
56
+ color: var(--semantic-color-text-muted);
57
+ font-size: var(--primitives-font-size-xs);
58
+ }
59
+
60
+ & .mui-action-item__detail {
61
+ display: inline-flex;
62
+ flex-wrap: wrap;
63
+ align-items: center;
64
+ gap: var(--semantic-space-gap-tight);
65
+ }
66
+
67
+ & .mui-action-item__secondary {
68
+ display: flex;
69
+ flex-wrap: wrap;
70
+ align-items: center;
71
+ gap: var(--semantic-space-gap);
72
+ }
73
+
74
+ & .mui-action-item__controls {
75
+ display: flex;
76
+ flex: 0 1 auto;
77
+ flex-wrap: wrap;
78
+ align-items: center;
79
+ justify-content: flex-end;
80
+ gap: var(--semantic-space-gap);
81
+ max-width: 40%;
82
+ }
83
+
84
+ /*
85
+ * Narrow: the row wraps. The toggle, the title and the checkbox keep the
86
+ * first line; the details, categories, second line and controls each
87
+ * take a full line below, in the order the main column held them.
88
+ */
89
+ @container mui-action-item (max-width: 36rem) {
90
+ & .mui-action-item__row {
91
+ flex-wrap: wrap;
92
+ row-gap: var(--semantic-space-gap-tight);
93
+ }
94
+
95
+ & .mui-action-item__main {
96
+ display: contents;
97
+ }
98
+
99
+ & .mui-action-item__title {
100
+ flex: 1 1 0;
101
+ align-self: center;
102
+ min-width: 0;
103
+ }
104
+
105
+ /* Ordered after the checkbox, which the DOM puts last, so the checkbox wraps onto the title's line. */
106
+ & .mui-action-item__details,
107
+ & .mui-action-item__categories,
108
+ & .mui-action-item__secondary,
109
+ & .mui-action-item__controls {
110
+ flex: 0 0 100%;
111
+ order: 1;
112
+ max-width: none;
113
+ }
114
+
115
+ & .mui-action-item__controls {
116
+ justify-content: flex-start;
117
+ }
118
+
119
+ & .mui-action-item__select {
120
+ align-self: center;
121
+ }
122
+ }
123
+ }
124
+ }
@@ -0,0 +1,2 @@
1
+ /* AUTOGENERATED: types for the stylesheet beside it. */
2
+ export {};
@@ -0,0 +1,88 @@
1
+ import { type BadgeVariant, type IconSource } from '@manakind/ui-core';
2
+ import type { ComponentProps, ReactNode } from 'react';
3
+ import { type GoalCategory } from '../goal-categories';
4
+ import './action-item.css';
5
+ /** One fact about the action, shown after the title: its project, outcome, effort, duration. */
6
+ export interface ActionItemDetail {
7
+ /** Pre-formatted text, such as "Website relaunch" or "30 min". */
8
+ label: string;
9
+ /** Glyph before the text, supplied by the product. */
10
+ icon?: IconSource;
11
+ }
12
+ /** How the note reads: an aside, or a warning the user should act on. The two Badge variants it maps to. */
13
+ export type ActionItemNoteTone = Extract<BadgeVariant, 'muted' | 'warning'>;
14
+ export interface ActionItemProps extends Omit<ComponentProps<'li'>, 'title' | 'children' | 'className'> {
15
+ /** The action's description. Rendered as the row's heading. */
16
+ title: string;
17
+ /** Whether the action is done. Strikes the title and presses the completion toggle. */
18
+ completed: boolean;
19
+ /**
20
+ * Called with the new state when the completion toggle is pressed. Without
21
+ * it, or without `completeIcon`, the row has no toggle and the struck
22
+ * title alone says the action is done.
23
+ */
24
+ onCompletedChange?: (completed: boolean) => void;
25
+ /** Glyph on the completion toggle, supplied by the product. */
26
+ completeIcon?: IconSource;
27
+ /** Facts shown after the title, each with an optional glyph. */
28
+ details?: ActionItemDetail[];
29
+ /** Categories the action belongs to, as dotted text. */
30
+ categories?: GoalCategory[];
31
+ /** How many categories to show before collapsing into `+N more`. Defaults to 2, as on `GoalListItem`. */
32
+ maxVisibleCategories?: number;
33
+ /**
34
+ * A short pre-formatted status beside the details: the days it was done,
35
+ * or how long it has waited unscheduled. `noteTone` says how it reads.
36
+ */
37
+ note?: string;
38
+ /** `muted` (default) for an aside; `warning` for a note the user should act on, such as a stale action. */
39
+ noteTone?: ActionItemNoteTone;
40
+ /**
41
+ * Whether the row is selected for a bulk change. With `onSelectedChange`
42
+ * the row carries a checkbox named "Select …" and, when selected, a ring;
43
+ * without the handler neither is shown.
44
+ */
45
+ selected?: boolean;
46
+ /** Called with the new state when the selection checkbox changes. Without it the row has no checkbox. */
47
+ onSelectedChange?: (selected: boolean) => void;
48
+ /**
49
+ * The product's controls that act on this row, placed at its end: a focus
50
+ * toggle, an edit button. They render as given; the row only places them.
51
+ */
52
+ controls?: ReactNode;
53
+ /**
54
+ * The product's second line under the details: the control that
55
+ * schedules the action, a delete button for a stale one. Rendered as given.
56
+ */
57
+ secondary?: ReactNode;
58
+ /** Heading level for the title. Defaults to `h3`; match the surrounding outline. */
59
+ titleAs?: 'h2' | 'h3' | 'h4';
60
+ /** Extra class names on the `<li>`. */
61
+ className?: string;
62
+ /**
63
+ * A message about this action, shown under the row inside the same `<li>`:
64
+ * an `Alert` after a failed change, say. Kept in the item so the list's
65
+ * item count stays the number of actions.
66
+ */
67
+ children?: ReactNode;
68
+ }
69
+ /**
70
+ * One Manuia action as a row. Render it inside an `ActionList`: it is the
71
+ * `<li>`.
72
+ *
73
+ * The row leads with a round completion toggle, then the title over its
74
+ * details, categories and the product's second line, then the product's
75
+ * controls and, when the list allows a bulk change, a selection checkbox.
76
+ * The toggle is a pressed/unpressed button named "Complete …" in both
77
+ * states, so a screen reader hears the state change rather than a different
78
+ * control; it has no pending state, for `FocusItem`'s reason, so the product
79
+ * keeps its change idempotent.
80
+ *
81
+ * Wide, the row reads left to right. Narrow, the toggle, the title and the
82
+ * checkbox share the first line; the details, categories, second line and
83
+ * controls take the full width below. Attributes other than the props land
84
+ * on the `<li>`: a virtualised list gives each row `aria-setsize` and
85
+ * `aria-posinset`, so the count a screen reader hears is the whole list's.
86
+ */
87
+ export declare function ActionItem({ title, completed, onCompletedChange, completeIcon, details, categories, maxVisibleCategories, note, noteTone, selected, onSelectedChange, controls, secondary, titleAs, className, children, ...listItemProps }: ActionItemProps): import("react/jsx-runtime").JSX.Element;
88
+ //# sourceMappingURL=action-item.d.ts.map
@@ -0,0 +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;;;;;;;;;;;;;;;;;GAiBG;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"}
@@ -0,0 +1,40 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { Badge, Card, CardTitle, Checkbox, cx, Icon, IconButton, } from '@manakind/ui-core';
3
+ import { GoalCategories } from '../goal-categories';
4
+ import './action-item.css';
5
+ /**
6
+ * One Manuia action as a row. Render it inside an `ActionList`: it is the
7
+ * `<li>`.
8
+ *
9
+ * The row leads with a round completion toggle, then the title over its
10
+ * details, categories and the product's second line, then the product's
11
+ * controls and, when the list allows a bulk change, a selection checkbox.
12
+ * The toggle is a pressed/unpressed button named "Complete …" in both
13
+ * states, so a screen reader hears the state change rather than a different
14
+ * control; it has no pending state, for `FocusItem`'s reason, so the product
15
+ * keeps its change idempotent.
16
+ *
17
+ * Wide, the row reads left to right. Narrow, the toggle, the title and the
18
+ * checkbox share the first line; the details, categories, second line and
19
+ * controls take the full width below. Attributes other than the props land
20
+ * on the `<li>`: a virtualised list gives each row `aria-setsize` and
21
+ * `aria-posinset`, so the count a screen reader hears is the whole list's.
22
+ */
23
+ export function ActionItem({ title, completed, onCompletedChange, completeIcon, details = [], categories = [], maxVisibleCategories = 2, note, noteTone = 'muted', selected = false, onSelectedChange, controls, secondary, titleAs = 'h3', className, children, ...listItemProps }) {
24
+ const selectable = onSelectedChange !== undefined;
25
+ const toggle = completeIcon && onCompletedChange ? (_jsx(IconButton, { className: "mui-action-item__complete", variant: completed ? 'primary' : 'secondary', size: "md", icon: completeIcon, "aria-pressed": completed, "aria-label": `Complete ${title}`, onClick: () => onCompletedChange(!completed) })) : null;
26
+ /*
27
+ * A detail's key is its label and its rank among equal labels: a project
28
+ * and an outcome may share a name, and a key that only held the label
29
+ * would collide.
30
+ */
31
+ const seen = new Map();
32
+ const detailRows = details.map((detail) => {
33
+ const rank = seen.get(detail.label) ?? 0;
34
+ seen.set(detail.label, rank + 1);
35
+ return (_jsxs("span", { className: "mui-action-item__detail", children: [detail.icon && _jsx(Icon, { source: detail.icon, size: "sm", decorative: true }), detail.label] }, `${detail.label}-${rank}`));
36
+ });
37
+ const detailList = details.length > 0 || note ? (_jsxs("p", { className: "mui-action-item__details", children: [detailRows, note && (_jsx(Badge, { variant: noteTone, className: "mui-action-item__note", children: note }))] })) : null;
38
+ return (_jsxs("li", { ...listItemProps, className: cx('mui-action-item', completed && 'mui-action-item--completed', selectable && selected && 'mui-action-item--selected', className), children: [_jsx(Card, { className: "mui-action-item__card", children: _jsxs("div", { className: "mui-action-item__row", children: [toggle, _jsxs("div", { className: "mui-action-item__main", children: [_jsx(CardTitle, { as: titleAs, className: "mui-action-item__title", children: title }), detailList, _jsx(GoalCategories, { className: "mui-action-item__categories", categories: categories, maxVisible: maxVisibleCategories }), secondary && _jsx("div", { className: "mui-action-item__secondary", children: secondary })] }), controls && _jsx("div", { className: "mui-action-item__controls", children: controls }), selectable && (_jsx(Checkbox, { className: "mui-action-item__select", "aria-label": `Select ${title}`, checked: selected, onCheckedChange: onSelectedChange }))] }) }), children] }));
39
+ }
40
+ //# sourceMappingURL=action-item.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"action-item.js","sourceRoot":"","sources":["../../src/action-item/action-item.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,3 @@
1
+ export type { ActionItemDetail, ActionItemNoteTone, ActionItemProps } from './action-item';
2
+ export { ActionItem } from './action-item';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/action-item/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAC3F,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { ActionItem } from './action-item';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/action-item/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC"}
@@ -0,0 +1,10 @@
1
+ @layer components {
2
+ .mui-action-list {
3
+ display: flex;
4
+ flex-direction: column;
5
+ gap: var(--semantic-space-gap);
6
+ margin: 0;
7
+ padding: 0;
8
+ list-style: none;
9
+ }
10
+ }
@@ -0,0 +1,2 @@
1
+ /* AUTOGENERATED: types for the stylesheet beside it. */
2
+ export {};
@@ -0,0 +1,19 @@
1
+ import type { ComponentProps } from 'react';
2
+ import './action-list.css';
3
+ export interface ActionListProps extends ComponentProps<'ul'> {
4
+ /** `ActionItem`s. Each renders its own `<li>`. */
5
+ children?: ComponentProps<'ul'>['children'];
6
+ }
7
+ /**
8
+ * A `<ul>` of `ActionItem` rows: the actions of a day, a block or a project.
9
+ *
10
+ * A real list, so a screen reader announces how many items there are. Name it
11
+ * with `aria-label` or `aria-labelledby` when the heading above it doesn't
12
+ * already say what it lists. Loading and empty states belong to the product,
13
+ * outside the list: an empty `<ul>` is a list of none. A list that renders
14
+ * only a window of its rows gives each `ActionItem` `aria-setsize` and
15
+ * `aria-posinset`, and keeps its spacers as padding on the `<ul>`, so the
16
+ * count stays the whole list's and no spacer becomes an item.
17
+ */
18
+ export declare function ActionList({ className, children, ...props }: ActionListProps): import("react/jsx-runtime").JSX.Element;
19
+ //# sourceMappingURL=action-list.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"action-list.d.ts","sourceRoot":"","sources":["../../src/action-list/action-list.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,mBAAmB,CAAC;AAE3B,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,IAAI,CAAC;IAC3D,kDAAkD;IAClD,QAAQ,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC;CAC7C;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAM5E"}
@@ -0,0 +1,18 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { cx } from '@manakind/ui-core';
3
+ import './action-list.css';
4
+ /**
5
+ * A `<ul>` of `ActionItem` rows: the actions of a day, a block or a project.
6
+ *
7
+ * A real list, so a screen reader announces how many items there are. Name it
8
+ * with `aria-label` or `aria-labelledby` when the heading above it doesn't
9
+ * already say what it lists. Loading and empty states belong to the product,
10
+ * outside the list: an empty `<ul>` is a list of none. A list that renders
11
+ * only a window of its rows gives each `ActionItem` `aria-setsize` and
12
+ * `aria-posinset`, and keeps its spacers as padding on the `<ul>`, so the
13
+ * count stays the whole list's and no spacer becomes an item.
14
+ */
15
+ export function ActionList({ className, children, ...props }) {
16
+ return (_jsx("ul", { className: cx('mui-action-list', className), ...props, children: children }));
17
+ }
18
+ //# sourceMappingURL=action-list.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"action-list.js","sourceRoot":"","sources":["../../src/action-list/action-list.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAC;AAEvC,OAAO,mBAAmB,CAAC;AAO3B;;;;;;;;;;GAUG;AACH,MAAM,UAAU,UAAU,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAmB;IAC3E,OAAO,CACL,aAAI,SAAS,EAAE,EAAE,CAAC,iBAAiB,EAAE,SAAS,CAAC,KAAM,KAAK,YACvD,QAAQ,GACN,CACN,CAAC;AACJ,CAAC"}
@@ -0,0 +1,3 @@
1
+ export type { ActionListProps } from './action-list';
2
+ export { ActionList } from './action-list';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/action-list/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { ActionList } from './action-list';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/action-list/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC"}
package/dist/index.d.ts CHANGED
@@ -9,6 +9,8 @@
9
9
  * `.storybook/preview.ts` for the canonical setup.
10
10
  */
11
11
  export * from '@manakind/ui-core';
12
+ export * from './action-item';
13
+ export * from './action-list';
12
14
  export * from './category-card';
13
15
  export * from './focus-item';
14
16
  export * from './focus-list';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC"}
package/dist/index.js CHANGED
@@ -9,6 +9,8 @@
9
9
  * `.storybook/preview.ts` for the canonical setup.
10
10
  */
11
11
  export * from '@manakind/ui-core';
12
+ export * from './action-item';
13
+ export * from './action-list';
12
14
  export * from './category-card';
13
15
  export * from './focus-item';
14
16
  export * from './focus-list';
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@manakind/manuia-ui",
3
- "version": "0.13.0",
3
+ "version": "0.15.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.12.0",
41
- "@manakind/ui-core": "0.14.0"
40
+ "@manakind/manuia-tokens": "0.13.0",
41
+ "@manakind/ui-core": "0.15.0"
42
42
  },
43
43
  "peerDependencies": {
44
44
  "react": "^19.0.0",