// ui/newsletter/newsletter.tsx "use client"; import { cn } from "@paubha/registry/lib/cn"; import type * as React from "react"; import { useId, useState } from "react"; import { Button } from "../button/button"; import { Input } from "../input/input"; const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; export interface NewsletterProps extends Omit, "title" | "onSubmit"> { title?: React.ReactNode; description?: React.ReactNode; /** Submit button label. @default "Subscribe" */ submitLabel?: React.ReactNode; placeholder?: string; /** Shown under the form when the email is invalid. @default "Enter a valid email address." */ errorMessage?: React.ReactNode; onSubscribe?: (email: string) => void; /** Shown after a successful submit. Can be a node or a function of the email. */ successMessage?: React.ReactNode | ((email: string) => React.ReactNode); } /** * Email capture form · native form (noValidate, own email check) · input labelled via * aria-label · invalid email sets aria-invalid + aria-describedby to the error text · * input and submit button carry glow-focus */ export function Newsletter({ ref, className, title = "Stay in the loop", description = "New components and patterns, one email a month.", submitLabel = "Subscribe", placeholder = "you@company.com", errorMessage = "Enter a valid email address.", onSubscribe, successMessage = "You’re subscribed.", ...props }: NewsletterProps) { const [email, setEmail] = useState(""); const [done, setDone] = useState(false); const [invalid, setInvalid] = useState(false); const errorId = useId(); if (done) { const message = typeof successMessage === "function" ? successMessage(email) : successMessage; return (

{message}

{description != null ? (

{description}

) : null}

); } return (

{ e.preventDefault(); if (!EMAIL_PATTERN.test(email.trim())) { setInvalid(true); return; } setInvalid(false); onSubscribe?.(email.trim()); setDone(true); }} {...props} >

{title != null ? (

{title}

) : null} {description != null ? (

{description}

) : null}

{ setEmail(e.target.value); if (invalid) setInvalid(false); }} error={invalid} aria-describedby={invalid ? errorId : undefined} placeholder={placeholder} aria-label="Email" className="flex-1" />

{invalid && errorMessage != null ? (

{errorMessage}

) : null}

); } Newsletter.displayName = "Newsletter"; // lib/cn.ts import { type ClassValue, clsx } from "clsx"; import { extendTailwindMerge } from "tailwind-merge"; // Our named type-scale utilities (text-ui-*, text-body-*, text-display-*) are custom // Tailwind v4 @theme tokens tailwind-merge doesn't know about out of the box. Without // this, it falls back to treating them as arbitrary text-color classes and silently // drops them whenever a real text-fg-* color class is merged in alongside. Every // component that pairs a type-scale class with a color class (the documented, required // pattern) loses its font-size/line-height/letter-spacing at runtime. const twMerge = extendTailwindMerge({ extend: { classGroups: { "font-size": [ { text: [ "ui-xs", "ui-sm", "ui-md", "ui-lg", "body-sm", "body-md", "body-lg", "display-xs", "display-sm", "display-md", "display-lg", "display-xl", "display-2xl", ], }, ], }, }, }); export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); }

Newsletter

Installation

Usage

On this page