@sakaniui/react 0.8.12 → 0.9.0

package/AGENTS.md

@@ -78,7 +78,7 @@ import { Button, Card } from '@sakaniui/react';
    (`aria-label`, or `label` on `socialLinks`). Status changes use live regions (`Alert`, `Toast`,
    `Spinner`, `EmptyState` are `role="status"`/`alert`). Never remove focus rings.
 7. **Don't fake what the system doesn't do.** `Toast` is presentational — you own queueing and
-   positioning. `Menu` is a surface — you own anchoring (pair it with `Popover`). Dragging is a
+   positioning (for a ready-made stack, use `Toaster` and `toast()`). `Menu` is a surface — you own anchoring (pair it with `Popover`). Dragging is a
    look, not a behaviour. Check "Behaviour you must supply" in the table below before assuming.
 8. **Compose in slots, don't fork.** Components expose slots (`leading`, `trailing`, `meta`,
    `assignees`, `icon`, `actions`). Fill a slot with other system components rather than copying a
@@ -153,7 +153,7 @@ CSS of a component into your own file.
 Format: **Use for** · **Why it is built this way** · **Not for / instead**.
 
 **Looking for a component by another name?** SakaniUI uses its own names. A *dialog* or *alert dialog* is
-`Modal`; a *snackbar* is `Toast`; a *dropdown menu* is `Menu`; a *navbar* or *app bar* is `TopBar`; a
+`Modal`; a *snackbar* is `Toast` (or `Toaster` + `toast()` for a managed stack); a *dropdown menu* is `Menu`; a *navbar* or *app bar* is `TopBar`; a
 *date picker* is `Calendar`; a *loader* is `Spinner`; a *toggle* is `Switch`; a *banner* is `Announcement`;
 *autocomplete* is `Combobox`. There is no `Dialog`, `AlertDialog`, `Snackbar` or `Navbar`. Each component
 lists its other names under `aliases` in `manifest.json`, and `search_components` understands them.
