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:T1a5f,"use client"; import { AnimatePresence, MotionConfig, motion } from "motion/react"; import { LoaderCircle } from "lucide-react"; import { AlertDialog as AlertDialogPrimitive } from "radix-ui"; import { createContext, useCallback, useContext, useState, type ComponentProps } from "react"; import { cn } from "@/lib/utils"; const OpenContext = createContext(false); export function AlertDialog({ open: openProp, defaultOpen = false, onOpenChange, ...props }: ComponentProps) { const [uncontrolled, setUncontrolled] = useState(defaultOpen); const open = openProp ?? uncontrolled; const setOpen = useCallback( (next: boolean) => { if (openProp === undefined) setUncontrolled(next); onOpenChange?.(next); }, [openProp, onOpenChange], ); return ( ); } export const AlertDialogTrigger = AlertDialogPrimitive.Trigger; const WIDTHS = { sm: "max-w-[360px]", md: "max-w-[440px]" } as const; export interface AlertDialogContentProps extends ComponentProps { size?: keyof typeof WIDTHS; } /** No close button and no click-outside: the person has to pick an action or press Esc. */ export function AlertDialogContent({ size = "md", className, children, ...props }: AlertDialogContentProps) { const open = useContext(OpenContext); return ( {open && (

{children}

)} ); } const MEDIA = { neutral: "text-neutral-600 dark:text-neutral-300", danger: "text-red-600 dark:text-red-400", warning: "text-amber-600 dark:text-amber-400", success: "text-emerald-600 dark:text-emerald-400", } as const; /** A raised icon tile above the title. */ export function AlertDialogMedia({ tone = "neutral", className, ...props }: ComponentProps<"div"> & { tone?: keyof typeof MEDIA }) { return (

); } export function AlertDialogHeader({ className, ...props }: ComponentProps<"div">) { return

; } export function AlertDialogFooter({ className, ...props }: ComponentProps<"div">) { return

; } export function AlertDialogTitle({ className, ...props }: ComponentProps) { return ; } export function AlertDialogDescription({ className, ...props }: ComponentProps) { return ; } const BUTTON = "inline-flex h-10 items-center justify-center gap-2 rounded-[14px] px-4 text-sm font-medium tracking-[-0.01em] outline-none transition-[background-color,transform] active:scale-[0.97] disabled:pointer-events-none disabled:opacity-60"; const ACTION = { default: "bg-neutral-950 text-white hover:bg-neutral-800 focus-visible:bg-neutral-800 dark:bg-white dark:text-neutral-950 dark:hover:bg-neutral-200", destructive: "bg-red-600 text-white hover:bg-red-500 focus-visible:bg-red-500", } as const; export interface AlertDialogActionProps extends ComponentProps { variant?: keyof typeof ACTION; /** Show a spinner and disable the button, e.g. while a request runs. */ loading?: boolean; } export function AlertDialogAction({ variant = "default", loading = false, disabled, className, children, ...props }: AlertDialogActionProps) { return ( {loading && } {children} ); } export function AlertDialogCancel({ className, ...props }: ComponentProps) { return ( ); } export default AlertDialog; 2e:Tdaf1,

"use client";

import { AnimatePresence, MotionConfig, motion } from "motion/react";
import { LoaderCircle } from "lucide-react";
import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
import { createContext, useCallback, useContext, useState, type ComponentProps } from "react";
import { cn } from "@/lib/utils";

const OpenContext = createContext(false);

export function AlertDialog({ open: openProp, defaultOpen = false, onOpenChange, ...props }: ComponentProps<typeof AlertDialogPrimitive.Root>) {
  const [uncontrolled, setUncontrolled] = useState(defaultOpen);
  const open = openProp ?? uncontrolled;
  const setOpen = useCallback(
    (next: boolean) => {
      if (openProp === undefined) setUncontrolled(next);
      onOpenChange?.(next);
    },
    [openProp, onOpenChange],
  );
  return (
    <OpenContext.Provider value={open}>
      <AlertDialogPrimitive.Root open={open} onOpenChange={setOpen} {...props} />
    </OpenContext.Provider>
  );
}

export const AlertDialogTrigger = AlertDialogPrimitive.Trigger;

