@passui/react 0.1.46 → 0.2.0

package/dist/code-block.d.ts

@@ -0,0 +1,34 @@
+import { ComponentProps, ReactNode } from "react";
+export type CodeBlockSize = "sm" | "md" | "lg";
+export interface CodeBlockProps extends Omit<ComponentProps<"div">, "children" | "size" | "title"> {
+  code: string;
+  /** Supply a highlighter's rendered pre/code element; source remains the fallback. */
+  children?: ReactNode;
+  /** Show a nonselectable line gutter. @default true */
+  lineNumbers?: boolean;
+  /** Code font size, padding and line gutter scale. @default "md" */
+  size?: CodeBlockSize;
+  /** A caption over the code, such as a file name. */
+  title?: string;
+  /** Replaces the caption with your own content, such as a tab strip that fills the row's height. */
+  header?: ReactNode;
+  /** The language's name, shown beside the caption. */
+  language?: string;
+  /** Show a copy button that writes `code`. @default false */
+  copyable?: boolean;
+  /** 1 based lines to mark with a soft accent band, for the lines a paragraph is about. */
+  highlightLines?: number[];
+  /** Wrap long lines instead of scrolling sideways. @default false */
+  wrap?: boolean;
+  /** Names for the copy button and the fold button, so apps can translate them. */
+  labels?: {
+    copy: string;
+    copied: string;
+    expand: string;
+    collapse: string;
+  };
+  /** Start folded, with an Expand code button, when the code has more lines than this. */
+  foldAfter?: number;
+}
+/** Code presentation without shipping a highlighter or formatter to consumers. */
+export declare function CodeBlock({ code, children, lineNumbers, size, title, header, language, copyable, foldAfter, highlightLines, wrap, labels, className, ...props }: CodeBlockProps): import("react").JSX.Element;

package/dist/code-block.js

