@nizivo/react 0.1.0 → 0.2.0

package/dist/table/table.d.ts

@@ -0,0 +1,101 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement } from "react";
+//#region src/table/table.d.ts
+type Empty = Record<string, never>;
+export type TableSort = "ascending" | "descending";
+export interface TableContainerProps extends ComponentPropsWithRef<"div"> {
+  /**
+   * Names the container as a scrollable region and puts it in the Tab order, so a keyboard can
+   * scroll a table wider than the screen (Safari and Firefox do not focus a scroller on their own).
+   * Give it when the table can scroll sideways and its rows hold no link or control.
+   */
+  label?: string;
+  render?: RenderProp<Empty>;
+}
+export interface TableRootProps extends ComponentPropsWithRef<"table"> {
+  render?: RenderProp<Empty>;
+}
+export interface TableCaptionProps extends ComponentPropsWithRef<"caption"> {
+  /**
+   * Keeps the caption as the table's accessible name but hides it from sight, for a table whose
+   * card already shows a heading. @default false
+   */
+  visuallyHidden?: boolean;
+  render?: RenderProp<Empty>;
+}
+export interface TableSectionProps extends ComponentPropsWithRef<"tbody"> {
+  render?: RenderProp<Empty>;
+}
+export interface TableRowState {
+  selected: boolean;
+  interactive: boolean;
+}
+export interface TableRowProps extends ComponentPropsWithRef<"tr"> {
+  /** `data-selected` (never `aria-selected` inside a table, §16.2). @default false */
+  selected?: boolean;
+  /**
+   * The whole row is the hit area of its `Table.RowLink` (a stretched link) and shows Figma's hover.
+   * Other controls in the row stay above the link. @default false
+   */
+  interactive?: boolean;
+  render?: RenderProp<TableRowState>;
+}
+export interface TableHeadState {
+  sort: TableSort | undefined;
+  numeric: boolean;
+}
+export interface TableHeadProps extends ComponentPropsWithRef<"th"> {
+  /** The column's current sort: `aria-sort` and `data-sort` on the `<th>`. */
+  sort?: TableSort;
+  /** A column of numbers: end-aligned, tabular figures. @default false */
+  numeric?: boolean;
+  /** `row` for a row header in the body. @default 'col' */
+  scope?: "col" | "row" | "colgroup" | "rowgroup";
+  render?: RenderProp<TableHeadState>;
+}
+export interface TableCellState {
+  numeric: boolean;
+}
+export interface TableCellProps extends ComponentPropsWithRef<"td"> {
+  /** A number: end-aligned, tabular figures. @default false */
+  numeric?: boolean;
+  render?: RenderProp<TableCellState>;
+}
+export interface TableSortButtonProps extends ComponentPropsWithRef<"button"> {
+  /**
+   * The same page sorted by this column, for example `href="?sort=-total"`: the part renders an
+   * `<a>`, and the URL holds the state. With neither `href` nor `render` it is a
+   * `<button type="button">` for your own handler.
+   */
+  href?: string;
+  /** The router's link, for example `render={<Link href="?sort=-total" />}`. */
+  render?: RenderProp<Empty>;
+}
+export interface TableRowLinkProps extends ComponentPropsWithRef<"a"> {
+  /** The router's link, for example `render={<Link href="/orders/1042" />}`. It must render an `<a>`. */
+  render?: RenderProp<Empty>;
+}
+/** The table's box: the border, the radius and the horizontal scroll of a wide table. */
+export declare function TableContainer({ label, render, className, ...rest }: TableContainerProps): ReactElement;
+export declare function TableRoot({ render, className, ...rest }: TableRootProps): ReactElement;
+/** The table's name. Give every table one: a caption, or `aria-labelledby` to a visible heading. */
+export declare function TableCaption({ visuallyHidden, render, className, ...rest }: TableCaptionProps): ReactElement;
+export declare function TableHeader({ render, className, ...rest }: TableSectionProps): ReactElement;
+export declare function TableBody({ render, className, ...rest }: TableSectionProps): ReactElement;
+export declare function TableFooter({ render, className, ...rest }: TableSectionProps): ReactElement;
+export declare function TableRow({ selected, interactive, render, className, ...rest }: TableRowProps): ReactElement;
+export declare function TableHead({ sort, numeric, scope, render, className, ...rest }: TableHeadProps): ReactElement;
+export declare function TableCell({ numeric, render, className, ...rest }: TableCellProps): ReactElement;
+/**
+ * The column's label as a control. Its arrow follows the `sort` of the `Table.Head` it sits in
+ * (up for ascending, down for descending, both ways when unsorted) through CSS, so it needs no
+ * client code; the `<th>`'s `aria-sort` tells assistive technology the current order.
+ */
+export declare function TableSortButton({ href, render, className, children, ...rest }: TableSortButtonProps): ReactElement;
+/**
+ * A row's link, usually its first cell's text (Figma Order Row: the order number). In a row with
+ * `interactive`, it stretches over the whole row.
+ */
+export declare function TableRowLink({ render, className, ...rest }: TableRowLinkProps): ReactElement;
+//#endregion
+export {};

