@tangle-network/ui 11.12.0 → 11.13.0

package/dist/primitives/switch.js

@@ -0,0 +1,16 @@
+"use client";
+import { focusRing } from "../lib/focus.js";
+import { cn } from "../lib/utils.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+//#region src/primitives/switch.tsx
+const Switch = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SwitchPrimitives.Root, {
+	className: cn("peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-[background-color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input", focusRing, className),
+	...props,
+	ref,
+	children: /* @__PURE__ */ jsx(SwitchPrimitives.Thumb, { className: cn("pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0") })
+}));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+//#endregion
+export { Switch };

package/dist/primitives/table.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+//#region src/primitives/table.d.ts
+export interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
+  /** Keep the existing scroll wrapper by default; false returns only the native table. */
+  wrapper?: boolean;
+  /**
+   * Attributes for the wrapper, not the table (ignored when wrapper is false).
+   * For an overflowing table, supply tabIndex and an accessible region name.
+   * No extra tab stop or unnamed landmark is imposed on every small table.
+   */
+  wrapperProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "dangerouslySetInnerHTML">;
+}
+declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
+declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
+//#endregion
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/dist/primitives/table.js

@@ -0,0 +1,63 @@
+import { cn } from "../lib/utils.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/primitives/table.tsx
+const Table = React.forwardRef(({ className, wrapper = true, wrapperProps, ...props }, ref) => {
+	const table = /* @__PURE__ */ jsx("table", {
+		ref,
+		className: cn("w-full caption-bottom text-sm", className),
+		...props
+	});
+	if (!wrapper) return table;
+	const { className: wrapperClassName, ...attributes } = wrapperProps ?? {};
+	return /* @__PURE__ */ jsx("div", {
+		...attributes,
+		className: cn("relative w-full overflow-auto", wrapperClassName),
+		children: table
+	});
+});
+Table.displayName = "Table";
+const TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", {
+	ref,
+	className: cn("[&_tr]:border-b", className),
+	...props
+}));
+TableHeader.displayName = "TableHeader";
+const TableBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", {
+	ref,
+	className: cn("[&_tr:last-child]:border-0", className),
+	...props
+}));
+TableBody.displayName = "TableBody";
+const TableFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tfoot", {
+	ref,
+	className: cn("border-t bg-card font-medium [&>tr]:last:border-b-0", className),
+	...props
+}));
+TableFooter.displayName = "TableFooter";
+const TableRow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tr", {
+	ref,
+	className: cn("border-border border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted/50", className),
+	...props
+}));
+TableRow.displayName = "TableRow";
+const TableHead = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("th", {
+	ref,
+	className: cn("h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0", className),
+	...props
+}));
+TableHead.displayName = "TableHead";
+const TableCell = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("td", {
+	ref,
+	className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className),
+	...props
+}));
+TableCell.displayName = "TableCell";
+const TableCaption = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("caption", {
+	ref,
+	className: cn("mt-4 text-muted-foreground text-sm", className),
+	...props
+}));
+TableCaption.displayName = "TableCaption";
+//#endregion
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/dist/primitives/tabs.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+//#region src/primitives/tabs.d.ts
+declare const Tabs: React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>>;
+declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+  variant?: "default" | "pills" | "underline";
+} & React.RefAttributes<HTMLDivElement>>;
+declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+  variant?: "default" | "pills" | "underline";
+} & React.RefAttributes<HTMLButtonElement>>;
+declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Tabs, TabsContent, TabsList, TabsTrigger };

package/dist/{tabs-BVHR6NkO.js → primitives/tabs.js}

@@ -1,5 +1,5 @@
-import { i as focusRing } from "./focus-BcE_SHqz.js";
-import { t as cn } from "./utils-C_uf36nf.js";
+import { focusRing } from "../lib/focus.js";
+import { cn } from "../lib/utils.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
@@ -37,4 +37,4 @@ const TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
 }));
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 //#endregion
-export { TabsTrigger as i, TabsContent as n, TabsList as r, Tabs as t };
+export { Tabs, TabsContent, TabsList, TabsTrigger };