const WIDTHS = { sm: "max-w-[360px]", md: "max-w-[440px]" } as const;

export interface AlertDialogContentProps extends ComponentProps<typeof AlertDialogPrimitive.Content> {
  size?: keyof typeof WIDTHS;
}

/** No close button and no click-outside: the person has to pick an action or press Esc. */
export function AlertDialogContent({ size = "md", className, children, ...props }: AlertDialogContentProps) {
  const open = useContext(OpenContext);
  return (
    <AnimatePresence>
      {open && (
        <AlertDialogPrimitive.Portal forceMount>
          <MotionConfig reducedMotion="user">
            <AlertDialogPrimitive.Overlay forceMount asChild>
              <motion.div
                className="fixed inset-0 z-50 bg-neutral-950/40 backdrop-blur-[2px] dark:bg-black/60"
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
                transition={{ duration: 0.2, ease: "easeOut" }}
              />
            </AlertDialogPrimitive.Overlay>
            <div className="pointer-events-none fixed inset-0 z-50 grid place-items-center p-4">
              <AlertDialogPrimitive.Content forceMount asChild {...props}>
                <motion.div
                  className={cn(
                    "pointer-events-auto relative w-full rounded-[22px] bg-white p-6 text-neutral-950 outline-none",
                    "shadow-[0_24px_64px_-16px_rgb(0_0_0/0.28),0_2px_6px_rgb(0_0_0/0.06)] ring-1 ring-black/[0.06]",
                    "dark:bg-neutral-900 dark:text-white dark:shadow-[0_24px_64px_-12px_rgb(0_0_0/0.7)] dark:ring-white/[0.1]",
                    WIDTHS[size],
                    className,
                  )}
                  initial={{ opacity: 0, scale: 0.96, y: 10 }}
                  animate={{ opacity: 1, scale: 1, y: 0 }}
                  exit={{ opacity: 0, scale: 0.97, y: 6, transition: { duration: 0.14, ease: "easeIn" } }}
                  transition={{ type: "spring", bounce: 0.16, duration: 0.38 }}
                >
                  {children}
                </motion.div>
              </AlertDialogPrimitive.Content>
            </div>
          </MotionConfig>
        </AlertDialogPrimitive.Portal>
      )}
    </AnimatePresence>
  );
}

const MEDIA = {
  neutral: "text-neutral-600 dark:text-neutral-300",
  danger: "text-red-600 dark:text-red-400",
  warning: "text-amber-600 dark:text-amber-400",
  success: "text-emerald-600 dark:text-emerald-400",
} as const;

/** A raised icon tile above the title. */
export function AlertDialogMedia({ tone = "neutral", className, ...props }: ComponentProps<"div"> & { tone?: keyof typeof MEDIA }) {
  return (
    <div
      className={cn(
        "mb-4 flex size-11 items-center justify-center rounded-2xl bg-white [&_svg]:size-5",
        "shadow-[inset_0_0_0_1px_rgb(0_0_0/0.07),inset_0_-2px_0_rgb(0_0_0/0.04),0_1px_2px_rgb(0_0_0/0.08),0_2px_6px_-2px_rgb(0_0_0/0.08)]",
        "dark:bg-neutral-800 dark:shadow-[inset_0_0_0_1px_rgb(255_255_255/0.08),inset_0_1px_0_rgb(255_255_255/0.1),0_1px_2px_rgb(0_0_0/0.4)]",
        MEDIA[tone],
        className,
      )}
      {...props}
    />
  );
}

export function AlertDialogHeader({ className, ...props }: ComponentProps<"div">) {
  return <div className={cn("flex flex-col gap-1.5", className)} {...props} />;
}