package/dist/table/table.js

@@ -0,0 +1,121 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+import { ChevronGlyph, ChevronsUpDownGlyph } from "../_internal/glyphs.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/table/table.tsx
+/** The table's box: the border, the radius and the horizontal scroll of a wide table. */
+function TableContainer({ label, render, className, ...rest }) {
+	return renderElement("div", render, {}, {
+		"data-slot": "table-container",
+		...label === void 0 ? {} : {
+			role: "region",
+			"aria-label": label,
+			tabIndex: 0
+		},
+		...rest,
+		className: cx("nz-table-container", className)
+	});
+}
+function TableRoot({ render, className, ...rest }) {
+	return renderElement("table", render, {}, {
+		"data-slot": "table",
+		...rest,
+		className: cx("nz-table", className)
+	});
+}
+/** The table's name. Give every table one: a caption, or `aria-labelledby` to a visible heading. */
+function TableCaption({ visuallyHidden = false, render, className, ...rest }) {
+	return renderElement("caption", render, {}, {
+		"data-slot": "table-caption",
+		...rest,
+		className: cx("nz-table-caption", visuallyHidden && "nz-visually-hidden", className)
+	});
+}
+function TableHeader({ render, className, ...rest }) {
+	return renderElement("thead", render, {}, {
+		"data-slot": "table-header",
+		...rest,
+		className: cx("nz-table-header", className)
+	});
+}
+function TableBody({ render, className, ...rest }) {
+	return renderElement("tbody", render, {}, {
+		"data-slot": "table-body",
+		...rest,
+		className: cx("nz-table-body", className)
+	});
+}
+function TableFooter({ render, className, ...rest }) {
+	return renderElement("tfoot", render, {}, {
+		"data-slot": "table-footer",
+		...rest,
+		className: cx("nz-table-footer", className)
+	});
+}
+function TableRow({ selected = false, interactive = false, render, className, ...rest }) {
+	return renderElement("tr", render, {
+		selected,
+		interactive
+	}, {
+		"data-slot": "table-row",
+		"data-selected": selected ? "" : void 0,
+		"data-interactive": interactive ? "" : void 0,
+		...rest,
+		className: cx("nz-table-row", className)
+	});
+}
+function TableHead({ sort, numeric = false, scope = "col", render, className, ...rest }) {
+	return renderElement("th", render, {
+		sort,
+		numeric
+	}, {
+		"data-slot": "table-head",
+		"data-sort": sort,
+		"data-numeric": numeric ? "" : void 0,
+		"aria-sort": sort,
+		scope,
+		...rest,
+		className: cx("nz-table-head", className)
+	});
+}
+function TableCell({ numeric = false, render, className, ...rest }) {
+	return renderElement("td", render, { numeric }, {
+		"data-slot": "table-cell",
+		"data-numeric": numeric ? "" : void 0,
+		...rest,
+		className: cx("nz-table-cell", className)
+	});
+}
+/**
+* The column's label as a control. Its arrow follows the `sort` of the `Table.Head` it sits in
+* (up for ascending, down for descending, both ways when unsorted) through CSS, so it needs no
+* client code; the `<th>`'s `aria-sort` tells assistive technology the current order.
+*/
+function TableSortButton({ href, render, className, children, ...rest }) {
+	return renderElement(href === void 0 ? "button" : "a", render, {}, {
+		"data-slot": "table-sort-button",
+		href,
+		type: href !== void 0 || render !== void 0 ? void 0 : "button",
+		...rest,
+		className: cx("nz-table-sort-button", "nz-hit-target", className),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [children, /* @__PURE__ */ jsxs("span", {
+			className: "nz-table-sort-icon",
+			"data-slot": "table-sort-icon",
+			"aria-hidden": "true",
+			children: [/* @__PURE__ */ jsx(ChevronsUpDownGlyph, {}), /* @__PURE__ */ jsx(ChevronGlyph, {})]
+		})] })
+	});
+}
+/**
+* A row's link, usually its first cell's text (Figma Order Row: the order number). In a row with
+* `interactive`, it stretches over the whole row.
+*/
+function TableRowLink({ render, className, ...rest }) {
+	return renderElement("a", render, {}, {
+		"data-slot": "table-row-link",
+		...rest,
+		className: cx("nz-table-row-link", className)
+	});
+}
+//#endregion
+export { TableBody, TableCaption, TableCell, TableContainer, TableFooter, TableHead, TableHeader, TableRoot, TableRow, TableRowLink, TableSortButton };