@@ -0,0 +1,87 @@
+"use client";
+import { copyText } from "./clipboard.js";
+import { cx } from "./lib/cx.js";
+import { haptic } from "./lib/haptics.js";
+import { Button } from "./button.js";
+import { Fragment, useEffect, useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon } from "@passui/icons/check";
+import { CopyIcon } from "@passui/icons/copy";
+// src/components/code-block.tsx
+/** Code presentation without shipping a highlighter or formatter to consumers. */
+function CodeBlock({ code, children, lineNumbers = true, size = "md", title, header, language, copyable = false, foldAfter, highlightLines, wrap = false, labels = {
+	copy: "Copy code",
+	copied: "Copied",
+	expand: "Expand code",
+	collapse: "Collapse code"
+}, className, ...props }) {
+	const scope = useId();
+	const lines = code.split("\n");
+	const foldable = foldAfter !== void 0 && lines.length > foldAfter;
+	const [expanded, setExpanded] = useState(false);
+	const [copied, setCopied] = useState(false);
+	const folded = foldable && !expanded;
+	useEffect(() => {
+		if (!copied) return;
+		const timer = window.setTimeout(() => setCopied(false), 1600);
+		return () => window.clearTimeout(timer);
+	}, [copied]);
+	async function copy() {
+		if (await copyText(code)) {
+			haptic("success");
+			setCopied(true);
+		}
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className: cx("passui-code-block relative", className),
+		"data-slot": "code-block",
+		"data-line-numbers": lineNumbers || void 0,
+		"data-size": size,
+		"data-wrap": wrap || void 0,
+		"data-code-block": scope,
+		children: [
+			highlightLines?.length ? /* @__PURE__ */ jsx("style", { children: highlightLines.map((line) => `[data-code-block="${scope}"] code > .line:nth-child(${line}){background:color-mix(in srgb,var(--color-accent) 14%,transparent);box-shadow:inset 2px 0 0 var(--color-accent)}`).join("") }) : null,
+			title || header || language || copyable ? /* @__PURE__ */ jsxs("div", {
+				className: cx("border-separator/60 flex min-h-9 items-center justify-between gap-3 border-b px-4", !header && "py-2"),
+				children: [header ?? /* @__PURE__ */ jsx("span", {
+					className: "text-caption text-label-tertiary min-w-0 truncate font-mono",
+					children: title
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex shrink-0 items-center gap-1.5",
+					children: [language ? /* @__PURE__ */ jsx("span", {
+						className: "bg-fill/70 text-caption2 text-label-secondary rounded-full px-2 py-1 font-medium",
+						children: language
+					}) : null, copyable ? /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "icon-xs",
+						"aria-label": copied ? labels.copied : labels.copy,
+						onClick: copy,
+						children: copied ? /* @__PURE__ */ jsx(CheckIcon, { size: 16 }) : /* @__PURE__ */ jsx(CopyIcon, { size: 16 })
+					}) : null]
+				})]
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: cx("relative", folded && "max-h-36 overflow-hidden"),
+				children: [children ?? /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: lines.map((line, index) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+					className: "line",
+					children: line || " "
+				}), index < lines.length - 1 ? "\n" : null] }, line || index)) }) }), folded ? /* @__PURE__ */ jsx("div", { className: "from-elevated pointer-events-none absolute inset-x-0 bottom-0 h-20 bg-linear-to-t to-transparent" }) : null]
+			}),
+			foldable ? /* @__PURE__ */ jsx("div", {
+				className: cx("flex justify-center", folded ? "absolute inset-x-0 bottom-3" : "pb-4"),
+				children: /* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					variant: "secondary",
+					"aria-expanded": expanded,
+					onClick: () => {
+						haptic("selection");
+						setExpanded((value) => !value);
+					},
+					children: expanded ? labels.collapse : labels.expand
+				})
+			}) : null
+		]
+	});
+}
+export { CodeBlock };

package/dist/collapsible.d.ts

@@ -0,0 +1,13 @@
+import { RenderProp } from "./lib/render.js";
+import { ComponentProps, ReactNode } from "react";
+import * as zagCollapsible from "@zag-js/collapsible";
+export interface CollapsibleProps extends Omit<zagCollapsible.Props, "id" | "ids" | "onOpenChange"> {
+  onOpenChange?: (open: boolean) => void;
+  children?: ReactNode;
+  className?: string;
+}
+export declare function Collapsible({ onOpenChange, children, className, ...props }: CollapsibleProps): import("react").JSX.Element;
+export declare function CollapsibleTrigger({ render, ...props }: ComponentProps<"button"> & {
+  render?: RenderProp;
+}): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function CollapsibleContent({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;

package/dist/collapsible.js

@@ -0,0 +1,49 @@
+"use client";
+import { cx } from "./lib/cx.js";
+import { mergeProps, renderPart } from "./lib/render.js";
+import { normalizeProps, useMachine } from "@zag-js/react";
+import { createContext, useContext, useId } from "react";
+import { jsx } from "react/jsx-runtime";
+import * as zagCollapsible from "@zag-js/collapsible";
+// src/components/collapsible.tsx
+const Context = createContext(null);
+function useCollapsible() {
+	const api = useContext(Context);
+	if (!api) throw new Error("Collapsible parts must be used inside <Collapsible>.");
+	return api;
+}
+function Collapsible({ onOpenChange, children, className, ...props }) {
+	const id = useId();
+	const service = useMachine(zagCollapsible.machine, {
+		id,
+		onOpenChange: ({ open }) => onOpenChange?.(open),
+		...props
+	});
+	const api = zagCollapsible.connect(service, normalizeProps);
+	return /* @__PURE__ */ jsx(Context.Provider, {
+		value: api,
+		children: /* @__PURE__ */ jsx("div", {
+			...api.getRootProps(),
+			"data-slot": "collapsible",
+			className,
+			children
+		})
+	});
+}
+function CollapsibleTrigger({ render, ...props }) {
+	const api = useCollapsible();
+	return renderPart("button", mergeProps({
+		...api.getTriggerProps(),
+		"data-slot": "collapsible-trigger"
+	}, props), render);
+}
+function CollapsibleContent({ className, ...props }) {
+	const api = useCollapsible();
+	return /* @__PURE__ */ jsx("div", {
+		...api.getContentProps(),
+		"data-slot": "collapsible-content",
+		className: cx("collapse-motion", className),
+		...props
+	});
+}
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };

