@funstack/ui 0.1.0-alpha.1 → 0.1.0-alpha.3

package/dist/toast/toast-root.d.mts

@@ -0,0 +1,43 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { ToastItem, ToastPriority } from "./toast.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/toast/toast-root.d.ts
+export interface ToastRootState {
+  readonly toast: ToastItem;
+  /** `toast.pending`: its promise is unsettled or its Action runs. */
+  readonly pending: boolean;
+  /** `toast.ending`: closed, kept for its exit animation. */
+  readonly ending: boolean;
+  readonly type: string | undefined;
+  readonly priority: ToastPriority;
+}
+export interface ToastRootProps extends Omit<ComponentPropsWithRef<"div">, "role" | "className" | "style" | "children" | "onKeyDown"> {
+  /** The toast to render: an item of the Viewport's `state.toasts`. */
+  toast: ToastItem;
+  children?: StateValue<ReactNode, ToastRootState>;
+  className?: StateValue<string | undefined, ToastRootState>;
+  style?: StateValue<CSSProperties | undefined, ToastRootState>;
+  render?: RenderProp<ComponentPropsWithRef<"div">, ToastRootState>;
+  /**
+   * Rendered by the Root's own Suspense guard while `children` suspend, in place of the
+   * invisible default. The toast's timer and announcement wait for the reveal either way.
+   * Parts inside it (a visually hidden `<Toast.Title>` giving the toast a name) gate nothing.
+   */
+  fallback?: ReactNode;
+}
+/**
+ * One toast: a focusable `div[role=dialog]` (`alertdialog` for `priority: "high"`) named by its
+ * Title and described by its Description. Escape dismisses it, ArrowDown / ArrowUp move to the
+ * next / previous toast. Its children render inside a Suspense guard whose fallback is the
+ * `fallback` prop (invisible by default), so a toast whose content suspends does not pull the whole Viewport into a boundary above it.
+ * When the toast closes it stays with `data-ending` (and `inert`) until its exit animations end.
+ *
+ * Owned keys (conventions 1.2): `role`, `tabIndex`, `aria-labelledby`, `aria-describedby`,
+ * `inert`, `data-type`, `data-pending`, `data-ending`, `onKeyDown`.
+ */
+export declare function ToastRoot({ toast: item, children, className, style, render, fallback, ...rest }: ToastRootProps): import("react").JSX.Element;
+export declare namespace ToastRoot {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=toast-root.d.mts.map

package/dist/toast/toast-root.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-root.d.mts","names":[],"sources":["../../src/toast/toast-root.tsx"],"mappings":";;;;iBAaiB;WACN,OAAO;;WAEP;;WAEA;WACA;WACA,UAAU;;iBAGJ,uBAAuB,KACtC;;EAIA,OAAO;EACP,WAAW,WAAW,WAAW;EACjC,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,SAAS,WAAW,8BAA8B;;;;;;EAMlD,WAAW;;;;;;;;;;;;wBA2BG,YACd,OAAO,MACP,UACA,WACA,OACA,QACA,aACG,QACF,iCAAc,IAAA;yBARD"}

package/dist/toast/toast-root.mjs

@@ -0,0 +1,204 @@
+"use client";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { useLatest } from "../internal/use-latest.mjs";
+import { resolveStateValue, useRender } from "../internal/use-render.mjs";
+import { exitAnimations } from "../internal/use-exit-animation.mjs";
+import { ToastRootContext, useToastRootContext, useToastViewportContext } from "./toast-context.mjs";
+import { Suspense, useCallback, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/toast/toast-root.tsx
+/**
+* The Suspense guard's fallback: renders the Root's `fallback` (nothing by default) and tells
+* the Root its content is suspended, so the timer and the announcement wait for the reveal
+* (design 3.5, 21).
+*/
+function SuspenseGuard({ children }) {
+	const { setSuspended } = useToastRootContext("Toast.Root");
+	useLayoutEffect(() => {
+		setSuspended(true);
+		return () => setSuspended(false);
+	}, [setSuspended]);
+	return children;
+}
+/**
+* One toast: a focusable `div[role=dialog]` (`alertdialog` for `priority: "high"`) named by its
+* Title and described by its Description. Escape dismisses it, ArrowDown / ArrowUp move to the
+* next / previous toast. Its children render inside a Suspense guard whose fallback is the
+* `fallback` prop (invisible by default), so a toast whose content suspends does not pull the whole Viewport into a boundary above it.
+* When the toast closes it stays with `data-ending` (and `inert`) until its exit animations end.
+*
+* Owned keys (conventions 1.2): `role`, `tabIndex`, `aria-labelledby`, `aria-describedby`,
+* `inert`, `data-type`, `data-pending`, `data-ending`, `onKeyDown`.
+*/
+function ToastRoot({ toast: item, children, className, style, render, fallback = null, ...rest }) {
+	const viewport = useToastViewportContext("Toast.Root");
+	const id = item.id;
+	const baseId = useId();
+	const ids = useMemo(() => ({
+		title: `${baseId}title`,
+		description: `${baseId}description`
+	}), [baseId]);
+	const elementRef = useRef(null);
+	const titleRef = useRef(null);
+	const descriptionRef = useRef(null);
+	const pendingTokens = useRef(/* @__PURE__ */ new Set());
+	const [actionPending, setActionPendingState] = useState(false);
+	const suspendedRef = useRef(false);
+	const [suspended, setSuspendedState] = useState(false);
+	const idRef = useLatest(id);
+	const announcedOnce = useRef(false);
+	const revealQueued = useRef(false);
+	const setActionPending = useCallback((token, pending) => {
+		const tokens = pendingTokens.current;
+		if (pending) tokens.add(token);
+		else tokens.delete(token);
+		const any = tokens.size > 0;
+		setActionPendingState(any);
+		viewport.setActionPending(idRef.current, any);
+	}, [viewport, idRef]);
+	const setSuspended = useCallback((value) => {
+		suspendedRef.current = value;
+		setSuspendedState(value);
+		viewport.setSuspended(idRef.current, value);
+	}, [viewport, idRef]);
+	const close = useCallback((reason, event) => viewport.close([idRef.current], reason, event), [viewport, idRef]);
+	const registerTitle = useCallback((element) => {
+		titleRef.current = element;
+	}, []);
+	const registerDescription = useCallback((element) => {
+		descriptionRef.current = element;
+	}, []);
+	const pending = item.pending || actionPending;
+	const priority = item.priority ?? "normal";
+	const announceNow = () => {
+		if (item.ending || suspendedRef.current) return;
+		const resolver = item.announce ?? viewport.announcer();
+		let text;
+		if (resolver !== void 0) text = resolver(item);
+		else text = [titleRef.current?.textContent, descriptionRef.current?.textContent].map((t) => (t ?? "").trim()).filter((t) => t !== "").join(" ");
+		viewport.announce(item.id, text, priority);
+	};
+	const announceRef = useLatest(announceNow);
+	const contentCommitted = useCallback(() => {
+		if (!announcedOnce.current || revealQueued.current) return;
+		revealQueued.current = true;
+		queueMicrotask(() => {
+			revealQueued.current = false;
+			announceRef.current();
+		});
+	}, [announceRef]);
+	const state = useMemo(() => ({
+		toast: item,
+		pending,
+		ending: item.ending,
+		type: item.type,
+		priority
+	}), [
+		item,
+		pending,
+		priority
+	]);
+	const context = useMemo(() => ({
+		toast: item,
+		ids,
+		state,
+		registerTitle,
+		registerDescription,
+		contentCommitted,
+		setActionPending,
+		setSuspended,
+		close
+	}), [
+		item,
+		ids,
+		state,
+		registerTitle,
+		registerDescription,
+		contentCommitted,
+		setActionPending,
+		setSuspended,
+		close
+	]);
+	const rootRef = useCallback((element) => {
+		elementRef.current = element;
+		viewport.registerRoot(id, element);
+		return () => {
+			if (elementRef.current === element) elementRef.current = null;
+			viewport.registerRoot(id, null);
+		};
+	}, [viewport, id]);
+	useLayoutEffect(() => {
+		announcedOnce.current = true;
+		announceRef.current();
+	}, [
+		item,
+		suspended,
+		priority,
+		announceRef
+	]);
+	useLayoutEffect(() => {
+		if (!item.ending) return;
+		const element = elementRef.current;
+		const baseline = viewport.exitBaseline(item.id);
+		const animations = element === null ? [] : exitAnimations(element).filter((animation) => !baseline?.has(animation));
+		if (animations.length === 0) {
+			viewport.drop(item.id);
+			return;
+		}
+		let cancelled = false;
+		Promise.allSettled(animations.map((animation) => animation.finished)).then(() => {
+			if (!cancelled) viewport.drop(item.id);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		item.ending,
+		item.id,
+		viewport
+	]);
+	const onKeyDown = (event) => {
+		if (event.defaultPrevented || item.ending) return;
+		if (event.key === "Escape") {
+			event.preventDefault();
+			close("dismiss", event.nativeEvent);
+		} else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+			event.preventDefault();
+			viewport.focusSibling(id, event.key === "ArrowDown" ? 1 : -1);
+		}
+	};
+	const libraryProps = {
+		role: priority === "high" ? "alertdialog" : "dialog",
+		tabIndex: 0,
+		"aria-labelledby": ids.title,
+		"aria-describedby": ids.description,
+		inert: item.ending || void 0,
+		"data-type": item.type,
+		"data-pending": dataAttr(pending),
+		"data-ending": dataAttr(item.ending),
+		onKeyDown
+	};
+	const element = useRender({
+		defaultElement: "div",
+		render,
+		state,
+		className,
+		style,
+		children: (s) => /* @__PURE__ */ jsx(Suspense, {
+			fallback: /* @__PURE__ */ jsx(SuspenseGuard, { children: fallback }),
+			children: resolveStateValue(children, s)
+		}),
+		props: rest,
+		libraryProps,
+		ref: rootRef
+	});
+	return /* @__PURE__ */ jsx(ToastRootContext, {
+		value: context,
+		children: element
+	});
+}
+ToastRoot.displayName = "ToastRoot";
+//#endregion
+export { ToastRoot };
+
+//# sourceMappingURL=toast-root.mjs.map

package/dist/toast/toast-root.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-root.mjs","names":[],"sources":["../../src/toast/toast-root.tsx"],"sourcesContent":["\"use client\";\nimport { Suspense, useCallback, useId, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, KeyboardEvent, ReactNode } from \"react\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { exitAnimations } from \"../internal/use-exit-animation.js\";\nimport { useLatest } from \"../internal/use-latest.js\";\nimport { resolveStateValue, useRender } from \"../internal/use-render.js\";\nimport type { DataAttributes } from \"../internal/use-render.js\";\nimport type { ToastItem, ToastPriority } from \"./toast.js\";\nimport { ToastRootContext, useToastRootContext, useToastViewportContext } from \"./toast-context.js\";\nimport type { ToastRootContextValue } from \"./toast-context.js\";\n\nexport interface ToastRootState {\n  readonly toast: ToastItem;\n  /** `toast.pending`: its promise is unsettled or its Action runs. */\n  readonly pending: boolean;\n  /** `toast.ending`: closed, kept for its exit animation. */\n  readonly ending: boolean;\n  readonly type: string | undefined;\n  readonly priority: ToastPriority;\n}\n\nexport interface ToastRootProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  \"role\" | \"className\" | \"style\" | \"children\" | \"onKeyDown\"\n> {\n  /** The toast to render: an item of the Viewport's `state.toasts`. */\n  toast: ToastItem;\n  children?: StateValue<ReactNode, ToastRootState>;\n  className?: StateValue<string | undefined, ToastRootState>;\n  style?: StateValue<CSSProperties | undefined, ToastRootState>;\n  render?: RenderProp<ComponentPropsWithRef<\"div\">, ToastRootState>;\n  /**\n   * Rendered by the Root's own Suspense guard while `children` suspend, in place of the\n   * invisible default. The toast's timer and announcement wait for the reveal either way.\n   * Parts inside it (a visually hidden `<Toast.Title>` giving the toast a name) gate nothing.\n   */\n  fallback?: ReactNode;\n}\n\n/**\n * The Suspense guard's fallback: renders the Root's `fallback` (nothing by default) and tells\n * the Root its content is suspended, so the timer and the announcement wait for the reveal\n * (design 3.5, 21).\n */\nfunction SuspenseGuard({ children }: { children: ReactNode }) {\n  const { setSuspended } = useToastRootContext(\"Toast.Root\");\n  useLayoutEffect(() => {\n    setSuspended(true);\n    return () => setSuspended(false);\n  }, [setSuspended]);\n  return children;\n}\n\n/**\n * One toast: a focusable `div[role=dialog]` (`alertdialog` for `priority: \"high\"`) named by its\n * Title and described by its Description. Escape dismisses it, ArrowDown / ArrowUp move to the\n * next / previous toast. Its children render inside a Suspense guard whose fallback is the\n * `fallback` prop (invisible by default), so a toast whose content suspends does not pull the whole Viewport into a boundary above it.\n * When the toast closes it stays with `data-ending` (and `inert`) until its exit animations end.\n *\n * Owned keys (conventions 1.2): `role`, `tabIndex`, `aria-labelledby`, `aria-describedby`,\n * `inert`, `data-type`, `data-pending`, `data-ending`, `onKeyDown`.\n */\nexport function ToastRoot({\n  toast: item,\n  children,\n  className,\n  style,\n  render,\n  fallback = null,\n  ...rest\n}: ToastRootProps) {\n  const viewport = useToastViewportContext(\"Toast.Root\");\n  const id = item.id;\n  const baseId = useId();\n  const ids = useMemo(\n    () => ({ title: `${baseId}title`, description: `${baseId}description` }),\n    [baseId],\n  );\n  const elementRef = useRef<HTMLElement | null>(null);\n  const titleRef = useRef<HTMLElement | null>(null);\n  const descriptionRef = useRef<HTMLElement | null>(null);\n\n  // Action pending, aggregated over the Action parts inside (normally one).\n  const pendingTokens = useRef(new Set<object>());\n  const [actionPending, setActionPendingState] = useState(false);\n  // Suspended content behind the guard: a ref for effects of the same commit, state to re-run\n  // the announcement once it reveals.\n  const suspendedRef = useRef(false);\n  const [suspended, setSuspendedState] = useState(false);\n\n  const idRef = useLatest(id);\n  // The Root's announcement effect has run once: later Title / Description commits are reveals.\n  const announcedOnce = useRef(false);\n  const revealQueued = useRef(false);\n\n  const setActionPending = useCallback(\n    (token: object, pending: boolean) => {\n      const tokens = pendingTokens.current;\n      if (pending) tokens.add(token);\n      else tokens.delete(token);\n      const any = tokens.size > 0;\n      setActionPendingState(any);\n      viewport.setActionPending(idRef.current, any);\n    },\n    [viewport, idRef],\n  );\n\n  const setSuspended = useCallback(\n    (value: boolean) => {\n      suspendedRef.current = value;\n      setSuspendedState(value);\n      viewport.setSuspended(idRef.current, value);\n    },\n    [viewport, idRef],\n  );\n\n  const close = useCallback(\n    (reason: Parameters<ToastRootContextValue[\"close\"]>[0], event: Event | undefined) =>\n      viewport.close([idRef.current], reason, event),\n    [viewport, idRef],\n  );\n\n  const registerTitle = useCallback((element: HTMLElement | null) => {\n    titleRef.current = element;\n  }, []);\n  const registerDescription = useCallback((element: HTMLElement | null) => {\n    descriptionRef.current = element;\n  }, []);\n\n  const pending = item.pending || actionPending;\n  const priority = item.priority ?? \"normal\";\n\n  // Announce once the content has committed un-suspended (design 5): the Title and Description\n  // text exists now. The Viewport skips text it already announced for this toast and speaks the\n  // batch a microtask later.\n  const announceNow = (): void => {\n    if (item.ending || suspendedRef.current) return;\n    const resolver = item.announce ?? viewport.announcer();\n    let text: string | null;\n    if (resolver !== undefined) text = resolver(item);\n    else {\n      text = [titleRef.current?.textContent, descriptionRef.current?.textContent]\n        .map((t) => (t ?? \"\").trim())\n        .filter((t) => t !== \"\")\n        .join(\" \");\n    }\n    viewport.announce(item.id, text, priority);\n  };\n  const announceRef = useLatest(announceNow);\n\n  // A Title or Description inside the consumer's own `<Suspense>` commits after the Root (the\n  // boundary's retry does not re-run the Root's effect). Read once the whole reveal committed,\n  // so a Title and a Description revealed together are announced as one text.\n  const contentCommitted = useCallback(() => {\n    if (!announcedOnce.current || revealQueued.current) return;\n    revealQueued.current = true;\n    queueMicrotask(() => {\n      revealQueued.current = false;\n      announceRef.current();\n    });\n  }, [announceRef]);\n  const state = useMemo<ToastRootState>(\n    () => ({ toast: item, pending, ending: item.ending, type: item.type, priority }),\n    [item, pending, priority],\n  );\n\n  const context = useMemo<ToastRootContextValue>(\n    () => ({\n      toast: item,\n      ids,\n      state,\n      registerTitle,\n      registerDescription,\n      contentCommitted,\n      setActionPending,\n      setSuspended,\n      close,\n    }),\n    [\n      item,\n      ids,\n      state,\n      registerTitle,\n      registerDescription,\n      contentCommitted,\n      setActionPending,\n      setSuspended,\n      close,\n    ],\n  );\n\n  const rootRef = useCallback(\n    (element: HTMLElement) => {\n      elementRef.current = element;\n      viewport.registerRoot(id, element);\n      return () => {\n        if (elementRef.current === element) elementRef.current = null;\n        viewport.registerRoot(id, null);\n      };\n    },\n    [viewport, id],\n  );\n\n  // A layout effect, so toasts announce in queue order (before the Viewport's own effect\n  // announces the queued ones).\n  useLayoutEffect(() => {\n    announcedOnce.current = true;\n    announceRef.current();\n  }, [item, suspended, priority, announceRef]);\n\n  // Exit (design 10.2): keep the ending toast until the animations the ending state started\n  // settle, then drop it. Animations that ran before (a progress bar, paused with the region or\n  // not) are not waited for: the Viewport recorded them just before marking the toast ending.\n  useLayoutEffect(() => {\n    if (!item.ending) return;\n    const element = elementRef.current;\n    const baseline = viewport.exitBaseline(item.id);\n    const animations =\n      element === null\n        ? []\n        : exitAnimations(element).filter((animation) => !baseline?.has(animation));\n    if (animations.length === 0) {\n      viewport.drop(item.id);\n      return;\n    }\n    let cancelled = false;\n    void Promise.allSettled(animations.map((animation) => animation.finished)).then(() => {\n      if (!cancelled) viewport.drop(item.id);\n    });\n    return () => {\n      cancelled = true;\n    };\n  }, [item.ending, item.id, viewport]);\n\n  const onKeyDown = (event: KeyboardEvent<HTMLElement>): void => {\n    if (event.defaultPrevented || item.ending) return;\n    if (event.key === \"Escape\") {\n      event.preventDefault();\n      close(\"dismiss\", event.nativeEvent);\n    } else if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n      event.preventDefault();\n      viewport.focusSibling(id, event.key === \"ArrowDown\" ? 1 : -1);\n    }\n  };\n\n  const libraryProps: ComponentPropsWithRef<\"div\"> & DataAttributes = {\n    role: priority === \"high\" ? \"alertdialog\" : \"dialog\",\n    tabIndex: 0,\n    \"aria-labelledby\": ids.title,\n    \"aria-describedby\": ids.description,\n    inert: item.ending || undefined,\n    \"data-type\": item.type,\n    \"data-pending\": dataAttr(pending),\n    \"data-ending\": dataAttr(item.ending),\n    onKeyDown,\n  };\n\n  const element = useRender<ComponentPropsWithRef<\"div\">, ToastRootState>({\n    defaultElement: \"div\",\n    render,\n    state,\n    className,\n    style,\n    children: (s: ToastRootState) => (\n      <Suspense fallback={<SuspenseGuard>{fallback}</SuspenseGuard>}>\n        {resolveStateValue(children, s)}\n      </Suspense>\n    ),\n    props: rest,\n    libraryProps,\n    ref: rootRef,\n  });\n\n  return <ToastRootContext value={context}>{element}</ToastRootContext>;\n}\n\nToastRoot.displayName = \"ToastRoot\";\n"],"mappings":"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"}

package/dist/toast/toast-title.d.mts

@@ -0,0 +1,24 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { ToastRootState } from "./toast-root.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/toast/toast-title.d.ts
+export interface ToastTitleProps extends Omit<ComponentPropsWithRef<"div">, "id" | "className" | "style" | "children"> {
+  /** Default: the toast's `title`. */
+  children?: StateValue<ReactNode, ToastRootState>;
+  className?: StateValue<string | undefined, ToastRootState>;
+  style?: StateValue<CSSProperties | undefined, ToastRootState>;
+  render?: RenderProp<ComponentPropsWithRef<"div">, ToastRootState>;
+}
+/**
+ * The toast's name: a `div` whose id the Root references with `aria-labelledby`. Not a heading,
+ * so transient notifications stay out of heading navigation. Its text is part of the default
+ * announcement.
+ *
+ * Owned key (conventions 1.2): `id`.
+ */
+export declare function ToastTitle({ children, className, style, render, ...rest }: ToastTitleProps): ReactNode;
+export declare namespace ToastTitle {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=toast-title.d.mts.map

package/dist/toast/toast-title.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-title.d.mts","names":[],"sources":["../../src/toast/toast-title.tsx"],"mappings":";;;;iBAQiB,wBAAwB,KACvC;;EAIA,WAAW,WAAW,WAAW;EACjC,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,SAAS,WAAW,8BAA8B;;;;;;;;;wBAUpC,aAAa,UAAU,WAAW,OAAO,WAAW,QAAQ,kBAAe;yBAA3E"}

package/dist/toast/toast-title.mjs

@@ -0,0 +1,33 @@
+"use client";
+import { useRender } from "../internal/use-render.mjs";
+import { useToastRootContext } from "./toast-context.mjs";
+import { useLayoutEffect } from "react";
+//#region src/toast/toast-title.tsx
+/**
+* The toast's name: a `div` whose id the Root references with `aria-labelledby`. Not a heading,
+* so transient notifications stay out of heading navigation. Its text is part of the default
+* announcement.
+*
+* Owned key (conventions 1.2): `id`.
+*/
+function ToastTitle({ children, className, style, render, ...rest }) {
+	const root = useToastRootContext("Toast.Title");
+	const { contentCommitted } = root;
+	useLayoutEffect(() => contentCommitted(), [contentCommitted]);
+	return useRender({
+		defaultElement: "div",
+		render,
+		state: root.state,
+		className,
+		style,
+		children: children ?? root.toast.title,
+		props: rest,
+		libraryProps: { id: root.ids.title },
+		ref: root.registerTitle
+	});
+}
+ToastTitle.displayName = "ToastTitle";
+//#endregion
+export { ToastTitle };
+
+//# sourceMappingURL=toast-title.mjs.map

package/dist/toast/toast-title.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-title.mjs","names":[],"sources":["../../src/toast/toast-title.tsx"],"sourcesContent":["\"use client\";\nimport { useLayoutEffect } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { useToastRootContext } from \"./toast-context.js\";\nimport type { ToastRootState } from \"./toast-root.js\";\n\nexport interface ToastTitleProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  \"id\" | \"className\" | \"style\" | \"children\"\n> {\n  /** Default: the toast's `title`. */\n  children?: StateValue<ReactNode, ToastRootState>;\n  className?: StateValue<string | undefined, ToastRootState>;\n  style?: StateValue<CSSProperties | undefined, ToastRootState>;\n  render?: RenderProp<ComponentPropsWithRef<\"div\">, ToastRootState>;\n}\n\n/**\n * The toast's name: a `div` whose id the Root references with `aria-labelledby`. Not a heading,\n * so transient notifications stay out of heading navigation. Its text is part of the default\n * announcement.\n *\n * Owned key (conventions 1.2): `id`.\n */\nexport function ToastTitle({ children, className, style, render, ...rest }: ToastTitleProps) {\n  const root = useToastRootContext(\"Toast.Title\");\n  // Mounted, or revealed by a Suspense boundary inside the Root: announce the text now present.\n  const { contentCommitted } = root;\n  useLayoutEffect(() => contentCommitted(), [contentCommitted]);\n  return useRender<ComponentPropsWithRef<\"div\">, ToastRootState>({\n    defaultElement: \"div\",\n    render,\n    state: root.state,\n    className,\n    style,\n    children: children ?? root.toast.title,\n    props: rest,\n    libraryProps: { id: root.ids.title },\n    ref: root.registerTitle,\n  });\n}\n\nToastTitle.displayName = \"ToastTitle\";\n"],"mappings":";;;;;;;;;;;;AA0BA,SAAgB,WAAW,EAAE,UAAU,WAAW,OAAO,QAAQ,GAAG,QAAyB;CAC3F,MAAM,OAAO,oBAAoB,aAAa;CAE9C,MAAM,EAAE,qBAAqB;CAC7B,sBAAsB,iBAAiB,GAAG,CAAC,gBAAgB,CAAC;CAC5D,OAAO,UAAwD;EAC7D,gBAAgB;EAChB;EACA,OAAO,KAAK;EACZ;EACA;EACA,UAAU,YAAY,KAAK,MAAM;EACjC,OAAO;EACP,cAAc,EAAE,IAAI,KAAK,IAAI,MAAM;EACnC,KAAK,KAAK;CACZ,CAAC;AACH;AAEA,WAAW,cAAc"}

