50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:Tf19d,"use client"; import * as React from "react"; import { cva } from "class-variance-authority"; import { Popover } from "@base-ui/react/popover"; import { Toast } from "@base-ui/react/toast"; import { AnimatePresence } from "motion/react"; import { motion } from "motion/react"; import { HugeiconsIcon } from "@hugeicons/react"; import { AlertCircleIcon, Cancel01Icon, CheckmarkCircle02Icon, InformationCircleIcon, Loading03Icon, TriangleAlertIcon, } from "@hugeicons/core-free-icons"; import { cn } from "@/lib/utils"; import { Button } from "@/registry/default/button/button"; import { solidSurface } from "@/registry/default/lib/elevated"; import "./toast.css"; const toastManager = Toast.createToastManager(); const anchoredToastManager = Toast.createToastManager(); // Map groupId -> Base UI toastId const groupToToastMap = new Map(); // Map itemId -> groupId for lookups const groupItemToGroupMap = new Map(); // Map groupId -> GroupedToastData (toastManager doesn't expose getSnapshot) const groupDataMap = new Map(); const TOAST_ICONS = { success: CheckmarkCircle02Icon, error: AlertCircleIcon, warning: TriangleAlertIcon, info: InformationCircleIcon, loading: Loading03Icon, } as const; const toastIconVariants = cva("", { variants: { type: { default: "", success: "text-success-foreground", error: "text-danger-foreground", warning: "text-warning-foreground", info: "text-info-foreground", loading: "text-muted-foreground animate-spin", }, }, }); type SwipeDirection = "up" | "down" | "left" | "right"; function getSwipeDirection(position: ToastPosition): SwipeDirection[] { const vertical: SwipeDirection = position.startsWith("top") ? "up" : "down"; if (position.includes("center")) return [vertical]; if (position.includes("left")) return ["left", vertical]; return ["right", vertical]; } function upsertReplayClassName(toast: { updateKey?: number; }): string | undefined { if (!toast.updateKey) return undefined; return toast.updateKey % 2 === 0 ? "animate-[pulse-even_0.28s_ease]" : "animate-[pulse-odd_0.28s_ease]"; } // Shared classes for stacked toast roots (StackedToastItem + GroupedToastRoot). // Each callsite appends its own extras (pulse animation, overflow behavior, etc). // Shadow level=4 (heavier than a popover — toast floats unattached from any anchor); // the bg uses color-mix so stacked toasts get progressively darker. const TOAST_ROOT_CLASSES = [ // Base styles & visual "text-popover-foreground data-expanded:bg-(--popup-surface) absolute z-[calc(9999-var(--toast-index))] h-(--toast-calc-height) w-full rounded-lg select-none [transition:transform_.5s_cubic-bezier(.22,1,.36,1),opacity_.5s,height_.15s,background-color_.5s]", // Surface elevation — manual composition because the bg uses color-mix for stacking. // `[--popup-surface:var(--surface-3)]` exposes the surface color to descendants; // `shadow-[drops-4,rim-3]` pairs a level-4 shadow weight with a level-3 rim color. "[--popup-surface:var(--surface-3)]", "shadow-[var(--surface-shadow-4),var(--surface-rim-3)]", // Stacked-depth bg: tints --popup-surface 1% darker per toast-index layer "bg-[color-mix(in_srgb,var(--popup-surface),var(--color-black)_calc(1%*max(0,var(--toast-index,0))))]", // Positioning "data-[position*=top]:top-0 data-[position*=top]:right-0 data-[position*=top]:left-0 data-[position*=top]:origin-[50%_calc(50%-50%*min(var(--toast-index,0),1))]", "data-[position*=bottom]:right-0 data-[position*=bottom]:bottom-0 data-[position*=bottom]:left-0 data-[position*=bottom]:origin-[50%_calc(50%+50%*min(var(--toast-index,0),1))]", // Gap fill for hover "after:absolute after:left-0 after:h-[calc(var(--toast-gap)+1px)] after:w-full", "data-[position*=top]:after:bottom-full", "data-[position*=bottom]:after:top-full", // CSS variables "[--toast-calc-height:var(--toast-frontmost-height,var(--toast-height))] [--toast-gap:--spacing(3)] [--toast-peek:--spacing(3)] [--toast-scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--toast-shrink:calc(1-var(--toast-scale))]", "data-[position*=top]:[--toast-calc-offset-y:calc(var(--toast-offset-y)+(var(--toast-index)*var(--toast-gap))+var(--toast-swipe-movement-y))]", "data-[position*=bottom]:[--toast-calc-offset-y:calc(var(--toast-offset-y)*-1+(var(--toast-index)*var(--toast-gap)*-1)+var(--toast-swipe-movement-y))]", // Default state transform "data-[position*=top]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--toast-peek))+(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]", "data-[position*=bottom]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--toast-peek))-(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]", // Limited state "data-limited:opacity-0", // Expanded state "data-expanded:h-(--toast-height)", "data-position:data-expanded:transform-[translateX(var(--toast-swipe-movement-x))_translateY(var(--toast-calc-offset-y))]", // Starting style "data-[position*=top]:data-starting-style:transform-[translateY(calc(-100%-var(--toast-inset)))]", "data-[position*=bottom]:data-starting-style:transform-[translateY(calc(100%+var(--toast-inset)))]", // Ending style "data-ending-style:opacity-0", "data-[position*=top]:data-ending-style:not-data-limited:not-data-swipe-direction:transform-[translateY(calc(-100%-var(--toast-inset)))]", "data-[position*=bottom]:data-ending-style:not-data-limited:not-data-swipe-direction:transform-[translateY(calc(100%+var(--toast-inset)))]", // Swipe direction ending styles "data-ending-style:data-[swipe-direction=down]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]", "data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-ending-style:data-[swipe-direction=up]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]", // Expanded swipe direction ending styles "data-expanded:data-ending-style:data-[swipe-direction=down]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]", "data-expanded:data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-expanded:data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-expanded:data-ending-style:data-[swipe-direction=up]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]", ]; export interface ToastOptions { /** Fixed ID for deduplication. If a toast with this ID already exists, it updates in place. */ id?: string; title?: string; description?: string; type?: "default" | "success" | "error" | "warning" | "info"; duration?: number; priority?: "low" | "high"; action?: { label: string; onClick: () => void; }; data?: TData; onClose?: () => void; onRemove?: () => void; /** Whether to show the close button. Defaults to true. */ showCloseButton?: boolean; } export interface AnchoredToastOptions< TData extends object = object, > extends Omit, "type"> { anchor: Element | React.RefObject; side?: "top" | "bottom" | "left" | "right"; sideOffset?: number; align?: "start" | "center" | "end"; alignOffset?: number; arrow?: boolean; } interface ToastData { id: string; updateKey?: number; title?: string; description?: string; type?: "default" | "success" | "error" | "warning" | "info" | "loading"; action?: { label: string; onClick: () => void; }; showCloseButton?: boolean; data?: unknown; positionerProps?: { anchor?: Element | null; side?: "top" | "bottom" | "left" | "right"; sideOffset?: number; align?: "start" | "center" | "end"; alignOffset?: number; }; } type ToastType = | "default" | "loading" | "success" | "error" | "warning" | "info"; /** Duration in ms before a completed group item auto-dismisses */ const GROUP_ITEM_DISMISS_DURATION = 5000; /** Individual item within a grouped toast */ export interface GroupedToastItem { id: string; title?: string; description?: string; type?: ToastType; action?: { label: string; onClick: () => void; }; data?: object; createdAt: number; showCloseButton?: boolean; /** Timestamp when this item transitioned to a completed state */ completedAt?: number; /** Duration for progress bar after completing (loading items only). Defaults to GROUP_ITEM_DISMISS_DURATION. */ duration?: number; } /** * Counts passed to groupSummary function. * * Note: `completedCount`, `successCount`, `errorCount`, `warningCount`, and `infoCount` * are **historical** - they persist even after completed items are auto-dismissed. * This ensures accurate summaries like "3 of 5 succeeded" remain correct after items fade out. * Only `loadingCount` reflects currently visible loading items. */ export interface GroupSummaryCounts { /** Number of items currently in loading state (reflects visible items) */ loadingCount: number; /** Total items that have completed historically (persists after dismiss) */ completedCount: number; /** Total items: loadingCount + completedCount */ totalCount: number; /** Items that completed with type 'success' (historical, persists after dismiss) */ successCount: number; /** Items that completed with type 'error' (historical, persists after dismiss) */ errorCount: number; /** Items that completed with type 'warning' (historical, persists after dismiss) */ warningCount: number; /** Items that completed with type 'info' (historical, persists after dismiss) */ infoCount: number; } export interface GroupedToastOptions { groupId: string; title?: string; description?: string; type?: ToastType; action?: { label: string; onClick: () => void; }; data?: TData; onClose?: () => void; onRemove?: () => void; /** Whether to show the close button. Defaults to true. */ showCloseButton?: boolean; /** Summary text or function. Function receives counts: loadingCount (in-progress items) and totalCount (all items including completed). */ groupSummary: string | ((counts: GroupSummaryCounts) => string); groupAction?: { label: string; expandedLabel?: string; }; /** Duration in ms before the group auto-dismisses. Resets on each new item added. */ duration?: number; } interface GroupedPromiseMessage { title?: string; description?: string; type?: ToastType; } /** Messages for each state of a grouped promise toast */ export interface GroupedPromiseMessages { loading: GroupedPromiseMessage & { action?: { label: string; onClick: () => void }; }; success: PromiseMessage | ((data: T) => GroupedPromiseMessage); error: PromiseMessage | ((error: Error) => GroupedPromiseMessage); /** Message to show when aborted via AbortController. Defaults to error message. */ aborted?: PromiseMessage | (() => GroupedPromiseMessage); } export interface GroupedPromiseOptions extends Omit< GroupedToastOptions, "type" | "title" | "description" | "action" > { /** AbortSignal for cancellation support */ signal?: AbortSignal; } /** Historical counts that only increment (never decrement on item dismiss) */ interface HistoricalCounts { success: number; error: number; warning: number; info: number; } interface GroupedToastData { isGrouped: true; groupId: string; /** Pending items (loading state) */ items: GroupedToastItem[]; /** Completed items that are transitioning out with progress bar */ completedItems: GroupedToastItem[]; isExpanded: boolean; summary: string | ((counts: GroupSummaryCounts) => string); action: { label: string; expandedLabel: string; }; /** True once we've shown "All complete" (2+ items completed simultaneously) - stays in summary mode */ hasShownAllComplete: boolean; /** Duration in ms, stored so we can pass it on update to reset timer */ duration?: number; /** Historical counts that persist even after items are dismissed */ historicalCounts: HistoricalCounts; } function baseToast(jsx: React.ReactElement): string | undefined; function baseToast( jsx: React.ReactElement, options: Omit, "title" | "description">, ): string | undefined; function baseToast( options: ToastOptions, ): string | undefined; function baseToast( optionsOrJSX: ToastOptions | React.ReactElement, jsxOptions?: Omit, "title" | "description">, ): string | undefined { if (React.isValidElement(optionsOrJSX)) { return toastManager.add({ ...(jsxOptions?.id && { id: jsxOptions.id }), title: "", description: "", type: jsxOptions?.type || "default", timeout: jsxOptions?.duration || undefined, priority: jsxOptions?.priority || "low", ...(jsxOptions?.action && { actionProps: { children: jsxOptions.action.label, onClick: jsxOptions.action.onClick, }, }), data: { customJSX: optionsOrJSX, ...(jsxOptions?.data && jsxOptions.data), showCloseButton: jsxOptions?.showCloseButton ?? true, }, ...(jsxOptions?.onClose && { onClose: jsxOptions.onClose }), ...(jsxOptions?.onRemove && { onRemove: jsxOptions.onRemove }), }); } const options = optionsOrJSX as ToastOptions; return toastManager.add({ ...(options.id && { id: options.id }), title: options.title, description: options.description || "", type: options.type || "default", timeout: options.duration || undefined, priority: options.priority || "low", ...(options.action && { actionProps: { children: options.action.label, onClick: options.action.onClick, }, }), data: { ...(options.data || {}), showCloseButton: options.showCloseButton ?? true, }, ...(options.onClose && { onClose: options.onClose }), ...(options.onRemove && { onRemove: options.onRemove }), }); } /** Message format for promise toasts - can be a string or an object with title/description */ type PromiseMessage = string | { title?: string; description?: string }; /** Promise message that can also be a function returning the message */ type PromiseMessageOrFn = PromiseMessage | ((data: T) => PromiseMessage); const promise = async ( promiseToResolve: Promise, messages: { loading: PromiseMessage; success: PromiseMessageOrFn; error: PromiseMessageOrFn; }, ) => { const resolveMessage = (msg: PromiseMessageOrFn, data: U) => typeof msg === "function" ? msg(data) : msg; return toastManager.promise(promiseToResolve, { loading: messages.loading, success: (data: T) => resolveMessage(messages.success, data), error: (err: Error) => resolveMessage(messages.error, err), }); }; function createTypedToast(type: NonNullable) { return ( optionsOrJSX: Omit, "type"> | React.ReactElement, jsxOptions?: Omit, "title" | "description" | "type">, ) => { if (React.isValidElement(optionsOrJSX)) { return baseToast(optionsOrJSX, { ...jsxOptions, type }); } return baseToast({ ...optionsOrJSX, type }); }; } /** The fields `toast.update()` applies; other ToastOptions are set at creation only. */ export type ToastUpdateOptions = Pick< ToastOptions, "title" | "description" | "type" | "data" >; function toUpdateOptions( next: ToastUpdateOptions, prevToast: Toast.Root.ToastObject, ): Record { const updateOptions: Record = {}; if (next.title !== undefined) updateOptions.title = next.title; if (next.description !== undefined) updateOptions.description = next.description; if (next.type !== undefined) updateOptions.type = next.type; // Base UI replaces `data` wholesale; merge so internal keys (showCloseButton, customJSX) survive. if (next.data !== undefined) updateOptions.data = { ...prevToast.data, ...next.data }; return updateOptions; } export const toast = Object.assign(baseToast, { success: createTypedToast("success"), error: createTypedToast("error"), warning: createTypedToast("warning"), info: createTypedToast("info"), promise, dismiss: (toastId: string) => { return toastManager.close(toastId); }, /** Pass a function to derive the update from the current toast (e.g. incrementing a count in `data`). */ update: ( toastId: string, options: | ToastUpdateOptions | ((prevToast: Toast.Root.ToastObject) => ToastUpdateOptions), ) => { return toastManager.update(toastId, (prevToast) => toUpdateOptions( typeof options === "function" ? options(prevToast) : options, prevToast, ), ); }, /** Show an anchored toast near an element */ anchored: ( options: AnchoredToastOptions, ) => { const anchor = options.anchor instanceof Element ? options.anchor : options.anchor?.current; if (!anchor) { console.warn("Toast anchor element not found"); return; } return anchoredToastManager.add({ title: options.title, description: options.description || "", timeout: options.duration || undefined, priority: options.priority || "low", ...(options.action && { actionProps: { children: options.action.label, onClick: options.action.onClick, }, }), data: { ...(options.data || {}), arrow: options.arrow ?? false, }, positionerProps: { anchor, side: options.side ?? "top", sideOffset: options.sideOffset ?? 8, align: options.align, alignOffset: options.alignOffset, }, ...(options.onClose && { onClose: options.onClose }), ...(options.onRemove && { onRemove: options.onRemove }), }); }, /** Dismiss an anchored toast */ dismissAnchored: (toastId: string) => { return anchoredToastManager.close(toastId); }, /** Show a grouped toast that collapses multiple items into a summary */ grouped: ( options: GroupedToastOptions, ) => { const existingToastId = groupToToastMap.get(options.groupId); const itemId = `grouped-${options.groupId}-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`; const isLoading = options.type === "loading"; const newItem: GroupedToastItem = { id: itemId, title: options.title, description: options.description, type: options.type, action: options.action, data: options.data, createdAt: Date.now(), showCloseButton: options.showCloseButton ?? true, // For loading items, duration controls progress bar time after success duration: isLoading ? options.duration : undefined, }; if (existingToastId) { const existingData = groupDataMap.get(options.groupId); if (existingData) { const updatedHistoricalCounts = { ...existingData.historicalCounts }; if ( newItem.type === "success" || newItem.type === "error" || newItem.type === "warning" || newItem.type === "info" ) { updatedHistoricalCounts[newItem.type]++; } const updatedData: GroupedToastData = { ...existingData, items: [...existingData.items, newItem], historicalCounts: updatedHistoricalCounts, }; groupDataMap.set(options.groupId, updatedData); // Pass timeout to reset Base UI's built-in timer (pauses on hover/drag) toastManager.update(existingToastId, { data: updatedData, timeout: existingData.duration ?? 0, }); } } else { const groupId = options.groupId; const groupData: GroupedToastData = { isGrouped: true, groupId, items: [newItem], completedItems: [], isExpanded: false, summary: options.groupSummary, action: { label: options.groupAction?.label ?? "Show", expandedLabel: options.groupAction?.expandedLabel ?? "Hide", }, hasShownAllComplete: false, // For non-loading items, duration controls group auto-dismiss // For loading items, duration is stored on the item for progress bar duration: isLoading ? undefined : options.duration, historicalCounts: { success: newItem.type === "success" ? 1 : 0, error: newItem.type === "error" ? 1 : 0, warning: newItem.type === "warning" ? 1 : 0, info: newItem.type === "info" ? 1 : 0, }, }; const toastId = toastManager.add({ title: "", description: "", data: groupData, // Use Base UI's timeout for auto-dismiss; loading items pass 0 (wait for updateGroupItem). timeout: isLoading ? 0 : (options.duration ?? 0), onClose: () => { const data = groupDataMap.get(groupId); if (data) { data.items.forEach((item) => groupItemToGroupMap.delete(item.id)); (data.completedItems ?? []).forEach((item) => groupItemToGroupMap.delete(item.id), ); } groupToToastMap.delete(groupId); groupDataMap.delete(groupId); }, }); if (toastId) { groupToToastMap.set(groupId, toastId); groupDataMap.set(groupId, groupData); } } groupItemToGroupMap.set(itemId, options.groupId); return itemId; }, /** Dismiss a single item from a grouped toast (checks both pending and completed arrays) */ dismissGroupItem: (itemId: string) => { const groupId = groupItemToGroupMap.get(itemId); if (!groupId) return; const toastId = groupToToastMap.get(groupId); if (!toastId) return; const data = groupDataMap.get(groupId); if (!data) return; const inPending = data.items.some((item) => item.id === itemId); const inCompleted = (data.completedItems ?? []).some( (item) => item.id === itemId, ); let newItems = data.items; let newCompletedItems = data.completedItems ?? []; if (inPending) { newItems = data.items.filter((item) => item.id !== itemId); } if (inCompleted) { newCompletedItems = newCompletedItems.filter( (item) => item.id !== itemId, ); } groupItemToGroupMap.delete(itemId); if (newItems.length === 0 && newCompletedItems.length === 0) { toastManager.close(toastId); groupToToastMap.delete(groupId); groupDataMap.delete(groupId); } else { const updatedData: GroupedToastData = { ...data, items: newItems, completedItems: newCompletedItems, // Collapse if only 1 pending item remains and no completed isExpanded: newItems.length <= 1 && newCompletedItems.length === 0 ? false : data.isExpanded, }; groupDataMap.set(groupId, updatedData); toastManager.update(toastId, { data: updatedData }); } }, /** Dismiss an entire group of toasts */ dismissGroup: (groupId: string) => { const toastId = groupToToastMap.get(groupId); if (!toastId) return; const data = groupDataMap.get(groupId); if (data) { data.items.forEach((item) => groupItemToGroupMap.delete(item.id)); (data.completedItems ?? []).forEach((item) => groupItemToGroupMap.delete(item.id), ); } toastManager.close(toastId); groupToToastMap.delete(groupId); groupDataMap.delete(groupId); }, /** Update a single item in a grouped toast */ updateGroupItem: ( itemId: string, options: Partial>, ) => { const groupId = groupItemToGroupMap.get(itemId); if (!groupId) return; const toastId = groupToToastMap.get(groupId); if (!toastId) return; const data = groupDataMap.get(groupId); if (!data) return; const currentItem = data.items.find((item) => item.id === itemId); const wasLoading = currentItem?.type === "loading"; const isNowComplete = options.type !== undefined && options.type !== "loading"; if (wasLoading && isNowComplete && currentItem) { // Move item from pending to completed const newItems = data.items.filter((item) => item.id !== itemId); const completedItem: GroupedToastItem = { ...currentItem, ...options, completedAt: Date.now(), }; // Insert at beginning (newest on top) const newCompletedItems = [completedItem, ...(data.completedItems ?? [])]; const completeCount = newCompletedItems.length; const shouldShowAllComplete = completeCount >= 2; // Increment historical counts (these persist even after items are dismissed) const completedType = completedItem.type as ToastType; const newHistoricalCounts = { ...data.historicalCounts }; if (completedType === "success") newHistoricalCounts.success++; else if (completedType === "error") newHistoricalCounts.error++; else if (completedType === "warning") newHistoricalCounts.warning++; else if (completedType === "info") newHistoricalCounts.info++; // "default" is the unstyled/neutral variant - count as success else if (completedType === "default") newHistoricalCounts.success++; const updatedData: GroupedToastData = { ...data, items: newItems, completedItems: newCompletedItems, hasShownAllComplete: data.hasShownAllComplete || shouldShowAllComplete, historicalCounts: newHistoricalCounts, }; groupDataMap.set(groupId, updatedData); const dismissDuration = currentItem.duration ?? GROUP_ITEM_DISMISS_DURATION; if (newItems.length === 0) { // Last pending item — use Base UI's native timer (pauses on drag/hover). toastManager.update(toastId, { data: updatedData, timeout: dismissDuration, }); } else { // Still pending items remain — Base UI timer can't be per-item, use setTimeout. toastManager.update(toastId, { data: updatedData }); setTimeout(() => { toast.dismissCompletedItem(itemId); }, dismissDuration); } } else { const newItems = data.items.map((item) => item.id === itemId ? { ...item, ...options } : item, ); const updatedData: GroupedToastData = { ...data, items: newItems, }; groupDataMap.set(groupId, updatedData); toastManager.update(toastId, { data: updatedData }); } }, /** Dismiss a completed item (removes from completedItems array) */ dismissCompletedItem: (itemId: string) => { const groupId = groupItemToGroupMap.get(itemId); if (!groupId) return; const toastId = groupToToastMap.get(groupId); if (!toastId) return; const data = groupDataMap.get(groupId); if (!data) return; const newCompletedItems = (data.completedItems ?? []).filter( (item) => item.id !== itemId, ); groupItemToGroupMap.delete(itemId); // Check if entire group should close if (data.items.length === 0 && newCompletedItems.length === 0) { toastManager.close(toastId); groupToToastMap.delete(groupId); groupDataMap.delete(groupId); return; } const updatedData: GroupedToastData = { ...data, completedItems: newCompletedItems, // Collapse if only 1 pending item remains and no completed (unless in group mode) isExpanded: data.items.length <= 1 && newCompletedItems.length === 0 && !data.hasShownAllComplete ? false : data.isExpanded, }; groupDataMap.set(groupId, updatedData); toastManager.update(toastId, { data: updatedData }); }, /** Show a grouped toast that resolves with a promise, handling loading/success/error states */ groupedPromise: async ( promiseToResolve: Promise, messages: GroupedPromiseMessages, options: GroupedPromiseOptions, ): Promise => { const resolveMessage = ( msg: PromiseMessage | ((data: U) => GroupedPromiseMessage), data: U, ): GroupedPromiseMessage => { if (typeof msg === "function") { return msg(data); } if (typeof msg === "string") { return { title: msg }; } return msg; }; const itemId = toast.grouped({ ...options, title: messages.loading.title, description: messages.loading.description, type: "loading", action: messages.loading.action, }); if (!itemId) { return promiseToResolve; } let handled = false; let wasAborted = false; if (options.signal) { const handleAbort = () => { if (handled) return; handled = true; wasAborted = true; const abortedMsg: GroupedPromiseMessage = messages.aborted ? typeof messages.aborted === "function" ? messages.aborted() : typeof messages.aborted === "string" ? { title: messages.aborted } : messages.aborted : { title: "Cancelled" }; toast.updateGroupItem(itemId, { title: abortedMsg.title, description: abortedMsg.description, type: abortedMsg.type ?? "error", action: undefined, }); }; if (options.signal.aborted) { handleAbort(); throw new DOMException("Aborted", "AbortError"); } options.signal.addEventListener("abort", handleAbort, { once: true }); } try { const result = await promiseToResolve; if (!handled) { handled = true; const successMsg = resolveMessage(messages.success, result); toast.updateGroupItem(itemId, { title: successMsg.title, description: successMsg.description, type: successMsg.type ?? "success", action: undefined, }); } return result; } catch (error) { if (!handled) { handled = true; const errorMsg = resolveMessage( messages.error, error instanceof Error ? error : new Error(String(error)), ); toast.updateGroupItem(itemId, { title: errorMsg.title, description: errorMsg.description, type: errorMsg.type ?? "error", action: undefined, }); } // Re-throw as AbortError to match fetch() behavior (error.name === 'AbortError'). if (wasAborted) { throw new DOMException("Aborted", "AbortError"); } throw error; } }, }); export type ToastPosition = | "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right"; interface ToastProviderProps { children: React.ReactNode; position?: ToastPosition; limit?: number; timeout?: number; container?: HTMLElement | React.RefObject | null; } export function ToastProvider({ children, position = "bottom-right", limit = 3, timeout = 5000, container, }: ToastProviderProps) { return ( {children} ); } function StackedToasts({ position }: { position: ToastPosition }) { const { toasts } = Toast.useToastManager(); const swipeDirection = getSwipeDirection(position); return ( <> {toasts.map((toast) => ( ))} ); } interface StackedToastItemProps { toast: ToastData; position: ToastPosition; swipeDirection: SwipeDirection[]; } function StackedToastItem({ toast, position, swipeDirection, }: StackedToastItemProps) { const isGrouped = toast.data && typeof toast.data === "object" && "isGrouped" in toast.data && (toast.data as GroupedToastData).isGrouped === true; if (isGrouped) { return ( ); } const type = toast.type || "default"; const hasCustomJSX = toast.data && typeof toast.data === "object" && "customJSX" in toast.data; const showCloseButton = toast.data && typeof toast.data === "object" && "showCloseButton" in toast.data && (toast.data as Record).showCloseButton === false ? false : true; const Icon = type !== "default" ? TOAST_ICONS[type as keyof typeof TOAST_ICONS] : null; return ( {hasCustomJSX ? (

