2b:I[97408,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"StageProvider"] 2c:I[60401,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"DetailTabs"] 2d:T2cd4,"use client"; import { AnimatePresence, MotionConfig, motion } from "motion/react"; import { CircleAlert, CircleCheck, Info, LoaderCircle, TriangleAlert, X } from "lucide-react"; import { Toast as ToastPrimitive } from "radix-ui"; import { useCallback, useEffect, useRef, useState, useSyncExternalStore, type ReactNode } from "react"; import { cn } from "@/lib/utils"; type Tone = "neutral" | "success" | "error" | "warning" | "info" | "loading"; export type ToastOptions = { description?: ReactNode; tone?: Tone; /** A button inside the toast, e.g. Undo. */ action?: { label: string; onClick: () => void }; /** Milliseconds before it closes; loading toasts stay until updated. */ duration?: number; /** Reuse an id to update a toast in place. */ id?: string; }; type ToastItem = ToastOptions & { id: string; title: ReactNode; open: boolean }; let items: ToastItem[] = []; let counter = 0; const listeners = new Set<() => void>(); const emit = () => listeners.forEach((l) => l()); const EMPTY: ToastItem[] = []; function add(title: ReactNode, options: ToastOptions = {}) { const id = options.id ?? `toast-${++counter}`; const exists = items.some((t) => t.id === id); items = exists ? items.map((t) => (t.id === id ? { ...t, ...options, title, id, open: true } : t)) : [{ ...options, title, id, open: true }, ...items].slice(0, 12); emit(); return id; } function dismiss(id?: string) { items = items.map((t) => (!id || t.id === id ? { ...t, open: false } : t)); emit(); // Drop closed toasts once their exit animation has played. setTimeout(() => { items = items.filter((t) => t.open); emit(); }, 400); } type Message = ReactNode | ((value: T) => ReactNode); const text = (m: Message, v: T) => (typeof m === "function" ? (m as (value: T) => ReactNode)(v) : m); /** Show a toast from anywhere: toast("Saved"), toast.success(…), toast.promise(…). Needs a on the page. */ export const toast = Object.assign((title: ReactNode, options?: ToastOptions) => add(title, options), { success: (title: ReactNode, options?: ToastOptions) => add(title, { ...options, tone: "success" }), error: (title: ReactNode, options?: ToastOptions) => add(title, { ...options, tone: "error" }), warning: (title: ReactNode, options?: ToastOptions) => add(title, { ...options, tone: "warning" }), info: (title: ReactNode, options?: ToastOptions) => add(title, { ...options, tone: "info" }), loading: (title: ReactNode, options?: ToastOptions) => add(title, { ...options, tone: "loading" }), dismiss, promise: (promise: Promise, m: { loading: ReactNode; success: Message; error: Message }) => { const id = add(m.loading, { tone: "loading" }); promise.then( (v) => add(text(m.success, v), { id, tone: "success" }), (e) => add(text(m.error, e), { id, tone: "error" }), ); return promise; }, }); function useToasts() { return useSyncExternalStore( (l) => (listeners.add(l), () => listeners.delete(l)), () => items, () => EMPTY, ); } const ICONS = { neutral: null, success: , error: , warning: , info: , loading: , } as const; const POSITIONS = { "bottom-right": "bottom-4 right-4", "bottom-center": "bottom-4 left-1/2 -translate-x-1/2", "top-right": "top-4 right-4", "top-center": "top-4 left-1/2 -translate-x-1/2", } as const; const GAP = 10; const PEEK = 10; export interface ToasterProps { position?: keyof typeof POSITIONS; /** card: a rounded card with room for a description · pill: a compact capsule on one line. */ variant?: "card" | "pill"; /** How many toasts peek out behind the front one. */ visible?: number; /** Default time on screen, in milliseconds. */ duration?: number; } /** Renders the toasts: a neat stack that fans out on hover. */ export function Toaster({ position = "bottom-right", variant = "card", visible = 3, duration = 4000 }: ToasterProps) { const pill = variant === "pill"; const all = useToasts(); const open = all.filter((t) => t.open); const [expanded, setExpanded] = useState(false); const [heights, setHeights] = useState>({}); const [widths, setWidths] = useState>({}); const top = position.startsWith("top"); const measure = useCallback((id: string, h: number, w: number) => { setHeights((s) => (s[id] === h ? s : { ...s, [id]: h })); setWidths((s) => (s[id] === w ? s : { ...s, [id]: w })); }, []); // Toasts are portaled into the list, so React's own enter/leave events never reach it: listen natively. const viewport = useRef(null); useEffect(() => { const el = viewport.current; if (!el) return; const on = () => setExpanded(true); const off = () => setExpanded(false); const blur = (e: FocusEvent) => !el.contains(e.relatedTarget as Node | null) && off(); el.addEventListener("mouseenter", on); el.addEventListener("mouseleave", off); el.addEventListener("focusin", on); el.addEventListener("focusout", blur); return () => { el.removeEventListener("mouseenter", on); el.removeEventListener("mouseleave", off); el.removeEventListener("focusin", on); el.removeEventListener("focusout", blur); }; }, []); const front = heights[open[0]?.id] ?? 64; const offsets = open.map((_, i) => open.slice(0, i).reduce((sum, t) => sum + (heights[t.id] ?? 64) + GAP, 0)); const shown = Math.min(open.length, visible); const height = open.length === 0 ? 0 : expanded ? offsets[shown - 1] + (heights[open[shown - 1]?.id] ?? 64) : front + (shown - 1) * PEEK; return ( {open.map((t, i) => { const y = expanded ? offsets[i] : i * PEEK; return ( !o && dismiss(t.id)} duration={t.tone === "loading" ? Infinity : (t.duration ?? duration)} asChild forceMount > 0 ? front : (heights[t.id] ?? "auto"), // Pills behind the front one take its width, so the collapsed stack reads as one shape. ...(pill && widths[t.id] ? { width: !expanded && i > 0 && widths[open[0].id] ? widths[open[0].id] : widths[t.id] } : {}), }} exit={{ opacity: 0, scale: 0.96, transition: { duration: 0.18 } }} transition={{ type: "spring", bounce: 0.12, duration: 0.42 }} > 0} pill={pill} /> ); })} ); } function ToastBody({ toast: t, onHeight, dimmed, pill }: { toast: ToastItem; onHeight: (id: string, h: number, w: number) => void; dimmed: boolean; pill: boolean }) { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; const observer = new ResizeObserver(() => onHeight(t.id, el.offsetHeight, el.scrollWidth)); observer.observe(el); return () => observer.disconnect(); }, [t.id, onHeight]); const icon = ICONS[t.tone ?? "neutral"]; // Every side item sits in a box one text-line tall, so it centres on the title whether or not there's a description. const line = "flex h-5 shrink-0 items-center"; return (

{icon && {icon}}

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

{t.action && ( {t.action.label} )}

); } export default Toaster; 2e:T1d8b0,