package/dist/primitives/terminal-display.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+//#region src/primitives/terminal-display.d.ts
+export interface TerminalDisplayProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: "default" | "sandbox";
+  title?: string;
+  showHeader?: boolean;
+  autoScroll?: boolean;
+  maxHeight?: string;
+}
+declare const TerminalDisplay: React.ForwardRefExoticComponent<TerminalDisplayProps & React.RefAttributes<HTMLDivElement>>;
+export interface TerminalLineProps extends React.HTMLAttributes<HTMLDivElement> {
+  type?: "input" | "output" | "error" | "success" | "info" | "thinking" | "command" | "warning";
+  prompt?: string;
+  timestamp?: string;
+}
+declare const TerminalLine: React.ForwardRefExoticComponent<TerminalLineProps & React.RefAttributes<HTMLDivElement>>;
+declare const TerminalCursor: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+export interface TerminalInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onSubmit"> {
+  onSubmit?: (value: string) => void;
+  /** Both values render the same field. */
+  variant?: "default" | "sandbox";
+}
+declare const TerminalInput: React.ForwardRefExoticComponent<TerminalInputProps & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine };

package/dist/primitives/terminal-display.js

@@ -0,0 +1,109 @@
+import { focusFieldWithin } from "../lib/focus.js";
+import { cn } from "../lib/utils.js";
+import * as React from "react";
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/primitives/terminal-display.tsx
+const TerminalDisplay = React.forwardRef(({ className, variant = "default", title = "Terminal", showHeader = true, autoScroll = true, maxHeight = "400px", children, ...props }, ref) => {
+	const containerRef = useRef(null);
+	useEffect(() => {
+		if (autoScroll && containerRef.current) containerRef.current.scrollTop = containerRef.current.scrollHeight;
+	}, [autoScroll]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("overflow-hidden rounded-xl border bg-background font-mono text-sm", {
+			default: "border-border",
+			sandbox: "border-border shadow-[var(--shadow-accent)]"
+		}[variant], className),
+		...props,
+		children: [showHeader && /* @__PURE__ */ jsx("div", {
+			className: "flex items-center border-b border-border bg-card px-4 py-3",
+			children: /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground text-xs",
+				children: title
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			ref: containerRef,
+			className: "overflow-auto p-4",
+			style: { maxHeight },
+			children
+		})]
+	});
+});
+TerminalDisplay.displayName = "TerminalDisplay";
+const TerminalLine = React.forwardRef(({ className, type = "output", prompt = "$", timestamp, children, ...props }, ref) => {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("flex items-start gap-2 py-0.5 leading-relaxed", {
+			input: "text-foreground",
+			output: "text-foreground",
+			error: "text-[var(--surface-danger-text)]",
+			success: "text-[var(--surface-success-text)]",
+			info: "text-[var(--surface-info-text)]",
+			thinking: "text-[var(--surface-warning-text)] animate-pulse",
+			command: "text-foreground",
+			warning: "text-[var(--surface-warning-text)]"
+		}[type], className),
+		...props,
+		children: [
+			(type === "input" || type === "command") && /* @__PURE__ */ jsx("span", {
+				className: "shrink-0 select-none text-[var(--surface-success-text)]",
+				children: prompt
+			}),
+			type === "thinking" && /* @__PURE__ */ jsx("span", {
+				className: "shrink-0 select-none",
+				children: "..."
+			}),
+			timestamp && /* @__PURE__ */ jsxs("span", {
+				className: "shrink-0 select-none text-[var(--text-dim)]",
+				children: [
+					"[",
+					timestamp,
+					"]"
+				]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "whitespace-pre-wrap break-all",
+				children
+			})
+		]
+	});
+});
+TerminalLine.displayName = "TerminalLine";
+const TerminalCursor = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("span", {
+	ref,
+	className: cn("ml-0.5 inline-block h-4 w-2 animate-pulse bg-foreground", className),
+	...props
+}));
+TerminalCursor.displayName = "TerminalCursor";
+const TerminalInput = React.forwardRef(({ className, onSubmit, variant: _variant, ...props }, ref) => {
+	const [value, setValue] = React.useState("");
+	const handleKeyDown = (e) => {
+		if (e.key === "Enter" && value.trim() && onSubmit) {
+			onSubmit(value.trim());
+			setValue("");
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center rounded-lg border bg-background px-4 py-2.5 font-mono text-sm", focusFieldWithin, className),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "mr-2 select-none text-[var(--surface-success-text)]",
+				children: "$"
+			}),
+			/* @__PURE__ */ jsx("input", {
+				ref,
+				type: "text",
+				value,
+				onChange: (e) => setValue(e.target.value),
+				onKeyDown: handleKeyDown,
+				className: "flex-1 bg-transparent text-foreground outline-none placeholder:text-muted-foreground",
+				...props
+			}),
+			/* @__PURE__ */ jsx(TerminalCursor, {})
+		]
+	});
+});
+TerminalInput.displayName = "TerminalInput";
+//#endregion
+export { TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine };

