{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"contact-section","type":"registry:ui","title":"Contact section","description":"A contact form beside the ways to reach a team.","dependencies":["@radix-ui/react-popover","@radix-ui/react-slot","clsx","lucide-react","tailwind-merge"],"registryDependencies":["https://caliperui.site/r/styles.json"],"files":[{"path":"ui/alert.tsx","type":"registry:ui","target":"components/ui/alert.tsx","content":"\"use client\";\n\nimport { X } from \"lucide-react\";\nimport { useId, type ComponentProps, type ReactNode } from \"react\";\nimport { Button } from \"./button\";\nimport { FeedbackIcon, type FeedbackVariant } from \"./feedback\";\nimport { cn } from \"./lib/cn\";\nimport \"./shared/alert.css\";\nimport \"./alert.css\";\n\nexport type AlertProps = Omit, \"title\"> & {\n title: ReactNode;\n variant?: FeedbackVariant;\n loading?: boolean;\n action?: ReactNode;\n onDismiss?: () => void;\n};\n\nexport function Alert({\n title,\n variant = \"neutral\",\n loading = false,\n children,\n action,\n onDismiss,\n className,\n ...props\n}: AlertProps) {\n const titleId = useId();\n return (\n \n \n
\n
\n {title}\n
\n {children != null && (\n
\n {children}\n
\n )}\n {action != null && (\n
\n {action}\n
\n )}\n
\n {onDismiss && (\n \n \n \n )}\n \n );\n}\n"},{"path":"ui/button.tsx","type":"registry:ui","target":"components/ui/button.tsx","content":"\"use client\";\n\nimport { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport { LoaderCircle } from \"lucide-react\";\nimport {\n useLayoutEffect,\n useRef,\n useState,\n type ComponentProps,\n type ReactNode,\n} from \"react\";\nimport { cn } from \"./lib/cn\";\nimport \"./shared/loading-indicator.css\";\nimport \"./button.css\";\n\n/* Colour, material and press live in button.css keyed on data-variant, so a\n consumer's utility classes still override them. Raised to press: the\n button sinks 1px into an inner shade instead of scaling. */\nconst variants = {\n default: \"\",\n secondary: \"\",\n ghost: \"\",\n destructive: \"\",\n};\n\nconst sizes = {\n sm: \"h-8 gap-1.5 rounded-full px-3 text-[13px] max-md:min-h-11 [@media(pointer:coarse)]:min-h-11\",\n md: \"h-[var(--control-height)] gap-2 rounded-full px-3.5 text-sm\",\n lg: \"h-11 gap-2 rounded-full px-[18px] text-[15px]\",\n icon: \"size-[var(--control-height)] rounded-full p-0\",\n};\n\nexport type ButtonProps = ComponentProps<\"button\"> & {\n variant?: keyof typeof variants;\n size?: keyof typeof sizes;\n asChild?: boolean;\n /** Shows a spinner over the label and swallows clicks while keeping focus and width. */\n loading?: boolean;\n /** Animate a meaningful label/icon change, such as saving → saved. */\n feedbackKey?: string;\n};\n\nexport function Button({\n className,\n variant = \"default\",\n size = \"md\",\n asChild = false,\n loading = false,\n feedbackKey,\n disabled,\n \"aria-disabled\": ariaDisabled,\n children,\n onClick,\n onClickCapture,\n tabIndex,\n type = \"button\",\n ...props\n}: ButtonProps) {\n const Component = asChild ? Slot : \"button\";\n const nativeDisabled = Boolean(disabled);\n const blocked =\n nativeDisabled ||\n loading ||\n ariaDisabled === true ||\n ariaDisabled === \"true\";\n\n return (\n {\n if (blocked && (event.key === \"Enter\" || event.key === \" \")) {\n event.preventDefault();\n }\n props.onKeyDown?.(event);\n }}\n onClickCapture={(event) => {\n if (blocked) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n onClickCapture?.(event);\n }}\n onClick={onClick}\n >\n {loading && asChild && (\n \n )}\n {loading && !asChild && feedbackKey === undefined && (\n \n \n \n )}\n \n {loading && !asChild && feedbackKey === undefined ? (\n \n {children}\n \n ) : feedbackKey !== undefined && !asChild ? (\n \n {loading && (\n \n )}\n {children}\n \n ) : (\n children\n )}\n \n \n );\n}\n\nfunction ButtonFeedback({\n stateKey,\n children,\n}: {\n stateKey: string;\n children: ReactNode;\n}) {\n const content = useRef(null);\n const [initialKey] = useState(stateKey);\n const [width, setWidth] = useState();\n useLayoutEffect(() => {\n const element = content.current;\n if (!element) return;\n const measure = () => setWidth(element.offsetWidth);\n measure();\n const observer = new ResizeObserver(measure);\n observer.observe(element);\n return () => observer.disconnect();\n }, [stateKey]);\n return (\n \n \n {children}\n \n \n );\n}\n"},{"path":"ui/contact-section.tsx","type":"registry:ui","target":"components/ui/contact-section.tsx","content":"\"use client\";\nimport { CheckCircle2 } from \"lucide-react\";\nimport { useEffect, useId, useRef, useState, type FormEvent } from \"react\";\nimport { Alert } from \"./alert\";\nimport { Button } from \"./button\";\nimport { Field, isEmail } from \"./field\";\nimport { Input } from \"./input\";\nimport { cn } from \"./lib/cn\";\nimport { SelectMenu } from \"./select-menu\";\nimport { Textarea } from \"./textarea\";\n\nexport type ContactDetail = { label: string; value: string; href?: string };\nexport type ContactResult = void | { error?: string; fields?: { name?: string; email?: string; message?: string } };\n\n/** A contact form beside a few direct ways to reach you. It sends nothing itself and keeps the message if sending fails. */\nexport function ContactSection({\n title = \"Contact us\",\n description,\n details,\n topics,\n onSubmit,\n successTitle = \"Message sent\",\n successText = \"Thanks. We will reply within one business day.\",\n className,\n}: {\n title?: string;\n description?: string;\n details?: readonly ContactDetail[];\n topics?: readonly string[];\n onSubmit: (values: { name: string; email: string; topic: string; message: string }) => Promise | ContactResult;\n successTitle?: string;\n successText?: string;\n className?: string;\n}) {\n const [values, setValues] = useState({ name: \"\", email: \"\", topic: topics?.[0] ?? \"\", message: \"\", website: \"\" });\n const [touched, setTouched] = useState({ name: false, email: false, message: false });\n const [server, setServer] = useState<{ error?: string; fields?: { name?: string; email?: string; message?: string } }>({});\n const [pending, setPending] = useState(false),\n [sent, setSent] = useState(false);\n const form = useRef(null);\n const refocus = useRef(null);\n const heading = useId();\n const thanks = useRef(null);\n\n useEffect(() => {\n if (pending || !refocus.current) return;\n form.current?.querySelector(`[name=\"${refocus.current}\"]`)?.focus();\n refocus.current = null;\n }, [pending]);\n useEffect(() => {\n if (sent) thanks.current?.focus();\n }, [sent]);\n\n const local = {\n name: !values.name.trim() ? \"Tell us your name.\" : \"\",\n email: !values.email.trim() ? \"Enter your email address.\" : !isEmail(values.email) ? \"Enter a valid email address, like name@example.com.\" : \"\",\n message: values.message.trim().length < 10 ? \"Write a few words about what you need (at least 10 characters).\" : \"\",\n };\n const errors = {\n name: (touched.name && local.name) || server.fields?.name || \"\",\n email: (touched.email && local.email) || server.fields?.email || \"\",\n message: (touched.message && local.message) || server.fields?.message || \"\",\n };\n\n const submit = async (event: FormEvent) => {\n event.preventDefault();\n if (pending) return;\n setTouched({ name: true, email: true, message: true });\n setServer({});\n const first = ([\"name\", \"email\", \"message\"] as const).find((k) => local[k]);\n if (first) {\n form.current?.querySelector(`[name=\"${first}\"]`)?.focus();\n return;\n }\n // Real people never see the hidden field; if it has text, pretend it worked.\n if (values.website) {\n setSent(true);\n return;\n }\n setPending(true);\n let target: string | undefined;\n try {\n const result = await onSubmit({ name: values.name.trim(), email: values.email.trim(), topic: values.topic, message: values.message.trim() });\n if (result && (result.error || result.fields)) {\n setServer(result);\n target = ([\"name\", \"email\", \"message\"] as const).find((k) => result.fields?.[k]);\n } else setSent(true);\n } catch (error) {\n setServer({ error: error instanceof Error ? error.message : \"Something went wrong. Your message is still here; try again.\" });\n } finally {\n setPending(false);\n }\n if (target) refocus.current = target;\n };\n\n return (\n
\n
\n

\n {title}\n

\n {description &&

{description}

}\n {details && details.length > 0 && (\n
\n {details.map((d) => (\n
\n
{d.label}
\n
\n {d.href ? (\n \n {d.value}\n \n ) : (\n d.value\n )}\n
\n
\n ))}\n
\n )}\n
\n
\n {sent ? (\n
\n \n

{successTitle}

\n

{successText}

\n {\n setSent(false);\n setValues({ name: \"\", email: \"\", topic: topics?.[0] ?? \"\", message: \"\", website: \"\" });\n setTouched({ name: false, email: false, message: false });\n }}\n >\n Send another message\n \n
\n ) : (\n
\n {server.error && }\n
\n \n {(control) => setValues({ ...values, name: e.target.value })} onBlur={() => setTouched((t) => ({ ...t, name: true }))} />}\n \n \n {(control) => (\n setValues({ ...values, email: e.target.value })} onBlur={() => setTouched((t) => ({ ...t, email: true }))} />\n )}\n \n
\n {topics && topics.length > 0 && (\n \n {(control) => (\n setValues({ ...values, topic })} options={topics.map((t) => ({ value: t, label: t }))} />\n )}\n \n )}\n \n {(control) =>