export function AlertDialogFooter({ className, ...props }: ComponentProps<"div">) {
  return <div className={cn("mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)} {...props} />;
}

export function AlertDialogTitle({ className, ...props }: ComponentProps<typeof AlertDialogPrimitive.Title>) {
  return <AlertDialogPrimitive.Title className={cn("text-[17px] font-semibold tracking-[-0.015em]", className)} {...props} />;
}

export function AlertDialogDescription({ className, ...props }: ComponentProps<typeof AlertDialogPrimitive.Description>) {
  return <AlertDialogPrimitive.Description className={cn("text-[13.5px] leading-relaxed text-neutral-500 dark:text-neutral-400", className)} {...props} />;
}

const BUTTON =
  "inline-flex h-10 items-center justify-center gap-2 rounded-[14px] px-4 text-sm font-medium tracking-[-0.01em] outline-none transition-[background-color,transform] active:scale-[0.97] disabled:pointer-events-none disabled:opacity-60";

const ACTION = {
  default: "bg-neutral-950 text-white hover:bg-neutral-800 focus-visible:bg-neutral-800 dark:bg-white dark:text-neutral-950 dark:hover:bg-neutral-200",
  destructive: "bg-red-600 text-white hover:bg-red-500 focus-visible:bg-red-500",
} as const;

export interface AlertDialogActionProps extends ComponentProps<typeof AlertDialogPrimitive.Action> {
  variant?: keyof typeof ACTION;
  /** Show a spinner and disable the button, e.g. while a request runs. */
  loading?: boolean;
}

export function AlertDialogAction({ variant = "default", loading = false, disabled, className, children, ...props }: AlertDialogActionProps) {
  return (
    <AlertDialogPrimitive.Action disabled={disabled || loading} className={cn(BUTTON, ACTION[variant], className)} {...props}>
      {loading && <LoaderCircle className="size-4 animate-spin" />}
      {children}
    </AlertDialogPrimitive.Action>
  );
}

export function AlertDialogCancel({ className, ...props }: ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
  return (
    <AlertDialogPrimitive.Cancel
      className={cn(
        BUTTON,
        "bg-white text-neutral-800 ring-1 ring-inset ring-black/[0.1] hover:bg-neutral-50 focus-visible:bg-neutral-50 dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06]",
        className,
      )}
      {...props}
    />
  );
}

export default AlertDialog;

2f:T61c,import { Trash2 } from "lucide-react"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogTitle, AlertDialogTrigger, } from "@/components/scalar-ui/alert-dialog"; const trigger = "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] [&_svg]:size-4"; export default function Demo() { return ( Delete project Delete aurora-web? This removes the project, its 14 deployments and every environment variable. You can’t undo this. Cancel Delete project ); } 30:T277b,

import { Trash2 } from "lucide-react";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogMedia,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/scalar-ui/alert-dialog";

const trigger =
  "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] [&_svg]:size-4";

export default function Demo() {
  return (
    <AlertDialog>
      <AlertDialogTrigger className={`${trigger} text-red-600 dark:text-red-400`}>
        <Trash2 />
        Delete project
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogMedia tone="danger">
          <Trash2 />
        </AlertDialogMedia>
        <AlertDialogHeader>
          <AlertDialogTitle>Delete aurora-web?</AlertDialogTitle>
          <AlertDialogDescription>This removes the project, its 14 deployments and every environment variable. You can’t undo this.</AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction variant="destructive">Delete project</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

31:T501,import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@/components/scalar-ui/alert-dialog"; const trigger = "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] [&_svg]:size-4"; export default function Example() { return ( Discard draft Discard this draft? Your changes since the last save will be lost. Keep editing Discard ); } 32:T1f3c,

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/scalar-ui/alert-dialog";

const trigger =
  "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] [&_svg]:size-4";

export default function Example() {
  return (
    <AlertDialog>
      <AlertDialogTrigger className={trigger}>Discard draft</AlertDialogTrigger>
      <AlertDialogContent size="sm">
        <AlertDialogHeader>
          <AlertDialogTitle>Discard this draft?</AlertDialogTitle>
          <AlertDialogDescription>Your changes since the last save will be lost.</AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Keep editing</AlertDialogCancel>
          <AlertDialogAction>Discard</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

33:T61b,import { LogOut } from "lucide-react"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogTitle, AlertDialogTrigger, } from "@/components/scalar-ui/alert-dialog"; const trigger = "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] [&_svg]:size-4"; export default function Example() { return ( Sign out Sign out of every device? You’ll need to sign in again on your phone and laptop. Cancel Sign out everywhere ); } 34:T287a,

import { LogOut } from "lucide-react";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogMedia,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/scalar-ui/alert-dialog";

const trigger =
  "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] [&_svg]:size-4";

export default function Example() {
  return (
    <AlertDialog>
      <AlertDialogTrigger className={trigger}>
        <LogOut />
        Sign out
      </AlertDialogTrigger>
      <AlertDialogContent size="sm" className="text-center">
        <AlertDialogMedia className="mx-auto">
          <LogOut />
        </AlertDialogMedia>
        <AlertDialogHeader>
          <AlertDialogTitle>Sign out of every device?</AlertDialogTitle>
          <AlertDialogDescription>You’ll need to sign in again on your phone and laptop.</AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter className="sm:flex-col-reverse sm:justify-stretch">
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction>Sign out everywhere</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

35:T888,"use client"; import { useState } from "react"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@/components/scalar-ui/alert-dialog"; const trigger = "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] [&_svg]:size-4"; export default function Example() { const [typed, setTyped] = useState(""); return ( setTyped("")}> Delete workspace Delete the Aurora workspace? All projects, members and billing history go with it. Type aurora to confirm setTyped(e.target.value)} placeholder="aurora" className="mt-2 block h-10 w-full rounded-xl bg-neutral-50 px-3 font-mono text-sm text-neutral-900 outline-none ring-1 ring-inset ring-black/[0.08] placeholder:text-neutral-400 focus:ring-2 focus:ring-neutral-950/20 dark:bg-white/[0.04] dark:text-white dark:ring-white/[0.1]" /> Cancel Delete workspace ); } 36:T3862,

"use client";

import { useState } from "react";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/scalar-ui/alert-dialog";

const trigger =
  "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] [&_svg]:size-4";

export default function Example() {
  const [typed, setTyped] = useState("");
  return (
    <AlertDialog onOpenChange={() => setTyped("")}>
      <AlertDialogTrigger className={`${trigger} text-red-600 dark:text-red-400`}>Delete workspace</AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Delete the Aurora workspace?</AlertDialogTitle>
          <AlertDialogDescription>All projects, members and billing history go with it.</AlertDialogDescription>
        </AlertDialogHeader>
        <label className="mt-5 block text-[12.5px] font-medium text-neutral-600 dark:text-neutral-300">
          Type <span className="font-mono text-neutral-950 dark:text-white">aurora</span> to confirm
          <input
            value={typed}
            onChange={(e) => setTyped(e.target.value)}
            placeholder="aurora"
            className="mt-2 block h-10 w-full rounded-xl bg-neutral-50 px-3 font-mono text-sm text-neutral-900 outline-none ring-1 ring-inset ring-black/[0.08] placeholder:text-neutral-400 focus:ring-2 focus:ring-neutral-950/20 dark:bg-white/[0.04] dark:text-white dark:ring-white/[0.1]"
          />
        </label>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction variant="destructive" disabled={typed !== "aurora"}>
            Delete workspace
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

37:T802,"use client"; import { RotateCcw } from "lucide-react"; import { useState } from "react"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogTitle, AlertDialogTrigger, } from "@/components/scalar-ui/alert-dialog"; const trigger = "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] [&_svg]:size-4"; export default function Example() { const [open, setOpen] = useState(false); const [loading, setLoading] = useState(false); return ( !loading && setOpen(next)}> Roll back Roll back to #481? Production will serve the previous build. The current one stays available for an hour. Cancel { e.preventDefault(); setLoading(true); setTimeout(() => { setLoading(false); setOpen(false); }, 1400); }} > {loading ? "Rolling back" : "Roll back"} ); } 38:T4225,

"use client";

import { RotateCcw } from "lucide-react";
import { useState } from "react";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogMedia,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/scalar-ui/alert-dialog";

const trigger =
  "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] [&_svg]:size-4";

export default function Example() {
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  return (
    <AlertDialog open={open} onOpenChange={(next) => !loading && setOpen(next)}>
      <AlertDialogTrigger className={trigger}>
        <RotateCcw />
        Roll back
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogMedia tone="warning">
          <RotateCcw />
        </AlertDialogMedia>
        <AlertDialogHeader>
          <AlertDialogTitle>Roll back to #481?</AlertDialogTitle>
          <AlertDialogDescription>Production will serve the previous build. The current one stays available for an hour.</AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel disabled={loading}>Cancel</AlertDialogCancel>
          <AlertDialogAction
            loading={loading}
            onClick={(e) => {
              e.preventDefault();
              setLoading(true);
              setTimeout(() => {
                setLoading(false);
                setOpen(false);
              }, 1400);
            }}
          >
            {loading ? "Rolling back" : "Roll back"}
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

39:T892,import { CircleCheck, ShieldAlert, TriangleAlert } from "lucide-react"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogTitle, AlertDialogTrigger, } from "@/components/scalar-ui/alert-dialog"; const trigger = "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] [&_svg]:size-4"; const dialogs = [ { tone: "warning", icon: TriangleAlert, label: "Warning", title: "Leave without saving?", body: "You have unsaved changes on 3 fields.", action: "Leave" }, { tone: "danger", icon: ShieldAlert, label: "Danger", title: "Revoke this API key?", body: "Anything using it stops working right away.", action: "Revoke" }, { tone: "success", icon: CircleCheck, label: "Success", title: "Publish the changelog?", body: "Subscribers get an email in a few minutes.", action: "Publish" }, ] as const; export default function Example() { return (

{dialogs.map(({ tone, icon: Icon, label, title, body, action }) => ( {label} {title} {body} Cancel {action} ))}

); } 3a:T436c,

import { CircleCheck, ShieldAlert, TriangleAlert } from "lucide-react";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogMedia,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/scalar-ui/alert-dialog";

const trigger =
  "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] [&_svg]:size-4";

const dialogs = [
  { tone: "warning", icon: TriangleAlert, label: "Warning", title: "Leave without saving?", body: "You have unsaved changes on 3 fields.", action: "Leave" },
  { tone: "danger", icon: ShieldAlert, label: "Danger", title: "Revoke this API key?", body: "Anything using it stops working right away.", action: "Revoke" },
  { tone: "success", icon: CircleCheck, label: "Success", title: "Publish the changelog?", body: "Subscribers get an email in a few minutes.", action: "Publish" },
] as const;

export default function Example() {
  return (
    <div className="flex flex-wrap justify-center gap-3">
      {dialogs.map(({ tone, icon: Icon, label, title, body, action }) => (
        <AlertDialog key={tone}>
          <AlertDialogTrigger className={trigger}>{label}</AlertDialogTrigger>
          <AlertDialogContent size="sm">
            <AlertDialogMedia tone={tone}>
              <Icon />
            </AlertDialogMedia>
            <AlertDialogHeader>
              <AlertDialogTitle>{title}</AlertDialogTitle>
              <AlertDialogDescription>{body}</AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel>Cancel</AlertDialogCancel>
              <AlertDialogAction variant={tone === "danger" ? "destructive" : "default"}>{action}</AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>
      ))}
    </div>
  );
}

29:["$","section","alert-dialog",{"id":"alert-dialog","aria-labelledby":"alert-dialog-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":"alert-dialog-title","className":"sr-only","children":"Alert Dialog"}],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":"alert-dialog","gated":{"unlocked":true,"files":[{"name":"alert-dialog.tsx","code":"$2d","html":"$2e"},{"name":"demo.tsx","code":"$2f","html":"$30"}],"examples":{"default":{"name":"default.tsx","code":"$31","html":"$32"},"centered":{"name":"centered.tsx","code":"$33","html":"$34"},"type-to-confirm":{"name":"type-to-confirm.tsx","code":"$35","html":"$36"},"async-action":{"name":"async-action.tsx","code":"$37","html":"$38"},"tones":{"name":"tones.tsx","code":"$39","html":"$3a"}},"prompt":"","promptHtml":""},"install":{"cli":"npx scalar-ui add alert-dialog","shadcn":"npx shadcn@latest add https://scalarui.com/r/alert-dialog.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":"$L3b","toolbar":"$L3c"}]}],["$L3d","$L3e","$L3f","$L40","$L41"]]}]

Alert Dialogs

Alert Dialogs

Default

Centered

Type to Confirm

Async Action

Tones