package/dist/primitives/text-shimmer.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+//#region src/primitives/text-shimmer.d.ts
+export interface TextShimmerProps {
+  children: ReactNode;
+  className?: string;
+  /** One sweep across the text, in milliseconds. */
+  durationMs?: number;
+}
+/**
+ * Inline text with a gradient-mask sweep — the in-flight signal for a run row
+ * label ("Thinking…", a tool verb while its call is running). Carries the
+ * styles it needs, so a consumer that only scans this package for Tailwind
+ * classes still gets the animation.
+ */
+export declare function TextShimmer({ children, className, durationMs }: TextShimmerProps): import("react").JSX.Element;
+//#endregion

package/dist/{text-shimmer-BUUo6I-g.js → primitives/text-shimmer.js}

@@ -1,4 +1,4 @@
-import { t as cn } from "./utils-C_uf36nf.js";
+import { cn } from "../lib/utils.js";
 import { useEffect, useLayoutEffect } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/primitives/text-shimmer.tsx
@@ -61,4 +61,4 @@ function TextShimmer({ children, className, durationMs = 1400 }) {
 	});
 }
 //#endregion
-export { TextShimmer as t };
+export { TextShimmer };

package/dist/primitives/theme-toggle.d.ts

@@ -0,0 +1,11 @@
+//#region src/primitives/theme-toggle.d.ts
+type Theme = "light" | "dark" | "system";
+type Mode = Exclude<Theme, "system">;
+declare function setTheme(next: Theme): void;
+export declare function useTheme(): {
+  theme: Theme;
+  setTheme: typeof setTheme;
+  resolvedTheme: Mode;
+};
+export declare function ThemeToggle(): import("react").JSX.Element;
+//#endregion

package/dist/primitives/theme-toggle.js