package/dist/table/table.parts.d.ts

@@ -0,0 +1,6 @@
+import { TableBody, TableCaption, TableCell, TableContainer, TableFooter, TableHead, TableHeader, TableRoot, TableRow, TableRowLink, TableSortButton } from "./table.js";
+declare namespace table_parts_d_exports {
+  export { TableBody as Body, TableCaption as Caption, TableCell as Cell, TableContainer as Container, TableFooter as Footer, TableHead as Head, TableHeader as Header, TableRoot as Root, TableRow as Row, TableRowLink as RowLink, TableSortButton as SortButton };
+}
+//#endregion
+export { TableBody as Body, TableCaption as Caption, TableCell as Cell, TableContainer as Container, TableFooter as Footer, TableHead as Head, TableHeader as Header, TableRoot as Root, TableRow as Row, TableRowLink as RowLink, TableSortButton as SortButton, table_parts_d_exports };

package/dist/table/table.parts.js

@@ -0,0 +1,18 @@
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { TableBody, TableCaption, TableCell, TableContainer, TableFooter, TableHead, TableHeader, TableRoot, TableRow, TableRowLink, TableSortButton } from "./table.js";
+//#region src/table/table.parts.ts
+var table_parts_exports = /* @__PURE__ */ __exportAll({
+	Body: () => TableBody,
+	Caption: () => TableCaption,
+	Cell: () => TableCell,
+	Container: () => TableContainer,
+	Footer: () => TableFooter,
+	Head: () => TableHead,
+	Header: () => TableHeader,
+	Root: () => TableRoot,
+	Row: () => TableRow,
+	RowLink: () => TableRowLink,
+	SortButton: () => TableSortButton
+});
+//#endregion
+export { TableBody as Body, TableCaption as Caption, TableCell as Cell, TableContainer as Container, TableFooter as Footer, TableHead as Head, TableHeader as Header, TableRoot as Root, TableRow as Row, TableRowLink as RowLink, TableSortButton as SortButton, table_parts_exports };

package/dist/table-selection/index.d.ts

@@ -0,0 +1,3 @@
+import { TableSelection, TableSelectionProps } from "./table-selection.client.js";
+import { TableSelectAll, TableSelectAllProps, TableSelectRow, TableSelectRowProps, TableSelectionLabels } from "./table-selection.js";
+export { TableSelectAll, type TableSelectAllProps, TableSelectRow, type TableSelectRowProps, TableSelection, type TableSelectionLabels, type TableSelectionProps };

package/dist/table-selection/index.js

@@ -0,0 +1,3 @@
+import { TableSelection } from "./table-selection.client.js";
+import { TableSelectAll, TableSelectRow } from "./table-selection.js";
+export { TableSelectAll, TableSelectRow, TableSelection };

package/dist/table-selection/table-selection.client.d.ts