package/dist/combobox.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+import * as zagCombobox from "@zag-js/combobox";
+export interface ComboboxItem {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+export interface ComboboxProps extends Omit<zagCombobox.Props<ComboboxItem>, "id" | "ids" | "collection" | "value" | "defaultValue" | "onValueChange" | "inputValue" | "defaultInputValue" | "onInputValueChange" | "placeholder"> {
+  items: ComboboxItem[];
+  value?: string | null;
+  defaultValue?: string | null;
+  onValueChange?: (value: string | null) => void;
+  placeholder?: string;
+  /** Shown when the query matches nothing. */
+  empty?: ReactNode;
+  /** The accessible name of the chevron button, so apps can translate it. @default "Show options" */
+  triggerLabel?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  name?: string;
+  "aria-label"?: string;
+  className?: string;
+}
+/** A searchable single choice. Typing filters the list; arrow keys and Enter pick. */
+export declare function Combobox({ items, value, defaultValue, onValueChange, placeholder, empty, triggerLabel, disabled, invalid, name, "aria-label": ariaLabel, className, ...props }: ComboboxProps): import("react").JSX.Element;

package/dist/combobox.js

@@ -0,0 +1,112 @@
+"use client";
+import { cx } from "./lib/cx.js";
+import { Portal } from "./lib/portal.js";
+import { usePresence } from "./lib/presence.js";
+import { useWaterDrop } from "./lib/water-drop.js";
+import { normalizeProps, useMachine } from "@zag-js/react";
+import { useId, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as zagCombobox from "@zag-js/combobox";
+// src/components/combobox.tsx
+/** A searchable single choice. Typing filters the list; arrow keys and Enter pick. */
+function Combobox({ items, value, defaultValue, onValueChange, placeholder = "Search", empty = "No results.", triggerLabel = "Show options", disabled, invalid, name, "aria-label": ariaLabel, className, ...props }) {
+	const id = useId();
+	const [query, setQuery] = useState("");
+	const filtered = useMemo(() => items.filter((i) => i.label.toLowerCase().includes(query.trim().toLowerCase())), [items, query]);
+	const collection = useMemo(() => zagCombobox.collection({
+		items: filtered,
+		itemToValue: (i) => i.value,
+		itemToString: (i) => i.label,
+		isItemDisabled: (i) => !!i.disabled
+	}), [filtered]);
+	const one = (v) => v === void 0 ? void 0 : v ? [v] : [];
+	const service = useMachine(zagCombobox.machine, {
+		id,
+		collection,
+		name,
+		disabled,
+		invalid,
+		value: one(value),
+		defaultValue: one(defaultValue),
+		openOnClick: true,
+		inputBehavior: "autohighlight",
+		onInputValueChange: ({ inputValue }) => setQuery(inputValue),
+		onValueChange: ({ value: next }) => {
+			onValueChange?.(next[0] ?? null);
+			setQuery("");
+		},
+		positioning: {
+			sameWidth: true,
+			fitViewport: true,
+			placement: "bottom-start",
+			offset: { mainAxis: 6 }
+		},
+		...props
+	});
+	const api = zagCombobox.connect(service, normalizeProps);
+	const drop = useWaterDrop({
+		sourceId: api.getControlProps().id,
+		keepSource: true,
+		material: "liquid-glass-dense squircle [--squircle-radius:1.25rem]"
+	});
+	const { ref, mounted, attrs } = usePresence(api.open, drop);
+	return /* @__PURE__ */ jsxs("div", {
+		...api.getRootProps(),
+		"data-slot": "combobox",
+		className: cx("w-full", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			...api.getControlProps(),
+			className: "relative",
+			children: [/* @__PURE__ */ jsx("input", {
+				...api.getInputProps(),
+				"aria-label": ariaLabel,
+				placeholder,
+				"data-slot": "combobox-input",
+				className: "bg-fill/60 text-footnote text-label placeholder:text-label-tertiary focus-visible:ring-accent/70 aria-invalid:ring-danger/70 h-8.5 w-full rounded-xl pr-9 pl-3 transition duration-(--duration-fast) outline-none focus-visible:ring-2 disabled:opacity-40 aria-invalid:ring-2 motion-reduce:transition-none"
+			}), /* @__PURE__ */ jsx("button", {
+				...api.getTriggerProps(),
+				className: "group text-label-secondary focus-visible:ring-accent/70 absolute inset-y-0 right-1 flex w-9 items-center justify-center rounded-xl outline-none focus-visible:ring-2 disabled:opacity-40",
+				"aria-label": triggerLabel,
+				children: /* @__PURE__ */ jsx("svg", {
+					viewBox: "0 0 16 16",
+					className: "size-4 transition-transform duration-(--duration-fast) group-data-[state=open]:rotate-180 motion-reduce:transition-none",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ jsx("path", { d: "m4 6 4 4 4-4" })
+				})
+			})]
+		}), mounted ? /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx("div", {
+			...api.getPositionerProps(),
+			className: "z-[70]",
+			children: /* @__PURE__ */ jsx("div", {
+				...api.getContentProps(),
+				...attrs,
+				ref,
+				hidden: false,
+				"data-slot": "combobox-content",
+				className: "liquid-glass-dense squircle morph-reset spring-smooth max-h-[min(18rem,var(--available-height,18rem))] w-max max-w-(--available-width,100vw) min-w-(--reference-width) origin-(--transform-origin,center) overflow-y-auto p-1.5 transition outline-none [--squircle-radius:1.25rem] data-ending-style:scale-[0.88] data-ending-style:opacity-0 data-starting-style:scale-[0.88] data-starting-style:opacity-0 data-[side=bottom]:origin-top data-[side=top]:origin-bottom motion-reduce:transition-none motion-reduce:data-ending-style:scale-100 motion-reduce:data-starting-style:scale-100",
+				children: filtered.length === 0 ? /* @__PURE__ */ jsx("div", {
+					className: "text-footnote text-label-secondary px-3 py-2",
+					children: empty
+				}) : filtered.map((item) => /* @__PURE__ */ jsxs("div", {
+					...api.getItemProps({ item }),
+					"data-slot": "combobox-item",
+					className: "text-footnote text-label data-highlighted:bg-accent/15 flex cursor-pointer items-center justify-between gap-3 rounded-xl px-3 py-2 data-disabled:opacity-40",
+					children: [/* @__PURE__ */ jsx("span", {
+						...api.getItemTextProps({ item }),
+						children: item.label
+					}), /* @__PURE__ */ jsx("span", {
+						...api.getItemIndicatorProps({ item }),
+						className: "text-accent-text",
+						children: "✓"
+					})]
+				}, item.value))
+			})
+		}) }) : null]
+	});
+}
+export { Combobox };