@@ -0,0 +1,154 @@
+import { useEffect, useSyncExternalStore } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/primitives/theme-toggle.tsx
+const preferenceEvent = "tangle:theme-preference";
+const systemQuery = "(prefers-color-scheme: dark)";
+const namedModes = [
+	{
+		dark: "aubergine",
+		light: "aubergine-light"
+	},
+	{
+		dark: "arena",
+		light: "arena-light"
+	},
+	{
+		dark: "tangle-dark",
+		light: "tangle-light"
+	}
+];
+let preference;
+function isTheme(value) {
+	return value === "light" || value === "dark" || value === "system";
+}
+function getSystemTheme() {
+	if (typeof window === "undefined" || !window.matchMedia) return "dark";
+	return window.matchMedia(systemQuery).matches ? "dark" : "light";
+}
+function getServerTheme() {
+	return "system";
+}
+function getServerMode() {
+	return "dark";
+}
+function readInitialTheme() {
+	try {
+		const stored = window.localStorage.getItem("theme");
+		if (isTheme(stored)) return stored;
+	} catch {}
+	const root = document.documentElement;
+	const named = root.getAttribute("data-theme");
+	if (named === "light" || named === "dark") return named;
+	for (const pair of namedModes) {
+		if (named === pair.light) return "light";
+		if (named === pair.dark) return "dark";
+	}
+	if (root.classList.contains("light")) return "light";
+	if (root.classList.contains("dark")) return "dark";
+	const legacy = root.getAttribute("data-sandbox-theme");
+	if (legacy === "vault" || legacy === "dawn") return "light";
+	return "system";
+}
+function getTheme() {
+	if (typeof window === "undefined") return "system";
+	return preference ??= readInitialTheme();
+}
+function applyMode(mode) {
+	const root = document.documentElement;
+	root.classList.toggle("dark", mode === "dark");
+	root.classList.toggle("light", mode === "light");
+	const named = root.getAttribute("data-theme");
+	if (named === "dark" || named === "light") root.setAttribute("data-theme", mode);
+	else {
+		const pair = namedModes.find((pair) => named === pair.dark || named === pair.light);
+		if (pair) root.setAttribute("data-theme", pair[mode]);
+	}
+}
+function setTheme(next) {
+	if (!isTheme(next) || typeof window === "undefined") return;
+	preference = next;
+	try {
+		if (next === "system") window.localStorage.removeItem("theme");
+		else window.localStorage.setItem("theme", next);
+	} catch {}
+	applyMode(next === "system" ? getSystemTheme() : next);
+	window.dispatchEvent(new Event(preferenceEvent));
+}
+function subscribeTheme(notify) {
+	const onStorage = (event) => {
+		if (event.key !== "theme" && event.key !== null) return;
+		preference = isTheme(event.newValue) ? event.newValue : "system";
+		notify();
+	};
+	window.addEventListener(preferenceEvent, notify);
+	window.addEventListener("storage", onStorage);
+	return () => {
+		window.removeEventListener(preferenceEvent, notify);
+		window.removeEventListener("storage", onStorage);
+	};
+}
+function subscribeSystem(notify) {
+	if (!window.matchMedia) return () => {};
+	const media = window.matchMedia(systemQuery);
+	media.addEventListener("change", notify);
+	return () => media.removeEventListener("change", notify);
+}
+function useTheme() {
+	const theme = useSyncExternalStore(subscribeTheme, getTheme, getServerTheme);
+	const system = useSyncExternalStore(subscribeSystem, getSystemTheme, getServerMode);
+	const resolvedTheme = theme === "system" ? system : theme;
+	useEffect(() => {
+		const selected = getTheme();
+		applyMode(selected === "system" ? getSystemTheme() : selected);
+	}, [resolvedTheme]);
+	return {
+		theme,
+		setTheme,
+		resolvedTheme
+	};
+}
+const iconClass = "h-4 w-4";
+function SunIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		className: iconClass,
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: 12,
+			cy: 12,
+			r: 5
+		}), /* @__PURE__ */ jsx("path", { d: "M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" })]
+	});
+}
+function MoonIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		className: iconClass,
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" })
+	});
+}
+function ThemeToggle() {
+	const { resolvedTheme, setTheme } = useTheme();
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: () => setTheme(resolvedTheme === "dark" ? "light" : "dark"),
+		className: "inline-flex items-center justify-center rounded-md p-2 text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors",
+		"aria-label": `Switch to ${resolvedTheme === "dark" ? "light" : "dark"} mode`,
+		children: resolvedTheme === "dark" ? /* @__PURE__ */ jsx(SunIcon, {}) : /* @__PURE__ */ jsx(MoonIcon, {})
+	});
+}
+//#endregion
+export { ThemeToggle, useTheme };

package/dist/primitives/toast.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+//#region src/primitives/toast.d.ts
+export interface Toast {
+  id: string;
+  title: string;
+  description?: string;
+  variant?: "default" | "success" | "error" | "warning" | "info";
+  duration?: number;
+}
+interface ToastContainerProps {
+  toasts: Toast[];
+  onDismiss: (id: string) => void;
+}
+export declare function ToastContainer({ toasts, onDismiss }: ToastContainerProps): React.JSX.Element;
+type ToastInput = Omit<Toast, "id">;
+interface ToastContextValue {
+  toasts: Toast[];
+  toast: (input: ToastInput) => void;
+  success: (title: string, description?: string) => void;
+  error: (title: string, description?: string) => void;
+  warning: (title: string, description?: string) => void;
+  info: (title: string, description?: string) => void;
+  dismiss: (id: string) => void;
+}
+export declare function ToastProvider({ children }: {
+  children: React.ReactNode;
+}): React.JSX.Element;
+export declare function useToast(): ToastContextValue;
+//#endregion

package/dist/primitives/toast.js

