@grampro/kit 0.0.0-stage → 2.4.1

package/source/components/textarea/styles.css

@@ -0,0 +1,158 @@
+/*
+ * Textarea styles.
+ *
+ * Tokens read the shared --gbs-* variables when they are set on an ancestor
+ * (set them on :root to theme every component at once) and fall back to the
+ * same default palette otherwise. Rules are unlayered: they beat a framework
+ * reset on specificity, and lose to anything you pass through `className`.
+ * With Tailwind v4, import this file after the framework and inside its
+ * components layer - see the README.
+ */
+
+.ta-root {
+  --ta-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));
+  --ta-muted: var(--gbs-muted, var(--dg-muted, light-dark(#71717a, #a1a1aa)));
+  --ta-border: var(--gbs-border, var(--dg-border, light-dark(#e4e4e7, #27272a)));
+  --ta-input-bg: var(--gbs-input-bg, var(--dg-input-bg, light-dark(#ffffff, #121216)));
+  --ta-readonly-bg: var(--gbs-readonly-bg, light-dark(#fafafa, #0e0e12));
+  --ta-focus: var(--gbs-focus, var(--dg-focus, light-dark(#2563eb, #60a5fa)));
+  --ta-danger: var(--gbs-danger, var(--dg-danger, light-dark(#dc2626, #f87171)));
+  --ta-radius: var(--gbs-radius, var(--dg-radius, 8px));
+  --ta-font-size: var(--gbs-font-size, var(--dg-font-size, 13px));
+  --ta-px: 10px;
+  --ta-py: 8px;
+
+  color-scheme: inherit;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+  min-width: 0;
+  font-size: var(--ta-font-size);
+  line-height: 1.4;
+  color: var(--ta-fg);
+}
+
+:where(.dark, [data-theme="dark"]) .ta-root {
+  color-scheme: dark;
+}
+:where(.light, [data-theme="light"]) .ta-root {
+  color-scheme: light;
+}
+
+:where(.ta-root) *,
+:where(.ta-root) *::before,
+:where(.ta-root) *::after {
+  box-sizing: border-box;
+}
+
+.ta-root[data-size="sm"] {
+  --ta-font-size: 12px;
+  --ta-px: 8px;
+  --ta-py: 6px;
+}
+.ta-root[data-size="lg"] {
+  --ta-font-size: 14px;
+  --ta-px: 12px;
+  --ta-py: 10px;
+}
+
+.ta-label {
+  font-weight: 500;
+}
+.ta-label[data-required]::after {
+  content: " *";
+  color: var(--ta-danger);
+}
+
+.ta-input {
+  display: block;
+  width: 100%;
+  min-height: calc(1lh + 2 * var(--ta-py) + 2px);
+  margin: 0;
+  padding: var(--ta-py) var(--ta-px);
+  border: 1px solid var(--ta-border);
+  border-radius: var(--ta-radius);
+  background: var(--ta-input-bg);
+  color: inherit;
+  font: inherit;
+  line-height: 1.5;
+}
+.ta-input::placeholder {
+  color: var(--ta-muted);
+}
+.ta-input:hover:not(:disabled) {
+  border-color: color-mix(in oklab, var(--ta-border), var(--ta-fg) 25%);
+}
+.ta-input:focus-visible {
+  outline: 2px solid var(--ta-focus);
+  outline-offset: -1px;
+}
+.ta-input[data-invalid] {
+  border-color: var(--ta-danger);
+  outline-color: var(--ta-danger);
+}
+.ta-input:read-only {
+  background: var(--ta-readonly-bg);
+}
+.ta-input:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.ta-input[data-resize="none"] {
+  resize: none;
+}
+.ta-input[data-resize="vertical"] {
+  resize: vertical;
+}
+.ta-input[data-resize="horizontal"] {
+  resize: horizontal;
+}
+.ta-input[data-resize="both"] {
+  resize: both;
+}
+
+/*
+ * Auto-resize in CSS where supported. The row limits come from the
+ * component; `--ta-max-rows: none` makes max-height invalid, which means no limit.
+ */
+@supports (field-sizing: content) {
+  .ta-input[data-autoresize] {
+    field-sizing: content;
+    min-height: calc(var(--ta-min-rows, 3) * 1lh + 2 * var(--ta-py) + 2px);
+    max-height: calc(var(--ta-max-rows) * 1lh + 2 * var(--ta-py) + 2px);
+  }
+}
+
+.ta-footer {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+.ta-description {
+  flex: 1 1 auto;
+  min-width: 0;
+  color: var(--ta-muted);
+  font-size: 0.92em;
+}
+.ta-count {
+  flex: none;
+  margin-inline-start: auto;
+  color: var(--ta-muted);
+  font-size: 0.92em;
+  font-variant-numeric: tabular-nums;
+}
+.ta-count[data-over] {
+  color: var(--ta-danger);
+}
+.ta-error {
+  color: var(--ta-danger);
+  font-size: 0.92em;
+}
+
+@media (forced-colors: active) {
+  .ta-input:focus-visible {
+    outline-color: Highlight;
+  }
+}

package/source/components/toaster/README.md

@@ -0,0 +1,128 @@
+# Toaster
+
+Notifications for any React 19 app — Vite, Next.js, Remix or plain React — styled
+to match the DataGrid, Combobox and DatePicker. No runtime dependencies besides
+React.
+
+- **`<Toaster />`** — mount once; renders the toasts.
+- **`toast()`** — call from anywhere: components, event handlers, data layers,
+  even code outside React. No hook, context or provider.
+
+## Setup
+
+```ts
+import { toast, Toaster } from "@/components/toaster";
+import "@/components/toaster/styles.css";
+```
+
+```tsx
+// Once, near the root of the app (e.g. app/layout.tsx or App.tsx)
+<Toaster />
+
+// Anywhere
+toast.success("Settings saved");
+```
+
+Import from one path everywhere. `toast()` and `<Toaster />` meet through a
+shared store, and a bundler that sees two import paths may create two stores.
+
+## Showing toasts
+
+```tsx
+toast("Event created", { description: "Monday, 10:00" });
+toast.success("Saved");
+toast.error("Upload failed", { action: { label: "Retry", onClick: retry } });
+toast.warning("Storage almost full");
+toast.info("New version available");
+const id = toast.loading("Uploading…");       // stays until updated
+
+toast.update(id, { type: "success", title: "Uploaded" });
+toast.dismiss(id);                             // or toast.dismiss() for all
+
+toast.promise(saveUser(data), {
+  loading: "Saving…",
+  success: (user) => `${user.name} saved`,
+  error: (error) => `Could not save: ${(error as Error).message}`,
+});
+
+toast.custom(({ dismiss }) => <MyCard onClose={dismiss} />);
+```
+
+Every call returns the toast's id. Passing an `id` that is already on screen
+updates that toast instead of adding another.
+
+## Toast options
+
+| Option | Type | Default | Description |
+| --- | --- | --- | --- |
+| `id` | `string` | generated | Reuse to update a toast in place. |
+| `type` | `"default"` \| `"success"` \| `"error"` \| `"warning"` \| `"info"` \| `"loading"` | `"default"` | Icon, color bar and announcement. |
+| `description` | `ReactNode` | — | Second line. |
+| `duration` | `number` | `5000` (loading: stays) | Milliseconds. `0` or `Infinity` stays until dismissed. |
+| `dismissible` | `boolean` | `true` | Close button, Escape and swipe. |
+| `action` / `cancel` | `{ label, onClick(event) }` | — | Buttons. The toast closes after a click unless `event.preventDefault()` is called. |
+| `icon` | `ReactNode` | the type's icon | `null` hides it. |
+| `className` | `string` | — | Class for this toast. |
+| `render` | `({ id, dismiss }) => ReactNode` | — | Custom body (`toast.custom` sets it). |
+| `onDismiss` / `onAutoClose` | `(toast) => void` | — | Closed by someone, or because time ran out. |
+
+## Toaster props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `position` | `"top-left"` \| `"top-center"` \| `"top-right"` \| `"bottom-left"` \| `"bottom-center"` \| `"bottom-right"` | `"top-right"` | Where the stack sits. Full width on narrow screens. |
+| `limit` | `number` | `3` | Toasts on screen at once. The rest wait, with their timers held. |
+| `duration` | `number` | `5000` | Default auto-close delay. |
+| `closeButton` | `boolean` | `true` | Close button on dismissible toasts. |
+| `hotkey` | `string[]` | `["altKey", "KeyT"]` | Moves focus to the notifications. `[]` turns it off. |
+| `icons` | `Partial<Record<ToastType, ReactNode>>` | — | Replace icons per type; `null` hides one. |
+| `store` | `ToastStore` | the `toast()` store | For a separate notification area. |
+| `dir` | `"ltr"` \| `"rtl"` \| `"auto"` | inherited | Text direction. |
+| `className`, `classNames`, `style` | — | — | Slots: `region`, `list`, `toast`, `icon`, `content`, `title`, `description`, `actions`, `action`, `cancel`, `close`. |
+| `localeText` | `Partial<ToasterLocaleText>` | English | `regionLabel(hotkey)`, `close`. |
+
+## Behavior
+
+- Timers pause while the pointer is over the toasts, while focus is inside them,
+  and while the browser tab is hidden.
+- Toasts beyond `limit` wait with their full time and appear as others close.
+- Toasts render in a portal on `<body>`, so no parent's overflow, transform or
+  z-index can hide them.
+
+## Keyboard and accessibility
+
+| Keys | Action |
+| --- | --- |
+| **Alt + T** | Move focus to the notifications (configurable with `hotkey`). |
+| **Tab** | Move between toasts and their buttons. |
+| **Escape** | Dismiss the focused toast. |
+| swipe sideways | Dismiss (touch, pen or mouse). |
+
+The list is a polite live region, always in the page, so new toasts are read out
+without interrupting. Error toasts use `role="alert"` and interrupt. The region is
+a labelled landmark ("Notifications (Alt+T)").
+
+## Theming
+
+Override `--ts-*` variables (they default to the grid's `--dg-*`). Toasts render
+on `<body>`, so set shared `--dg-*` values on `:root`:
+
+```css
+.ts-region { --ts-width: 420px; --ts-success: #059669; --ts-radius: 12px; }
+```
+
+State attributes: `data-position` on the region; `data-type`, `data-state`
+(`open` / `closing`), `data-custom`, `data-swiping` on toasts.
+
+## Headless use
+
+`useToasts(store?)` returns the live snapshot (`toasts`, `paused`, `limit`) for a
+custom UI, and `visibleToasts(snapshot)` picks the ones to show.
+`createToastStore()` and `createToastApi(store)` build separate instances. All of
+`core` runs without React.
+
+## Known limits
+
+- One stack per `<Toaster />`; toasts don't collapse into an expandable pile.
+- `toast()` does nothing during a server render or in server code. Call it in
+  the browser, e.g. after a Server Action resolves.

package/source/components/toaster/core/api.ts

@@ -0,0 +1,87 @@
+import type { ReactNode } from "react";
+import type { ToastPatch, ToastStore } from "./store";
+import type { ToastOptions, ToastRenderProps, ToastType } from "./types";
+
+type TypedOptions = Omit<ToastOptions, "type">;
+type Message<T> = ReactNode | ((value: T) => ReactNode);
+
+export interface PromiseMessages<T> {
+  loading: ReactNode;
+  /** Omit to close the toast quietly on success. */
+  success?: Message<T>;
+  /** Omit to close the toast quietly on failure. */
+  error?: Message<unknown>;
+}
+
+export interface ToastApi {
+  (title: ReactNode, options?: ToastOptions): string;
+  success(title: ReactNode, options?: TypedOptions): string;
+  error(title: ReactNode, options?: TypedOptions): string;
+  warning(title: ReactNode, options?: TypedOptions): string;
+  info(title: ReactNode, options?: TypedOptions): string;
+  /** Stays until updated or dismissed. */
+  loading(title: ReactNode, options?: TypedOptions): string;
+  custom(
+    render: (props: ToastRenderProps) => ReactNode,
+    options?: Omit<TypedOptions, "render">,
+  ): string;
+  /** Shows a loading toast, then turns it into a success or error. Returns the same promise. */
+  promise<T>(
+    input: Promise<T> | (() => Promise<T>),
+    messages: PromiseMessages<T>,
+    options?: TypedOptions,
+  ): Promise<T>;
+  update(id: string, patch: ToastPatch): void;
+  dismiss(id?: string): void;
+}
+
+/**
+ * The `toast()` function for a store. `canShow` lets the default instance ignore
+ * calls made where nobody can see them, such as during a server render.
+ */
+export function createToastApi(store: ToastStore, canShow: () => boolean = () => true): ToastApi {
+  const show = (title: ReactNode, options?: ToastOptions) =>
+    canShow() ? store.show(title, options) : (options?.id ?? "");
+
+  const typed = (type: ToastType) => (title: ReactNode, options?: TypedOptions) =>
+    show(title, { ...options, type });
+
+  function promise<T>(
+    input: Promise<T> | (() => Promise<T>),
+    messages: PromiseMessages<T>,
+    options?: TypedOptions,
+  ): Promise<T> {
+    const pending = typeof input === "function" ? input() : input;
+    if (!canShow()) return pending;
+
+    const id = store.show(messages.loading, { ...options, type: "loading" });
+
+    function settle<V>(type: "success" | "error", message: Message<V> | undefined, value: V) {
+      if (message === undefined) store.dismiss(id);
+      else store.update(id, { type, title: typeof message === "function" ? message(value) : message });
+    }
+
+    // Handling the rejection here also stops it being reported as unhandled when
+    // the caller doesn't await the returned promise.
+    pending.then(
+      (value) => settle("success", messages.success, value),
+      (error: unknown) => settle("error", messages.error, error),
+    );
+    return pending;
+  }
+
+  return Object.assign(show, {
+    success: typed("success"),
+    error: typed("error"),
+    warning: typed("warning"),
+    info: typed("info"),
+    loading: typed("loading"),
+    custom: (
+      render: (props: ToastRenderProps) => ReactNode,
+      options?: Omit<TypedOptions, "render">,
+    ) => show(null, { ...options, render }),
+    promise,
+    update: (id: string, patch: ToastPatch) => store.update(id, patch),
+    dismiss: (id?: string) => store.dismiss(id),
+  });
+}

package/source/components/toaster/core/index.ts

@@ -0,0 +1,14 @@
+// Framework-free: the store, the timers and the `toast()` API run without
+// React, so they can be called from a data layer and tested on their own.
+export { createToastApi } from "./api";
+export type { PromiseMessages, ToastApi } from "./api";
+export {
+  createToastStore,
+  DEFAULT_DURATION,
+  DEFAULT_LIMIT,
+  EXIT_DURATION,
+  visibleToasts,
+} from "./store";
+export type { ToastPatch, ToastStore, ToastStoreConfig } from "./store";
+export { toast, toastStore } from "./toast";
+export type * from "./types";

package/source/components/toaster/core/store.ts

@@ -0,0 +1,211 @@
+import type { ReactNode } from "react";
+import type { ToastOptions, ToastRecord, ToastSnapshot } from "./types";
+
+export const DEFAULT_DURATION = 5000;
+export const DEFAULT_LIMIT = 3;
+/** Matches the CSS exit transition, so a toast fades out before it leaves the DOM. */
+export const EXIT_DURATION = 200;
+
+export interface ToastStoreConfig {
+  /** Default auto-close delay in milliseconds. */
+  duration?: number;
+  /** Open toasts on screen at once; the rest wait with their timers held. */
+  limit?: number;
+  /** How long a closed toast stays for its exit animation. */
+  exitDuration?: number;
+}
+
+export type ToastPatch = Omit<ToastOptions, "id"> & { title?: ReactNode };
+
+export interface ToastStore {
+  subscribe(listener: () => void): () => void;
+  getSnapshot(): ToastSnapshot;
+  getServerSnapshot(): ToastSnapshot;
+  /** Adds a toast, or updates the one with the same `id`. Returns the id. */
+  show(title: ReactNode, options?: ToastOptions): string;
+  /** Changes an open toast. A new `type` without a `duration` gets that type's default. */
+  update(id: string, patch: ToastPatch): void;
+  /** Closes one toast, or every toast when no id is given. */
+  dismiss(id?: string): void;
+  pause(): void;
+  resume(): void;
+  configure(config: ToastStoreConfig): void;
+}
+
+interface Countdown {
+  remaining: number;
+  startedAt: number;
+  handle: ReturnType<typeof setTimeout> | null;
+}
+
+const EMPTY: ToastSnapshot = { toasts: [], paused: false, limit: DEFAULT_LIMIT };
+
+/** What a Toaster renders: every closing toast, plus the newest `limit` open ones. */
+export function visibleToasts(snapshot: ToastSnapshot): ToastRecord[] {
+  let open = 0;
+  return snapshot.toasts.filter((toast) => toast.state !== "open" || open++ < snapshot.limit);
+}
+
+function definedOnly<T extends object>(value: T): Partial<T> {
+  return Object.fromEntries(
+    Object.entries(value).filter(([, entry]) => entry !== undefined),
+  ) as Partial<T>;
+}
+
+/**
+ * Toast state and timers, with no React. Snapshots are immutable, so the store
+ * plugs straight into `useSyncExternalStore`. Only toasts on screen count down:
+ * one waiting beyond `limit` keeps its full time until it gets a slot.
+ */
+export function createToastStore(config: ToastStoreConfig = {}): ToastStore {
+  let settings: Required<ToastStoreConfig> = {
+    duration: DEFAULT_DURATION,
+    limit: DEFAULT_LIMIT,
+    exitDuration: EXIT_DURATION,
+    ...definedOnly(config),
+  };
+  let snapshot: ToastSnapshot = { ...EMPTY, limit: settings.limit };
+  let counter = 0;
+  const listeners = new Set<() => void>();
+  const countdowns = new Map<string, Countdown>();
+  const removals = new Map<string, ReturnType<typeof setTimeout>>();
+
+  function stop(id: string) {
+    const countdown = countdowns.get(id);
+    if (!countdown?.handle) return;
+    clearTimeout(countdown.handle);
+    countdown.handle = null;
+    countdown.remaining = Math.max(0, countdown.remaining - (Date.now() - countdown.startedAt));
+  }
+
+  function syncTimers() {
+    const visible = new Set(visibleToasts(snapshot));
+    for (const toast of snapshot.toasts) {
+      const countdown = countdowns.get(toast.id);
+      if (!countdown || toast.state !== "open") continue;
+      const run =
+        visible.has(toast) && !snapshot.paused && Number.isFinite(countdown.remaining);
+      if (run && !countdown.handle) {
+        countdown.startedAt = Date.now();
+        countdown.handle = setTimeout(() => close(toast.id, true), countdown.remaining);
+      } else if (!run && countdown.handle) {
+        stop(toast.id);
+      }
+    }
+  }
+
+  function commit(
+    toasts: readonly ToastRecord[],
+    changes: Partial<Omit<ToastSnapshot, "toasts">> = {},
+  ) {
+    snapshot = { ...snapshot, ...changes, toasts };
+    syncTimers();
+    for (const listener of listeners) listener();
+  }
+
+  function close(id: string, auto: boolean) {
+    const toast = snapshot.toasts.find((item) => item.id === id && item.state === "open");
+    if (!toast) return;
+    stop(id);
+    countdowns.delete(id);
+
+    const closing: ToastRecord = { ...toast, state: "closing" };
+    commit(snapshot.toasts.map((item) => (item === toast ? closing : item)));
+    if (auto) closing.onAutoClose?.(closing);
+    else closing.onDismiss?.(closing);
+
+    removals.set(
+      id,
+      setTimeout(() => {
+        removals.delete(id);
+        commit(snapshot.toasts.filter((item) => item !== closing));
+      }, settings.exitDuration),
+    );
+  }
+
+  function show(title: ReactNode, options: ToastOptions = {}): string {
+    const id = options.id ?? `toast-${++counter}`;
+    const type = options.type ?? "default";
+    const existing = snapshot.toasts.find((item) => item.id === id);
+    const reused = existing?.state === "open" ? existing : undefined;
+    const requested = options.duration ?? (type === "loading" ? Infinity : settings.duration);
+
+    const record: ToastRecord = {
+      ...options,
+      id,
+      type,
+      title,
+      // 0, negative and NaN all mean "stay until dismissed".
+      duration: requested > 0 ? requested : Infinity,
+      dismissible: options.dismissible ?? true,
+      state: "open",
+      createdAt: reused?.createdAt ?? Date.now(),
+      version: (existing?.version ?? 0) + 1,
+    };
+
+    // Showing an id that is fading out brings it back instead of stacking a copy.
+    const removal = removals.get(id);
+    if (removal !== undefined) {
+      clearTimeout(removal);
+      removals.delete(id);
+    }
+    stop(id);
+    countdowns.set(id, { remaining: record.duration, startedAt: 0, handle: null });
+
+    commit(
+      reused
+        ? snapshot.toasts.map((item) => (item === reused ? record : item))
+        : [record, ...snapshot.toasts.filter((item) => item.id !== id)],
+    );
+    return id;
+  }
+
+  function update(id: string, patch: ToastPatch) {
+    const existing = snapshot.toasts.find((item) => item.id === id && item.state === "open");
+    if (!existing) return;
+    const { title = existing.title, ...changes } = patch;
+    const typeChanged = changes.type !== undefined && changes.type !== existing.type;
+    show(title, {
+      ...existing,
+      ...changes,
+      id,
+      duration: changes.duration ?? (typeChanged ? undefined : existing.duration),
+    });
+  }
+
+  function dismiss(id?: string) {
+    if (id !== undefined) {
+      close(id, false);
+      return;
+    }
+    for (const toast of snapshot.toasts) {
+      if (toast.state === "open") close(toast.id, false);
+    }
+  }
+
+  function setPaused(paused: boolean) {
+    if (snapshot.paused !== paused) commit(snapshot.toasts, { paused });
+  }
+
+  function configure(next: ToastStoreConfig) {
+    settings = { ...settings, ...definedOnly(next) };
+    if (settings.limit !== snapshot.limit) commit(snapshot.toasts, { limit: settings.limit });
+  }
+
+  return {
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    getSnapshot: () => snapshot,
+    getServerSnapshot: () => EMPTY,
+    show,
+    update,
+    dismiss,
+    pause: () => setPaused(true),
+    resume: () => setPaused(false),
+    configure,
+  };
+}

package/source/components/toaster/core/toast.ts

@@ -0,0 +1,12 @@
+import { createToastApi } from "./api";
+import { createToastStore } from "./store";
+
+/** The store behind `toast()`, and behind any `<Toaster />` without a `store` prop. */
+export const toastStore = createToastStore();
+
+/**
+ * Shows a notification from anywhere: components, event handlers, data layers,
+ * code outside React. On a server nobody can see a toast, so calls do nothing
+ * there — which also keeps one request's toasts from leaking into another's.
+ */
+export const toast = createToastApi(toastStore, () => typeof document !== "undefined");

package/source/components/toaster/core/types.ts

@@ -0,0 +1,78 @@
+import type { ReactNode } from "react";
+
+export type ToastType = "default" | "success" | "error" | "warning" | "info" | "loading";
+
+export type ToastPosition =
+  | "top-left"
+  | "top-center"
+  | "top-right"
+  | "bottom-left"
+  | "bottom-center"
+  | "bottom-right";
+
+/** The click event handed to an action. Call `preventDefault()` to keep the toast open. */
+export interface ToastActionEvent {
+  preventDefault(): void;
+  readonly defaultPrevented: boolean;
+}
+
+export interface ToastAction {
+  label: ReactNode;
+  onClick(event: ToastActionEvent): void;
+}
+
+export interface ToastRenderProps {
+  id: string;
+  dismiss(): void;
+}
+
+export interface ToastOptions {
+  /** Showing a toast with an id that is already on screen updates it in place. */
+  id?: string;
+  type?: ToastType;
+  description?: ReactNode;
+  /** Milliseconds before it closes. `0` or `Infinity` keeps it until dismissed. */
+  duration?: number;
+  /** Close button, Escape and swipe. Default true. */
+  dismissible?: boolean;
+  action?: ToastAction;
+  cancel?: ToastAction;
+  /** Replaces the type's icon; `null` hides it. */
+  icon?: ReactNode;
+  className?: string;
+  /** Renders the whole toast body yourself. */
+  render?(props: ToastRenderProps): ReactNode;
+  /** Closed by the user or by code. */
+  onDismiss?(toast: ToastRecord): void;
+  /** Closed because its time ran out. */
+  onAutoClose?(toast: ToastRecord): void;
+}
+
+export interface ToastRecord
+  extends Omit<ToastOptions, "id" | "type" | "duration" | "dismissible"> {
+  id: string;
+  type: ToastType;
+  title: ReactNode;
+  /** Always a positive number; `Infinity` when it stays until dismissed. */
+  duration: number;
+  dismissible: boolean;
+  /** `closing` while the exit animation plays, just before removal. */
+  state: "open" | "closing";
+  createdAt: number;
+  /** Goes up each time the same id is shown or updated. */
+  version: number;
+}
+
+export interface ToastSnapshot {
+  /** Newest first, including toasts waiting beyond `limit`. */
+  toasts: readonly ToastRecord[];
+  /** Timers are held, e.g. while the pointer is over the toasts. */
+  paused: boolean;
+  /** How many open toasts are on screen at once. */
+  limit: number;
+}
+
+export interface ToasterLocaleText {
+  regionLabel(hotkey: string): string;
+  close: string;
+}

package/source/components/toaster/index.ts

@@ -0,0 +1,6 @@
+export { Toaster } from "./react/Toaster";
+export type { ToasterProps } from "./react/Toaster";
+export { useToasts } from "./react/useToasts";
+export { defaultToasterText } from "./react/locale";
+export type { ToasterSlot } from "./react/props";
+export * from "./core";