@manakind/manuia-ui 0.22.0 → 0.23.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.
Files changed (52) hide show
  1. package/README.md +21 -3
  2. package/dist/action-item/action-item.css +7 -0
  3. package/dist/action-item/action-item.d.ts +14 -2
  4. package/dist/action-item/action-item.d.ts.map +1 -1
  5. package/dist/action-item/action-item.js +5 -2
  6. package/dist/action-item/action-item.js.map +1 -1
  7. package/dist/category-label/category-label.css +75 -0
  8. package/dist/category-label/category-label.css.d.ts +2 -0
  9. package/dist/category-label/category-label.d.ts +40 -0
  10. package/dist/category-label/category-label.d.ts.map +1 -0
  11. package/dist/category-label/category-label.js +25 -0
  12. package/dist/category-label/category-label.js.map +1 -0
  13. package/dist/category-label/index.d.ts +3 -0
  14. package/dist/category-label/index.d.ts.map +1 -0
  15. package/dist/category-label/index.js +2 -0
  16. package/dist/category-label/index.js.map +1 -0
  17. package/dist/focus-item/focus-item.d.ts +1 -1
  18. package/dist/focus-item/focus-item.d.ts.map +1 -1
  19. package/dist/goal-card/goal-card.d.ts +4 -7
  20. package/dist/goal-card/goal-card.d.ts.map +1 -1
  21. package/dist/goal-card/goal-card.js.map +1 -1
  22. package/dist/goal-categories/goal-categories.css +0 -25
  23. package/dist/goal-categories/goal-categories.d.ts +5 -1
  24. package/dist/goal-categories/goal-categories.d.ts.map +1 -1
  25. package/dist/goal-categories/goal-categories.js +4 -6
  26. package/dist/goal-categories/goal-categories.js.map +1 -1
  27. package/dist/index.d.ts +2 -0
  28. package/dist/index.d.ts.map +1 -1
  29. package/dist/index.js +2 -0
  30. package/dist/index.js.map +1 -1
  31. package/dist/item-accent.css +33 -0
  32. package/dist/item-accent.css.d.ts +2 -0
  33. package/dist/item-accent.d.ts +13 -0
  34. package/dist/item-accent.d.ts.map +1 -0
  35. package/dist/item-accent.js +18 -0
  36. package/dist/item-accent.js.map +1 -0
  37. package/dist/milestone-timeline/index.d.ts +3 -0
  38. package/dist/milestone-timeline/index.d.ts.map +1 -0
  39. package/dist/milestone-timeline/index.js +2 -0
  40. package/dist/milestone-timeline/index.js.map +1 -0
  41. package/dist/milestone-timeline/milestone-timeline.css +187 -0
  42. package/dist/milestone-timeline/milestone-timeline.css.d.ts +2 -0
  43. package/dist/milestone-timeline/milestone-timeline.d.ts +100 -0
  44. package/dist/milestone-timeline/milestone-timeline.d.ts.map +1 -0
  45. package/dist/milestone-timeline/milestone-timeline.js +45 -0
  46. package/dist/milestone-timeline/milestone-timeline.js.map +1 -0
  47. package/dist/outcome-item/outcome-item.css +7 -0
  48. package/dist/outcome-item/outcome-item.d.ts +14 -2
  49. package/dist/outcome-item/outcome-item.d.ts.map +1 -1
  50. package/dist/outcome-item/outcome-item.js +5 -2
  51. package/dist/outcome-item/outcome-item.js.map +1 -1
  52. package/package.json +3 -3
package/README.md CHANGED
@@ -1,9 +1,8 @@
1
1
  # `@manakind/manuia-ui`
2
2
 