"use client";

import { AnimatePresence, MotionConfig, motion } from "motion/react";
import { CircleAlert, CircleCheck, Info, LoaderCircle, TriangleAlert, X } from "lucide-react";
import { Toast as ToastPrimitive } from "radix-ui";
import { useCallback, useEffect, useRef, useState, useSyncExternalStore, type ReactNode } from "react";
import { cn } from "@/lib/utils";

type Tone = "neutral" | "success" | "error" | "warning" | "info" | "loading";

export type ToastOptions = {
  description?: ReactNode;
  tone?: Tone;
  /** A button inside the toast, e.g. Undo. */
  action?: { label: string; onClick: () => void };
  /** Milliseconds before it closes; loading toasts stay until updated. */
  duration?: number;
  /** Reuse an id to update a toast in place. */
  id?: string;
};

type ToastItem = ToastOptions & { id: string; title: ReactNode; open: boolean };

let items: ToastItem[] = [];
let counter = 0;
const listeners = new Set<() => void>();
const emit = () => listeners.forEach((l) => l());
const EMPTY: ToastItem[] = [];

function add(title: ReactNode, options: ToastOptions = {}) {
  const id = options.id ?? `toast-${++counter}`;
  const exists = items.some((t) => t.id === id);
  items = exists ? items.map((t) => (t.id === id ? { ...t, ...options, title, id, open: true } : t)) : [{ ...options, title, id, open: true }, ...items].slice(0, 12);
  emit();
  return id;
}