{(toast.data as Record).customJSX}

) : ( <> {Icon && (

svg]:size-4 [&>svg]:shrink-0", showCloseButton && "mt-0.5", )} >

)}

{showCloseButton && ( } className="mt-1.5 w-fit" /> )}

{!showCloseButton && ( } /> )} {showCloseButton && ( )} )} ); } interface AnchoredToastProviderProps { children: React.ReactNode; limit?: number; timeout?: number; container?: HTMLElement | React.RefObject | null; } export function AnchoredToastProvider({ children, limit = 5, timeout = 2000, container, }: AnchoredToastProviderProps) { return ( {children} ); } function AnchoredToasts() { const { toasts } = Toast.useToastManager(); return ( <> {toasts.map((toast) => { const toastData = toast as ToastData; if (!toastData.positionerProps?.anchor) { return null; } return ; })} ); } function AnchoredToastItem({ toast }: { toast: ToastData }) { const showArrow = Boolean( toast.data && typeof toast.data === "object" && "arrow" in toast.data && (toast.data as Record).arrow === true, ); return ( {showArrow && ( )} ); } // Feature detection for calc-size() (Chrome 129+, Edge 129+). // Used to conditionally render different DOM structures for height animation. const supportsCalcSize = typeof CSS !== "undefined" && CSS.supports("height", "calc-size(auto, size)"); interface GroupedToastRootProps { toast: ToastData; position: ToastPosition; swipeDirection: SwipeDirection[]; data: GroupedToastData; } /** Toggle expand/collapse for a grouped toast. */ function toggleGroupExpanded(toastId: string) { let groupId: string | undefined; for (const [gId, tId] of groupToToastMap.entries()) { if (tId === toastId) { groupId = gId; break; } } if (!groupId) return; const data = groupDataMap.get(groupId); if (!data) return; const updatedData: GroupedToastData = { ...data, isExpanded: !data.isExpanded, }; groupDataMap.set(groupId, updatedData); toastManager.update(toastId, { data: updatedData }); } function GroupedToastRoot({ toast, position, swipeDirection, data, }: GroupedToastRootProps) { const toastRootRef = React.useRef(null); const isTop = position.startsWith("top"); // Sync popover open state with toast data const handlePopoverOpenChange = React.useCallback( (open: boolean, eventDetails: Popover.Root.ChangeEventDetails) => { // Only allow escape-key to close; all other closes are managed by the Show/Hide button. if (!open && eventDetails.reason !== "escape-key") { eventDetails.cancel(); return; } if (open !== data.isExpanded) { toggleGroupExpanded(toast.id); } }, [toast.id, data.isExpanded], ); return ( {/* Expanded cards popover - uses CSS positioning to maintain stable layout */} ); } interface GroupedToastSummaryOrSingleProps { data: GroupedToastData; toastId: string; } function GroupedToastSummaryOrSingle({ data, toastId, }: GroupedToastSummaryOrSingleProps) { const totalPending = data.items.length; const totalCompleted = (data.completedItems ?? []).length; const totalItems = totalPending + totalCompleted; const isSingle = totalItems === 1 && !data.hasShownAllComplete; const singleItem = data.items[0] ?? data.completedItems?.[0]; // Chrome 129+: single element with key-swap; height animates via calc-size(auto, size). if (supportsCalcSize) { return (