package/dist/command.d.ts

@@ -0,0 +1,22 @@
+import { ComponentProps, ReactNode } from "react";
+/**
+ * A filterable list of actions. Arrow keys move, Enter runs, and typing filters.
+ * Compose it inside a Dialog for a command palette.
+ */
+export declare function Command({ className, children, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function CommandInput({ className, ...props }: Omit<ComponentProps<"input">, "value" | "onChange">): import("react").JSX.Element;
+export declare function CommandList({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function CommandEmpty({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element | null;
+export declare function CommandGroup({ heading, className, children, ...props }: Omit<ComponentProps<"div">, "children"> & {
+  heading?: ReactNode;
+  children?: ReactNode;
+}): import("react").JSX.Element;
+export type CommandItemProps = Omit<ComponentProps<"div">, "onSelect"> & {
+  value: string;
+  /** Extra words that match the query. */
+  keywords?: string;
+  onSelect?: (value: string) => void;
+  disabled?: boolean;
+};
+export declare function CommandItem({ value, keywords, onSelect, disabled, className, ...props }: CommandItemProps): import("react").JSX.Element | null;
+export declare function CommandShortcut({ className, ...props }: ComponentProps<"span">): import("react").JSX.Element;

package/dist/command.js

@@ -0,0 +1,129 @@
+"use client";
+import { cx } from "./lib/cx.js";
+import { createContext, useContext, useId, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/command.tsx
+const Context = createContext(null);
+function useCommand() {
+	const ctx = useContext(Context);
+	if (!ctx) throw new Error("Command parts must be used inside <Command>.");
+	return ctx;
+}
+/**
+* A filterable list of actions. Arrow keys move, Enter runs, and typing filters.
+* Compose it inside a Dialog for a command palette.
+*/
+function Command({ className, children, ...props }) {
+	const listId = useId();
+	const [query, setQuery] = useState("");
+	const [active, setActive] = useState(null);
+	const [registry] = useState(() => /* @__PURE__ */ new Map());
+	const state = useMemo(() => {
+		const q = query.trim().toLowerCase();
+		const visible = [...registry].filter(([value, kw]) => !q || `${value} ${kw}`.toLowerCase().includes(q)).map(([value]) => value);
+		return {
+			query,
+			setQuery,
+			active,
+			setActive,
+			listId,
+			register: (value, keywords) => void registry.set(value, keywords),
+			visible
+		};
+	}, [
+		query,
+		active,
+		listId,
+		registry
+	]);
+	return /* @__PURE__ */ jsx(Context.Provider, {
+		value: state,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "command",
+			className: cx("flex w-full flex-col overflow-hidden liquid-glass-dense squircle [--squircle-radius:1.5rem] text-label", className),
+			...props,
+			children
+		})
+	});
+}
+function CommandInput({ className, ...props }) {
+	const c = useCommand();
+	return /* @__PURE__ */ jsx("input", {
+		role: "combobox",
+		"aria-expanded": true,
+		"aria-controls": c.listId,
+		"aria-activedescendant": c.active ? `${c.listId}-${c.active}` : void 0,
+		"data-slot": "command-input",
+		value: c.query,
+		onChange: (e) => {
+			c.setQuery(e.target.value);
+			c.setActive(null);
+		},
+		onKeyDown: (e) => {
+			const list = c.visible;
+			if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+				e.preventDefault();
+				const i = c.active ? list.indexOf(c.active) : -1;
+				const n = e.key === "ArrowDown" ? i + 1 : i - 1;
+				c.setActive(list[(n + list.length) % list.length] ?? null);
+			} else if (e.key === "Enter") document.getElementById(`${c.listId}-${c.active ?? list[0]}`)?.click();
+		},
+		className: cx("h-10 w-full border-b border-separator bg-transparent px-3 text-footnote outline-none placeholder:text-label-tertiary", className),
+		...props
+	});
+}
+function CommandList({ className, ...props }) {
+	const c = useCommand();
+	return /* @__PURE__ */ jsx("div", {
+		role: "listbox",
+		id: c.listId,
+		"data-slot": "command-list",
+		className: cx("max-h-80 overflow-y-auto p-1.5", className),
+		...props
+	});
+}
+function CommandEmpty({ className, ...props }) {
+	if (useCommand().visible.length > 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "command-empty",
+		className: cx("px-3 py-6 text-center text-footnote text-label-secondary", className),
+		...props
+	});
+}
+function CommandGroup({ heading, className, children, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		role: "group",
+		"data-slot": "command-group",
+		className: cx("py-1", className),
+		...props,
+		children: [heading ? /* @__PURE__ */ jsx("div", {
+			className: "text-caption text-label-secondary px-3 py-1 font-semibold",
+			children: heading
+		}) : null, children]
+	});
+}
+function CommandItem({ value, keywords = "", onSelect, disabled, className, ...props }) {
+	const c = useCommand();
+	c.register(value, keywords);
+	if (!c.visible.includes(value)) return null;
+	return /* @__PURE__ */ jsx("div", {
+		role: "option",
+		id: `${c.listId}-${value}`,
+		"aria-selected": c.active === value,
+		"aria-disabled": disabled,
+		"data-slot": "command-item",
+		"data-active": c.active === value ? "" : void 0,
+		onPointerMove: () => c.setActive(value),
+		onClick: () => !disabled && onSelect?.(value),
+		className: cx("flex cursor-pointer items-center gap-2 rounded-xl px-3 py-2 text-footnote aria-disabled:opacity-40 data-active:bg-accent/15", className),
+		...props
+	});
+}
+function CommandShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "command-shortcut",
+		className: cx("ml-auto text-caption text-label-tertiary", className),
+		...props
+	});
+}
+export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandShortcut };

