{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "contact-form", "title": "Contact Form", "description": "A two-tile contact form with a topic picker, a character count, optional consent, and an info tile with the response time.", "registryDependencies": [ "utils", "@manniche/chart-kit" ], "files": [ { "path": "registry/manniche/contact-form/contact-form.tsx", "content": "// Contact form: a two-tile split. The form tile holds name, email, topic (Pills), message with a mono character\n// count, and an optional consent checkbox; the info tile holds email, phone, address and the response time.\n// Signature: the count turns destructive, with the words \"12 over\", only when over the limit.\n// Screen readers: real labels, aria-invalid + aria-describedby on errors, focus moves to the first invalid field,\n// and sending, sent and error states are announced through a live region. The form never sends anything itself:\n// onSubmit returns a promise the section awaits. On a narrow tile the topic Pills become a native select.\n// Reduced motion: the press feedback on the send button is dropped; nothing else moves.\nimport { useEffect, useId, useRef, useState, type FormEvent, type HTMLAttributes, type ReactNode } from 'react'\nimport { cn } from '@/lib/utils'\nimport { Pills, type PillOption } from '@/registry/manniche/chart-kit/chart-kit'\n\nexport type ContactFormValues = { name: string; email: string; topic: string; message: string; consent: boolean }\n\nexport type ContactInfo = {\n email?: string\n phone?: string\n address?: ReactNode\n /** \"We reply within two working days.\" */\n responseTime?: ReactNode\n}\n\nexport type ContactFormProps = Omit, 'onSubmit' | 'title'> & {\n /** The section heading (h2). */\n heading: ReactNode\n /** One line under the heading. */\n intro?: ReactNode\n /** Topics shown as Pills. */\n topics: PillOption[]\n /** Message limit in characters. Default 800. */\n maxLength?: number\n /** Consent line (may hold a privacy link). The checkbox only appears when this is passed. */\n consent?: ReactNode\n /** Content of the info tile. */\n info: ContactInfo\n /** Called with the values; the section waits for it. Reject to show the error state. */\n onSubmit?: (values: ContactFormValues) => Promise | void\n labels?: {\n name?: string; email?: string; topic?: string; message?: string; send?: string; sending?: string\n sentTitle?: string; sentText?: string; another?: string; errorText?: string; retry?: string\n nameError?: string; emailError?: string; messageError?: string; consentError?: string\n over?: (n: number) => string; infoTitle?: string; emailLabel?: string; phoneLabel?: string; addressLabel?: string\n }\n}\n\ntype Status = 'idle' | 'sending' | 'sent' | 'error'\ntype Errors = Partial>\n\nconst TILE = 'rounded-[26px] bg-card text-card-foreground shadow-[0_0_0_1px_color-mix(in_oklab,var(--foreground)_9%,transparent),0_1px_2px_rgba(0,0,0,0.03)]'\nconst FIELD =\n 'mt-1.5 block min-h-11 w-full rounded-[14px] border border-border bg-background px-3.5 text-base outline-offset-2 focus-visible:outline-2 focus-visible:outline-ring aria-[invalid=true]:border-destructive'\n\nexport function ContactForm({ heading, intro, topics, maxLength = 800, consent, info, onSubmit, labels = {}, className, ...rest }: ContactFormProps) {\n const L = {\n name: 'Name', email: 'Email', topic: 'Topic', message: 'Message', send: 'Send message', sending: 'Sending',\n sentTitle: 'Message sent', sentText: 'Thank you. We will be in touch.', another: 'Write another',\n errorText: 'The message did not go through. Your text is still here, so you can try again.', retry: 'Try again',\n nameError: 'Enter your name.', emailError: 'Enter an email address like name@example.com.',\n messageError: 'Write a message, or shorten it to the limit.', consentError: 'Tick the box to agree before sending.',\n over: (n: number) => `${n} over`, infoTitle: 'Other ways to reach us', emailLabel: 'Email', phoneLabel: 'Phone', addressLabel: 'Address',\n ...labels,\n }\n const uid = useId()\n const [values, setValues] = useState({ name: '', email: '', topic: topics[0]?.id ?? '', message: '', consent: false })\n const [errors, setErrors] = useState({})\n const [status, setStatus] = useState('idle')\n const formRef = useRef(null)\n const sentRef = useRef(null)\n const reset = useRef(false)\n // The form disappears when sent, so focus moves to the confirmation instead of being lost; after \"Write another\"\n // it moves back to the first field.\n useEffect(() => {\n if (status === 'sent') sentRef.current?.focus()\n if (status === 'idle' && reset.current) {\n reset.current = false\n formRef.current?.querySelector('[name=\"name\"]')?.focus()\n }\n }, [status])\n\n const validate = (v: ContactFormValues): Errors => {\n const e: Errors = {}\n if (!v.name.trim()) e.name = L.nameError\n if (!/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(v.email.trim())) e.email = L.emailError\n if (!v.message.trim() || v.message.length > maxLength) e.message = L.messageError\n if (consent && !v.consent) e.consent = L.consentError\n return e\n }\n const set = (k: K, val: ContactFormValues[K]) => setValues((v) => ({ ...v, [k]: val }))\n const blur = (k: keyof Errors) => setErrors((e) => ({ ...e, [k]: validate(values)[k] }))\n\n const submit = async (ev: FormEvent) => {\n ev.preventDefault()\n if (status === 'sending') return\n const e = validate(values)\n setErrors(e)\n const first = (['name', 'email', 'message', 'consent'] as const).find((k) => e[k])\n if (first) {\n formRef.current?.querySelector(`[name=\"${first}\"]`)?.focus()\n return\n }\n setStatus('sending')\n try {\n await onSubmit?.(values)\n setStatus('sent')\n } catch {\n setStatus('error')\n }\n }\n\n const left = maxLength - values.message.length\n const over = left < 0\n const err = (k: keyof Errors) => (errors[k] ? `${uid}-${k}-err` : undefined)\n const errMsg = (k: keyof Errors) =>\n errors[k] ? (\n

\n {errors[k]}\n

\n ) : null\n\n return (\n
\n
\n

\n {heading}\n

\n {intro &&

{intro}

}\n
\n\n
\n
\n
\n {status === 'sending' ? L.sending : status === 'sent' ? L.sentTitle : status === 'error' ? L.errorText : ''}\n
\n {status === 'sent' ? (\n
\n

{L.sentTitle}

\n

{L.sentText}

\n

{values.email}

\n {\n setValues({ name: '', email: '', topic: topics[0]?.id ?? '', message: '', consent: false })\n reset.current = true\n setStatus('idle')\n }}\n className=\"mt-6 inline-flex min-h-11 items-center rounded-full bg-muted px-4 text-sm font-medium outline-offset-2 focus-visible:outline-2 focus-visible:outline-ring\"\n >\n {L.another}\n \n
\n ) : (\n
\n
\n \n set('name', e.target.value)} onBlur={() => blur('name')}\n aria-invalid={!!errors.name} aria-describedby={err('name')} className={FIELD} />\n {errMsg('name')}\n
\n
\n \n set('email', e.target.value)} onBlur={() => blur('email')}\n aria-invalid={!!errors.email} aria-describedby={err('email')} className={FIELD} />\n {errMsg('email')}\n
\n {topics.length > 1 && (\n
\n

{L.topic}

\n {/* Pills cannot wrap, so a narrow tile gets the same choice as a native select. */}\n
\n set('topic', t)} />\n
\n \n
\n )}\n
\n \n