Morphing Popover

"use client";

import { useEffect, useLayoutEffect, useRef, useState, type ReactNode } from "react";
import { AnimatePresence, MotionConfig, motion } from "motion/react";
import { cn } from "@/lib/utils";

// Morphing popover. A button that grows into a panel and folds back into the
// button. It's one surface throughout: its real width, height and corner
// radius spring between the button's size and the panel's, so nothing is ever
// scaled and text, borders and shadow stay crisp. The panel's content is laid
// out at full width from the start and revealed as the surface grows over it,
// fading in once there's room. The panel stays pinned to one corner of the
// button, and when its content changes size (a form swapped for a thank-you)
// the surface springs to the new height.
//
// Escape, a click outside or `close()` from the content folds it back. Focus
// moves into the panel on open and back to the button on close.

export type MorphingPopoverOrigin = "top-left" | "top-right" | "bottom-left" | "bottom-right";

export type MorphingPopoverProps = {
  /** Text of the button, and the panel's title. */
  label?: string;
  /** What's inside the panel. A function receives `close`. */