@the-portland-company/shell 0.87.1 → 0.89.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/CHANGELOG.md +22 -0
- package/README.md +51 -0
- package/bin/shell-version-check.mjs +117 -0
- package/dist/app-chrome.cjs.map +1 -1
- package/dist/app-chrome.d.cts +1 -1
- package/dist/app-chrome.d.ts +1 -1
- package/dist/app-chrome.js +3 -3
- package/dist/chrome.css +20 -0
- package/dist/{chunk-PRZP2SB6.js → chunk-J23MTK56.js} +562 -5
- package/dist/chunk-J23MTK56.js.map +1 -0
- package/dist/{chunk-3JOLELB4.js → chunk-SJDFAK5R.js} +23 -5
- package/dist/chunk-SJDFAK5R.js.map +1 -0
- package/dist/{index-bfbWLC7_.d.cts → index-CZylXAP4.d.cts} +278 -2
- package/dist/{index-C31E7M9l.d.ts → index-DwkSyAip.d.ts} +278 -2
- package/dist/index.cjs +400 -20
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +6 -79
- package/dist/index.d.ts +6 -79
- package/dist/index.js +21 -204
- package/dist/index.js.map +1 -1
- package/dist/native.cjs +589 -4
- package/dist/native.cjs.map +1 -1
- package/dist/native.d.cts +1 -1
- package/dist/native.d.ts +1 -1
- package/dist/native.js +2 -2
- package/eslint/index.cjs +172 -0
- package/eslint/index.d.ts +6 -0
- package/eslint/index.mjs +5 -0
- package/package.json +17 -2
- package/dist/chunk-3JOLELB4.js.map +0 -1
- package/dist/chunk-PRZP2SB6.js.map +0 -1
|
@@ -1,7 +1,41 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import
|
|
2
|
+
import * as react from 'react';
|
|
3
|
+
import { ReactNode, CSSProperties, ButtonHTMLAttributes, AnchorHTMLAttributes, ElementType, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes, ComponentType } from 'react';
|
|
3
4
|
import { ThemePreference as ThemePreference$1 } from './theme-preference.cjs';
|
|
4
5
|
|
|
6
|
+
type CardPadding = 'none' | 'sm' | 'md' | 'lg';
|
|
7
|
+
type CardProps = {
|
|
8
|
+
/** Heading text. With none of the structured props below it renders as a plain `<h3>` inside the padded box. */
|
|
9
|
+
title?: ReactNode;
|
|
10
|
+
/** Secondary line under the title. Switches the card to the structured header layout. */
|
|
11
|
+
subtitle?: ReactNode;
|
|
12
|
+
/** Right-aligned header content (a link, chip or count). Same as `actions`; both may be set. */
|
|
13
|
+
aside?: ReactNode;
|
|
14
|
+
/** Right-aligned header buttons. */
|
|
15
|
+
actions?: ReactNode;
|
|
16
|
+
/** Bottom strip separated by a top border. */
|
|
17
|
+
footer?: ReactNode;
|
|
18
|
+
children?: ReactNode;
|
|
19
|
+
/** Padding of the card (legacy layout) or of the body (structured layout). Default `md` (p-6). */
|
|
20
|
+
padding?: CardPadding;
|
|
21
|
+
/** Replaces the body padding classes in the structured layout (e.g. `px-7 pb-6 pt-6`). */
|
|
22
|
+
bodyClassName?: string;
|
|
23
|
+
minH?: string | number;
|
|
24
|
+
className?: string;
|
|
25
|
+
style?: CSSProperties;
|
|
26
|
+
[key: string]: unknown;
|
|
27
|
+
};
|
|
28
|
+
/**
|
|
29
|
+
* Shared Card. Surface, border and text come from the `--app-card-*` tokens, which
|
|
30
|
+
* have light values on `:root` and dark values under `.dark`
|
|
31
|
+
* (chrome.css), so a card is correct in both themes.
|
|
32
|
+
*
|
|
33
|
+
* Plain `<Card title>` keeps the original layout (padding on the card, h3 above the
|
|
34
|
+
* content). Passing `subtitle`, `aside`, `actions`, `footer` or `bodyClassName` switches to
|
|
35
|
+
* the structured layout: bordered header, body, bordered footer.
|
|
36
|
+
*/
|
|
37
|
+
declare function Card({ title, subtitle, aside, actions, footer, children, padding, bodyClassName, minH, className, style, ...props }: CardProps): react_jsx_runtime.JSX.Element;
|
|
38
|
+
|
|
5
39
|
type FormColumnProps = {
|
|
6
40
|
children: ReactNode;
|
|
7
41
|
className?: string;
|
|
@@ -19,6 +53,239 @@ type FormColumnProps = {
|
|
|
19
53
|
*/
|
|
20
54
|
declare function FormColumn({ children, className }: FormColumnProps): react_jsx_runtime.JSX.Element;
|
|
21
55
|
|
|
56
|
+
type BreadcrumbItem$1 = {
|
|
57
|
+
label: string;
|
|
58
|
+
href?: string;
|
|
59
|
+
};
|
|
60
|
+
/** The three Modes a page header's eyebrow can announce (Reference/UI-Platform
|
|
61
|
+
* → "Per-mode branding"). */
|
|
62
|
+
type PageHeaderMode = 'relationship' | 'campaign' | 'petition';
|
|
63
|
+
type PageHeaderProps = {
|
|
64
|
+
title?: ReactNode;
|
|
65
|
+
/**
|
|
66
|
+
* The operating Mode this page belongs to. When set, the 11px uppercase
|
|
67
|
+
* mode eyebrow ("Relationship mode" / "Campaign mode" / "Petition mode")
|
|
68
|
+
* renders above the title by DEFAULT — Reference/UI-Platform → "Page
|
|
69
|
+
* header": "Left: an 11px uppercase mode eyebrow ... in the mode color
|
|
70
|
+
* (`modes.<mode>.primary`)". Pass `showEyebrow={false}` to suppress it.
|
|
71
|
+
*/
|
|
72
|
+
mode?: PageHeaderMode;
|
|
73
|
+
/** Overrides the eyebrow text the `mode` default would produce. */
|
|
74
|
+
eyebrow?: string;
|
|
75
|
+
/** Set false to suppress the eyebrow even when `mode` is passed. Default true. */
|
|
76
|
+
showEyebrow?: boolean;
|
|
77
|
+
/** Optional one-line subtitle, 15px G4, directly under the title. */
|
|
78
|
+
subtitle?: ReactNode;
|
|
79
|
+
breadcrumbs?: BreadcrumbItem$1[];
|
|
80
|
+
actions?: ReactNode;
|
|
81
|
+
tabBar?: ReactNode;
|
|
82
|
+
maxW?: string;
|
|
83
|
+
hideSidebar?: boolean;
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
|
|
87
|
+
type ButtonSize = 'md' | 'sm';
|
|
88
|
+
type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'type'> & {
|
|
89
|
+
/** Visual style. Default `primary`. */
|
|
90
|
+
variant?: ButtonVariant;
|
|
91
|
+
/** `md` is 44px tall (default), `sm` is 36px. */
|
|
92
|
+
size?: ButtonSize;
|
|
93
|
+
/** Shows a spinner, sets `aria-busy`, and blocks interaction. */
|
|
94
|
+
loading?: boolean;
|
|
95
|
+
disabled?: boolean;
|
|
96
|
+
/** Renders a link-button. Without `as`, `href` renders an `<a>`. */
|
|
97
|
+
href?: string;
|
|
98
|
+
/** Element or component to render as (e.g. a router `Link`). */
|
|
99
|
+
as?: ElementType;
|
|
100
|
+
type?: 'button' | 'submit' | 'reset';
|
|
101
|
+
children?: ReactNode;
|
|
102
|
+
className?: string;
|
|
103
|
+
/** Extra props for the rendered element (e.g. a router Link's `to`). */
|
|
104
|
+
to?: string;
|
|
105
|
+
};
|
|
106
|
+
/**
|
|
107
|
+
* The shared button. Apps use this instead of a local Button. 5px radius, 12px
|
|
108
|
+
* horizontal padding; primary uses the shell's `--app-btn-primary-*` tokens
|
|
109
|
+
* (Specs buttonPrimary). Pass `href` (or `as`) for a link-button.
|
|
110
|
+
*/
|
|
111
|
+
declare const Button: react.ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "type"> & {
|
|
112
|
+
/** Visual style. Default `primary`. */
|
|
113
|
+
variant?: ButtonVariant;
|
|
114
|
+
/** `md` is 44px tall (default), `sm` is 36px. */
|
|
115
|
+
size?: ButtonSize;
|
|
116
|
+
/** Shows a spinner, sets `aria-busy`, and blocks interaction. */
|
|
117
|
+
loading?: boolean;
|
|
118
|
+
disabled?: boolean;
|
|
119
|
+
/** Renders a link-button. Without `as`, `href` renders an `<a>`. */
|
|
120
|
+
href?: string;
|
|
121
|
+
/** Element or component to render as (e.g. a router `Link`). */
|
|
122
|
+
as?: ElementType;
|
|
123
|
+
type?: "button" | "submit" | "reset";
|
|
124
|
+
children?: ReactNode;
|
|
125
|
+
className?: string;
|
|
126
|
+
/** Extra props for the rendered element (e.g. a router Link's `to`). */
|
|
127
|
+
to?: string;
|
|
128
|
+
} & react.RefAttributes<HTMLElement>>;
|
|
129
|
+
|
|
130
|
+
type FieldChromeProps = {
|
|
131
|
+
/** Visible label rendered above the control. */
|
|
132
|
+
label?: ReactNode;
|
|
133
|
+
/** Helper text under the control; replaced by `error` when one is set. */
|
|
134
|
+
helperText?: ReactNode;
|
|
135
|
+
/** Error message. Truthy marks the control invalid (aria-invalid). */
|
|
136
|
+
error?: ReactNode;
|
|
137
|
+
};
|
|
138
|
+
|
|
139
|
+
/**
|
|
140
|
+
* Text-like input types the field styling supports. Checkbox has `Checkbox` and
|
|
141
|
+
* file has `FileInput`; radio, range and color need their own native layout and are
|
|
142
|
+
* not supported here.
|
|
143
|
+
*/
|
|
144
|
+
type InputType = 'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'number' | 'date' | 'time' | 'datetime-local' | 'month' | 'week';
|
|
145
|
+
type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & FieldChromeProps & {
|
|
146
|
+
/** Text-like types only (see `InputType`). Default `text`. */
|
|
147
|
+
type?: InputType;
|
|
148
|
+
/** Class for the control itself; the wrapper takes `wrapperClassName`. */
|
|
149
|
+
className?: string;
|
|
150
|
+
wrapperClassName?: string;
|
|
151
|
+
/** Marks the control invalid without an error message. */
|
|
152
|
+
invalid?: boolean;
|
|
153
|
+
};
|
|
154
|
+
/**
|
|
155
|
+
* Shared Input. Apps use this instead of a local Input. 5px radius, 12px
|
|
156
|
+
* horizontal padding, 44px control height, shell `--app-field-*` tokens.
|
|
157
|
+
*/
|
|
158
|
+
declare const Input: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & FieldChromeProps & {
|
|
159
|
+
/** Text-like types only (see `InputType`). Default `text`. */
|
|
160
|
+
type?: InputType;
|
|
161
|
+
/** Class for the control itself; the wrapper takes `wrapperClassName`. */
|
|
162
|
+
className?: string;
|
|
163
|
+
wrapperClassName?: string;
|
|
164
|
+
/** Marks the control invalid without an error message. */
|
|
165
|
+
invalid?: boolean;
|
|
166
|
+
} & react.RefAttributes<HTMLInputElement>>;
|
|
167
|
+
|
|
168
|
+
type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & FieldChromeProps & {
|
|
169
|
+
/** Class for the control itself; the wrapper takes `wrapperClassName`. */
|
|
170
|
+
className?: string;
|
|
171
|
+
wrapperClassName?: string;
|
|
172
|
+
/** Marks the control invalid without an error message. */
|
|
173
|
+
invalid?: boolean;
|
|
174
|
+
};
|
|
175
|
+
/**
|
|
176
|
+
* Shared Select. Apps use this instead of a local Select. 5px radius, 12px
|
|
177
|
+
* horizontal padding, 44px control height, shell `--app-field-*` tokens.
|
|
178
|
+
*/
|
|
179
|
+
declare const Select: react.ForwardRefExoticComponent<SelectHTMLAttributes<HTMLSelectElement> & FieldChromeProps & {
|
|
180
|
+
/** Class for the control itself; the wrapper takes `wrapperClassName`. */
|
|
181
|
+
className?: string;
|
|
182
|
+
wrapperClassName?: string;
|
|
183
|
+
/** Marks the control invalid without an error message. */
|
|
184
|
+
invalid?: boolean;
|
|
185
|
+
} & react.RefAttributes<HTMLSelectElement>>;
|
|
186
|
+
|
|
187
|
+
type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & FieldChromeProps & {
|
|
188
|
+
/** Class for the control itself; the wrapper takes `wrapperClassName`. */
|
|
189
|
+
className?: string;
|
|
190
|
+
wrapperClassName?: string;
|
|
191
|
+
/** Marks the control invalid without an error message. */
|
|
192
|
+
invalid?: boolean;
|
|
193
|
+
};
|
|
194
|
+
/**
|
|
195
|
+
* Shared Textarea. Apps use this instead of a local Textarea. 5px radius, 12px
|
|
196
|
+
* horizontal padding, 88px minimum height, shell `--app-field-*` tokens.
|
|
197
|
+
*/
|
|
198
|
+
declare const Textarea: react.ForwardRefExoticComponent<TextareaHTMLAttributes<HTMLTextAreaElement> & FieldChromeProps & {
|
|
199
|
+
/** Class for the control itself; the wrapper takes `wrapperClassName`. */
|
|
200
|
+
className?: string;
|
|
201
|
+
wrapperClassName?: string;
|
|
202
|
+
/** Marks the control invalid without an error message. */
|
|
203
|
+
invalid?: boolean;
|
|
204
|
+
} & react.RefAttributes<HTMLTextAreaElement>>;
|
|
205
|
+
|
|
206
|
+
type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {
|
|
207
|
+
/** Visible label, clickable. */
|
|
208
|
+
label?: ReactNode;
|
|
209
|
+
/** Secondary text under the label. */
|
|
210
|
+
description?: ReactNode;
|
|
211
|
+
/** Mixed state (set on the DOM node; `checked` still controls the underlying value). */
|
|
212
|
+
indeterminate?: boolean;
|
|
213
|
+
/** Marks the checkbox invalid (red outline, aria-invalid). */
|
|
214
|
+
invalid?: boolean;
|
|
215
|
+
/** Class for the `<input>`; the row takes `wrapperClassName`. */
|
|
216
|
+
className?: string;
|
|
217
|
+
wrapperClassName?: string;
|
|
218
|
+
};
|
|
219
|
+
/**
|
|
220
|
+
* Shared Checkbox. The whole row is a 44px-tall touch target (label wraps the
|
|
221
|
+
* control); colors come from the shell tokens, with the accent as the fill.
|
|
222
|
+
*/
|
|
223
|
+
declare const Checkbox: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & {
|
|
224
|
+
/** Visible label, clickable. */
|
|
225
|
+
label?: ReactNode;
|
|
226
|
+
/** Secondary text under the label. */
|
|
227
|
+
description?: ReactNode;
|
|
228
|
+
/** Mixed state (set on the DOM node; `checked` still controls the underlying value). */
|
|
229
|
+
indeterminate?: boolean;
|
|
230
|
+
/** Marks the checkbox invalid (red outline, aria-invalid). */
|
|
231
|
+
invalid?: boolean;
|
|
232
|
+
/** Class for the `<input>`; the row takes `wrapperClassName`. */
|
|
233
|
+
className?: string;
|
|
234
|
+
wrapperClassName?: string;
|
|
235
|
+
} & react.RefAttributes<HTMLInputElement>>;
|
|
236
|
+
|
|
237
|
+
type FileInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'defaultValue'> & FieldChromeProps & {
|
|
238
|
+
/** Class for the control itself; the wrapper takes `wrapperClassName`. */
|
|
239
|
+
className?: string;
|
|
240
|
+
wrapperClassName?: string;
|
|
241
|
+
/** Marks the control invalid without an error message. */
|
|
242
|
+
invalid?: boolean;
|
|
243
|
+
};
|
|
244
|
+
/**
|
|
245
|
+
* Shared file picker (`<input type="file">`). Same label/helper/error chrome and
|
|
246
|
+
* field tokens as `Input`; the native "Choose file" button is styled with the
|
|
247
|
+
* secondary-button tokens. Use `accept` / `multiple` as usual.
|
|
248
|
+
*/
|
|
249
|
+
declare const FileInput: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "defaultValue"> & FieldChromeProps & {
|
|
250
|
+
/** Class for the control itself; the wrapper takes `wrapperClassName`. */
|
|
251
|
+
className?: string;
|
|
252
|
+
wrapperClassName?: string;
|
|
253
|
+
/** Marks the control invalid without an error message. */
|
|
254
|
+
invalid?: boolean;
|
|
255
|
+
} & react.RefAttributes<HTMLInputElement>>;
|
|
256
|
+
|
|
257
|
+
type BreadcrumbItem = {
|
|
258
|
+
label: string;
|
|
259
|
+
href?: string;
|
|
260
|
+
};
|
|
261
|
+
type BreadcrumbBarProps = {
|
|
262
|
+
breadcrumbs?: BreadcrumbItem[];
|
|
263
|
+
actions?: ReactNode;
|
|
264
|
+
maxW?: string;
|
|
265
|
+
};
|
|
266
|
+
|
|
267
|
+
type HeaderTabBarItem = {
|
|
268
|
+
id: string;
|
|
269
|
+
label: string;
|
|
270
|
+
icon: ReactNode;
|
|
271
|
+
disabled?: boolean;
|
|
272
|
+
};
|
|
273
|
+
type HeaderTabBarProps = {
|
|
274
|
+
items: HeaderTabBarItem[];
|
|
275
|
+
activeId: string;
|
|
276
|
+
onChange: (id: string) => void;
|
|
277
|
+
className?: string;
|
|
278
|
+
ariaLabel?: string;
|
|
279
|
+
};
|
|
280
|
+
/**
|
|
281
|
+
* @deprecated Use `NavTabStrip` from `@the-portland-company/shell/native` —
|
|
282
|
+
* the ONE canonical page tab strip (underlined text tabs with a 2px underline
|
|
283
|
+
* in the mode color, Brand guideline "Tabs are an underlined strip").
|
|
284
|
+
* `HeaderTabBar` is icon-only and filled, cannot render link tabs, and needs
|
|
285
|
+
* Chakra. Warns in development.
|
|
286
|
+
*/
|
|
287
|
+
declare function HeaderTabBar({ items, activeId, onChange, className, ariaLabel, }: HeaderTabBarProps): react_jsx_runtime.JSX.Element;
|
|
288
|
+
|
|
22
289
|
/**
|
|
23
290
|
* The six canonical top-bar action slots (Reference/Global-Rules v9 → top-bar
|
|
24
291
|
* icons). Each slot's GLYPH is unique and comes from the Brand API
|
|
@@ -422,6 +689,15 @@ declare function useThemePreference(): {
|
|
|
422
689
|
setValue: (next: ThemePreference) => void;
|
|
423
690
|
};
|
|
424
691
|
|
|
692
|
+
/** Page header for apps with no react-router: breadcrumbs render as plain anchors. */
|
|
693
|
+
declare function PageHeader(props: PageHeaderProps): react_jsx_runtime.JSX.Element;
|
|
694
|
+
|
|
695
|
+
/**
|
|
696
|
+
* @deprecated Not for app use: the breadcrumb trail is retired. Kept for parity
|
|
697
|
+
* with the main entry; breadcrumb links render as plain anchors.
|
|
698
|
+
*/
|
|
699
|
+
declare function BreadcrumbBar(props: BreadcrumbBarProps): react_jsx_runtime.JSX.Element;
|
|
700
|
+
|
|
425
701
|
/**
|
|
426
702
|
* Icon slots used by the standard menus. The shell stays icon-library-agnostic:
|
|
427
703
|
* callers map each key to their own icon components (lucide, react-icons, …).
|
|
@@ -1059,4 +1335,4 @@ type NavAppShellProps = {
|
|
|
1059
1335
|
};
|
|
1060
1336
|
declare function NavAppShell({ sidebar, topBar, betaBanner, contentWrapper, accountMenuPlacement, modeId, children, }: NavAppShellProps): react_jsx_runtime.JSX.Element;
|
|
1061
1337
|
|
|
1062
|
-
export { type
|
|
1338
|
+
export { type ChromeNotificationQuarantine as $, type NavChromeFetcher as A, type BreadcrumbBarProps as B, Card as C, type NavMode as D, type NavUserMenu as E, FileInput as F, type NavOrgOption as G, HeaderTabBar as H, Input as I, type NavFooterLink as J, type NavFooter as K, type NavDisplayMode as L, BETA_BANNER_DISMISS_KEY as M, type NavItem as N, BreadcrumbBar as O, type PageHeaderProps as P, CAMPAIGN_FEATURE_AVAILABILITY as Q, CORE_APP_ORIGIN as R, Select as S, Textarea as T, CORE_BILLING_PATH as U, CREDIT_TYPE_LABELS as V, CREDIT_TYPE_ORDER as W, type CampaignFeatureAvailability as X, type ChromeMe as Y, type ChromeNotificationAlert as Z, type ChromeNotificationImport as _, Button as a, useNavChromeFetcher as a$, type ChromeNotificationReply as a0, type ChromeNotificationsPayload as a1, type ChromeOrgSummary as a2, type CommunicationsFuelStatus as a3, type CreditHealthState as a4, type CreditTypeKey as a5, CreditsAction as a6, type CreditsIconState as a7, FuelAction as a8, type FuelChannelStatus as a9, SpecOverlayAction as aA, type StandardNavOptions as aB, SupportAction as aC, type ThemePreference as aD, TopBarCountBadge as aE, type TopBarIconTone as aF, TopBarPanelArrow as aG, TopBarPopover as aH, TopBarTooltip as aI, TopBarWidgetSlot as aJ, clearBetaBannerDismissal as aK, creditGaugeRatio as aL, creditStateWord as aM, creditTooltipLine as aN, creditsAriaLabel as aO, creditsIconState as aP, envChipClasses as aQ, isNavItemActive as aR, modeIdFromLabel as aS, resolveOrgLogoUrl as aT, shortEnvLabel as aU, shortUserName as aV, standardPolitogyNav as aW, topBarIconButtonClass as aX, useChromeMe as aY, useChromeOrgs as aZ, useNavChromeDedupedFetch as a_, NavAppShell as aa, type NavAppShellProps as ab, NavBetaBanner as ac, type NavBetaBannerProps as ad, type NavBrand as ae, NavChromeProvider as af, NavDisplayAction as ag, type NavLinkProps as ah, type NavLinkedAccount as ai, type NavModeOption as aj, type NavOrg as ak, type NavRoleBadge as al, NavSidebar as am, type NavSidebarProps as an, type NavTab as ao, NavTabStrip as ap, type NavTabStripProps as aq, NavThemeControl as ar, NavTopBar as as, type NavTopBarAction as at, type NavTopBarProps as au, type NavUser as av, NotificationsAction as aw, PageHeader as ax, type PageHeaderMode as ay, SPECS_ORIGIN as az, type ButtonProps as b, useThemePreference as b0, type ButtonSize as c, type ButtonVariant as d, type CardPadding as e, type CardProps as f, Checkbox as g, type CheckboxProps as h, type CommsNotification as i, type CommsNotificationKind as j, type FileInputProps as k, FormColumn as l, type HeaderTabBarItem as m, type InputProps as n, type NotificationsAdapter as o, type NotificationsFeed as p, type SelectProps as q, type TextareaProps as r, createCommsNotificationsAdapter as s, emptyNotificationsFeed as t, normalizeNotificationsFeed as u, type StandardNavIconKey as v, type NavIcon as w, type NavBreadcrumb as x, type StandardNavMode as y, type NavLinkComponent as z };
|
|
@@ -1,7 +1,41 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import
|
|
2
|
+
import * as react from 'react';
|
|
3
|
+
import { ReactNode, CSSProperties, ButtonHTMLAttributes, AnchorHTMLAttributes, ElementType, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes, ComponentType } from 'react';
|
|
3
4
|
import { ThemePreference as ThemePreference$1 } from './theme-preference.js';
|
|
4
5
|
|
|
6
|
+
type CardPadding = 'none' | 'sm' | 'md' | 'lg';
|
|
7
|
+
type CardProps = {
|
|
8
|
+
/** Heading text. With none of the structured props below it renders as a plain `<h3>` inside the padded box. */
|
|
9
|
+
title?: ReactNode;
|
|
10
|
+
/** Secondary line under the title. Switches the card to the structured header layout. */
|
|
11
|
+
subtitle?: ReactNode;
|
|
12
|
+
/** Right-aligned header content (a link, chip or count). Same as `actions`; both may be set. */
|
|
13
|
+
aside?: ReactNode;
|
|
14
|
+
/** Right-aligned header buttons. */
|
|
15
|
+
actions?: ReactNode;
|
|
16
|
+
/** Bottom strip separated by a top border. */
|
|
17
|
+
footer?: ReactNode;
|
|
18
|
+
children?: ReactNode;
|
|
19
|
+
/** Padding of the card (legacy layout) or of the body (structured layout). Default `md` (p-6). */
|
|
20
|
+
padding?: CardPadding;
|
|
21
|
+
/** Replaces the body padding classes in the structured layout (e.g. `px-7 pb-6 pt-6`). */
|
|
22
|
+
bodyClassName?: string;
|
|
23
|
+
minH?: string | number;
|
|
24
|
+
className?: string;
|
|
25
|
+
style?: CSSProperties;
|
|
26
|
+
[key: string]: unknown;
|
|
27
|
+
};
|
|
28
|
+
/**
|
|
29
|
+
* Shared Card. Surface, border and text come from the `--app-card-*` tokens, which
|
|
30
|
+
* have light values on `:root` and dark values under `.dark`
|
|
31
|
+
* (chrome.css), so a card is correct in both themes.
|
|
32
|
+
*
|
|
33
|
+
* Plain `<Card title>` keeps the original layout (padding on the card, h3 above the
|
|
34
|
+
* content). Passing `subtitle`, `aside`, `actions`, `footer` or `bodyClassName` switches to
|
|
35
|
+
* the structured layout: bordered header, body, bordered footer.
|
|
36
|
+
*/
|
|
37
|
+
declare function Card({ title, subtitle, aside, actions, footer, children, padding, bodyClassName, minH, className, style, ...props }: CardProps): react_jsx_runtime.JSX.Element;
|
|
38
|
+
|
|
5
39
|
type FormColumnProps = {
|
|
6
40
|
children: ReactNode;
|
|
7
41
|
className?: string;
|
|
@@ -19,6 +53,239 @@ type FormColumnProps = {
|
|
|
19
53
|
*/
|
|
20
54
|
declare function FormColumn({ children, className }: FormColumnProps): react_jsx_runtime.JSX.Element;
|
|
21
55
|
|
|
56
|
+
type BreadcrumbItem$1 = {
|
|
57
|
+
label: string;
|
|
58
|
+
href?: string;
|
|
59
|
+
};
|
|
60
|
+
/** The three Modes a page header's eyebrow can announce (Reference/UI-Platform
|
|
61
|
+
* → "Per-mode branding"). */
|
|
62
|
+
type PageHeaderMode = 'relationship' | 'campaign' | 'petition';
|
|
63
|
+
type PageHeaderProps = {
|
|
64
|
+
title?: ReactNode;
|
|
65
|
+
/**
|
|
66
|
+
* The operating Mode this page belongs to. When set, the 11px uppercase
|
|
67
|
+
* mode eyebrow ("Relationship mode" / "Campaign mode" / "Petition mode")
|
|
68
|
+
* renders above the title by DEFAULT — Reference/UI-Platform → "Page
|
|
69
|
+
* header": "Left: an 11px uppercase mode eyebrow ... in the mode color
|
|
70
|
+
* (`modes.<mode>.primary`)". Pass `showEyebrow={false}` to suppress it.
|
|
71
|
+
*/
|
|
72
|
+
mode?: PageHeaderMode;
|
|
73
|
+
/** Overrides the eyebrow text the `mode` default would produce. */
|
|
74
|
+
eyebrow?: string;
|
|
75
|
+
/** Set false to suppress the eyebrow even when `mode` is passed. Default true. */
|
|
76
|
+
showEyebrow?: boolean;
|
|
77
|
+
/** Optional one-line subtitle, 15px G4, directly under the title. */
|
|
78
|
+
subtitle?: ReactNode;
|
|
79
|
+
breadcrumbs?: BreadcrumbItem$1[];
|
|
80
|
+
actions?: ReactNode;
|
|
81
|
+
tabBar?: ReactNode;
|
|
82
|
+
maxW?: string;
|
|
83
|
+
hideSidebar?: boolean;
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
|
|
87
|
+
type ButtonSize = 'md' | 'sm';
|
|
88
|
+
type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'type'> & {
|
|
89
|
+
/** Visual style. Default `primary`. */
|
|
90
|
+
variant?: ButtonVariant;
|
|
91
|
+
/** `md` is 44px tall (default), `sm` is 36px. */
|
|
92
|
+
size?: ButtonSize;
|
|
93
|
+
/** Shows a spinner, sets `aria-busy`, and blocks interaction. */
|
|
94
|
+
loading?: boolean;
|
|
95
|
+
disabled?: boolean;
|
|
96
|
+
/** Renders a link-button. Without `as`, `href` renders an `<a>`. */
|
|
97
|
+
href?: string;
|
|
98
|
+
/** Element or component to render as (e.g. a router `Link`). */
|
|
99
|
+
as?: ElementType;
|
|
100
|
+
type?: 'button' | 'submit' | 'reset';
|
|
101
|
+
children?: ReactNode;
|
|
102
|
+
className?: string;
|
|
103
|
+
/** Extra props for the rendered element (e.g. a router Link's `to`). */
|
|
104
|
+
to?: string;
|
|
105
|
+
};
|
|
106
|
+
/**
|
|
107
|
+
* The shared button. Apps use this instead of a local Button. 5px radius, 12px
|
|
108
|
+
* horizontal padding; primary uses the shell's `--app-btn-primary-*` tokens
|
|
109
|
+
* (Specs buttonPrimary). Pass `href` (or `as`) for a link-button.
|
|
110
|
+
*/
|
|
111
|
+
declare const Button: react.ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "type"> & {
|
|
112
|
+
/** Visual style. Default `primary`. */
|
|
113
|
+
variant?: ButtonVariant;
|
|
114
|
+
/** `md` is 44px tall (default), `sm` is 36px. */
|
|
115
|
+
size?: ButtonSize;
|
|
116
|
+
/** Shows a spinner, sets `aria-busy`, and blocks interaction. */
|
|
117
|
+
loading?: boolean;
|
|
118
|
+
disabled?: boolean;
|
|
119
|
+
/** Renders a link-button. Without `as`, `href` renders an `<a>`. */
|
|
120
|
+
href?: string;
|
|
121
|
+
/** Element or component to render as (e.g. a router `Link`). */
|
|
122
|
+
as?: ElementType;
|
|
123
|
+
type?: "button" | "submit" | "reset";
|
|
124
|
+
children?: ReactNode;
|
|
125
|
+
className?: string;
|
|
126
|
+
/** Extra props for the rendered element (e.g. a router Link's `to`). */
|
|
127
|
+
to?: string;
|
|
128
|
+
} & react.RefAttributes<HTMLElement>>;
|
|
129
|
+
|
|
130
|
+
type FieldChromeProps = {
|
|
131
|
+
/** Visible label rendered above the control. */
|
|
132
|
+
label?: ReactNode;
|
|
133
|
+
/** Helper text under the control; replaced by `error` when one is set. */
|
|
134
|
+
helperText?: ReactNode;
|
|
135
|
+
/** Error message. Truthy marks the control invalid (aria-invalid). */
|
|
136
|
+
error?: ReactNode;
|
|
137
|
+
};
|
|
138
|
+
|
|
139
|
+
/**
|
|
140
|
+
* Text-like input types the field styling supports. Checkbox has `Checkbox` and
|
|
141
|
+
* file has `FileInput`; radio, range and color need their own native layout and are
|
|
142
|
+
* not supported here.
|
|
143
|
+
*/
|
|
144
|
+
type InputType = 'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'number' | 'date' | 'time' | 'datetime-local' | 'month' | 'week';
|
|
145
|
+
type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & FieldChromeProps & {
|
|
146
|
+
/** Text-like types only (see `InputType`). Default `text`. */
|
|
147
|
+
type?: InputType;
|
|
148
|
+
/** Class for the control itself; the wrapper takes `wrapperClassName`. */
|
|
149
|
+
className?: string;
|
|
150
|
+
wrapperClassName?: string;
|
|
151
|
+
/** Marks the control invalid without an error message. */
|
|
152
|
+
invalid?: boolean;
|
|
153
|
+
};
|
|
154
|
+
/**
|
|
155
|
+
* Shared Input. Apps use this instead of a local Input. 5px radius, 12px
|
|
156
|
+
* horizontal padding, 44px control height, shell `--app-field-*` tokens.
|
|
157
|
+
*/
|
|
158
|
+
declare const Input: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & FieldChromeProps & {
|
|
159
|
+
/** Text-like types only (see `InputType`). Default `text`. */
|
|
160
|
+
type?: InputType;
|
|
161
|
+
/** Class for the control itself; the wrapper takes `wrapperClassName`. */
|
|
162
|
+
className?: string;
|
|
163
|
+
wrapperClassName?: string;
|
|
164
|
+
/** Marks the control invalid without an error message. */
|
|
165
|
+
invalid?: boolean;
|
|
166
|
+
} & react.RefAttributes<HTMLInputElement>>;
|
|
167
|
+
|
|
168
|
+
type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & FieldChromeProps & {
|
|
169
|
+
/** Class for the control itself; the wrapper takes `wrapperClassName`. */
|
|
170
|
+
className?: string;
|
|
171
|
+
wrapperClassName?: string;
|
|
172
|
+
/** Marks the control invalid without an error message. */
|
|
173
|
+
invalid?: boolean;
|
|
174
|
+
};
|
|
175
|
+
/**
|
|
176
|
+
* Shared Select. Apps use this instead of a local Select. 5px radius, 12px
|
|
177
|
+
* horizontal padding, 44px control height, shell `--app-field-*` tokens.
|
|
178
|
+
*/
|
|
179
|
+
declare const Select: react.ForwardRefExoticComponent<SelectHTMLAttributes<HTMLSelectElement> & FieldChromeProps & {
|
|
180
|
+
/** Class for the control itself; the wrapper takes `wrapperClassName`. */
|
|
181
|
+
className?: string;
|
|
182
|
+
wrapperClassName?: string;
|
|
183
|
+
/** Marks the control invalid without an error message. */
|
|
184
|
+
invalid?: boolean;
|
|
185
|
+
} & react.RefAttributes<HTMLSelectElement>>;
|
|
186
|
+
|
|
187
|
+
type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & FieldChromeProps & {
|
|
188
|
+
/** Class for the control itself; the wrapper takes `wrapperClassName`. */
|
|
189
|
+
className?: string;
|
|
190
|
+
wrapperClassName?: string;
|
|
191
|
+
/** Marks the control invalid without an error message. */
|
|
192
|
+
invalid?: boolean;
|
|
193
|
+
};
|
|
194
|
+
/**
|
|
195
|
+
* Shared Textarea. Apps use this instead of a local Textarea. 5px radius, 12px
|
|
196
|
+
* horizontal padding, 88px minimum height, shell `--app-field-*` tokens.
|
|
197
|
+
*/
|
|
198
|
+
declare const Textarea: react.ForwardRefExoticComponent<TextareaHTMLAttributes<HTMLTextAreaElement> & FieldChromeProps & {
|
|
199
|
+
/** Class for the control itself; the wrapper takes `wrapperClassName`. */
|
|
200
|
+
className?: string;
|
|
201
|
+
wrapperClassName?: string;
|
|
202
|
+
/** Marks the control invalid without an error message. */
|
|
203
|
+
invalid?: boolean;
|
|
204
|
+
} & react.RefAttributes<HTMLTextAreaElement>>;
|
|
205
|
+
|
|
206
|
+
type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {
|
|
207
|
+
/** Visible label, clickable. */
|
|
208
|
+
label?: ReactNode;
|
|
209
|
+
/** Secondary text under the label. */
|
|
210
|
+
description?: ReactNode;
|
|
211
|
+
/** Mixed state (set on the DOM node; `checked` still controls the underlying value). */
|
|
212
|
+
indeterminate?: boolean;
|
|
213
|
+
/** Marks the checkbox invalid (red outline, aria-invalid). */
|
|
214
|
+
invalid?: boolean;
|
|
215
|
+
/** Class for the `<input>`; the row takes `wrapperClassName`. */
|
|
216
|
+
className?: string;
|
|
217
|
+
wrapperClassName?: string;
|
|
218
|
+
};
|
|
219
|
+
/**
|
|
220
|
+
* Shared Checkbox. The whole row is a 44px-tall touch target (label wraps the
|
|
221
|
+
* control); colors come from the shell tokens, with the accent as the fill.
|
|
222
|
+
*/
|
|
223
|
+
declare const Checkbox: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & {
|
|
224
|
+
/** Visible label, clickable. */
|
|
225
|
+
label?: ReactNode;
|
|
226
|
+
/** Secondary text under the label. */
|
|
227
|
+
description?: ReactNode;
|
|
228
|
+
/** Mixed state (set on the DOM node; `checked` still controls the underlying value). */
|
|
229
|
+
indeterminate?: boolean;
|
|
230
|
+
/** Marks the checkbox invalid (red outline, aria-invalid). */
|
|
231
|
+
invalid?: boolean;
|
|
232
|
+
/** Class for the `<input>`; the row takes `wrapperClassName`. */
|
|
233
|
+
className?: string;
|
|
234
|
+
wrapperClassName?: string;
|
|
235
|
+
} & react.RefAttributes<HTMLInputElement>>;
|
|
236
|
+
|
|
237
|
+
type FileInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'defaultValue'> & FieldChromeProps & {
|
|
238
|
+
/** Class for the control itself; the wrapper takes `wrapperClassName`. */
|
|
239
|
+
className?: string;
|
|
240
|
+
wrapperClassName?: string;
|
|
241
|
+
/** Marks the control invalid without an error message. */
|
|
242
|
+
invalid?: boolean;
|
|
243
|
+
};
|
|
244
|
+
/**
|
|
245
|
+
* Shared file picker (`<input type="file">`). Same label/helper/error chrome and
|
|
246
|
+
* field tokens as `Input`; the native "Choose file" button is styled with the
|
|
247
|
+
* secondary-button tokens. Use `accept` / `multiple` as usual.
|
|
248
|
+
*/
|
|
249
|
+
declare const FileInput: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "defaultValue"> & FieldChromeProps & {
|
|
250
|
+
/** Class for the control itself; the wrapper takes `wrapperClassName`. */
|
|
251
|
+
className?: string;
|
|
252
|
+
wrapperClassName?: string;
|
|
253
|
+
/** Marks the control invalid without an error message. */
|
|
254
|
+
invalid?: boolean;
|
|
255
|
+
} & react.RefAttributes<HTMLInputElement>>;
|
|
256
|
+
|
|
257
|
+
type BreadcrumbItem = {
|
|
258
|
+
label: string;
|
|
259
|
+
href?: string;
|
|
260
|
+
};
|
|
261
|
+
type BreadcrumbBarProps = {
|
|
262
|
+
breadcrumbs?: BreadcrumbItem[];
|
|
263
|
+
actions?: ReactNode;
|
|
264
|
+
maxW?: string;
|
|
265
|
+
};
|
|
266
|
+
|
|
267
|
+
type HeaderTabBarItem = {
|
|
268
|
+
id: string;
|
|
269
|
+
label: string;
|
|
270
|
+
icon: ReactNode;
|
|
271
|
+
disabled?: boolean;
|
|
272
|
+
};
|
|
273
|
+
type HeaderTabBarProps = {
|
|
274
|
+
items: HeaderTabBarItem[];
|
|
275
|
+
activeId: string;
|
|
276
|
+
onChange: (id: string) => void;
|
|
277
|
+
className?: string;
|
|
278
|
+
ariaLabel?: string;
|
|
279
|
+
};
|
|
280
|
+
/**
|
|
281
|
+
* @deprecated Use `NavTabStrip` from `@the-portland-company/shell/native` —
|
|
282
|
+
* the ONE canonical page tab strip (underlined text tabs with a 2px underline
|
|
283
|
+
* in the mode color, Brand guideline "Tabs are an underlined strip").
|
|
284
|
+
* `HeaderTabBar` is icon-only and filled, cannot render link tabs, and needs
|
|
285
|
+
* Chakra. Warns in development.
|
|
286
|
+
*/
|
|
287
|
+
declare function HeaderTabBar({ items, activeId, onChange, className, ariaLabel, }: HeaderTabBarProps): react_jsx_runtime.JSX.Element;
|
|
288
|
+
|
|
22
289
|
/**
|
|
23
290
|
* The six canonical top-bar action slots (Reference/Global-Rules v9 → top-bar
|
|
24
291
|
* icons). Each slot's GLYPH is unique and comes from the Brand API
|
|
@@ -422,6 +689,15 @@ declare function useThemePreference(): {
|
|
|
422
689
|
setValue: (next: ThemePreference) => void;
|
|
423
690
|
};
|
|
424
691
|
|
|
692
|
+
/** Page header for apps with no react-router: breadcrumbs render as plain anchors. */
|
|
693
|
+
declare function PageHeader(props: PageHeaderProps): react_jsx_runtime.JSX.Element;
|
|
694
|
+
|
|
695
|
+
/**
|
|
696
|
+
* @deprecated Not for app use: the breadcrumb trail is retired. Kept for parity
|
|
697
|
+
* with the main entry; breadcrumb links render as plain anchors.
|
|
698
|
+
*/
|
|
699
|
+
declare function BreadcrumbBar(props: BreadcrumbBarProps): react_jsx_runtime.JSX.Element;
|
|
700
|
+
|
|
425
701
|
/**
|
|
426
702
|
* Icon slots used by the standard menus. The shell stays icon-library-agnostic:
|
|
427
703
|
* callers map each key to their own icon components (lucide, react-icons, …).
|
|
@@ -1059,4 +1335,4 @@ type NavAppShellProps = {
|
|
|
1059
1335
|
};
|
|
1060
1336
|
declare function NavAppShell({ sidebar, topBar, betaBanner, contentWrapper, accountMenuPlacement, modeId, children, }: NavAppShellProps): react_jsx_runtime.JSX.Element;
|
|
1061
1337
|
|
|
1062
|
-
export { type
|
|
1338
|
+
export { type ChromeNotificationQuarantine as $, type NavChromeFetcher as A, type BreadcrumbBarProps as B, Card as C, type NavMode as D, type NavUserMenu as E, FileInput as F, type NavOrgOption as G, HeaderTabBar as H, Input as I, type NavFooterLink as J, type NavFooter as K, type NavDisplayMode as L, BETA_BANNER_DISMISS_KEY as M, type NavItem as N, BreadcrumbBar as O, type PageHeaderProps as P, CAMPAIGN_FEATURE_AVAILABILITY as Q, CORE_APP_ORIGIN as R, Select as S, Textarea as T, CORE_BILLING_PATH as U, CREDIT_TYPE_LABELS as V, CREDIT_TYPE_ORDER as W, type CampaignFeatureAvailability as X, type ChromeMe as Y, type ChromeNotificationAlert as Z, type ChromeNotificationImport as _, Button as a, useNavChromeFetcher as a$, type ChromeNotificationReply as a0, type ChromeNotificationsPayload as a1, type ChromeOrgSummary as a2, type CommunicationsFuelStatus as a3, type CreditHealthState as a4, type CreditTypeKey as a5, CreditsAction as a6, type CreditsIconState as a7, FuelAction as a8, type FuelChannelStatus as a9, SpecOverlayAction as aA, type StandardNavOptions as aB, SupportAction as aC, type ThemePreference as aD, TopBarCountBadge as aE, type TopBarIconTone as aF, TopBarPanelArrow as aG, TopBarPopover as aH, TopBarTooltip as aI, TopBarWidgetSlot as aJ, clearBetaBannerDismissal as aK, creditGaugeRatio as aL, creditStateWord as aM, creditTooltipLine as aN, creditsAriaLabel as aO, creditsIconState as aP, envChipClasses as aQ, isNavItemActive as aR, modeIdFromLabel as aS, resolveOrgLogoUrl as aT, shortEnvLabel as aU, shortUserName as aV, standardPolitogyNav as aW, topBarIconButtonClass as aX, useChromeMe as aY, useChromeOrgs as aZ, useNavChromeDedupedFetch as a_, NavAppShell as aa, type NavAppShellProps as ab, NavBetaBanner as ac, type NavBetaBannerProps as ad, type NavBrand as ae, NavChromeProvider as af, NavDisplayAction as ag, type NavLinkProps as ah, type NavLinkedAccount as ai, type NavModeOption as aj, type NavOrg as ak, type NavRoleBadge as al, NavSidebar as am, type NavSidebarProps as an, type NavTab as ao, NavTabStrip as ap, type NavTabStripProps as aq, NavThemeControl as ar, NavTopBar as as, type NavTopBarAction as at, type NavTopBarProps as au, type NavUser as av, NotificationsAction as aw, PageHeader as ax, type PageHeaderMode as ay, SPECS_ORIGIN as az, type ButtonProps as b, useThemePreference as b0, type ButtonSize as c, type ButtonVariant as d, type CardPadding as e, type CardProps as f, Checkbox as g, type CheckboxProps as h, type CommsNotification as i, type CommsNotificationKind as j, type FileInputProps as k, FormColumn as l, type HeaderTabBarItem as m, type InputProps as n, type NotificationsAdapter as o, type NotificationsFeed as p, type SelectProps as q, type TextareaProps as r, createCommsNotificationsAdapter as s, emptyNotificationsFeed as t, normalizeNotificationsFeed as u, type StandardNavIconKey as v, type NavIcon as w, type NavBreadcrumb as x, type StandardNavMode as y, type NavLinkComponent as z };
|