function dismiss(id?: string) {
  items = items.map((t) => (!id || t.id === id ? { ...t, open: false } : t));
  emit();
  // Drop closed toasts once their exit animation has played.
  setTimeout(() => {
    items = items.filter((t) => t.open);
    emit();
  }, 400);
}

type Message<T> = ReactNode | ((value: T) => ReactNode);
const text = <T,>(m: Message<T>, v: T) => (typeof m === "function" ? (m as (value: T) => ReactNode)(v) : m);

/** Show a toast from anywhere: toast("Saved"), toast.success(…), toast.promise(…). Needs a <Toaster /> on the page. */
export const toast = Object.assign((title: ReactNode, options?: ToastOptions) => add(title, options), {
  success: (title: ReactNode, options?: ToastOptions) => add(title, { ...options, tone: "success" }),
  error: (title: ReactNode, options?: ToastOptions) => add(title, { ...options, tone: "error" }),
  warning: (title: ReactNode, options?: ToastOptions) => add(title, { ...options, tone: "warning" }),
  info: (title: ReactNode, options?: ToastOptions) => add(title, { ...options, tone: "info" }),
  loading: (title: ReactNode, options?: ToastOptions) => add(title, { ...options, tone: "loading" }),
  dismiss,
  promise: <T,>(promise: Promise<T>, m: { loading: ReactNode; success: Message<T>; error: Message<unknown> }) => {
    const id = add(m.loading, { tone: "loading" });
    promise.then(
      (v) => add(text(m.success, v), { id, tone: "success" }),
      (e) => add(text(m.error, e), { id, tone: "error" }),
    );
    return promise;
  },
});

function useToasts() {
  return useSyncExternalStore(
    (l) => (listeners.add(l), () => listeners.delete(l)),
    () => items,
    () => EMPTY,
  );
}

const ICONS = {
  neutral: null,
  success: <CircleCheck className="text-emerald-600 dark:text-emerald-400" />,
  error: <CircleAlert className="text-red-600 dark:text-red-400" />,
  warning: <TriangleAlert className="text-amber-600 dark:text-amber-400" />,
  info: <Info className="text-blue-600 dark:text-blue-400" />,
  loading: <LoaderCircle className="animate-spin text-neutral-400" />,
} as const;

const POSITIONS = {
  "bottom-right": "bottom-4 right-4",
  "bottom-center": "bottom-4 left-1/2 -translate-x-1/2",
  "top-right": "top-4 right-4",
  "top-center": "top-4 left-1/2 -translate-x-1/2",
} as const;

const GAP = 10;
const PEEK = 10;

export interface ToasterProps {
  position?: keyof typeof POSITIONS;
  /** card: a rounded card with room for a description · pill: a compact capsule on one line. */
  variant?: "card" | "pill";
  /** How many toasts peek out behind the front one. */
  visible?: number;
  /** Default time on screen, in milliseconds. */
  duration?: number;
}

