Alert Dialog

- Root wraps Radix `AlertDialog.Root` in its own controllable state and a
  context holding `setOpen`, `pending`, `setPending`, `nudge` and the content
  ref. `onOpenChange(false)` is ignored while `pending`.
- `AlertDialogAction` renders our `Button asChild` around Radix `Action`. On
  click it calls `onConfirm`; if that returns a Promise it calls
  `event.preventDefault()` (Radix's composed handler then skips its close),
  sets pending, and on resolve clears pending and closes. Button's `loading`
  gives `aria-busy` + `aria-disabled` + a capture-phase click guard. The
  spinner is rendered inside the slotted child because Button only draws its
  own spinner for a real `<button>`.
- Radix overrides `onPointerDownOutside` on AlertDialog content, so the nudge
  hooks `onPointerDown` on the overlay (which covers everything outside the
  panel). It runs a WAAPI `scale` 1 → 1.015 → 1 over 1.2 × `--motion-base` on
  `--motion-move`, read from computed style. `scale` is separate from the
  `translate` used for centring, so they compose.
- Panel: same raised recipe and keyframes as Dialog (`dialog-zoom-in` 320 ms
  enter, `dialog-fade-out` 120 ms exit), `rounded-2xl`, `shadow-raised-lg`.
- Danger key: the danger-key tokens (`--danger-key-top` → `--danger-key-bottom`
  gradient, `--danger-key-edge` ring, `--danger-key-foreground` text,
  `--danger-key-shine` + `--elevation-sm`); pressed flips to
  `bg-linear-to-t` with `--key-press`.
- Media tile: 40 px circle; motion spring (stiffness 420, damping 22) from
  scale 0.6 with a 60 ms delay so it lands just after the panel.
- Layout uses group variants on `data-size` (`group/alert-dialog`) so Header,
  Description and Footer switch between the side and stacked layouts with no
  props.

<!-- PEBBLE-LICENSE -->

registry/overlay/alert-dialog/alert-dialog.tsx

"use client";

/* PEBBLE-LICENSE
Built by Pebble. Component: alert-dialog.

First-party license: MIT

The following first-party terms apply only to original Pebble material.

MIT License

Copyright (c) 2026 Praxys Solutions LLC (Pebble)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

THIRD-PARTY NOTICES
These notices apply to identified upstream portions; Pebble terms do not replace or narrow their rights.

Upstream: https://raw.githubusercontent.com/shadcn-ui/ui/main/LICENSE.md
MIT License

Copyright (c) 2023 shadcn

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
END PEBBLE-LICENSE */

import * as React from "react";
import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
import { motion, MotionConfig } from "motion/react";

import { cn } from "@/lib/utils";
import { Button, type ButtonProps } from "@/registry/button/button/button";

type Tone = "default" | "danger";

type AlertDialogContextValue = {
  setOpen: (open: boolean) => void;
  pending: boolean;
  setPending: (pending: boolean) => void;
  nudge: () => void;
  contentRef: React.RefObject<HTMLDivElement | null>;
};

const AlertDialogContext = React.createContext<AlertDialogContextValue | null>(null);

function useAlertDialog(part: string) {
  const context = React.useContext(AlertDialogContext);
  if (!context) throw new Error(`<${part}> must be used inside <AlertDialog>.`);
  return context;
}

const ContentContext = React.createContext<{ tone: Tone; size: "sm" | "md" }>({
  tone: "default",
  size: "md",
});

export type AlertDialogProps = React.ComponentProps<typeof AlertDialogPrimitive.Root>;

export function AlertDialog({
  open: openProp,
  defaultOpen = false,
  onOpenChange,
  ...props
}: AlertDialogProps) {
  const [uncontrolled, setUncontrolled] = React.useState(defaultOpen);
  const [pending, setPending] = React.useState(false);
  const contentRef = React.useRef<HTMLDivElement | null>(null);
  const open = openProp ?? uncontrolled;

  const setOpen = React.useCallback(
    (next: boolean) => {
      if (openProp === undefined) setUncontrolled(next);
      onOpenChange?.(next);
    },
    [openProp, onOpenChange],
  );

  // A pending confirm owns the dialog: Escape and Cancel can't close it until
  // the work settles, so the user never loses sight of an in-flight action.
  const handleOpenChange = React.useCallback(
    (next: boolean) => {
      if (!next && pending) return;
      setOpen(next);
    },
    [pending, setOpen],
  );

  // An alert dialog ignores outside clicks. A small pulse of the panel says
  // "choose one" instead of failing silently. Runs from an event, never render.
  const nudge = React.useCallback(() => {
    const node = contentRef.current;
    if (!node || typeof node.animate !== "function") return;
    if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
    const base = parseFloat(getComputedStyle(node).getPropertyValue("--motion-base")) || 200;
    node.animate([{ scale: "1" }, { scale: "1.015" }, { scale: "1" }], {
      duration: base * 1.2,
      easing: getComputedStyle(node).getPropertyValue("--motion-move") || "ease-in-out",
    });
  }, []);

  const value = React.useMemo(
    () => ({ setOpen, pending, setPending, nudge, contentRef }),
    [setOpen, pending, nudge],
  );

  return (
    <AlertDialogContext.Provider value={value}>
      <AlertDialogPrimitive.Root
        data-slot="alert-dialog"
        open={open}
        onOpenChange={handleOpenChange}
        {...props}
      />
    </AlertDialogContext.Provider>
  );
}

export function AlertDialogTrigger(
  props: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>,
) {
  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
}

export function AlertDialogPortal(props: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
}

export function AlertDialogOverlay({
  className,
  onPointerDown,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
  const { nudge } = useAlertDialog("AlertDialogOverlay");
  return (
    <AlertDialogPrimitive.Overlay
      data-slot="alert-dialog-overlay"
      onPointerDown={(event) => {
        onPointerDown?.(event);
        if (!event.defaultPrevented) nudge();
      }}
      className={cn(
        // Same scrim as Dialog: black, not foreground, so dark mode dims too.
        "fixed inset-0 z-50 bg-scrim backdrop-blur-[2px]",
        "data-[state=open]:animate-[dialog-fade-in_var(--motion-base)_var(--motion-enter)]",
        "data-[state=closed]:animate-[dialog-fade-out_var(--motion-fast)_var(--motion-exit)]",
        className,
      )}
      {...props}
    />
  );
}

const sizes = {
  sm: "sm:max-w-xs",
  md: "sm:max-w-md",
} as const;

export type AlertDialogContentProps = React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
  /** `sm` is a compact, centred prompt with equal-width actions. */
  size?: keyof typeof sizes;
  /** `danger` tints the media tile and marks the panel for destructive choices. */
  tone?: Tone;
};

export function AlertDialogContent({
  className,
  size = "md",
  tone = "default",
  children,
  ref,
  ...props
}: AlertDialogContentProps) {
  const { pending, contentRef } = useAlertDialog("AlertDialogContent");
  const setRefs = React.useCallback(
    (node: HTMLDivElement | null) => {
      contentRef.current = node;
      if (typeof ref === "function") ref(node);
      else if (ref) ref.current = node;
    },
    [contentRef, ref],
  );
  const contentContext = React.useMemo(() => ({ tone, size }), [tone, size]);
  return (
    <AlertDialogPortal>
      <AlertDialogOverlay />
      <AlertDialogPrimitive.Content
        ref={setRefs}
        data-slot="alert-dialog-content"
        data-size={size}
        data-tone={tone}
        aria-busy={pending || undefined}
        className={cn(
          "group/alert-dialog fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-5",
          "rounded-2xl bg-card p-6 text-card-foreground shadow-raised-lg ring-1 inset-shadow-highlight ring-hairline outline-none",
          "data-[size=sm]:gap-4 data-[size=sm]:p-5",
          "forced-colors:border forced-colors:border-[CanvasText]",
          "motion-safe:data-[state=open]:animate-[dialog-zoom-in_var(--motion-slow)_var(--motion-enter)]",
          "motion-reduce:data-[state=open]:animate-[dialog-fade-in_var(--motion-base)_linear]",
          "data-[state=closed]:animate-[dialog-fade-out_var(--motion-fast)_var(--motion-exit)]",
          sizes[size],
          className,
        )}
        {...props}
      >
        <ContentContext.Provider value={contentContext}>{children}</ContentContext.Provider>
      </AlertDialogPrimitive.Content>
    </AlertDialogPortal>
  );
}

export function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="alert-dialog-header"
      className={cn(
        // md: media to the left of the text. sm: everything stacked, centred.
        "grid gap-x-4 gap-y-1.5 text-left has-data-[slot=alert-dialog-media]:grid-cols-[auto_1fr]",
        "group-data-[size=sm]/alert-dialog:justify-items-center group-data-[size=sm]/alert-dialog:text-center group-data-[size=sm]/alert-dialog:has-data-[slot=alert-dialog-media]:grid-cols-1",
        className,
      )}
      {...props}
    />
  );
}

