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:T5bbf,// Hairline UI · newsletter-footer · 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"; /* ───────────────────────────────────────────────────────── * NEWSLETTER FOOTER: the last thing on the page, still alive * * signup an email field with its button inside; a likely * typo ("gmial.com") is caught as you type and * fixed in one click * sending the button opens a spinner, "Subscribing" * sent the field blurs into "Check your inbox" with a * check drawing itself; the button becomes * "Resend in 0:30", the seconds rolling down; * "Wrong address?" morphs it back, email selected * links columns whose underlines draw in from the left * and leave to the right * wordmark your name across the full width in 1px outline; * letters rise in, and fill where the pointer * passes, fading out behind it * ───────────────────────────────────────────────────────── */ export interface FooterLink { label: string; href?: string; onClick?: () => void; /** A small tag beside the link, e.g. "New" or "Hiring". */ badge?: string; } export interface FooterColumn { title: string; links: FooterLink[]; } export interface FooterSocial { label: string; href: string; icon: React.ReactNode; } export interface FooterNewsletter { title?: string; description?: string; placeholder?: string; buttonLabel?: string; /** Subscribe the address; throw an Error to show its message. */ onSubscribe: (email: string) => Promise | unknown; /** Seconds before the email can be sent again. */ resendAfter?: number; } export interface NewsletterFooterProps extends React.HTMLAttributes { brand: { name: string; logo?: React.ReactNode; href?: string; tagline?: string }; columns?: FooterColumn[]; newsletter?: FooterNewsletter; socials?: FooterSocial[]; /** Small links in the bottom row: privacy, terms, cookie settings. */ legal?: FooterLink[]; copyright?: React.ReactNode; /** A link to your status page, with a live dot. */ status?: { state: "operational" | "degraded" | "outage"; label?: string; href?: string }; /** The name in outline across the full width; a string to use other words. */ wordmark?: boolean | string; } const EASE = "cubic-bezier(0.16,1,0.3,1)"; const FOCUS = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background"; const LINK = `rounded-sm text-muted-foreground transition-[color,background-size] duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] [background:linear-gradient(currentColor,currentColor)_no-repeat_100%_100%/0%_1px] hover:text-foreground hover:[background-position:0_100%] hover:[background-size:100%_1px] motion-reduce:transition-none ${FOCUS}`; const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/; const STATUS = { operational: { label: "All systems normal", dot: "bg-emerald-500" }, degraded: { label: "Some systems slow", dot: "bg-amber-500" }, outage: { label: "Outage in progress", dot: "bg-red-500" }, }; 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); /* Common mail domains, to catch "gmial.com" before it bounces. */ const DOMAINS = ["gmail.com", "googlemail.com", "outlook.com", "hotmail.com", "live.com", "yahoo.com", "icloud.com", "me.com", "mac.com", "proton.me", "protonmail.com", "aol.com", "mail.com", "gmx.com", "fastmail.com", "hey.com", "yandex.com"]; function distance(a: string, b: string) { const d = Array.from({ length: a.length + 1 }, (_, i) => Array.from({ length: b.length + 1 }, (_, j) => (i === 0 ? j : j === 0 ? i : 0))); for (let i = 1; i <= a.length; i++) for (let j = 1; j <= b.length; j++) { d[i][j] = Math.min(d[i - 1][j] + 1, d[i][j - 1] + 1, d[i - 1][j - 1] + (a[i - 1] === b[j - 1] ? 0 : 1)); if (i > 1 && j > 1 && a[i - 1] === b[j - 2] && a[i - 2] === b[j - 1]) d[i][j] = Math.min(d[i][j], d[i - 2][j - 2] + 1); } return d[a.length][b.length]; } function suggest(email: string) { const at = email.lastIndexOf("@"); if (at < 1) return null; const domain = email.slice(at + 1).toLowerCase(); if (!/\.[a-z]{2,}$/.test(domain) || DOMAINS.includes(domain)) return null; let best = ""; let score = Infinity; for (const known of DOMAINS) { const s = distance(domain, known); if (s < score) [best, score] = [known, s]; } return score <= (domain.length > 6 ? 2 : 1) ? email.slice(0, at + 1) + best : null; } function FooterAnchor({ link, className = "" }: { link: FooterLink; className?: string }) { const content = ( <> {link.label} {link.badge && {link.badge}} ); // The badge sits outside the drawn underline. return link.href ? ( {content} ) : ( ); } function Signup({ title = "Get the changelog by email", description = "One email a month, when something ships. No spam.", placeholder = "you@company.com", buttonLabel = "Subscribe", onSubscribe, resendAfter = 30, reduced }: FooterNewsletter & { reduced: boolean }) { const id = React.useId(); const [email, setEmail] = React.useState(""); const [phase, setPhase] = React.useState<"idle" | "sending" | "sent" | "resending">("idle"); const [error, setError] = React.useState(null); const [sentTo, setSentTo] = React.useState(""); const [seconds, setSeconds] = React.useState(0); const [resent, setResent] = React.useState(false); const boxRef = React.useRef(null); const inputRef = React.useRef(null); const buttonRef = React.useRef(null); const flash = React.useRef(0); const sent = phase === "sent" || phase === "resending"; const busy = phase === "sending" || phase === "resending"; const counting = phase === "sent" && seconds > 0 && !resent; const fix = phase === "idle" && !error ? suggest(email.trim()) : null; // The resend countdown. React.useEffect(() => { if (!sent || seconds <= 0) return; const timer = window.setTimeout(() => setSeconds((s) => s - 1), 1000); return () => window.clearTimeout(timer); }, [sent, seconds]); React.useEffect(() => () => window.clearTimeout(flash.current), []); // The helper's action keeps its label while it folds away. const action = sent ? { kind: "wrong", label: "Wrong address?" } : fix ? { kind: "fix", label: `${fix}?` } : null; const [kept, setKept] = React.useState(action); if (action && (action.kind !== kept?.kind || action.label !== kept?.label)) setKept(action); const reason = (err: unknown) => (err instanceof Error && err.message ? err.message : "That didn’t go through. Try again?"); const submit = async (e: React.FormEvent) => { e.preventDefault(); if (busy || sent) return; const value = email.trim(); if (!EMAIL.test(value)) { setError(value ? "That doesn’t look like an email address." : "Add your email address first."); if (!reduced) boxRef.current?.animate( [{ transform: "none" }, { transform: "translateX(-6px)" }, { transform: "translateX(5px)" }, { transform: "translateX(-3px)" }, { transform: "translateX(2px)" }, { transform: "none" }], { duration: 380, easing: "ease-out" }, ); inputRef.current?.focus(); return; } const typed = document.activeElement === inputRef.current; setError(null); setPhase("sending"); try { await onSubscribe(value); setSentTo(value); setSeconds(resendAfter); setPhase("sent"); if (typed) requestAnimationFrame(() => buttonRef.current?.focus({ preventScroll: true })); } catch (err) { setError(reason(err)); setPhase("idle"); } }; const resend = async () => { if (phase !== "sent" || seconds > 0) return; setError(null); setPhase("resending"); try { await onSubscribe(sentTo); setResent(true); window.clearTimeout(flash.current); flash.current = window.setTimeout(() => setResent(false), 2200); setSeconds(resendAfter); } catch (err) { setError(reason(err)); } setPhase("sent"); }; const wrong = () => { setPhase("idle"); setError(null); setResent(false); requestAnimationFrame(() => { inputRef.current?.focus(); inputRef.current?.select(); }); }; const helper = sent ? error ?? (resent ? `Sent again to ${sentTo}.` : `We sent a link to ${sentTo}.`) : error ?? (fix ? "Did you mean" : description); const label = phase === "sending" ? "Subscribing" : phase === "resending" ? "Sending" : sent ? (resent ? "Sent" : seconds > 0 ? "Resend in" : "Resend") : buttonLabel; const swap = (on: boolean, delay = 0) => reduced ? { opacity: on ? 1 : 0 } : { opacity: on ? 1 : 0, filter: on ? "none" : "blur(4px)", transform: on ? "none" : "translateY(5px)", transition: `opacity 320ms ${EASE} ${on ? delay : 0}ms, filter 320ms ${EASE} ${on ? delay : 0}ms, transform 420ms ${EASE} ${on ? delay : 0}ms`, }; return (