{isSingle && singleItem ? ( ) : ( toggleGroupExpanded(toastId)} /> )}

); } // Fallback (Firefox/Safari): two elements with grid-row height animation. return ( <>

{singleItem && ( )}

toggleGroupExpanded(toastId)} />

); } interface GroupedSingleItemContentProps { item: GroupedToastItem; showCloseButton?: boolean; } function GroupedSingleItemContent({ item, showCloseButton = true, }: GroupedSingleItemContentProps) { const type = item.type || "default"; const Icon = type !== "default" ? TOAST_ICONS[type as keyof typeof TOAST_ICONS] : null; return (

{Icon && (

svg]:size-4 [&>svg]:shrink-0", showCloseButton && "mt-0.5", )} >

)}

{item.title && ( {item.title} )} {item.description && ( {item.description} )} {showCloseButton && item.action && (

)}

{!showCloseButton && item.action && ( )} {showCloseButton && ( )}

); } interface GroupedToastSummaryContentProps { data: GroupedToastData; onToggle: () => void; } function GroupedToastSummaryContent({ data, onToggle, }: GroupedToastSummaryContentProps) { const loadingCount = data.items.filter( (item) => item.type === "loading", ).length; const { success: successCount, error: errorCount, warning: warningCount, info: infoCount, } = data.historicalCounts; const completedCount = successCount + errorCount + warningCount + infoCount; const totalCount = loadingCount + completedCount; let iconType: "loading" | "success" | "error" | "warning"; if (loadingCount > 0) { iconType = "loading"; } else if (errorCount === 0) { iconType = "success"; // All succeeded } else if (successCount === 0 && warningCount === 0 && infoCount === 0) { iconType = "error"; // All failed } else { iconType = "warning"; // Mixed results } const Icon = TOAST_ICONS[iconType]; const summaryText = typeof data.summary === "function" ? data.summary({ loadingCount, completedCount, totalCount, successCount, errorCount, warningCount, infoCount, }) : data.summary; const buttonLabel = data.isExpanded ? data.action.expandedLabel : data.action.label; return (

{summaryText} {/* Show button when in group mode (historical or current expandable items) */} {(data.hasShownAllComplete || data.items.length > 1 || (data.completedItems ?? []).length > 0) && ( )}

); } interface ExpandedCardsContainerProps { data: GroupedToastData; isTop: boolean; } /** Container for expanded pending/completed item cards with enter/exit animations */ function ExpandedCardsContainer({ data, isTop }: ExpandedCardsContainerProps) { const completedCount = (data.completedItems ?? []).length; const pendingCount = data.items.length; const hasCompletedItems = completedCount > 0; // Show pending card when 2+ pending, or 1 pending alongside completed/historical items. const hasPendingItems = pendingCount > 1 || (pendingCount >= 1 && hasCompletedItems) || (pendingCount >= 1 && data.hasShownAllComplete); if (!hasCompletedItems && !hasPendingItems) { return null; } return (

{/* Flat conditional rendering (no fragments) required for Safari + AnimatePresence. Completed card renders first for bottom, last for top — so it's always outermost. */} {!isTop && hasCompletedItems && ( )} {/* Pending card (always in middle position) */} {hasPendingItems && ( )} {/* Completed card last (for top position only) */} {isTop && hasCompletedItems && ( )}

); } interface GroupedToastCardProps { data: GroupedToastData; isTop: boolean; } function GroupedToastCard({ data, isTop }: GroupedToastCardProps) { const cardRef = React.useRef(null); // Capture-phase native listeners prevent touch events from reaching the toast's swipe handler. React.useEffect(() => { const card = cardRef.current; if (!card) return; const stopPropagation = (e: TouchEvent) => { e.stopPropagation(); }; card.addEventListener("touchstart", stopPropagation, { passive: true }); card.addEventListener("touchmove", stopPropagation, { passive: true }); card.addEventListener("touchend", stopPropagation, { passive: true }); return () => { card.removeEventListener("touchstart", stopPropagation); card.removeEventListener("touchmove", stopPropagation); card.removeEventListener("touchend", stopPropagation); }; }, []); return (

{data.items.map((item, index) => ( 0} /> ))}

); } interface GroupedToastCardItemProps { item: GroupedToastItem; showSeparator: boolean; } function GroupedToastCardItem({ item, showSeparator, }: GroupedToastCardItemProps) { const type = item.type || "default"; const Icon = type !== "default" ? TOAST_ICONS[type as keyof typeof TOAST_ICONS] : null; return ( <> {showSeparator && (

)}

{Icon && (

)}

{item.title && ( {item.title} )} {item.description && ( {item.description} )}

{item.action && ( )}

); } // Completed Items Components interface CompletedItemRowProps { item: GroupedToastItem; showSeparator: boolean; } function CompletedItemRow({ item, showSeparator }: CompletedItemRowProps) { const type = item.type || "success"; const Icon = type !== "default" ? TOAST_ICONS[type as keyof typeof TOAST_ICONS] : null; const dismissDuration = item.duration ?? GROUP_ITEM_DISMISS_DURATION; // Negative delay syncs the CSS animation with the real timer that started at completedAt. const [elapsed] = React.useState(() => item.completedAt ? Date.now() - item.completedAt : 0, ); const animationStyle = { "--dismiss-duration": `${dismissDuration}ms`, "--animation-delay": `-${Math.min(elapsed, dismissDuration)}ms`, } as React.CSSProperties; return ( <> {showSeparator && (

)}

