Confirm Popover

- `Popover` controlled through a guard that ignores close requests while a
  confirm is pending; `PopoverContent` role overridden to `alertdialog`,
  `onOpenAutoFocus` prevented and focus sent to Cancel or Confirm by tone.
- Skip: `onClickCapture` on the trigger calls `preventDefault()` (Radix's
  composed toggle then skips) and confirms with `{ dontAskAgain: true }`.
- Pending uses Button's `loading` (spinner, `aria-busy`, click guard).
- Danger key: the danger-key tokens (`--danger-key-top/-bottom/-edge`,
  `--danger-key-foreground`, `--danger-key-shine`), shared with AlertDialog.
- Error line: height auto ↔ 0 over 200 ms on the enter curve.

<!-- PEBBLE-LICENSE -->

registry/overlay/confirm-popover/confirm-popover.tsx

"use client";

/* PEBBLE-LICENSE
Built by Pebble. Component: confirm-popover.

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.
END PEBBLE-LICENSE */

import * as React from "react";
import { AnimatePresence, motion, MotionConfig } from "motion/react";

import { cn } from "@/lib/utils";
import { Button } from "@/registry/button/button/button";
import { Checkbox } from "@/registry/input/checkbox/checkbox";
import { Popover, PopoverContent, PopoverTrigger } from "@/registry/overlay/popover/popover";

// The destructive key: Pebble's lit key re-cut in danger red (same recipe as
// AlertDialog's danger action).
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)] active:bg-linear-to-t active:shadow-[var(--key-press)]";

export type ConfirmOptions = { dontAskAgain: boolean };

export type ConfirmPopoverProps = {
  /** The trigger: a single element, e.g. a Button. */
  children: React.ReactElement;
  /** The question: "Remove Malik from the team?" */
  title: React.ReactNode;
  /** What happens: one line of consequence. */
  description?: React.ReactNode;
  confirmLabel?: React.ReactNode;
  /** Shown on the confirm button while `onConfirm` is pending. */
  pendingLabel?: React.ReactNode;
  cancelLabel?: React.ReactNode;
  tone?: "default" | "danger";
  /**
   * Called on confirm. Return a promise to keep the popover open with a
   * spinner until it settles; a rejection shows `errorMessage` and stays open.
   */
  onConfirm?: (options: ConfirmOptions) => unknown;
  onCancel?: () => void;
  /** Show a "don't ask again" checkbox; a string sets its label. */
  dontAskAgain?: boolean | string;
  /** Skip the question and confirm straight away (a remembered "don't ask again"). */
  skip?: boolean;
  errorMessage?: React.ReactNode;
  side?: "top" | "right" | "bottom" | "left";
  align?: "start" | "center" | "end";
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  /** Move focus into the popover when it opens. Off for passive previews. */
  autoFocus?: boolean;
};

