@vjdesigns/vjdesigns-ui 0.0.0-stage → 2.0.0

package/dist/components/feedback/Toast/Toast.mjs

@@ -0,0 +1,89 @@
+import { useMessages as e } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { cx as t } from "../../../utils/cx.mjs";
+import { VisuallyHidden as n } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
+import { Spinner as r } from "../Spinner/Spinner.mjs";
+import { Button as i, IconButton as a } from "../../primitives/Button/Button.mjs";
+import { BellIcon as o, CloseIcon as s, ErrorIcon as c, InfoIcon as l, SuccessIcon as u, WarningIcon as d } from "../../primitives/Icon/icons.mjs";
+import f from "./Toast.module.css.mjs";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/feedback/Toast/Toast.tsx
+var h = {
+	neutral: f.neutral,
+	info: f.info,
+	success: f.success,
+	warning: f.warning,
+	danger: f.danger,
+	loading: f.loading
+}, g = {
+	neutral: /* @__PURE__ */ p(o, { size: "sm" }),
+	info: /* @__PURE__ */ p(l, { size: "sm" }),
+	success: /* @__PURE__ */ p(u, { size: "sm" }),
+	warning: /* @__PURE__ */ p(d, { size: "sm" }),
+	danger: /* @__PURE__ */ p(c, { size: "sm" }),
+	loading: /* @__PURE__ */ p(r, {
+		size: "sm",
+		tone: "primary",
+		decorative: !0
+	})
+}, _ = ({ tone: r = "neutral", title: o, description: c, icon: l, action: u, dismissible: d = !0, onDismiss: _, closeLabel: v, toneLabel: y, progressDuration: b, progressKey: x, paused: S = !1, children: C, className: w, ...T }) => {
+	let E = e(), D = v ?? E.toast.dismiss, O = l === void 0 ? g[r] : l, k = y ?? (r === "neutral" ? "" : E.toast.tone[r]), A = b !== void 0 && Number.isFinite(b);
+	return /* @__PURE__ */ m("div", {
+		...T,
+		className: t(f.toast, h[r], w),
+		"data-tone": r,
+		"aria-busy": r === "loading" || T["aria-busy"],
+		children: [
+			O != null && /* @__PURE__ */ p("span", {
+				className: f.icon,
+				"aria-hidden": "true",
+				children: O
+			}),
+			/* @__PURE__ */ m("div", {
+				className: f.body,
+				children: [
+					o != null && o !== "" && /* @__PURE__ */ m("p", {
+						className: f.title,
+						children: [k && /* @__PURE__ */ p(n, { children: `${k}: ` }), o]
+					}),
+					c != null && c !== "" && /* @__PURE__ */ m("div", {
+						className: f.description,
+						children: [(o == null || o === "") && k && /* @__PURE__ */ p(n, { children: `${k}: ` }), c]
+					}),
+					C,
+					u && /* @__PURE__ */ p("div", {
+						className: f.actions,
+						children: /* @__PURE__ */ p(i, {
+							size: "sm",
+							variant: "soft",
+							tone: "primary",
+							onClick: (e) => {
+								u.onClick(e), e.defaultPrevented || _?.();
+							},
+							children: u.label
+						})
+					})
+				]
+			}),
+			d && /* @__PURE__ */ p(a, {
+				className: f.close,
+				size: "sm",
+				variant: "ghost",
+				tone: "neutral",
+				"aria-label": D,
+				onClick: () => _?.(),
+				children: /* @__PURE__ */ p(s, { size: "sm" })
+			}),
+			A && /* @__PURE__ */ p("span", {
+				className: f.progressTrack,
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ p("span", {
+					className: f.progressBar,
+					"data-paused": S || void 0,
+					style: { animationDuration: `${b}ms` }
+				}, x)
+			})
+		]
+	});
+};
+//#endregion
+export { _ as Toast };

