50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[544296,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ItemStyles"] 52:I[34002,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"CodeEditor"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T25b2,// Hairline UI · waitlist-field · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components "use client"; import * as React from "react"; import { NumberRoll } from "./number-roll"; import { TextMorph } from "./text-morph"; /* ───────────────────────────────────────────────────────── * WAITLIST FIELD: an email field that becomes its own answer * * idle email and "Join the waitlist" in one pill * invalid the pill gives a small shake, its edge tints and * a hint fades in underneath * joining the button stretches across the whole field and * a light sweeps through it while the request runs * joined "You're on the list · #1,248": a check draws * itself and the place number rolls up into view * failed the button folds back and asks you to try again * * Give it an onSubmit that returns a promise (resolve with * { position } to show the place in line). * ───────────────────────────────────────────────────────── */ export interface WaitlistResult { position?: number; } export interface WaitlistFieldProps extends Omit, "onSubmit"> { onSubmit: (email: string) => Promise | WaitlistResult | void; /** Show the joined state straight away, e.g. for someone already on the list. */ joined?: WaitlistResult | null; placeholder?: string; labels?: Partial<{ idle: string; pending: string; success: string; error: string; invalid: string }>; } type Status = "idle" | "pending" | "success" | "error"; const LABELS = { idle: "Join the waitlist", pending: "Joining", success: "You’re on the list", error: "Try again", invalid: "Enter a full email address", }; const EASE = "cubic-bezier(0.16,1,0.3,1)"; const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/; const reducedQuery = "(prefers-reduced-motion: reduce)"; const subscribeReduced = (onChange: () => void) => { const query = window.matchMedia(reducedQuery); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); }; const useReducedMotion = () => React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false); const shake = (el: HTMLElement | null) => el?.animate( [{ transform: "none" }, { transform: "translateX(-5px)" }, { transform: "translateX(5px)" }, { transform: "translateX(-2px)" }, { transform: "none" }], { duration: 380, easing: "ease-out" } ); export function WaitlistField({ onSubmit, joined, placeholder = "you@company.com", labels, className = "", ...props }: WaitlistFieldProps) { const reduced = useReducedMotion(); const text = { ...LABELS, ...labels }; const id = React.useId(); const [status, setStatus] = React.useState(joined ? "success" : "idle"); const [position, setPosition] = React.useState(joined?.position); const [email, setEmail] = React.useState(""); const [invalid, setInvalid] = React.useState(false); const [restWidth, setRestWidth] = React.useState(0); const pillRef = React.useRef(null); const measureRef = React.useRef(null); const inputRef = React.useRef(null); // How wide the button is at rest: measured from its label, so the stretch starts exactly from there. const restLabel = status === "error" ? text.error : text.idle; React.useLayoutEffect(() => { const el = measureRef.current; if (!el) return; const measure = () => setRestWidth((w) => (w === el.offsetWidth ? w : el.offsetWidth)); measure(); const observer = new ResizeObserver(measure); observer.observe(el); return () => observer.disconnect(); }, [restLabel]); const submit = async (e: React.FormEvent) => { e.preventDefault(); if (status === "pending" || status === "success") return; const value = email.trim(); if (!EMAIL.test(value)) { setInvalid(true); if (!reduced) shake(pillRef.current); inputRef.current?.focus(); return; } setInvalid(false); setStatus("pending"); try { const result = await onSubmit(value); setPosition(result ? result.position : undefined); setStatus("success"); } catch { setStatus("error"); if (!reduced) shake(pillRef.current); } }; const covering = status === "pending" || status === "success"; const transition = reduced ? "none" : `width 560ms ${EASE}, background-color 300ms ${EASE}`; return (

Email address { setEmail(e.target.value); if (invalid) setInvalid(false); }} placeholder={placeholder} className="h-full min-w-0 flex-1 bg-transparent pl-4 text-[14px] text-foreground outline-none placeholder:text-muted-foreground disabled:opacity-0" style={{ paddingRight: restWidth + 12, transition: reduced ? "none" : "opacity 200ms ease-out" }} /> {/* The one surface: rests as a button, stretches over the field, settles as the answer. */} {/* Measures the resting button, so its width can animate from an exact number. */}

{invalid ? text.invalid : ""}

{status === "success" ? `${text.success}${position !== undefined ? `, number ${position}` : ""}` : status === "error" ? "That didn’t go through. Try again." : ""}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@hairline","registryDependencies":["https://hairlineui.com/r/number-roll.json?as=dependency","https://hairlineui.com/r/text-morph.json?as=dependency"]}]]}],["$","$L51",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L52",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@keyframes ui-scan {\n\tfrom {\n\t\ttransform: translateX(-100%);\n\t}\n\tto {\n\t\ttransform: translateX(250%);\n\t}\n}\n\n@keyframes ui-fade-in {\n\tfrom {\n\t\topacity: 0;\n\t}\n\tto {\n\t\topacity: 1;\n\t}\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"registry/waitlist-field.tsx","content":"$54","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]