export function AlertDialogMedia({
  className,
  children,
}: {
  className?: string;
  children?: React.ReactNode;
}) {
  const { tone } = React.useContext(ContentContext);
  return (
    <MotionConfig reducedMotion="user">
      <motion.div
        data-slot="alert-dialog-media"
        data-tone={tone}
        // The tile settles in just after the panel: a small, touched-feeling
        // spring that draws the eye to the icon before the copy.
        initial={{ opacity: 0, scale: 0.6 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{ type: "spring", stiffness: 420, damping: 22, mass: 0.8, delay: 0.06 }}
        className={cn(
          "row-span-2 flex size-10 items-center justify-center rounded-full [&_svg:not([class*='size-'])]:size-5",
          "group-data-[size=sm]/alert-dialog:row-span-1 group-data-[size=sm]/alert-dialog:mb-1.5",
          tone === "danger"
            ? "bg-danger/12 text-danger-strong ring-1 ring-danger/20"
            : "bg-muted text-foreground ring-1 inset-shadow-highlight ring-hairline",
          className,
        )}
      >
        {children}
      </motion.div>
    </MotionConfig>
  );
}

export function AlertDialogTitle({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
  return (
    <AlertDialogPrimitive.Title
      data-slot="alert-dialog-title"
      className={cn(
        "self-end text-base leading-snug font-semibold tracking-[-0.01em] text-balance",
        className,
      )}
      {...props}
    />
  );
}

export function AlertDialogDescription({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
  return (
    <AlertDialogPrimitive.Description
      data-slot="alert-dialog-description"
      className={cn(
        "text-sm leading-relaxed text-pretty text-muted-foreground group-has-data-[slot=alert-dialog-media]/alert-dialog:col-start-2 group-data-[size=sm]/alert-dialog:col-start-1",
        className,
      )}
      {...props}
    />
  );
}

export function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="alert-dialog-footer"
      className={cn(
        "flex flex-col-reverse gap-2 pt-1 sm:flex-row sm:justify-end",
        "group-data-[size=sm]/alert-dialog:grid group-data-[size=sm]/alert-dialog:grid-cols-2 group-data-[size=sm]/alert-dialog:pt-0",
        className,
      )}
      {...props}
    />
  );
}

// The destructive key: Pebble's lit key, re-cut in danger red. Same gradient,
// edge ring and top shine; pressed it flips and sinks like the ink key.
const dangerKey =
  "bg-linear-to-b from-danger-key-top to-danger-key-bottom text-danger-key-foreground ring-1 ring-danger-key-edge shadow-[var(--danger-key-shine),var(--elevation-sm)] hover:shadow-[var(--danger-key-shine),var(--elevation-md)] active:bg-linear-to-t active:shadow-[var(--key-press)]";

export type AlertDialogActionProps = Omit<
  React.ComponentProps<typeof AlertDialogPrimitive.Action>,
  "onClick"
> &
  Pick<ButtonProps, "size"> & {
    variant?: "primary" | "danger";
    onClick?: React.MouseEventHandler<HTMLButtonElement>;
    /**
     * Async confirm. While the promise is pending the action shows a spinner,
     * Cancel and Escape are held, and the dialog closes when it resolves. A
     * rejection keeps the dialog open so the caller can show an error.
     */
    onConfirm?: () => unknown;
    /** Label shown while `onConfirm` is pending. Defaults to the children. */
    pendingLabel?: React.ReactNode;
  };

export function AlertDialogAction({
  className,
  variant = "primary",
  size,
  onClick,
  onConfirm,
  pendingLabel,
  children,
  ...props
}: AlertDialogActionProps) {
  const { pending, setPending, setOpen } = useAlertDialog("AlertDialogAction");
  return (
    <Button
      asChild
      size={size}
      loading={pending}
      variant="primary"
      className={cn(variant === "danger" && dangerKey, "min-w-24", className)}
    >
      <AlertDialogPrimitive.Action
        data-slot="alert-dialog-action"
        data-variant={variant}
        onClick={(event) => {
          onClick?.(event);
          if (event.defaultPrevented || !onConfirm) return;
          const result = onConfirm();
          if (!(result instanceof Promise)) return;
          // Keep the dialog open until the work settles.
          event.preventDefault();
          setPending(true);
          result.then(
            () => {
              setPending(false);
              setOpen(false);
            },
            () => setPending(false),
          );
        }}
        {...props}
      >
        {pending ? (
          <>
            <span
              aria-hidden
              className="size-4 animate-spin rounded-full border-2 border-current border-r-transparent motion-reduce:[animation-duration:2s]"
            />
            {pendingLabel ?? children}
          </>
        ) : (
          children
        )}
      </AlertDialogPrimitive.Action>
    </Button>
  );
}

export type AlertDialogCancelProps = React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
  Pick<ButtonProps, "size" | "variant">;

export function AlertDialogCancel({
  className,
  variant = "secondary",
  size,
  ...props
}: AlertDialogCancelProps) {
  const { pending } = useAlertDialog("AlertDialogCancel");
  return (
    <Button asChild variant={variant} size={size} disabled={pending} className={className}>
      <AlertDialogPrimitive.Cancel data-slot="alert-dialog-cancel" {...props} />
    </Button>
  );
}