motion-ui-skill 2.0.0

package/components/motion/password-input.tsx

@@ -0,0 +1,165 @@
+"use client";
+
+import { Check, Eye, EyeOff, X } from "lucide-react";
+import {
+  AnimatePresence,
+  motion,
+  useReducedMotion,
+} from "motion/react";
+import React, { useId, useState } from "react";
+import { EASE_OUT, SPRING_BOUNCE, SPRING_PRESS, SPRING_SWAP } from "@/lib/ease";
+import { cn } from "@/lib/utils";
+
+export interface PasswordCriterion {
+  id: string;
+  label: string;
+  validator: (pass: string) => boolean;
+}
+
+export interface PasswordInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+  value?: string;
+  onChange?: (value: string, isValid: boolean) => void;
+  showStrengthMeter?: boolean;
+  showCriteria?: boolean;
+  className?: string;
+}
+
+const DEFAULT_CRITERIA: PasswordCriterion[] = [
+  { id: "length", label: "At least 8 characters", validator: (p) => p.length >= 8 },
+  { id: "number", label: "Contains at least one number", validator: (p) => /\d/.test(p) },
+  { id: "uppercase", label: "Contains an uppercase letter", validator: (p) => /[A-Z]/.test(p) },
+  { id: "special", label: "Contains a special symbol (!@#$%^&*)", validator: (p) => /[^A-Za-z0-9]/.test(p) },
+];
+
+export function PasswordInput({
+  value: controlledValue,
+  onChange,
+  showStrengthMeter = true,
+  showCriteria = true,
+  className,
+  ...props
+}: PasswordInputProps) {
+  const [internalValue, setInternalValue] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const shouldReduceMotion = useReducedMotion();
+  const strengthStatusId = useId();
+
+  const password = controlledValue !== undefined ? controlledValue : internalValue;
+
+  // Calculate score (0 to 4)
+  const criteriaResults = DEFAULT_CRITERIA.map((c) => ({
+    ...c,
+    passed: c.validator(password),
+  }));
+  const score = criteriaResults.filter((c) => c.passed).length;
+  const isComplete = score === DEFAULT_CRITERIA.length;
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const nextVal = e.target.value;
+    if (controlledValue === undefined) setInternalValue(nextVal);
+    const valid = DEFAULT_CRITERIA.every((c) => c.validator(nextVal));
+    onChange?.(nextVal, valid);
+  };
+
+  const getStrengthMeta = () => {
+    if (score === 0) return { label: "Empty", color: "bg-muted text-muted-foreground" };
+    if (score === 1) return { label: "Weak", color: "bg-rose-500 text-rose-500" };
+    if (score === 2) return { label: "Fair", color: "bg-amber-500 text-amber-500" };
+    if (score === 3) return { label: "Good", color: "bg-blue-500 text-blue-500" };
+    return { label: "Strong", color: "bg-emerald-500 text-emerald-500" };
+  };
+
+  const meta = getStrengthMeta();
+
+  return (
+    <div className={cn("flex w-full flex-col gap-2.5", className)}>
+      {/* Input Row */}
+      <div className="relative flex items-center">
+        <input
+          type={showPassword ? "text" : "password"}
+          value={password}
+          onChange={handleChange}
+          aria-describedby={showStrengthMeter && password.length > 0 ? strengthStatusId : undefined}
+          className="w-full rounded-xl border border-border bg-background px-3.5 py-2.5 pr-10 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1"
+          {...props}
+        />
+
+        <motion.button
+          type="button"
+          onClick={() => setShowPassword(!showPassword)}
+          whileTap={shouldReduceMotion ? undefined : { scale: 0.9 }}
+          transition={SPRING_PRESS}
+          aria-label={showPassword ? "Hide password" : "Show password"}
+          className="absolute right-2.5 text-muted-foreground hover:text-foreground p-1 rounded-lg focus:outline-none focus:ring-2 focus:ring-ring"
+        >
+          {showPassword ? (
+            <EyeOff className="size-4" />
+          ) : (
+            <Eye className="size-4" />
+          )}
+        </motion.button>
+      </div>
+
+      {/* Animated Multi-Segment Strength Bar */}
+      {showStrengthMeter && password.length > 0 && (
+        <div className="space-y-1.5">
+          <div className="flex h-1.5 w-full gap-1.5 overflow-hidden rounded-full bg-muted/60">
+            {Array.from({ length: 4 }).map((_, i) => (
+              <motion.div
+                key={i}
+                initial={false}
+                animate={shouldReduceMotion
+                  ? { opacity: i < score ? 1 : 0.2 }
+                  : { opacity: i < score ? 1 : 0.2, scaleY: i < score ? 1 : 0.8 }}
+                transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.2 }}
+                className={cn(
+                  "h-full flex-1 rounded-full transition-colors",
+                  i < score ? meta.color.split(" ")[0] : "bg-muted"
+                )}
+              />
+            ))}
+          </div>
+
+          <div
+            id={strengthStatusId}
+            className="flex items-center justify-between text-xs text-muted-foreground"
+          >
+            <span>Password strength</span>
+            <span className={cn("font-medium", meta.color.split(" ")[1])}>
+              {meta.label}
+            </span>
+          </div>
+        </div>
+      )}
+
+      {/* Live Criteria Checklist */}
+      {showCriteria && password.length > 0 && !isComplete && (
+          <motion.ul
+          initial={shouldReduceMotion ? false : { opacity: 0, height: 0 }}
+          animate={{ opacity: 1, height: "auto" }}
+          transition={shouldReduceMotion ? { duration: 0 } : undefined}
+          exit={{ opacity: 0, height: 0 }}
+          className="space-y-1 pt-1 text-xs text-muted-foreground"
+        >
+          {criteriaResults.map((crit) => (
+            <li
+              key={crit.id}
+              className={cn(
+                "flex items-center gap-1.5 transition-colors",
+                crit.passed ? "text-emerald-600 dark:text-emerald-400" : "text-muted-foreground"
+              )}
+            >
+              {crit.passed ? (
+                <Check className="size-3.5 stroke-[2.5]" />
+              ) : (
+                <div className="size-1.5 rounded-full bg-muted-foreground/40 ml-1 mr-1" />
+              )}
+              <span>{crit.label}</span>
+            </li>
+          ))}
+        </motion.ul>
+      )}
+    </div>
+  );
+}