/** Renders the toasts: a neat stack that fans out on hover. */
export function Toaster({ position = "bottom-right", variant = "card", visible = 3, duration = 4000 }: ToasterProps) {
  const pill = variant === "pill";
  const all = useToasts();
  const open = all.filter((t) => t.open);
  const [expanded, setExpanded] = useState(false);
  const [heights, setHeights] = useState<Record<string, number>>({});
  const [widths, setWidths] = useState<Record<string, number>>({});
  const top = position.startsWith("top");
  const measure = useCallback((id: string, h: number, w: number) => {
    setHeights((s) => (s[id] === h ? s : { ...s, [id]: h }));
    setWidths((s) => (s[id] === w ? s : { ...s, [id]: w }));
  }, []);

  // Toasts are portaled into the list, so React's own enter/leave events never reach it: listen natively.
  const viewport = useRef<HTMLOListElement>(null);
  useEffect(() => {
    const el = viewport.current;
    if (!el) return;
    const on = () => setExpanded(true);
    const off = () => setExpanded(false);
    const blur = (e: FocusEvent) => !el.contains(e.relatedTarget as Node | null) && off();
    el.addEventListener("mouseenter", on);
    el.addEventListener("mouseleave", off);
    el.addEventListener("focusin", on);
    el.addEventListener("focusout", blur);
    return () => {
      el.removeEventListener("mouseenter", on);
      el.removeEventListener("mouseleave", off);
      el.removeEventListener("focusin", on);
      el.removeEventListener("focusout", blur);
    };
  }, []);

  const front = heights[open[0]?.id] ?? 64;
  const offsets = open.map((_, i) => open.slice(0, i).reduce((sum, t) => sum + (heights[t.id] ?? 64) + GAP, 0));
  const shown = Math.min(open.length, visible);
  const height = open.length === 0 ? 0 : expanded ? offsets[shown - 1] + (heights[open[shown - 1]?.id] ?? 64) : front + (shown - 1) * PEEK;

  return (
    <ToastPrimitive.Provider swipeDirection="right" duration={duration}>
      <MotionConfig reducedMotion="user">
        <AnimatePresence initial={false}>
          {open.map((t, i) => {
            const y = expanded ? offsets[i] : i * PEEK;
            return (
              <ToastPrimitive.Root
                key={t.id}
                open={t.open}
                onOpenChange={(o) => !o && dismiss(t.id)}
                duration={t.tone === "loading" ? Infinity : (t.duration ?? duration)}
                asChild
                forceMount
              >
                <motion.li
                  className={cn(
                    "absolute list-none overflow-hidden bg-white text-neutral-950 outline-none",
                    pill
                      ? cn("w-max max-w-full rounded-full", position.endsWith("right") ? "right-0" : "inset-x-0 mx-auto")
                      : "inset-x-0 rounded-2xl",
                    "shadow-[0_8px_24px_-8px_rgb(0_0_0/0.16),0_1px_3px_rgb(0_0_0/0.06)] ring-1 ring-black/[0.06]",
                    "dark:bg-neutral-900 dark:text-white dark:shadow-[0_8px_24px_-8px_rgb(0_0_0/0.6)] dark:ring-white/[0.1]",
                    "data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[swipe=cancel]:translate-x-0 data-[swipe=cancel]:transition-[translate] data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x)",
                    top ? "top-0 origin-top" : "bottom-0 origin-bottom",
                  )}
                  style={{ zIndex: 100 - i }}
                  initial={{ opacity: 0, y: top ? -24 : 24, scale: 0.96 }}
                  animate={{
                    opacity: i < visible ? 1 : 0,
                    y: top ? y : -y,
                    scale: expanded ? 1 : 1 - i * 0.05,
                    height: !expanded && i > 0 ? front : (heights[t.id] ?? "auto"),
                    // Pills behind the front one take its width, so the collapsed stack reads as one shape.
                    ...(pill && widths[t.id] ? { width: !expanded && i > 0 && widths[open[0].id] ? widths[open[0].id] : widths[t.id] } : {}),
                  }}
                  exit={{ opacity: 0, scale: 0.96, transition: { duration: 0.18 } }}
                  transition={{ type: "spring", bounce: 0.12, duration: 0.42 }}
                >
                  <ToastBody toast={t} onHeight={measure} dimmed={!expanded && i > 0} pill={pill} />
                </motion.li>
              </ToastPrimitive.Root>
            );
          })}
        </AnimatePresence>
        <ToastPrimitive.Viewport
          ref={viewport}
          style={{ height }}
          className={cn("fixed z-[100] m-0 w-[calc(100%-2rem)] list-none p-0 outline-none transition-[height] duration-300", pill ? "max-w-[440px]" : "max-w-[360px]", POSITIONS[position])}
        />
      </MotionConfig>
    </ToastPrimitive.Provider>
  );
}

