@nizivo/react 0.0.0-stage → 0.2.0

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/tabs/index.d.ts

@@ -0,0 +1,4 @@
+import { TabsActivationMode, TabsListProps, TabsListState, TabsPanelProps, TabsPanelState, TabsRootProps, TabsRootState, TabsTabProps, TabsTabState, TabsValueReason } from "./tabs.contract.js";
+import { TabsList, TabsPanel, TabsRoot, TabsTab } from "./tabs.client.js";
+import { tabs_parts_d_exports } from "./tabs.parts.js";
+export { tabs_parts_d_exports as Tabs, type TabsActivationMode, TabsList, type TabsListProps, type TabsListState, TabsPanel, type TabsPanelProps, type TabsPanelState, TabsRoot, type TabsRootProps, type TabsRootState, TabsTab, type TabsTabProps, type TabsTabState, type TabsValueReason };

package/dist/tabs/index.js

@@ -0,0 +1,3 @@
+import { TabsList, TabsPanel, TabsRoot, TabsTab } from "./tabs.client.js";
+import { tabs_parts_exports } from "./tabs.parts.js";
+export { tabs_parts_exports as Tabs, TabsList, TabsPanel, TabsRoot, TabsTab };

package/dist/tabs/tabs.client.d.ts

@@ -0,0 +1,8 @@
+import { TabsListProps, TabsPanelProps, TabsRootProps, TabsTabProps } from "./tabs.contract.js";
+import { JSX } from "react";
+//#region src/tabs/tabs.client.d.ts
+export declare function TabsRoot({ activationMode, className, render, ...rest }: TabsRootProps): JSX.Element;
+export declare function TabsList({ className, render, ...rest }: TabsListProps): JSX.Element;
+export declare function TabsTab({ icon, count, className, render, children, ...rest }: TabsTabProps): JSX.Element;
+export declare function TabsPanel({ keepMounted, className, render, ...rest }: TabsPanelProps): JSX.Element;
+//#endregion

package/dist/tabs/tabs.client.js

@@ -0,0 +1,68 @@
+"use client";
+import { cx } from "../_internal/cx.js";
+import { toRenderFn } from "../contracts/render.js";
+import { List, Panel, Root, Tab } from "../_engines/react-aria/tabs.client.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/tabs/tabs.client.tsx
+function TabsRoot({ activationMode = "automatic", className, render, ...rest }) {
+	return /* @__PURE__ */ jsx(Root, {
+		...rest,
+		activationMode,
+		className: cx("nz-tabs", className),
+		"data-slot": "tabs",
+		render: toRenderFn(render, "div")
+	});
+}
+function TabsList({ className, render, ...rest }) {
+	return /* @__PURE__ */ jsx(List, {
+		...rest,
+		className: cx("nz-tabs-list", className),
+		"data-slot": "tabs-list",
+		render: toRenderFn(render, "div")
+	});
+}
+function TabsTab({ icon, count, className, render, children, ...rest }) {
+	return /* @__PURE__ */ jsxs(Tab, {
+		...rest,
+		className: cx("nz-tabs-tab", className),
+		"data-slot": "tabs-tab",
+		"data-focus-inset": "",
+		render: toRenderFn(render, "div"),
+		children: [
+			icon != null && /* @__PURE__ */ jsx("span", {
+				className: "nz-tabs-icon",
+				"data-slot": "tabs-icon",
+				"aria-hidden": "true",
+				children: icon
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "nz-tabs-label",
+				"data-slot": "tabs-label",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "nz-tabs-text",
+					children
+				}), /* @__PURE__ */ jsx("span", {
+					className: "nz-tabs-sizer",
+					"aria-hidden": "true",
+					children
+				})]
+			}),
+			count != null && /* @__PURE__ */ jsx("span", {
+				className: "nz-tabs-count",
+				"data-slot": "tabs-count",
+				children: count
+			})
+		]
+	});
+}
+function TabsPanel({ keepMounted = false, className, render, ...rest }) {
+	return /* @__PURE__ */ jsx(Panel, {
+		...rest,
+		keepMounted,
+		className: cx("nz-tabs-panel", className),
+		"data-slot": "tabs-panel",
+		render: toRenderFn(render, "div")
+	});
+}
+//#endregion
+export { TabsList, TabsPanel, TabsRoot, TabsTab };