@@ -0,0 +1,14 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement } from "react";
+//#region src/table-selection/table-selection.client.d.ts
+export interface TableSelectionProps extends Omit<ComponentPropsWithRef<"div">, "ref"> {
+  /**
+   * The selected rows' values, after every change (and once on mount when a row is already
+   * checked, for example by the browser's form restoration). For a client owner; a Server Component
+   * reads the selection from the form.
+   */
+  onSelectionChange?: (ids: string[]) => void;
+  render?: RenderProp<Record<string, never>>;
+}
+export declare function TableSelection({ onSelectionChange, render, className, ...rest }: TableSelectionProps): ReactElement;
+//#endregion

package/dist/table-selection/table-selection.client.js

@@ -0,0 +1,84 @@
+"use client";
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+import { useEffect, useRef } from "react";
+//#region src/table-selection/table-selection.client.tsx
+const ROW = "[data-slot=\"table-select-row-input\"]";
+const ALL = "[data-slot=\"table-select-all-input\"]";
+function TableSelection({ onSelectionChange, render, className, ...rest }) {
+	const root = useRef(null);
+	const report = useRef(onSelectionChange);
+	useEffect(() => {
+		report.current = onSelectionChange;
+	});
+	useEffect(() => {
+		const element = root.current;
+		if (element === null) return void 0;
+		const rows = () => [...element.querySelectorAll(ROW)];
+		let last = "";
+		let anchor;
+		let shift = false;
+		/** The select-all boxes follow the rows; the owner hears of a changed selection. */
+		const sync = () => {
+			const all = rows().filter((input) => !input.disabled);
+			const checked = all.filter((input) => input.checked);
+			for (const box of element.querySelectorAll(ALL)) {
+				box.checked = all.length > 0 && checked.length === all.length;
+				box.indeterminate = checked.length > 0 && checked.length < all.length;
+			}
+			const ids = rows().filter((input) => input.checked).map((input) => input.value);
+			const key = ids.join("\0");
+			if (key !== last) {
+				last = key;
+				report.current?.(ids);
+			}
+		};
+		const onClick = (event) => {
+			shift = event.shiftKey;
+		};
+		const onChange = (event) => {
+			const target = event.target;
+			if (!(target instanceof HTMLInputElement)) return;
+			if (target.matches(ALL)) {
+				for (const input of rows()) if (!input.disabled) input.checked = target.checked;
+				anchor = void 0;
+			} else if (target.matches(ROW)) {
+				const list = rows();
+				if (shift && anchor !== void 0 && anchor !== target && list.includes(anchor)) {
+					const [a, b] = [list.indexOf(anchor), list.indexOf(target)];
+					for (const input of list.slice(Math.min(a, b), Math.max(a, b) + 1)) if (!input.disabled) input.checked = target.checked;
+				}
+				anchor = target;
+			} else return;
+			shift = false;
+			sync();
+		};
+		const onKeyDown = (event) => {
+			if (event.key !== "Escape" || event.defaultPrevented) return;
+			const checked = rows().filter((input) => input.checked && !input.disabled);
+			if (checked.length === 0) return;
+			for (const input of checked) input.checked = false;
+			event.preventDefault();
+			event.stopPropagation();
+			anchor = void 0;
+			sync();
+		};
+		element.addEventListener("click", onClick, true);
+		element.addEventListener("change", onChange);
+		element.addEventListener("keydown", onKeyDown);
+		sync();
+		return () => {
+			element.removeEventListener("click", onClick, true);
+			element.removeEventListener("change", onChange);
+			element.removeEventListener("keydown", onKeyDown);
+		};
+	}, []);
+	return renderElement("div", render, {}, {
+		"data-slot": "table-selection",
+		ref: root,
+		...rest,
+		className: cx("nz-table-selection", className)
+	});
+}
+//#endregion
+export { TableSelection };

package/dist/table-selection/table-selection.d.ts