function ToastBody({ toast: t, onHeight, dimmed, pill }: { toast: ToastItem; onHeight: (id: string, h: number, w: number) => void; dimmed: boolean; pill: boolean }) {
  const ref = useRef<HTMLDivElement>(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const observer = new ResizeObserver(() => onHeight(t.id, el.offsetHeight, el.scrollWidth));
    observer.observe(el);
    return () => observer.disconnect();
  }, [t.id, onHeight]);
  const icon = ICONS[t.tone ?? "neutral"];
  // Every side item sits in a box one text-line tall, so it centres on the title whether or not there's a description.
  const line = "flex h-5 shrink-0 items-center";
  return (
    <div
      ref={ref}
      className={cn("flex items-start transition-opacity duration-200", pill && "w-max max-w-[440px]", pill ? "gap-2.5 py-2.5 pl-3.5 pr-2.5" : "gap-3 py-3.5 pl-4 pr-3", dimmed && "opacity-0")}
    >
      {icon && <span className={cn(line, "[&_svg]:size-[18px]")}>{icon}</span>}
      <div className={cn("min-w-0 flex-1", pill && "flex items-baseline gap-1.5 truncate")}>
        <ToastPrimitive.Title className={cn("text-[13.5px] font-medium leading-5 tracking-[-0.01em]", pill && "truncate")}>{t.title}</ToastPrimitive.Title>
        {t.description && (
          <ToastPrimitive.Description className={cn("text-[13px] leading-5 text-neutral-500 dark:text-neutral-400", pill ? "truncate" : "mt-0.5")}>
            {t.description}
          </ToastPrimitive.Description>
        )}
      </div>
      {t.action && (
        <span className={line}>
          <ToastPrimitive.Action
            altText={t.action.label}
            onClick={t.action.onClick}
            className={cn(
              "h-7 bg-neutral-950 px-2.5 text-[12.5px] font-medium text-white outline-none transition-colors hover:bg-neutral-800 focus-visible:bg-neutral-800 dark:bg-white dark:text-neutral-950 dark:hover:bg-neutral-200",
              pill ? "rounded-full px-3" : "rounded-lg",
            )}
          >
            {t.action.label}
          </ToastPrimitive.Action>
        </span>
      )}
      <span className={line}>
        <ToastPrimitive.Close
          aria-label="Close"
          className={cn(
            "flex shrink-0 items-center justify-center text-neutral-400 outline-none transition-colors hover:bg-neutral-950/[0.05] hover:text-neutral-900 focus-visible:bg-neutral-950/[0.05] dark:hover:bg-white/[0.08] dark:hover:text-white",
            pill ? "size-6 rounded-full" : "size-7 rounded-lg",
          )}
        >
          <X className="size-3.5" />
        </ToastPrimitive.Close>
      </span>
    </div>
  );
}

export default Toaster;

2f:T4b4,"use client"; import { Toaster, toast } from "@/components/scalar-ui/toast"; const button = "inline-flex h-10 items-center justify-center gap-2 rounded-[14px] bg-white px-4 text-sm font-medium tracking-[-0.01em] text-neutral-800 ring-1 ring-inset ring-black/[0.1] outline-none transition-[background-color,transform] hover:bg-neutral-50 active:scale-[0.97] dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06]"; export default function Demo() { return (

); } 30:T277b,

"use client";

import { Toaster, toast } from "@/components/scalar-ui/toast";

const button =
  "inline-flex h-10 items-center justify-center gap-2 rounded-[14px] bg-white px-4 text-sm font-medium tracking-[-0.01em] text-neutral-800 ring-1 ring-inset ring-black/[0.1] outline-none transition-[background-color,transform] hover:bg-neutral-50 active:scale-[0.97] dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06]";

export default function Demo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-2">
      <button type="button" className={button} onClick={() => toast.success("Deployment ready", { description: "aurora-web is live on aurora.app." })}>
        Success
      </button>
      <button type="button" className={button} onClick={() => toast.error("Build failed", { description: "Type error in billing.tsx on line 42." })}>
        Error
      </button>
      <button
        type="button"
        className={button}
        onClick={() => toast("Project archived", { action: { label: "Undo", onClick: () => toast("Restored aurora-web") } })}
      >
        With action
      </button>
      <Toaster />
    </div>
  );
}

31:T1248,

"use client";

import { Toaster, toast } from "@/components/scalar-ui/toast";

const button =
  "inline-flex h-10 items-center justify-center gap-2 rounded-[14px] bg-white px-4 text-sm font-medium tracking-[-0.01em] text-neutral-800 ring-1 ring-inset ring-black/[0.1] outline-none transition-[background-color,transform] hover:bg-neutral-50 active:scale-[0.97] dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06]";

export default function Example() {
  return (
    <>
      <button type="button" className={button} onClick={() => toast("Changes saved")}>
        Show toast
      </button>
      <Toaster />
    </>
  );
}

32:T4ae,"use client"; import { Toaster, toast } from "@/components/scalar-ui/toast"; const button = "inline-flex h-10 items-center justify-center gap-2 rounded-[14px] bg-white px-4 text-sm font-medium tracking-[-0.01em] text-neutral-800 ring-1 ring-inset ring-black/[0.1] outline-none transition-[background-color,transform] hover:bg-neutral-50 active:scale-[0.97] dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06]"; export default function Example() { return (

); } 33:T2b8d,

