4e: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"] 4f: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"] 50:T18aa,"use client" /** * Newsletter — an email capture band. * * Presentation and wiring only: it owns no network call. Pass `onSubmit` and * drive `status` from whatever your form action or mutation returns, so the * section works the same behind a server action, a fetch, or a third-party * embed. * * a11y: a form that reports its own outcome, which is the part most newsletter * sections skip. * * - The result is announced through a polite live region that is present from * the first render. A live region inserted *at the same time* as its message * is frequently missed by screen readers, so the container is always there * and only its content changes. * - While submitting, the button is `aria-busy` and keeps its label — the * accessible name never changes under the user. * - An error is passed to the field as well as the live region, so it is both * announced and programmatically tied to the input that caused it. * - The label is real. `hideLabel` moves it out of the layout, not out of the * accessibility tree, which is what a placeholder-only field does. * * Dependencies: react, @/lib/types, @/lib/utils, * @/components/ui/button, @/components/ui/container, @/components/ui/input, * @/components/ui/section, @/components/ui/section-header. */ import type { FormEvent, ReactNode } from "react" import type { SectionBaseProps } from "@/lib/types" import { cn, slugId } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Container } from "@/components/ui/container" import { Input } from "@/components/ui/input" import { Section } from "@/components/ui/section" import { SectionHeader } from "@/components/ui/section-header" export type NewsletterStatus = "idle" | "submitting" | "success" | "error" export interface NewsletterProps extends SectionBaseProps { title: string description?: string eyebrow?: string /** Called with the submitted address. Make the network request in your own code. */ onSubmit?: (email: string) => void /** Controls the button, the live region, and the field's error state. */ status?: NewsletterStatus /** Announced on success. */ successMessage?: ReactNode /** Announced on failure and attached to the field. */ errorMessage?: string label?: string hideLabel?: boolean placeholder?: string submitLabel?: string /** Small print under the form, such as consent, frequency or how to unsubscribe. */ note?: ReactNode /** `inline` puts the button inside the field; `stacked` puts it below. */ layout?: "inline" | "stacked" variant?: "plain" | "muted" | "card" align?: "start" | "center" } const surfaces = { plain: "", muted: "bg-muted rounded-2xl px-6 py-12 sm:px-12", card: "bg-card text-card-foreground rounded-2xl border px-6 py-12 sm:px-12", } as const export function Newsletter({ title, description, eyebrow, onSubmit, status = "idle", successMessage = "Thanks — check your inbox to confirm.", errorMessage, label = "Email address", hideLabel = true, placeholder = "you@example.com", submitLabel = "Subscribe", note, layout = "inline", variant = "muted", align = "center", headingLevel = 2, as = "section", spacing = "md", className, id, }: NewsletterProps) { const titleId = id ? `${id}-title` : slugId(title) const submitting = status === "submitting" const centered = align === "center" const handleSubmit = (event: FormEvent) => { event.preventDefault() if (!onSubmit) return const data = new FormData(event.currentTarget) onSubmit(String(data.get("email") ?? "")) } return (

) } 4d:["$","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,["$","$L4e",null,{"namespace":"@facade","registryDependencies":["https://facadeui.dev/r/button.json","https://facadeui.dev/r/container.json","https://facadeui.dev/r/input.json","https://facadeui.dev/r/section.json","https://facadeui.dev/r/section-header.json","https://facadeui.dev/r/types.json","https://facadeui.dev/r/utils.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/sections/newsletter.tsx","content":"$50","type":"registry:component","target":"components/sections/newsletter.tsx"}],"className":"h-[70svh] min-h-80"}]]}]