@cube-dev/ui-kit 0.0.0-canary-0d92c07 → 0.0.0-canary-4d9db65

package/dist/components/overlays/Toast/ToastProvider.js

@@ -0,0 +1,315 @@
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4d9db65 | Cube Dev Team */
+import { tasty } from "../../../tasty/tasty.js";
+import { useEvent } from "../../../_internal/hooks/use-event.js";
+import { DisplayTransition } from "../../helpers/DisplayTransition/DisplayTransition.js";
+import { Portal } from "../../portal/Portal.js";
+import { ToastItem } from "./ToastItem.js";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/overlays/Toast/ToastProvider.tsx
+const DEFAULT_DURATION = 5e3;
+const MAX_TOASTS = 3;
+const COLLAPSE_VISIBLE_HEIGHT = 10;
+const CONTAINER_OFFSET = 16;
+function generateDedupeKey(data) {
+	const id = data.id;
+	if (id != null) return String(id);
+	return [
+		typeof data.title === "string" ? data.title : "",
+		typeof data.description === "string" ? data.description : "",
+		data.theme ?? "default"
+	].join("|");
+}
+const ToastContext = createContext(null);
+function useToastContext() {
+	const context = useContext(ToastContext);
+	if (!context) throw new Error("useToastContext must be used within a ToastProvider");
+	return context;
+}
+const TOAST_GAP = 8;
+const ToastContainerElement = tasty({ styles: {
+	position: "fixed",
+	top: "2x",
+	left: "50%",
+	transform: "translateX(-50%)",
+	zIndex: 1e4,
+	padding: "1x",
+	height: "0",
+	pointerEvents: "none"
+} });
+const ToastWrapper = tasty({ styles: {
+	position: "absolute",
+	top: "0",
+	left: "50%",
+	transform: "translateX(-50%)",
+	width: "max-content 50x",
+	pointerEvents: "auto",
+	transition: "top 0.3s, opacity 0.3s",
+	opacity: {
+		"": 0,
+		isShown: 1
+	}
+} });
+const DEFAULT_TOAST_HEIGHT = 56;
+function ToastContainer({ toasts, onExitComplete }) {
+	const [isCollapsed, setIsCollapsed] = useState(false);
+	const [heights, setHeights] = useState({});
+	const containerRef = useRef(null);
+	const boundsRef = useRef(null);
+	const toastRefs = useRef(/* @__PURE__ */ new Map());
+	const lastPositionsRef = useRef(/* @__PURE__ */ new Map());
+	const updateBounds = useCallback(() => {
+		const refs = toastRefs.current;
+		if (refs.size === 0) {
+			boundsRef.current = null;
+			return;
+		}
+		let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+		refs.forEach((el) => {
+			const rect = el.getBoundingClientRect();
+			minX = Math.min(minX, rect.left);
+			minY = Math.min(minY, rect.top);
+			maxX = Math.max(maxX, rect.right);
+			maxY = Math.max(maxY, rect.bottom);
+		});
+		if (typeof DOMRect !== "undefined") boundsRef.current = new DOMRect(minX, minY, maxX - minX, maxY - minY);
+		else boundsRef.current = {
+			x: minX,
+			y: minY,
+			width: maxX - minX,
+			height: maxY - minY,
+			top: minY,
+			right: maxX,
+			bottom: maxY,
+			left: minX,
+			toJSON: () => ({})
+		};
+	}, []);
+	useEffect(() => {
+		if (!isCollapsed) return;
+		const handleMouseMove = (e) => {
+			const bounds = boundsRef.current;
+			if (!bounds) {
+				setIsCollapsed(false);
+				return;
+			}
+			const padding = 20;
+			if (!(e.clientX >= bounds.left - padding && e.clientX <= bounds.right + padding && e.clientY >= bounds.top - padding && e.clientY <= bounds.bottom + padding)) setIsCollapsed(false);
+		};
+		window.addEventListener("mousemove", handleMouseMove);
+		return () => window.removeEventListener("mousemove", handleMouseMove);
+	}, [isCollapsed]);
+	useEffect(() => {
+		updateBounds();
+	}, [toasts, updateBounds]);
+	const handleMouseEnter = useCallback(() => {
+		updateBounds();
+		setIsCollapsed(true);
+	}, [updateBounds]);
+	useEffect(() => {
+		const newHeights = {};
+		let hasChanges = false;
+		toastRefs.current.forEach((el, id) => {
+			const height = el.offsetHeight || DEFAULT_TOAST_HEIGHT;
+			newHeights[id] = height;
+			if (heights[id] !== height) hasChanges = true;
+		});
+		for (const id of Object.keys(heights)) if (!toastRefs.current.has(id)) hasChanges = true;
+		if (hasChanges) setHeights(newHeights);
+	});
+	const createRefCallback = useCallback((internalId, displayRef) => (el) => {
+		displayRef(el);
+		if (el) toastRefs.current.set(internalId, el);
+		else toastRefs.current.delete(internalId);
+	}, []);
+	const visibleToasts = toasts.filter((t) => !t.isExiting);
+	const positions = useMemo(() => {
+		const posMap = /* @__PURE__ */ new Map();
+		let currentTop = 0;
+		for (const toast of visibleToasts) {
+			posMap.set(toast.internalId, currentTop);
+			const height = heights[toast.internalId] ?? DEFAULT_TOAST_HEIGHT;
+			currentTop += height + TOAST_GAP;
+		}
+		return posMap;
+	}, [visibleToasts, heights]);
+	useEffect(() => {
+		positions.forEach((pos, id) => {
+			lastPositionsRef.current.set(id, pos);
+		});
+	}, [positions]);
+	const handleExitComplete = useCallback((internalId) => {
+		lastPositionsRef.current.delete(internalId);
+		onExitComplete(internalId);
+	}, [onExitComplete]);
+	const getToastStyle = useCallback((toast, index, total) => {
+		const baseTop = positions.get(toast.internalId) ?? lastPositionsRef.current.get(toast.internalId) ?? 0;
+		const height = heights[toast.internalId] ?? DEFAULT_TOAST_HEIGHT;
+		if (!isCollapsed) return { top: `${baseTop}px` };
+		const isNewest = index === total - 1;
+		return {
+			top: `${COLLAPSE_VISIBLE_HEIGHT - CONTAINER_OFFSET - height}px`,
+			zIndex: index,
+			opacity: isNewest ? 1 : 0,
+			pointerEvents: "none"
+		};
+	}, [
+		isCollapsed,
+		positions,
+		heights
+	]);
+	if (toasts.length === 0) return null;
+	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(ToastContainerElement, {
+		ref: containerRef,
+		children: toasts.map((toast) => {
+			const visibleIndex = visibleToasts.findIndex((t) => t.internalId === toast.internalId);
+			return /* @__PURE__ */ jsx(DisplayTransition, {
+				animateOnMount: true,
+				isShown: !toast.isExiting,
+				onRest: (transition) => {
+					if (transition === "exit") handleExitComplete(toast.internalId);
+				},
+				children: ({ isShown, ref }) => /* @__PURE__ */ jsx(ToastWrapper, {
+					ref: createRefCallback(toast.internalId, ref),
+					mods: { isShown },
+					style: getToastStyle(toast, visibleIndex >= 0 ? visibleIndex : 0, visibleToasts.length),
+					onMouseEnter: handleMouseEnter,
+					children: /* @__PURE__ */ jsx(ToastItem, {
+						...toast.itemProps,
+						title: toast.title,
+						description: toast.description,
+						theme: toast.theme,
+						icon: toast.icon,
+						isLoading: toast.isLoading
+					})
+				})
+			}, toast.internalId);
+		})
+	}) });
+}
+function ToastProvider({ children }) {
+	const [toasts, setToasts] = useState([]);
+	const timersRef = useRef(/* @__PURE__ */ new Map());
+	const idCounter = useRef(0);
+	const generateId = useCallback(() => {
+		idCounter.current += 1;
+		return `toast-${idCounter.current}-${Date.now()}`;
+	}, []);
+	const clearTimer = useCallback((internalId) => {
+		const timer = timersRef.current.get(internalId);
+		if (timer) {
+			clearTimeout(timer);
+			timersRef.current.delete(internalId);
+		}
+	}, []);
+	const removeToast = useEvent((id) => {
+		setToasts((prev) => {
+			const toast = prev.find((t) => t.id === id || t.internalId === String(id));
+			if (toast) clearTimer(toast.internalId);
+			return prev.map((t) => {
+				if (t.id === id || t.internalId === String(id)) return {
+					...t,
+					isExiting: true
+				};
+				return t;
+			});
+		});
+	});
+	const finalizeRemoval = useEvent((internalId) => {
+		setToasts((prev) => prev.filter((t) => t.internalId !== internalId));
+	});
+	const addToast = useEvent((data, isProgress = false) => {
+		const internalId = generateId();
+		const dedupeKey = generateDedupeKey(data);
+		const duration = isProgress ? null : data.duration ?? DEFAULT_DURATION;
+		setToasts((prev) => {
+			const existingIndex = prev.findIndex((t) => t.dedupeKey === dedupeKey && !t.isExiting);
+			if (existingIndex !== -1) {
+				const existing = prev[existingIndex];
+				clearTimer(existing.internalId);
+				return prev.map((t, i) => {
+					if (i === existingIndex) return {
+						...t,
+						isExiting: true
+					};
+					return t;
+				});
+			}
+			return prev;
+		});
+		const newToast = {
+			...data,
+			internalId,
+			isProgress,
+			dedupeKey,
+			createdAt: Date.now()
+		};
+		setToasts((prev) => {
+			let newToasts = [...prev, newToast];
+			const activeToasts = newToasts.filter((t) => !t.isExiting);
+			const progressToasts = activeToasts.filter((t) => t.isProgress);
+			const temporalToasts = activeToasts.filter((t) => !t.isProgress);
+			while (activeToasts.length > MAX_TOASTS) if (temporalToasts.length > 1 || progressToasts.length < MAX_TOASTS) {
+				const oldestTemporal = temporalToasts.shift();
+				if (oldestTemporal) {
+					clearTimer(oldestTemporal.internalId);
+					newToasts = newToasts.map((t) => {
+						if (t.internalId === oldestTemporal.internalId) return {
+							...t,
+							isExiting: true
+						};
+						return t;
+					});
+					const idx = activeToasts.findIndex((t) => t.internalId === oldestTemporal.internalId);
+					if (idx !== -1) activeToasts.splice(idx, 1);
+				} else break;
+			} else break;
+			return newToasts;
+		});
+		if (duration != null && duration > 0) {
+			const timer = setTimeout(() => {
+				removeToast(data.id ?? internalId);
+			}, duration);
+			timersRef.current.set(internalId, timer);
+		}
+		return data.id ?? internalId;
+	});
+	const updateToast = useEvent((id, data) => {
+		setToasts((prev) => prev.map((t) => {
+			if (t.id === id || t.internalId === String(id)) return {
+				...t,
+				...data
+			};
+			return t;
+		}));
+	});
+	useEffect(() => {
+		return () => {
+			timersRef.current.forEach((timer) => clearTimeout(timer));
+			timersRef.current.clear();
+		};
+	}, []);
+	const contextValue = useMemo(() => ({
+		addToast,
+		removeToast,
+		updateToast,
+		toasts
+	}), [
+		addToast,
+		removeToast,
+		updateToast,
+		toasts
+	]);
+	return /* @__PURE__ */ jsxs(ToastContext.Provider, {
+		value: contextValue,
+		children: [children, /* @__PURE__ */ jsx(ToastContainer, {
+			toasts,
+			onExitComplete: finalizeRemoval
+		})]
+	});
+}
+
+//#endregion
+export { ToastProvider, useToastContext };
+//# sourceMappingURL=ToastProvider.js.map