package/dist/tabs/tabs.contract.d.ts

@@ -0,0 +1,89 @@
+import { RenderProp } from "../contracts/render.js";
+import { ChangeDetails } from "../contracts/details.js";
+import "../_internal/engine-part.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/tabs/tabs.contract.d.ts
+/**
+ * Why the selected tab changed. React Aria reports no cause, so with it `details.reason` is always
+ * `'unknown'` (§9.3 rule 2); the names are the causes an engine that reports one would use.
+ */
+export type TabsValueReason = "tab-press" | "keyboard";
+/**
+ * When a tab is selected (WAI-ARIA APG tabs).
+ * - `automatic`: an arrow key moves focus and selects the tab it lands on (the APG default, for
+ *   panels that show without a noticeable delay);
+ * - `manual`: arrow keys only move focus; Enter or Space selects (for panels that are slow to show).
+ */
+export type TabsActivationMode = "automatic" | "manual";
+export interface TabsRootState {
+  disabled: boolean;
+}
+export interface TabsListState {
+  disabled: boolean;
+}
+export interface TabsTabState {
+  selected: boolean;
+  disabled: boolean;
+  focusVisible: boolean;
+}
+export interface TabsPanelState {
+  /** The panel's tab is selected. False only on a `keepMounted` panel whose tab is not. */
+  selected: boolean;
+  focusVisible: boolean;
+}
+export interface TabsRootProps extends Omit<ComponentPropsWithRef<"div">, "children" | "defaultValue" | "onChange" | "id" | "dir"> {
+  /** Controlled: the selected tab's `value`. */
+  value?: string;
+  /** The tab selected at first (uncontrolled). Defaults to the first tab that is not disabled. */
+  defaultValue?: string;
+  /** Called when the user selects a tab. `details.reason` is `'unknown'` with React Aria. */
+  onValueChange?: (value: string, details: ChangeDetails<TabsValueReason>) => void;
+  /** @default 'automatic' */
+  activationMode?: TabsActivationMode;
+  /** Disables every tab. The selected panel still shows. */
+  disabled?: boolean;
+  /**
+   * The strip's reading direction (M26), rendered as the root's `dir` attribute: the layout and the
+   * arrow keys follow it (in `rtl`, ArrowLeft moves to the next tab). Unset, nothing is rendered and
+   * the arrows follow the direction of the `NizivoConfig` scope's `locale`. Nothing reads the DOM, so
+   * a `dir` attribute set higher up does not turn the arrows: a strip whose direction differs from
+   * its locale's sets it here. `'auto'` is not accepted for the same reason.
+   */
+  dir?: "ltr" | "rtl";
+  /** Must render a `<div>`. */
+  render?: RenderProp<TabsRootState>;
+  /** One `Tabs.List` and its `Tabs.Panel`s. */
+  children: ReactNode;
+}
+export interface TabsListProps extends Omit<ComponentPropsWithRef<"div">, "children" | "id"> {
+  /** Must render a `<div>`. */
+  render?: RenderProp<TabsListState>;
+  /** `Tabs.Tab` elements. */
+  children: ReactNode;
+}
+export interface TabsTabProps extends Omit<ComponentPropsWithRef<"div">, "children" | "id" | "onClick"> {
+  /** Pairs the tab with the `Tabs.Panel` of the same `value`. */
+  value: string;
+  disabled?: boolean;
+  /** A decorative glyph before the label (16 px). */
+  icon?: ReactNode;
+  /** A count after the label, such as the number of orders in a status. */
+  count?: ReactNode;
+  /** Must render a `<div>`. */
+  render?: RenderProp<TabsTabState>;
+  children: ReactNode;
+}
+export interface TabsPanelProps extends Omit<ComponentPropsWithRef<"div">, "children" | "id"> {
+  /** The `value` of the tab that shows this panel. */
+  value: string;
+  /**
+   * Keeps the panel mounted, `hidden`, while its tab is not selected, so its state (a scroll
+   * position, a form draft) survives switching. Without it only the selected panel is rendered, on
+   * the server too. @default false
+   */
+  keepMounted?: boolean;
+  /** Must render a `<div>`. */
+  render?: RenderProp<TabsPanelState>;
+  children?: ReactNode;
+}
+//#endregion

