@paul-portfolio/react 0.8.1 → 0.9.0

package/dist/Toaster.d.ts

@@ -0,0 +1,28 @@
+import type { ToastVariant } from './Toast';
+export type ToastInput = {
+    title: string;
+    description?: string;
+    variant?: ToastVariant;
+    /** Auto-dismiss delay in ms. 0 keeps it until dismissed. */
+    duration?: number;
+};
+declare function dismiss(id: number): void;
+/**
+ * Raise a toast from anywhere — a component, an event handler, or a plain
+ * module like a query-client error handler. `<Toaster />` renders whatever is in
+ * the queue, so the call site needs no context or hook.
+ */
+export declare const toast: ((input: ToastInput) => number) & {
+    success: (title: string, description?: string) => number;
+    error: (title: string, description?: string) => number;
+    warning: (title: string, description?: string) => number;
+    info: (title: string, description?: string) => number;
+    dismiss: typeof dismiss;
+};
+/**
+ * Mount once, near the app root. Renders the toast queue in a fixed live region
+ * — errors announced assertively, everything else politely — and portals to the
+ * body so it's never clipped. Returns nothing on the server (no document there).
+ */
+export declare function Toaster(): import("react").ReactPortal | null;
+export {};

package/dist/Toaster.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSyncExternalStore } from 'react';
+import { createPortal } from 'react-dom';
+import { cx } from './cx';
+const DEFAULT_DURATION = 5000;
+// A module-level store, so `toast(...)` can be called from anywhere — including
+// outside React, which is the whole point: a global fetch/query error handler
+// isn't a component and can't call a hook. `<Toaster />` subscribes to it.
+const listeners = new Set();
+const timers = new Map();
+let records = [];
+let nextId = 0;
+function emit() {
+    for (const listener of listeners)
+        listener();
+}
+function subscribe(listener) {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+}
+function dismiss(id) {
+    records = records.filter((r) => r.id !== id);
+    const timer = timers.get(id);
+    if (timer) {
+        clearTimeout(timer);
+        timers.delete(id);
+    }
+    emit();
+}
+function show(input) {
+    const id = nextId++;
+    records = [...records, { ...input, id }];
+    emit();
+    const duration = input.duration ?? DEFAULT_DURATION;
+    if (duration > 0 && typeof setTimeout !== 'undefined') {
+        timers.set(id, setTimeout(() => dismiss(id), duration));
+    }
+    return id;
+}
+/**
+ * Raise a toast from anywhere — a component, an event handler, or a plain
+ * module like a query-client error handler. `<Toaster />` renders whatever is in
+ * the queue, so the call site needs no context or hook.
+ */
+export const toast = Object.assign((input) => show(input), {
+    success: (title, description) => show({ title, description, variant: 'success' }),
+    error: (title, description) => show({ title, description, variant: 'error' }),
+    warning: (title, description) => show({ title, description, variant: 'warning' }),
+    info: (title, description) => show({ title, description, variant: 'default' }),
+    dismiss,
+});
+/**
+ * Mount once, near the app root. Renders the toast queue in a fixed live region
+ * — errors announced assertively, everything else politely — and portals to the
+ * body so it's never clipped. Returns nothing on the server (no document there).
+ */
+export function Toaster() {
+    const items = useSyncExternalStore(subscribe, () => records, () => []);
+    if (typeof document === 'undefined')
+        return null;
+    return createPortal(_jsx("div", { className: "toast-region", role: "region", "aria-label": "Notifications", children: items.map((t) => (_jsxs("div", { role: t.variant === 'error' ? 'alert' : 'status', "aria-live": t.variant === 'error' ? 'assertive' : 'polite', className: cx('toast', `toast--${t.variant ?? 'default'}`), children: [_jsxs("div", { className: "toast__body", children: [_jsx("p", { className: "toast__title", children: t.title }), t.description && (_jsx("p", { className: "toast__description", children: t.description }))] }), _jsx("button", { type: "button", className: "toast__dismiss", "aria-label": "Dismiss notification", onClick: () => dismiss(t.id), children: _jsx("span", { "aria-hidden": "true", children: "\u2715" }) })] }, t.id))) }), document.body);
+}

package/dist/index.d.ts

@@ -40,6 +40,7 @@ export { CodeBlock } from './CodeBlock';
 export { CommandPalette, type Command } from './CommandPalette';
 export { Combobox, type ComboboxOption } from './Combobox';
 export { ToastProvider, useToast, type ToastOptions, type ToastVariant, } from './Toast';
+export { Toaster, toast, type ToastInput } from './Toaster';
 export { TokenUsageMeter } from './TokenUsageMeter';
 export { VisuallyHidden } from './VisuallyHidden';
 export { GuidedTour, type GuidedTourStep } from './GuidedTour';

package/dist/index.js

@@ -40,6 +40,7 @@ export { CodeBlock } from './CodeBlock';
 export { CommandPalette } from './CommandPalette';
 export { Combobox } from './Combobox';
 export { ToastProvider, useToast, } from './Toast';
+export { Toaster, toast } from './Toaster';
 export { TokenUsageMeter } from './TokenUsageMeter';
 export { VisuallyHidden } from './VisuallyHidden';
 export { GuidedTour } from './GuidedTour';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paul-portfolio/react",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "description": "React components for the Paul Design System",
   "license": "MIT",
   "repository": {