{title}

Email address {/* One surface: the field, then the confirmation, in the same box. */}

{ setEmail(e.target.value); if (error) setError(null); }} className="absolute inset-0 w-full bg-transparent pl-3 pr-2 text-[14px] text-foreground outline-none placeholder:text-muted-foreground" style={swap(!sent, 120)} />

Check your inbox

{helper}

); } /** * Your name across the full width in 1px outline, sitting on the footer's bottom edge so * descenders sink into it; letters rise out of that edge and fill where the pointer passes. */ function Wordmark({ text, reduced }: { text: string; reduced: boolean }) { const boxRef = React.useRef(null); const wordRef = React.useRef(null); const probeRef = React.useRef(null); const [size, setSize] = React.useState(120); const [baseline, setBaseline] = React.useState(0.86); const [shown, setShown] = React.useState(false); // Sized so the word spans the footer exactly, at any width and in any font. React.useLayoutEffect(() => { const box = boxRef.current; const word = wordRef.current; if (!box || !word) return; const fit = () => { const current = parseFloat(getComputedStyle(word).fontSize); if (!box.clientWidth || !word.offsetWidth || !current) return; const next = (current * box.clientWidth) / word.offsetWidth; setSize((s) => (Math.abs(s - next) < 0.5 ? s : next)); // Where the baseline falls, as a share of the font size, so the box can end just below it. const probe = probeRef.current; if (probe) setBaseline((probe.getBoundingClientRect().top - word.getBoundingClientRect().top) / current); }; fit(); const observer = new ResizeObserver(fit); observer.observe(box); document.fonts?.ready.then(fit); return () => observer.disconnect(); }, [text]); React.useEffect(() => { const box = boxRef.current; if (!box) return; const observer = new IntersectionObserver( ([entry]) => { if (!entry.isIntersecting) return; setShown(true); observer.disconnect(); }, { threshold: 0.3 }, ); observer.observe(box); return () => observer.disconnect(); }, []); return ( ); } export function NewsletterFooter({ brand, columns = [], newsletter, socials = [], legal = [], copyright, status, wordmark = true, className = "", ...props }: NewsletterFooterProps) { const reduced = useReducedMotion(); const word = wordmark === true ? brand.name : wordmark || null; const live = status ? STATUS[status.state] : null; const year = new Date().getFullYear(); return ( ); } 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-breathe {\n\t0%, 100% {\n\t\ttransform: scale(0.82);\n\t\topacity: 0.55;\n\t}\n\t50% {\n\t\ttransform: scale(1);\n\t\topacity: 1;\n\t}\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"registry/newsletter-footer.tsx","content":"$54","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]