package/dist/tabs/tabs.parts.d.ts

@@ -0,0 +1,6 @@
+import { TabsList, TabsPanel, TabsRoot, TabsTab } from "./tabs.client.js";
+declare namespace tabs_parts_d_exports {
+  export { TabsList as List, TabsPanel as Panel, TabsRoot as Root, TabsTab as Tab };
+}
+//#endregion
+export { TabsList as List, TabsPanel as Panel, TabsRoot as Root, TabsTab as Tab, tabs_parts_d_exports };

package/dist/tabs/tabs.parts.js

@@ -0,0 +1,11 @@
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { TabsList, TabsPanel, TabsRoot, TabsTab } from "./tabs.client.js";
+//#region src/tabs/tabs.parts.ts
+var tabs_parts_exports = /* @__PURE__ */ __exportAll({
+	List: () => TabsList,
+	Panel: () => TabsPanel,
+	Root: () => TabsRoot,
+	Tab: () => TabsTab
+});
+//#endregion
+export { TabsList as List, TabsPanel as Panel, TabsRoot as Root, TabsTab as Tab, tabs_parts_exports };

package/dist/text/index.d.ts

@@ -0,0 +1,2 @@
+import { Text, TextProps, TextState, TextTone, TextVariant } from "./text.js";
+export { Text, type TextProps, type TextState, type TextTone, type TextVariant };

package/dist/text/index.js

@@ -0,0 +1 @@
+export { Text } from "./text.js";

package/dist/text/text.d.ts