{/* Progress bar background (fills left-to-right) */}

{/* Content layer (above progress bar) */}

{Icon && (

)}

{item.title && ( {item.title} )} {item.description && ( {item.description} )}

{item.action && ( )}

); } interface CompletedItemsCardProps { items: GroupedToastItem[]; isTop: boolean; } function CompletedItemsCard({ items, isTop }: CompletedItemsCardProps) { const cardRef = React.useRef(null); // Same touch isolation as GroupedToastCard. React.useEffect(() => { const card = cardRef.current; if (!card) return; const stopPropagation = (e: TouchEvent) => { e.stopPropagation(); }; card.addEventListener("touchstart", stopPropagation, { passive: true }); card.addEventListener("touchmove", stopPropagation, { passive: true }); card.addEventListener("touchend", stopPropagation, { passive: true }); return () => { card.removeEventListener("touchstart", stopPropagation); card.removeEventListener("touchmove", stopPropagation); card.removeEventListener("touchend", stopPropagation); }; }, []); return (

{items.map((item, index) => ( 0} /> ))}

); } export { Toast, toastManager, anchoredToastManager }; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","@hugeicons/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@hugeicons/react"}]]}]}],["$","li","@hugeicons/core-free-icons",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Fcore-free-icons","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@hugeicons/core-free-icons"}]]}]}]]}],["$","$L50",null,{"namespace":"@cubby-ui","registryDependencies":["@cubby-ui/button","@cubby-ui/elevated"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/toast/toast.tsx","content":"$52","type":"registry:ui","target":"components/ui/cubby-ui/toast/toast.tsx"},{"path":"registry/default/toast/toast.css","content":"@keyframes progress-fill {\n from {\n transform: scaleX(0);\n }\n to {\n transform: scaleX(1);\n }\n}\n\n/*\n * Paired identical keyframes.\n * CSS animations don't restart when re-applied to the same element with the\n * same animation-name, so on each toast update we alternate between the two\n * names to force the browser to treat it as a new animation and replay it.\n * Keep both bodies in sync — the toggling is what makes the replay work.\n */\n@keyframes pulse-even {\n 0%,\n 100% {\n scale: 1;\n }\n 50% {\n scale: 1.04;\n }\n}\n\n@keyframes pulse-odd {\n 0%,\n 100% {\n scale: 1;\n }\n 50% {\n scale: 1.04;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n @keyframes pulse-even {\n from,\n to {\n scale: 1;\n }\n }\n\n @keyframes pulse-odd {\n from,\n to {\n scale: 1;\n }\n }\n}\n","type":"registry:file","target":"components/ui/cubby-ui/toast/toast.css"}],"className":"h-[70svh] min-h-80"}]]}]