@thewhatmatters/wmds 0.4.40 → 0.4.43
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 +39 -1
- package/dist/components/molecules/Combobox/Combobox.d.ts +56 -0
- package/dist/components/molecules/Combobox/Combobox.d.ts.map +1 -0
- package/dist/components/molecules/Combobox/Combobox.js +154 -0
- package/dist/components/molecules/Combobox/comboboxFilter.d.ts +14 -0
- package/dist/components/molecules/Combobox/comboboxFilter.d.ts.map +1 -0
- package/dist/components/molecules/Combobox/comboboxFilter.js +26 -0
- package/dist/components/molecules/Dropdown/useDropdownMenu.d.ts +6 -1
- package/dist/components/molecules/Dropdown/useDropdownMenu.d.ts.map +1 -1
- package/dist/components/molecules/Dropdown/useDropdownMenu.js +90 -64
- package/dist/components/molecules/Dropdown/useOverflowMenu.d.ts.map +1 -1
- package/dist/components/molecules/Notice/Notice.d.ts +47 -0
- package/dist/components/molecules/Notice/Notice.d.ts.map +1 -0
- package/dist/components/molecules/Notice/Notice.js +97 -0
- package/dist/components/molecules/Notice/noticeStyles.d.ts +17 -0
- package/dist/components/molecules/Notice/noticeStyles.d.ts.map +1 -0
- package/dist/components/molecules/Notice/noticeStyles.js +18 -0
- package/dist/components/organisms/AppShell/AppShell.d.ts +10 -2
- package/dist/components/organisms/AppShell/AppShell.d.ts.map +1 -1
- package/dist/components/organisms/AppShell/AppShell.js +237 -198
- package/dist/components/organisms/AppShell/appShellStyles.d.ts +11 -0
- package/dist/components/organisms/AppShell/appShellStyles.d.ts.map +1 -1
- package/dist/components/organisms/AppShell/appShellStyles.js +2 -2
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +79 -75
- package/dist/lib/compositionAudit.d.ts.map +1 -1
- package/dist/styles.css +1 -1
- package/docs/components.md +1 -1
- package/docs/exports.json +28 -1
- package/docs/patterns/components-accordion--flush.tsx +1 -1
- package/docs/patterns/components-appshell--portal-dashboard-pattern.tsx +1 -1
- package/docs/patterns/components-avatar--dropdown-row.tsx +1 -1
- package/docs/patterns/components-badge--outline-tags.tsx +1 -1
- package/docs/patterns/components-badge--status-pill.tsx +1 -1
- package/docs/patterns/components-badge--with-avatar.tsx +1 -1
- package/docs/patterns/components-band--page-in-bands.tsx +1 -1
- package/docs/patterns/components-breadcrumb--editorial.tsx +1 -1
- package/docs/patterns/components-breadcrumb--long-path.tsx +1 -1
- package/docs/patterns/components-breadcrumb--path.tsx +1 -1
- package/docs/patterns/components-breadcrumb--router-links.tsx +1 -1
- package/docs/patterns/components-button-button--copy-button.tsx +1 -1
- package/docs/patterns/components-button-button--destructive-action.tsx +1 -1
- package/docs/patterns/components-button-button--external-link.tsx +1 -1
- package/docs/patterns/components-button-button--ghost-action.tsx +1 -1
- package/docs/patterns/components-button-button--inverse-action.tsx +1 -1
- package/docs/patterns/components-button-button--link-render.tsx +1 -1
- package/docs/patterns/components-button-button--multi-state-badge.tsx +1 -1
- package/docs/patterns/components-button-button--outline-mono.tsx +1 -1
- package/docs/patterns/components-button-button--primary-action.tsx +1 -1
- package/docs/patterns/components-button-button--row-hug.tsx +1 -1
- package/docs/patterns/components-button-button--row-layout.tsx +1 -1
- package/docs/patterns/components-button-button--secondary-action.tsx +1 -1
- package/docs/patterns/components-button-button--suggestion-pills.tsx +1 -1
- package/docs/patterns/components-button-button--with-count.tsx +1 -1
- package/docs/patterns/components-button-button--with-icon.tsx +1 -1
- package/docs/patterns/components-button-floatingactionbutton--vertical-actions.tsx +1 -1
- package/docs/patterns/components-calembed--pattern-skip-above.tsx +1 -1
- package/docs/patterns/components-card-card--body-slot-occupancy-history.tsx +1 -1
- package/docs/patterns/components-card-card--headerless-media.tsx +1 -1
- package/docs/patterns/components-card-card--outlined-layout.tsx +1 -1
- package/docs/patterns/components-card-card--pinned-height.tsx +1 -1
- package/docs/patterns/components-card-card--terminal-frame.tsx +1 -1
- package/docs/patterns/components-card-selectablecard--selectable-cards-pattern.tsx +1 -1
- package/docs/patterns/components-carousel--image-carousel.tsx +1 -1
- package/docs/patterns/components-chart--audience-activity-heatmap.tsx +1 -1
- package/docs/patterns/components-chart--cartesian-no-data-gaps.tsx +1 -1
- package/docs/patterns/components-chart--occupancy-history-in-card.tsx +1 -1
- package/docs/patterns/components-chart--occupancy-in-card.tsx +1 -1
- package/docs/patterns/components-chart--post-reach-distribution.tsx +1 -1
- package/docs/patterns/components-chart--ranked-audience-breakdown.tsx +1 -1
- package/docs/patterns/components-chart--revenue-by-line.tsx +1 -1
- package/docs/patterns/components-chart--segmented-ring-pattern.tsx +1 -1
- package/docs/patterns/components-chart--unit-grid-composition.tsx +1 -1
- package/docs/patterns/components-chatdock--pattern-chat-dock.tsx +1 -1
- package/docs/patterns/components-chatdock--pattern-start-project-gate.tsx +1 -1
- package/docs/patterns/components-chatqa--pattern-qa-with-reply.tsx +1 -1
- package/docs/patterns/components-checkbox-checkbox--default.tsx +1 -1
- package/docs/patterns/components-checkbox-checkbox--with-count.tsx +1 -1
- package/docs/patterns/components-checkbox-checkbox--with-description.tsx +1 -1
- package/docs/patterns/components-checkbox-checkboxgroup--default.tsx +1 -1
- package/docs/patterns/components-checkbox-checkboxgroup--option-counts.tsx +1 -1
- package/docs/patterns/components-copyfield--clipboard-blocked.tsx +1 -1
- package/docs/patterns/components-copyfield--copied.tsx +1 -1
- package/docs/patterns/components-copyfield--copy-key.tsx +1 -1
- package/docs/patterns/components-copyfield--on-navy.tsx +1 -1
- package/docs/patterns/components-descriptionlist--details.tsx +1 -1
- package/docs/patterns/components-descriptionlist--post-metadata.tsx +1 -1
- package/docs/patterns/components-dialog--alert-dialog-destructive.tsx +1 -1
- package/docs/patterns/components-dialog--alert-dialog-typed-confirmation.tsx +1 -1
- package/docs/patterns/components-dialog--default-dialog.tsx +1 -1
- package/docs/patterns/components-dialog--form-dialog.tsx +1 -1
- package/docs/patterns/components-displaycontrols--page-utilities.tsx +1 -1
- package/docs/patterns/components-displaycontrols--theme-switch.tsx +1 -1
- package/docs/patterns/components-errorsummary--contact-form.tsx +1 -1
- package/docs/patterns/components-field--horizontal-input.tsx +1 -1
- package/docs/patterns/components-field--horizontal-text-area.tsx +1 -1
- package/docs/patterns/components-field--multi-control.tsx +1 -1
- package/docs/patterns/components-filterpanel--panel.tsx +1 -1
- package/docs/patterns/components-footerreveal--marketing-hero-pattern.tsx +1 -1
- package/docs/patterns/components-footerreveal--marketing-hero-ruled-pattern.tsx +1 -1
- package/docs/patterns/components-footerreveal--marketing-hero-with-gallery-intro.tsx +1 -1
- package/docs/patterns/components-footerreveal--marketing-page-pattern.tsx +1 -1
- package/docs/patterns/components-footerreveal--ruled-grid-footer-pattern.tsx +1 -1
- package/docs/patterns/components-footerreveal--sequenced-marketing-hero.tsx +1 -1
- package/docs/patterns/components-herointro--two-line-intro.tsx +1 -1
- package/docs/patterns/components-herointro--with-actions.tsx +1 -1
- package/docs/patterns/components-herotilestack--marketing-hero-pattern.tsx +1 -1
- package/docs/patterns/components-herotilestack--marketing-hero-text-sequence.tsx +1 -1
- package/docs/patterns/components-herotilestack--marketing-hero-with-gallery-intro.tsx +1 -1
- package/docs/patterns/components-indexlist--post-index.tsx +1 -1
- package/docs/patterns/components-intakeconfirmation--booked-pattern.tsx +1 -1
- package/docs/patterns/components-intakeconfirmation--emailed-pattern.tsx +1 -1
- package/docs/patterns/components-intakeform--about-you-pattern.tsx +1 -1
- package/docs/patterns/components-intakeform--short-form-pattern.tsx +1 -1
- package/docs/patterns/components-intakemodal--intake-modal-pattern.tsx +1 -1
- package/docs/patterns/components-kbd--command-row.tsx +1 -1
- package/docs/patterns/components-kbd--numbered-choices.tsx +1 -1
- package/docs/patterns/components-kbd--shortcut.tsx +1 -1
- package/docs/patterns/components-linktile--resource-tile.tsx +1 -1
- package/docs/patterns/components-linktile--router-link.tsx +1 -1
- package/docs/patterns/components-logview--detail-pane.tsx +1 -1
- package/docs/patterns/components-logview--log-viewer.tsx +1 -1
- package/docs/patterns/components-moremenu--action-menu.tsx +1 -1
- package/docs/patterns/components-moremenu--in-card-header.tsx +1 -1
- package/docs/patterns/components-navlist--app-sidebar.tsx +1 -1
- package/docs/patterns/components-navlist--side-nav-settings.tsx +1 -1
- package/docs/patterns/components-notice--account-not-connected.tsx +21 -0
- package/docs/patterns/components-notice--holiday-closure.tsx +18 -0
- package/docs/patterns/components-notice--private-buyout.tsx +17 -0
- package/docs/patterns/components-notice--sync-failed.tsx +13 -0
- package/docs/patterns/components-pageheader--app-header-pattern.tsx +1 -1
- package/docs/patterns/components-pageheader--page-section-header.tsx +1 -1
- package/docs/patterns/components-pageheader--toolbar-header.tsx +1 -1
- package/docs/patterns/components-panel--end-detail-rail.tsx +1 -1
- package/docs/patterns/components-pillgroup--pill-group-pattern.tsx +1 -1
- package/docs/patterns/components-promptbar--pattern-prompt-bar.tsx +1 -1
- package/docs/patterns/components-prose--article-body.tsx +1 -1
- package/docs/patterns/components-radio-radiogroup--default.tsx +1 -1
- package/docs/patterns/components-scrollhorizontal--project-gallery-pattern.tsx +1 -1
- package/docs/patterns/components-scrollhorizontal--with-intro.tsx +1 -1
- package/docs/patterns/components-sectioncaption--column-caption.tsx +1 -1
- package/docs/patterns/components-sectioncaption--with-action.tsx +1 -1
- package/docs/patterns/components-sheet--bottom-sheet.tsx +1 -1
- package/docs/patterns/components-sheet--end-sheet.tsx +1 -1
- package/docs/patterns/components-sheet--side-sheet-header-actions.tsx +1 -1
- package/docs/patterns/components-sheet--side-sheet-url-deep-link.tsx +1 -1
- package/docs/patterns/components-sheet--side-sheet.tsx +1 -1
- package/docs/patterns/components-sitenav--brand-and-cta.tsx +1 -1
- package/docs/patterns/components-sitenav--centered-links.tsx +1 -1
- package/docs/patterns/components-sitenav--compact.tsx +1 -1
- package/docs/patterns/components-sitenav--marketing-header.tsx +1 -1
- package/docs/patterns/components-sitenav--mega-menu.tsx +1 -1
- package/docs/patterns/components-stat--hero-stat.tsx +1 -1
- package/docs/patterns/components-stat--insights-row.tsx +1 -1
- package/docs/patterns/components-stepprogress--step-progress-pattern.tsx +1 -1
- package/docs/patterns/components-switch--default.tsx +1 -1
- package/docs/patterns/components-switch--settings-row.tsx +1 -1
- package/docs/patterns/components-tab--settings-pages.tsx +1 -1
- package/docs/patterns/components-table--approvals-with-sheet.tsx +1 -1
- package/docs/patterns/components-table--approvals.tsx +1 -1
- package/docs/patterns/components-table--basic.tsx +1 -1
- package/docs/patterns/components-taskrows--action-details.tsx +1 -1
- package/docs/patterns/components-taskrows--capsules.tsx +1 -1
- package/docs/patterns/components-taskrows--card-with-status-rows.tsx +1 -1
- package/docs/patterns/components-taskrows--controlled-expand.tsx +1 -1
- package/docs/patterns/components-taskrows--custom-slots.tsx +1 -1
- package/docs/patterns/components-taskrows--needs-you-table.tsx +1 -1
- package/docs/patterns/components-taskrows--status-list.tsx +1 -1
- package/docs/patterns/components-taskrows--tag-chips.tsx +1 -1
- package/docs/patterns/components-textarea--save-status.tsx +1 -1
- package/docs/patterns/components-textlink--external-destination.tsx +1 -1
- package/docs/patterns/components-textlink--inline-prose.tsx +1 -1
- package/docs/patterns/components-textlink--quiet-title.tsx +1 -1
- package/docs/patterns/components-textlink--supporting-copy.tsx +1 -1
- package/docs/patterns/components-textsequence--default.tsx +1 -1
- package/docs/patterns/components-textsequence--reduced-motion.tsx +1 -1
- package/docs/patterns/components-textsequence--shapes.tsx +1 -1
- package/docs/patterns/components-tilegrid--masonry.tsx +1 -1
- package/docs/patterns/components-toast--stacked-notifications.tsx +1 -1
- package/docs/patterns/components-tooltip--controlled.tsx +1 -1
- package/docs/patterns/components-tooltip--disabled-control.tsx +1 -1
- package/docs/patterns/components-tooltip--icon-action.tsx +1 -1
- package/docs/patterns/components-tooltip--keyboard-shortcut.tsx +1 -1
- package/docs/patterns/components-tooltip--placement.tsx +1 -1
- package/docs/patterns/foundations-scroll-fade--horizontal-rail.tsx +1 -1
- package/docs/patterns/foundations-scroll-fade--overflowing-list.tsx +1 -1
- package/docs/patterns/guides-chart-explorations--comparison-gallery.tsx +1 -1
- package/docs/patterns/guides-filter-panel--filtered-grid.tsx +1 -1
- package/docs/patterns/guides-filter-panel--filtered-index.tsx +1 -1
- package/docs/patterns/guides-overlay-flows--notification-preferences.tsx +1 -1
- package/docs/patterns/guides-post-page--post-page.tsx +1 -1
- package/docs/patterns/guides-profile-typography--editorial-profile.tsx +1 -1
- package/docs/patterns/guides-resource-detail--detail.tsx +1 -1
- package/docs/patterns/index.json +33 -1
- package/package.json +2 -1
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn as e } from "../../../lib/cn.js";
|
|
3
|
+
import { Badge as t } from "../../atoms/Badge/Badge.js";
|
|
4
|
+
import { IconButton as n } from "../../atoms/IconButton/IconButton.js";
|
|
5
|
+
import { noticeActionClasses as r, noticeBodyClasses as i, noticeClasses as a, noticeContentClasses as o, noticeDismissClasses as s, noticeIconClasses as c, noticeTitleClasses as l, noticeToneClasses as u, noticeTones as d } from "./noticeStyles.js";
|
|
6
|
+
import { useCallback as f, useEffect as p, useRef as m, useState as h, useSyncExternalStore as g } from "react";
|
|
7
|
+
import { CircleCheck as _, CircleX as v, Info as y, TriangleAlert as b, X as x } from "lucide-react";
|
|
8
|
+
import { jsx as S, jsxs as C } from "react/jsx-runtime";
|
|
9
|
+
//#region src/components/molecules/Notice/Notice.tsx
|
|
10
|
+
var w = "wmds-notice:", T = {
|
|
11
|
+
neutral: "neutral",
|
|
12
|
+
info: "info",
|
|
13
|
+
success: "success",
|
|
14
|
+
warning: "warning",
|
|
15
|
+
error: "destructive"
|
|
16
|
+
};
|
|
17
|
+
function E(e) {
|
|
18
|
+
return S(e === "success" ? _ : e === "warning" ? b : e === "error" ? v : y, {});
|
|
19
|
+
}
|
|
20
|
+
var D = /* @__PURE__ */ new Set();
|
|
21
|
+
function O(e) {
|
|
22
|
+
return D.add(e), window.addEventListener("storage", e), () => {
|
|
23
|
+
D.delete(e), window.removeEventListener("storage", e);
|
|
24
|
+
};
|
|
25
|
+
}
|
|
26
|
+
function k(e) {
|
|
27
|
+
try {
|
|
28
|
+
return window.localStorage.getItem(w + e) === "1";
|
|
29
|
+
} catch {
|
|
30
|
+
return !1;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
function A(e) {
|
|
34
|
+
try {
|
|
35
|
+
window.localStorage.setItem(w + e, "1");
|
|
36
|
+
} catch {}
|
|
37
|
+
D.forEach((e) => e());
|
|
38
|
+
}
|
|
39
|
+
var j = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
|
|
40
|
+
function M(e) {
|
|
41
|
+
let t = Array.from(e.ownerDocument.querySelectorAll(j)).filter((t) => !e.contains(t));
|
|
42
|
+
return t.find((t) => e.compareDocumentPosition(t) & Node.DOCUMENT_POSITION_FOLLOWING) ?? t.filter((t) => e.compareDocumentPosition(t) & Node.DOCUMENT_POSITION_PRECEDING).at(-1) ?? null;
|
|
43
|
+
}
|
|
44
|
+
function N({ tone: d = "neutral", title: _, children: v, action: y, icon: b, dismissible: w = !1, dismissLabel: D = "Dismiss", onDismiss: j, dismissKey: N, live: P = !1, id: F, className: I }) {
|
|
45
|
+
let L = m(null), R = m(null), [z, B] = h(!1), V = g(O, () => N != null && k(N), () => !1), H = z || V;
|
|
46
|
+
p(() => {
|
|
47
|
+
z && (R.current?.focus(), R.current = null);
|
|
48
|
+
}, [z]);
|
|
49
|
+
let U = f(() => {
|
|
50
|
+
let e = L.current;
|
|
51
|
+
e != null && e.contains(e.ownerDocument.activeElement) && (R.current = M(e)), B(!0), N != null && A(N), j?.();
|
|
52
|
+
}, [N, j]);
|
|
53
|
+
if (H) return null;
|
|
54
|
+
let W = P === !0 ? d === "error" ? "alert" : "status" : P === !1 ? void 0 : P, G = b === !1 ? null : b ?? E(d);
|
|
55
|
+
return /* @__PURE__ */ C("div", {
|
|
56
|
+
ref: L,
|
|
57
|
+
id: F,
|
|
58
|
+
role: W,
|
|
59
|
+
"data-tone": d,
|
|
60
|
+
className: e(a, u[d], I),
|
|
61
|
+
children: [
|
|
62
|
+
G == null ? null : /* @__PURE__ */ S(t, {
|
|
63
|
+
iconOnly: !0,
|
|
64
|
+
icon: G,
|
|
65
|
+
variant: T[d],
|
|
66
|
+
className: c
|
|
67
|
+
}),
|
|
68
|
+
/* @__PURE__ */ C("div", {
|
|
69
|
+
className: o,
|
|
70
|
+
children: [
|
|
71
|
+
_ == null ? null : /* @__PURE__ */ S("p", {
|
|
72
|
+
className: l,
|
|
73
|
+
children: _
|
|
74
|
+
}),
|
|
75
|
+
v == null ? null : /* @__PURE__ */ S("div", {
|
|
76
|
+
className: i,
|
|
77
|
+
children: v
|
|
78
|
+
}),
|
|
79
|
+
y == null ? null : /* @__PURE__ */ S("div", {
|
|
80
|
+
className: r,
|
|
81
|
+
children: y
|
|
82
|
+
})
|
|
83
|
+
]
|
|
84
|
+
}),
|
|
85
|
+
w ? /* @__PURE__ */ S(n, {
|
|
86
|
+
size: "xs",
|
|
87
|
+
role: "ghost",
|
|
88
|
+
icon: /* @__PURE__ */ S(x, {}),
|
|
89
|
+
"aria-label": D,
|
|
90
|
+
className: s,
|
|
91
|
+
onClick: U
|
|
92
|
+
}) : null
|
|
93
|
+
]
|
|
94
|
+
});
|
|
95
|
+
}
|
|
96
|
+
//#endregion
|
|
97
|
+
export { N as Notice, w as noticeStoragePrefix, d as noticeTones };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
export declare const noticeTones: readonly ["neutral", "info", "success", "warning", "error"];
|
|
2
|
+
export type NoticeTone = (typeof noticeTones)[number];
|
|
3
|
+
/**
|
|
4
|
+
* The tint is the status colour mixed into the current surface, not the fixed `*-muted` fill.
|
|
5
|
+
* Inside a toned band or a dark theme the surface and `text-fg` swap together, so the body copy
|
|
6
|
+
* keeps its contrast wherever the notice sits.
|
|
7
|
+
*/
|
|
8
|
+
export declare const noticeToneClasses: Record<NoticeTone, string>;
|
|
9
|
+
export declare const noticeClasses = "flex w-full min-w-0 items-start gap-3 rounded-[var(--radius-card-shell)] border p-4 text-fg";
|
|
10
|
+
export declare const noticeIconClasses = "mt-0.5 shrink-0";
|
|
11
|
+
export declare const noticeContentClasses = "flex min-w-0 flex-1 flex-col gap-1";
|
|
12
|
+
export declare const noticeTitleClasses: string;
|
|
13
|
+
export declare const noticeBodyClasses: string;
|
|
14
|
+
/** Under the copy, so a long link wraps instead of squeezing the text at 390px. */
|
|
15
|
+
export declare const noticeActionClasses = "mt-2 flex flex-wrap items-center gap-2";
|
|
16
|
+
export declare const noticeDismissClasses = "-my-1 -me-1 shrink-0";
|
|
17
|
+
//# sourceMappingURL=noticeStyles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"noticeStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Notice/noticeStyles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,6DAA8D,CAAC;AAEvF,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtD;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CASxD,CAAC;AAEF,eAAO,MAAM,aAAa,gGACqE,CAAC;AAEhG,eAAO,MAAM,iBAAiB,oBAAoB,CAAC;AAEnD,eAAO,MAAM,oBAAoB,uCAAuC,CAAC;AAEzE,eAAO,MAAM,kBAAkB,QAA2C,CAAC;AAE3E,eAAO,MAAM,iBAAiB,QAA6C,CAAC;AAE5E,mFAAmF;AACnF,eAAO,MAAM,mBAAmB,2CAA2C,CAAC;AAE5E,eAAO,MAAM,oBAAoB,yBAAyB,CAAC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { typographyClass as e } from "../../../lib/typography.js";
|
|
3
|
+
//#region src/components/molecules/Notice/noticeStyles.ts
|
|
4
|
+
var t = [
|
|
5
|
+
"neutral",
|
|
6
|
+
"info",
|
|
7
|
+
"success",
|
|
8
|
+
"warning",
|
|
9
|
+
"error"
|
|
10
|
+
], n = {
|
|
11
|
+
neutral: "border-border-emphasized bg-surface",
|
|
12
|
+
info: "border-[color-mix(in_srgb,var(--color-info)_32%,transparent)] bg-[color-mix(in_srgb,var(--color-info)_10%,var(--color-background-surface))]",
|
|
13
|
+
success: "border-[color-mix(in_srgb,var(--color-success)_32%,transparent)] bg-[color-mix(in_srgb,var(--color-success)_10%,var(--color-background-surface))]",
|
|
14
|
+
warning: "border-[color-mix(in_srgb,var(--color-warning)_36%,transparent)] bg-[color-mix(in_srgb,var(--color-warning)_14%,var(--color-background-surface))]",
|
|
15
|
+
error: "border-[color-mix(in_srgb,var(--color-error)_32%,transparent)] bg-[color-mix(in_srgb,var(--color-error)_10%,var(--color-background-surface))]"
|
|
16
|
+
}, r = "flex w-full min-w-0 items-start gap-3 rounded-[var(--radius-card-shell)] border p-4 text-fg", i = "mt-0.5 shrink-0", a = "flex min-w-0 flex-1 flex-col gap-1", o = `${e("ui-label")} text-fg`, s = `${e("caption")} text-muted`, c = "mt-2 flex flex-wrap items-center gap-2", l = "-my-1 -me-1 shrink-0";
|
|
17
|
+
//#endregion
|
|
18
|
+
export { c as noticeActionClasses, s as noticeBodyClasses, r as noticeClasses, a as noticeContentClasses, l as noticeDismissClasses, i as noticeIconClasses, o as noticeTitleClasses, n as noticeToneClasses, t as noticeTones };
|
|
@@ -13,7 +13,7 @@ export interface AppShellLabels {
|
|
|
13
13
|
/** The skip link, the first tab stop, which moves focus to the page content. */
|
|
14
14
|
skipToContent: string;
|
|
15
15
|
}
|
|
16
|
-
export declare const appShellAsideModes: readonly ["overlay", "docked"];
|
|
16
|
+
export declare const appShellAsideModes: readonly ["overlay", "docked", "inset"];
|
|
17
17
|
export type AppShellAsideMode = (typeof appShellAsideModes)[number];
|
|
18
18
|
export declare const appShellMenuButtons: readonly ["icon", "label", "picker"];
|
|
19
19
|
export type AppShellMenuButton = (typeof appShellMenuButtons)[number];
|
|
@@ -28,11 +28,15 @@ export interface AppShellProps {
|
|
|
28
28
|
sidebarFooter?: ReactNode;
|
|
29
29
|
/** Trailing title-bar controls — **Button**, **Avatar**, **MoreMenu** at one cluster tier. */
|
|
30
30
|
header?: ReactNode;
|
|
31
|
+
/** Full-width band under the title bar (a view toolbar). With an inset aside it spans above both. */
|
|
32
|
+
toolbar?: ReactNode;
|
|
31
33
|
/** Right slide-out content, in a non-blocking **Panel**. Omit it for no aside. */
|
|
32
34
|
aside?: ReactNode;
|
|
33
35
|
/** Title of the aside **Panel**. Defaults to `labels.aside`. */
|
|
34
36
|
asideTitle?: ReactNode;
|
|
35
37
|
asideDescription?: ReactNode;
|
|
38
|
+
/** Pinned under the aside's scrolling body (actions that must stay in view, such as Copy and Reset). The **Panel** `footer` in overlay mode. */
|
|
39
|
+
asideFooter?: ReactNode;
|
|
36
40
|
/** Desktop sidebar expanded — controlled. */
|
|
37
41
|
sidebarOpen?: boolean;
|
|
38
42
|
defaultSidebarOpen?: boolean;
|
|
@@ -41,6 +45,8 @@ export interface AppShellProps {
|
|
|
41
45
|
* `overlay` (default): the aside is a non-blocking **Panel** over the page.
|
|
42
46
|
* `docked`: from `lg` it sits beside the page, which narrows to make room, for controls you use while
|
|
43
47
|
* watching the page change (a font panel). Below `lg` it's the overlay **Panel** either way.
|
|
48
|
+
* `inset`: from `lg` a raised card floating inside the page surface, under the title bar and `toolbar`,
|
|
49
|
+
* 12px from the end and bottom; the page body narrows beside it. Its header is the title bar's 56px band.
|
|
44
50
|
*/
|
|
45
51
|
asideMode?: AppShellAsideMode;
|
|
46
52
|
/** Aside open — controlled. */
|
|
@@ -71,6 +77,7 @@ declare function AppShellBrand({ children }: AppShellSlotProps): import("react")
|
|
|
71
77
|
declare function AppShellSidebar({ children }: AppShellSlotProps): import("react").JSX.Element;
|
|
72
78
|
declare function AppShellSidebarFooter({ children }: AppShellSlotProps): import("react").JSX.Element;
|
|
73
79
|
declare function AppShellHeader({ children }: AppShellSlotProps): import("react").JSX.Element;
|
|
80
|
+
declare function AppShellToolbar({ children }: AppShellSlotProps): import("react").JSX.Element;
|
|
74
81
|
declare function AppShellAside({ children }: AppShellAsideSlotProps): import("react").JSX.Element;
|
|
75
82
|
export interface AppShellContextValue {
|
|
76
83
|
/** Desktop sidebar is expanded. */
|
|
@@ -86,7 +93,7 @@ export interface AppShellContextValue {
|
|
|
86
93
|
}
|
|
87
94
|
/** State of the nearest **AppShell** — for a header button that opens the aside. */
|
|
88
95
|
export declare function useAppShell(): AppShellContextValue;
|
|
89
|
-
declare function AppShellRoot({ title, brand: brandProp, sidebar: sidebarProp, sidebarFooter: sidebarFooterProp, header: headerProp, aside: asideProp, asideTitle, asideDescription, sidebarOpen: sidebarOpenProp, defaultSidebarOpen, onSidebarOpenChange, asideOpen: asideOpenProp, defaultAsideOpen, onAsideOpenChange, asideMode, menuButton, labels: labelsProp, children, className, }: AppShellProps): import("react").JSX.Element;
|
|
96
|
+
declare function AppShellRoot({ title, brand: brandProp, sidebar: sidebarProp, sidebarFooter: sidebarFooterProp, header: headerProp, toolbar: toolbarProp, aside: asideProp, asideTitle, asideDescription, asideFooter, sidebarOpen: sidebarOpenProp, defaultSidebarOpen, onSidebarOpenChange, asideOpen: asideOpenProp, defaultAsideOpen, onAsideOpenChange, asideMode, menuButton, labels: labelsProp, children, className, }: AppShellProps): import("react").JSX.Element;
|
|
90
97
|
/**
|
|
91
98
|
* App chrome — a sidebar on the page background and the page as an inset, raised surface with a
|
|
92
99
|
* title bar. Below `lg` the sidebar is a start **Sheet**; the optional aside is a non-blocking **Panel**,
|
|
@@ -97,6 +104,7 @@ export declare const AppShell: typeof AppShellRoot & {
|
|
|
97
104
|
Sidebar: typeof AppShellSidebar;
|
|
98
105
|
SidebarFooter: typeof AppShellSidebarFooter;
|
|
99
106
|
Header: typeof AppShellHeader;
|
|
107
|
+
Toolbar: typeof AppShellToolbar;
|
|
100
108
|
Aside: typeof AppShellAside;
|
|
101
109
|
};
|
|
102
110
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/AppShell/AppShell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAYL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/AppShell/AppShell.tsx"],"names":[],"mappings":"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"}
|