Waitlist Input

"use client";

// An email field with its button inside. Submitting shrinks the button to a
// spinner, then the whole field settles into a confirmation in the same
// footprint, so the page around it never moves. A thrown error shows under
// the field (out of flow, for the same reason) and the email stays put for
// another try.

import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { useId, useRef, useState, type FormEvent } from "react";
import { cn } from "@/lib/utils";

const EASE_OUT: [number, number, number, number] = [0.23, 1, 0.32, 1];
const SPRING = { type: "spring", duration: 0.4, bounce: 0 } as const;
const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

type Status = "idle" | "loading" | "done";

export type WaitlistInputProps = {
  placeholder?: string;
  buttonLabel?: string;
  /** Shown once joined. `{email}` is replaced with the address. */
  successMessage?: string;
  /**