Dialog

"use client";

// A modal that grows out of the button that opened it and shrinks back into
// it. Focus is held inside, the page behind stops scrolling, and Escape or a
// click on the backdrop closes it. Opening a dialog from inside another one
// eases the first back, so the stack reads at a glance.

import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { createContext, useContext, useEffect, useId, useLayoutEffect, useRef, useState, type ReactNode } from "react";
import { cn } from "@/lib/utils";
import { EASE_OUT, FOCUS, Portal, SURFACE, useDismiss, useFocusTrap, useLayer, useScrollLock } from "../_overlay/overlay";

const SIZES = { sm: "max-w-sm", md: "max-w-md", lg: "max-w-lg" } as const;

export type DialogProps = {
  /** The button that opens the dialog. Leave out when fully controlled. */
  trigger?: ReactNode;
  title: ReactNode;
  description?: ReactNode;
  /** The body. A function receives `close`. */
  children?: ReactNode | ((close: () => void) => ReactNode);
  /** Buttons along the bottom. A function receives `close`. */
  footer?: ReactNode | ((close: () => void) => ReactNode);
  size?: keyof typeof SIZES;