package/components/motion/phone-input.tsx

@@ -0,0 +1,181 @@
+"use client";
+
+import { Check, ChevronDown, Phone } from "lucide-react";
+import {
+  AnimatePresence,
+  motion,
+  useReducedMotion,
+  type HTMLMotionProps,
+} from "motion/react";
+import React, { useEffect, useState, useRef } from "react";
+import { SPRING_PANEL } from "@/lib/ease";
+import { useDismiss } from "@/lib/hooks/use-dismiss";
+import { useHaptic } from "@/lib/hooks/use-haptic";
+import { cn } from "@/lib/utils";
+
+export interface CountryCode {
+  country: string;
+  code: string;
+  flag: string;
+  format: string;
+}
+
+const DEFAULT_COUNTRIES: CountryCode[] = [
+  { country: "United States", code: "+1", flag: "🇺🇸", format: "(###) ###-####" },
+  { country: "United Kingdom", code: "+44", flag: "🇬🇧", format: "#### ######" },
+  { country: "Germany", code: "+49", flag: "🇩🇪", format: "### ########" },
+  { country: "India", code: "+91", flag: "🇮🇳", format: "##### #####" },
+  { country: "Japan", code: "+81", flag: "🇯🇵", format: "## #### ####" },
+  { country: "France", code: "+33", flag: "🇫🇷", format: "# ## ## ## ##" },
+  { country: "Canada", code: "+1", flag: "🇨🇦", format: "(###) ###-####" },
+  { country: "Australia", code: "+61", flag: "🇦🇺", format: "### ### ###" },
+];
+
+export interface PhoneInputProps extends Omit<HTMLMotionProps<"div">, "onChange"> {
+  value?: string;
+  onChange?: (val: string, country: CountryCode) => void;
+  countries?: CountryCode[];
+  defaultCountry?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+export function PhoneInput({
+  value = "",
+  onChange,
+  countries = DEFAULT_COUNTRIES,
+  defaultCountry = "United States",
+  placeholder = "Enter phone number",
+  disabled = false,
+  className,
+  ...props
+}: PhoneInputProps) {
+  const availableCountries = countries.length > 0 ? countries : DEFAULT_COUNTRIES;
+  const [selectedCountry, setSelectedCountry] = useState<CountryCode>(
+    availableCountries.find((c) => c.country === defaultCountry) || availableCountries[0]
+  );
+  const [phone, setPhone] = useState(value);
+  const [isOpen, setIsOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
+  const shouldReduceMotion = useReducedMotion();
+  const triggerHaptic = useHaptic();
+
+  const menuRef = useRef<HTMLDivElement>(null);
+  useDismiss(isOpen, () => setIsOpen(false), menuRef);
+
+  useEffect(() => {
+    setPhone(value);
+  }, [value]);
+
+  const filteredCountries = availableCountries.filter(
+    (c) =>
+      c.country.toLowerCase().includes(search.toLowerCase()) ||
+      c.code.includes(search)
+  );
+
+  const handleSelectCountry = (country: CountryCode) => {
+    setSelectedCountry(country);
+    setIsOpen(false);
+    setSearch("");
+    triggerHaptic("selection");
+    onChange?.(phone, country);
+    inputRef.current?.focus();
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const raw = e.target.value.replace(/[^\d]/g, "");
+    setPhone(raw);
+    onChange?.(raw, selectedCountry);
+  };
+
+  return (
+    <motion.div className={cn("relative w-full", className)} {...props}>
+      <div
+        className={cn(
+          "flex items-center rounded-xl border border-border bg-card shadow-sm transition-all focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20",
+          disabled && "opacity-50 pointer-events-none"
+        )}
+      >
+        {/* Country Picker Trigger */}
+        <button
+          type="button"
+          disabled={disabled}
+          onClick={() => setIsOpen(!isOpen)}
+          className="flex items-center gap-1.5 px-3 py-2 text-xs font-medium text-foreground hover:bg-muted/60 rounded-l-xl transition-colors border-r border-border"
+        >
+          <span className="text-base">{selectedCountry.flag}</span>
+          <span>{selectedCountry.code}</span>
+          <ChevronDown className="size-3 text-muted-foreground" />
+        </button>
+
+        {/* Input */}
+        <div className="relative flex-1 flex items-center">
+          <input
+            ref={inputRef}
+            type="tel"
+            value={phone}
+            onChange={handleInputChange}
+            disabled={disabled}
+            placeholder={placeholder}
+            className="w-full bg-transparent px-3.5 py-2 text-xs text-foreground placeholder:text-muted-foreground focus:outline-none"
+          />
+        </div>
+      </div>
+
+      {/* Country Dropdown */}
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            ref={menuRef}
+            initial={shouldReduceMotion ? { opacity: 0 } : { opacity: 0, y: 4, scale: 0.98 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={shouldReduceMotion ? { opacity: 0 } : { opacity: 0, y: 2, scale: 0.98 }}
+            transition={SPRING_PANEL}
+            className="absolute left-0 top-full z-50 mt-1.5 w-64 rounded-xl border border-border bg-card p-1.5 shadow-xl backdrop-blur-md"
+          >
+            <input
+              type="text"
+              placeholder="Search country..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="w-full rounded-lg border border-border bg-muted/40 px-2.5 py-1.5 text-xs text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary mb-1"
+              autoFocus
+            />
+            <div className="max-h-52 overflow-y-auto space-y-0.5">
+              {filteredCountries.map((c) => {
+                const isSelected = c.code === selectedCountry.code && c.country === selectedCountry.country;
+                return (
+                  <button
+                    key={`${c.country}-${c.code}`}
+                    type="button"
+                    onClick={() => handleSelectCountry(c)}
+                    className={cn(
+                      "flex w-full items-center justify-between rounded-lg px-2.5 py-1.5 text-left text-xs transition-colors",
+                      isSelected ? "bg-primary/10 text-primary font-semibold" : "hover:bg-muted text-foreground"
+                    )}
+                  >
+                    <span className="flex items-center gap-2">
+                      <span className="text-base">{c.flag}</span>
+                      <span>{c.country}</span>
+                    </span>
+                    <span className="flex items-center gap-1.5 text-muted-foreground">
+                      <span>{c.code}</span>
+                      {isSelected && <Check className="size-3 text-primary" />}
+                    </span>
+                  </button>
+                );
+              })}
+              {filteredCountries.length === 0 && (
+                <div className="p-3 text-center text-xs text-muted-foreground">
+                  No countries found
+                </div>
+              )}
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </motion.div>
+  );
+}

package/components/motion/popover-morph.tsx

@@ -0,0 +1,317 @@
+"use client";
+
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import {
+  cloneElement,
+  createContext,
+  isValidElement,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { createPortal } from "react-dom";
+import { usePopoverPortalPosition } from "@/components/motion/popover-position";
+import { EASE_OUT, SPRING_PANEL } from "@/lib/ease";
+import { cn } from "@/lib/utils";
+
+type Side = "top" | "bottom";
+type Align = "start" | "end";
+
+type MorphContextValue = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  toggle: () => void;
+  triggerId: string;
+  contentId: string;
+  /** The element the panel measures against — see `registerTrigger`. */
+  triggerRef: React.MutableRefObject<HTMLElement | null>;
+  registerTrigger: (node: HTMLElement | null) => void;
+  contentRef: React.MutableRefObject<HTMLDivElement | null>;
+};
+
+const MorphContext = createContext<MorphContextValue | null>(null);
+
+function useMorphContext(component: string) {
+  const ctx = useContext(MorphContext);
+  if (!ctx) throw new Error(`${component} must be used within <MorphPopover>`);
+  return ctx;
+}
+
+export interface MorphPopoverProps {
+  children: ReactNode;
+  /** Controlled open state. */
+  open?: boolean;
+  /** Uncontrolled initial open state. */
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  className?: string;
+}
+
+/**
+ * A popover whose panel morphs open from the trigger corner: it's laid out at
+ * full size but clipped to the corner nearest the trigger, then unclips as one
+ * piece. Closes on outside pointer / Escape. Controlled or uncontrolled.
+ */
+export function MorphPopover({
+  children,
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  className,
+}: MorphPopoverProps) {
+  const baseId = useId();
+  const [root, setRoot] = useState<HTMLDivElement | null>(null);
+  const [trigger, setTrigger] = useState<HTMLElement | null>(null);
+  const contentRef = useRef<HTMLDivElement | null>(null);
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const controlled = controlledOpen !== undefined;
+  const open = controlled ? controlledOpen : internalOpen;
+
+  const setOpen = useCallback(
+    (next: boolean) => {
+      if (!controlled) setInternalOpen(next);
+      onOpenChange?.(next);
+    },
+    [controlled, onOpenChange],
+  );
+  const toggle = useCallback(() => setOpen(!open), [setOpen, open]);
+
+  // A trigger normally registers itself through MorphPopoverTrigger. It can't
+  // when something else already clones the element — a Tooltip wrapping the
+  // button, say — and an unregistered trigger leaves the panel with nothing to
+  // measure against, so it renders permanently invisible. The root boxes the
+  // trigger exactly (the content portals out of it), so it stands in until a
+  // real trigger registers, and stands in again if that one unmounts. Both are
+  // state, so a trigger arriving while the panel is open re-anchors it.
+  const anchorRef = useMemo<React.MutableRefObject<HTMLElement | null>>(
+    () => ({ current: trigger ?? root }),
+    [root, trigger],
+  );
+
+  // The panel is a `role="dialog"` and goes inert the moment it closes, so
+  // focus cannot be left sitting inside it: a dismissal hands it back to the
+  // trigger, the way the ARIA dialog pattern asks. A pointer dismissal takes
+  // the focus onward itself when it lands on something focusable — this only
+  // catches the case where it would otherwise be stranded. When no trigger has
+  // registered, the root anchor stands in only if it can actually hold focus;
+  // there is nowhere better than where the keyboard already is, so leave it.
+  const close = useCallback(() => {
+    setOpen(false);
+    const focused = document.activeElement;
+    const inPanel =
+      focused instanceof HTMLElement && contentRef.current?.contains(focused);
+    if (!inPanel) return;
+    const restore = trigger ?? (root && root.tabIndex >= 0 ? root : null);
+    restore?.focus();
+  }, [root, setOpen, trigger]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => e.key === "Escape" && close();
+    const onPointer = (e: PointerEvent) => {
+      const target = e.target as Node;
+      if (
+        root &&
+        !root.contains(target) &&
+        !contentRef.current?.contains(target)
+      )
+        close();
+    };
+    window.addEventListener("keydown", onKey);
+    window.addEventListener("pointerdown", onPointer);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      window.removeEventListener("pointerdown", onPointer);
+    };
+  }, [open, root, close]);
+
+  const ctx = useMemo<MorphContextValue>(
+    () => ({
+      open,
+      setOpen,
+      toggle,
+      triggerId: `${baseId}-trigger`,
+      contentId: `${baseId}-content`,
+      triggerRef: anchorRef,
+      registerTrigger: setTrigger,
+      contentRef,
+    }),
+    [open, setOpen, toggle, baseId, anchorRef],
+  );
+
+  return (
+    <MorphContext.Provider value={ctx}>
+      <div ref={setRoot} className={cn("relative inline-flex", className)}>
+        {children}
+      </div>
+    </MorphContext.Provider>
+  );
+}
+
+export interface MorphPopoverTriggerProps {
+  children: ReactElement;
+}
+
+function mergeRefs<T>(...refs: Array<Ref<T> | undefined>) {
+  return (node: T | null) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") ref(node);
+      else if (ref && typeof ref === "object")
+        (ref as React.MutableRefObject<T | null>).current = node;
+    }
+  };
+}
+
+/** Wraps a single element, toggling the popover on click. */
+export function MorphPopoverTrigger({ children }: MorphPopoverTriggerProps) {
+  const ctx = useMorphContext("MorphPopoverTrigger");
+  if (!isValidElement(children)) return children;
+
+  const child = children as ReactElement<Record<string, unknown>>;
+  const childOnClick = child.props.onClick as
+    | ((e: unknown) => void)
+    | undefined;
+  const childRef = (child.props as { ref?: Ref<HTMLElement> }).ref;
+
+  return cloneElement(child, {
+    id: ctx.triggerId,
+    ref: mergeRefs(childRef, ctx.registerTrigger),
+    onClick: (e: unknown) => {
+      childOnClick?.(e);
+      ctx.toggle();
+    },
+    "aria-haspopup": "dialog",
+    "aria-expanded": ctx.open,
+    "aria-controls": ctx.open ? ctx.contentId : undefined,
+  });
+}
+
+const originFor = (side: Side, align: Align) =>
+  `${side === "bottom" ? "top" : "bottom"} ${align === "end" ? "right" : "left"}`;
+
+// A clip that hides everything but the corner nearest the trigger, so the
+// panel appears to grow out of it. inset(top right bottom left).
+function clipHidden(side: Side, align: Align, radius: number) {
+  const top = side === "bottom" ? "0%" : "92%";
+  const bottom = side === "bottom" ? "92%" : "0%";
+  const right = align === "end" ? "0%" : "92%";
+  const left = align === "end" ? "92%" : "0%";
+  return `inset(${top} ${right} ${bottom} ${left} round ${radius}px)`;
+}
+const clipShown = (radius: number) => `inset(0% 0% 0% 0% round ${radius}px)`;
+
+// Preserve the original spring character on the wrapper, but tween the complex
+// clip-path so it cannot snap when the spring resolves its final distance.
+const MORPH_CLIP_TRANSITION = { duration: 0.32, ease: EASE_OUT } as const;
+
+export interface MorphPopoverContentProps {
+  children: ReactNode;
+  side?: Side;
+  align?: Align;
+  /** Gap between trigger and panel, in px. Default 8. */
+  sideOffset?: number;
+  /** Panel corner radius, in px. Default 16. */
+  radius?: number;
+  className?: string;
+}
+
+export function MorphPopoverContent({
+  children,
+  side = "bottom",
+  align = "end",
+  sideOffset = 8,
+  radius = 16,
+  className,
+}: MorphPopoverContentProps) {
+  const ctx = useMorphContext("MorphPopoverContent");
+  const reduce = useReducedMotion() ?? false;
+  const [portalReady, setPortalReady] = useState(false);
+  const layout = usePopoverPortalPosition(
+    ctx.triggerRef,
+    ctx.contentRef,
+    portalReady && ctx.open,
+  );
+
+  useEffect(() => setPortalReady(true), []);
+  const left = layout
+    ? align === "end"
+      ? layout.trigger.left + layout.trigger.width - layout.content.width
+      : layout.trigger.left
+    : 0;
+  const top = layout
+    ? side === "bottom"
+      ? layout.trigger.top + layout.trigger.height + sideOffset
+      : layout.trigger.top - layout.content.height - sideOffset
+    : 0;
+
+  // Both directions travel between the exact same hidden/show states. Exit
+  // targets "hidden" directly instead of introducing separate choreography.
+  const wrap = reduce
+    ? undefined
+    : {
+        hidden: { opacity: 0, scale: 0.96, transition: SPRING_PANEL },
+        show: { opacity: 1, scale: 1, transition: SPRING_PANEL },
+      };
+  const clip = reduce
+    ? undefined
+    : {
+        hidden: {
+          clipPath: clipHidden(side, align, radius),
+          transition: MORPH_CLIP_TRANSITION,
+        },
+        show: {
+          clipPath: clipShown(radius),
+          transition: MORPH_CLIP_TRANSITION,
+        },
+      };
+
+  // Keep the server and first client render identical, then mount the portal.
+  if (!portalReady) return null;
+
+  return createPortal(
+    <AnimatePresence>
+      {ctx.open ? (
+        <motion.div
+          data-morph-popover-portal=""
+          // Wrapper carries the shadow as a drop-shadow filter, which hugs the
+          // clipped shape below (box-shadow would just get clipped away).
+          variants={wrap}
+          initial={reduce ? { opacity: 0 } : "hidden"}
+          animate={reduce ? { opacity: 1 } : "show"}
+          exit={reduce ? { opacity: 0 } : "hidden"}
+          transition={reduce ? { duration: 0.12 } : undefined}
+          style={{
+            left,
+            top,
+            visibility: layout ? "visible" : "hidden",
+            transformOrigin: originFor(side, align),
+          }}
+          className="fixed z-[9999] [filter:drop-shadow(0_10px_18px_rgba(0,0,0,0.14))]"
+        >
+          <motion.div
+            ref={ctx.contentRef}
+            id={ctx.contentId}
+            role="dialog"
+            aria-labelledby={ctx.triggerId}
+            variants={clip}
+            style={{ borderRadius: radius }}
+            className={cn(
+              "overflow-hidden border border-border bg-background",
+              className,
+            )}
+          >
+            {children}
+          </motion.div>
+        </motion.div>
+      ) : null}
+    </AnimatePresence>,
+    document.body,
+  );
+}