"use client";

import { Toaster, toast } from "@/components/scalar-ui/toast";

const button =
  "inline-flex h-10 items-center justify-center gap-2 rounded-[14px] bg-white px-4 text-sm font-medium tracking-[-0.01em] text-neutral-800 ring-1 ring-inset ring-black/[0.1] outline-none transition-[background-color,transform] hover:bg-neutral-50 active:scale-[0.97] dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06]";

export default function Example() {
  return (
    <div className="flex flex-wrap justify-center gap-2">
      <button type="button" className={button} onClick={() => toast.success("Link copied")}>
        Copy link
      </button>
      <button type="button" className={button} onClick={() => toast("Moved to Archive", { description: "3 projects", action: { label: "Undo", onClick: () => toast("Restored") } })}>
        Archive
      </button>
      <button type="button" className={button} onClick={() => toast.promise(new Promise((r) => setTimeout(r, 1500)), { loading: "Publishing…", success: "Published", error: "Failed" })}>
        Publish
      </button>
      <Toaster variant="pill" position="bottom-center" />
    </div>
  );
}

34:T482,"use client"; import { Toaster, toast } from "@/components/scalar-ui/toast"; const button = "inline-flex h-10 items-center justify-center gap-2 rounded-[14px] bg-white px-4 text-sm font-medium tracking-[-0.01em] text-neutral-800 ring-1 ring-inset ring-black/[0.1] outline-none transition-[background-color,transform] hover:bg-neutral-50 active:scale-[0.97] dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06]"; export default function Example() { return (

); } 35:T2ab9,

"use client";

import { Toaster, toast } from "@/components/scalar-ui/toast";

const button =
  "inline-flex h-10 items-center justify-center gap-2 rounded-[14px] bg-white px-4 text-sm font-medium tracking-[-0.01em] text-neutral-800 ring-1 ring-inset ring-black/[0.1] outline-none transition-[background-color,transform] hover:bg-neutral-50 active:scale-[0.97] dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06]";

export default function Example() {
  return (
    <div className="flex flex-wrap justify-center gap-2">
      <button type="button" className={button} onClick={() => toast.success("Invite sent to maya@aurora.app")}>
        Success
      </button>
      <button type="button" className={button} onClick={() => toast.info("A new version of the CLI is available")}>
        Info
      </button>
      <button type="button" className={button} onClick={() => toast.warning("This API key expires in 3 days")}>
        Warning
      </button>
      <button type="button" className={button} onClick={() => toast.error("Payment failed")}>
        Error
      </button>
      <Toaster />
    </div>
  );
}

36:T17d2,

"use client";

import { Toaster, toast } from "@/components/scalar-ui/toast";

const button =
  "inline-flex h-10 items-center justify-center gap-2 rounded-[14px] bg-white px-4 text-sm font-medium tracking-[-0.01em] text-neutral-800 ring-1 ring-inset ring-black/[0.1] outline-none transition-[background-color,transform] hover:bg-neutral-50 active:scale-[0.97] dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06]";

export default function Example() {
  return (
    <>
      <button
        type="button"
        className={button}
        onClick={() =>
          toast("3 files moved to trash", {
            description: "They’ll be deleted in 30 days.",
            action: { label: "Undo", onClick: () => toast.success("Files restored") },
          })
        }
      >
        Delete files
      </button>
      <Toaster />
    </>
  );
}

37:T1e72,

"use client";

import { Toaster, toast } from "@/components/scalar-ui/toast";

const button =
  "inline-flex h-10 items-center justify-center gap-2 rounded-[14px] bg-white px-4 text-sm font-medium tracking-[-0.01em] text-neutral-800 ring-1 ring-inset ring-black/[0.1] outline-none transition-[background-color,transform] hover:bg-neutral-50 active:scale-[0.97] dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06]";

const deploy = () => new Promise<string>((resolve) => setTimeout(() => resolve("aurora.app"), 1800));

export default function Example() {
  return (
    <>
      <button
        type="button"
        className={button}
        onClick={() =>
          toast.promise(deploy(), {
            loading: "Deploying aurora-web…",
            success: (url) => `Live on ${url}`,
            error: "Deployment failed",
          })
        }
      >
        Deploy
      </button>
      <Toaster />
    </>
  );
}

