@tensor_1/react 2.7.0 → 2.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/EditorialHome.d.ts +183 -0
- package/dist/components/EditorialHome.js +183 -0
- package/dist/index.cjs +195 -0
- package/dist/index.d.cts +180 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +28 -0
- package/package.json +1 -1
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { HTMLAttributes, ReactNode, ButtonHTMLAttributes } from 'react';
|
|
3
|
+
|
|
4
|
+
interface PageIntroProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
|
|
5
|
+
/** Small line above the title (e.g. today's date). */
|
|
6
|
+
kicker?: ReactNode;
|
|
7
|
+
title: ReactNode;
|
|
8
|
+
/** Supporting copy under the title. */
|
|
9
|
+
lede?: ReactNode;
|
|
10
|
+
/** Label shown above the search well. */
|
|
11
|
+
searchLabel?: ReactNode;
|
|
12
|
+
/** The search well itself (form + `.uix-searchbar` markup, or `SearchBar`-style composition). */
|
|
13
|
+
search?: ReactNode;
|
|
14
|
+
/** Shortcut buttons; rendered inside the `.uix-shortcut-grid` full-width row. */
|
|
15
|
+
shortcuts?: ReactNode;
|
|
16
|
+
/** Accessible label for the shortcuts group. */
|
|
17
|
+
shortcutsLabel?: string;
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* Editorial page intro — kicker / title / lede beside a search well, with an
|
|
21
|
+
* optional full-width shortcut grid underneath (`.uix-page-intro`).
|
|
22
|
+
*/
|
|
23
|
+
declare function PageIntro({ kicker, title, lede, searchLabel, search, shortcuts, shortcutsLabel, className, children, ...props }: PageIntroProps): react.JSX.Element;
|
|
24
|
+
interface SectionHeadProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
25
|
+
title: ReactNode;
|
|
26
|
+
/** id for the `<h2>`, for `aria-labelledby` wiring on the enclosing section. */
|
|
27
|
+
titleId?: string;
|
|
28
|
+
/** Right-aligned slot — a `.uix-section-link` anchor, a button, a pill. */
|
|
29
|
+
action?: ReactNode;
|
|
30
|
+
}
|
|
31
|
+
/** Section head — title row with an optional trailing action (`.uix-section-head`). */
|
|
32
|
+
declare function SectionHead({ title, titleId, action, className, ...props }: SectionHeadProps): react.JSX.Element;
|
|
33
|
+
interface NoticeQueueProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
|
|
34
|
+
/** Leading icon slot. */
|
|
35
|
+
icon?: ReactNode;
|
|
36
|
+
/** Bolded lead-in of the notice copy. */
|
|
37
|
+
title?: ReactNode;
|
|
38
|
+
/** Rest of the notice copy, after the title. */
|
|
39
|
+
summary?: ReactNode;
|
|
40
|
+
/** Meta line under the copy (e.g. "Needs action · Required by Friday"). */
|
|
41
|
+
meta?: ReactNode;
|
|
42
|
+
/** Queue position (e.g. "1 of 4 important updates"). */
|
|
43
|
+
position?: ReactNode;
|
|
44
|
+
/**
|
|
45
|
+
* Trailing controls — previous/next arrows (put `uix-notice__arrow--previous`
|
|
46
|
+
* on the previous button to flip its icon), read/view-all buttons.
|
|
47
|
+
*/
|
|
48
|
+
actions?: ReactNode;
|
|
49
|
+
}
|
|
50
|
+
/**
|
|
51
|
+
* Notice queue — the rotating "important updates" banner (`.uix-notice`). The
|
|
52
|
+
* copy region is `aria-live="polite"` so queue rotation is announced.
|
|
53
|
+
*/
|
|
54
|
+
declare function NoticeQueue({ icon, title, summary, meta, position, actions, className, ...props }: NoticeQueueProps): react.JSX.Element;
|
|
55
|
+
interface FeaturedStageProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
|
|
56
|
+
/** Decorative visual (story signal + diagram). Hidden from AT unless `visualLabel` is set. */
|
|
57
|
+
visual?: ReactNode;
|
|
58
|
+
/** Accessible description of the visual; when set the visual gets `role="img"`. */
|
|
59
|
+
visualLabel?: string;
|
|
60
|
+
/**
|
|
61
|
+
* Ordinal of the story on stage (e.g. "01"), rendered as the filled
|
|
62
|
+
* `.uix-featured__now` chip in the eyebrow. Pair it with the matching
|
|
63
|
+
* `FeaturedRundownItem`'s `number` — the selected item's number renders as
|
|
64
|
+
* the same chip, and that pairing is what links rundown to stage on every
|
|
65
|
+
* breakpoint (the divider caret only exists while the zones sit side by side).
|
|
66
|
+
*/
|
|
67
|
+
ordinal?: ReactNode;
|
|
68
|
+
eyebrow?: ReactNode;
|
|
69
|
+
title: ReactNode;
|
|
70
|
+
/** id for the `<h2>` title, for `aria-labelledby` wiring. */
|
|
71
|
+
titleId?: string;
|
|
72
|
+
description?: ReactNode;
|
|
73
|
+
meta?: ReactNode;
|
|
74
|
+
/** Call-to-action slot under the meta line. */
|
|
75
|
+
action?: ReactNode;
|
|
76
|
+
}
|
|
77
|
+
/**
|
|
78
|
+
* Featured stage — the hero story zone of the featured briefing
|
|
79
|
+
* (`.uix-featured__stage`). The briefing is ONE `.uix-featured` card: put this
|
|
80
|
+
* and `FeaturedRundown` directly inside it and the internal hairline, the
|
|
81
|
+
* selected item's caret, and the ordinal chips connect the two zones. Content
|
|
82
|
+
* is `aria-live="polite"` so swapping the featured story (from the rundown)
|
|
83
|
+
* is announced.
|
|
84
|
+
*/
|
|
85
|
+
declare function FeaturedStage({ visual, visualLabel, ordinal, eyebrow, title, titleId, description, meta, action, className, ...props }: FeaturedStageProps): react.JSX.Element;
|
|
86
|
+
interface FeaturedRundownProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
|
|
87
|
+
/** Uppercase line above the title (e.g. "Editorial briefing"). */
|
|
88
|
+
eyebrow?: ReactNode;
|
|
89
|
+
title: ReactNode;
|
|
90
|
+
/** id for the `<h2>` title, for `aria-labelledby` wiring. */
|
|
91
|
+
titleId?: string;
|
|
92
|
+
/** Trailing head slot (e.g. a count pill). */
|
|
93
|
+
meta?: ReactNode;
|
|
94
|
+
/** `FeaturedRundownItem`s. */
|
|
95
|
+
children?: ReactNode;
|
|
96
|
+
}
|
|
97
|
+
/**
|
|
98
|
+
* Featured rundown — the story-list zone of the featured briefing
|
|
99
|
+
* (`.uix-rundown`), sitting inside the single `.uix-featured` card beside (or,
|
|
100
|
+
* stacked, below) the `FeaturedStage`.
|
|
101
|
+
*/
|
|
102
|
+
declare function FeaturedRundown({ eyebrow, title, titleId, meta, children, className, ...props }: FeaturedRundownProps): react.JSX.Element;
|
|
103
|
+
interface FeaturedRundownItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'title'> {
|
|
104
|
+
/** Ordinal label (e.g. "01"). */
|
|
105
|
+
number?: ReactNode;
|
|
106
|
+
/** Topic/duration line above the item title (e.g. "Company · 5 min"). */
|
|
107
|
+
topic?: ReactNode;
|
|
108
|
+
/** The story title. */
|
|
109
|
+
title: ReactNode;
|
|
110
|
+
/** Whether this story is on the stage — sets `aria-pressed` + `data-selected`. */
|
|
111
|
+
selected?: boolean;
|
|
112
|
+
}
|
|
113
|
+
/**
|
|
114
|
+
* One rundown story — a toggle button (`.uix-rundown__item`) whose selection
|
|
115
|
+
* is conveyed with `aria-pressed` and styled through `[data-selected]`.
|
|
116
|
+
*/
|
|
117
|
+
declare function FeaturedRundownItem({ number, topic, title, selected, className, ...props }: FeaturedRundownItemProps): react.JSX.Element;
|
|
118
|
+
interface NewsLeadProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
|
|
119
|
+
/** Meta line above the title (pill + date). */
|
|
120
|
+
meta?: ReactNode;
|
|
121
|
+
title: ReactNode;
|
|
122
|
+
summary?: ReactNode;
|
|
123
|
+
}
|
|
124
|
+
/** News lead — the top story of a news column (`.uix-news-lead`). */
|
|
125
|
+
declare function NewsLead({ meta, title, summary, className, ...props }: NewsLeadProps): react.JSX.Element;
|
|
126
|
+
interface ContentListProps extends HTMLAttributes<HTMLUListElement> {
|
|
127
|
+
/** `ContentListItem`s. */
|
|
128
|
+
children?: ReactNode;
|
|
129
|
+
}
|
|
130
|
+
/** Content list — hairline-divided rows of titled items (`.uix-content-list`). */
|
|
131
|
+
declare function ContentList({ children, className, ...props }: ContentListProps): react.JSX.Element;
|
|
132
|
+
interface ContentListItemProps extends Omit<HTMLAttributes<HTMLLIElement>, 'title'> {
|
|
133
|
+
title: ReactNode;
|
|
134
|
+
meta?: ReactNode;
|
|
135
|
+
/** Trailing slot — an arrow glyph, a pill. */
|
|
136
|
+
trailing?: ReactNode;
|
|
137
|
+
}
|
|
138
|
+
/** One content-list row — title + meta with an optional trailing slot. */
|
|
139
|
+
declare function ContentListItem({ title, meta, trailing, className, ...props }: ContentListItemProps): react.JSX.Element;
|
|
140
|
+
interface ResourceGridProps extends HTMLAttributes<HTMLDivElement> {
|
|
141
|
+
/** Resource buttons/links (typically `.uix-btn--outline`). */
|
|
142
|
+
children?: ReactNode;
|
|
143
|
+
}
|
|
144
|
+
/** Resource grid — a three-up grid of resource shortcuts (`.uix-resource-grid`). */
|
|
145
|
+
declare function ResourceGrid({ children, className, ...props }: ResourceGridProps): react.JSX.Element;
|
|
146
|
+
interface StatLineItem {
|
|
147
|
+
/** Stable identity for the item; falls back to the index when omitted. */
|
|
148
|
+
id?: string;
|
|
149
|
+
value: ReactNode;
|
|
150
|
+
label: ReactNode;
|
|
151
|
+
}
|
|
152
|
+
interface StatLineProps extends HTMLAttributes<HTMLDivElement> {
|
|
153
|
+
items?: StatLineItem[];
|
|
154
|
+
children?: ReactNode;
|
|
155
|
+
}
|
|
156
|
+
/**
|
|
157
|
+
* Stat line — a compact value/label summary strip over a hairline
|
|
158
|
+
* (`.uix-stat-line`). Use `items` for data-driven stats or hand-author
|
|
159
|
+
* `.uix-stat-line__item` children.
|
|
160
|
+
*/
|
|
161
|
+
declare function StatLine({ items, children, className, ...props }: StatLineProps): react.JSX.Element;
|
|
162
|
+
interface EventRowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
163
|
+
/** Calendar-block month (e.g. "Jul"). */
|
|
164
|
+
month: ReactNode;
|
|
165
|
+
/** Calendar-block day (e.g. "30"). */
|
|
166
|
+
day: ReactNode;
|
|
167
|
+
title: ReactNode;
|
|
168
|
+
meta?: ReactNode;
|
|
169
|
+
}
|
|
170
|
+
/** Event row — date block + title/meta (`.uix-event-row`). */
|
|
171
|
+
declare function EventRow({ month, day, title, meta, className, ...props }: EventRowProps): react.JSX.Element;
|
|
172
|
+
interface StatusRowProps extends HTMLAttributes<HTMLDivElement> {
|
|
173
|
+
/** Leading indicator slot (e.g. a `.uix-dot`). */
|
|
174
|
+
indicator?: ReactNode;
|
|
175
|
+
/** Service name — takes the flexible middle (`.uix-status-row__name`). */
|
|
176
|
+
name: ReactNode;
|
|
177
|
+
/** Trailing meta (e.g. "Healthy"), rendered as `.uix-list-meta`. */
|
|
178
|
+
meta?: ReactNode;
|
|
179
|
+
}
|
|
180
|
+
/** Status row — indicator + name + trailing meta (`.uix-status-row`). */
|
|
181
|
+
declare function StatusRow({ indicator, name, meta, className, ...props }: StatusRowProps): react.JSX.Element;
|
|
182
|
+
|
|
183
|
+
export { ContentList, ContentListItem, type ContentListItemProps, type ContentListProps, EventRow, type EventRowProps, FeaturedRundown, FeaturedRundownItem, type FeaturedRundownItemProps, type FeaturedRundownProps, FeaturedStage, type FeaturedStageProps, NewsLead, type NewsLeadProps, NoticeQueue, type NoticeQueueProps, PageIntro, type PageIntroProps, ResourceGrid, type ResourceGridProps, SectionHead, type SectionHeadProps, StatLine, type StatLineItem, type StatLineProps, StatusRow, type StatusRowProps };
|
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { cx } from "../cx.js";
|
|
3
|
+
function PageIntro({
|
|
4
|
+
kicker,
|
|
5
|
+
title,
|
|
6
|
+
lede,
|
|
7
|
+
searchLabel,
|
|
8
|
+
search,
|
|
9
|
+
shortcuts,
|
|
10
|
+
shortcutsLabel,
|
|
11
|
+
className,
|
|
12
|
+
children,
|
|
13
|
+
...props
|
|
14
|
+
}) {
|
|
15
|
+
return /* @__PURE__ */ jsxs("section", { className: cx("uix-page-intro", className), ...props, children: [
|
|
16
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
17
|
+
kicker != null && /* @__PURE__ */ jsx("p", { className: "uix-page-kicker", children: kicker }),
|
|
18
|
+
/* @__PURE__ */ jsx("h1", { className: "uix-page-title", children: title }),
|
|
19
|
+
lede != null && /* @__PURE__ */ jsx("p", { className: "uix-page-lede", children: lede })
|
|
20
|
+
] }),
|
|
21
|
+
search != null && /* @__PURE__ */ jsxs("div", { children: [
|
|
22
|
+
searchLabel != null && /* @__PURE__ */ jsx("p", { className: "uix-intro-search__label", children: searchLabel }),
|
|
23
|
+
search
|
|
24
|
+
] }),
|
|
25
|
+
shortcuts != null && /* @__PURE__ */ jsx("div", { className: "uix-shortcut-grid", "aria-label": shortcutsLabel, children: shortcuts }),
|
|
26
|
+
children
|
|
27
|
+
] });
|
|
28
|
+
}
|
|
29
|
+
function SectionHead({ title, titleId, action, className, ...props }) {
|
|
30
|
+
return /* @__PURE__ */ jsxs("div", { className: cx("uix-section-head", className), ...props, children: [
|
|
31
|
+
/* @__PURE__ */ jsx("h2", { className: "uix-section-title", id: titleId, children: title }),
|
|
32
|
+
action
|
|
33
|
+
] });
|
|
34
|
+
}
|
|
35
|
+
function NoticeQueue({ icon, title, summary, meta, position, actions, className, ...props }) {
|
|
36
|
+
return /* @__PURE__ */ jsxs("section", { className: cx("uix-notice", className), ...props, children: [
|
|
37
|
+
icon,
|
|
38
|
+
/* @__PURE__ */ jsxs("div", { className: "uix-notice__content", "aria-live": "polite", children: [
|
|
39
|
+
/* @__PURE__ */ jsxs("p", { className: "uix-notice__copy", children: [
|
|
40
|
+
title != null && /* @__PURE__ */ jsx("strong", { children: title }),
|
|
41
|
+
title != null && summary != null && " ",
|
|
42
|
+
summary
|
|
43
|
+
] }),
|
|
44
|
+
meta != null && /* @__PURE__ */ jsx("p", { className: "uix-notice__meta", children: meta })
|
|
45
|
+
] }),
|
|
46
|
+
(position != null || actions != null) && /* @__PURE__ */ jsxs("div", { className: "uix-notice__actions", children: [
|
|
47
|
+
position != null && /* @__PURE__ */ jsx("span", { className: "uix-notice__position", children: position }),
|
|
48
|
+
actions
|
|
49
|
+
] })
|
|
50
|
+
] });
|
|
51
|
+
}
|
|
52
|
+
function FeaturedStage({
|
|
53
|
+
visual,
|
|
54
|
+
visualLabel,
|
|
55
|
+
ordinal,
|
|
56
|
+
eyebrow,
|
|
57
|
+
title,
|
|
58
|
+
titleId,
|
|
59
|
+
description,
|
|
60
|
+
meta,
|
|
61
|
+
action,
|
|
62
|
+
className,
|
|
63
|
+
...props
|
|
64
|
+
}) {
|
|
65
|
+
return /* @__PURE__ */ jsxs("article", { className: cx("uix-featured__stage", className), ...props, children: [
|
|
66
|
+
/* @__PURE__ */ jsx(
|
|
67
|
+
"div",
|
|
68
|
+
{
|
|
69
|
+
className: "uix-featured__visual",
|
|
70
|
+
role: visualLabel != null ? "img" : void 0,
|
|
71
|
+
"aria-label": visualLabel,
|
|
72
|
+
"aria-hidden": visualLabel == null || void 0,
|
|
73
|
+
children: visual
|
|
74
|
+
}
|
|
75
|
+
),
|
|
76
|
+
/* @__PURE__ */ jsxs("div", { className: "uix-featured__content", "aria-live": "polite", children: [
|
|
77
|
+
(eyebrow != null || ordinal != null) && /* @__PURE__ */ jsxs("p", { className: "uix-featured__eyebrow", children: [
|
|
78
|
+
ordinal != null && /* @__PURE__ */ jsx("span", { className: "uix-featured__now", children: ordinal }),
|
|
79
|
+
eyebrow
|
|
80
|
+
] }),
|
|
81
|
+
/* @__PURE__ */ jsx("h2", { className: "uix-featured__title", id: titleId, children: title }),
|
|
82
|
+
description != null && /* @__PURE__ */ jsx("p", { className: "uix-featured__description", children: description }),
|
|
83
|
+
meta != null && /* @__PURE__ */ jsx("p", { className: "uix-featured__meta", children: meta }),
|
|
84
|
+
action
|
|
85
|
+
] })
|
|
86
|
+
] });
|
|
87
|
+
}
|
|
88
|
+
function FeaturedRundown({ eyebrow, title, titleId, meta, children, className, ...props }) {
|
|
89
|
+
return /* @__PURE__ */ jsxs("aside", { className: cx("uix-rundown", className), ...props, children: [
|
|
90
|
+
/* @__PURE__ */ jsxs("div", { className: "uix-rundown__head", children: [
|
|
91
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
92
|
+
eyebrow != null && /* @__PURE__ */ jsx("p", { className: "uix-rundown__eyebrow", children: eyebrow }),
|
|
93
|
+
/* @__PURE__ */ jsx("h2", { className: "uix-rundown__title", id: titleId, children: title })
|
|
94
|
+
] }),
|
|
95
|
+
meta
|
|
96
|
+
] }),
|
|
97
|
+
/* @__PURE__ */ jsx("div", { className: "uix-rundown__items", children })
|
|
98
|
+
] });
|
|
99
|
+
}
|
|
100
|
+
function FeaturedRundownItem({ number, topic, title, selected = false, className, ...props }) {
|
|
101
|
+
return /* @__PURE__ */ jsxs(
|
|
102
|
+
"button",
|
|
103
|
+
{
|
|
104
|
+
type: "button",
|
|
105
|
+
className: cx("uix-rundown__item", className),
|
|
106
|
+
"aria-pressed": selected,
|
|
107
|
+
"data-selected": selected ? "true" : "false",
|
|
108
|
+
...props,
|
|
109
|
+
children: [
|
|
110
|
+
number != null && /* @__PURE__ */ jsx("span", { className: "uix-rundown__number", children: number }),
|
|
111
|
+
/* @__PURE__ */ jsxs("span", { children: [
|
|
112
|
+
topic != null && /* @__PURE__ */ jsx("span", { className: "uix-rundown__topic", children: topic }),
|
|
113
|
+
/* @__PURE__ */ jsx("span", { className: "uix-rundown__item-title", children: title })
|
|
114
|
+
] })
|
|
115
|
+
]
|
|
116
|
+
}
|
|
117
|
+
);
|
|
118
|
+
}
|
|
119
|
+
function NewsLead({ meta, title, summary, className, ...props }) {
|
|
120
|
+
return /* @__PURE__ */ jsxs("article", { className: cx("uix-news-lead", className), ...props, children: [
|
|
121
|
+
meta != null && /* @__PURE__ */ jsx("p", { className: "uix-news-lead__meta", children: meta }),
|
|
122
|
+
/* @__PURE__ */ jsx("h3", { className: "uix-news-lead__title", children: title }),
|
|
123
|
+
summary != null && /* @__PURE__ */ jsx("p", { className: "uix-news-lead__summary", children: summary })
|
|
124
|
+
] });
|
|
125
|
+
}
|
|
126
|
+
function ContentList({ children, className, ...props }) {
|
|
127
|
+
return /* @__PURE__ */ jsx("ul", { className: cx("uix-content-list", className), ...props, children });
|
|
128
|
+
}
|
|
129
|
+
function ContentListItem({ title, meta, trailing, className, ...props }) {
|
|
130
|
+
return /* @__PURE__ */ jsxs("li", { className: cx("uix-content-list__item", className), ...props, children: [
|
|
131
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
132
|
+
/* @__PURE__ */ jsx("p", { className: "uix-content-list__title", children: title }),
|
|
133
|
+
meta != null && /* @__PURE__ */ jsx("p", { className: "uix-content-list__meta", children: meta })
|
|
134
|
+
] }),
|
|
135
|
+
trailing
|
|
136
|
+
] });
|
|
137
|
+
}
|
|
138
|
+
function ResourceGrid({ children, className, ...props }) {
|
|
139
|
+
return /* @__PURE__ */ jsx("div", { className: cx("uix-resource-grid", className), ...props, children });
|
|
140
|
+
}
|
|
141
|
+
function StatLine({ items, children, className, ...props }) {
|
|
142
|
+
return /* @__PURE__ */ jsxs("div", { className: cx("uix-stat-line", className), ...props, children: [
|
|
143
|
+
items?.map((item, i) => /* @__PURE__ */ jsxs("div", { className: "uix-stat-line__item", children: [
|
|
144
|
+
/* @__PURE__ */ jsx("span", { className: "uix-stat-line__value", children: item.value }),
|
|
145
|
+
/* @__PURE__ */ jsx("span", { className: "uix-stat-line__label", children: item.label })
|
|
146
|
+
] }, item.id ?? i)),
|
|
147
|
+
children
|
|
148
|
+
] });
|
|
149
|
+
}
|
|
150
|
+
function EventRow({ month, day, title, meta, className, ...props }) {
|
|
151
|
+
return /* @__PURE__ */ jsxs("div", { className: cx("uix-event-row", className), ...props, children: [
|
|
152
|
+
/* @__PURE__ */ jsxs("div", { className: "uix-event-date", children: [
|
|
153
|
+
/* @__PURE__ */ jsx("span", { className: "uix-event-date__month", children: month }),
|
|
154
|
+
/* @__PURE__ */ jsx("span", { className: "uix-event-date__day", children: day })
|
|
155
|
+
] }),
|
|
156
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
157
|
+
/* @__PURE__ */ jsx("p", { className: "uix-event-row__title", children: title }),
|
|
158
|
+
meta != null && /* @__PURE__ */ jsx("p", { className: "uix-event-row__meta", children: meta })
|
|
159
|
+
] })
|
|
160
|
+
] });
|
|
161
|
+
}
|
|
162
|
+
function StatusRow({ indicator, name, meta, className, ...props }) {
|
|
163
|
+
return /* @__PURE__ */ jsxs("div", { className: cx("uix-status-row", className), ...props, children: [
|
|
164
|
+
indicator,
|
|
165
|
+
/* @__PURE__ */ jsx("span", { className: "uix-status-row__name", children: name }),
|
|
166
|
+
meta != null && /* @__PURE__ */ jsx("span", { className: "uix-list-meta", children: meta })
|
|
167
|
+
] });
|
|
168
|
+
}
|
|
169
|
+
export {
|
|
170
|
+
ContentList,
|
|
171
|
+
ContentListItem,
|
|
172
|
+
EventRow,
|
|
173
|
+
FeaturedRundown,
|
|
174
|
+
FeaturedRundownItem,
|
|
175
|
+
FeaturedStage,
|
|
176
|
+
NewsLead,
|
|
177
|
+
NoticeQueue,
|
|
178
|
+
PageIntro,
|
|
179
|
+
ResourceGrid,
|
|
180
|
+
SectionHead,
|
|
181
|
+
StatLine,
|
|
182
|
+
StatusRow
|
|
183
|
+
};
|
package/dist/index.cjs
CHANGED
|
@@ -38,13 +38,19 @@ __export(src_exports, {
|
|
|
38
38
|
Comments: () => Comments,
|
|
39
39
|
Composer: () => Composer,
|
|
40
40
|
ComposerBar: () => ComposerBar,
|
|
41
|
+
ContentList: () => ContentList,
|
|
42
|
+
ContentListItem: () => ContentListItem,
|
|
41
43
|
DescriptionItem: () => DescriptionItem,
|
|
42
44
|
DescriptionList: () => DescriptionList,
|
|
43
45
|
DetailLayout: () => DetailLayout,
|
|
44
46
|
Drawer: () => Drawer,
|
|
45
47
|
EmptyState: () => EmptyState,
|
|
46
48
|
ErrorState: () => ErrorState,
|
|
49
|
+
EventRow: () => EventRow,
|
|
47
50
|
ExpandToggle: () => ExpandToggle,
|
|
51
|
+
FeaturedRundown: () => FeaturedRundown,
|
|
52
|
+
FeaturedRundownItem: () => FeaturedRundownItem,
|
|
53
|
+
FeaturedStage: () => FeaturedStage,
|
|
48
54
|
Field: () => Field,
|
|
49
55
|
Highlighted: () => Highlighted,
|
|
50
56
|
Inbox: () => Inbox,
|
|
@@ -66,8 +72,11 @@ __export(src_exports, {
|
|
|
66
72
|
NavFavourites: () => NavFavourites,
|
|
67
73
|
NavGroup: () => NavGroup,
|
|
68
74
|
NavItem: () => NavItem,
|
|
75
|
+
NewsLead: () => NewsLead,
|
|
69
76
|
Note: () => Note,
|
|
77
|
+
NoticeQueue: () => NoticeQueue,
|
|
70
78
|
PageHeader: () => PageHeader,
|
|
79
|
+
PageIntro: () => PageIntro,
|
|
71
80
|
Pagination: () => Pagination,
|
|
72
81
|
Peek: () => Peek,
|
|
73
82
|
Popover: () => Popover,
|
|
@@ -75,8 +84,10 @@ __export(src_exports, {
|
|
|
75
84
|
Prose: () => Prose,
|
|
76
85
|
Radio: () => Radio,
|
|
77
86
|
RadioGroup: () => RadioGroup,
|
|
87
|
+
ResourceGrid: () => ResourceGrid,
|
|
78
88
|
RowAction: () => RowAction,
|
|
79
89
|
RowActions: () => RowActions,
|
|
90
|
+
SectionHead: () => SectionHead,
|
|
80
91
|
Segmented: () => Segmented,
|
|
81
92
|
SegmentedOption: () => SegmentedOption,
|
|
82
93
|
Select: () => Select,
|
|
@@ -86,7 +97,9 @@ __export(src_exports, {
|
|
|
86
97
|
Spinner: () => Spinner,
|
|
87
98
|
StarButton: () => StarButton,
|
|
88
99
|
Stat: () => Stat,
|
|
100
|
+
StatLine: () => StatLine,
|
|
89
101
|
StatusPill: () => StatusPill,
|
|
102
|
+
StatusRow: () => StatusRow,
|
|
90
103
|
SubNavItem: () => SubNavItem,
|
|
91
104
|
Switch: () => Switch,
|
|
92
105
|
Tab: () => Tab,
|
|
@@ -2383,6 +2396,175 @@ function VirtualTreeView({
|
|
|
2383
2396
|
}
|
|
2384
2397
|
);
|
|
2385
2398
|
}
|
|
2399
|
+
|
|
2400
|
+
// src/components/EditorialHome.tsx
|
|
2401
|
+
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
2402
|
+
function PageIntro({
|
|
2403
|
+
kicker,
|
|
2404
|
+
title,
|
|
2405
|
+
lede,
|
|
2406
|
+
searchLabel,
|
|
2407
|
+
search,
|
|
2408
|
+
shortcuts,
|
|
2409
|
+
shortcutsLabel,
|
|
2410
|
+
className,
|
|
2411
|
+
children,
|
|
2412
|
+
...props
|
|
2413
|
+
}) {
|
|
2414
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("section", { className: cx("uix-page-intro", className), ...props, children: [
|
|
2415
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { children: [
|
|
2416
|
+
kicker != null && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "uix-page-kicker", children: kicker }),
|
|
2417
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("h1", { className: "uix-page-title", children: title }),
|
|
2418
|
+
lede != null && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "uix-page-lede", children: lede })
|
|
2419
|
+
] }),
|
|
2420
|
+
search != null && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { children: [
|
|
2421
|
+
searchLabel != null && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "uix-intro-search__label", children: searchLabel }),
|
|
2422
|
+
search
|
|
2423
|
+
] }),
|
|
2424
|
+
shortcuts != null && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "uix-shortcut-grid", "aria-label": shortcutsLabel, children: shortcuts }),
|
|
2425
|
+
children
|
|
2426
|
+
] });
|
|
2427
|
+
}
|
|
2428
|
+
function SectionHead({ title, titleId, action, className, ...props }) {
|
|
2429
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: cx("uix-section-head", className), ...props, children: [
|
|
2430
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("h2", { className: "uix-section-title", id: titleId, children: title }),
|
|
2431
|
+
action
|
|
2432
|
+
] });
|
|
2433
|
+
}
|
|
2434
|
+
function NoticeQueue({ icon, title, summary, meta, position, actions, className, ...props }) {
|
|
2435
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("section", { className: cx("uix-notice", className), ...props, children: [
|
|
2436
|
+
icon,
|
|
2437
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "uix-notice__content", "aria-live": "polite", children: [
|
|
2438
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("p", { className: "uix-notice__copy", children: [
|
|
2439
|
+
title != null && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("strong", { children: title }),
|
|
2440
|
+
title != null && summary != null && " ",
|
|
2441
|
+
summary
|
|
2442
|
+
] }),
|
|
2443
|
+
meta != null && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "uix-notice__meta", children: meta })
|
|
2444
|
+
] }),
|
|
2445
|
+
(position != null || actions != null) && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "uix-notice__actions", children: [
|
|
2446
|
+
position != null && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "uix-notice__position", children: position }),
|
|
2447
|
+
actions
|
|
2448
|
+
] })
|
|
2449
|
+
] });
|
|
2450
|
+
}
|
|
2451
|
+
function FeaturedStage({
|
|
2452
|
+
visual,
|
|
2453
|
+
visualLabel,
|
|
2454
|
+
ordinal,
|
|
2455
|
+
eyebrow,
|
|
2456
|
+
title,
|
|
2457
|
+
titleId,
|
|
2458
|
+
description,
|
|
2459
|
+
meta,
|
|
2460
|
+
action,
|
|
2461
|
+
className,
|
|
2462
|
+
...props
|
|
2463
|
+
}) {
|
|
2464
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("article", { className: cx("uix-featured__stage", className), ...props, children: [
|
|
2465
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
2466
|
+
"div",
|
|
2467
|
+
{
|
|
2468
|
+
className: "uix-featured__visual",
|
|
2469
|
+
role: visualLabel != null ? "img" : void 0,
|
|
2470
|
+
"aria-label": visualLabel,
|
|
2471
|
+
"aria-hidden": visualLabel == null || void 0,
|
|
2472
|
+
children: visual
|
|
2473
|
+
}
|
|
2474
|
+
),
|
|
2475
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "uix-featured__content", "aria-live": "polite", children: [
|
|
2476
|
+
(eyebrow != null || ordinal != null) && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("p", { className: "uix-featured__eyebrow", children: [
|
|
2477
|
+
ordinal != null && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "uix-featured__now", children: ordinal }),
|
|
2478
|
+
eyebrow
|
|
2479
|
+
] }),
|
|
2480
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("h2", { className: "uix-featured__title", id: titleId, children: title }),
|
|
2481
|
+
description != null && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "uix-featured__description", children: description }),
|
|
2482
|
+
meta != null && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "uix-featured__meta", children: meta }),
|
|
2483
|
+
action
|
|
2484
|
+
] })
|
|
2485
|
+
] });
|
|
2486
|
+
}
|
|
2487
|
+
function FeaturedRundown({ eyebrow, title, titleId, meta, children, className, ...props }) {
|
|
2488
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("aside", { className: cx("uix-rundown", className), ...props, children: [
|
|
2489
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "uix-rundown__head", children: [
|
|
2490
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { children: [
|
|
2491
|
+
eyebrow != null && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "uix-rundown__eyebrow", children: eyebrow }),
|
|
2492
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("h2", { className: "uix-rundown__title", id: titleId, children: title })
|
|
2493
|
+
] }),
|
|
2494
|
+
meta
|
|
2495
|
+
] }),
|
|
2496
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "uix-rundown__items", children })
|
|
2497
|
+
] });
|
|
2498
|
+
}
|
|
2499
|
+
function FeaturedRundownItem({ number, topic, title, selected = false, className, ...props }) {
|
|
2500
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
|
|
2501
|
+
"button",
|
|
2502
|
+
{
|
|
2503
|
+
type: "button",
|
|
2504
|
+
className: cx("uix-rundown__item", className),
|
|
2505
|
+
"aria-pressed": selected,
|
|
2506
|
+
"data-selected": selected ? "true" : "false",
|
|
2507
|
+
...props,
|
|
2508
|
+
children: [
|
|
2509
|
+
number != null && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "uix-rundown__number", children: number }),
|
|
2510
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { children: [
|
|
2511
|
+
topic != null && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "uix-rundown__topic", children: topic }),
|
|
2512
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "uix-rundown__item-title", children: title })
|
|
2513
|
+
] })
|
|
2514
|
+
]
|
|
2515
|
+
}
|
|
2516
|
+
);
|
|
2517
|
+
}
|
|
2518
|
+
function NewsLead({ meta, title, summary, className, ...props }) {
|
|
2519
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("article", { className: cx("uix-news-lead", className), ...props, children: [
|
|
2520
|
+
meta != null && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "uix-news-lead__meta", children: meta }),
|
|
2521
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("h3", { className: "uix-news-lead__title", children: title }),
|
|
2522
|
+
summary != null && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "uix-news-lead__summary", children: summary })
|
|
2523
|
+
] });
|
|
2524
|
+
}
|
|
2525
|
+
function ContentList({ children, className, ...props }) {
|
|
2526
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("ul", { className: cx("uix-content-list", className), ...props, children });
|
|
2527
|
+
}
|
|
2528
|
+
function ContentListItem({ title, meta, trailing, className, ...props }) {
|
|
2529
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("li", { className: cx("uix-content-list__item", className), ...props, children: [
|
|
2530
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { children: [
|
|
2531
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "uix-content-list__title", children: title }),
|
|
2532
|
+
meta != null && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "uix-content-list__meta", children: meta })
|
|
2533
|
+
] }),
|
|
2534
|
+
trailing
|
|
2535
|
+
] });
|
|
2536
|
+
}
|
|
2537
|
+
function ResourceGrid({ children, className, ...props }) {
|
|
2538
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: cx("uix-resource-grid", className), ...props, children });
|
|
2539
|
+
}
|
|
2540
|
+
function StatLine({ items, children, className, ...props }) {
|
|
2541
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: cx("uix-stat-line", className), ...props, children: [
|
|
2542
|
+
items?.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "uix-stat-line__item", children: [
|
|
2543
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "uix-stat-line__value", children: item.value }),
|
|
2544
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "uix-stat-line__label", children: item.label })
|
|
2545
|
+
] }, item.id ?? i)),
|
|
2546
|
+
children
|
|
2547
|
+
] });
|
|
2548
|
+
}
|
|
2549
|
+
function EventRow({ month, day, title, meta, className, ...props }) {
|
|
2550
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: cx("uix-event-row", className), ...props, children: [
|
|
2551
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "uix-event-date", children: [
|
|
2552
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "uix-event-date__month", children: month }),
|
|
2553
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "uix-event-date__day", children: day })
|
|
2554
|
+
] }),
|
|
2555
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { children: [
|
|
2556
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "uix-event-row__title", children: title }),
|
|
2557
|
+
meta != null && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "uix-event-row__meta", children: meta })
|
|
2558
|
+
] })
|
|
2559
|
+
] });
|
|
2560
|
+
}
|
|
2561
|
+
function StatusRow({ indicator, name, meta, className, ...props }) {
|
|
2562
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: cx("uix-status-row", className), ...props, children: [
|
|
2563
|
+
indicator,
|
|
2564
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "uix-status-row__name", children: name }),
|
|
2565
|
+
meta != null && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "uix-list-meta", children: meta })
|
|
2566
|
+
] });
|
|
2567
|
+
}
|
|
2386
2568
|
// Annotate the CommonJS export names for ESM import in node:
|
|
2387
2569
|
0 && (module.exports = {
|
|
2388
2570
|
Alert,
|
|
@@ -2403,13 +2585,19 @@ function VirtualTreeView({
|
|
|
2403
2585
|
Comments,
|
|
2404
2586
|
Composer,
|
|
2405
2587
|
ComposerBar,
|
|
2588
|
+
ContentList,
|
|
2589
|
+
ContentListItem,
|
|
2406
2590
|
DescriptionItem,
|
|
2407
2591
|
DescriptionList,
|
|
2408
2592
|
DetailLayout,
|
|
2409
2593
|
Drawer,
|
|
2410
2594
|
EmptyState,
|
|
2411
2595
|
ErrorState,
|
|
2596
|
+
EventRow,
|
|
2412
2597
|
ExpandToggle,
|
|
2598
|
+
FeaturedRundown,
|
|
2599
|
+
FeaturedRundownItem,
|
|
2600
|
+
FeaturedStage,
|
|
2413
2601
|
Field,
|
|
2414
2602
|
Highlighted,
|
|
2415
2603
|
Inbox,
|
|
@@ -2431,8 +2619,11 @@ function VirtualTreeView({
|
|
|
2431
2619
|
NavFavourites,
|
|
2432
2620
|
NavGroup,
|
|
2433
2621
|
NavItem,
|
|
2622
|
+
NewsLead,
|
|
2434
2623
|
Note,
|
|
2624
|
+
NoticeQueue,
|
|
2435
2625
|
PageHeader,
|
|
2626
|
+
PageIntro,
|
|
2436
2627
|
Pagination,
|
|
2437
2628
|
Peek,
|
|
2438
2629
|
Popover,
|
|
@@ -2440,8 +2631,10 @@ function VirtualTreeView({
|
|
|
2440
2631
|
Prose,
|
|
2441
2632
|
Radio,
|
|
2442
2633
|
RadioGroup,
|
|
2634
|
+
ResourceGrid,
|
|
2443
2635
|
RowAction,
|
|
2444
2636
|
RowActions,
|
|
2637
|
+
SectionHead,
|
|
2445
2638
|
Segmented,
|
|
2446
2639
|
SegmentedOption,
|
|
2447
2640
|
Select,
|
|
@@ -2451,7 +2644,9 @@ function VirtualTreeView({
|
|
|
2451
2644
|
Spinner,
|
|
2452
2645
|
StarButton,
|
|
2453
2646
|
Stat,
|
|
2647
|
+
StatLine,
|
|
2454
2648
|
StatusPill,
|
|
2649
|
+
StatusRow,
|
|
2455
2650
|
SubNavItem,
|
|
2456
2651
|
Switch,
|
|
2457
2652
|
Tab,
|
package/dist/index.d.cts
CHANGED
|
@@ -1091,4 +1091,183 @@ interface TreeNavAction {
|
|
|
1091
1091
|
*/
|
|
1092
1092
|
declare function treeNav<T extends TreeLike<T>>(flat: readonly FlatNode<T>[], currentId: string | undefined, key: string): TreeNavAction;
|
|
1093
1093
|
|
|
1094
|
-
|
|
1094
|
+
interface PageIntroProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
|
|
1095
|
+
/** Small line above the title (e.g. today's date). */
|
|
1096
|
+
kicker?: ReactNode;
|
|
1097
|
+
title: ReactNode;
|
|
1098
|
+
/** Supporting copy under the title. */
|
|
1099
|
+
lede?: ReactNode;
|
|
1100
|
+
/** Label shown above the search well. */
|
|
1101
|
+
searchLabel?: ReactNode;
|
|
1102
|
+
/** The search well itself (form + `.uix-searchbar` markup, or `SearchBar`-style composition). */
|
|
1103
|
+
search?: ReactNode;
|
|
1104
|
+
/** Shortcut buttons; rendered inside the `.uix-shortcut-grid` full-width row. */
|
|
1105
|
+
shortcuts?: ReactNode;
|
|
1106
|
+
/** Accessible label for the shortcuts group. */
|
|
1107
|
+
shortcutsLabel?: string;
|
|
1108
|
+
}
|
|
1109
|
+
/**
|
|
1110
|
+
* Editorial page intro — kicker / title / lede beside a search well, with an
|
|
1111
|
+
* optional full-width shortcut grid underneath (`.uix-page-intro`).
|
|
1112
|
+
*/
|
|
1113
|
+
declare function PageIntro({ kicker, title, lede, searchLabel, search, shortcuts, shortcutsLabel, className, children, ...props }: PageIntroProps): react.JSX.Element;
|
|
1114
|
+
interface SectionHeadProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
1115
|
+
title: ReactNode;
|
|
1116
|
+
/** id for the `<h2>`, for `aria-labelledby` wiring on the enclosing section. */
|
|
1117
|
+
titleId?: string;
|
|
1118
|
+
/** Right-aligned slot — a `.uix-section-link` anchor, a button, a pill. */
|
|
1119
|
+
action?: ReactNode;
|
|
1120
|
+
}
|
|
1121
|
+
/** Section head — title row with an optional trailing action (`.uix-section-head`). */
|
|
1122
|
+
declare function SectionHead({ title, titleId, action, className, ...props }: SectionHeadProps): react.JSX.Element;
|
|
1123
|
+
interface NoticeQueueProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
|
|
1124
|
+
/** Leading icon slot. */
|
|
1125
|
+
icon?: ReactNode;
|
|
1126
|
+
/** Bolded lead-in of the notice copy. */
|
|
1127
|
+
title?: ReactNode;
|
|
1128
|
+
/** Rest of the notice copy, after the title. */
|
|
1129
|
+
summary?: ReactNode;
|
|
1130
|
+
/** Meta line under the copy (e.g. "Needs action · Required by Friday"). */
|
|
1131
|
+
meta?: ReactNode;
|
|
1132
|
+
/** Queue position (e.g. "1 of 4 important updates"). */
|
|
1133
|
+
position?: ReactNode;
|
|
1134
|
+
/**
|
|
1135
|
+
* Trailing controls — previous/next arrows (put `uix-notice__arrow--previous`
|
|
1136
|
+
* on the previous button to flip its icon), read/view-all buttons.
|
|
1137
|
+
*/
|
|
1138
|
+
actions?: ReactNode;
|
|
1139
|
+
}
|
|
1140
|
+
/**
|
|
1141
|
+
* Notice queue — the rotating "important updates" banner (`.uix-notice`). The
|
|
1142
|
+
* copy region is `aria-live="polite"` so queue rotation is announced.
|
|
1143
|
+
*/
|
|
1144
|
+
declare function NoticeQueue({ icon, title, summary, meta, position, actions, className, ...props }: NoticeQueueProps): react.JSX.Element;
|
|
1145
|
+
interface FeaturedStageProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
|
|
1146
|
+
/** Decorative visual (story signal + diagram). Hidden from AT unless `visualLabel` is set. */
|
|
1147
|
+
visual?: ReactNode;
|
|
1148
|
+
/** Accessible description of the visual; when set the visual gets `role="img"`. */
|
|
1149
|
+
visualLabel?: string;
|
|
1150
|
+
/**
|
|
1151
|
+
* Ordinal of the story on stage (e.g. "01"), rendered as the filled
|
|
1152
|
+
* `.uix-featured__now` chip in the eyebrow. Pair it with the matching
|
|
1153
|
+
* `FeaturedRundownItem`'s `number` — the selected item's number renders as
|
|
1154
|
+
* the same chip, and that pairing is what links rundown to stage on every
|
|
1155
|
+
* breakpoint (the divider caret only exists while the zones sit side by side).
|
|
1156
|
+
*/
|
|
1157
|
+
ordinal?: ReactNode;
|
|
1158
|
+
eyebrow?: ReactNode;
|
|
1159
|
+
title: ReactNode;
|
|
1160
|
+
/** id for the `<h2>` title, for `aria-labelledby` wiring. */
|
|
1161
|
+
titleId?: string;
|
|
1162
|
+
description?: ReactNode;
|
|
1163
|
+
meta?: ReactNode;
|
|
1164
|
+
/** Call-to-action slot under the meta line. */
|
|
1165
|
+
action?: ReactNode;
|
|
1166
|
+
}
|
|
1167
|
+
/**
|
|
1168
|
+
* Featured stage — the hero story zone of the featured briefing
|
|
1169
|
+
* (`.uix-featured__stage`). The briefing is ONE `.uix-featured` card: put this
|
|
1170
|
+
* and `FeaturedRundown` directly inside it and the internal hairline, the
|
|
1171
|
+
* selected item's caret, and the ordinal chips connect the two zones. Content
|
|
1172
|
+
* is `aria-live="polite"` so swapping the featured story (from the rundown)
|
|
1173
|
+
* is announced.
|
|
1174
|
+
*/
|
|
1175
|
+
declare function FeaturedStage({ visual, visualLabel, ordinal, eyebrow, title, titleId, description, meta, action, className, ...props }: FeaturedStageProps): react.JSX.Element;
|
|
1176
|
+
interface FeaturedRundownProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
|
|
1177
|
+
/** Uppercase line above the title (e.g. "Editorial briefing"). */
|
|
1178
|
+
eyebrow?: ReactNode;
|
|
1179
|
+
title: ReactNode;
|
|
1180
|
+
/** id for the `<h2>` title, for `aria-labelledby` wiring. */
|
|
1181
|
+
titleId?: string;
|
|
1182
|
+
/** Trailing head slot (e.g. a count pill). */
|
|
1183
|
+
meta?: ReactNode;
|
|
1184
|
+
/** `FeaturedRundownItem`s. */
|
|
1185
|
+
children?: ReactNode;
|
|
1186
|
+
}
|
|
1187
|
+
/**
|
|
1188
|
+
* Featured rundown — the story-list zone of the featured briefing
|
|
1189
|
+
* (`.uix-rundown`), sitting inside the single `.uix-featured` card beside (or,
|
|
1190
|
+
* stacked, below) the `FeaturedStage`.
|
|
1191
|
+
*/
|
|
1192
|
+
declare function FeaturedRundown({ eyebrow, title, titleId, meta, children, className, ...props }: FeaturedRundownProps): react.JSX.Element;
|
|
1193
|
+
interface FeaturedRundownItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'title'> {
|
|
1194
|
+
/** Ordinal label (e.g. "01"). */
|
|
1195
|
+
number?: ReactNode;
|
|
1196
|
+
/** Topic/duration line above the item title (e.g. "Company · 5 min"). */
|
|
1197
|
+
topic?: ReactNode;
|
|
1198
|
+
/** The story title. */
|
|
1199
|
+
title: ReactNode;
|
|
1200
|
+
/** Whether this story is on the stage — sets `aria-pressed` + `data-selected`. */
|
|
1201
|
+
selected?: boolean;
|
|
1202
|
+
}
|
|
1203
|
+
/**
|
|
1204
|
+
* One rundown story — a toggle button (`.uix-rundown__item`) whose selection
|
|
1205
|
+
* is conveyed with `aria-pressed` and styled through `[data-selected]`.
|
|
1206
|
+
*/
|
|
1207
|
+
declare function FeaturedRundownItem({ number, topic, title, selected, className, ...props }: FeaturedRundownItemProps): react.JSX.Element;
|
|
1208
|
+
interface NewsLeadProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
|
|
1209
|
+
/** Meta line above the title (pill + date). */
|
|
1210
|
+
meta?: ReactNode;
|
|
1211
|
+
title: ReactNode;
|
|
1212
|
+
summary?: ReactNode;
|
|
1213
|
+
}
|
|
1214
|
+
/** News lead — the top story of a news column (`.uix-news-lead`). */
|
|
1215
|
+
declare function NewsLead({ meta, title, summary, className, ...props }: NewsLeadProps): react.JSX.Element;
|
|
1216
|
+
interface ContentListProps extends HTMLAttributes<HTMLUListElement> {
|
|
1217
|
+
/** `ContentListItem`s. */
|
|
1218
|
+
children?: ReactNode;
|
|
1219
|
+
}
|
|
1220
|
+
/** Content list — hairline-divided rows of titled items (`.uix-content-list`). */
|
|
1221
|
+
declare function ContentList({ children, className, ...props }: ContentListProps): react.JSX.Element;
|
|
1222
|
+
interface ContentListItemProps extends Omit<HTMLAttributes<HTMLLIElement>, 'title'> {
|
|
1223
|
+
title: ReactNode;
|
|
1224
|
+
meta?: ReactNode;
|
|
1225
|
+
/** Trailing slot — an arrow glyph, a pill. */
|
|
1226
|
+
trailing?: ReactNode;
|
|
1227
|
+
}
|
|
1228
|
+
/** One content-list row — title + meta with an optional trailing slot. */
|
|
1229
|
+
declare function ContentListItem({ title, meta, trailing, className, ...props }: ContentListItemProps): react.JSX.Element;
|
|
1230
|
+
interface ResourceGridProps extends HTMLAttributes<HTMLDivElement> {
|
|
1231
|
+
/** Resource buttons/links (typically `.uix-btn--outline`). */
|
|
1232
|
+
children?: ReactNode;
|
|
1233
|
+
}
|
|
1234
|
+
/** Resource grid — a three-up grid of resource shortcuts (`.uix-resource-grid`). */
|
|
1235
|
+
declare function ResourceGrid({ children, className, ...props }: ResourceGridProps): react.JSX.Element;
|
|
1236
|
+
interface StatLineItem {
|
|
1237
|
+
/** Stable identity for the item; falls back to the index when omitted. */
|
|
1238
|
+
id?: string;
|
|
1239
|
+
value: ReactNode;
|
|
1240
|
+
label: ReactNode;
|
|
1241
|
+
}
|
|
1242
|
+
interface StatLineProps extends HTMLAttributes<HTMLDivElement> {
|
|
1243
|
+
items?: StatLineItem[];
|
|
1244
|
+
children?: ReactNode;
|
|
1245
|
+
}
|
|
1246
|
+
/**
|
|
1247
|
+
* Stat line — a compact value/label summary strip over a hairline
|
|
1248
|
+
* (`.uix-stat-line`). Use `items` for data-driven stats or hand-author
|
|
1249
|
+
* `.uix-stat-line__item` children.
|
|
1250
|
+
*/
|
|
1251
|
+
declare function StatLine({ items, children, className, ...props }: StatLineProps): react.JSX.Element;
|
|
1252
|
+
interface EventRowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
1253
|
+
/** Calendar-block month (e.g. "Jul"). */
|
|
1254
|
+
month: ReactNode;
|
|
1255
|
+
/** Calendar-block day (e.g. "30"). */
|
|
1256
|
+
day: ReactNode;
|
|
1257
|
+
title: ReactNode;
|
|
1258
|
+
meta?: ReactNode;
|
|
1259
|
+
}
|
|
1260
|
+
/** Event row — date block + title/meta (`.uix-event-row`). */
|
|
1261
|
+
declare function EventRow({ month, day, title, meta, className, ...props }: EventRowProps): react.JSX.Element;
|
|
1262
|
+
interface StatusRowProps extends HTMLAttributes<HTMLDivElement> {
|
|
1263
|
+
/** Leading indicator slot (e.g. a `.uix-dot`). */
|
|
1264
|
+
indicator?: ReactNode;
|
|
1265
|
+
/** Service name — takes the flexible middle (`.uix-status-row__name`). */
|
|
1266
|
+
name: ReactNode;
|
|
1267
|
+
/** Trailing meta (e.g. "Healthy"), rendered as `.uix-list-meta`. */
|
|
1268
|
+
meta?: ReactNode;
|
|
1269
|
+
}
|
|
1270
|
+
/** Status row — indicator + name + trailing meta (`.uix-status-row`). */
|
|
1271
|
+
declare function StatusRow({ indicator, name, meta, className, ...props }: StatusRowProps): react.JSX.Element;
|
|
1272
|
+
|
|
1273
|
+
export { Alert, type AlertProps, type AlertTone, type Align, AppShell, type AppShellProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BulkBar, type BulkBarProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, type CardProps, CellStrong, CellSub, Checkbox, type CheckboxProps, type ColumnFilter, CommandGroup, type CommandGroupProps, CommandItem, type CommandItemProps, CommandPalette, type CommandPaletteProps, Comment, type CommentProps, Comments, type CommentsProps, Composer, ComposerBar, type ComposerBarProps, type ComposerProps, ContentList, ContentListItem, type ContentListItemProps, type ContentListProps, DescriptionItem, type DescriptionItemProps, DescriptionList, type DescriptionListItem, type DescriptionListProps, DetailLayout, type DetailLayoutProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, EventRow, type EventRowProps, ExpandToggle, type ExpandToggleProps, FeaturedRundown, FeaturedRundownItem, type FeaturedRundownItemProps, type FeaturedRundownProps, FeaturedStage, type FeaturedStageProps, Field, type FieldProps, type FilterKind, type FilterOp, type FlatNode, Highlighted, type HighlightedProps, Inbox, InboxDetail, type InboxDetailProps, InboxItem, type InboxItemProps, InboxList, type InboxListProps, type InboxProps, Input, InputGroup, type InputGroupProps, type InputProps, Kanban, KanbanCard, type KanbanCardProps, KanbanColumn, type KanbanColumnProps, type KanbanProps, Label, type LabelProps, List, ListItem, type ListItemProps, type ListProps, LoadingState, type LoadingStateProps, Mark, type MarkProps, Meter, type MeterProps, type MeterTone, Modal, type ModalProps, type NavFavouriteItem, NavFavourites, type NavFavouritesLabels, type NavFavouritesProps, NavGroup, type NavGroupProps, NavItem, type NavItemProps, NewsLead, type NewsLeadProps, Note, type NoteProps, type NoteTone, NoticeQueue, type NoticeQueueProps, PageHeader, type PageHeaderProps, PageIntro, type PageIntroProps, Pagination, type PaginationProps, Peek, type PeekProps, type PillTone, type PillTreatment, type Placement, Popover, type PopoverProps, type PositionOptions, type PositionResult, type Primitive, Progress, type ProgressProps, Prose, type ProseProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type Rect, ResourceGrid, type ResourceGridProps, type Row, RowAction, type RowActionProps, RowActions, type RowActionsProps, SectionHead, type SectionHeadProps, type Segment, Segmented, SegmentedOption, type SegmentedOptionProps, type SegmentedProps, Select, type SelectAllState, type SelectProps, type ShellNav, type Side, Sidebar, type SidebarProps, SidebarSection, type SidebarSectionProps, type Size, Skeleton, type SkeletonProps, type SortDir, type SortDirection, type SortKey, Spinner, type SpinnerProps, StarButton, type StarButtonProps, Stat, StatLine, type StatLineItem, type StatLineProps, type StatProps, type StatTrend, StatusPill, type StatusPillProps, StatusRow, type StatusRowProps, SubNavItem, type SubNavItemProps, Switch, type SwitchProps, Tab, type TabProps, Table, type TableDensity, type TableProps, TableWrap, type TableWrapProps, Tabs, type TabsProps, Td, type TdProps, Textarea, type TextareaProps, Th, type ThProps, Timeline, TimelineItem, type TimelineItemProps, type TimelineProps, Toast, type ToastProps, type ToastTone, Toaster, type ToasterProps, Tooltip, type TooltipProps, Tr, type TrProps, Tree, type TreeLike, type TreeNavAction, type TreeNodeData, type TreeNodeProps, type TreeProps, type UseAnchoredPositionOptions, type UseTableOptions, type UseTableResult, UserChip, type UserChipProps, type ViewState, type VirtualWindow, applyFilters, clampWidth, computePosition, cx, flattenTree, highlightSegments, matchFilter, mergePinned, multiSort, nextSortDir, parseView, reorder, searchRows, selectAllState, serializeView, shouldVirtualize, toggleId, togglePage, toggleSort, treeNav, useAnchoredPosition, useDialog, useTable, virtualWindow };
|
package/dist/index.d.ts
CHANGED
|
@@ -49,4 +49,5 @@ export { Inbox, InboxDetail, InboxDetailProps, InboxItem, InboxItemProps, InboxL
|
|
|
49
49
|
export { Kanban, KanbanCard, KanbanCardProps, KanbanColumn, KanbanColumnProps, KanbanProps } from './components/Kanban.js';
|
|
50
50
|
export { Tree, TreeNodeData, TreeNodeProps, TreeProps } from './components/Tree.js';
|
|
51
51
|
export { FlatNode, TreeLike, TreeNavAction, flattenTree, treeNav } from './tree-model.js';
|
|
52
|
+
export { ContentList, ContentListItem, ContentListItemProps, ContentListProps, EventRow, EventRowProps, FeaturedRundown, FeaturedRundownItem, FeaturedRundownItemProps, FeaturedRundownProps, FeaturedStage, FeaturedStageProps, NewsLead, NewsLeadProps, NoticeQueue, NoticeQueueProps, PageIntro, PageIntroProps, ResourceGrid, ResourceGridProps, SectionHead, SectionHeadProps, StatLine, StatLineItem, StatLineProps, StatusRow, StatusRowProps } from './components/EditorialHome.js';
|
|
52
53
|
import 'react';
|
package/dist/index.js
CHANGED
|
@@ -63,6 +63,21 @@ import { Inbox, InboxList, InboxItem, InboxDetail } from "./components/Inbox.js"
|
|
|
63
63
|
import { Kanban, KanbanColumn, KanbanCard } from "./components/Kanban.js";
|
|
64
64
|
import { Tree } from "./components/Tree.js";
|
|
65
65
|
import { flattenTree, treeNav } from "./tree-model.js";
|
|
66
|
+
import {
|
|
67
|
+
PageIntro,
|
|
68
|
+
SectionHead,
|
|
69
|
+
NoticeQueue,
|
|
70
|
+
FeaturedStage,
|
|
71
|
+
FeaturedRundown,
|
|
72
|
+
FeaturedRundownItem,
|
|
73
|
+
NewsLead,
|
|
74
|
+
ContentList,
|
|
75
|
+
ContentListItem,
|
|
76
|
+
ResourceGrid,
|
|
77
|
+
StatLine,
|
|
78
|
+
EventRow,
|
|
79
|
+
StatusRow
|
|
80
|
+
} from "./components/EditorialHome.js";
|
|
66
81
|
export {
|
|
67
82
|
Alert,
|
|
68
83
|
AppShell,
|
|
@@ -82,13 +97,19 @@ export {
|
|
|
82
97
|
Comments,
|
|
83
98
|
Composer,
|
|
84
99
|
ComposerBar,
|
|
100
|
+
ContentList,
|
|
101
|
+
ContentListItem,
|
|
85
102
|
DescriptionItem,
|
|
86
103
|
DescriptionList,
|
|
87
104
|
DetailLayout,
|
|
88
105
|
Drawer,
|
|
89
106
|
EmptyState,
|
|
90
107
|
ErrorState,
|
|
108
|
+
EventRow,
|
|
91
109
|
ExpandToggle,
|
|
110
|
+
FeaturedRundown,
|
|
111
|
+
FeaturedRundownItem,
|
|
112
|
+
FeaturedStage,
|
|
92
113
|
Field,
|
|
93
114
|
Highlighted,
|
|
94
115
|
Inbox,
|
|
@@ -110,8 +131,11 @@ export {
|
|
|
110
131
|
NavFavourites,
|
|
111
132
|
NavGroup,
|
|
112
133
|
NavItem,
|
|
134
|
+
NewsLead,
|
|
113
135
|
Note,
|
|
136
|
+
NoticeQueue,
|
|
114
137
|
PageHeader,
|
|
138
|
+
PageIntro,
|
|
115
139
|
Pagination,
|
|
116
140
|
Peek,
|
|
117
141
|
Popover,
|
|
@@ -119,8 +143,10 @@ export {
|
|
|
119
143
|
Prose,
|
|
120
144
|
Radio,
|
|
121
145
|
RadioGroup,
|
|
146
|
+
ResourceGrid,
|
|
122
147
|
RowAction,
|
|
123
148
|
RowActions,
|
|
149
|
+
SectionHead,
|
|
124
150
|
Segmented,
|
|
125
151
|
SegmentedOption,
|
|
126
152
|
Select,
|
|
@@ -130,7 +156,9 @@ export {
|
|
|
130
156
|
Spinner,
|
|
131
157
|
StarButton,
|
|
132
158
|
Stat,
|
|
159
|
+
StatLine,
|
|
133
160
|
StatusPill,
|
|
161
|
+
StatusRow,
|
|
134
162
|
SubNavItem,
|
|
135
163
|
Switch,
|
|
136
164
|
Tab,
|