@@ -0,0 +1,32 @@
+import { RenderProp } from "../contracts/render.js";
+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` 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;
+  tone: TextTone | undefined;
+}
+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. 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>;
+}
+export declare function Text({ variant, tone, render, className, ...rest }: TextProps): ReactElement;
+//#endregion

package/dist/text/text.js

@@ -0,0 +1,17 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+//#region src/text/text.tsx
+function Text({ variant = "body-m", tone, render, className, ...rest }) {
+	return renderElement("p", render, {
+		variant,
+		tone
+	}, {
+		"data-slot": "text",
+		"data-variant": variant,
+		"data-tone": tone,
+		...rest,
+		className: cx("nz-text", className)
+	});
+}
+//#endregion
+export { Text };

package/dist/textarea/index.d.ts

@@ -0,0 +1,2 @@
+import { Textarea, TextareaProps } from "./textarea.client.js";
+export { Textarea, type TextareaProps };

package/dist/textarea/index.js

@@ -0,0 +1 @@
+export { Textarea } from "./textarea.client.js";

package/dist/textarea/textarea.client.d.ts

@@ -0,0 +1,18 @@
+import { ComponentPropsWithRef, JSX } from "react";
+//#region src/textarea/textarea.client.d.ts
+export interface TextareaProps extends Omit<ComponentPropsWithRef<"textarea">, "children"> {
+  /**
+   * Visible lines of text. The height is the larger of these rows and 112 px (Figma 7367:316; the
+   * `--nz-textarea-min-block-size` hook lowers it), so up to 4 rows of Body/M sit at 112 px. Where
+   * the textarea grows with its content, that is also its minimum (1 to 10; a larger value keeps a
+   * 3-line minimum there). @default 3
+   */
+  rows?: number;
+  /**
+   * An error message is presented for this textarea (§8.3). Inside a Field, the Field sets it; an
+   * explicit value here wins.
+   */
+  invalid?: boolean;
+}
+export declare function Textarea({ rows, id, name, required, disabled, readOnly, invalid, "aria-invalid": ariaInvalid, "aria-describedby": describedBy, className, ...rest }: TextareaProps): JSX.Element;
+//#endregion

package/dist/textarea/textarea.client.js

@@ -0,0 +1,31 @@
+"use client";
+import { cx } from "../_internal/cx.js";
+import { mergeProps } from "../contracts/merge-props.js";
+import { stateAttrs } from "../contracts/state.js";
+import { useFieldControl } from "../field/field-scope.client.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/textarea/textarea.client.tsx
+function Textarea({ rows = 3, id, name, required, disabled, readOnly, invalid, "aria-invalid": ariaInvalid, "aria-describedby": describedBy, className, ...rest }) {
+	const field = useFieldControl({
+		id,
+		name,
+		required,
+		disabled,
+		readOnly,
+		invalid: invalid ?? (ariaInvalid === true || ariaInvalid === "true" ? true : void 0),
+		"aria-describedby": describedBy
+	});
+	return /* @__PURE__ */ jsx("textarea", {
+		...mergeProps(field.controlProps, rest),
+		...stateAttrs({
+			invalid: field.invalid,
+			disabled: field.disabled,
+			readOnly: field.readOnly
+		}),
+		rows,
+		className: cx("nz-textarea", className),
+		"data-slot": "textarea"
+	});
+}
+//#endregion
+export { Textarea };

package/dist/theme-script/index.d.ts

@@ -0,0 +1,2 @@
+import { ThemeScript, ThemeScriptProps, themeScript } from "./theme-script.js";
+export { ThemeScript, type ThemeScriptProps, themeScript };

package/dist/theme-script/index.js

@@ -0,0 +1 @@
+export { ThemeScript, themeScript } from "./theme-script.js";

package/dist/theme-script/theme-script.d.ts

@@ -0,0 +1,43 @@
+import { ReactElement } from "react";
+//#region src/theme-script/theme-script.d.ts
+/**
+ * The script `ThemeScript` renders, for frameworks that inline it themselves (Astro:
+ * `<script is:inline set:html={themeScript} />`; Vite: a `transformIndexHtml` tag) or that allow it
+ * by hash under a strict CSP. It runs in `<head>`, before `<body>` exists, and sets two attributes on
+ * `<html>`:
+ *
+ * - **`data-nz-theme`, the reader's saved theme.** It reads `localStorage` key `nz-theme`; when the
+ *   value is `"light"`, `"dark"` or `"system"`, it sets `data-nz-theme` to that value, replacing what
+ *   the server rendered (the server's value is the app's default; the stored one is the reader's
+ *   choice). `"system"` is set as is, not resolved: CSS follows the operating system from it, live,
+ *   with no listener. With nothing stored, any other value, or storage blocked (a sandboxed frame,
+ *   disabled site data), the attribute is left as the server rendered it. A theme switch saves the
+ *   choice with `localStorage.setItem('nz-theme', value)` and sets the attribute itself.
+ * - **`data-nz-platform`**: `"apple"` when the platform string matches `/mac|iphone|ipad|ipod/i`,
+ *   else `"other"`. The platform string is `navigator.userAgentData.platform` where the browser has
+ *   it (Chromium: `"macOS"`, `"Windows"`, …), else `navigator.platform` (`"MacIntel"`, `"iPhone"`,
+ *   `"iPad"`; iPadOS reports `"MacIntel"`, which is still Apple). It never reads the user-agent
+ *   string. A value already on `<html>` (set by the server, or by a test) is kept. Kbd reads the
+ *   attribute to show `⌘K` or `Ctrl+K`.
+ *
+ * Each half runs in its own `try`, so blocked storage never stops the platform half, and the script
+ * never throws into the page.
+ *
+ * Under a strict CSP, allow it by hash: `script-src 'sha256-nA1HUQWDdDUFqqoxWbjzCzcYSjzWLEe0pwDdRCMGqOw='`.
+ * The hash changes only when the script does, and a change is called out in the changelog.
+ */
+export declare const themeScript: string;
+export interface ThemeScriptProps {
+  /** The CSP nonce for the inline script (`script-src 'nonce-…'`). Not needed with a hash allowlist. */
+  nonce?: string;
+}
+/**
+ * Sets page-level attributes before first paint, so nothing changes once the page has painted: the
+ * reader's saved theme (`data-nz-theme` from `localStorage` key `nz-theme`: `light`, `dark` or
+ * `system`) and `data-nz-platform` (`apple` or `other`). The rules are on `themeScript`. Render it in
+ * `<head>` (`<head><ThemeScript nonce={nonce} /></head>` in a root layout), put the app's default
+ * theme on `<html>` (`data-nz-theme="system"`, or none for light), and put `suppressHydrationWarning`
+ * on `<html>`, whose attributes the script changes.
+ */
+export declare function ThemeScript({ nonce }: ThemeScriptProps): ReactElement;
+//#endregion

package/dist/theme-script/theme-script.js

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/theme-script/theme-script.tsx
+/**
+* The script `ThemeScript` renders, for frameworks that inline it themselves (Astro:
+* `<script is:inline set:html={themeScript} />`; Vite: a `transformIndexHtml` tag) or that allow it
+* by hash under a strict CSP. It runs in `<head>`, before `<body>` exists, and sets two attributes on
+* `<html>`:
+*
+* - **`data-nz-theme`, the reader's saved theme.** It reads `localStorage` key `nz-theme`; when the
+*   value is `"light"`, `"dark"` or `"system"`, it sets `data-nz-theme` to that value, replacing what
+*   the server rendered (the server's value is the app's default; the stored one is the reader's
+*   choice). `"system"` is set as is, not resolved: CSS follows the operating system from it, live,
+*   with no listener. With nothing stored, any other value, or storage blocked (a sandboxed frame,
+*   disabled site data), the attribute is left as the server rendered it. A theme switch saves the
+*   choice with `localStorage.setItem('nz-theme', value)` and sets the attribute itself.
+* - **`data-nz-platform`**: `"apple"` when the platform string matches `/mac|iphone|ipad|ipod/i`,
+*   else `"other"`. The platform string is `navigator.userAgentData.platform` where the browser has
+*   it (Chromium: `"macOS"`, `"Windows"`, …), else `navigator.platform` (`"MacIntel"`, `"iPhone"`,
+*   `"iPad"`; iPadOS reports `"MacIntel"`, which is still Apple). It never reads the user-agent
+*   string. A value already on `<html>` (set by the server, or by a test) is kept. Kbd reads the
+*   attribute to show `⌘K` or `Ctrl+K`.
+*
+* Each half runs in its own `try`, so blocked storage never stops the platform half, and the script
+* never throws into the page.
+*
+* Under a strict CSP, allow it by hash: `script-src 'sha256-nA1HUQWDdDUFqqoxWbjzCzcYSjzWLEe0pwDdRCMGqOw='`.
+* The hash changes only when the script does, and a change is called out in the changelog.
+*/
+const themeScript = "(function(d){try{var t=localStorage.getItem(\"nz-theme\");if(/^(light|dark|system)$/.test(t))d.setAttribute(\"data-nz-theme\",t)}catch(e){}try{if(!d.hasAttribute(\"data-nz-platform\")){var n=navigator,p=(n.userAgentData&&n.userAgentData.platform)||n.platform||\"\";d.setAttribute(\"data-nz-platform\",/mac|iphone|ipad|ipod/i.test(p)?\"apple\":\"other\")}}catch(e){}})(document.documentElement)";
+/**
+* Sets page-level attributes before first paint, so nothing changes once the page has painted: the
+* reader's saved theme (`data-nz-theme` from `localStorage` key `nz-theme`: `light`, `dark` or
+* `system`) and `data-nz-platform` (`apple` or `other`). The rules are on `themeScript`. Render it in
+* `<head>` (`<head><ThemeScript nonce={nonce} /></head>` in a root layout), put the app's default
+* theme on `<html>` (`data-nz-theme="system"`, or none for light), and put `suppressHydrationWarning`
+* on `<html>`, whose attributes the script changes.
+*/
+function ThemeScript({ nonce }) {
+	return /* @__PURE__ */ jsx("script", {
+		suppressHydrationWarning: true,
+		...nonce === void 0 ? {} : { nonce },
+		dangerouslySetInnerHTML: { __html: themeScript }
+	});
+}
+//#endregion
+export { ThemeScript, themeScript };

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 };