package/dist/components/toast/toast-store.d.ts

@@ -0,0 +1,60 @@
+/**
+ * App-wide toasts: short messages that confirm, report progress or explain
+ * a failure. Call `toast` from anywhere; render one `<Toaster />`.
+ */
+export type ToastTone = "neutral" | "success" | "error" | "loading";
+export type ToastSize = "sm" | "md" | "lg";
+export interface ToastAction {
+  label: string;
+  onClick: () => void;
+}
+export interface Toast {
+  id: number;
+  tone: ToastTone;
+  title: string;
+  description?: string;
+  action?: ToastAction;
+  /** Milliseconds before it leaves on its own; `null` stays until dismissed. */
+  duration: number | null;
+  createdAt: number;
+  /** Pill size, content padding and title/description text scale. @default "md" */
+  size: ToastSize;
+}
+export interface ToastOptions {
+  description?: string;
+  action?: ToastAction;
+  duration?: number | null;
+  /** Pill size, content padding and title/description text scale. @default "md" */
+  size?: ToastSize;
+}
+/** Changes a toast in place; it morphs to its new state. */
+declare function update(id: number, tone: ToastTone, title: string, options?: ToastOptions): number;
+declare function dismiss(id: number): void;
+/** A toast written as one object: `toast.success({ title: "Saved" })`. */
+export interface ToastInput extends ToastOptions {
+  title: string;
+}
+/** A promise outcome: a plain title, or a title with its own description. */
+type Message = string | {
+  title: string;
+  description?: string;
+};
+interface PromiseMessages<T> {
+  loading: Message;
+  success: Message | ((value: T) => Message);
+  error: Message | ((error: unknown) => Message);
+}
+export declare const toast: ((input: string | ToastInput, options?: ToastOptions) => number) & {
+  success: (input: string | ToastInput, options?: ToastOptions) => number;
+  error: (input: string | ToastInput, options?: ToastOptions) => number;
+  loading: (input: string | ToastInput, options?: ToastOptions) => number;
+  /** Same quiet look as a plain toast; kept so `toast.info(...)` reads naturally. */
+  info: (input: string | ToastInput, options?: ToastOptions) => number;
+  /** Same quiet look as a plain toast; there is no separate warning tone. */
+  warning: (input: string | ToastInput, options?: ToastOptions) => number;
+  update: typeof update;
+  dismiss: typeof dismiss;
+  /** Shows progress, then morphs into the outcome. Returns the promise. */
+  promise<T>(promise: Promise<T>, messages: PromiseMessages<T>): Promise<T>;
+};
+export {};