@@ -0,0 +1,34 @@
+import { ComponentPropsWithRef, ReactElement } from "react";
+//#region src/table-selection/table-selection.d.ts
+/** Row selection's own strings (§16.4): serialisable, English defaults. */
+export interface TableSelectionLabels {
+  /** The select-all checkbox's name. @default 'Select all rows' */
+  selectAll: string;
+}
+type CheckboxInputProps = Omit<ComponentPropsWithRef<"input">, "type" | "children" | "checked" | "defaultChecked">;
+export interface TableSelectAllProps extends CheckboxInputProps {
+  /** An `aria-label` wins over `labels.selectAll`. */
+  labels?: Partial<TableSelectionLabels>;
+}
+export interface TableSelectRowProps extends CheckboxInputProps {
+  /** The row's id: what a form receives under `name` when the row is selected. */
+  value: string;
+  /** The checkbox's name, unique per row, for example "Select order 1042". */
+  "aria-label": string;
+  /** @default 'ids' */
+  name?: string;
+  /** Selected when the page loads. @default false */
+  defaultChecked?: boolean;
+}
+/**
+ * The header's checkbox: checks or clears every row of its `TableSelection`, and shows the mixed
+ * state when some are selected. It submits nothing. Without `TableSelection` it does nothing.
+ */
+export declare function TableSelectAll({ labels, className, ...rest }: TableSelectAllProps): ReactElement;
+/**
+ * A row's checkbox: a native input that submits `value` under `name` with its form (pass `form` to
+ * reach a form outside the table). The row shows `bg/brand-subtle` while it is checked, through CSS.
+ */
+export declare function TableSelectRow({ name, className, ...rest }: TableSelectRowProps): ReactElement;
+//#endregion
+export {};

package/dist/table-selection/table-selection.js

@@ -0,0 +1,50 @@
+import { cx } from "../_internal/cx.js";
+import { CheckGlyph, MinusGlyph } from "../_internal/glyphs.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/table-selection/table-selection.tsx
+/**
+* The header's checkbox: checks or clears every row of its `TableSelection`, and shows the mixed
+* state when some are selected. It submits nothing. Without `TableSelection` it does nothing.
+*/
+function TableSelectAll({ labels, className, ...rest }) {
+	return /* @__PURE__ */ jsxs("label", {
+		"data-slot": "table-select-all",
+		className: cx("nz-table-select-all nz-checkbox nz-hit-target", className),
+		children: [/* @__PURE__ */ jsx("input", {
+			"aria-label": labels?.selectAll ?? "Select all rows",
+			...rest,
+			type: "checkbox",
+			className: "nz-table-select-all-input nz-checkbox-input",
+			"data-slot": "table-select-all-input"
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "nz-table-select-all-indicator nz-checkbox-indicator",
+			"data-slot": "table-select-all-indicator",
+			"aria-hidden": "true",
+			children: [/* @__PURE__ */ jsx(CheckGlyph, {}), /* @__PURE__ */ jsx(MinusGlyph, {})]
+		})]
+	});
+}
+/**
+* A row's checkbox: a native input that submits `value` under `name` with its form (pass `form` to
+* reach a form outside the table). The row shows `bg/brand-subtle` while it is checked, through CSS.
+*/
+function TableSelectRow({ name = "ids", className, ...rest }) {
+	return /* @__PURE__ */ jsxs("label", {
+		"data-slot": "table-select-row",
+		className: cx("nz-table-select-row nz-checkbox nz-hit-target", className),
+		children: [/* @__PURE__ */ jsx("input", {
+			name,
+			...rest,
+			type: "checkbox",
+			className: "nz-table-select-row-input nz-checkbox-input",
+			"data-slot": "table-select-row-input"
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "nz-table-select-row-indicator nz-checkbox-indicator",
+			"data-slot": "table-select-row-indicator",
+			"aria-hidden": "true",
+			children: [/* @__PURE__ */ jsx(CheckGlyph, {}), /* @__PURE__ */ jsx(MinusGlyph, {})]
+		})]
+	});
+}
+//#endregion
+export { TableSelectAll, TableSelectRow };

package/dist/text/text.d.ts

@@ -3,7 +3,15 @@ import { ComponentPropsWithRef, ReactElement } from "react";
 //#region src/text/text.d.ts
 /** The Figma text styles as lowercase names (`Nizivo/Label/M` → `label-m`), plus the 12 px proposals. */
 export type TextVariant = "display-l" | "display-m" | "heading-h1" | "heading-h2" | "heading-h3" | "heading-h4" | "body-l" | "body-m" | "body-m-strong" | "body-s" | "label-l" | "label-m" | "label-m-strong" | "label-s" | "numeric-display" | "numeric-kpi" | "numeric-l" | "numeric-m" | "mono-m" | "mono-m-strong";