package/dist/toast/toast-viewport.d.mts

@@ -0,0 +1,52 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { ToastItem, ToastManager } from "./toast.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/toast/toast-viewport.d.ts
+export interface ToastViewportState {
+  /** Rendered toasts, chronological (oldest first), exiting ones included. */
+  readonly toasts: readonly ToastItem[];
+  /** Toasts waiting beyond `limit`. */
+  readonly queued: number;
+  /** A viewport-wide pause holds (pointer over the region, focus inside, hidden document, blurred window). */
+  readonly paused: boolean;
+}
+export interface ToastViewportProps extends Omit<ComponentPropsWithRef<"section">, "popover" | "className" | "style" | "children" | "onPointerEnter" | "onPointerLeave" | "onFocus" | "onBlur" | "onKeyDown"> {
+  /** The queue to render. Default: the module-level `toast`. */
+  manager?: ToastManager;
+  /** Toasts rendered at once; further ones wait in order (never dropped). Default `3`. */
+  limit?: number;
+  /** Default `duration` of a toast in milliseconds; `null` for persistent. Default `5000`. */
+  duration?: number | null;
+  /**
+   * Keys that focus the newest toast: `event.code` values and modifier names (`"altKey"`,
+   * `"ctrlKey"`, `"metaKey"`, `"shiftKey"`), all of which must match, with no other modifier
+   * held. Default `["F8"]`; `null` installs no listener.
+   */
+  hotkey?: readonly string[] | null;
+  /**
+   * The text `document.ariaNotify()` speaks for a toast (localisation); `null` announces nothing.
+   * A toast's own `announce` wins. Default: the text of its Title and Description.
+   */
+  announce?: (toast: ToastItem) => string | null;
+  /** Usually a function of the state mapping `state.toasts` to `Toast.Root`s. */
+  children?: StateValue<ReactNode, ToastViewportState>;
+  className?: StateValue<string | undefined, ToastViewportState>;
+  style?: StateValue<CSSProperties | undefined, ToastViewportState>;
+  /** Must render an element that can carry `popover` (a `<section>` by default). */
+  render?: RenderProp<ComponentPropsWithRef<"section">, ToastViewportState>;
+}
+/**
+ * The toast region: a `<section popover="manual">` named "Notifications (F8)", shown in the top
+ * layer while it has toasts. Owns the queue (urgent state fed by `toast()`), the timers and their
+ * pausing, the hotkey, focus return, announcements through `document.ariaNotify()`, and the move
+ * into the topmost open modal `Dialog` (a region outside it would be inert).
+ *
+ * Owned keys (conventions 1.2): `popover`, `aria-label` (the consumer's own `aria-label` wins
+ * verbatim), `data-paused`, `data-empty`, and the pointer / focus handlers.
+ */
+export declare function ToastViewport({ manager, limit, duration, hotkey, announce, children, className, style, render, ...rest }: ToastViewportProps): import("react").JSX.Element | null;
+export declare namespace ToastViewport {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=toast-viewport.d.mts.map

package/dist/toast/toast-viewport.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-viewport.d.mts","names":[],"sources":["../../src/toast/toast-viewport.tsx"],"mappings":";;;;iBAwCiB;;WAEN,iBAAiB;;WAEjB;;WAEA;;iBAGM,2BAA2B,KAC1C;;EAYA,UAAU;;EAEV;;EAEA;;;;;;EAMA;;;;;EAKA,YAAY,OAAO;;EAEnB,WAAW,WAAW,WAAW;EACjC,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;;EAE9C,SAAS,WAAW,kCAAkC;;;;;;;;;;;wBA0JxC,gBACd,SACA,OACA,UACA,QACA,UACA,UACA,WACA,OACA,WACG,QACF,qCAAkB,IAAA;yBAXL"}