38:T42d,"use client"; import { Toaster, toast } from "@/components/scalar-ui/toast"; const button = "inline-flex h-10 items-center justify-center gap-2 rounded-[14px] bg-white px-4 text-sm font-medium tracking-[-0.01em] text-neutral-800 ring-1 ring-inset ring-black/[0.1] outline-none transition-[background-color,transform] hover:bg-neutral-50 active:scale-[0.97] dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06]"; const messages = ["Maya commented on Branch previews", "Jon promoted #482 to production", "Ari invited you to aurora-docs", "Sam merged fix/webhooks"]; export default function Example() { return (

Hover the stack to fan it out.

); } 39:T1edc,

"use client";

import { Toaster, toast } from "@/components/scalar-ui/toast";

const button =
  "inline-flex h-10 items-center justify-center gap-2 rounded-[14px] bg-white px-4 text-sm font-medium tracking-[-0.01em] text-neutral-800 ring-1 ring-inset ring-black/[0.1] outline-none transition-[background-color,transform] hover:bg-neutral-50 active:scale-[0.97] dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06]";

const messages = ["Maya commented on Branch previews", "Jon promoted #482 to production", "Ari invited you to aurora-docs", "Sam merged fix/webhooks"];

export default function Example() {
  return (
    <div className="flex flex-col items-center gap-2">
      <button
        type="button"
        className={button}
        onClick={() => messages.forEach((m, i) => setTimeout(() => toast(m, { duration: 8000 }), i * 250))}
      >
        Send four
      </button>
      <p className="text-[12.5px] text-neutral-500 dark:text-neutral-400">Hover the stack to fan it out.</p>
      <Toaster />
    </div>
  );
}

3a:T4af,"use client"; import { useState } from "react"; import { Toaster, toast } from "@/components/scalar-ui/toast"; const button = "inline-flex h-10 items-center justify-center gap-2 rounded-[14px] bg-white px-4 text-sm font-medium tracking-[-0.01em] text-neutral-800 ring-1 ring-inset ring-black/[0.1] outline-none transition-[background-color,transform] hover:bg-neutral-50 active:scale-[0.97] dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06]"; const positions = ["top-center", "top-right", "bottom-center", "bottom-right"] as const; export default function Example() { const [position, setPosition] = useState<(typeof positions)[number]>("top-center"); return (

{positions.map((p) => ( ))}

); } 3b:T2de9,

"use client";

import { useState } from "react";
import { Toaster, toast } from "@/components/scalar-ui/toast";

const button =
  "inline-flex h-10 items-center justify-center gap-2 rounded-[14px] bg-white px-4 text-sm font-medium tracking-[-0.01em] text-neutral-800 ring-1 ring-inset ring-black/[0.1] outline-none transition-[background-color,transform] hover:bg-neutral-50 active:scale-[0.97] dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06]";

const positions = ["top-center", "top-right", "bottom-center", "bottom-right"] as const;

export default function Example() {
  const [position, setPosition] = useState<(typeof positions)[number]>("top-center");
  return (
    <div className="flex flex-wrap justify-center gap-2">
      {positions.map((p) => (
        <button
          key={p}
          type="button"
          className={button}
          onClick={() => {
            toast.dismiss();
            setPosition(p);
            setTimeout(() => toast(`Shown ${p.replace("-", " ")}`), 50);
          }}
        >
          {p.replace("-", " ")}
        </button>
      ))}
      <Toaster key={position} position={position} />
    </div>
  );
}