package/dist/components/feedback/Toast/Toast.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_toast_bsy81_9`,t=`_neutral_bsy81_55`,n=`_info_bsy81_67`,r=`_success_bsy81_79`,i=`_warning_bsy81_91`,a=`_danger_bsy81_103`,o=`_loading_bsy81_117`,s=`_icon_bsy81_129`,c=`_body_bsy81_153`,l=`_title_bsy81_171`,u=`_description_bsy81_193`,d=`_actions_bsy81_209`,f=`_close_bsy81_223`,p=`_progressTrack_bsy81_235`,m=`_progressBar_bsy81_251`,h=`_toastProgress_bsy81_1`,g=`_viewport_bsy81_327`,_=`_topStart_bsy81_375`,v=`_topCenter_bsy81_385`,y=`_topEnd_bsy81_397`,b=`_bottomStart_bsy81_407`,x=`_bottomCenter_bsy81_417`,S=`_bottomEnd_bsy81_429`,C=`_list_bsy81_457`,w=`_gap0_bsy81_483`,T=`_gap1_bsy81_485`,E=`_gap2_bsy81_487`,D=`_gap3_bsy81_489`,O=`_gap4_bsy81_491`,k=`_gap5_bsy81_493`,A=`_gap6_bsy81_495`,j=`_gap8_bsy81_497`,M=`_gap10_bsy81_499`,N=`_gap12_bsy81_501`,P=`_gap16_bsy81_503`,F=`_gap20_bsy81_505`,I=`_gap24_bsy81_507`,L=`_item_bsy81_511`,R=`_toastEnter_bsy81_1`,z=`_itemInner_bsy81_539`,B=`_exiting_bsy81_549`,V=`_toastExit_bsy81_1`,H=`_queued_bsy81_613`,U={toast:e,neutral:t,info:n,success:r,warning:i,danger:a,loading:o,icon:s,body:c,title:l,description:u,actions:d,close:f,progressTrack:p,progressBar:m,toastProgress:h,viewport:g,topStart:_,topCenter:v,topEnd:y,bottomStart:b,bottomCenter:x,bottomEnd:S,list:C,gap0:w,gap1:T,gap2:E,gap3:D,gap4:O,gap5:k,gap6:A,gap8:j,gap10:M,gap12:N,gap16:P,gap20:F,gap24:I,item:L,toastEnter:R,itemInner:z,exiting:B,toastExit:V,queued:H};exports.actions=d,exports.body=c,exports.bottomCenter=x,exports.bottomEnd=S,exports.bottomStart=b,exports.close=f,exports.danger=a,exports.default=U,exports.description=u,exports.exiting=B,exports.gap0=w,exports.gap1=T,exports.gap10=M,exports.gap12=N,exports.gap16=P,exports.gap2=E,exports.gap20=F,exports.gap24=I,exports.gap3=D,exports.gap4=O,exports.gap5=k,exports.gap6=A,exports.gap8=j,exports.icon=s,exports.info=n,exports.item=L,exports.itemInner=z,exports.list=C,exports.loading=o,exports.neutral=t,exports.progressBar=m,exports.progressTrack=p,exports.queued=H,exports.success=r,exports.title=l,exports.toast=e,exports.toastEnter=R,exports.toastExit=V,exports.toastProgress=h,exports.topCenter=v,exports.topEnd=y,exports.topStart=_,exports.viewport=g,exports.warning=i;

package/dist/components/feedback/Toast/Toast.module.css.mjs

@@ -0,0 +1,48 @@
+//#region src/components/feedback/Toast/Toast.module.css
+var e = "_toast_bsy81_9", t = "_neutral_bsy81_55", n = "_info_bsy81_67", r = "_success_bsy81_79", i = "_warning_bsy81_91", a = "_danger_bsy81_103", o = "_loading_bsy81_117", s = "_icon_bsy81_129", c = "_body_bsy81_153", l = "_title_bsy81_171", u = "_description_bsy81_193", d = "_actions_bsy81_209", f = "_close_bsy81_223", p = "_progressTrack_bsy81_235", m = "_progressBar_bsy81_251", h = "_toastProgress_bsy81_1", g = "_viewport_bsy81_327", _ = "_topStart_bsy81_375", v = "_topCenter_bsy81_385", y = "_topEnd_bsy81_397", b = "_bottomStart_bsy81_407", x = "_bottomCenter_bsy81_417", S = "_bottomEnd_bsy81_429", C = "_list_bsy81_457", w = "_gap0_bsy81_483", T = "_gap1_bsy81_485", E = "_gap2_bsy81_487", D = "_gap3_bsy81_489", O = "_gap4_bsy81_491", k = "_gap5_bsy81_493", A = "_gap6_bsy81_495", j = "_gap8_bsy81_497", M = "_gap10_bsy81_499", N = "_gap12_bsy81_501", P = "_gap16_bsy81_503", F = "_gap20_bsy81_505", I = "_gap24_bsy81_507", L = "_item_bsy81_511", R = "_toastEnter_bsy81_1", z = "_itemInner_bsy81_539", B = "_exiting_bsy81_549", V = "_toastExit_bsy81_1", H = "_queued_bsy81_613", U = {
+	toast: e,
+	neutral: t,
+	info: n,
+	success: r,
+	warning: i,
+	danger: a,
+	loading: o,
+	icon: s,
+	body: c,
+	title: l,
+	description: u,
+	actions: d,
+	close: f,
+	progressTrack: p,
+	progressBar: m,
+	toastProgress: h,
+	viewport: g,
+	topStart: _,
+	topCenter: v,
+	topEnd: y,
+	bottomStart: b,
+	bottomCenter: x,
+	bottomEnd: S,
+	list: C,
+	gap0: w,
+	gap1: T,
+	gap2: E,
+	gap3: D,
+	gap4: O,
+	gap5: k,
+	gap6: A,
+	gap8: j,
+	gap10: M,
+	gap12: N,
+	gap16: P,
+	gap20: F,
+	gap24: I,
+	item: L,
+	toastEnter: R,
+	itemInner: z,
+	exiting: B,
+	toastExit: V,
+	queued: H
+};
+//#endregion
+export { d as actions, c as body, x as bottomCenter, S as bottomEnd, b as bottomStart, f as close, a as danger, U as default, u as description, B as exiting, w as gap0, T as gap1, M as gap10, N as gap12, P as gap16, E as gap2, F as gap20, I as gap24, D as gap3, O as gap4, k as gap5, A as gap6, j as gap8, s as icon, n as info, L as item, z as itemInner, C as list, o as loading, t as neutral, m as progressBar, p as progressTrack, H as queued, r as success, l as title, e as toast, R as toastEnter, V as toastExit, h as toastProgress, v as topCenter, y as topEnd, _ as topStart, g as viewport, i as warning };

package/dist/components/feedback/Toast/Toast.storyHelpers.d.ts

@@ -0,0 +1,21 @@
+import { CSSProperties, ReactNode } from 'react';
+import { Decorator } from '@storybook/react';
+import { ToastProviderProps } from './ToastProvider';
+/**
+ * Wraps a story in a ToastProvider with its own store, so stories (and the
+ * several stories on a docs page) never share toasts. Story args are passed
+ * through as provider props.
+ */
+export declare const withToastProvider: Decorator;
+/** A ToastProvider with a private store created once per mount. */
+export declare const IsolatedToastProvider: (props: ToastProviderProps) => import("react").JSX.Element;
+export declare const Label: ({ children }: {
+    children: ReactNode;
+}) => import("react").JSX.Element;
+export declare const Note: ({ children }: {
+    children: ReactNode;
+}) => import("react").JSX.Element;
+export declare const row: CSSProperties;
+export declare const grid: CSSProperties;
+/** Resolves (or rejects) after `ms`. */
+export declare const wait: (ms: number, fail?: boolean) => Promise<void>;

package/dist/components/feedback/Toast/ToastItem.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../utils/cx.cjs.js"),t=require("./Toast.module.css.cjs.js"),n=require("./Toast.cjs.js"),r=require("./toastTiming.cjs.js");let i=require("react"),a=require("react/jsx-runtime");var o=600,s=({record:s,store:c,paused:l,defaultDuration:u,defaultShowProgress:d,toneLabels:f,closeLabel:p,registerRef:m,onFocusedClose:h})=>{let{id:g,status:_,version:v}=s,y=(0,i.useRef)(null),b=_===`closing`,x=s.tone??`neutral`,S=s.dismissible??!0,C=r.resolveDuration(s,u),w=(0,i.useCallback)(()=>c.dismiss(g),[c,g]);r.usePausableTimer(C,l||b,v,()=>c.dismiss(g,`auto`)),(0,i.useEffect)(()=>{if(!b)return;let e=y.current;e&&e.contains(document.activeElement)&&h(g);let t=window.setTimeout(()=>c.remove(g),o);return()=>window.clearTimeout(t)},[b,g,h,c]);let T=(0,i.useCallback)(e=>{y.current=e,m(g,e)},[g,m]),E=e=>{e.key===`Escape`&&S&&!b&&(e.stopPropagation(),e.preventDefault(),w())},D=s.showProgress??d,O=f[x];return(0,a.jsx)(`li`,{ref:T,className:e.cx(t.default.item,b&&t.default.exiting),tabIndex:0,"data-toast-id":g,"data-state":_,onKeyDown:E,onAnimationEnd:e=>{b&&e.target===e.currentTarget&&c.remove(g)},children:(0,a.jsx)(`div`,{className:t.default.itemInner,children:s.render?s.render({id:g,toast:s,dismiss:w}):(0,a.jsx)(n.Toast,{tone:x,title:s.title,description:s.description,icon:s.icon,action:s.action,dismissible:S,onDismiss:w,closeLabel:p,toneLabel:O,progressDuration:D?C:void 0,paused:l,progressKey:v})})})};exports.ToastItem=s;

package/dist/components/feedback/Toast/ToastItem.d.ts

@@ -0,0 +1,18 @@
+import { ToastStore } from './toastStore';
+import { ToastRecord, ToastTone } from './toastTypes';
+/** @internal One toast inside the viewport: timer, keyboard, focus, and exit. */
+export interface ToastItemProps {
+    record: ToastRecord;
+    store: ToastStore;
+    paused: boolean;
+    defaultDuration: number;
+    defaultShowProgress: boolean;
+    toneLabels: Partial<Record<ToastTone, string>>;
+    closeLabel: string;
+    /** Registers the list item so the viewport can move focus between toasts. */
+    registerRef: (id: string, element: HTMLLIElement | null) => void;
+    /** Moves focus off a toast that is about to close. */
+    onFocusedClose: (id: string) => void;
+}
+/** @internal */
+export declare const ToastItem: ({ record, store, paused, defaultDuration, defaultShowProgress, toneLabels, closeLabel, registerRef, onFocusedClose, }: ToastItemProps) => import("react").JSX.Element;

package/dist/components/feedback/Toast/ToastItem.mjs

@@ -0,0 +1,61 @@
+import { cx as e } from "../../../utils/cx.mjs";
+import t from "./Toast.module.css.mjs";
+import { Toast as n } from "./Toast.mjs";
+import { resolveDuration as r, usePausableTimer as i } from "./toastTiming.mjs";
+import { useCallback as a, useEffect as o, useRef as s } from "react";
+import { jsx as c } from "react/jsx-runtime";
+//#region src/components/feedback/Toast/ToastItem.tsx
+var l = 600, u = ({ record: u, store: d, paused: f, defaultDuration: p, defaultShowProgress: m, toneLabels: h, closeLabel: g, registerRef: _, onFocusedClose: v }) => {
+	let { id: y, status: b, version: x } = u, S = s(null), C = b === "closing", w = u.tone ?? "neutral", T = u.dismissible ?? !0, E = r(u, p), D = a(() => d.dismiss(y), [d, y]);
+	i(E, f || C, x, () => d.dismiss(y, "auto")), o(() => {
+		if (!C) return;
+		let e = S.current;
+		e && e.contains(document.activeElement) && v(y);
+		let t = window.setTimeout(() => d.remove(y), l);
+		return () => window.clearTimeout(t);
+	}, [
+		C,
+		y,
+		v,
+		d
+	]);
+	let O = a((e) => {
+		S.current = e, _(y, e);
+	}, [y, _]), k = (e) => {
+		e.key === "Escape" && T && !C && (e.stopPropagation(), e.preventDefault(), D());
+	}, A = u.showProgress ?? m, j = h[w];
+	return /* @__PURE__ */ c("li", {
+		ref: O,
+		className: e(t.item, C && t.exiting),
+		tabIndex: 0,
+		"data-toast-id": y,
+		"data-state": b,
+		onKeyDown: k,
+		onAnimationEnd: (e) => {
+			C && e.target === e.currentTarget && d.remove(y);
+		},
+		children: /* @__PURE__ */ c("div", {
+			className: t.itemInner,
+			children: u.render ? u.render({
+				id: y,
+				toast: u,
+				dismiss: D
+			}) : /* @__PURE__ */ c(n, {
+				tone: w,
+				title: u.title,
+				description: u.description,
+				icon: u.icon,
+				action: u.action,
+				dismissible: T,
+				onDismiss: D,
+				closeLabel: g,
+				toneLabel: j,
+				progressDuration: A ? E : void 0,
+				paused: f,
+				progressKey: x
+			})
+		})
+	});
+};
+//#endregion
+export { u as ToastItem };

package/dist/components/feedback/Toast/ToastProvider.cjs.js

@@ -0,0 +1 @@
+const e=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),t=require("./toastStore.cjs.js"),n=require("./useToast.cjs.js"),r=require("./ToastViewport.cjs.js");let i=require("react"),a=require("react/jsx-runtime");var o=[`F8`],s=({children:s,store:c=t.toastStore,placement:l=`bottom-end`,max:u=3,duration:d=5e3,gap:f=3,label:p,hotkey:m=o,showProgress:h=!1,toneLabels:g,closeLabel:_,queuedLabel:v,className:y})=>{let b=e.useMessages(),x=p??b.toast.region,S=_??b.toast.dismiss,C=v??b.toast.queued,w=(0,i.useMemo)(()=>({store:c,api:c===t.toastStore?t.toast:t.createToastApi(c)}),[c]),T=(0,i.useMemo)(()=>({neutral:``,...b.toast.tone,...g}),[b.toast.tone,g]);return(0,a.jsxs)(n.ToastContext.Provider,{value:w,children:[s,(0,a.jsx)(r.ToastViewport,{store:c,placement:l,max:u,duration:d,gap:f,label:x,hotkey:m,showProgress:h,toneLabels:T,closeLabel:S,queuedLabel:C,className:y})]})};exports.ToastProvider=s;

package/dist/components/feedback/Toast/ToastProvider.d.ts

@@ -0,0 +1,62 @@
+import { ReactNode } from 'react';
+import { Space } from '../../../types/common';
+import { ToastStore } from './toastStore';
+import { ToastPlacement, ToastTone } from './toastTypes';
+export interface ToastProviderProps {
+    /** Your app. Anything inside can call `useToast()`. */
+    children?: ReactNode;
+    /**
+     * Store to render. Defaults to the shared store used by the exported
+     * `toast()`, so imperative calls from non-React code show up here. Pass
+     * one from `createToastStore()` to isolate a provider.
+     */
+    store?: ToastStore;
+    /** Corner or edge of the screen. Below 640px wide toasts always sit full width at the bottom. @default "bottom-end" */
+    placement?: ToastPlacement;
+    /** Most toasts shown at once. Extra toasts wait in a queue and appear as others close. @default 3 */
+    max?: number;
+    /**
+     * Default auto-close time in milliseconds. Raised to a readable minimum
+     * (4s plus 250ms per word). Pass `Infinity` to keep toasts until dismissed.
+     * @default 5000
+     */
+    duration?: number;
+    /** Space between toasts (a `--space-*` step). @default 3 */
+    gap?: Space;
+    /** Accessible name of the viewport region. The hotkey is appended, e.g. "Notifications (F8)". @default "Notifications" */
+    label?: string;
+    /**
+     * Keys that move focus to the newest toast, as `KeyboardEvent.key` or
+     * `.code` values plus optional modifiers ("Alt", "Control", "Meta",
+     * "Shift"), e.g. `["Alt", "KeyT"]`. Pass `[]` to turn it off.
+     * @default ["F8"]
+     */
+    hotkey?: readonly string[];
+    /** Shows a decorative bar for each toast's remaining time. @default false */
+    showProgress?: boolean;
+    /** Screen reader labels read before each toast's message, per tone. Localize them here. */
+    toneLabels?: Partial<Record<ToastTone, string>>;
+    /** Accessible name of every close button. @default "Dismiss notification" */
+    closeLabel?: string;
+    /** Text for the queue count shown when more than `max` toasts are waiting. @default "+N more notifications" */
+    queuedLabel?: (count: number) => string;
+    /** Class name for the viewport region. */
+    className?: string;
+}
+/**
+ * Renders the toast viewport (in a portal) and provides `useToast()`.
+ * Place it once near the root of your app.
+ *
+ * Accessibility:
+ * - The viewport is a labelled region ("Notifications (F8)"). The hotkey
+ *   moves focus to the newest toast; Tab moves through toasts and their
+ *   buttons; Escape closes the focused toast; focus then moves to the next
+ *   toast, or back to where it was before.
+ * - Announcements go through persistent live regions that exist before any
+ *   toast appears: `role="status"` for most tones and `role="alert"` for
+ *   `danger`.
+ * - Timers pause while the viewport is hovered or focused and while the
+ *   window is blurred or hidden. Toasts with an action, and `loading`
+ *   toasts, stay until dismissed by default.
+ */
+export declare const ToastProvider: ({ children, store, placement, max, duration, gap, label: labelProp, hotkey, showProgress, toneLabels, closeLabel: closeLabelProp, queuedLabel: queuedLabelProp, className, }: ToastProviderProps) => import("react").JSX.Element;

package/dist/components/feedback/Toast/ToastProvider.mjs

@@ -0,0 +1,36 @@
+import { useMessages as e } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { createToastApi as t, toast as n, toastStore as r } from "./toastStore.mjs";
+import { ToastContext as i } from "./useToast.mjs";
+import { ToastViewport as a } from "./ToastViewport.mjs";
+import { useMemo as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/feedback/Toast/ToastProvider.tsx
+var l = ["F8"], u = ({ children: u, store: d = r, placement: f = "bottom-end", max: p = 3, duration: m = 5e3, gap: h = 3, label: g, hotkey: _ = l, showProgress: v = !1, toneLabels: y, closeLabel: b, queuedLabel: x, className: S }) => {
+	let C = e(), w = g ?? C.toast.region, T = b ?? C.toast.dismiss, E = x ?? C.toast.queued, D = o(() => ({
+		store: d,
+		api: d === r ? n : t(d)
+	}), [d]), O = o(() => ({
+		neutral: "",
+		...C.toast.tone,
+		...y
+	}), [C.toast.tone, y]);
+	return /* @__PURE__ */ c(i.Provider, {
+		value: D,
+		children: [u, /* @__PURE__ */ s(a, {
+			store: d,
+			placement: f,
+			max: p,
+			duration: m,
+			gap: h,
+			label: w,
+			hotkey: _,
+			showProgress: v,
+			toneLabels: O,
+			closeLabel: T,
+			queuedLabel: E,
+			className: S
+		})]
+	});
+};
+//#endregion
+export { u as ToastProvider };

package/dist/components/feedback/Toast/ToastViewport.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../utils/cx.cjs.js"),t=require("../../utilities/Portal/Portal.cjs.js"),n=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),r=require("./Toast.module.css.cjs.js"),i=require("./ToastItem.cjs.js"),a=require("./useToastAnnouncer.cjs.js");let o=require("react"),s=require("react/jsx-runtime");var c={"top-start":r.default.topStart,"top-center":r.default.topCenter,"top-end":r.default.topEnd,"bottom-start":r.default.bottomStart,"bottom-center":r.default.bottomCenter,"bottom-end":r.default.bottomEnd},l={0:r.default.gap0,1:r.default.gap1,2:r.default.gap2,3:r.default.gap3,4:r.default.gap4,5:r.default.gap5,6:r.default.gap6,8:r.default.gap8,10:r.default.gap10,12:r.default.gap12,16:r.default.gap16,20:r.default.gap20,24:r.default.gap24},u=[`Alt`,`Control`,`Meta`,`Shift`],d={Alt:`altKey`,Control:`ctrlKey`,Meta:`metaKey`,Shift:`shiftKey`};function f(e,t){if(t.length===0)return!1;let n=t.filter(e=>!u.includes(e)),r=u.filter(e=>t.includes(e));return u.every(t=>e[d[t]]===r.includes(t))&&n.every(t=>e.key===t||e.code===t)}function p(e){return e.map(e=>e.replace(/^Key/,``).replace(/^Digit/,``).replace(`Control`,`Ctrl`)).join(`+`)}function m(){let[e,t]=(0,o.useState)(!1);return(0,o.useEffect)(()=>{let e=e=>()=>t(e),n=e(!0),r=e(!1),i=()=>t(document.visibilityState===`hidden`);return window.addEventListener(`blur`,n),window.addEventListener(`focus`,r),document.addEventListener(`visibilitychange`,i),()=>{window.removeEventListener(`blur`,n),window.removeEventListener(`focus`,r),document.removeEventListener(`visibilitychange`,i)}},[]),e}var h=({store:u,placement:d,max:h,duration:g,gap:_,label:v,hotkey:y,showProgress:b,toneLabels:x,closeLabel:S,queuedLabel:C,className:w})=>{let T=(0,o.useSyncExternalStore)(u.subscribe,u.getSnapshot,u.getServerSnapshot),E=(0,o.useMemo)(()=>T.slice(0,Math.max(1,h)),[T,h]),D=T.length-E.length,O=(0,o.useRef)(null),k=(0,o.useRef)(new Map),A=(0,o.useRef)(null),[j,M]=(0,o.useState)(!1),[N,P]=(0,o.useState)(!1),F=m(),I=j||N||F,{polite:L,assertive:R}=a.useToastAnnouncer(E,x),z=(0,o.useCallback)((e,t)=>{t?k.current.set(e,t):k.current.delete(e)},[]),B=(0,o.useCallback)(()=>Array.from(O.current?.querySelectorAll(`li[data-state="open"]`)??[]),[]),V=(0,o.useCallback)(e=>{let t=k.current.get(e),n=Array.from(O.current?.querySelectorAll(`li[data-toast-id]`)??[]),r=t?n.indexOf(t):-1,i=e=>e.dataset.state===`open`,a=n.slice(r+1).find(i)??n.slice(0,Math.max(0,r)).reverse().find(i);if(a){a.focus();return}let o=A.current;A.current=null,o&&o.isConnected?o.focus():t?.blur()},[]);(0,o.useEffect)(()=>{if(y.length===0)return;let e=e=>{if(!f(e,y))return;let t=B(),n=t[t.length-1];if(!n)return;e.preventDefault();let r=document.activeElement;r&&!O.current?.contains(r)&&(A.current=r),n.focus()};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[y,B]);let H=e=>{P(!0);let t=e.relatedTarget;t&&!e.currentTarget.contains(t)&&(A.current=t)},U=e=>{let t=e.relatedTarget;(!t||!e.currentTarget.contains(t))&&P(!1)},W=p(y),G=d.startsWith(`top`)?`top`:`bottom`;return(0,s.jsx)(t.Portal,{children:(0,s.jsxs)(`section`,{ref:O,"aria-label":W?`${v} (${W})`:v,tabIndex:-1,className:e.cx(r.default.viewport,c[d],l[_],w),"data-side":G,"data-paused":I||void 0,onFocus:H,onBlur:U,children:[(0,s.jsx)(`ol`,{className:r.default.list,onPointerEnter:()=>M(!0),onPointerLeave:()=>M(!1),children:E.map(e=>(0,s.jsx)(i.ToastItem,{record:e,store:u,paused:I,defaultDuration:g,defaultShowProgress:b,toneLabels:x,closeLabel:S,registerRef:z,onFocusedClose:V},e.id))}),D>0&&(0,s.jsx)(`p`,{className:r.default.queued,children:C(D)}),(0,s.jsx)(n.VisuallyHidden,{role:`status`,"aria-live":`polite`,"aria-atomic":`false`,children:L.map(e=>(0,s.jsx)(`span`,{children:e.text},e.key))}),(0,s.jsx)(n.VisuallyHidden,{role:`alert`,"aria-live":`assertive`,"aria-atomic":`false`,children:R.map(e=>(0,s.jsx)(`span`,{children:e.text},e.key))})]})})};exports.ToastViewport=h,exports.formatHotkey=p;

package/dist/components/feedback/Toast/ToastViewport.d.ts

@@ -0,0 +1,25 @@
+import { Space } from '../../../types/common';
+import { ToastStore } from './toastStore';
+import { ToastPlacement, ToastTone } from './toastTypes';
+/** Readable hotkey text for the region label, e.g. "Alt+T". */
+export declare function formatHotkey(hotkey: readonly string[]): string;
+/** @internal Props passed down from ToastProvider. */
+export interface ToastViewportProps {
+    store: ToastStore;
+    placement: ToastPlacement;
+    max: number;
+    duration: number;
+    gap: Space;
+    label: string;
+    hotkey: readonly string[];
+    showProgress: boolean;
+    toneLabels: Partial<Record<ToastTone, string>>;
+    closeLabel: string;
+    queuedLabel: (count: number) => string;
+    className?: string;
+}
+/**
+ * @internal The fixed, portaled region that lists toasts, owns the live
+ * regions, pauses timers, and handles the focus hotkey.
+ */
+export declare const ToastViewport: ({ store, placement, max, duration, gap, label, hotkey, showProgress, toneLabels, closeLabel, queuedLabel, className, }: ToastViewportProps) => import("react").JSX.Element;

package/dist/components/feedback/Toast/ToastViewport.mjs

@@ -0,0 +1,137 @@
+import { cx as e } from "../../../utils/cx.mjs";
+import { Portal as t } from "../../utilities/Portal/Portal.mjs";
+import { VisuallyHidden as n } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
+import r from "./Toast.module.css.mjs";
+import { ToastItem as i } from "./ToastItem.mjs";
+import { useToastAnnouncer as a } from "./useToastAnnouncer.mjs";
+import { useCallback as o, useEffect as s, useMemo as c, useRef as l, useState as u, useSyncExternalStore as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/feedback/Toast/ToastViewport.tsx
+var m = {
+	"top-start": r.topStart,
+	"top-center": r.topCenter,
+	"top-end": r.topEnd,
+	"bottom-start": r.bottomStart,
+	"bottom-center": r.bottomCenter,
+	"bottom-end": r.bottomEnd
+}, h = {
+	0: r.gap0,
+	1: r.gap1,
+	2: r.gap2,
+	3: r.gap3,
+	4: r.gap4,
+	5: r.gap5,
+	6: r.gap6,
+	8: r.gap8,
+	10: r.gap10,
+	12: r.gap12,
+	16: r.gap16,
+	20: r.gap20,
+	24: r.gap24
+}, g = [
+	"Alt",
+	"Control",
+	"Meta",
+	"Shift"
+], _ = {
+	Alt: "altKey",
+	Control: "ctrlKey",
+	Meta: "metaKey",
+	Shift: "shiftKey"
+};
+function v(e, t) {
+	if (t.length === 0) return !1;
+	let n = t.filter((e) => !g.includes(e)), r = g.filter((e) => t.includes(e));
+	return g.every((t) => e[_[t]] === r.includes(t)) && n.every((t) => e.key === t || e.code === t);
+}
+function y(e) {
+	return e.map((e) => e.replace(/^Key/, "").replace(/^Digit/, "").replace("Control", "Ctrl")).join("+");
+}
+function b() {
+	let [e, t] = u(!1);
+	return s(() => {
+		let e = (e) => () => t(e), n = e(!0), r = e(!1), i = () => t(document.visibilityState === "hidden");
+		return window.addEventListener("blur", n), window.addEventListener("focus", r), document.addEventListener("visibilitychange", i), () => {
+			window.removeEventListener("blur", n), window.removeEventListener("focus", r), document.removeEventListener("visibilitychange", i);
+		};
+	}, []), e;
+}
+var x = ({ store: g, placement: _, max: x, duration: S, gap: C, label: w, hotkey: T, showProgress: E, toneLabels: D, closeLabel: O, queuedLabel: k, className: A }) => {
+	let j = d(g.subscribe, g.getSnapshot, g.getServerSnapshot), M = c(() => j.slice(0, Math.max(1, x)), [j, x]), N = j.length - M.length, P = l(null), F = l(/* @__PURE__ */ new Map()), I = l(null), [L, R] = u(!1), [z, B] = u(!1), V = b(), H = L || z || V, { polite: U, assertive: W } = a(M, D), G = o((e, t) => {
+		t ? F.current.set(e, t) : F.current.delete(e);
+	}, []), K = o(() => Array.from(P.current?.querySelectorAll("li[data-state=\"open\"]") ?? []), []), q = o((e) => {
+		let t = F.current.get(e), n = Array.from(P.current?.querySelectorAll("li[data-toast-id]") ?? []), r = t ? n.indexOf(t) : -1, i = (e) => e.dataset.state === "open", a = n.slice(r + 1).find(i) ?? n.slice(0, Math.max(0, r)).reverse().find(i);
+		if (a) {
+			a.focus();
+			return;
+		}
+		let o = I.current;
+		I.current = null, o && o.isConnected ? o.focus() : t?.blur();
+	}, []);
+	s(() => {
+		if (T.length === 0) return;
+		let e = (e) => {
+			if (!v(e, T)) return;
+			let t = K(), n = t[t.length - 1];
+			if (!n) return;
+			e.preventDefault();
+			let r = document.activeElement;
+			r && !P.current?.contains(r) && (I.current = r), n.focus();
+		};
+		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	}, [T, K]);
+	let J = (e) => {
+		B(!0);
+		let t = e.relatedTarget;
+		t && !e.currentTarget.contains(t) && (I.current = t);
+	}, Y = (e) => {
+		let t = e.relatedTarget;
+		(!t || !e.currentTarget.contains(t)) && B(!1);
+	}, X = y(T), Z = _.startsWith("top") ? "top" : "bottom";
+	return /* @__PURE__ */ f(t, { children: /* @__PURE__ */ p("section", {
+		ref: P,
+		"aria-label": X ? `${w} (${X})` : w,
+		tabIndex: -1,
+		className: e(r.viewport, m[_], h[C], A),
+		"data-side": Z,
+		"data-paused": H || void 0,
+		onFocus: J,
+		onBlur: Y,
+		children: [
+			/* @__PURE__ */ f("ol", {
+				className: r.list,
+				onPointerEnter: () => R(!0),
+				onPointerLeave: () => R(!1),
+				children: M.map((e) => /* @__PURE__ */ f(i, {
+					record: e,
+					store: g,
+					paused: H,
+					defaultDuration: S,
+					defaultShowProgress: E,
+					toneLabels: D,
+					closeLabel: O,
+					registerRef: G,
+					onFocusedClose: q
+				}, e.id))
+			}),
+			N > 0 && /* @__PURE__ */ f("p", {
+				className: r.queued,
+				children: k(N)
+			}),
+			/* @__PURE__ */ f(n, {
+				role: "status",
+				"aria-live": "polite",
+				"aria-atomic": "false",
+				children: U.map((e) => /* @__PURE__ */ f("span", { children: e.text }, e.key))
+			}),
+			/* @__PURE__ */ f(n, {
+				role: "alert",
+				"aria-live": "assertive",
+				"aria-atomic": "false",
+				children: W.map((e) => /* @__PURE__ */ f("span", { children: e.text }, e.key))
+			})
+		]
+	}) });
+};
+//#endregion
+export { x as ToastViewport, y as formatHotkey };

package/dist/components/feedback/Toast/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Toast';
+export * from './ToastProvider';
+export { useToast, type UseToastResult } from './useToast';
+export { createToastApi, createToastStore, toast, toastStore, type ToastCloseReason, type ToastStore, } from './toastStore';
+export { TOAST_MIN_ACTION_DURATION, TOAST_MIN_DURATION, TOAST_MS_PER_WORD, } from './toastTiming';

package/dist/components/feedback/Toast/toastStore.cjs.js

@@ -0,0 +1 @@
+let e=require("react");var t=[],n=0;function r(){let e=t,r=new Set,i=t=>{e=t,r.forEach(e=>e())},a=(t,n)=>{e.some(e=>e.id===t)&&i(e.map(e=>e.id===t?{...e,...n,id:t,version:e.version+1,status:`open`}:e))};return{subscribe:e=>(r.add(e),()=>r.delete(e)),getSnapshot:()=>e,getServerSnapshot:()=>t,add:({id:t,...r})=>{if(t&&e.some(e=>e.id===t))return a(t,r),t;n+=1;let o=t??`toast-${n}`;return i([...e,{...r,id:o,version:0,status:`open`}]),o},update:a,dismiss:(t,n=`dismiss`)=>{let r=e.filter(e=>(t===void 0||e.id===t)&&e.status===`open`);if(r.length===0)return;r.forEach(e=>n===`auto`?e.onAutoClose?.(e.id):e.onDismiss?.(e.id));let a=new Set(r.map(e=>e.id));i(e.map(e=>a.has(e.id)?{...e,status:`closing`}:e))},remove:t=>{e.some(e=>e.id===t)&&i(e.filter(e=>e.id!==t))}}}function i(t){return typeof t==`object`&&!!t&&!Array.isArray(t)&&!(0,e.isValidElement)(t)}function a(e){return i(e)?e:{title:e}}function o(e,t){return a(typeof e==`function`?e(t):e)}function s(e){let t=t=>(n,r)=>e.add({title:n,...r,tone:t}),n=(t=>e.add(t));return n.success=t(`success`),n.error=t(`danger`),n.warning=t(`warning`),n.info=t(`info`),n.loading=t(`loading`),n.dismiss=t=>e.dismiss(t),n.update=(t,n)=>e.update(t,n),n.promise=(t,n,r)=>{let i=e.add({...r,...a(n.loading),tone:`loading`,dismissible:r?.dismissible??!0}),s=typeof t==`function`?t():t,c={description:void 0,duration:r?.duration,icon:void 0};return s.then(t=>e.update(i,{...c,...o(n.success,t),tone:`success`}),t=>e.update(i,{...c,...o(n.error,t),tone:`danger`})),i},n}var c=r(),l=s(c);exports.createToastApi=s,exports.createToastStore=r,exports.toast=l,exports.toastStore=c;

package/dist/components/feedback/Toast/toastStore.d.ts

@@ -0,0 +1,46 @@
+import { ToastApi, ToastOptions, ToastRecord } from './toastTypes';
+type Listener = () => void;
+/** Why a toast closed. */
+export type ToastCloseReason = "dismiss" | "auto";
+/**
+ * A tiny external store of toasts, read with `useSyncExternalStore`.
+ * Safe to create and call during server rendering: it only touches memory.
+ */
+export interface ToastStore {
+    /** Registers a listener for changes. Returns an unsubscribe function. */
+    subscribe: (listener: Listener) => () => void;
+    /** Current toasts, oldest first. The array is replaced on every change. */
+    getSnapshot: () => readonly ToastRecord[];
+    /** Always an empty list, so server and first client render match. */
+    getServerSnapshot: () => readonly ToastRecord[];
+    /** Adds a toast (or updates the one with the same `id`) and returns its id. */
+    add: (options: ToastOptions) => string;
+    /** Merges options into a toast. Ignored if the id is unknown. */
+    update: (id: string, options: ToastOptions) => void;
+    /** Starts closing one toast, or all when no id is given. */
+    dismiss: (id?: string, reason?: ToastCloseReason) => void;
+    /** Removes a toast immediately (after its exit animation). */
+    remove: (id: string) => void;
+}
+/** Creates an isolated toast store (for tests, or several providers). */
+export declare function createToastStore(): ToastStore;
+/** Builds the `toast` function and its helpers for a store. */
+export declare function createToastApi(store: ToastStore): ToastApi;
+/**
+ * The default store. `ToastProvider` renders it unless you pass `store`, so
+ * non-React code (API clients, event handlers outside components) can call
+ * the exported `toast()`.
+ */
+export declare const toastStore: ToastStore;
+/**
+ * Imperative toast API bound to the default store. Works anywhere, including
+ * outside React; toasts appear once a `ToastProvider` is mounted.
+ *
+ * ```ts
+ * toast.success("Roster saved");
+ * const id = toast.loading("Uploading film");
+ * toast.update(id, { tone: "success", title: "Upload complete" });
+ * ```
+ */
+export declare const toast: ToastApi;
+export {};