export function ConfirmPopover({
  children,
  title,
  description,
  confirmLabel = "Confirm",
  pendingLabel,
  cancelLabel = "Cancel",
  tone = "default",
  onConfirm,
  onCancel,
  dontAskAgain = false,
  skip = false,
  errorMessage = "That didn’t work. Try again.",
  side = "bottom",
  align = "center",
  open: openProp,
  defaultOpen = false,
  onOpenChange,
  autoFocus = true,
}: ConfirmPopoverProps) {
  const [inner, setInner] = React.useState(defaultOpen);
  const open = openProp ?? inner;
  const [pending, setPending] = React.useState(false);
  const [failed, setFailed] = React.useState(false);
  const [remember, setRemember] = React.useState(false);
  const cancelRef = React.useRef<HTMLButtonElement>(null);
  const confirmRef = React.useRef<HTMLButtonElement>(null);
  const titleId = React.useId();
  const descId = React.useId();
  const checkId = React.useId();

  const setOpen = (next: boolean) => {
    // A pending confirm holds the popover open: no Escape, no outside click.
    if (!next && pending) return;
    if (openProp === undefined) setInner(next);
    onOpenChange?.(next);
    if (next) {
      setFailed(false);
      setRemember(false);
    }
  };

  function confirm() {
    const result = onConfirm?.({ dontAskAgain: remember });
    if (!(result instanceof Promise)) {
      setOpen(false);
      return;
    }
    setPending(true);
    setFailed(false);
    result.then(
      () => {
        setPending(false);
        if (openProp === undefined) setInner(false);
        onOpenChange?.(false);
      },
      () => {
        setPending(false);
        setFailed(true);
      },
    );
  }

  const label = typeof dontAskAgain === "string" ? dontAskAgain : "Don’t ask again";

  return (
    <MotionConfig reducedMotion="user">
      <Popover open={open} onOpenChange={setOpen}>
        <PopoverTrigger
          asChild
          onClickCapture={(event) => {
            if (!skip) return;
            // Remembered choice: act now, never open.
            event.preventDefault();
            event.stopPropagation();
            onConfirm?.({ dontAskAgain: true });
          }}
        >
          {children}
        </PopoverTrigger>
        <PopoverContent
          side={side}
          align={align}
          role="alertdialog"
          aria-labelledby={titleId}
          aria-describedby={description ? descId : undefined}
          aria-busy={pending || undefined}
          data-slot="confirm-popover"
          data-tone={tone}
          onOpenAutoFocus={(event) => {
            event.preventDefault();
            if (!autoFocus) return;
            // Destructive questions start on Cancel; others on Confirm. Retry on
            // the next frame if the button isn't focusable yet (still mounting
            // or animating in), so focus always lands inside the alertdialog.
            const target = () => (tone === "danger" ? cancelRef : confirmRef).current;
            target()?.focus();
            if (document.activeElement !== target()) requestAnimationFrame(() => target()?.focus());
          }}
          className="grid w-72 gap-3 p-3.5"
        >
          <div className="flex gap-3">
            {tone === "danger" && (
              <span
                aria-hidden="true"
                className="mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-full bg-danger/12 text-danger-strong ring-1 ring-danger/20"
              >
                <svg
                  viewBox="0 0 16 16"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="size-3.5"
                >
                  <path d="M8 2.5l6 10.5H2zM8 7v2.5M8 11.5v.01" />
                </svg>
              </span>
            )}
            <div className="grid min-w-0 gap-1">
              <p id={titleId} className="text-sm leading-snug font-medium tracking-[-0.01em]">
                {title}
              </p>
              {description && (
                <p
                  id={descId}
                  className="text-[13px] leading-snug text-pretty text-muted-foreground"
                >
                  {description}
                </p>
              )}
            </div>
          </div>
          <AnimatePresence initial={false}>
            {failed && (
              <motion.p
                role="alert"
                initial={{ opacity: 0, height: 0 }}
                animate={{ opacity: 1, height: "auto" }}
                exit={{ opacity: 0, height: 0 }}
                transition={{ duration: 0.2, ease: [0.22, 1, 0.36, 1] }}
                className="overflow-hidden text-[13px] text-danger-strong"
              >
                {errorMessage}
              </motion.p>
            )}
          </AnimatePresence>
          {dontAskAgain && (
            <label
              htmlFor={checkId}
              className="flex cursor-pointer items-center gap-2 text-[13px] text-muted-foreground select-none"
            >
              <Checkbox
                id={checkId}
                checked={remember}
                onCheckedChange={(value) => setRemember(value === true)}
                disabled={pending}
              />
              {label}
            </label>
          )}
          <div className="flex justify-end gap-2">
            <Button
              ref={cancelRef}
              size="sm"
              variant="ghost"
              disabled={pending}
              onClick={() => {
                onCancel?.();
                setOpen(false);
              }}
            >
              {cancelLabel}
            </Button>
            <Button
              ref={confirmRef}
              size="sm"
              loading={pending}
              onClick={confirm}
              className={cn("min-w-20", tone === "danger" && dangerKey)}
            >
              {pending ? (pendingLabel ?? confirmLabel) : confirmLabel}
            </Button>
          </div>
        </PopoverContent>
      </Popover>
    </MotionConfig>
  );
}