29:["$","section","toast",{"id":"toast","aria-labelledby":"toast-title","className":"scroll-mt-24","children":[["$","header",null,{"className":"mb-5 flex flex-wrap items-start justify-between gap-4","children":[["$","div",null,{"className":"min-w-0 max-w-2xl","children":[["$","div",null,{"className":"flex flex-wrap items-center gap-2","children":[["$","h2",null,{"id":"toast-title","className":"sr-only","children":"Toast"}],false,false]}],false,["$","p",null,{"className":"font-mono text-[11.5px] text-fg-subtle","children":"radix-ui · motion · lucide-react"}]]}],false]}],["$","$L2b",null,{"children":["$","$L2c",null,{"slug":"toast","gated":{"unlocked":true,"files":[{"name":"toast.tsx","code":"$2d","html":"$2e"},{"name":"demo.tsx","code":"$2f","html":"$30"}],"examples":{"default":{"name":"default.tsx","code":"\"use client\";\n\nimport { Toaster, toast } from \"@/components/scalar-ui/toast\";\n\nconst button =\n \"inline-flex h-10 items-center justify-center gap-2 rounded-[14px] bg-white px-4 text-sm font-medium tracking-[-0.01em] text-neutral-800 ring-1 ring-inset ring-black/[0.1] outline-none transition-[background-color,transform] hover:bg-neutral-50 active:scale-[0.97] dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06]\";\n\nexport default function Example() {\n return (\n <>\n \n \n \n );\n}\n","html":"$31"},"pill":{"name":"pill.tsx","code":"$32","html":"$33"},"tones":{"name":"tones.tsx","code":"$34","html":"$35"},"with-action":{"name":"with-action.tsx","code":"\"use client\";\n\nimport { Toaster, toast } from \"@/components/scalar-ui/toast\";\n\nconst button =\n \"inline-flex h-10 items-center justify-center gap-2 rounded-[14px] bg-white px-4 text-sm font-medium tracking-[-0.01em] text-neutral-800 ring-1 ring-inset ring-black/[0.1] outline-none transition-[background-color,transform] hover:bg-neutral-50 active:scale-[0.97] dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06]\";\n\nexport default function Example() {\n return (\n <>\n \n toast(\"3 files moved to trash\", {\n description: \"They’ll be deleted in 30 days.\",\n action: { label: \"Undo\", onClick: () => toast.success(\"Files restored\") },\n })\n }\n >\n Delete files\n \n \n \n );\n}\n","html":"$36"},"promise":{"name":"promise.tsx","code":"\"use client\";\n\nimport { Toaster, toast } from \"@/components/scalar-ui/toast\";\n\nconst button =\n \"inline-flex h-10 items-center justify-center gap-2 rounded-[14px] bg-white px-4 text-sm font-medium tracking-[-0.01em] text-neutral-800 ring-1 ring-inset ring-black/[0.1] outline-none transition-[background-color,transform] hover:bg-neutral-50 active:scale-[0.97] dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06]\";\n\nconst deploy = () => new Promise((resolve) => setTimeout(() => resolve(\"aurora.app\"), 1800));\n\nexport default function Example() {\n return (\n <>\n \n toast.promise(deploy(), {\n loading: \"Deploying aurora-web…\",\n success: (url) => `Live on ${url}`,\n error: \"Deployment failed\",\n })\n }\n >\n Deploy\n \n \n \n );\n}\n","html":"$37"},"stacked":{"name":"stacked.tsx","code":"$38","html":"$39"},"position":{"name":"position.tsx","code":"$3a","html":"$3b"}},"prompt":"","promptHtml":""},"install":{"cli":"npx scalar-ui add toast","shadcn":"npx shadcn@latest add https://scalarui.com/r/toast.json","shadcnConfig":"{\n \"registries\": {\n \"@scalar-ui\": {\n \"url\": \"https://scalarui.com/r/{name}.json\",\n \"headers\": {\n \"Authorization\": \"Bearer ${SCALAR_TOKEN}\"\n }\n }\n }\n}","mcpClaude":"claude mcp add scalar-ui \\\n -e SCALAR_TOKEN=slk_your_token \\\n -e SCALAR_URL=https://scalarui.com \\\n -- npx -y @scalardesign/mcp","mcpJson":"{\n \"mcpServers\": {\n \"scalar-ui\": {\n \"command\": \"npx\",\n \"args\": [\n \"-y\",\n \"@scalardesign/mcp\"\n ],\n \"env\": {\n \"SCALAR_TOKEN\": \"slk_your_token\",\n \"SCALAR_URL\": \"https://scalarui.com\"\n }\n }\n }\n}","npm":"npm install radix-ui motion lucide-react","origin":"https://scalarui.com"},"open":true,"prompt":false,"shadcn":false,"preview":"$L3c","toolbar":"$L3d"}]}],["$L3e","$L3f","$L40","$L41","$L42","$L43","$L44"]]}]

Toasts

Toasts

Default

Pill

Tones

With Action

Promise

Stacked

Position