package/dist/components/overlays/Toast/ToastProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastProvider.js","names":[],"sources":["../../../../src/components/overlays/Toast/ToastProvider.tsx"],"sourcesContent":["import {\n  createContext,\n  Key,\n  ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useEvent } from '../../../_internal';\nimport { tasty } from '../../../tasty';\nimport { DisplayTransition } from '../../helpers/DisplayTransition/DisplayTransition';\nimport { Portal } from '../../portal';\n\nimport { ToastItem } from './ToastItem';\n\nimport type { InternalToast, ToastContextValue, ToastData } from './types';\n\nconst DEFAULT_DURATION = 5000;\nconst MAX_TOASTS = 3;\nconst COLLAPSE_VISIBLE_HEIGHT = 10;\nconst CONTAINER_OFFSET = 16; // Container's top offset from viewport (2x)\n\n// Generate deduplication key from toast data\nfunction generateDedupeKey(data: ToastData): string {\n  const id = data.id;\n\n  if (id != null) {\n    return String(id);\n  }\n\n  // Hash based on title + description + theme\n  const parts = [\n    typeof data.title === 'string' ? data.title : '',\n    typeof data.description === 'string' ? data.description : '',\n    data.theme ?? 'default',\n  ];\n\n  return parts.join('|');\n}\n\nconst ToastContext = createContext<ToastContextValue | null>(null);\n\nexport function useToastContext(): ToastContextValue {\n  const context = useContext(ToastContext);\n\n  if (!context) {\n    throw new Error('useToastContext must be used within a ToastProvider');\n  }\n\n  return context;\n}\n\nconst TOAST_GAP = 8; // Gap between toasts in pixels\n\nconst ToastContainerElement = tasty({\n  styles: {\n    position: 'fixed',\n    top: '2x',\n    left: '50%',\n    transform: 'translateX(-50%)',\n    zIndex: 10000,\n    padding: '1x',\n    height: '0',\n    pointerEvents: 'none',\n  },\n});\n\nconst ToastWrapper = tasty({\n  styles: {\n    position: 'absolute',\n    top: '0',\n    left: '50%',\n    transform: 'translateX(-50%)',\n    width: 'max-content 50x',\n    pointerEvents: 'auto',\n    transition: 'top 0.3s, opacity 0.3s',\n    opacity: {\n      '': 0,\n      isShown: 1,\n    },\n  },\n});\n\ninterface ToastContainerProps {\n  toasts: InternalToast[];\n  onExitComplete: (internalId: string) => void;\n}\n\n// Default height used for initial positioning before measurement\nconst DEFAULT_TOAST_HEIGHT = 56;\n\nfunction ToastContainer({ toasts, onExitComplete }: ToastContainerProps) {\n  const [isCollapsed, setIsCollapsed] = useState(false);\n  const [heights, setHeights] = useState<Record<string, number>>({});\n  const containerRef = useRef<HTMLDivElement>(null);\n  const boundsRef = useRef<DOMRect | null>(null);\n  const toastRefs = useRef<Map<string, HTMLDivElement>>(new Map());\n  // Track last known positions for exiting toasts to prevent animation to top: 0\n  const lastPositionsRef = useRef<Map<string, number>>(new Map());\n\n  // Calculate bounds from all toast elements\n  const updateBounds = useCallback(() => {\n    const refs = toastRefs.current;\n\n    if (refs.size === 0) {\n      boundsRef.current = null;\n\n      return;\n    }\n\n    let minX = Infinity,\n      minY = Infinity,\n      maxX = -Infinity,\n      maxY = -Infinity;\n\n    refs.forEach((el) => {\n      const rect = el.getBoundingClientRect();\n\n      minX = Math.min(minX, rect.left);\n      minY = Math.min(minY, rect.top);\n      maxX = Math.max(maxX, rect.right);\n      maxY = Math.max(maxY, rect.bottom);\n    });\n\n    // Use DOMRect if available (browser), otherwise create a plain object (test environment)\n    if (typeof DOMRect !== 'undefined') {\n      boundsRef.current = new DOMRect(minX, minY, maxX - minX, maxY - minY);\n    } else {\n      boundsRef.current = {\n        x: minX,\n        y: minY,\n        width: maxX - minX,\n        height: maxY - minY,\n        top: minY,\n        right: maxX,\n        bottom: maxY,\n        left: minX,\n        toJSON: () => ({}),\n      } as DOMRect;\n    }\n  }, []);\n\n  // Track mouse position to detect when it leaves toast area\n  useEffect(() => {\n    if (!isCollapsed) return;\n\n    const handleMouseMove = (e: MouseEvent) => {\n      const bounds = boundsRef.current;\n\n      if (!bounds) {\n        setIsCollapsed(false);\n\n        return;\n      }\n\n      // Add some padding to the bounds for smoother UX\n      const padding = 20;\n      const isInBounds =\n        e.clientX >= bounds.left - padding &&\n        e.clientX <= bounds.right + padding &&\n        e.clientY >= bounds.top - padding &&\n        e.clientY <= bounds.bottom + padding;\n\n      if (!isInBounds) {\n        setIsCollapsed(false);\n      }\n    };\n\n    window.addEventListener('mousemove', handleMouseMove);\n\n    return () => window.removeEventListener('mousemove', handleMouseMove);\n  }, [isCollapsed]);\n\n  // Update bounds when toasts change\n  useEffect(() => {\n    updateBounds();\n  }, [toasts, updateBounds]);\n\n  const handleMouseEnter = useCallback(() => {\n    updateBounds();\n    setIsCollapsed(true);\n  }, [updateBounds]);\n\n  // Measure heights after render using useEffect\n  useEffect(() => {\n    const newHeights: Record<string, number> = {};\n    let hasChanges = false;\n\n    toastRefs.current.forEach((el, id) => {\n      const height = el.offsetHeight || DEFAULT_TOAST_HEIGHT;\n\n      newHeights[id] = height;\n\n      if (heights[id] !== height) {\n        hasChanges = true;\n      }\n    });\n\n    // Also check for removed toasts\n    for (const id of Object.keys(heights)) {\n      if (!toastRefs.current.has(id)) {\n        hasChanges = true;\n      }\n    }\n\n    if (hasChanges) {\n      setHeights(newHeights);\n    }\n  });\n\n  // Create ref callback that stores refs without triggering updates\n  const createRefCallback = useCallback(\n    (internalId: string, displayRef: (el: HTMLElement | null) => void) =>\n      (el: HTMLDivElement | null) => {\n        displayRef(el);\n\n        if (el) {\n          toastRefs.current.set(internalId, el);\n        } else {\n          toastRefs.current.delete(internalId);\n        }\n      },\n    [],\n  );\n\n  // Calculate top positions for visible (non-exiting) toasts\n  const visibleToasts = toasts.filter((t) => !t.isExiting);\n\n  const positions = useMemo(() => {\n    const posMap = new Map<string, number>();\n    let currentTop = 0;\n\n    for (const toast of visibleToasts) {\n      posMap.set(toast.internalId, currentTop);\n      const height = heights[toast.internalId] ?? DEFAULT_TOAST_HEIGHT;\n\n      currentTop += height + TOAST_GAP;\n    }\n\n    return posMap;\n  }, [visibleToasts, heights]);\n\n  // Update lastPositionsRef with current positions for visible toasts\n  // This preserves positions for toasts that will exit later\n  useEffect(() => {\n    positions.forEach((pos, id) => {\n      lastPositionsRef.current.set(id, pos);\n    });\n  }, [positions]);\n\n  // Clean up lastPositionsRef when toast exit completes\n  const handleExitComplete = useCallback(\n    (internalId: string) => {\n      lastPositionsRef.current.delete(internalId);\n      onExitComplete(internalId);\n    },\n    [onExitComplete],\n  );\n\n  // Calculate collapsed positions\n  const getToastStyle = useCallback(\n    (toast: InternalToast, index: number, total: number) => {\n      // Use current position for visible toasts, or last known position for exiting toasts\n      const baseTop =\n        positions.get(toast.internalId) ??\n        lastPositionsRef.current.get(toast.internalId) ??\n        0;\n      const height = heights[toast.internalId] ?? DEFAULT_TOAST_HEIGHT;\n\n      if (!isCollapsed) {\n        return { top: `${baseTop}px` };\n      }\n\n      // In collapsed state, all toasts overlap completely\n      // Only COLLAPSE_VISIBLE_HEIGHT of the toast should be visible from viewport top\n      // Container is at CONTAINER_OFFSET from viewport, so we compensate for that\n      const isNewest = index === total - 1;\n      const collapsedTop = COLLAPSE_VISIBLE_HEIGHT - CONTAINER_OFFSET - height;\n\n      return {\n        top: `${collapsedTop}px`,\n        zIndex: index, // Newest on top (highest index = highest z)\n        opacity: isNewest ? 1 : 0,\n        pointerEvents: 'none' as const,\n      };\n    },\n    [isCollapsed, positions, heights],\n  );\n\n  if (toasts.length === 0) return null;\n\n  return (\n    <Portal>\n      <ToastContainerElement ref={containerRef}>\n        {toasts.map((toast) => {\n          const visibleIndex = visibleToasts.findIndex(\n            (t) => t.internalId === toast.internalId,\n          );\n\n          return (\n            <DisplayTransition\n              key={toast.internalId}\n              animateOnMount\n              isShown={!toast.isExiting}\n              onRest={(transition) => {\n                if (transition === 'exit') {\n                  handleExitComplete(toast.internalId);\n                }\n              }}\n            >\n              {({ isShown, ref }) => (\n                <ToastWrapper\n                  ref={createRefCallback(toast.internalId, ref)}\n                  mods={{ isShown }}\n                  style={getToastStyle(\n                    toast,\n                    visibleIndex >= 0 ? visibleIndex : 0,\n                    visibleToasts.length,\n                  )}\n                  onMouseEnter={handleMouseEnter}\n                >\n                  <ToastItem\n                    {...toast.itemProps}\n                    title={toast.title}\n                    description={toast.description}\n                    theme={toast.theme}\n                    icon={toast.icon}\n                    isLoading={toast.isLoading}\n                  />\n                </ToastWrapper>\n              )}\n            </DisplayTransition>\n          );\n        })}\n      </ToastContainerElement>\n    </Portal>\n  );\n}\n\ninterface ToastProviderProps {\n  children: ReactNode;\n}\n\nexport function ToastProvider({ children }: ToastProviderProps) {\n  const [toasts, setToasts] = useState<InternalToast[]>([]);\n  const timersRef = useRef<Map<string, ReturnType<typeof setTimeout>>>(\n    new Map(),\n  );\n  const idCounter = useRef(0);\n\n  const generateId = useCallback(() => {\n    idCounter.current += 1;\n\n    return `toast-${idCounter.current}-${Date.now()}`;\n  }, []);\n\n  const clearTimer = useCallback((internalId: string) => {\n    const timer = timersRef.current.get(internalId);\n\n    if (timer) {\n      clearTimeout(timer);\n      timersRef.current.delete(internalId);\n    }\n  }, []);\n\n  // Mark toast as exiting (triggers exit transition)\n  const removeToast = useEvent((id: Key) => {\n    setToasts((prev) => {\n      const toast = prev.find(\n        (t) => t.id === id || t.internalId === String(id),\n      );\n\n      if (toast) {\n        clearTimer(toast.internalId);\n      }\n\n      // Mark as exiting instead of removing immediately\n      return prev.map((t) => {\n        if (t.id === id || t.internalId === String(id)) {\n          return { ...t, isExiting: true };\n        }\n\n        return t;\n      });\n    });\n  });\n\n  // Actually remove the toast from the array after exit transition completes\n  const finalizeRemoval = useEvent((internalId: string) => {\n    setToasts((prev) => prev.filter((t) => t.internalId !== internalId));\n  });\n\n  const addToast = useEvent((data: ToastData, isProgress = false): Key => {\n    const internalId = generateId();\n    const dedupeKey = generateDedupeKey(data);\n    const duration = isProgress ? null : data.duration ?? DEFAULT_DURATION;\n\n    // Mark existing toast with same dedupe key as exiting\n    setToasts((prev) => {\n      const existingIndex = prev.findIndex(\n        (t) => t.dedupeKey === dedupeKey && !t.isExiting,\n      );\n\n      if (existingIndex !== -1) {\n        const existing = prev[existingIndex];\n\n        clearTimer(existing.internalId);\n\n        // Mark as exiting instead of removing immediately\n        return prev.map((t, i) => {\n          if (i === existingIndex) {\n            return { ...t, isExiting: true };\n          }\n\n          return t;\n        });\n      }\n\n      return prev;\n    });\n\n    const newToast: InternalToast = {\n      ...data,\n      internalId,\n      isProgress,\n      dedupeKey,\n      createdAt: Date.now(),\n    };\n\n    setToasts((prev) => {\n      let newToasts = [...prev, newToast];\n\n      // Enforce max toasts limit (only count non-exiting toasts)\n      const activeToasts = newToasts.filter((t) => !t.isExiting);\n      const progressToasts = activeToasts.filter((t) => t.isProgress);\n      const temporalToasts = activeToasts.filter((t) => !t.isProgress);\n\n      // If we exceed limit, mark oldest temporal toasts as exiting\n      while (activeToasts.length > MAX_TOASTS) {\n        // Always allow at least 1 temporal toast even with 3 progress toasts\n        if (temporalToasts.length > 1 || progressToasts.length < MAX_TOASTS) {\n          const oldestTemporal = temporalToasts.shift();\n\n          if (oldestTemporal) {\n            clearTimer(oldestTemporal.internalId);\n            newToasts = newToasts.map((t) => {\n              if (t.internalId === oldestTemporal.internalId) {\n                return { ...t, isExiting: true };\n              }\n\n              return t;\n            });\n            // Update activeToasts count\n            const idx = activeToasts.findIndex(\n              (t) => t.internalId === oldestTemporal.internalId,\n            );\n\n            if (idx !== -1) activeToasts.splice(idx, 1);\n          } else {\n            break;\n          }\n        } else {\n          break;\n        }\n      }\n\n      return newToasts;\n    });\n\n    // Set auto-dismiss timer for non-progress toasts\n    if (duration != null && duration > 0) {\n      const timer = setTimeout(() => {\n        removeToast(data.id ?? internalId);\n      }, duration);\n\n      timersRef.current.set(internalId, timer);\n    }\n\n    return data.id ?? internalId;\n  });\n\n  const updateToast = useEvent((id: Key, data: Partial<ToastData>) => {\n    setToasts((prev) =>\n      prev.map((t) => {\n        if (t.id === id || t.internalId === String(id)) {\n          return { ...t, ...data };\n        }\n\n        return t;\n      }),\n    );\n  });\n\n  // Cleanup timers on unmount\n  useEffect(() => {\n    return () => {\n      timersRef.current.forEach((timer) => clearTimeout(timer));\n      timersRef.current.clear();\n    };\n  }, []);\n\n  const contextValue = useMemo<ToastContextValue>(\n    () => ({\n      addToast,\n      removeToast,\n      updateToast,\n      toasts,\n    }),\n    [addToast, removeToast, updateToast, toasts],\n  );\n\n  return (\n    <ToastContext.Provider value={contextValue}>\n      {children}\n      <ToastContainer toasts={toasts} onExitComplete={finalizeRemoval} />\n    </ToastContext.Provider>\n  );\n}\n"],"mappings":"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"}

