Toast

1"use client";2​3import * as React from "react";4import { Toast as ToastPrimitive } from "radix-ui";5import { cva, type VariantProps } from "class-variance-authority";6import { XIcon } from "@phosphor-icons/react/ssr";7​8import { cn } from "@/lib/utils";9​10// The Radix toast (shadcn's older toast API; prefer Sonner for new work). Same look as the Sonner toasts (extrapolated11// from the Inkbox console, Figma 427:2715): a white panel with 8px corners, the floating shadow and 16px of padding, a12// 14px medium ink title over a 14px muted description, an outline action key and a faint close glyph. `destructive`13// edges it in red with a red title. It slides in from the right edge it lives on (300ms, the drawer curve) and fades14// out faster; a swipe to the right drags it with the finger and lets it go.15const ToastProvider = ToastPrimitive.Provider;16​17function ToastViewport({ className, ...props }: React.ComponentProps<typeof ToastPrimitive.Viewport>) {18  return (19    <ToastPrimitive.Viewport20      data-slot="toast-viewport"21      className={cn("fixed right-0 bottom-0 z-[100] flex max-h-dvh w-full flex-col-reverse gap-2 p-4 outline-none sm:max-w-sm sm:flex-col", className)}22      {...props}23    />24  );25}26​27const toastVariants = cva(28  "group/toast pointer-events-auto relative flex w-full items-start justify-between gap-3 overflow-hidden rounded-control bg-surface p-4 pr-10 font-sans text-fg shadow-floating data-[state=closed]:animate-fade-out data-[state=open]:animate-sheet-in-right data-[swipe=cancel]:translate-x-0 data-[swipe=cancel]:transition-[translate] data-[swipe=cancel]:duration-200 data-[swipe=cancel]:ease-out data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=end]:animate-fade-out data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[swipe=move]:transition-none motion-reduce:data-[swipe=cancel]:transition-none",29  {30    variants: {31      variant: {32        default: "",33        destructive: "border border-danger [&_[data-slot=toast-title]]:text-danger-strong",34      },35    },36    defaultVariants: { variant: "default" },37  },38);39​40function Toast({ className, variant, ...props }: React.ComponentProps<typeof ToastPrimitive.Root> & VariantProps<typeof toastVariants>) {41  return <ToastPrimitive.Root data-slot="toast" data-variant={variant ?? "default"} className={cn(toastVariants({ variant }), className)} {...props} />;42}43​44function ToastAction({ className, ...props }: React.ComponentProps<typeof ToastPrimitive.Action>) {45  return (46    <ToastPrimitive.Action47      data-slot="toast-action"48      className={cn(49        "inline-flex h-8 shrink-0 items-center justify-center self-center rounded-control border border-line-field bg-surface px-2.5 font-sans text-body leading-tight font-medium text-fg-brand outline-none transition-[background-color,scale] duration-150 ease-out hover:bg-subtle active:scale-97 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=destructive]/toast:text-danger-strong motion-reduce:transition-none",50        className,51      )}52      {...props}53    />54  );55}56​57function ToastClose({ className, ...props }: React.ComponentProps<typeof ToastPrimitive.Close>) {58  return (59    <ToastPrimitive.Close60      data-slot="toast-close"61      aria-label="Close"62      className={cn("absolute top-3 right-3 inline-flex size-6 items-center justify-center rounded-control text-fg-faint outline-none transition-colors duration-150 ease-out hover:text-fg-muted focus-visible:outline-2 focus-visible:outline-focus-ring motion-reduce:transition-none", className)}63      {...props}64    >65      <XIcon className="size-4" />66    </ToastPrimitive.Close>67  );68}69​70function ToastTitle({ className, ...props }: React.ComponentProps<typeof ToastPrimitive.Title>) {71  return <ToastPrimitive.Title data-slot="toast-title" className={cn("text-body leading-body font-medium text-fg", className)} {...props} />;72}73​74function ToastDescription({ className, ...props }: React.ComponentProps<typeof ToastPrimitive.Description>) {75  return <ToastPrimitive.Description data-slot="toast-description" className={cn("text-body leading-body text-fg-muted", className)} {...props} />;76}77​78type ToastProps = React.ComponentProps<typeof Toast>;79type ToastActionElement = React.ReactElement<React.ComponentProps<typeof ToastAction>>;80​81// The toast queue: a tiny store any part of the app can push to with toast(), read by useToast() and <Toaster />.82const TOAST_LIMIT = 3;83const REMOVE_DELAY = 1000;84​85type ToasterToast = ToastProps & { id: string; title?: React.ReactNode; description?: React.ReactNode; action?: ToastActionElement };86type State = { toasts: ToasterToast[] };87​88let count = 0;89const nextId = () => String((count = (count + 1) % Number.MAX_SAFE_INTEGER));90const listeners: Array<(state: State) => void> = [];91let memory: State = { toasts: [] };92const timeouts = new Map<string, ReturnType<typeof setTimeout>>();93​94function setState(update: (state: State) => State) {95  memory = update(memory);96  listeners.forEach((l) => l(memory));97}98​99function scheduleRemove(id: string) {100  if (timeouts.has(id)) return;101  timeouts.set(id, setTimeout(() => {102    timeouts.delete(id);103    setState((s) => ({ toasts: s.toasts.filter((t) => t.id !== id) }));104  }, REMOVE_DELAY));105}106​107function dismiss(id?: string) {108  setState((s) => ({ toasts: s.toasts.map((t) => (id === undefined || t.id === id ? { ...t, open: false } : t)) }));109  memory.toasts.filter((t) => id === undefined || t.id === id).forEach((t) => scheduleRemove(t.id));110}111​112function toast(props: Omit<ToasterToast, "id">) {113  const id = nextId();114  const update = (next: Partial<ToasterToast>) => setState((s) => ({ toasts: s.toasts.map((t) => (t.id === id ? { ...t, ...next } : t)) }));115  setState((s) => ({116    toasts: [{ ...props, id, open: true, onOpenChange: (open: boolean) => { if (!open) dismiss(id); props.onOpenChange?.(open); } }, ...s.toasts].slice(0, TOAST_LIMIT),117  }));118  return { id, dismiss: () => dismiss(id), update };119}120​121function useToast() {122  const [state, setLocal] = React.useState(memory);123  React.useEffect(() => {124    listeners.push(setLocal);125    return () => {126      const i = listeners.indexOf(setLocal);127      if (i > -1) listeners.splice(i, 1);128    };129  }, []);130  return { ...state, toast, dismiss };131}132​133/** Renders the queue. Mount it once, near the root. */134function Toaster() {135  const { toasts } = useToast();136  return (137    <ToastProvider swipeDirection="right">138      {toasts.map(({ id, title, description, action, ...props }) => (139        <Toast key={id} {...props}>140          <div className="grid min-w-0 gap-0.5">141            {title && <ToastTitle>{title}</ToastTitle>}142            {description && <ToastDescription>{description}</ToastDescription>}143          </div>144          {action}145          <ToastClose />146        </Toast>147      ))}148      <ToastViewport />149    </ToastProvider>150  );151}152​153export { Toast, ToastAction, ToastClose, ToastDescription, Toaster, ToastProvider, ToastTitle, ToastViewport, toast, useToast };154export type { ToastActionElement, ToastProps };