@@ -174,6 +174,11 @@ lists its other names under `aliases` in `manifest.json`, and `search_components
 - **Toast** — Use for short-lived confirmation or error after an action. *Why:* presentational only;
   queueing and positioning are the app's job, so it fits any notification system. *Not for* anything the user
   must act on — a toast disappears.
+- **Toaster + toast()** — Use for notifications you trigger from code: mount one `<Toaster />`, call
+  `toast.success('Saved')` from anywhere. *Why:* it owns queueing, position (6), the 4s timer, the pile that
+  spreads on hover and swipe-to-dismiss, so the app does not. `toast.promise` turns one toast from loading
+  into success or error. *Not for* anything the user must act on — a toast disappears; a plain static card
+  → `Toast`. Needs `Toaster` mounted once, and `toast()` is a function, not a component.
 - **Badge** — Use for a short status, category or count. *Why:* 6 colours × subtle/solid, no sizes, no
   borders — it is a label, not a control. *Not for* clickable filters → `FilterChip`.
 - **Tooltip** — Use for brief supplementary text on hover/focus. *Why:* pure CSS, so it works with
@@ -261,7 +266,8 @@ and **tell the user when you are composing** rather than implying a dedicated co
 
 | Component | You own |
 |---|---|
-| Toast | queueing, positioning, auto-dismiss timing |
+| Toast | queueing, positioning, auto-dismiss timing (or use `Toaster`) |
+| Toaster | mounting it once; it handles the rest |
 | Menu | anchoring/positioning (pair with Popover) |
 | BoardCard `dragging` | drag-and-drop logic and drop targets |
 | BoardColumn `loading` | the skeleton cards inside it |

package/CHANGELOG.md

@@ -2,6 +2,43 @@
 
 All notable changes to `@sakaniui/react` are documented here.
 
+## 0.9.0
+
+- **New: `Toaster` and `toast()`**, a managed toast stack (Sonner-style) built from the new *↳ Sonner* page in Figma.
+  Mount one `<Toaster />`, then call `toast()`, `toast.success()`, `.info()`, `.warning()`, `.error()`,
+  `.loading()`, `.promise()` and `.dismiss()` from anywhere.
+  - New toasts rise in from the edge; older ones pile up behind the newest (lifted 14px, shrunk 5% per level,
+    content hidden, three visible). Hover or focus spreads the pile into a list and pauses the 4s timers;
+    leaving folds it back. Swipe a toast towards its edge to dismiss it (past 45px, or a quick flick, it flies
+    out in 200ms; otherwise it springs back in 400ms). Motion is 400ms `ease`.
+  - Options per toast: `description`, `icon`, `action`, `cancel`, `closeButton`, `duration`, `dismissible`,
+    `richColors`, `id` (update in place), `onDismiss`, `onAutoClose`. On `Toaster`: `position` (six),
+    `richColors`, `closeButton`, `expand`, `visibleToasts`, `duration`, `gap`, `offset`, `mobileOffset`,
+    `hotkey` (alt+T focuses the stack; Escape folds it).
+  - Light, dark and glass surfaces through the existing tokens; reduced motion keeps the fades only; errors
+    are announced assertively.
+  - The existing `Toast` is unchanged: it stays the static, presentational card.
+- Agent contract: `Toaster` is in the manifest with recipes (show a toast, a promise toast) and the aliases
+  *sonner*, *toast stack*, *toast provider*. (`toaster` now means this component, not `Toast`.)
+
+## 0.8.13
+
+A user reported the MCP server "didn't work". Reproduced: on a Node older than 16.9 the server connected
+and listed its tools, then **every tool call failed** with `Object.hasOwn is not a function`.
+
+- **Fixed: tool calls failing on older Node.** The server no longer uses `Object.hasOwn` (Node 16.9+) or the
+  `node:` import prefix, so it works on Node 16 (tested on 16.20) as well as 18, 20, 22 and 26. Node older
+  than 16 now stops with a plain message ("Node.js 14.18.0 is too old... needs Node.js 18 or later") instead
+  of failing later. 18+ remains the supported range.
+- **New: `npx -y @sakaniui/mcp --doctor`** prints a report (Node version, platform, whether `npx` is on the
+  PATH, the reference data, the version found in your project) and exercises three real tools. Also
+  `--version` and `--help`.
+- **The build now guards against this**: it fails if the server uses an API newer than Node 16, and it runs a
+  real tool call with `Object.hasOwn` removed from the runtime.
+- **Troubleshooting** added to the README, the package README and sakaniui.com/docs/ai (PATH problems in
+  desktop editors, Windows, proxies, stale `npx` caches).
+- Correction: the 0.8.12 notes said "250+" aliases; the number is 249.
+
 ## 0.8.12
 
 Found while testing 0.8.11 in Claude Code: after writing correct code, the agent offered to wrap the

package/README.md

@@ -155,6 +155,27 @@ Tools: `search_components`, `get_component` (with a type-checked `example`), `se
   an export that is not described, a prop that is not declared, an example that does not type-check, an
   icon name that does not exist, a token that is not defined, or anything that looks like a private reference.
 