package/dist/components/overlays/Toast/index.d.ts

@@ -0,0 +1,53 @@
+
+import { ProgressToastEmpty, ProgressToastOptions, ToastApi, ToastData, ToastType } from "./types.js";
+import { ToastProvider, useToastContext } from "./ToastProvider.js";
+import { ToastItem, ToastItemProps } from "./ToastItem.js";
+import { getThemeIcon, useToast } from "./useToast.js";
+import { useProgressToast } from "./useProgressToast.js";
+import { ReactNode } from "react";
+
+//#region src/components/overlays/Toast/index.d.ts
+interface ToastProps extends Omit<ToastData, 'duration'> {
+  /** Primary content */
+  children?: ReactNode;
+}
+/**
+ * Declarative Toast component that shows a toast while mounted.
+ *
+ * @example
+ * ```tsx
+ * // Simple toast (visible while mounted)
+ * <Toast theme="success">Saved successfully</Toast>
+ *
+ * // With description
+ * <Toast title="Success" description="Changes saved" theme="success" />
+ * ```
+ */
+declare function Toast(props: ToastProps): null;
+declare namespace Toast {
+  var Progress: typeof ToastProgress;
+}
+interface ToastProgressProps extends ProgressToastOptions {
+  /** Primary content (alternative to title) */
+  children?: ReactNode;
+}
+/**
+ * Declarative Progress Toast component.
+ *
+ * @example
+ * ```tsx
+ * <Toast.Progress
+ *   {...(isLoading
+ *     ? { isLoading: true, title: 'Saving...' }
+ *     : { isLoading: false, title: 'Saved!', theme: 'success' }
+ *   )}
+ * />
+ * ```
+ */
+declare function ToastProgress(props: ToastProgressProps): null;
+type ToastComponent = typeof Toast & {
+  Progress: typeof ToastProgress;
+};
+//#endregion
+export { Toast, ToastComponent, ToastProgressProps, ToastProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/overlays/Toast/index.js

@@ -0,0 +1,84 @@
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4d9db65 | Cube Dev Team */
+import { ToastItem } from "./ToastItem.js";
+import { ToastProvider, useToastContext } from "./ToastProvider.js";
+import { getThemeIcon, useToast } from "./useToast.js";
+import { useProgressToast } from "./useProgressToast.js";
+import { useEffect, useRef } from "react";
+
+//#region src/components/overlays/Toast/index.ts
+/**
+* Declarative Toast component that shows a toast while mounted.
+*
+* @example
+* ```tsx
+* // Simple toast (visible while mounted)
+* <Toast theme="success">Saved successfully</Toast>
+*
+* // With description
+* <Toast title="Success" description="Changes saved" theme="success" />
+* ```
+*/
+function Toast(props) {
+	const { children, ...toastData } = props;
+	const { addToast, removeToast, updateToast } = useToastContext();
+	const toastIdRef = useRef(null);
+	const icon = getThemeIcon(toastData.theme, toastData.icon, toastData.isLoading);
+	useEffect(() => {
+		toastIdRef.current = addToast({
+			...toastData,
+			title: toastData.title ?? children,
+			icon,
+			duration: null
+		}, true);
+		return () => {
+			if (toastIdRef.current != null) {
+				removeToast(toastIdRef.current);
+				toastIdRef.current = null;
+			}
+		};
+	}, []);
+	useEffect(() => {
+		if (toastIdRef.current != null) updateToast(toastIdRef.current, {
+			...toastData,
+			title: toastData.title ?? children,
+			icon
+		});
+	}, [
+		children,
+		toastData.title,
+		toastData.description,
+		toastData.theme,
+		toastData.icon,
+		toastData.isLoading,
+		toastData.id,
+		icon,
+		updateToast
+	]);
+	return null;
+}
+/**
+* Declarative Progress Toast component.
+*
+* @example
+* ```tsx
+* <Toast.Progress
+*   {...(isLoading
+*     ? { isLoading: true, title: 'Saving...' }
+*     : { isLoading: false, title: 'Saved!', theme: 'success' }
+*   )}
+* />
+* ```
+*/
+function ToastProgress(props) {
+	const { children, ...progressOptions } = props;
+	useProgressToast({
+		...progressOptions,
+		title: progressOptions.title ?? children
+	});
+	return null;
+}
+Toast.Progress = ToastProgress;
+
+//#endregion
+export { Toast };
+//# sourceMappingURL=index.js.map

package/dist/components/overlays/Toast/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/overlays/Toast/index.ts"],"sourcesContent":["// Declarative Toast component\nimport { Key, ReactNode, useEffect, useRef } from 'react';\n\nimport { useToastContext } from './ToastProvider';\nimport { ProgressToastOptions, ToastData, ToastType } from './types';\nimport { useProgressToast } from './useProgressToast';\nimport { getThemeIcon } from './useToast';\n\nexport { ToastProvider, useToastContext } from './ToastProvider';\nexport { ToastItem } from './ToastItem';\nexport type { ToastItemProps } from './ToastItem';\nexport { useToast, getThemeIcon } from './useToast';\nexport { useProgressToast } from './useProgressToast';\nexport type {\n  ToastData,\n  ToastType,\n  ToastApi,\n  ProgressToastOptions,\n  ProgressToastEmpty,\n} from './types';\n\nexport interface ToastProps extends Omit<ToastData, 'duration'> {\n  /** Primary content */\n  children?: ReactNode;\n  /** Duration is ignored for declarative toasts - they stay visible while mounted */\n}\n\n/**\n * Declarative Toast component that shows a toast while mounted.\n *\n * @example\n * ```tsx\n * // Simple toast (visible while mounted)\n * <Toast theme=\"success\">Saved successfully</Toast>\n *\n * // With description\n * <Toast title=\"Success\" description=\"Changes saved\" theme=\"success\" />\n * ```\n */\nexport function Toast(props: ToastProps): null {\n  const { children, ...toastData } = props;\n  const { addToast, removeToast, updateToast } = useToastContext();\n  const toastIdRef = useRef<Key | null>(null);\n\n  // Apply theme-based icon if not loading and no icon provided\n  const icon = getThemeIcon(\n    toastData.theme,\n    toastData.icon,\n    toastData.isLoading,\n  );\n\n  useEffect(() => {\n    // Add toast on mount\n    toastIdRef.current = addToast(\n      {\n        ...toastData,\n        title: toastData.title ?? children,\n        icon,\n        duration: null, // Persistent while mounted\n      },\n      true, // isProgress = true (persistent)\n    );\n\n    return () => {\n      // Remove toast on unmount\n      if (toastIdRef.current != null) {\n        removeToast(toastIdRef.current);\n        toastIdRef.current = null;\n      }\n    };\n  }, []);\n\n  // Update toast when props change\n  useEffect(() => {\n    if (toastIdRef.current != null) {\n      updateToast(toastIdRef.current, {\n        ...toastData,\n        title: toastData.title ?? children,\n        icon,\n      });\n    }\n  }, [\n    children,\n    toastData.title,\n    toastData.description,\n    toastData.theme,\n    toastData.icon,\n    toastData.isLoading,\n    toastData.id,\n    icon,\n    // Note: itemProps is intentionally excluded - it's an object that would cause\n    // unnecessary re-runs. Users needing dynamic itemProps should remount the component.\n    updateToast,\n  ]);\n\n  return null;\n}\n\nexport interface ToastProgressProps extends ProgressToastOptions {\n  /** Primary content (alternative to title) */\n  children?: ReactNode;\n}\n\n/**\n * Declarative Progress Toast component.\n *\n * @example\n * ```tsx\n * <Toast.Progress\n *   {...(isLoading\n *     ? { isLoading: true, title: 'Saving...' }\n *     : { isLoading: false, title: 'Saved!', theme: 'success' }\n *   )}\n * />\n * ```\n */\nfunction ToastProgress(props: ToastProgressProps): null {\n  const { children, ...progressOptions } = props;\n\n  useProgressToast({\n    ...progressOptions,\n    title: progressOptions.title ?? children,\n  });\n\n  return null;\n}\n\nToast.Progress = ToastProgress;\n\n// Type for compound component\nexport type ToastComponent = typeof Toast & {\n  Progress: typeof ToastProgress;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAuCA,SAAgB,MAAM,OAAyB;CAC7C,MAAM,EAAE,UAAU,GAAG,cAAc;CACnC,MAAM,EAAE,UAAU,aAAa,gBAAgB,iBAAiB;CAChE,MAAM,aAAa,OAAmB,KAAK;CAG3C,MAAM,OAAO,aACX,UAAU,OACV,UAAU,MACV,UAAU,UACX;AAED,iBAAgB;AAEd,aAAW,UAAU,SACnB;GACE,GAAG;GACH,OAAO,UAAU,SAAS;GAC1B;GACA,UAAU;GACX,EACD,KACD;AAED,eAAa;AAEX,OAAI,WAAW,WAAW,MAAM;AAC9B,gBAAY,WAAW,QAAQ;AAC/B,eAAW,UAAU;;;IAGxB,EAAE,CAAC;AAGN,iBAAgB;AACd,MAAI,WAAW,WAAW,KACxB,aAAY,WAAW,SAAS;GAC9B,GAAG;GACH,OAAO,UAAU,SAAS;GAC1B;GACD,CAAC;IAEH;EACD;EACA,UAAU;EACV,UAAU;EACV,UAAU;EACV,UAAU;EACV,UAAU;EACV,UAAU;EACV;EAGA;EACD,CAAC;AAEF,QAAO;;;;;;;;;;;;;;;AAqBT,SAAS,cAAc,OAAiC;CACtD,MAAM,EAAE,UAAU,GAAG,oBAAoB;AAEzC,kBAAiB;EACf,GAAG;EACH,OAAO,gBAAgB,SAAS;EACjC,CAAC;AAEF,QAAO;;AAGT,MAAM,WAAW"}

package/dist/components/overlays/Toast/types.d.ts

@@ -0,0 +1,72 @@
+
+import { CubeItemProps } from "../../content/Item/Item.js";
+import { Key, ReactNode } from "react";
+
+//#region src/components/overlays/Toast/types.d.ts
+type ToastType = 'default' | 'success' | 'danger' | 'warning' | 'note';
+interface ToastData {
+  /** Unique identifier for deduplication (auto-generated if not provided) */
+  id?: Key;
+  /** Primary content (→ Item children) */
+  title?: ReactNode;
+  /** Secondary content (or primary if no title) */
+  description?: ReactNode;
+  /** Visual theme */
+  theme?: ToastType;
+  /** Icon to display */
+  icon?: ReactNode;
+  /** Whether the toast is in loading state (shows loading indicator) */
+  isLoading?: boolean;
+  /** Duration in ms before auto-dismiss. null = persistent */
+  duration?: number | null;
+  /** Additional Item props to pass through */
+  itemProps?: Partial<CubeItemProps>;
+}
+interface ProgressToastOptions extends Omit<ToastData, 'duration'> {
+  /** Whether the toast is in loading state */
+  isLoading: boolean;
+}
+/**
+ * Empty value that indicates no toast should be shown.
+ * When passed to useProgressToast, any existing toast is immediately removed.
+ */
+type ProgressToastEmpty = null | undefined | false | Record<string, never>;
+interface ToastApi {
+  /** Show a toast with default theme */
+  (data: ToastData | ReactNode): Key;
+  /** Show a success toast */
+  success: (data: ToastData | ReactNode) => Key;
+  /** Show a danger toast */
+  danger: (data: ToastData | ReactNode) => Key;
+  /** Show a warning toast */
+  warning: (data: ToastData | ReactNode) => Key;
+  /** Show a note toast */
+  note: (data: ToastData | ReactNode) => Key;
+  /** Remove a toast by id */
+  remove: (id: Key) => void;
+}
+interface InternalToast extends ToastData {
+  /** Internal unique identifier */
+  internalId: string;
+  /** Whether this is a progress toast (persistent) */
+  isProgress: boolean;
+  /** Deduplication key */
+  dedupeKey: string;
+  /** Timestamp when toast was created */
+  createdAt: number;
+  /** Whether the toast is exiting (used for exit transition) */
+  isExiting?: boolean;
+}
+interface ToastContextValue {
+  /** Add a toast */
+  addToast: (data: ToastData, isProgress?: boolean) => Key;
+  /** Remove a toast by id */
+  removeToast: (id: Key) => void;
+  /** Update a toast */
+  updateToast: (id: Key, data: Partial<ToastData>) => void;
+  /** Current toasts */
+  toasts: InternalToast[];
+}
+//#endregion
+export { ProgressToastEmpty, ProgressToastOptions, ToastApi, ToastContextValue, ToastData, ToastType };
+//# sourceMappingURL=types.d.ts.map

package/dist/components/overlays/Toast/useProgressToast.d.ts

@@ -0,0 +1,32 @@
+
+import { ProgressToastEmpty, ProgressToastOptions } from "./types.js";
+
+//#region src/components/overlays/Toast/useProgressToast.d.ts
+/**
+ * Hook to display a progress toast that persists while loading.
+ *
+ * @example
+ * ```tsx
+ * useProgressToast(
+ *   isLoading
+ *     ? { isLoading: true, title: 'Saving...', icon: <Spinner /> }
+ *     : { isLoading: false, title: 'Saved!', icon: <IconCheck />, theme: 'success' }
+ * );
+ *
+ * // Or with error handling:
+ * useProgressToast(
+ *   isLoading
+ *     ? { isLoading: true, title: 'Saving...', icon: <Spinner /> }
+ *     : isError
+ *       ? { isLoading: false, title: 'Error', description: errorMessage, theme: 'danger' }
+ *       : { isLoading: false, title: 'Saved!', theme: 'success' }
+ * );
+ *
+ * // Pass empty value to immediately remove any existing toast:
+ * useProgressToast(shouldShow ? { isLoading: true, title: 'Loading...' } : null);
+ * ```
+ */
+declare function useProgressToast(options: ProgressToastOptions | ProgressToastEmpty): void;
+//#endregion
+export { useProgressToast };
+//# sourceMappingURL=useProgressToast.d.ts.map