4f: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"] 50: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"] 51:T1afa,"use client"; import { useId, useState, type ComponentProps, type ReactNode, type SubmitEvent } from "react"; import { cn } from "@/registry/default/lib/utils"; import { Button } from "@/registry/default/ui/button"; import { Input } from "@/registry/default/ui/input"; /** Every string the form shows, including the hidden label and status messages. */ interface NewsletterLabels { /** Visually hidden label of the email field. */ email: ReactNode; submit: ReactNode; /** Button text while `onSubscribe` is running. */ pending: ReactNode; /** Announced in the status region once `onSubscribe` resolves. */ success: ReactNode; /** Announced in the alert region when `onSubscribe` throws. */ error: ReactNode; } type NewsletterStatus = "idle" | "pending" | "success" | "error"; const defaultLabels: NewsletterLabels = { email: "Email address", submit: "Subscribe", pending: "Subscribing…", success: "You're subscribed. Check your inbox to confirm.", error: "Could not subscribe. Please try again.", }; interface NewsletterProps extends Omit, "title"> { /** Section title, rendered as an `

`. */ title?: ReactNode; description?: ReactNode; /** Small print under the form. Pass `null` to hide it. */ note?: ReactNode; placeholder?: string; /** Overrides for any of the form's strings; the rest keep their English defaults. */ labels?: Partial; /** * Called with the email instead of a native submit. While it runs the button * is disabled; resolving clears the field and shows `labels.success`, * throwing keeps the email and shows `labels.error`. */ onSubscribe?: (email: string) => void | Promise; /** Props for the `
`, such as `action` and `method` for a native submit. */ formProps?: ComponentProps<"form">; /** "card" puts the band in a bordered box; "plain" leaves it on the page background. */ variant?: "plain" | "card"; } /** * A compact sign-up band: title and description on the left and an inline * email form on the right from `md` up (stacked on small screens). The email * field is `type="email"`, `required` and has `autoComplete="email"`, with a * visually hidden label, so the browser validates it before `onSubscribe` runs. * * With `onSubscribe`, the form does not navigate: the section and form get * `data-status="pending"`, then `"success"` or `"error"`. The success message * goes to a `role="status"` region and the error to a `role="alert"` region; * both stay mounted (empty when idle) so screen readers announce them. * Without `onSubscribe` the form submits natively: pass `action` and `method` * through `formProps`. `data-variant` reflects `variant`. * * @example * { * await fetch("/api/subscribe", { method: "POST", body: JSON.stringify({ email }) }); * }} * /> */ function Newsletter({ title = "Stay in the loop", description = "Get product updates, tips and release notes in your inbox once a month.", note = "No spam. Unsubscribe at any time.", placeholder = "you@example.com", labels: labelsProp, onSubscribe, formProps, variant = "card", className, ...props }: NewsletterProps) { const id = useId(); const [status, setStatus] = useState("idle"); const labels = { ...defaultLabels, ...labelsProp }; const pending = status === "pending"; async function handleSubmit(event: SubmitEvent) { formProps?.onSubmit?.(event); // No handler, or the consumer cancelled it: leave the native submit alone. if (!onSubscribe || event.defaultPrevented) return; event.preventDefault(); if (pending) return; // React clears currentTarget once the event is handled, so keep the form. const form = event.currentTarget; const email = String(new FormData(form).get("email") ?? ""); setStatus("pending"); try { await onSubscribe(email); form.reset(); setStatus("success"); } catch { setStatus("error"); } } return (

{title}
{description ? (
{description}
) : null}

{labels.email}
{status === "success" ? labels.success : null}

{status === "error" ? labels.error : null}
{note ? (
{note}
) : null}

); } export { Newsletter, type NewsletterLabels, type NewsletterProps, type NewsletterStatus }; 4e:["$","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,["$","$L4f",null,{"namespace":"@corsair-ui","registryDependencies":["@corsair-ui/utils","@corsair-ui/button","@corsair-ui/input"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"registry/default/components/blocks/newsletter.tsx","content":"$51","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]