+### Troubleshooting the MCP server
+
+Run this in a terminal first. It checks Node, the data, the tools and your project, and prints a report you can
+paste when asking for help:
+
+```bash
+npx -y @sakaniui/mcp --doctor
+```
+
+| Symptom | Fix |
+|---|---|
+| `spawn npx ENOENT`, or the editor cannot start it | Desktop editors often start with a smaller `PATH` than your terminal (common with nvm and Homebrew). Use the full path: run `which npx` (macOS/Linux) or `where npx` (Windows) and put that in `"command"`, e.g. `"/opt/homebrew/bin/npx"`. |
+| Windows | `npx` is a `.cmd` script: use `"command": "cmd"` with `"args": ["/c", "npx", "-y", "@sakaniui/mcp"]`. |
+| Connects, but tool calls fail (before 0.8.13) | Node older than 16.9. Update Node (18 or later is supported), or use `@sakaniui/mcp@latest`. |
+| "Node.js ... is too old" | Install Node 18 or later: https://nodejs.org (check with `node --version`). |
+| Times out on the first start | The first run downloads about 200 kB. Run `npx -y @sakaniui/mcp --version` once in a terminal to warm the cache, then restart the editor. |
+| Behind a company proxy or private npm registry | The machine must reach `registry.npmjs.org` (check `npm config get registry`) and `@sakaniui/*` packages must be allowed. |
+| Odd `npx` errors, or an old version keeps running | Delete the `_npx` folder inside your npm cache (find it with `npm config get cache`), then restart the editor. |
+| Added it but no tools appear | Restart the editor. In Claude Code run `/mcp` and look for `sakaniui` with 10 tools. |
+| `Failed to connect` after typing the command by hand | Check the package name for a full-width `＠` or stray characters; copy the command from here instead. |
+
 ## Glass & liquid glass
 
 Glass is built into the theme system, not added component by component. Next to light/dark, SakaniUI has a second axis — **Surface** — with three modes: **Solid** (the default), **Glass** (frosted translucency) and **Liquid** (Apple-style liquid glass: the backdrop *bends* at the edges like a lens, with a faint color fringe, rim light and depth). Components read a small set of `--surface-*` tokens, so switching an area from Solid to Glass or Liquid re-themes everything inside it at once — in the Figma file (variable modes and effect styles) and in code. Solid stays pixel-identical to before.
@@ -241,7 +262,7 @@ Change a semantic token and every component follows — in both the design file
 
 **Forms** — Input · Textarea · Select · Checkbox · Radio · Switch · Slider · Combobox (single/multi, async loading) · File Upload
 
-**Composite** — Card · Alert · Toast · Accordion · Tabs · Breadcrumb · Table (generic, selectable) · Stat Card (sparklines) · Stepper · Calendar (single + range, dropdown navigation) · Pagination · Popover · Segmented Control · List Item
+**Composite** — Card · Alert · Toast · Toaster (Sonner-style `toast()` stack) · Accordion · Tabs · Breadcrumb · Table (generic, selectable) · Stat Card (sparklines) · Stepper · Calendar (single + range, dropdown navigation) · Pagination · Popover · Segmented Control · List Item
 
 **Sidebar kit** — Sidebar · Header · Search · Item · Sub Item · Group Label · Divider · Promo · Footer — nine standalone parts that compose into full navigation
 

package/bin/sakaniui-mcp.mjs

@@ -17,10 +17,21 @@
  * manifest era, answers come from this copy but every component is checked against its `since`
  * release and flagged when the project does not have it yet.
  */
-import fs from 'node:fs';
-import path from 'node:path';
-import readline from 'node:readline';
-import { fileURLToPath } from 'node:url';
+import fs from 'fs';
+import path from 'path';
+import readline from 'readline';
+import { fileURLToPath } from 'url';
+
+/* ---------- Node version guard ---------- */
+// Tested on Node 16, 18, 20, 22 and 26; 18+ is the supported range. Say so plainly instead of failing later in a way
+// that looks like the server is broken (before 0.8.13 a Node older than 16.9 connected, listed its tools, then failed every call).
+const NODE_MAJOR = Number(process.versions.node.split('.')[0]);
+if (NODE_MAJOR < 16) {
+  process.stderr.write(`sakaniui-mcp: Node.js ${process.versions.node} is too old. SakaniUI's MCP server needs Node.js 18 or later (https://nodejs.org). Run \`node --version\` to check.\n`);
+  process.exit(1);
+}
+// `Object.hasOwn` is Node 16.9+; this works everywhere
+const has = (obj, key) => Object.prototype.hasOwnProperty.call(obj, key);
 
 const ownRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
 
@@ -48,6 +59,21 @@ function findProjectInstall() {
 }
 
 // inside @sakaniui/react the data sits next to bin/; inside @sakaniui/mcp it is copied into data/