@@ -0,0 +1,142 @@
+"use client";
+import { focusRing } from "../lib/focus.js";
+import { cn } from "../lib/utils.js";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertCircle, AlertTriangle, CheckCircle2, Info, X } from "lucide-react";
+//#region src/primitives/toast.tsx
+const toastVariants = cva("pointer-events-auto relative flex w-full items-center justify-between gap-3 overflow-hidden rounded-lg border p-4 shadow-lg transition-all", {
+	variants: { variant: {
+		default: "border-border bg-background text-foreground",
+		success: "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]",
+		error: "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]",
+		warning: "border-[var(--surface-warning-border)] bg-[var(--surface-warning-bg)] text-[var(--surface-warning-text)]",
+		info: "border-[var(--surface-info-border)] bg-[var(--surface-info-bg)] text-[var(--surface-info-text)]"
+	} },
+	defaultVariants: { variant: "default" }
+});
+const icons = {
+	success: CheckCircle2,
+	error: AlertCircle,
+	warning: AlertTriangle,
+	info: Info,
+	default: Info
+};
+function ToastComponent({ id, title, description, variant = "default", onDismiss }) {
+	const Icon = icons[variant];
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(toastVariants({ variant })),
+		role: "alert",
+		"aria-live": "polite",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-start gap-3",
+			children: [/* @__PURE__ */ jsx(Icon, {
+				className: "h-5 w-5 shrink-0",
+				"aria-hidden": "true"
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex-1",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "font-medium text-sm",
+					children: title
+				}), description && /* @__PURE__ */ jsx("p", {
+					className: "mt-1 text-sm opacity-80",
+					children: description
+				})]
+			})]
+		}), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => onDismiss(id),
+			className: cn("shrink-0 rounded-md p-1 opacity-70 transition-[opacity,box-shadow] hover:opacity-100 focus-visible:opacity-100", focusRing),
+			"aria-label": "Dismiss notification",
+			children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+		})]
+	});
+}
+function ToastContainer({ toasts, onDismiss }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "region",
+		className: "fixed right-4 bottom-4 z-50 flex max-w-md flex-col gap-2",
+		"aria-label": "Notifications",
+		children: toasts.map((toast) => /* @__PURE__ */ jsx(ToastComponent, {
+			...toast,
+			onDismiss
+		}, toast.id))
+	});
+}
+const ToastContext = React.createContext(null);
+function ToastProvider({ children }) {
+	const [toasts, setToasts] = React.useState([]);
+	const dismiss = React.useCallback((id) => {
+		setToasts((prev) => prev.filter((t) => t.id !== id));
+	}, []);
+	const toast = React.useCallback((input) => {
+		const id = Math.random().toString(36).slice(2);
+		const newToast = {
+			id,
+			...input
+		};
+		setToasts((prev) => [...prev, newToast]);
+		const duration = input.duration ?? 5e3;
+		if (duration > 0) setTimeout(() => dismiss(id), duration);
+	}, [dismiss]);
+	const success = React.useCallback((title, description) => {
+		toast({
+			title,
+			description,
+			variant: "success"
+		});
+	}, [toast]);
+	const error = React.useCallback((title, description) => {
+		toast({
+			title,
+			description,
+			variant: "error"
+		});
+	}, [toast]);
+	const warning = React.useCallback((title, description) => {
+		toast({
+			title,
+			description,
+			variant: "warning"
+		});
+	}, [toast]);
+	const info = React.useCallback((title, description) => {
+		toast({
+			title,
+			description,
+			variant: "info"
+		});
+	}, [toast]);
+	const value = React.useMemo(() => ({
+		toasts,
+		toast,
+		success,
+		error,
+		warning,
+		info,
+		dismiss
+	}), [
+		toasts,
+		toast,
+		success,
+		error,
+		warning,
+		info,
+		dismiss
+	]);
+	return /* @__PURE__ */ jsxs(ToastContext.Provider, {
+		value,
+		children: [children, /* @__PURE__ */ jsx(ToastContainer, {
+			toasts,
+			onDismiss: dismiss
+		})]
+	});
+}
+function useToast() {
+	const context = React.useContext(ToastContext);
+	if (!context) throw new Error("useToast must be used within a ToastProvider");
+	return context;
+}
+//#endregion
+export { ToastContainer, ToastProvider, useToast };