Morph modal

1"use client";
2
3import React from "react";
4import {
5  AnimatePresence,
6  motion,
7  type HTMLMotionProps,
8  type Transition,
9} from "motion/react";
10import { cn } from "@/lib/utils";
11
12function assertOnlyChild(children: React.ReactNode) {
13  if (Array.isArray(children))
14    throw new Error(
15      "A single child is required, but received multiple siblings."
16    );
17  if (
18    children &&
19    React.isValidElement(children) &&
20    children.type === React.Fragment &&
21    Array.isArray((children.props as React.FragmentProps).children)
22  )
23    throw new Error(
24      "A single child is required; fragments that render multiple siblings are not allowed."
25    );
26}
27
28type MorphModalContextType = {
29  openModal: boolean;
30  setOpenModal: React.Dispatch<React.SetStateAction<boolean>>;
31  modalId: string;
32  transition: Transition;
33};
34
35const MorphModalContext = React.createContext<
36  MorphModalContextType | undefined
37>(undefined);
38
39export const useMorphModal = () => {
40  const ctx = React.useContext(MorphModalContext);
41  if (!ctx)
42    throw new Error("useMorphModal must be used within a <MorphModal />");
43  return ctx;
44};
45
46interface MorphModalProps {
47  children: React.ReactNode;
48  transition?: Omit<Transition, "delay">;
49}
50
51const DEFAULT_DURATION = 0.3;
52const DEFAULT_EASE = "easeInOut";
53
54export function MorphModal({ children, transition }: MorphModalProps) {
55  const modalId = React.useId();
56  const [openModal, setOpenModal] = React.useState(false);
57
58  return (
59    <MorphModalContext.Provider
60      value={{
61        openModal,
62        setOpenModal,
63        modalId,
64        transition: {
65          duration: DEFAULT_DURATION,
66          ease: DEFAULT_EASE,
67          ...transition,
68        },
69      }}
70    >
71      {children}
72    </MorphModalContext.Provider>
73  );
74}
75
76interface MorphModalTriggerProps extends HTMLMotionProps<"button"> {
77  children: React.ReactNode;
78}
79
80export function MorphModalTrigger({
81  children,
82  className,
83  onClick,
84  ...rest
85}: MorphModalTriggerProps) {
86  assertOnlyChild(children);
87
88  const { openModal, setOpenModal, transition, modalId } = useMorphModal();
89  const { duration, ...restTransition } = transition;
90
91  return (
92    <div className="relative">
93      <AnimatePresence initial={false}>
94        {!openModal && (
95          <motion.button
96            onClick={(e) => {
97              setOpenModal(true);
98              onClick?.(e);
99            }}
100// … truncated