+/* ---------- command line: --version, --help, --doctor ---------- */
+const argvFlag = (...names) => process.argv.slice(2).some((a) => names.includes(a));
+if (argvFlag('--help', '-h')) {
+  process.stdout.write(`sakaniui-mcp: the SakaniUI MCP server (read-only). Your editor starts it; there is nothing to type.
+
+  npx -y @sakaniui/mcp                 start the server (waits silently for an editor)
+  npx -y @sakaniui/mcp --doctor        check this machine and print a report (paste it when asking for help)
+  npx -y @sakaniui/mcp --version       print the version
+  npx -y @sakaniui/mcp --project <dir> answer for the @sakaniui/react installed in <dir>
+
+Docs: https://www.sakaniui.com/docs/ai
+`);
+  process.exit(0);
+}
+
 const bundled = loadInstall(fs.existsSync(path.join(ownRoot, 'dist', 'manifest.json')) ? ownRoot : path.join(ownRoot, 'data'));
 if (!bundled || !bundled.manifest) {
   process.stderr.write('sakaniui-mcp: dist/manifest.json not found. Run `npm run build:lib` (or install a published version).\n');
@@ -442,8 +468,10 @@ function checkCode(source) {
     if (imp.def) errors.push({ line: imp.line, message: `${entry} has no default export; use a named import: import { ${imp.def} } from '${entry}';` });
     for (const n of imp.names) {
       if (n.typeOnly) continue;
-      const c = byName.get(n.imported.toLowerCase());
-      const isUtility = manifest.utilities?.some((u) => u.name === n.imported);
+      const util = manifest.utilities?.find((u) => u.name === n.imported);
+      const isUtility = !!util;
+      // an exact helper name (toast) is not a mis-cased component (Toast)
+      const c = isUtility ? undefined : byName.get(n.imported.toLowerCase());
       if (entry === '@sakaniui/react/icons') {
         if (!iconNames.has(n.imported) && !iconOtherExports.has(n.imported)) {
           const hint = searchIcons(n.imported, 3).map((i) => i.name);
@@ -463,6 +491,7 @@ function checkCode(source) {
         errors.push({ line: imp.line, message: `${n.imported} is not exported by @sakaniui/react.${aliasHint(n.imported)}${near.length ? ` Did you mean: ${near.join(', ')}?` : ''} Use search_components.` });
       }
       if (c && inInstalled(c) === false) errors.push({ line: imp.line, message: `${c.name} was added in ${c.since}; the project has ${projectVersion}.` });
+      if (util && inInstalled(util) === false) errors.push({ line: imp.line, message: `${util.name} was added in ${util.since}; the project has ${projectVersion}.` });
     }
   }
 
@@ -666,7 +695,7 @@ const tools = {
       const g = strArg(args, 'group'); const q = strArg(args, 'query');
       const e = firstError(g, q); if (e) return fail(e.err);
       const groups = manifest.tokens.groups;
-      if (g.value && !Object.hasOwn(groups, g.value)) return fail(`Unknown token group "${g.value}". Groups: ${Object.keys(groups).join(', ')}`);
+      if (g.value && !has(groups, g.value)) return fail(`Unknown token group "${g.value}". Groups: ${Object.keys(groups).join(', ')}`);
       const needle = q.value?.toLowerCase();
       const out = {};
       for (const [name, toks] of Object.entries(groups)) {
@@ -691,7 +720,7 @@ const tools = {
       const errors = [];
       const warnings = [];
       if (inInstalled(c) === false) errors.push(`${c.name} was added in ${c.since}; the project has ${projectVersion}. It does not exist there.`);
-      for (const r of c.contract.requiredProps) if (!Object.hasOwn(props, r)) errors.push(`Missing required prop "${r}".`);
+      for (const r of c.contract.requiredProps) if (!has(props, r)) errors.push(`Missing required prop "${r}".`);
       for (const [k, v] of Object.entries(props)) {
         const p = known.get(k);
         if (!p) { const u = unknownProp(c, k); if (u) (u.level === 'error' ? errors : warnings).push(u.message); continue; }
@@ -809,7 +838,7 @@ function handle(msg) {
         return reply(id, { result: {
           protocolVersion: asked && PROTOCOL_VERSIONS.includes(asked) ? asked : PROTOCOL_VERSIONS[0],
           capabilities: { tools: { listChanged: false } },
-          serverInfo: { name: 'sakaniui', title: 'SakaniUI', version: refVersion },
+          serverInfo: { name: 'sakaniui', title: 'SakaniUI', version: bundled.version }, // the server's own version, not the data's
           instructions: `SakaniUI ${refVersion}${projectVersion ? ` (project has ${projectVersion})` : ''}. Read-only reference. Look components up with search_components / get_component and start from their \`example\`; find icon names with search_icons (never guess them); search by the name you would normally use (dialog, snackbar, navbar, date picker) and it maps to the real component; run check_code on every snippet before you answer; style anything beyond props with the design tokens from get_tokens (CSS variables), not hard-coded colours or utility classes the project may not have; read get_guide when nothing fits.${note ? ` ${note}` : ''}`,
         } });
       }
@@ -818,7 +847,7 @@ function handle(msg) {
       case 'tools/list':
         return reply(id, { result: { tools: Object.entries(tools).map(([name, t]) => ({ name, description: t.description, inputSchema: t.inputSchema, annotations: READ_ONLY })) } });
       case 'tools/call': {
-        const t = typeof params?.name === 'string' && Object.hasOwn(tools, params.name) ? tools[params.name] : null;
+        const t = typeof params?.name === 'string' && has(tools, params.name) ? tools[params.name] : null;
         if (!t) return reply(id, { error: { code: -32602, message: `Unknown tool: ${String(params?.name).slice(0, 60)}` } });
         const args = params.arguments;
         if (args !== undefined && args !== null && (typeof args !== 'object' || Array.isArray(args))) return reply(id, { result: fail('Tool arguments must be an object.') });
@@ -837,6 +866,32 @@ function handle(msg) {
   }
 }
 
+/* ---------- --version and --doctor (no protocol traffic; print and exit) ---------- */
+if (argvFlag('--version', '-v')) { process.stdout.write(`${bundled.version}\n`); process.exit(0); }
+if (argvFlag('--doctor')) {
+  const lines = [];
+  const row = (label, value, ok) => lines.push(`  ${ok === false ? '✘' : ok === 'warn' ? '!' : ok === true ? '✔' : ' '} ${label.padEnd(20)}${value}`);
+  row('server version', bundled.version, true);
+  row('Node.js', NODE_MAJOR >= 18 ? `${process.version}` : `${process.version} (18+ is supported; 16 works but is end-of-life, please update)`, NODE_MAJOR >= 18 ? true : 'warn');
+  row('platform', `${process.platform} ${process.arch}`);
+  row('working folder', process.cwd());
+  row('reference data', `${manifest.components.length} components and blocks, ${Object.values(manifest.tokens.groups).reduce((a, g) => a + Object.keys(g).length, 0)} tokens, ${iconIndex.length} icons, describing @sakaniui/react ${refVersion} (${answeringFromProject ? "taken from your project's install" : 'bundled with this package'})`, manifest.components.length > 100 && iconIndex.length > 1000);
+  row('your project', project ? `@sakaniui/react ${project.version} at ${project.root}` : 'no @sakaniui/react found from this folder (fine for a quick check; run it from your project folder, or pass --project <dir>, to answer for your version)');
+  const exe = process.platform === 'win32' ? ['npx.cmd', 'npx.exe', 'npx'] : ['npx'];
+  const onPath = (process.env.PATH || '').split(path.delimiter).find((d) => d && exe.some((e) => fs.existsSync(path.join(d, e))));
+  row('npx on PATH', onPath ? onPath : 'not found on this PATH', !!onPath);
+  // exercise the real tools, the same code paths an editor calls
+  const probe = (name, args) => { try { const r = tools[name].run(args); return r.isError ? { ok: false, text: r.content[0].text } : { ok: true, text: r.content[0].text }; } catch (e) { return { ok: false, text: String(e && e.message || e) }; } };
+  const s1 = probe('search_components', { query: 'dialog' });
+  row('tool: search', s1.ok && /Modal/.test(s1.text) ? 'search_components("dialog") finds Modal' : `FAILED: ${s1.text.slice(0, 120)}`, s1.ok && /Modal/.test(s1.text));
+  const s2 = probe('check_code', { code: "import { Button } from '@sakaniui/react';\n<Button variant=\"danger\">x</Button>" });
+  row('tool: check_code', s2.ok && /not allowed/.test(s2.text) ? 'catches a wrong prop value' : `FAILED: ${s2.text.slice(0, 120)}`, s2.ok && /not allowed/.test(s2.text));
+  const s3 = probe('get_tokens', { group: 'radius' });
+  row('tool: get_tokens', s3.ok ? 'ok' : `FAILED: ${s3.text.slice(0, 120)}`, s3.ok);
+  process.stdout.write(`SakaniUI MCP doctor\n${lines.join('\n')}\n\nIf your editor still cannot start it: the editor may use a different PATH than this terminal\n(common with nvm and with desktop apps; on Windows use "cmd" with args ["/c","npx","-y","@sakaniui/mcp"]).\nPaste this report when asking for help: https://github.com/samzydd/Sakaniui/issues\n`);
+  process.exit(lines.some((l) => l.includes('✘')) ? 1 : 0);
+}
+
 const rl = readline.createInterface({ input: process.stdin, crlfDelay: Infinity });
 rl.on('line', (line) => {
   if (!line.trim()) return;

package/dist/components/Sonner/Sonner.d.ts

@@ -0,0 +1,30 @@
+import { default as React } from 'react';
+export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export interface ToasterProps {
+    /** Corner or edge the stack sits on. Defaults to "bottom-right". */
+    position?: ToastPosition;
+    /** Tints success, info, warning and error toasts by type. */
+    richColors?: boolean;
+    /** Shows the round close button on every toast. */
+    closeButton?: boolean;
+    /** Keeps the stack spread out instead of piled up. */
+    expand?: boolean;
+    /** How many toasts show at once; older ones fade out. Defaults to 3. */
+    visibleToasts?: number;
+    /** Milliseconds before a toast closes itself. Defaults to 4000. */
+    duration?: number;
+    /** Space between toasts when spread out, in px. Defaults to 14. */
+    gap?: number;
+    /** Distance from the viewport edge, in px or any CSS length. Defaults to 24. */
+    offset?: number | string;
+    /** Distance from the viewport edge on screens 600px wide or less. Defaults to 16. */
+    mobileOffset?: number | string;
+    /** Keys that focus the stack. Defaults to alt+T (`['altKey', 'KeyT']`). */
+    hotkey?: string[];
+    /** Accessible name of the notifications region. The hotkey is appended. Defaults to "Notifications". */
+    containerAriaLabel?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Toaster: React.FC<ToasterProps>;
+export default Toaster;

package/dist/components/Sonner/index.d.ts

@@ -0,0 +1,4 @@
+export { Toaster, default } from './Sonner';
+export type { ToasterProps, ToastPosition } from './Sonner';
+export { toast } from './state';
+export type { ToastType, ToastId, ToastOptions, ToastData, ToastAction, ToastCancel, ToastPromiseMessages } from './state';

package/dist/components/Sonner/state.d.ts

@@ -0,0 +1,106 @@
+import { default as React } from 'react';
+export type ToastType = 'default' | 'success' | 'info' | 'warning' | 'error' | 'loading';
+export type ToastId = string | number;
+export interface ToastAction {
+    /** Button text. */
+    label: React.ReactNode;
+    /** Called on click. The toast closes afterwards unless you call `event.preventDefault()`. */
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+export interface ToastCancel {
+    /** Button text. */
+    label: React.ReactNode;
+    /** Called on click, before the toast closes. */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+export interface ToastOptions {
+    /** Reuse an id to update a toast in place instead of adding a new one. */
+    id?: ToastId;
+    /** Secondary line under the title. */
+    description?: React.ReactNode;
+    /** Replaces the type icon. Pass `null` to show no icon. */
+    icon?: React.ReactNode;
+    /** Primary button, right-most. */
+    action?: ToastAction;
+    /** Secondary button, left of the action. */
+    cancel?: ToastCancel;
+    /** Milliseconds before the toast closes itself. Overrides the Toaster's `duration`. `Infinity` keeps it open. */
+    duration?: number;
+    /** Shows the round close button on this toast. Overrides the Toaster's `closeButton`. */
+    closeButton?: boolean;
+    /** When false the toast cannot be swiped away or closed by the user. Defaults to true. */
+    dismissible?: boolean;
+    /** Announces the toast assertively (interrupting the screen reader). Errors are announced this way by default. */
+    important?: boolean;
+    /** Tints this toast by its type. Overrides the Toaster's `richColors`. */
+    richColors?: boolean;
+    /** Called when the toast is closed by the user (close button, cancel, swipe) or by `toast.dismiss()`. */
+    onDismiss?: (toast: ToastData) => void;
+    /** Called when the toast closes itself after its duration. */
+    onAutoClose?: (toast: ToastData) => void;
+    /** Extra class on the toast element. */
+    className?: string;
+}
+export interface ToastData extends ToastOptions {
+    id: ToastId;
+    type: ToastType;
+    title: React.ReactNode;
+    /** @internal set by toast.dismiss(); the Toaster plays the exit motion, then removes it */
+    delete?: boolean;
+    /** @internal bumped on every update so the timer restarts */
+    version: number;
+}
+export interface ToastPromiseMessages<T> extends Omit<ToastOptions, 'id'> {
+    id?: ToastId;
+    /** Shown while the promise is pending. Leave it out to show nothing until it settles. */
+    loading?: React.ReactNode;
+    /** Shown when it resolves. A function receives the resolved value. */
+    success?: React.ReactNode | ((data: T) => React.ReactNode);
+    /** Shown when it rejects. A function receives the error. */
+    error?: React.ReactNode | ((error: unknown) => React.ReactNode);
+    /** Called after it settles either way. */
+    finally?: () => void;
+}
+type Event = {
+    kind: 'upsert';
+    toast: ToastData;
+} | {
+    kind: 'dismiss';
+    id?: ToastId;
+};
+type Listener = (event: Event) => void;
+/** @internal */
+export declare const store: {
+    subscribe(listener: Listener): () => void;
+    /** Toasts that are open right now, newest first. */
+    active: () => ToastData[];
+    /** @internal the Toaster calls this once a toast has finished its exit motion */
+    remove(id: ToastId): void;
+};
+declare function dismiss(id?: ToastId): ToastId | undefined;
+declare function promise<T>(input: Promise<T> | (() => Promise<T>), messages: ToastPromiseMessages<T>): ToastId;
+type ToastFn = (title: React.ReactNode, options?: ToastOptions) => ToastId;
+/**
+ * Shows a toast. Needs one `<Toaster />` mounted somewhere in the app.
+ *
+ *   toast('Event has been created', { description: 'Monday, January 3rd at 6:00pm' })
+ *   toast.success('Saved')
+ *   toast.error('Upload failed', { action: { label: 'Retry', onClick: retry } })
+ *   toast.promise(save(), { loading: 'Saving…', success: 'Saved', error: 'Could not save' })
+ *   toast.dismiss(id)
+ *
+ * Every call returns the toast's id; pass it back as `id` to update that toast in place.
+ */
+export declare const toast: ToastFn & {
+    message: ToastFn;
+    success: ToastFn;
+    info: ToastFn;
+    warning: ToastFn;
+    error: ToastFn;
+    /** Stays open (no timer) until you update it with the same `id` or dismiss it. */
+    loading: ToastFn;
+    promise: typeof promise;
+    /** Closes one toast, or every toast when called without an id. */
+    dismiss: typeof dismiss;
+};
+export {};