"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

type ToastVariant = "success" | "error" | "warning" | "info";

export interface ToastStackItem {
  id: string;
  title: string;
  description?: string;
  variant?: ToastVariant;
  duration?: number;
  actionLabel?: string;
  onAction?: () => void;
}

export interface ToastStackProps
  extends React.HTMLAttributes<HTMLDivElement> {
  items?: ToastStackItem[];
  defaultItems?: ToastStackItem[];
  onItemsChange?: (items: ToastStackItem[]) => void;
  autoDismiss?: boolean;
  defaultDuration?: number;
}

const variantStyles: Record<ToastVariant, string> = {
  success: "bg-primary text-foreground",
  error: "bg-destructive text-foreground",
  warning: "bg-muted text-foreground",
  info: "bg-card text-foreground",
};

const iconStyles: Record<ToastVariant, string> = {
  success: "text-foreground",
  error: "text-foreground",
  warning: "text-muted-foreground",
  info: "text-muted-foreground",
};

function useControllableItems(
  controlledItems: ToastStackItem[] | undefined,
  defaultItems: ToastStackItem[],
  onItemsChange: ((items: ToastStackItem[]) => void) | undefined
) {
  const [uncontrolledItems, setUncontrolledItems] = React.useState(defaultItems);
  const items = controlledItems ?? uncontrolledItems;
  const itemsRef = React.useRef(items);

  React.useEffect(() => {
    itemsRef.current = items;
  }, [items]);

  const setItems = React.useCallback(
    (updater: (prev: ToastStackItem[]) => ToastStackItem[]) => {
      const nextItems = updater(itemsRef.current);
      if (controlledItems === undefined) {
        setUncontrolledItems(nextItems);
      }
      onItemsChange?.(nextItems);
    },
    [controlledItems, onItemsChange]
  );

  return { items, setItems };
}

export function ToastStack({
  items: controlledItems,
  defaultItems = [],
  onItemsChange,
  autoDismiss = true,
  defaultDuration = 4000,
  className,
  ...props
}: ToastStackProps) {
  const { items, setItems } = useControllableItems(
    controlledItems,
    defaultItems,
    onItemsChange
  );

  const timeoutsRef = React.useRef<Map<string, number>>(new Map());

  const handleDismiss = React.useCallback(
    (id: string) => {
      setItems((prev) => prev.filter((item) => item.id !== id));
    },
    [setItems]
  );

  React.useEffect(() => {
    if (!autoDismiss) {
      return;
    }

    items.forEach((item) => {
      if (timeoutsRef.current.has(item.id)) {
        return;
      }
      const duration = item.duration ?? defaultDuration;
      const timeoutId = window.setTimeout(() => {
        handleDismiss(item.id);
      }, duration);
      timeoutsRef.current.set(item.id, timeoutId);
    });

    const activeIds = new Set(items.map((item) => item.id));
    timeoutsRef.current.forEach((timeoutId, id) => {
      if (!activeIds.has(id)) {
        window.clearTimeout(timeoutId);
        timeoutsRef.current.delete(id);
      }
    });
  }, [autoDismiss, defaultDuration, handleDismiss, items]);

  React.useEffect(() => {
    return () => {
      timeoutsRef.current.forEach((timeoutId) => {
        window.clearTimeout(timeoutId);
      });
      timeoutsRef.current.clear();
    };
  }, []);

  if (items.length === 0) {
    return null;
  }

  return (
    <div
      className={cn(
        "flex w-full max-w-sm flex-col gap-3",
        className
      )}
      {...props}
    >
      {items.map((item) => {
        const variant = item.variant ?? "info";

        return (
          <div
            key={item.id}
            role="status"
            aria-live="polite"
            className={cn(
              "animate-in slide-in-from-right-4 fade-in-0 rounded-xl border border-border p-4 shadow-sm",
              variantStyles[variant]
            )}
          >
            <div className="flex items-start gap-3">
              <div
                className={cn(
                  "flex h-10 w-10 items-center justify-center rounded-full border border-border bg-background",
                  iconStyles[variant]
                )}
              >
                <ToastIcon variant={variant} />
              </div>
              <div className="flex-1 space-y-1">
                <p className="text-sm font-semibold text-foreground">
                  {item.title}
                </p>
                {item.description ? (
                  <p className="text-sm text-muted-foreground">
                    {item.description}
                  </p>
                ) : null}
                {item.actionLabel ? (
                  <button
                    type="button"
                    onClick={item.onAction}
                    className="text-sm font-medium text-primary transition hover:text-foreground"
                  >
                    {item.actionLabel}
                  </button>
                ) : null}
              </div>
              <button
                type="button"
                onClick={() => handleDismiss(item.id)}
                className="rounded-full border border-border bg-background px-2 py-1 text-sm text-muted-foreground transition hover:text-foreground"
                aria-label="Dismiss notification"
              >
                ×
              </button>
            </div>
          </div>
        );
      })}
    </div>
  );
}

function ToastIcon({ variant }: { variant: ToastVariant }) {
  switch (variant) {
    case "success":
      return (
        <svg
          viewBox="0 0 24 24"
          aria-hidden="true"
          className="h-5 w-5"
          fill="none"
          stroke="currentColor"
          strokeWidth={2.5}
        >
          <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
        </svg>
      );
    case "error":
      return (
        <svg
          viewBox="0 0 24 24"
          aria-hidden="true"
          className="h-5 w-5"
          fill="none"
          stroke="currentColor"
          strokeWidth={2.5}
        >
          <path strokeLinecap="round" strokeLinejoin="round" d="M6 6l12 12" />
          <path strokeLinecap="round" strokeLinejoin="round" d="M18 6l-12 12" />
        </svg>
      );
    case "warning":
      return (
        <svg
          viewBox="0 0 24 24"
          aria-hidden="true"
          className="h-5 w-5"
          fill="none"
          stroke="currentColor"
          strokeWidth={2.5}
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            d="M12 8v5m0 3h.01"
          />
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            d="M10.5 3.5h3L21 18.5H3L10.5 3.5z"
          />
        </svg>
      );
    default:
      return (
        <svg
          viewBox="0 0 24 24"
          aria-hidden="true"
          className="h-5 w-5"
          fill="none"
          stroke="currentColor"
          strokeWidth={2.5}
        >
          <circle cx="12" cy="12" r="9" />
          <path strokeLinecap="round" strokeLinejoin="round" d="M12 8v4" />
          <circle cx="12" cy="16" r="1" fill="currentColor" stroke="none" />
        </svg>
      );
  }
}

export type { ToastVariant };
Toast Stack

Dependencies

Files

Installation