package/dist/components/toast/toast-store.js

@@ -0,0 +1,96 @@
+// src/components/toast/toast-store.ts
+const DEFAULT_DURATION = 4200;
+const MAX_VISIBLE = 3;
+let toasts = [];
+let nextId = 1;
+const listeners = /* @__PURE__ */ new Set();
+const emit = () => {
+	for (const listener of listeners) listener();
+};
+function show(tone, title, options = {}) {
+	const id = nextId++;
+	const duration = options.duration !== void 0 ? options.duration : tone === "loading" ? null : DEFAULT_DURATION;
+	toasts = [{
+		id,
+		tone,
+		title,
+		description: options.description,
+		action: options.action,
+		duration,
+		createdAt: Date.now(),
+		size: options.size ?? "md"
+	}, ...toasts].slice(0, 5);
+	emit();
+	return id;
+}
+/** Changes a toast in place; it morphs to its new state. */
+function update(id, tone, title, options = {}) {
+	if (!toasts.some((t) => t.id === id)) return show(tone, title, options);
+	toasts = toasts.map((t) => t.id === id ? {
+		...t,
+		tone,
+		title,
+		description: options.description,
+		action: options.action,
+		duration: options.duration !== void 0 ? options.duration : tone === "loading" ? null : DEFAULT_DURATION,
+		createdAt: Date.now(),
+		size: options.size ?? t.size
+	} : t);
+	emit();
+	return id;
+}
+function dismiss(id) {
+	toasts = toasts.filter((t) => t.id !== id);
+	emit();
+}
+/** Both call shapes reach `show` the same way: a title and its options. */
+function resolve(input, options = {}) {
+	if (typeof input === "string") return [input, options];
+	const { title, ...rest } = input;
+	return [title, {
+		...rest,
+		...options
+	}];
+}
+const open = (tone) => (input, options) => {
+	const [title, resolved] = resolve(input, options);
+	return show(tone, title, resolved);
+};
+const words = (message) => typeof message === "string" ? [message, {}] : [message.title, { description: message.description }];
+const toast = Object.assign(open("neutral"), {
+	success: open("success"),
+	error: open("error"),
+	loading: open("loading"),
+	/** Same quiet look as a plain toast; kept so `toast.info(...)` reads naturally. */
+	info: open("neutral"),
+	/** Same quiet look as a plain toast; there is no separate warning tone. */
+	warning: open("neutral"),
+	update,
+	dismiss,
+	/** Shows progress, then morphs into the outcome. Returns the promise. */
+	promise(promise, messages) {
+		const [loading, loadingOptions] = words(messages.loading);
+		const id = show("loading", loading, loadingOptions);
+		promise.then((value) => {
+			const message = typeof messages.success === "function" ? messages.success(value) : messages.success;
+			const [title, options] = words(message);
+			update(id, "success", title, options);
+		}, (error) => {
+			const message = typeof messages.error === "function" ? messages.error(error) : messages.error;
+			const [title, options] = words(message);
+			update(id, "error", title, options);
+		});
+		return promise;
+	}
+});
+function subscribeToasts(listener) {
+	listeners.add(listener);
+	return () => {
+		listeners.delete(listener);
+	};
+}
+function getToasts() {
+	return toasts;
+}
+const toastLimits = { visible: MAX_VISIBLE };
+export { getToasts, subscribeToasts, toast, toastLimits };

package/dist/{types/src/components → components}/toast/toaster.d.ts

@@ -4,7 +4,7 @@
  * filter, so where they meet looks liquid while they grow, morph between
  * states and shrink away. Text is drawn above the filter to stay crisp.
  */
-export declare function Toaster({ className, label, }: {
-    className?: string;
-    label?: string;
-}): import("react").JSX.Element;
+export declare function Toaster({ className, label }: {
+  className?: string;
+  label?: string;
+}): import("react").JSX.Element;