Morph dialog
A trigger card grows into a modal dialog and folds back when it closes.
Implementation
1"use client";2 3import {4 addTransitionType,5 startTransition,6 useId,7 useLayoutEffect,8 useRef,9 useState,10} from "react";11import type { PointerEvent, ReactNode } from "react";12import { ViewTransitionSafe } from "./ViewTransitionSafe";13 14const shellShare = {15 "morph-dialog-close": "vt-move vt-expand vt-quick",16 default: "vt-move vt-expand",17} as const;18 19export type MorphDialogProps = {20 /** Card content; the whole card is the button that opens the dialog. */21 trigger: ReactNode;22 /** Accessible name for the trigger when its content is not enough. */23 triggerLabel?: string;24 /** Dialog heading. */25 title: ReactNode;26 /** Short line under the title. */27 description?: ReactNode;28 /** Dialog body. */