3
3
  The Manuia-flavored surface of the [Manakind](https://github.com/Humanity-Plus/Manakind)
4
- design system. Today it re-exports the shared base components from
5
- `@manakind/ui-core`; Manuia-specific compositions (cards, flows, layouts unique
6
- to Manuia) will live alongside this barrel as they are built.
4
+ design system. It re-exports the shared base components from
5
+ `@manakind/ui-core` alongside Manuia-specific compositions.
7
6
 
8
7
  Pair it with `@manakind/manuia-tokens`, whose `theme.css` resolves the `--ds-*`
9
8
  contract into Manuia's visual style.
@@ -42,6 +41,25 @@ export function Continue() {
42
41
  }
43
42
  ```
44
43
 
44
+ ## Components
45
+
46
+ The root `@manakind/manuia-ui` export includes:
47
+
48
+ - All shared components, including `Breadcrumb` for ancestor navigation.
49
+ - `CategoryLabel` for one category's name and colour dot or glyph, optionally linked.
50
+ - `GoalCategories` for a list of category labels, with an optional overflow count.
51
+ - `MilestoneTimeline` for a project's start, milestones and end, with progress,
52
+ product-supplied controls and a collapsible ordered list.
53
+ - `ActionItem` and `OutcomeItem` for rows with an optional `eyebrow` above the title
54
+ and a validated `accentColor`. Row styles, including sortable transforms, are preserved.
55
+ - `ActionList`, `CategoryCard`, `FocusItem`, `FocusList`, `GoalCard`, `GoalList`,
56
+ `GoalListItem`, `GoalStatusMenu` and `GoalTabTrigger`.
57
+
58
+ See the [Breadcrumb](https://github.com/Humanity-Plus/Manakind/blob/main/docs/components/breadcrumb.mdx),
59
+ [CategoryLabel](https://github.com/Humanity-Plus/Manakind/blob/main/docs/components/category-label.mdx) and
60
+ [MilestoneTimeline](https://github.com/Humanity-Plus/Manakind/blob/main/docs/components/milestone-timeline.mdx) docs for usage and
61
+ accessibility.
62
+
45
63
  ## License
46
64
 
47
65
  MIT — see [LICENSE](./LICENSE).
@@ -218,6 +218,13 @@
218
218
  display: contents;
219
219
  }
220
220
 
221
+ /* The breadcrumb keeps its own line above the toggle and title, under the title's column. */
222
+ & .mui-action-item__eyebrow {
223
+ order: -1;
224
+ flex: 0 0 calc(100% - var(--mui-action-item-indent));
225
+ margin-inline-start: var(--mui-action-item-indent);
226
+ }
227
+
221
228
  & .mui-action-item__title {
222
229
  flex: 1 1 0;
223
230
  align-self: center;
@@ -1,6 +1,7 @@
1
1
  import { type BadgeVariant, type IconSource } from '@manakind/ui-core';
2
2
  import type { ComponentProps, ReactNode } from 'react';
3
3
  import { type GoalCategory } from '../goal-categories';
4
+ import '../item-accent.css';
4
5
  import '../leading-slot.css';
5
6
  import './action-item.css';
6
7
  /** One fact about the action, shown after the title: its project, outcome, effort, duration. */
@@ -50,7 +51,7 @@ export interface ActionItemProps extends Omit<ComponentProps<'li'>, 'title' | 'c
50
51
  priority?: ActionItemPriority;
51
52
  /** Facts shown after the title, each with an optional glyph. */
52
53
  details?: ActionItemDetail[];
53
- /** Categories the action belongs to, as dotted text. */
54
+ /** Categories the action belongs to, each a `CategoryLabel`. */
54
55
  categories?: GoalCategory[];
55
56
  /** How many categories to show before collapsing into `+N more`. Defaults to 2, as on `GoalListItem`. */
56
57
  maxVisibleCategories?: number;
@@ -94,6 +95,17 @@ export interface ActionItemProps extends Omit<ComponentProps<'li'>, 'title' | 'c
94
95
  * it is given. Defaults to `default`.
95
96
  */
96
97
  density?: ActionItemDensity;
98
+ /**
99
+ * Where the item lives, above its title: a `Breadcrumb` of its category,
100
+ * project or outcome, say. Rendered as given.
101
+ */
102
+ eyebrow?: ReactNode;
103
+ /**
104
+ * The item's category colour as a straight bar along the card's leading
105
+ * edge, for scanning a long mixed list. Data, not a token: validated by
106
+ * `safeColor` and ignored when not a colour. Leave it off a lone item.
107
+ */
108
+ accentColor?: string;
97
109
  /** Extra class names on the `<li>`. */
98
110
  className?: string;
99
111
  /**
@@ -128,5 +140,5 @@ export interface ActionItemProps extends Omit<ComponentProps<'li'>, 'title' | 'c
128
140
  * count a screen reader hears is the whole list's, and a sortable list
129
141
  * passes its drag library's ref and transform style.
130
142
  */
131
- export declare function ActionItem({ title, completed, onCompletedChange, completeIcon, priority, details, categories, maxVisibleCategories, note, noteTone, selected, onSelectedChange, controls, secondary, leading, titleAs, density, className, children, ...listItemProps }: ActionItemProps): import("react/jsx-runtime").JSX.Element;
143
+ export declare function ActionItem({ title, completed, onCompletedChange, completeIcon, priority, details, categories, maxVisibleCategories, note, noteTone, selected, onSelectedChange, controls, secondary, leading, titleAs, density, eyebrow, accentColor, className, children, ...listItemProps }: ActionItemProps): import("react/jsx-runtime").JSX.Element;
132
144
  //# sourceMappingURL=action-item.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"action-item.d.ts","sourceRoot":"","sources":["../../src/action-item/action-item.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"action-item.d.ts","sourceRoot":"","sources":["../../src/action-item/action-item.tsx"],"names":[],"mappings":"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"}
@@ -1,6 +1,8 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { Badge, Card, CardTitle, Checkbox, cx, Icon, IconButton, } from '@manakind/ui-core';
3
3
  import { GoalCategories } from '../goal-categories';
4
+ import '../item-accent.css';
5
+ import { accentProps } from '../item-accent';
4
6
  import '../leading-slot.css';
5
7
  import './action-item.css';
6
8
  /**
@@ -28,7 +30,7 @@ import './action-item.css';
28
30
  * count a screen reader hears is the whole list's, and a sortable list
29
31
  * passes its drag library's ref and transform style.
30
32
  */
31
- export function ActionItem({ title, completed, onCompletedChange, completeIcon, priority, details = [], categories = [], maxVisibleCategories = 2, note, noteTone = 'muted', selected = false, onSelectedChange, controls, secondary, leading, titleAs = 'h3', density = 'default', className, children, ...listItemProps }) {
33
+ export function ActionItem({ title, completed, onCompletedChange, completeIcon, priority, details = [], categories = [], maxVisibleCategories = 2, note, noteTone = 'muted', selected = false, onSelectedChange, controls, secondary, leading, titleAs = 'h3', density = 'default', eyebrow, accentColor, className, children, ...listItemProps }) {
32
34
  const selectable = onSelectedChange !== undefined;
33
35
  const compact = density === 'compact';
34
36
  const toggle = completeIcon && onCompletedChange ? (_jsx(IconButton, { className: "mui-action-item__complete", variant: completed ? 'primary' : 'secondary', size: compact ? 'sm' : 'md', icon: completeIcon, "aria-pressed": completed, "aria-label": `Complete ${title}`, onClick: () => onCompletedChange(!completed) })) : null;
@@ -45,6 +47,7 @@ export function ActionItem({ title, completed, onCompletedChange, completeIcon,
45
47
  });
46
48
  const priorityDetail = priority ? (_jsxs("span", { className: cx('mui-action-item__detail', 'mui-action-item__priority', `mui-action-item__priority--${priority.level}`), children: [priority.icon && (_jsx(Icon, { source: priority.icon, size: "sm", decorative: true, className: "mui-action-item__detail-icon mui-action-item__priority-icon" })), _jsx("span", { className: "mui-action-item__detail-label", children: priority.label })] })) : null;
47
49
  const detailList = priority || details.length > 0 || note ? (_jsxs("p", { className: "mui-action-item__details", children: [priorityDetail, detailRows, note && (_jsx(Badge, { variant: noteTone, className: "mui-action-item__note", children: note }))] })) : null;
48
- return (_jsxs("li", { ...listItemProps, className: cx('mui-leading-slot', 'mui-action-item', compact && 'mui-action-item--compact', completed && 'mui-action-item--completed', selectable && selected && 'mui-action-item--selected', className), children: [leading && (_jsx("div", { className: "mui-leading-slot__leading mui-action-item__leading", children: leading })), _jsx(Card, { className: "mui-leading-slot__card 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] }));
50
+ const accent = accentProps(accentColor, listItemProps.style);
51
+ return (_jsxs("li", { ...listItemProps, style: accent.style, className: cx('mui-leading-slot', 'mui-action-item', accent.className, compact && 'mui-action-item--compact', completed && 'mui-action-item--completed', selectable && selected && 'mui-action-item--selected', className), children: [leading && (_jsx("div", { className: "mui-leading-slot__leading mui-action-item__leading", children: leading })), _jsx(Card, { className: "mui-leading-slot__card mui-action-item__card", children: _jsxs("div", { className: "mui-action-item__row", children: [toggle, _jsxs("div", { className: "mui-action-item__main", children: [eyebrow && _jsx("div", { className: "mui-action-item__eyebrow", children: eyebrow }), _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] }));
49
52
  }
50
53
  //# sourceMappingURL=action-item.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"action-item.js","sourceRoot":"","sources":["../../src/action-item/action-item.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"action-item.js","sourceRoot":"","sources":["../../src/action-item/action-item.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,75 @@
1
+ @layer components {
2
+ .mui-category-label {
3
+ display: inline-flex;
4
+ align-items: center;
5
+ gap: var(--semantic-space-gap-tight);
6
+ min-width: 0;
7
+ /*
8
+ * The surrounding text's colour and, through the inline-flex boxes that
9
+ * would otherwise stop it, its underline: a list makes it muted, a
10
+ * breadcrumb link underlines it on hover like the trail's other links.
11
+ */
12
+ color: inherit;
13
+ text-decoration: inherit;
14
+ font-size: var(--primitives-font-size-sm);
15
+ overflow-wrap: anywhere;
16
+
17
+ & .mui-category-label__inner,
18
+ & .mui-category-label__name {
19
+ text-decoration: inherit;
20
+ }
21
+
22
+ & .mui-category-label__inner {
23
+ display: inline-flex;
24
+ align-items: center;
25
+ gap: inherit;
26
+ min-width: 0;
27
+ }
28
+
29
+ /*
30
+ * `--mui-category` is the category's stored colour, set per label and
31
+ * falling back to the primary action colour. The mark is reinforcement,
32
+ * never the signal: the name beside it carries the category at the
33
+ * surface's own contrast, so no floor is promised for a user's colour.
34
+ * The ring keeps the dot from vanishing against a near-surface colour.
35
+ */
36
+ & .mui-category-label__dot {
37
+ flex-shrink: 0;
38
+ width: var(--component-category-label-dot-size-sm);
39
+ height: var(--component-category-label-dot-size-sm);
40
+ border-radius: var(--semantic-radius-pill);
41
+ background-color: var(--mui-category, var(--semantic-color-action-primary));
42
+ box-shadow: 0 0 0 1px var(--semantic-color-border-subtle);
43
+ }
44
+
45
+ & .mui-category-label__icon {
46
+ flex-shrink: 0;
47
+ color: var(--mui-category, var(--semantic-color-action-primary));
48
+ }
49
+ }
50
+
51
+ .mui-category-label--md {
52
+ font-size: var(--primitives-font-size-md);
53
+
54
+ & .mui-category-label__dot {
55
+ width: var(--component-category-label-dot-size-md);
56
+ height: var(--component-category-label-dot-size-md);
57
+ }
58
+ }
59
+
60
+ .mui-category-label--link {
61
+ text-decoration: none;
62
+ border-radius: var(--semantic-radius-interactive);
63
+
64
+ &:hover .mui-category-label__name {
65
+ color: var(--semantic-color-text-default);
66
+ text-decoration: underline;
67
+ text-underline-offset: 0.2em;
68
+ }
69
+
70
+ &:focus-visible {
71
+ outline: 2px solid var(--semantic-color-focus-ring);
72
+ outline-offset: 3px;
73
+ }
74
+ }
75
+ }
@@ -0,0 +1,2 @@
1
+ /* AUTOGENERATED: types for the stylesheet beside it. */
2
+ export {};
@@ -0,0 +1,40 @@
1
+ import { type IconSource, type LinkComponentProps } from '@manakind/ui-core';
2
+ import type { ElementType } from 'react';
3
+ import './category-label.css';
4
+ /** What the link component receives; the props every `linkComponent` takes. */
5
+ export type CategoryLabelLinkProps = LinkComponentProps;
6
+ export interface CategoryLabelProps {
7
+ /** The category's name. Carries the meaning — the colour and glyph only reinforce it. */
8
+ name: string;
9
+ /**
10
+ * The category's user-chosen colour, as data rather than a token; validated
11
+ * by `safeColor` before it reaches a style attribute. Falls back to the
12
+ * primary action colour.
13
+ */
14
+ color?: string;
15
+ /**
16
+ * The category's own glyph, supplied by the product. Drawn in the category
17
+ * colour in place of the dot; without one the label shows the dot.
18
+ */
19
+ icon?: IconSource;
20
+ /** `sm` beside a card's details; `md` in a page header. Defaults to `sm`. */
21
+ size?: 'sm' | 'md';
22
+ /** Makes the label a link to the category. */
23
+ href?: string;
24
+ /** Renders the link, so a product passes its router's link. Defaults to `<a>`. */
25
+ linkComponent?: ElementType<CategoryLabelLinkProps>;
26
+ /** Extra class names on the outermost element. */
27
+ className?: string;
28
+ }
29
+ /**
30
+ * One Manuia category: its glyph or dot in the category colour, then its name.
31
+ * The one way a category is named on a card, a list row or a page header;
32
+ * `GoalCategories` lists several of them.
33
+ *
34
+ * @remarks
35
+ * The name is text on the surface it sits on, so it keeps that surface's
36
+ * checked contrast; the colour can be any colour a user picked, so no
37
+ * contrast floor is promised for the mark and none is needed.
38
+ */
39
+ export declare function CategoryLabel({ name, color, icon, size, href, linkComponent: Link, className, }: CategoryLabelProps): import("react/jsx-runtime").JSX.Element;
40
+ //# sourceMappingURL=category-label.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"category-label.d.ts","sourceRoot":"","sources":["../../src/category-label/category-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,UAAU,EAAE,KAAK,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACvF,OAAO,KAAK,EAAiB,WAAW,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,sBAAsB,CAAC;AAE9B,+EAA+E;AAC/E,MAAM,MAAM,sBAAsB,GAAG,kBAAkB,CAAC;AAExD,MAAM,WAAW,kBAAkB;IACjC,yFAAyF;IACzF,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,6EAA6E;IAC7E,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kFAAkF;IAClF,aAAa,CAAC,EAAE,WAAW,CAAC,sBAAsB,CAAC,CAAC;IACpD,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,IAAW,EACX,IAAI,EACJ,aAAa,EAAE,IAAU,EACzB,SAAS,GACV,EAAE,kBAAkB,2CAkCpB"}
@@ -0,0 +1,25 @@
1
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { cx, Icon } from '@manakind/ui-core';
3
+ import { safeColor } from '../css-color';
4
+ import './category-label.css';
5
+ /**
6
+ * One Manuia category: its glyph or dot in the category colour, then its name.
7
+ * The one way a category is named on a card, a list row or a page header;
8
+ * `GoalCategories` lists several of them.
9
+ *
10
+ * @remarks
11
+ * The name is text on the surface it sits on, so it keeps that surface's
12
+ * checked contrast; the colour can be any colour a user picked, so no
13
+ * contrast floor is promised for the mark and none is needed.
14
+ */
15
+ export function CategoryLabel({ name, color, icon, size = 'sm', href, linkComponent: Link = 'a', className, }) {
16
+ const tint = safeColor(color);
17
+ const style = tint ? { '--mui-category': tint } : undefined;
18
+ const classes = cx('mui-category-label', `mui-category-label--${size}`, href && 'mui-category-label--link', className);
19
+ const content = (_jsxs(_Fragment, { children: [icon ? (_jsx(Icon, { source: icon, size: size, decorative: true, className: "mui-category-label__icon" })) : (_jsx("span", { className: "mui-category-label__dot", "aria-hidden": "true" })), _jsx("span", { className: "mui-category-label__name", children: name })] }));
20
+ if (href) {
21
+ return (_jsx(Link, { href: href, className: classes, children: _jsx("span", { className: "mui-category-label__inner", style: style, children: content }) }));
22
+ }
23
+ return (_jsx("span", { className: classes, style: style, children: content }));
24
+ }
25
+ //# sourceMappingURL=category-label.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"category-label.js","sourceRoot":"","sources":["../../src/category-label/category-label.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,IAAI,EAA4C,MAAM,mBAAmB,CAAC;AAEvF,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,sBAAsB,CAAC;AA6B9B;;;;;;;;;GASG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,IAAI,GAAG,IAAI,EACX,IAAI,EACJ,aAAa,EAAE,IAAI,GAAG,GAAG,EACzB,SAAS,GACU;IACnB,MAAM,IAAI,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;IAC9B,MAAM,KAAK,GAAG,IAAI,CAAC,CAAC,CAAE,EAAE,gBAAgB,EAAE,IAAI,EAAoB,CAAC,CAAC,CAAC,SAAS,CAAC;IAC/E,MAAM,OAAO,GAAG,EAAE,CAChB,oBAAoB,EACpB,uBAAuB,IAAI,EAAE,EAC7B,IAAI,IAAI,0BAA0B,EAClC,SAAS,CACV,CAAC;IACF,MAAM,OAAO,GAAG,CACd,8BACG,IAAI,CAAC,CAAC,CAAC,CACN,KAAC,IAAI,IAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,QAAC,SAAS,EAAC,0BAA0B,GAAG,CACnF,CAAC,CAAC,CAAC,CACF,eAAM,SAAS,EAAC,yBAAyB,iBAAa,MAAM,GAAG,CAChE,EACD,eAAM,SAAS,EAAC,0BAA0B,YAAE,IAAI,GAAQ,IACvD,CACJ,CAAC;IAEF,IAAI,IAAI,EAAE,CAAC;QACT,OAAO,CACL,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,YAClC,eAAM,SAAS,EAAC,2BAA2B,EAAC,KAAK,EAAE,KAAK,YACrD,OAAO,GACH,GACF,CACR,CAAC;IACJ,CAAC;IACD,OAAO,CACL,eAAM,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,YACnC,OAAO,GACH,CACR,CAAC;AACJ,CAAC"}
@@ -0,0 +1,3 @@
1
+ export type { CategoryLabelLinkProps, CategoryLabelProps } from './category-label';
2
+ export { CategoryLabel } from './category-label';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/category-label/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACnF,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { CategoryLabel } from './category-label';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/category-label/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}
@@ -21,7 +21,7 @@ export interface FocusItemProps extends Omit<ComponentProps<'li'>, 'title' | 'ch
21
21
  kindIcon?: IconSource;
22
22
  /** Pre-formatted facts shown after the kind, such as "High priority" or "30 min". */
23
23
  details?: string[];
24
- /** Categories the item belongs to, as dotted text. */
24
+ /** Categories the item belongs to, each a `CategoryLabel`. */
25
25
  categories?: GoalCategory[];
26
26
  /**
27
27
  * An outcome's open actions, listed under its title. Ignored for an action.
@@ -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,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAkB,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,qBAAqB,CAAC;AAC7B,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,cACf,SAAQ,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,WAAW,CAAC;IACtE,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;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,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;;;;;;;;;;;;;;;;;;;;GAoBG;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,QAAQ,EACR,OAAO,EACP,OAAc,EACd,SAAS,EACT,QAAQ,EACR,GAAG,aAAa,EACjB,EAAE,cAAc,2CAoEhB"}
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,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAkB,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,qBAAqB,CAAC;AAC7B,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,cACf,SAAQ,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,WAAW,CAAC;IACtE,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,8DAA8D;IAC9D,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;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,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;;;;;;;;;;;;;;;;;;;;GAoBG;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,QAAQ,EACR,OAAO,EACP,OAAc,EACd,SAAS,EACT,QAAQ,EACR,GAAG,aAAa,EACjB,EAAE,cAAc,2CAoEhB"}
@@ -1,5 +1,5 @@
1
- import { type IconSource } from '@manakind/ui-core';
2
- import type { ElementType, ReactNode } from 'react';
1
+ import { type IconSource, type LinkComponentProps } from '@manakind/ui-core';
2
+ import type { ElementType } from 'react';
3
3
  import { type GoalCategory } from '../goal-categories';
4
4
  import { type GoalStatus } from '../goal-status-menu';
5
5
  import './goal-card.css';
@@ -20,11 +20,8 @@ export interface GoalMilestone {
20
20
  * The props a `linkComponent` receives. A plain `'a'` and a router's link
21
21
  * (Next's `Link`) both satisfy it.
22
22
  */
23
- export interface GoalLinkProps {
24
- href: string;
25
- className?: string;
26
- children?: ReactNode;
27
- }
23
+ /** What the link component receives; the props every `linkComponent` takes. */
24
+ export type GoalLinkProps = LinkComponentProps;
28
25
  export interface GoalCardProps {
29
26
  /** Goal title. Rendered as the card's heading. */
30
27
  title: string;
@@ -1 +1 @@
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"}
1
+ {"version":3,"file":"goal-card.d.ts","sourceRoot":"","sources":["../../src/goal-card/goal-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,UAAU,EACf,KAAK,kBAAkB,EAExB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACzC,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,+EAA+E;AAC/E,MAAM,MAAM,aAAa,GAAG,kBAAkB,CAAC;AAE/C,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"}
@@ -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,EAEJ,QAAQ,GACT,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,cAAc,EAAqB,MAAM,oBAAoB,CAAC;AACvE,OAAO,EAAmB,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACtE,OAAO,iBAAiB,CAAC;AAiHzB,iDAAiD;AACjD,MAAM,UAAU,GAA6B;IAC3C,QAAQ,EAAE,WAAW;IACrB,QAAQ,EAAE,MAAM;IAChB,SAAS,EAAE,MAAM;IACjB,OAAO,EAAE,QAAQ;IACjB,MAAM,EAAE,OAAO;CAChB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,QAAQ,CAAC,EACvB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,MAAM,EACN,UAAU,EACV,cAAc,EACd,mBAAmB,EACnB,uBAAuB,EACvB,IAAI,EACJ,aAAa,EAAE,aAAa,GAAG,GAAG,EAClC,WAAW,EACX,UAAU,GAAG,EAAE,EACf,oBAAoB,GAAG,CAAC,EACxB,UAAU,EACV,UAAU,EACV,QAAQ,EACR,aAAa,EACb,sBAAsB,GAAG,cAAc,EACvC,UAAU,EACV,OAAO,GAAG,IAAI,EACd,SAAS,GACK;IACd,MAAM,SAAS,GAAG,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,MAAM,IAAI,CAAC,CAAC;IACrE,MAAM,KAAK,GAAG,UAAU,EAAE,MAAM,IAAI,CAAC,CAAC;IAEtC;;;;;;;;;OASG;IACH,OAAO,CACL,MAAC,IAAI,IACH,WAAW,EAAE,OAAO,CAAC,IAAI,CAAC,EAC1B,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,kBAAkB,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC,aAE/E,eAAM,SAAS,EAAC,yBAAyB,iBAAa,MAAM,GAAG,EAC/D,gBAAM,SAAS,EAAC,wBAAwB,iBAAa,MAAM,aACzD,gBAAQ,EACR,gBAAQ,EACR,gBAAQ,EACR,gBAAQ,IACH,EAEP,MAAC,UAAU,IAAC,SAAS,EAAC,uBAAuB,aAC3C,eAAK,SAAS,EAAC,qBAAqB,aAClC,gBAAM,SAAS,EAAC,2BAA2B,aACxC,UAAU,IAAI,CACb,eAAM,SAAS,EAAC,uBAAuB,iBAAa,MAAM,YACxD,KAAC,IAAI,IAAC,MAAM,EAAE,UAAU,EAAE,IAAI,EAAC,IAAI,EAAC,UAAU,SAAG,GAC5C,CACR,EACD,gBAAM,SAAS,EAAC,qBAAqB,aAClC,QAAQ,IAAI,KAAC,IAAI,IAAC,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAC,IAAI,EAAC,UAAU,SAAG,EAC3D,IAAI,EACJ,WAAW,IAAI,CACd,gBAAM,SAAS,EAAC,uBAAuB,aACpC,GAAG,EACJ,8BAAkB,MAAM,uBAAS,OAAE,WAAW,IACzC,CACR,IACI,IACF,EACP,KAAC,cAAc,IACb,cAAc,EAAC,6BAA6B,EAC5C,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,mBAAmB,EAC9B,aAAa,EAAE,uBAAuB,GACtC,IACE,EAEN,KAAC,cAAc,IACb,SAAS,EAAC,2BAA2B,EACrC,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,oBAAoB,GAChC,EAEF,KAAC,SAAS,IAAC,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC,sBAAsB,YACrD,IAAI,CAAC,CAAC,CAAC,CACN,KAAC,QAAQ,IAAC,OAAO,kBACf,KAAC,aAAa,IAAC,IAAI,EAAE,IAAI,YAAG,KAAK,GAAiB,GACzC,CACZ,CAAC,CAAC,CAAC,CACF,KAAK,CACN,GACS,EAEZ,eAAM,SAAS,EAAC,wBAAwB,iBAAa,MAAM,GAAG,IACnD,EAEb,MAAC,WAAW,IAAC,SAAS,EAAC,wBAAwB,aAC7C,YAAG,SAAS,EAAC,4BAA4B,YAAE,WAAW,IAAI,0BAA0B,GAAK,EAExF,KAAK,GAAG,CAAC,IAAI,CACZ,eAAK,SAAS,EAAC,2BAA2B,aACxC,KAAC,QAAQ,IACP,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,SAAS,EAChB,GAAG,EAAE,KAAK,EACV,KAAK,EAAE,eAAM,SAAS,EAAC,iCAAiC,2BAAkB,EAC1E,SAAS,EAAE,GAAG,SAAS,OAAO,KAAK,EAAE,GACrC,EACF,aAAI,SAAS,EAAC,+BAA+B,YAC1C,UAAU,EAAE,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAC9B,cAEE,SAAS,EAAE,EAAE,CACX,0BAA0B,EAC1B,SAAS,CAAC,SAAS,IAAI,gCAAgC,CACxD,aAED,eAAM,SAAS,EAAC,iCAAiC,iBAAa,MAAM,YACjE,SAAS,CAAC,SAAS,IAAI,aAAa,IAAI,CACvC,KAAC,IAAI,IAAC,MAAM,EAAE,aAAa,EAAE,IAAI,EAAC,IAAI,EAAC,UAAU,SAAG,CACrD,GACI,EACP,eAAM,SAAS,EAAC,gCAAgC,YAAE,SAAS,CAAC,KAAK,GAAQ,EACxE,SAAS,CAAC,eAAe,IAAI,CAC5B,eAAM,SAAS,EAAC,oCAAoC,YAClD,KAAC,IAAI,IAAC,MAAM,EAAE,sBAAsB,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,qBAAqB,GAAG,GACzE,CACR,KAhBI,SAAS,CAAC,EAAE,CAiBd,CACN,CAAC,GACC,IACD,CACP,EAEA,UAAU,IAAI,CACb,aAAG,SAAS,EAAC,uBAAuB,aAClC,eAAM,SAAS,EAAC,6BAA6B,wBAAe,OAAE,UAAU,IACtE,CACL,IACW,IACT,CACR,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,cAAc,GAAe,CAAC,KAAK,EAAE,EAAE,CAAC,CAC5C,6BAAiB,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,KAAK,KAAK,YAC/D,eACE,CAAC,EAAC,oBAAoB,EACtB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,KAAK,EACjB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,GACE,CACP,CAAC;AACF,cAAc,CAAC,WAAW,GAAG,wBAAwB,CAAC"}
1
+ {"version":3,"file":"goal-card.js","sourceRoot":"","sources":["../../src/goal-card/goal-card.tsx"],"names":[],"mappings":"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"}
@@ -17,31 +17,6 @@
17
17
  font-size: var(--primitives-font-size-sm);
18
18
  }
19
19
 
20
- /*
21
- * `--mui-goal-category` is set per item from the category's stored
22
- * colour, falling back to the primary action colour for a category that
23
- * has none yet.
24
- *
25
- * The dot is deliberately NOT load-bearing. A category colour is user
26
- * data — any colour at all, including one that matches the card surface —
27
- * so no contrast floor can be promised for it, and promising one would be
28
- * a claim this component cannot keep. The name sits beside it as text on
29
- * the card surface at that surface's own checked contrast, which is what
30
- * actually carries the category.
31
- *
32
- * The ring exists so the dot does not vanish entirely against a
33
- * near-surface colour. It is a visibility floor for a decoration, not a
34
- * contrast guarantee.
35
- */
36
- & .mui-goal-categories__dot {
37
- flex-shrink: 0;
38
- width: var(--component-goal-categories-dot-size);
39
- height: var(--component-goal-categories-dot-size);
40
- border-radius: var(--semantic-radius-pill);
41
- background-color: var(--mui-goal-category, var(--semantic-color-action-primary));
42
- box-shadow: 0 0 0 1px var(--semantic-color-border-subtle);
43
- }
44
-
45
20
  /*
46
21
  * No colour override: the overflow item is the same muted text as the
47
22
  * rest, and its lack of a dot already sets it apart. It keeps a class so
@@ -1,3 +1,4 @@
1
+ import { type IconSource } from '@manakind/ui-core';
1
2
  import './goal-categories.css';
2
3
  export interface GoalCategory {
3
4
  /** Stable identifier. */
@@ -20,6 +21,8 @@ export interface GoalCategory {
20
21
  * action colour.
21
22
  */
22
23
  color?: string;
24
+ /** The category's own glyph, drawn in its colour in place of the dot. */
25
+ icon?: IconSource;
23
26
  }
24
27
  export interface GoalCategoriesProps {
25
28
  /** Categories to show. Renders nothing when empty. */
@@ -35,7 +38,8 @@ export interface GoalCategoriesProps {
35
38
  className?: string;
36
39
  }
37
40
  /**
38
- * The categories a Manuia goal belongs to, as dotted text.
41
+ * The categories a Manuia goal, action or outcome belongs to, each a
42
+ * `CategoryLabel`.
39
43
  *
40
44
  * A Manuia-specific composition: "a goal belongs to N categories, each with a
41
45
  * user-chosen colour, collapsing after N visible" is a product concept and
@@ -1 +1 @@
1
- {"version":3,"file":"goal-categories.d.ts","sourceRoot":"","sources":["../../src/goal-categories/goal-categories.tsx"],"names":[],"mappings":"AAGA,OAAO,uBAAuB,CAAC;AAE/B,MAAM,WAAW,YAAY;IAC3B,yBAAyB;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,0EAA0E;IAC1E,IAAI,EAAE,MAAM,CAAC;IACb;;;;;;;;;;;;;;OAcG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,mBAAmB;IAClC,sDAAsD;IACtD,UAAU,EAAE,YAAY,EAAE,CAAC;IAC3B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,cAAc,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,mBAAmB,kDA0CxF"}
1
+ {"version":3,"file":"goal-categories.d.ts","sourceRoot":"","sources":["../../src/goal-categories/goal-categories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAExD,OAAO,uBAAuB,CAAC;AAE/B,MAAM,WAAW,YAAY;IAC3B,yBAAyB;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,0EAA0E;IAC1E,IAAI,EAAE,MAAM,CAAC;IACb;;;;;;;;;;;;;;OAcG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAED,MAAM,WAAW,mBAAmB;IAClC,sDAAsD;IACtD,UAAU,EAAE,YAAY,EAAE,CAAC;IAC3B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,cAAc,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,mBAAmB,kDAkCxF"}
@@ -1,9 +1,10 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { cx } from '@manakind/ui-core';
3
- import { safeColor } from '../css-color';
3
+ import { CategoryLabel } from '../category-label';
4
4
  import './goal-categories.css';
5
5
  /**
6
- * The categories a Manuia goal belongs to, as dotted text.
6
+ * The categories a Manuia goal, action or outcome belongs to, each a
7
+ * `CategoryLabel`.
7
8
  *
8
9
  * A Manuia-specific composition: "a goal belongs to N categories, each with a
9
10
  * user-chosen colour, collapsing after N visible" is a product concept and
@@ -38,9 +39,6 @@ export function GoalCategories({ categories, maxVisible, className }) {
38
39
  : undefined;
39
40
  const visible = limit === undefined ? categories : categories.slice(0, limit);
40
41
  const remaining = limit === undefined ? 0 : Math.max(categories.length - limit, 0);
41
- return (_jsxs("ul", { className: cx('mui-goal-categories', className), children: [visible.map((category) => {
42
- const dot = safeColor(category.color);
43
- return (_jsxs("li", { className: "mui-goal-categories__item", style: dot ? { '--mui-goal-category': dot } : undefined, children: [_jsx("span", { className: "mui-goal-categories__dot", "aria-hidden": "true" }), category.name] }, category.id));
44
- }), remaining > 0 && (_jsxs("li", { className: "mui-goal-categories__item mui-goal-categories__item--overflow", children: ["+", remaining, " more"] }))] }));
42
+ return (_jsxs("ul", { className: cx('mui-goal-categories', className), children: [visible.map((category) => (_jsx("li", { className: "mui-goal-categories__item", children: _jsx(CategoryLabel, { name: category.name, color: category.color, icon: category.icon }) }, category.id))), remaining > 0 && (_jsxs("li", { className: "mui-goal-categories__item mui-goal-categories__item--overflow", children: ["+", remaining, " more"] }))] }));
45
43
  }
46
44
  //# sourceMappingURL=goal-categories.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"goal-categories.js","sourceRoot":"","sources":["../../src/goal-categories/goal-categories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,uBAAuB,CAAC;AAuC/B;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,cAAc,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAuB;IACvF,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAEzC,uEAAuE;IACvE,4EAA4E;IAC5E,sEAAsE;IACtE,yEAAyE;IACzE,6EAA6E;IAC7E,wEAAwE;IACxE,sEAAsE;IACtE,wEAAwE;IACxE,4EAA4E;IAC5E,4EAA4E;IAC5E,OAAO;IACP,MAAM,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,UAAU,CAAC;QACvC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,UAAoB,CAAC,EAAE,CAAC,CAAC;QAC/C,CAAC,CAAC,SAAS,CAAC;IACd,MAAM,OAAO,GAAG,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;IAC9E,MAAM,SAAS,GAAG,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,MAAM,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC;IAEnF,OAAO,CACL,cAAI,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,aAChD,OAAO,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE;gBACxB,MAAM,GAAG,GAAG,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;gBACtC,OAAO,CACL,cAEE,SAAS,EAAC,2BAA2B,EACrC,KAAK,EAAE,GAAG,CAAC,CAAC,CAAE,EAAE,qBAAqB,EAAE,GAAG,EAAoB,CAAC,CAAC,CAAC,SAAS,aAE1E,eAAM,SAAS,EAAC,0BAA0B,iBAAa,MAAM,GAAG,EAC/D,QAAQ,CAAC,IAAI,KALT,QAAQ,CAAC,EAAE,CAMb,CACN,CAAC;YACJ,CAAC,CAAC,EACD,SAAS,GAAG,CAAC,IAAI,CAChB,cAAI,SAAS,EAAC,+DAA+D,kBACzE,SAAS,aACR,CACN,IACE,CACN,CAAC;AACJ,CAAC"}
1
+ {"version":3,"file":"goal-categories.js","sourceRoot":"","sources":["../../src/goal-categories/goal-categories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAmB,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,uBAAuB,CAAC;AAyC/B;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,cAAc,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAuB;IACvF,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAEzC,uEAAuE;IACvE,4EAA4E;IAC5E,sEAAsE;IACtE,yEAAyE;IACzE,6EAA6E;IAC7E,wEAAwE;IACxE,sEAAsE;IACtE,wEAAwE;IACxE,4EAA4E;IAC5E,4EAA4E;IAC5E,OAAO;IACP,MAAM,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,UAAU,CAAC;QACvC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,UAAoB,CAAC,EAAE,CAAC,CAAC;QAC/C,CAAC,CAAC,SAAS,CAAC;IACd,MAAM,OAAO,GAAG,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;IAC9E,MAAM,SAAS,GAAG,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,MAAM,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC;IAEnF,OAAO,CACL,cAAI,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,aAChD,OAAO,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACzB,aAAsB,SAAS,EAAC,2BAA2B,YACzD,KAAC,aAAa,IAAC,IAAI,EAAE,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,QAAQ,CAAC,KAAK,EAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,GAAI,IAD3E,QAAQ,CAAC,EAAE,CAEf,CACN,CAAC,EACD,SAAS,GAAG,CAAC,IAAI,CAChB,cAAI,SAAS,EAAC,+DAA+D,kBACzE,SAAS,aACR,CACN,IACE,CACN,CAAC;AACJ,CAAC"}
package/dist/index.d.ts CHANGED
@@ -12,6 +12,7 @@ export * from '@manakind/ui-core';
12
12
  export * from './action-item';
13
13
  export * from './action-list';
14
14
  export * from './category-card';
15
+ export * from './category-label';
15
16
  export * from './focus-item';
16
17
  export * from './focus-list';
17
18
  export * from './goal-card';
@@ -20,5 +21,6 @@ export * from './goal-list';
20
21
  export * from './goal-list-item';
21
22
  export * from './goal-status-menu';
22
23
  export * from './goal-tab-trigger';
24
+ export * from './milestone-timeline';
23
25
  export * from './outcome-item';
24
26
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
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;AACnC,cAAc,gBAAgB,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,kBAAkB,CAAC;AACjC,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;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC"}
package/dist/index.js CHANGED
@@ -12,6 +12,7 @@ export * from '@manakind/ui-core';
12
12
  export * from './action-item';
13
13
  export * from './action-list';
14
14
  export * from './category-card';
15
+ export * from './category-label';
15
16
  export * from './focus-item';
16
17
  export * from './focus-list';
17
18
  export * from './goal-card';
@@ -20,5 +21,6 @@ export * from './goal-list';
20
21
  export * from './goal-list-item';
21
22
  export * from './goal-status-menu';
22
23
  export * from './goal-tab-trigger';
24
+ export * from './milestone-timeline';
23
25
  export * from './outcome-item';
24
26
  //# sourceMappingURL=index.js.map
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,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;AACnC,cAAc,gBAAgB,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,kBAAkB,CAAC;AACjC,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;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC"}
@@ -0,0 +1,33 @@
1
+ @layer components {
2
+ /*
3
+ * A list row's category colour as a bar along the card's leading edge, for
4
+ * scanning a long mixed list. `--mui-item-accent` is set on the row from
5
+ * the product's colour, validated like a category's.
6
+ *
7
+ * The bar spans only the straight part of the edge: inset by the card's
8
+ * radius at both ends, so it never bends round a corner the way a
9
+ * `border-inline-start` does. It starts on the card's 1px border so it reads
10
+ * as the edge itself, and takes no pointer events. A compact row has no
11
+ * inline padding to cover, so it takes the bar's width and a gap as padding.
12
+ */
13
+ .mui-item-accent > .mui-leading-slot__card {
14
+ position: relative;
15
+
16
+ &::before {
17
+ content: "";
18
+ position: absolute;
19
+ inset-block: var(--ds-card-radius);
20
+ inset-inline-start: -1px;
21
+ width: var(--component-category-label-accent-width);
22
+ background-color: var(--mui-item-accent);
23
+ pointer-events: none;
24
+ }
25
+ }
26
+
27
+ .mui-item-accent.mui-action-item--compact > .mui-leading-slot__card {
28
+ padding-inline-start: calc(
29
+ var(--component-category-label-accent-width) +
30
+ var(--semantic-space-gap-tight)
31
+ );
32
+ }
33
+ }
@@ -0,0 +1,2 @@
1
+ /* AUTOGENERATED: types for the stylesheet beside it. */
2
+ export {};
@@ -0,0 +1,13 @@
1
+ import type { CSSProperties } from 'react';
2
+ /**
3
+ * A list row's accent: its class and its style with the colour added,
4
+ * decided by one validation so the two never disagree (a class without the
5
+ * colour would paint a transparent bar). Keeps whatever style the product
6
+ * passed, such as a sortable list's transform. An invalid colour leaves the
7
+ * row as it was.
8
+ */
9
+ export declare function accentProps(color: string | undefined, style: CSSProperties | undefined): {
10
+ className?: string;
11
+ style?: CSSProperties;
12
+ };
13
+ //# sourceMappingURL=item-accent.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"item-accent.d.ts","sourceRoot":"","sources":["../src/item-accent.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAG3C;;;;;;GAMG;AACH,wBAAgB,WAAW,CACzB,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,KAAK,EAAE,aAAa,GAAG,SAAS,GAC/B;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,aAAa,CAAA;CAAE,CAO/C"}
@@ -0,0 +1,18 @@
1
+ import { safeColor } from './css-color';
2
+ /**
3
+ * A list row's accent: its class and its style with the colour added,
4
+ * decided by one validation so the two never disagree (a class without the
5
+ * colour would paint a transparent bar). Keeps whatever style the product
6
+ * passed, such as a sortable list's transform. An invalid colour leaves the
7
+ * row as it was.
8
+ */
9
+ export function accentProps(color, style) {
10
+ const accent = safeColor(color);
11
+ if (!accent)
12
+ return { style };
13
+ return {
14
+ className: 'mui-item-accent',
15
+ style: { ...style, '--mui-item-accent': accent },
16
+ };
17
+ }
18
+ //# sourceMappingURL=item-accent.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"item-accent.js","sourceRoot":"","sources":["../src/item-accent.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC;;;;;;GAMG;AACH,MAAM,UAAU,WAAW,CACzB,KAAyB,EACzB,KAAgC;IAEhC,MAAM,MAAM,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;IAChC,IAAI,CAAC,MAAM;QAAE,OAAO,EAAE,KAAK,EAAE,CAAC;IAC9B,OAAO;QACL,SAAS,EAAE,iBAAiB;QAC5B,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,mBAAmB,EAAE,MAAM,EAAmB;KAClE,CAAC;AACJ,CAAC"}
@@ -0,0 +1,3 @@
1
+ export type { MilestoneTimelineEnd, MilestoneTimelineItem, MilestoneTimelineProps, MilestoneTimelineStart, } from './milestone-timeline';
2
+ export { MilestoneTimeline } from './milestone-timeline';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/milestone-timeline/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,oBAAoB,EACpB,qBAAqB,EACrB,sBAAsB,EACtB,sBAAsB,GACvB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { MilestoneTimeline } from './milestone-timeline';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/milestone-timeline/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC"}
@@ -0,0 +1,187 @@
1
+ @layer components {
2
+ .mui-milestone-timeline {
3
+ display: grid;
4
+ gap: var(--semantic-space-gap);
5
+ min-width: 0;
6
+ overflow-wrap: anywhere;
7
+ }
8
+
9
+ /* Toggle, title and count share a line while they fit; the count wraps under them when they don't. */
10
+ .mui-milestone-timeline__header {
11
+ display: flex;
12
+ flex-wrap: wrap;
13
+ align-items: center;
14
+ gap: var(--semantic-space-gap-tight);
15
+ min-width: 0;
16
+ }
17
+
18
+ .mui-milestone-timeline__title {
19
+ margin: 0;
20
+ }
21
+
22
+ .mui-milestone-timeline__summary {
23
+ margin-inline-start: auto;
24
+ color: var(--semantic-color-text-muted);
25
+ font-size: var(--primitives-font-size-sm);
26
+ }
27
+
28
+ /*
29
+ * The line: one column for the points, drawn down its centre behind them,
30
+ * and the text beside. It runs from the first point's centre to the last
31
+ * one's, so it never sticks out past the start or the end.
32
+ */
33
+ .mui-milestone-timeline__list {
34
+ --_marker: var(--component-milestone-timeline-marker-size);
35
+ position: relative;
36
+ display: grid;
37
+ gap: var(--component-milestone-timeline-row-gap);
38
+ margin: 0;
39
+ padding: 0;
40
+ list-style: none;
41
+
42
+ &::before {
43
+ content: "";
44
+ position: absolute;
45
+ inset-block: calc(var(--_marker) / 2);
46
+ inset-inline-start: calc(
47
+ var(--_marker) /
48
+ 2 -
49
+ var(--component-milestone-timeline-line-width) /
50
+ 2
51
+ );
52
+ width: var(--component-milestone-timeline-line-width);
53
+ background-color: var(--component-milestone-timeline-line);
54
+ }
55
+
56
+ &[hidden] {
57
+ display: none;
58
+ }
59
+ }
60
+
61
+ .mui-milestone-timeline__point {
62
+ position: relative;
63
+ display: grid;
64
+ grid-template-columns: var(--_marker) minmax(0, 1fr) auto;
65
+ align-items: start;
66
+ column-gap: var(--semantic-space-gap);
67
+ min-width: 0;
68
+ }
69
+
70
+ .mui-milestone-timeline__marker {
71
+ box-sizing: border-box;
72
+ display: inline-flex;
73
+ align-items: center;
74
+ justify-content: center;
75
+ width: var(--_marker);
76
+ height: var(--_marker);
77
+ border: var(--component-milestone-timeline-line-width) solid
78
+ var(--component-milestone-timeline-marker-border);
79
+ border-radius: var(--semantic-radius-pill);
80
+ background-color: var(--component-milestone-timeline-marker-bg);
81
+ }
82
+
83
+ /* The start and end are smaller, solid ends of the line, not milestones. */
84
+ .mui-milestone-timeline__point--start .mui-milestone-timeline__marker,
85
+ .mui-milestone-timeline__point--end .mui-milestone-timeline__marker {
86
+ width: calc(var(--_marker) / 2);
87
+ height: calc(var(--_marker) / 2);
88
+ margin: calc(var(--_marker) / 4);
89
+ border: 0;
90
+ background-color: var(--component-milestone-timeline-marker-border);
91
+ }
92
+
93
+ .mui-milestone-timeline__point--completed .mui-milestone-timeline__marker {
94
+ border-color: var(--component-milestone-timeline-completed-bg);
95
+ background-color: var(--component-milestone-timeline-completed-bg);
96
+ color: var(--component-milestone-timeline-completed-glyph);
97
+ }
98
+
99
+ .mui-milestone-timeline__point--placeholder .mui-milestone-timeline__marker {
100
+ border-style: dashed;
101
+ }
102
+
103
+ .mui-milestone-timeline__text {
104
+ display: grid;
105
+ gap: var(--semantic-space-gap-tight);
106
+ min-width: 0;
107
+ /* Lines the first line of text up with the point's centre. */
108
+ min-height: var(--_marker);
109
+ align-content: start;
110
+ overflow-wrap: anywhere;
111
+ }
112
+
113
+ .mui-milestone-timeline__name,
114
+ .mui-milestone-timeline__end-label {
115
+ color: var(--semantic-color-text-default);
116
+ font-size: var(--primitives-font-size-md);
117
+ line-height: var(--_marker);
118
+ }
119
+
120
+ .mui-milestone-timeline__end-label {
121
+ color: var(--semantic-color-text-muted);
122
+ }
123
+
124
+ .mui-milestone-timeline__point--completed .mui-milestone-timeline__name {
125
+ color: var(--semantic-color-text-muted);
126
+ text-decoration: line-through;
127
+ }
128
+
129
+ .mui-milestone-timeline__date {
130
+ color: var(--semantic-color-text-muted);
131
+ font-size: var(--primitives-font-size-sm);
132
+ }
133
+
134
+ .mui-milestone-timeline__point--overdue {
135
+ & .mui-milestone-timeline__marker {
136
+ border-color: var(--component-milestone-timeline-overdue);
137
+ }
138
+
139
+ & .mui-milestone-timeline__date {
140
+ color: var(--component-milestone-timeline-overdue-text);
141
+ }
142
+ }
143
+
144
+ /*
145
+ * The controls and the add control sit in a box the point's height, centred
146
+ * in it: whatever size the product's buttons are, they overflow it evenly
147
+ * and so stay centred on the point.
148
+ */
149
+ .mui-milestone-timeline__controls {
150
+ display: inline-flex;
151
+ align-items: center;
152
+ gap: var(--semantic-space-gap-tight);
153
+ height: var(--_marker);
154
+ }
155
+
156
+ /*
157
+ * The add control sits on the line in the points' column, its button
158
+ * centred on the line however large the product makes it.
159
+ */
160
+ .mui-milestone-timeline__point--add {
161
+ grid-template-columns: var(--_marker) minmax(0, 1fr);
162
+ }
163
+
164
+ .mui-milestone-timeline__add {
165
+ grid-column: 1;
166
+ justify-self: center;
167
+ display: inline-flex;
168
+ align-items: center;
169
+ height: var(--_marker);
170
+ position: relative;
171
+ z-index: 1;
172
+ }
173
+
174
+ .mui-milestone-timeline__add-label {
175
+ color: var(--semantic-color-text-muted);
176
+ font-size: var(--primitives-font-size-md);
177
+ line-height: var(--_marker);
178
+ }
179
+
180
+ .mui-milestone-timeline__placeholder-text {
181
+ align-self: center;
182
+ width: 40%;
183
+ height: var(--component-milestone-timeline-placeholder-height);
184
+ border-radius: var(--semantic-radius-pill);
185
+ background-color: var(--semantic-color-surface-muted);
186
+ }
187
+ }
@@ -0,0 +1,2 @@
1
+ /* AUTOGENERATED: types for the stylesheet beside it. */
2
+ export {};
@@ -0,0 +1,100 @@
1
+ import { type IconSource } from '@manakind/ui-core';
2
+ import { type ReactNode } from 'react';
3
+ import './milestone-timeline.css';
4
+ /** One milestone on the line. */
5
+ export interface MilestoneTimelineItem {
6
+ /** Stable key. */
7
+ id: string;
8
+ /** What the milestone is. */
9
+ name: string;
10
+ /** Pre-formatted due date, such as "15.11.2026". */
11
+ date: string;
12
+ /** Done: the point is filled with `completedIcon` and the name reads as done. */
13
+ completed: boolean;
14
+ /** Past its date and not done: the point and the date take the warning tone. */
15
+ overdue?: boolean;
16
+ /**
17
+ * The product's controls for this milestone, at the end of its row: a
18
+ * completion toggle, edit, delete. Rendered as given.
19
+ */
20
+ controls?: ReactNode;
21
+ }
22
+ /** The line's first point: where the work starts. */
23
+ export interface MilestoneTimelineStart {
24
+ /** Such as "Start". */
25
+ label: string;
26
+ /** Pre-formatted date the work started, when it has one. */
27
+ date?: string;
28
+ }
29
+ /** The line's last point: what the work ends in. */
30
+ export interface MilestoneTimelineEnd {
31
+ /** Such as "Done". */
32
+ label: string;
33
+ }
34
+ export interface MilestoneTimelineProps {
35
+ /** The section's heading. Defaults to "Milestones". */
36
+ title?: string;
37
+ /** Heading level for the title; match the surrounding outline. Defaults to `h2`. */
38
+ titleAs?: 'h2' | 'h3' | 'h4';
39
+ /** The line's first point. */
40
+ start: MilestoneTimelineStart;
41
+ /** The line's last point. */
42
+ end: MilestoneTimelineEnd;
43
+ /** The milestones, in date order. */
44
+ milestones: MilestoneTimelineItem[];
45
+ /**
46
+ * The product's control that adds a milestone, drawn as a point on the line
47
+ * after the last milestone: a "+" `IconButton`, say, that opens its form.
48
+ * Leave it out where milestones cannot be added (at a limit).
49
+ */
50
+ addControl?: ReactNode;
51
+ /**
52
+ * Text beside the add control, saying what it adds: "Add milestone". It is
53
+ * the control's visible caption, hidden from assistive technology, so the
54
+ * control's accessible name must contain it (a speech user says what they
55
+ * see).
56
+ */
57
+ addLabel?: string;
58
+ /**
59
+ * How many dashed placeholder points stand on the line while there are no
60
+ * milestones, showing where they go. Defaults to 2; 0 shows none; at most
61
+ * `MAX_PLACEHOLDERS`.
62
+ */
63
+ placeholders?: number;
64
+ /** Glyph in a completed milestone's point, supplied by the product. */
65
+ completedIcon?: IconSource;
66
+ /** Whether the line is shown. Pass with `onExpandedChange` to control it; omit to let the section hold it. */
67
+ expanded?: boolean;
68
+ /** Whether the line starts shown, when the section holds the state. Defaults to `true`. */
69
+ defaultExpanded?: boolean;
70
+ /** Called with the new state when the toggle is pressed. */
71
+ onExpandedChange?: (expanded: boolean) => void;
72
+ /** Glyph on the toggle while the line is hidden. */
73
+ collapsedIcon: IconSource;
74
+ /** Glyph on the toggle while the line is shown. Falls back to `collapsedIcon`. */
75
+ expandedIcon?: IconSource;
76
+ /** Extra class names on the `<section>`. */
77
+ className?: string;
78
+ }
79
+ /** The most placeholder points the line shows: enough to teach, not a list. */
80
+ export declare const MAX_PLACEHOLDERS = 5;
81
+ /**
82
+ * A project's milestones as a vertical line from its start to its end, each
83
+ * milestone a point with its name, date and controls beside it, so every
84
+ * milestone reads without hovering. The product's add control stands on the
85
+ * line as a point of its own; with no milestones, dashed placeholder points
86
+ * show where they will go.
87
+ *
88
+ * The whole line folds away behind a toggle in the header, named after the
89
+ * section's title and saying whether it is open with `aria-expanded`, as
90
+ * OutcomeItem's toggle does, with a count of how many are done beside the
91
+ * title so a folded line still says where the project stands. The list stays
92
+ * mounted while hidden.
93
+ *
94
+ * @remarks
95
+ * The line is an ordered list: a screen reader hears the start, each
96
+ * milestone with its date and whether it is done, and the end, in order.
97
+ * The placeholder points are decoration and are hidden from it.
98
+ */
99
+ export declare function MilestoneTimeline({ title, titleAs, start, end, milestones, addControl, addLabel, placeholders, completedIcon, expanded: expandedProp, defaultExpanded, onExpandedChange, collapsedIcon, expandedIcon, className, }: MilestoneTimelineProps): import("react/jsx-runtime").JSX.Element;
100
+ //# sourceMappingURL=milestone-timeline.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"milestone-timeline.d.ts","sourceRoot":"","sources":["../../src/milestone-timeline/milestone-timeline.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmC,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACrF,OAAO,EAAE,KAAK,SAAS,EAAmB,MAAM,OAAO,CAAC;AACxD,OAAO,0BAA0B,CAAC;AAElC,iCAAiC;AACjC,MAAM,WAAW,qBAAqB;IACpC,kBAAkB;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,6BAA6B;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,IAAI,EAAE,MAAM,CAAC;IACb,iFAAiF;IACjF,SAAS,EAAE,OAAO,CAAC;IACnB,gFAAgF;IAChF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,qDAAqD;AACrD,MAAM,WAAW,sBAAsB;IACrC,uBAAuB;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,oDAAoD;AACpD,MAAM,WAAW,oBAAoB;IACnC,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,sBAAsB;IACrC,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oFAAoF;IACpF,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC7B,8BAA8B;IAC9B,KAAK,EAAE,sBAAsB,CAAC;IAC9B,6BAA6B;IAC7B,GAAG,EAAE,oBAAoB,CAAC;IAC1B,qCAAqC;IACrC,UAAU,EAAE,qBAAqB,EAAE,CAAC;IACpC;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uEAAuE;IACvE,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B,8GAA8G;IAC9G,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2FAA2F;IAC3F,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,4DAA4D;IAC5D,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,oDAAoD;IACpD,aAAa,EAAE,UAAU,CAAC;IAC1B,kFAAkF;IAClF,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,+EAA+E;AAC/E,eAAO,MAAM,gBAAgB,IAAI,CAAC;AAElC;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAoB,EACpB,OAAc,EACd,KAAK,EACL,GAAG,EACH,UAAU,EACV,UAAU,EACV,QAAQ,EACR,YAAgB,EAChB,aAAa,EACb,QAAQ,EAAE,YAAY,EACtB,eAAsB,EACtB,gBAAgB,EAChB,aAAa,EACb,YAA4B,EAC5B,SAAS,GACV,EAAE,sBAAsB,2CAsGxB"}
@@ -0,0 +1,45 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { CardTitle, cx, Icon, IconButton } from '@manakind/ui-core';
3
+ import { useId, useState } from 'react';
4
+ import './milestone-timeline.css';
5
+ /** The most placeholder points the line shows: enough to teach, not a list. */
6
+ export const MAX_PLACEHOLDERS = 5;
7
+ /**
8
+ * A project's milestones as a vertical line from its start to its end, each
9
+ * milestone a point with its name, date and controls beside it, so every
10
+ * milestone reads without hovering. The product's add control stands on the
11
+ * line as a point of its own; with no milestones, dashed placeholder points
12
+ * show where they will go.
13
+ *
14
+ * The whole line folds away behind a toggle in the header, named after the
15
+ * section's title and saying whether it is open with `aria-expanded`, as
16
+ * OutcomeItem's toggle does, with a count of how many are done beside the
17
+ * title so a folded line still says where the project stands. The list stays
18
+ * mounted while hidden.
19
+ *
20
+ * @remarks
21
+ * The line is an ordered list: a screen reader hears the start, each
22
+ * milestone with its date and whether it is done, and the end, in order.
23
+ * The placeholder points are decoration and are hidden from it.
24
+ */
25
+ export function MilestoneTimeline({ title = 'Milestones', titleAs = 'h2', start, end, milestones, addControl, addLabel, placeholders = 2, completedIcon, expanded: expandedProp, defaultExpanded = true, onExpandedChange, collapsedIcon, expandedIcon = collapsedIcon, className, }) {
26
+ const listId = useId();
27
+ const [ownExpanded, setOwnExpanded] = useState(defaultExpanded);
28
+ const expanded = expandedProp ?? ownExpanded;
29
+ const toggle = () => {
30
+ setOwnExpanded(!expanded);
31
+ onExpandedChange?.(!expanded);
32
+ };
33
+ const done = milestones.filter((milestone) => milestone.completed).length;
34
+ const summary = milestones.length > 0 ? `${done} of ${milestones.length} done` : 'None yet';
35
+ const placeholderCount = milestones.length === 0 && Number.isFinite(placeholders)
36
+ ? Math.min(Math.max(Math.trunc(placeholders), 0), MAX_PLACEHOLDERS)
37
+ : 0;
38
+ const endPoint = (point, edge) => (_jsxs("li", { className: cx('mui-milestone-timeline__point', `mui-milestone-timeline__point--${edge}`), children: [_jsx("span", { className: "mui-milestone-timeline__marker", "aria-hidden": "true" }), _jsxs("span", { className: "mui-milestone-timeline__text", children: [_jsx("span", { className: "mui-milestone-timeline__end-label", children: point.label }), point.date && _jsx("span", { className: "mui-milestone-timeline__date", children: point.date })] })] }));
39
+ const milestonePoint = (milestone) => {
40
+ const overdue = milestone.overdue === true && !milestone.completed;
41
+ return (_jsxs("li", { className: cx('mui-milestone-timeline__point', 'mui-milestone-timeline__point--milestone', milestone.completed && 'mui-milestone-timeline__point--completed', overdue && 'mui-milestone-timeline__point--overdue'), children: [_jsx("span", { className: "mui-milestone-timeline__marker", "aria-hidden": "true", children: milestone.completed && completedIcon && (_jsx(Icon, { source: completedIcon, size: "sm", decorative: true })) }), _jsxs("span", { className: "mui-milestone-timeline__text", children: [_jsx("span", { className: "mui-milestone-timeline__name", children: milestone.name }), _jsxs("span", { className: "mui-milestone-timeline__date", children: [milestone.date, milestone.completed && _jsx("span", { className: "mui-milestone-timeline__status", children: " \u00B7 Done" }), overdue && _jsx("span", { className: "mui-milestone-timeline__status", children: " \u00B7 Overdue" })] })] }), milestone.controls && (_jsx("span", { className: "mui-milestone-timeline__controls", children: milestone.controls }))] }, milestone.id));
42
+ };
43
+ return (_jsxs("section", { className: cx('mui-milestone-timeline', className), children: [_jsxs("div", { className: "mui-milestone-timeline__header", children: [_jsx(IconButton, { variant: "tertiary", size: "sm", icon: expanded ? expandedIcon : collapsedIcon, "aria-expanded": expanded, "aria-controls": listId, "aria-label": title, onClick: toggle }), _jsx(CardTitle, { as: titleAs, className: "mui-milestone-timeline__title", children: title }), _jsx("span", { className: "mui-milestone-timeline__summary", children: summary })] }), _jsxs("ol", { id: listId, className: "mui-milestone-timeline__list", hidden: !expanded, children: [endPoint(start, 'start'), milestones.map(milestonePoint), addControl && (_jsxs("li", { className: "mui-milestone-timeline__point mui-milestone-timeline__point--add", children: [_jsx("span", { className: "mui-milestone-timeline__add", children: addControl }), addLabel && (_jsx("span", { className: "mui-milestone-timeline__add-label", "aria-hidden": "true", children: addLabel }))] })), Array.from({ length: placeholderCount }, (_, index) => (_jsxs("li", { "aria-hidden": "true", className: "mui-milestone-timeline__point mui-milestone-timeline__point--placeholder", children: [_jsx("span", { className: "mui-milestone-timeline__marker" }), _jsx("span", { className: "mui-milestone-timeline__placeholder-text" })] }, index))), endPoint(end, 'end')] })] }));
44
+ }
45
+ //# sourceMappingURL=milestone-timeline.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"milestone-timeline.js","sourceRoot":"","sources":["../../src/milestone-timeline/milestone-timeline.tsx"],"names":[],"mappings":"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"}
@@ -115,6 +115,13 @@
115
115
  display: contents;
116
116
  }
117
117
 
118
+ /* The breadcrumb keeps its own line above the toggle and title, under the title's column. */
119
+ & .mui-outcome-item__eyebrow {
120
+ order: -1;
121
+ flex: 0 0 calc(100% - var(--mui-outcome-item-indent));
122
+ margin-inline-start: var(--mui-outcome-item-indent);
123
+ }
124
+
118
125
  & .mui-outcome-item__title {
119
126
  flex: 1 1 0;
120
127
  min-width: 0;
@@ -2,6 +2,7 @@ import { type IconSource } from '@manakind/ui-core';
2
2
  import { type ComponentProps, type ReactNode } from 'react';
3
3
  import type { ActionItemDetail } from '../action-item';
4
4
  import { type GoalCategory } from '../goal-categories';
5
+ import '../item-accent.css';
5
6
  import '../leading-slot.css';
6
7
  import './outcome-item.css';
7
8
  export interface OutcomeItemProps extends Omit<ComponentProps<'li'>, 'title' | 'children' | 'className'> {
@@ -11,7 +12,7 @@ export interface OutcomeItemProps extends Omit<ComponentProps<'li'>, 'title' | '
11
12
  kindIcon?: IconSource;
12
13
  /** Facts shown after the "Outcome" label, each with an optional glyph: its project, how many actions are open. */
13
14
  details?: ActionItemDetail[];
14
- /** Categories the outcome belongs to, as dotted text. */
15
+ /** Categories the outcome belongs to, each a `CategoryLabel`. */
15
16
  categories?: GoalCategory[];
16
17
  /** How many categories to show before collapsing into `+N more`. Defaults to 2, as on `ActionItem`. */
17
18
  maxVisibleCategories?: number;
@@ -44,6 +45,17 @@ export interface OutcomeItemProps extends Omit<ComponentProps<'li'>, 'title' | '
44
45
  leading?: ReactNode;
45
46
  /** Heading level for the title. Defaults to `h3`; give the actions inside the next level down. */
46
47
  titleAs?: 'h2' | 'h3' | 'h4';
48
+ /**
49
+ * Where the item lives, above its title: a `Breadcrumb` of its category,
50
+ * project or outcome, say. Rendered as given.
51
+ */
52
+ eyebrow?: ReactNode;
53
+ /**
54
+ * The item's category colour as a straight bar along the card's leading
55
+ * edge, for scanning a long mixed list. Data, not a token: validated by
56
+ * `safeColor` and ignored when not a colour. Leave it off a lone item.
57
+ */
58
+ accentColor?: string;
47
59
  /** Extra class names on the `<li>`. */
48
60
  className?: string;
49
61
  /**
@@ -73,5 +85,5 @@ export interface OutcomeItemProps extends Omit<ComponentProps<'li'>, 'title' | '
73
85
  * and a message passed as children stays under the card. Attributes other than the props land on the `<li>`: a sortable
74
86
  * list passes its drag library's ref and transform style there.
75
87
  */
76
- export declare function OutcomeItem({ title, kindIcon, details, categories, maxVisibleCategories, actions, expanded: expandedProp, defaultExpanded, onExpandedChange, collapsedIcon, expandedIcon, controls, leading, titleAs, className, children, ...listItemProps }: OutcomeItemProps): import("react/jsx-runtime").JSX.Element;
88
+ export declare function OutcomeItem({ title, kindIcon, details, categories, maxVisibleCategories, actions, expanded: expandedProp, defaultExpanded, onExpandedChange, collapsedIcon, expandedIcon, controls, leading, titleAs, eyebrow, accentColor, className, children, ...listItemProps }: OutcomeItemProps): import("react/jsx-runtime").JSX.Element;
77
89
  //# sourceMappingURL=outcome-item.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"outcome-item.d.ts","sourceRoot":"","sources":["../../src/outcome-item/outcome-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyC,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC3F,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAmB,MAAM,OAAO,CAAC;AAC7E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAkB,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,qBAAqB,CAAC;AAC7B,OAAO,oBAAoB,CAAC;AAE5B,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,WAAW,CAAC;IACtE,8FAA8F;IAC9F,KAAK,EAAE,MAAM,CAAC;IACd,kGAAkG;IAClG,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,kHAAkH;IAClH,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC7B,yDAAyD;IACzD,UAAU,CAAC,EAAE,YAAY,EAAE,CAAC;IAC5B,uGAAuG;IACvG,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;;OAIG;IACH,OAAO,EAAE,SAAS,CAAC;IACnB,0GAA0G;IAC1G,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uFAAuF;IACvF,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,oFAAoF;IACpF,aAAa,EAAE,UAAU,CAAC;IAC1B,kFAAkF;IAClF,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,kGAAkG;IAClG,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;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,OAAY,EACZ,UAAe,EACf,oBAAwB,EACxB,OAAO,EACP,QAAQ,EAAE,YAAY,EACtB,eAAsB,EACtB,gBAAgB,EAChB,aAAa,EACb,YAA4B,EAC5B,QAAQ,EACR,OAAO,EACP,OAAc,EACd,SAAS,EACT,QAAQ,EACR,GAAG,aAAa,EACjB,EAAE,gBAAgB,2CA8ElB"}
1
+ {"version":3,"file":"outcome-item.d.ts","sourceRoot":"","sources":["../../src/outcome-item/outcome-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyC,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC3F,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAmB,MAAM,OAAO,CAAC;AAC7E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAkB,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,oBAAoB,CAAC;AAE5B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,oBAAoB,CAAC;AAE5B,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,WAAW,CAAC;IACtE,8FAA8F;IAC9F,KAAK,EAAE,MAAM,CAAC;IACd,kGAAkG;IAClG,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,kHAAkH;IAClH,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC7B,iEAAiE;IACjE,UAAU,CAAC,EAAE,YAAY,EAAE,CAAC;IAC5B,uGAAuG;IACvG,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;;OAIG;IACH,OAAO,EAAE,SAAS,CAAC;IACnB,0GAA0G;IAC1G,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uFAAuF;IACvF,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,oFAAoF;IACpF,aAAa,EAAE,UAAU,CAAC;IAC1B,kFAAkF;IAClF,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,kGAAkG;IAClG,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC7B;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,OAAY,EACZ,UAAe,EACf,oBAAwB,EACxB,OAAO,EACP,QAAQ,EAAE,YAAY,EACtB,eAAsB,EACtB,gBAAgB,EAChB,aAAa,EACb,YAA4B,EAC5B,QAAQ,EACR,OAAO,EACP,OAAc,EACd,OAAO,EACP,WAAW,EACX,SAAS,EACT,QAAQ,EACR,GAAG,aAAa,EACjB,EAAE,gBAAgB,2CAoFlB"}
@@ -2,6 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { Card, CardTitle, cx, Icon, IconButton } from '@manakind/ui-core';
3
3
  import { useId, useState } from 'react';
4
4
  import { GoalCategories } from '../goal-categories';
5
+ import '../item-accent.css';
6
+ import { accentProps } from '../item-accent';
5
7
  import '../leading-slot.css';
6
8
  import './outcome-item.css';
7
9
  /**
@@ -25,7 +27,7 @@ import './outcome-item.css';
25
27
  * and a message passed as children stays under the card. Attributes other than the props land on the `<li>`: a sortable
26
28
  * list passes its drag library's ref and transform style there.
27
29
  */
28
- export function OutcomeItem({ title, kindIcon, details = [], categories = [], maxVisibleCategories = 2, actions, expanded: expandedProp, defaultExpanded = true, onExpandedChange, collapsedIcon, expandedIcon = collapsedIcon, controls, leading, titleAs = 'h3', className, children, ...listItemProps }) {
30
+ export function OutcomeItem({ title, kindIcon, details = [], categories = [], maxVisibleCategories = 2, actions, expanded: expandedProp, defaultExpanded = true, onExpandedChange, collapsedIcon, expandedIcon = collapsedIcon, controls, leading, titleAs = 'h3', eyebrow, accentColor, className, children, ...listItemProps }) {
29
31
  const bodyId = useId();
30
32
  const [ownExpanded, setOwnExpanded] = useState(defaultExpanded);
31
33
  const expanded = expandedProp ?? ownExpanded;
@@ -40,6 +42,7 @@ export function OutcomeItem({ title, kindIcon, details = [], categories = [], ma
40
42
  seen.set(detail.label, rank + 1);
41
43
  return (_jsxs("span", { className: "mui-outcome-item__detail", children: [detail.icon && (_jsx(Icon, { source: detail.icon, size: "sm", decorative: true, className: "mui-outcome-item__detail-icon" })), _jsx("span", { className: "mui-outcome-item__detail-label", children: detail.label })] }, `${detail.label}-${rank}`));
42
44
  });
43
- return (_jsxs("li", { ...listItemProps, className: cx('mui-leading-slot', 'mui-outcome-item', className), children: [leading && (_jsx("div", { className: "mui-leading-slot__leading mui-outcome-item__leading", children: leading })), _jsxs(Card, { className: "mui-leading-slot__card mui-outcome-item__card", children: [_jsxs("div", { className: "mui-outcome-item__header", children: [_jsx(IconButton, { className: "mui-outcome-item__toggle", variant: "tertiary", icon: expanded ? expandedIcon : collapsedIcon, "aria-expanded": expanded, "aria-controls": bodyId, "aria-label": `Actions for ${title}`, onClick: toggleExpanded }), _jsxs("div", { className: "mui-outcome-item__main", children: [_jsx(CardTitle, { as: titleAs, className: "mui-outcome-item__title", children: title }), _jsxs("p", { className: "mui-outcome-item__details", children: [_jsxs("span", { className: "mui-outcome-item__detail mui-outcome-item__kind", children: [kindIcon && (_jsx(Icon, { source: kindIcon, size: "sm", decorative: true, className: "mui-outcome-item__detail-icon mui-outcome-item__kind-icon" })), _jsx("span", { className: "mui-outcome-item__detail-label", children: "Outcome" })] }), detailRows] }), _jsx(GoalCategories, { className: "mui-outcome-item__categories", categories: categories, maxVisible: maxVisibleCategories })] }), controls && _jsx("div", { className: "mui-outcome-item__controls", children: controls })] }), _jsx("div", { id: bodyId, className: "mui-outcome-item__body", hidden: !expanded, children: actions })] }), children] }));
45
+ const accent = accentProps(accentColor, listItemProps.style);
46
+ return (_jsxs("li", { ...listItemProps, style: accent.style, className: cx('mui-leading-slot', 'mui-outcome-item', accent.className, className), children: [leading && (_jsx("div", { className: "mui-leading-slot__leading mui-outcome-item__leading", children: leading })), _jsxs(Card, { className: "mui-leading-slot__card mui-outcome-item__card", children: [_jsxs("div", { className: "mui-outcome-item__header", children: [_jsx(IconButton, { className: "mui-outcome-item__toggle", variant: "tertiary", icon: expanded ? expandedIcon : collapsedIcon, "aria-expanded": expanded, "aria-controls": bodyId, "aria-label": `Actions for ${title}`, onClick: toggleExpanded }), _jsxs("div", { className: "mui-outcome-item__main", children: [eyebrow && _jsx("div", { className: "mui-outcome-item__eyebrow", children: eyebrow }), _jsx(CardTitle, { as: titleAs, className: "mui-outcome-item__title", children: title }), _jsxs("p", { className: "mui-outcome-item__details", children: [_jsxs("span", { className: "mui-outcome-item__detail mui-outcome-item__kind", children: [kindIcon && (_jsx(Icon, { source: kindIcon, size: "sm", decorative: true, className: "mui-outcome-item__detail-icon mui-outcome-item__kind-icon" })), _jsx("span", { className: "mui-outcome-item__detail-label", children: "Outcome" })] }), detailRows] }), _jsx(GoalCategories, { className: "mui-outcome-item__categories", categories: categories, maxVisible: maxVisibleCategories })] }), controls && _jsx("div", { className: "mui-outcome-item__controls", children: controls })] }), _jsx("div", { id: bodyId, className: "mui-outcome-item__body", hidden: !expanded, children: actions })] }), children] }));
44
47
  }
45
48
  //# sourceMappingURL=outcome-item.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"outcome-item.js","sourceRoot":"","sources":["../../src/outcome-item/outcome-item.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"outcome-item.js","sourceRoot":"","sources":["../../src/outcome-item/outcome-item.tsx"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@manakind/manuia-ui",
3
- "version": "0.22.0",
3
+ "version": "0.23.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.20.0",
41
- "@manakind/ui-core": "0.20.0"
40
+ "@manakind/manuia-tokens": "0.21.0",
41
+ "@manakind/ui-core": "0.21.0"
42
42
  },
43
43
  "peerDependencies": {
44
44
  "react": "^19.0.0",