{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"newsletter-footer","type":"registry:component","title":"Newsletter footer","description":"A footer that’s still alive: a signup that becomes its own confirmation, drawn link underlines and your name in outline.","author":"Hairline UI","dependencies":[],"registryDependencies":["https://hairlineui.com/r/number-roll.json","https://hairlineui.com/r/text-morph.json"],"files":[{"path":"registry/newsletter-footer.tsx","type":"registry:component","content":"\"use client\";\n\nimport * as React from \"react\";\nimport { NumberRoll } from \"./number-roll\";\nimport { TextMorph } from \"./text-morph\";\n\n/* ─────────────────────────────────────────────────────────\n * NEWSLETTER FOOTER: the last thing on the page, still alive\n *\n * signup an email field with its button inside; a likely\n * typo (\"gmial.com\") is caught as you type and\n * fixed in one click\n * sending the button opens a spinner, \"Subscribing\"\n * sent the field blurs into \"Check your inbox\" with a\n * check drawing itself; the button becomes\n * \"Resend in 0:30\", the seconds rolling down;\n * \"Wrong address?\" morphs it back, email selected\n * links columns whose underlines draw in from the left\n * and leave to the right\n * wordmark your name across the full width in 1px outline;\n * letters rise in, and fill where the pointer\n * passes, fading out behind it\n * ───────────────────────────────────────────────────────── */\n\nexport interface FooterLink {\n label: string;\n href?: string;\n onClick?: () => void;\n /** A small tag beside the link, e.g. \"New\" or \"Hiring\". */\n badge?: string;\n}\n\nexport interface FooterColumn {\n title: string;\n links: FooterLink[];\n}\n\nexport interface FooterSocial {\n label: string;\n href: string;\n icon: React.ReactNode;\n}\n\nexport interface FooterNewsletter {\n title?: string;\n description?: string;\n placeholder?: string;\n buttonLabel?: string;\n /** Subscribe the address; throw an Error to show its message. */\n onSubscribe: (email: string) => Promise | unknown;\n /** Seconds before the email can be sent again. */\n resendAfter?: number;\n}\n\nexport interface NewsletterFooterProps extends React.HTMLAttributes {\n brand: { name: string; logo?: React.ReactNode; href?: string; tagline?: string };\n columns?: FooterColumn[];\n newsletter?: FooterNewsletter;\n socials?: FooterSocial[];\n /** Small links in the bottom row: privacy, terms, cookie settings. */\n legal?: FooterLink[];\n copyright?: React.ReactNode;\n /** A link to your status page, with a live dot. */\n status?: { state: \"operational\" | \"degraded\" | \"outage\"; label?: string; href?: string };\n /** The name in outline across the full width; a string to use other words. */\n wordmark?: boolean | string;\n}\n\nconst EASE = \"cubic-bezier(0.16,1,0.3,1)\";\nconst FOCUS = \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background\";\nconst 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}`;\nconst EMAIL = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]{2,}$/;\nconst STATUS = {\n operational: { label: \"All systems normal\", dot: \"bg-emerald-500\" },\n degraded: { label: \"Some systems slow\", dot: \"bg-amber-500\" },\n outage: { label: \"Outage in progress\", dot: \"bg-red-500\" },\n};\n\nconst reducedQuery = \"(prefers-reduced-motion: reduce)\";\nconst subscribeReduced = (onChange: () => void) => {\n const query = window.matchMedia(reducedQuery);\n query.addEventListener(\"change\", onChange);\n return () => query.removeEventListener(\"change\", onChange);\n};\nconst useReducedMotion = () =>\n React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false);\n\n/* Common mail domains, to catch \"gmial.com\" before it bounces. */\nconst 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\"];\n\nfunction distance(a: string, b: string) {\n const d = Array.from({ length: a.length + 1 }, (_, i) => Array.from({ length: b.length + 1 }, (_, j) => (i === 0 ? j : j === 0 ? i : 0)));\n for (let i = 1; i <= a.length; i++)\n for (let j = 1; j <= b.length; j++) {\n 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));\n 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);\n }\n return d[a.length][b.length];\n}\n\nfunction suggest(email: string) {\n const at = email.lastIndexOf(\"@\");\n if (at < 1) return null;\n const domain = email.slice(at + 1).toLowerCase();\n if (!/\\.[a-z]{2,}$/.test(domain) || DOMAINS.includes(domain)) return null;\n let best = \"\";\n let score = Infinity;\n for (const known of DOMAINS) {\n const s = distance(domain, known);\n if (s < score) [best, score] = [known, s];\n }\n return score <= (domain.length > 6 ? 2 : 1) ? email.slice(0, at + 1) + best : null;\n}\n\nfunction FooterAnchor({ link, className = \"\" }: { link: FooterLink; className?: string }) {\n const content = (\n <>\n {link.label}\n {link.badge && {link.badge}}\n \n );\n // The badge sits outside the drawn underline.\n return link.href ? (\n \n {content}\n \n ) : (\n \n );\n}\n\nfunction 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 }) {\n const id = React.useId();\n const [email, setEmail] = React.useState(\"\");\n const [phase, setPhase] = React.useState<\"idle\" | \"sending\" | \"sent\" | \"resending\">(\"idle\");\n const [error, setError] = React.useState(null);\n const [sentTo, setSentTo] = React.useState(\"\");\n const [seconds, setSeconds] = React.useState(0);\n const [resent, setResent] = React.useState(false);\n const boxRef = React.useRef(null);\n const inputRef = React.useRef(null);\n const buttonRef = React.useRef(null);\n const flash = React.useRef(0);\n\n const sent = phase === \"sent\" || phase === \"resending\";\n const busy = phase === \"sending\" || phase === \"resending\";\n const counting = phase === \"sent\" && seconds > 0 && !resent;\n const fix = phase === \"idle\" && !error ? suggest(email.trim()) : null;\n\n // The resend countdown.\n React.useEffect(() => {\n if (!sent || seconds <= 0) return;\n const timer = window.setTimeout(() => setSeconds((s) => s - 1), 1000);\n return () => window.clearTimeout(timer);\n }, [sent, seconds]);\n React.useEffect(() => () => window.clearTimeout(flash.current), []);\n\n // The helper's action keeps its label while it folds away.\n const action = sent ? { kind: \"wrong\", label: \"Wrong address?\" } : fix ? { kind: \"fix\", label: `${fix}?` } : null;\n const [kept, setKept] = React.useState(action);\n if (action && (action.kind !== kept?.kind || action.label !== kept?.label)) setKept(action);\n\n const reason = (err: unknown) => (err instanceof Error && err.message ? err.message : \"That didn’t go through. Try again?\");\n\n const submit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (busy || sent) return;\n const value = email.trim();\n if (!EMAIL.test(value)) {\n setError(value ? \"That doesn’t look like an email address.\" : \"Add your email address first.\");\n if (!reduced)\n boxRef.current?.animate(\n [{ transform: \"none\" }, { transform: \"translateX(-6px)\" }, { transform: \"translateX(5px)\" }, { transform: \"translateX(-3px)\" }, { transform: \"translateX(2px)\" }, { transform: \"none\" }],\n { duration: 380, easing: \"ease-out\" },\n );\n inputRef.current?.focus();\n return;\n }\n const typed = document.activeElement === inputRef.current;\n setError(null);\n setPhase(\"sending\");\n try {\n await onSubscribe(value);\n setSentTo(value);\n setSeconds(resendAfter);\n setPhase(\"sent\");\n if (typed) requestAnimationFrame(() => buttonRef.current?.focus({ preventScroll: true }));\n } catch (err) {\n setError(reason(err));\n setPhase(\"idle\");\n }\n };\n\n const resend = async () => {\n if (phase !== \"sent\" || seconds > 0) return;\n setError(null);\n setPhase(\"resending\");\n try {\n await onSubscribe(sentTo);\n setResent(true);\n window.clearTimeout(flash.current);\n flash.current = window.setTimeout(() => setResent(false), 2200);\n setSeconds(resendAfter);\n } catch (err) {\n setError(reason(err));\n }\n setPhase(\"sent\");\n };\n\n const wrong = () => {\n setPhase(\"idle\");\n setError(null);\n setResent(false);\n requestAnimationFrame(() => {\n inputRef.current?.focus();\n inputRef.current?.select();\n });\n };\n\n const helper = sent\n ? error ?? (resent ? `Sent again to ${sentTo}.` : `We sent a link to ${sentTo}.`)\n : error ?? (fix ? \"Did you mean\" : description);\n const label = phase === \"sending\" ? \"Subscribing\" : phase === \"resending\" ? \"Sending\" : sent ? (resent ? \"Sent\" : seconds > 0 ? \"Resend in\" : \"Resend\") : buttonLabel;\n const swap = (on: boolean, delay = 0) =>\n reduced\n ? { opacity: on ? 1 : 0 }\n : {\n opacity: on ? 1 : 0,\n filter: on ? \"none\" : \"blur(4px)\",\n transform: on ? \"none\" : \"translateY(5px)\",\n transition: `opacity 320ms ${EASE} ${on ? delay : 0}ms, filter 320ms ${EASE} ${on ? delay : 0}ms, transform 420ms ${EASE} ${on ? delay : 0}ms`,\n };\n\n return (\n
\n

{title}

\n \n {/* One surface: the field, then the confirmation, in the same box. */}\n \n
\n {\n setEmail(e.target.value);\n if (error) setError(null);\n }}\n className=\"absolute inset-0 w-full bg-transparent pl-3 pr-2 text-[14px] text-foreground outline-none placeholder:text-muted-foreground\"\n style={swap(!sent, 120)}\n />\n
\n \n \n \n \n Check your inbox\n
\n
\n \n \n \n \n \n \n \n {label}\n {/* The countdown opens after \"Resend in\", the seconds rolling down. */}\n \n \n \n :\n \n \n \n \n \n \n

\n {helper}\n \n \n (kept?.kind === \"wrong\" ? wrong() : fix && setEmail(fix))}\n className={`ml-1 whitespace-nowrap rounded-sm font-medium text-foreground underline decoration-border underline-offset-4 transition-colors hover:decoration-current ${FOCUS}`}\n >\n {kept?.label ?? \"\"}\n \n \n \n

\n \n );\n}\n\n/**\n * Your name across the full width in 1px outline, sitting on the footer's bottom edge so\n * descenders sink into it; letters rise out of that edge and fill where the pointer passes.\n */\nfunction Wordmark({ text, reduced }: { text: string; reduced: boolean }) {\n const boxRef = React.useRef(null);\n const wordRef = React.useRef(null);\n const probeRef = React.useRef(null);\n const [size, setSize] = React.useState(120);\n const [baseline, setBaseline] = React.useState(0.86);\n const [shown, setShown] = React.useState(false);\n\n // Sized so the word spans the footer exactly, at any width and in any font.\n React.useLayoutEffect(() => {\n const box = boxRef.current;\n const word = wordRef.current;\n if (!box || !word) return;\n const fit = () => {\n const current = parseFloat(getComputedStyle(word).fontSize);\n if (!box.clientWidth || !word.offsetWidth || !current) return;\n const next = (current * box.clientWidth) / word.offsetWidth;\n setSize((s) => (Math.abs(s - next) < 0.5 ? s : next));\n // Where the baseline falls, as a share of the font size, so the box can end just below it.\n const probe = probeRef.current;\n if (probe) setBaseline((probe.getBoundingClientRect().top - word.getBoundingClientRect().top) / current);\n };\n fit();\n const observer = new ResizeObserver(fit);\n observer.observe(box);\n document.fonts?.ready.then(fit);\n return () => observer.disconnect();\n }, [text]);\n\n React.useEffect(() => {\n const box = boxRef.current;\n if (!box) return;\n const observer = new IntersectionObserver(\n ([entry]) => {\n if (!entry.isIntersecting) return;\n setShown(true);\n observer.disconnect();\n },\n { threshold: 0.3 },\n );\n observer.observe(box);\n return () => observer.disconnect();\n }, []);\n\n return (\n
\n {/* The right padding gives back the last letter's negative tracking, so it isn't clipped. */}\n \n {[...text].map((ch, i) => (\n \n \n {ch === \" \" ? \" \" : ch}\n \n \n ))}\n \n \n
\n );\n}\n\nexport function NewsletterFooter({ brand, columns = [], newsletter, socials = [], legal = [], copyright, status, wordmark = true, className = \"\", ...props }: NewsletterFooterProps) {\n const reduced = useReducedMotion();\n const word = wordmark === true ? brand.name : wordmark || null;\n const live = status ? STATUS[status.state] : null;\n const year = new Date().getFullYear();\n\n return (\n \n );\n}\n"}],"css":{"@keyframes ui-breathe":{"0%, 100%":{"transform":"scale(0.82)","opacity":"0.55"},"50%":{"transform":"scale(1)","opacity":"1"}}},"docs":"Docs and live preview: https://hairlineui.com/ui/newsletter-footer"}