-/** The `text/*` colour tokens. `accent` and `on-critical` are code-owned proposals (§15.3). */
+/**
+ * The `text/*` colour tokens. `accent` paints `--nz-text-brand`, since Figma has no accent text for page
+ * surfaces (M38; `--nz-text-inverse-accent` is for `bg/inverse`).
+ *
+ * Deprecated: `'accent'`, which looks exactly like `'brand'`; use `'brand'`. It keeps working; its
+ * removal is deferred to 1.0, or to when Figma adds an accent text for page surfaces (M42).
+ * TypeScript cannot deprecate one member of a union type, so this note is the marker. Card's and
+ * KpiTile's `tone="accent"`, a surface, are not deprecated.
+ */
 export type TextTone = "primary" | "secondary" | "tertiary" | "disabled" | "inverse" | "on-brand" | "on-accent" | "on-critical" | "brand" | "accent" | "success" | "warning" | "critical" | "info";
 export interface TextState {
   variant: TextVariant;
@@ -12,7 +20,10 @@ export interface TextState {
 export interface TextProps extends ComponentPropsWithRef<"p"> {
   /** The text style. 12 px exists only as `body-s` and `label-s` (§15.1). @default 'body-m' */
   variant?: TextVariant;
-  /** A `text/*` colour. Absent, the colour is inherited from the surface. */
+  /**
+   * A `text/*` colour. Absent, the colour is inherited from the surface. Deprecated value:
+   * `'accent'`, which paints `--nz-text-brand`; use `'brand'` (M42; removal deferred to 1.0).
+   */
   tone?: TextTone;
   /** Another element or component, for example `render={<span />}` or `render={<label htmlFor="sku" />}`. */
   render?: RenderProp<TextState>;

package/dist/toast/index.d.ts

@@ -0,0 +1,4 @@
+import { Politeness, ToastAction, ToastOptions, ToastTone, ToasterLabels, ToasterProps } from "./toast.contract.js";
+import { Toaster } from "./toaster.client.js";
+import { announce, toast } from "./store.js";
+export { type Politeness, type ToastAction, type ToastOptions, type ToastTone, Toaster, type ToasterLabels, type ToasterProps, announce, toast };

package/dist/toast/index.js

@@ -0,0 +1,3 @@
+import { announce, toast } from "./store.js";
+import { Toaster } from "./toaster.client.js";
+export { Toaster, announce, toast };

package/dist/toast/seam.d.ts

@@ -0,0 +1,2 @@
+import "./toast.contract.js";
+import "react";

package/dist/toast/store.d.ts

@@ -0,0 +1,19 @@
+import "./seam.js";
+import { Politeness, ToastOptions } from "./toast.contract.js";
+//#region src/toast/store.d.ts
+/**
+ * Shows a toast and returns its id. A toast with an action, or a critical one, stays until it is
+ * dismissed; any other leaves after `timeout` (5 s). Every toast is spoken once through the Toaster's
+ * announcer: polite, or assertive when critical. Render one `<Toaster />` in the app's root layout.
+ */
+export declare const toast: ((message: string, options?: ToastOptions) => string) & {
+  /** Removes the toast with this id, or every toast. */
+  dismiss: (id?: string) => void;
+};
+/**
+ * Speaks `message` through the Toaster's announcer, a live region that is on the page before any
+ * message and stays reachable above a modal. For status a sighted user sees some other way: "Saved",
+ * "3 results". Needs a mounted `<Toaster />`.
+ */
+export declare function announce(message: string, politeness?: Politeness): void;
+//#endregion

package/dist/toast/store.js

@@ -0,0 +1,136 @@
+//#region src/toast/store.ts
+const TIMEOUT = 5e3;
+let entries = [];
+let snapshot = [];
+const listeners = /* @__PURE__ */ new Set();
+/** Why the clock is stopped: the region (`region`: hover, focus within), the page (`hidden`). */
+const pauses = /* @__PURE__ */ new Set();
+/** Ids a Toaster shows; a waiting toast's clock does not run. */
+let shown = /* @__PURE__ */ new Set();
+let hosts = 0;
+let next = 0;
+let speaker;
+function emit() {
+	snapshot = entries.map((entry) => entry.record);
+	for (const listener of listeners) listener();
+}
+function stop(entry) {
+	if (entry.handle === void 0) return;
+	clearTimeout(entry.handle);
+	entry.handle = void 0;
+	if (entry.remaining !== null) entry.remaining -= Date.now() - entry.started;
+}
+/** Runs each clock that may run: a shown toast that leaves on its own, a Toaster mounted, no pause. */
+function sync() {
+	const running = hosts > 0 && pauses.size === 0;
+	for (const entry of entries) if (!running || !shown.has(entry.record.id) || entry.remaining === null) stop(entry);
+	else if (entry.handle === void 0) {
+		const { id } = entry.record;
+		entry.started = Date.now();
+		entry.handle = setTimeout(() => dismiss(id), Math.max(0, entry.remaining));
+	}
+}
+/** The text a toast speaks: its message, then its description. */
+function spoken(record) {
+	if (record.description === void 0) return record.message;
+	const separator = /[.!?…:]$/.test(record.message) ? " " : ". ";
+	return record.message + separator + record.description;
+}
+function add(message, options = {}) {
+	const tone = options.tone ?? "neutral";
+	const timeout = options.action !== void 0 || tone === "critical" ? null : options.timeout ?? TIMEOUT;
+	const id = options.id ?? `nz-toast-${next += 1}`;
+	const record = {
+		id,
+		message,
+		tone,
+		description: options.description,
+		action: options.action,
+		timeout
+	};
+	const entry = {
+		record,
+		onClose: options.onClose,
+		remaining: timeout,
+		started: 0,
+		handle: void 0
+	};
+	const at = entries.findIndex((existing) => existing.record.id === id);
+	if (at === -1) entries = [...entries, entry];
+	else {
+		const previous = entries[at];
+		if (previous !== void 0) stop(previous);
+		entries = entries.with(at, entry);
+	}
+	emit();
+	sync();
+	announce(spoken(record), tone === "critical" ? "assertive" : "polite");
+	return id;
+}
+/** Removes one toast, or every toast with no id. */
+function dismiss(id) {
+	const leaving = entries.filter((entry) => id === void 0 || entry.record.id === id);
+	if (leaving.length === 0) return;
+	for (const entry of leaving) stop(entry);
+	entries = entries.filter((entry) => !leaving.includes(entry));
+	emit();
+	for (const entry of leaving) entry.onClose?.();
+}
+/**
+* Shows a toast and returns its id. A toast with an action, or a critical one, stays until it is
+* dismissed; any other leaves after `timeout` (5 s). Every toast is spoken once through the Toaster's
+* announcer: polite, or assertive when critical. Render one `<Toaster />` in the app's root layout.
+*/
+const toast = Object.assign(add, { dismiss });
+/**
+* Speaks `message` through the Toaster's announcer, a live region that is on the page before any
+* message and stays reachable above a modal. For status a sighted user sees some other way: "Saved",
+* "3 results". Needs a mounted `<Toaster />`.
+*/
+function announce(message, politeness = "polite") {
+	if (speaker !== void 0) speaker(message, politeness);
+	else if (process.env.NODE_ENV !== "production") console.warn(`Nizivo: announce("${message}") ran with no <Toaster /> mounted, so nothing spoke it.`);
+}
+function subscribe(listener) {
+	listeners.add(listener);
+	return () => listeners.delete(listener);
+}
+function getSnapshot() {
+	return snapshot;
+}
+const EMPTY = [];
+/** The server renders no toast: the queue is the browser's. */
+function getServerSnapshot() {
+	return EMPTY;
+}
+/** A Toaster mounted; clocks run while one is. Returns its unmount. */
+function attach() {
+	hosts += 1;
+	sync();
+	return () => {
+		hosts -= 1;
+		sync();
+	};
+}
+/** The ids the Toaster shows: the newest `limit`. */
+function show(ids) {
+	shown = new Set(ids);
+	sync();
+}
+function pause(reason) {
+	pauses.add(reason);
+	sync();
+}
+function resume(reason) {
+	pauses.delete(reason);
+	sync();
+}
+/** The announcer registers here while mounted. Returns its unregister. */
+function speakThrough(speak) {
+	speaker = speak;
+	return () => {
+		if (speaker === speak) speaker = void 0;
+	};
+}
+//#endregion
+export { announce, attach, getServerSnapshot, getSnapshot, pause, resume, show, speakThrough, subscribe, toast };