{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"contact-template","type":"registry:ui","title":"Contact template","description":"A contact page that routes the message first: pick the topic and it says who answers and how soon. The form keeps what you typed if sending fails and confirms where the reply will go.","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/block-concept.tsx","type":"registry:ui","target":"components/ui/block-concept.tsx","content":"import { ArrowRight } from \"lucide-react\";\nimport type { ComponentProps, ElementType, ReactNode } from \"react\";\nimport { cn } from \"./lib/cn\";\nimport { StageScope } from \"./stage-scope\";\nimport \"./block-concept.css\";\n\n/**\n * Marketing blocks share one voice: monochrome from the system tokens, Geist\n * display with two-tone titles, ink actions, ruled sections and ember only for\n * focus. Blocks follow the page theme, and the Caliper UI controls inside them too.\n */\n\nexport type BlockAction = { label: string; href?: string; onClick?: () => void };\n\n/**\n * A full-bleed band. The section is the container, so everything inside lays\n * out by the block's own width; `block-inner` holds the measure and rhythm.\n * `backdrop` paints behind the content edge to edge (grid lines, a tone).\n */\nexport function BlockRoot({\n as: Tag = \"section\",\n width = \"default\",\n backdrop,\n tone,\n className,\n innerClassName,\n children,\n ...props\n}: Omit, \"ref\"> & {\n /** The band's element; a site footer is a footer. */\n as?: \"section\" | \"footer\" | \"div\";\n /** default 1240px · narrow 960px · wide 1440px. */\n width?: \"default\" | \"narrow\" | \"wide\";\n backdrop?: ReactNode;\n /** A band tone: the page colour or the sunken colour. */\n tone?: \"page\" | \"sunken\" | \"ink\";\n innerClassName?: string;\n}) {\n return (\n \n {backdrop}\n
\n {children}\n
\n \n );\n}\n\nexport function BlockEyebrow({ className, ...props }: ComponentProps<\"p\">) {\n return

;\n}\n\n/** A display heading in the block face. size 1 is the hero headline. */\nexport function BlockTitle({\n as: Tag = \"h2\",\n size = 2,\n className,\n ...props\n}: ComponentProps<\"h2\"> & { as?: \"h1\" | \"h2\" | \"h3\"; size?: 1 | 2 | 3 }) {\n return ;\n}\n\n/** The second tone of a title: these words land in grey. */\nexport function BlockEm({ className, ...props }: ComponentProps<\"em\">) {\n return ;\n}\n\nexport function BlockLead({ className, ...props }: ComponentProps<\"p\">) {\n return

;\n}\n\n/**\n * The section opening every block shares: eyebrow, title and lead. `split`\n * sets the lead beside the title on wide blocks; `center` stacks it centred.\n */\nexport function BlockHeader({\n eyebrow,\n title,\n lead,\n align = \"start\",\n aside,\n headingLevel = 2,\n className,\n}: {\n eyebrow?: ReactNode;\n title: ReactNode;\n lead?: ReactNode;\n align?: \"start\" | \"center\" | \"split\";\n /** 1 when the block opens the page, e.g. a pricing page. */\n headingLevel?: 1 | 2;\n /** Sits at the end of the header row, e.g. a period toggle. */\n aside?: ReactNode;\n className?: string;\n}) {\n return (\n

\n
\n {eyebrow && {eyebrow}}\n {title}\n
\n {(lead || aside) && (\n
\n {lead && {lead}}\n {aside}\n
\n )}\n
\n );\n}\n\nexport function BlockActions({\n primary,\n secondary,\n className,\n block = false,\n}: {\n primary?: BlockAction;\n secondary?: BlockAction;\n className?: string;\n /** Full-width actions, e.g. on phones. */\n block?: boolean;\n}) {\n if (!primary && !secondary) return null;\n return (\n
\n {primary && }\n {secondary && }\n
\n );\n}\n\nexport function BlockButton({ action, kind = \"primary\", arrow = false, link: Link = \"a\" }: { action: BlockAction; kind?: \"primary\" | \"secondary\"; arrow?: boolean; /** The element for a link action, e.g. your router's Link. */ link?: ElementType }) {\n const shared = { \"data-slot\": \"block-button\", \"data-kind\": kind } as const;\n const content = (\n <>\n {action.label}\n {arrow && }\n \n );\n return action.href ? (\n \n {content}\n \n ) : (\n \n );\n}\n\nexport function BlockCard({ className, ...props }: ComponentProps<\"div\">) {\n return
;\n}\n\nexport function BlockChip({ className, ...props }: ComponentProps<\"span\">) {\n return ;\n}\n\n/**\n * A product artefact on a stage: a dotted tonal panel holding a framed window, with an optional floating note that overlaps the\n * window's corner on wide blocks and sits beneath it on narrow ones.\n */\nexport function BlockStage({\n title,\n floating,\n bare = false,\n className,\n children,\n}: {\n /** Shown in the window bar, e.g. \"halden.app/close\". */\n title?: string;\n floating?: ReactNode;\n /** No window frame: the children bring their own surfaces. */\n bare?: boolean;\n className?: string;\n children: ReactNode;\n}) {\n return (\n
\n {bare ? (\n {children}\n ) : (\n
\n
\n \n {title && {title}}\n
\n
{children}
\n
\n )}\n {floating &&
{floating}
}\n
\n );\n}\n\n/** Company names set as type in a quiet row; swap in SVG marks in production. */\nexport function BlockLogos({ label, logos, className }: { label?: string; logos: readonly string[]; className?: string }) {\n return (\n
\n {label &&

{label}

}\n
    \n {logos.map((logo) => (\n
  • {logo}
    • \n ))}\n
\n
\n );\n}\n\n/** Initials from a name, in the block's highlight tones. */\nexport function BlockInitials({ name, size = 36, tone, className }: { name: string; size?: number; tone?: number; className?: string }) {\n const words = name.trim().split(/\\s+/u);\n const initials = ((words[0]?.[0] ?? \"\") + (words.length > 1 ? (words[words.length - 1]?.[0] ?? \"\") : \"\")).toUpperCase();\n return (\n \n {initials}\n \n );\n}\n\nexport type BlockStat = { value: ReactNode; label: string };\n"},{"path":"ui/block-nav.tsx","type":"registry:ui","target":"components/ui/block-nav.tsx","content":"\"use client\";\n\nimport { Menu, X } from \"lucide-react\";\nimport { useEffect, useId, useRef, useState, type ElementType, type ReactNode } from \"react\";\nimport { BlockButton, type BlockAction } from \"./block-concept\";\nimport { cn } from \"./lib/cn\";\nimport \"./shared/site-header.css\";\nimport \"./block-nav.css\";\n\nexport type BlockNavLink = { label: string; href: string; current?: boolean };\n\n// Whole class names, so Tailwind sees them.\nconst folds = {\n 860: { nav: \"@[860px]:block\", row: \"@[860px]:flex\", menu: \"@[860px]:hidden\" },\n 1180: { nav: \"@[1180px]:block\", row: \"@[1180px]:flex\", menu: \"@[1180px]:hidden\" },\n};\n\n/**\n * The site header page templates share. It sits on the page colour, gains a\n * hairline and frost once the page scrolls, keeps the primary action in\n * reach, and on narrow pages folds the links into a menu disclosure that\n * closes with Escape and returns focus to its button.\n */\nexport function BlockNav({\n brand,\n brandHref = \"/\",\n brandLabel,\n logo,\n nav = [],\n signIn,\n primary,\n aside,\n link: Link = \"a\",\n foldAt = 860,\n className,\n}: {\n brand: string;\n brandHref?: string;\n /** The home link's accessible name when the visible brand is short, e.g. \"Halden home\". */\n brandLabel?: string;\n /** A mark set before the brand name; the name stays the accessible label. */\n logo?: ReactNode;\n nav?: readonly BlockNavLink[];\n signIn?: BlockAction;\n primary?: BlockAction;\n /** Extra controls before the actions, e.g. a theme switch or search. */\n aside?: ReactNode;\n /** The element for the brand and nav links, e.g. your router's Link, so moving between pages stays in the app. */\n link?: ElementType;\n /** The header width (px) the links and actions need to sit in one row; narrower, they fold into the menu. 1180 suits six or more links beside extra controls. */\n foldAt?: keyof typeof folds;\n className?: string;\n}) {\n const id = useId();\n const sentinel = useRef(null);\n const menuButton = useRef(null);\n const [scrolled, setScrolled] = useState(false);\n const [menu, setMenu] = useState(false);\n const fold = folds[foldAt];\n\n useEffect(() => {\n const top = sentinel.current;\n if (!top) return;\n const observer = new IntersectionObserver(([entry]) => setScrolled(!entry!.isIntersecting));\n observer.observe(top);\n return () => observer.disconnect();\n }, []);\n\n return (\n <>\n
\n
\n
\n {logo}{brand}\n {nav.length > 0 && (\n \n )}\n \n {(nav.length > 0 || signIn) && (\n setMenu((open) => !open)}\n // Focus stays on the button after it opens the menu, so Escape has to work here too.\n onKeyDown={(event) => event.key === \"Escape\" && setMenu(false)}\n data-slot=\"block-button\"\n data-kind=\"secondary\"\n className={cn(\"ml-auto !min-h-11 !px-4\", fold.menu)}\n >\n {menu ? : }\n Menu\n \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-template.tsx","type":"registry:ui","target":"components/ui/contact-template.tsx","content":"\"use client\";\n\nimport { ArrowRight, CircleCheck, Clock, MapPin } from \"lucide-react\";\nimport { useEffect, useId, useRef, useState, type ComponentProps, type FormEvent } from \"react\";\nimport { Alert } from \"./alert\";\nimport { BlockEyebrow, BlockLead, BlockRoot, BlockTitle, type BlockAction } from \"./block-concept\";\nimport type { BlockNavLink } from \"./block-nav\";\nimport { Button } from \"./button\";\nimport { FaqBlock } from \"./faq-block\";\nimport { Field, isEmail } from \"./field\";\nimport { Input } from \"./input\";\nimport { SelectMenu } from \"./select-menu\";\nimport { TemplatePage, type TemplateFooter } from \"./template-page\";\nimport { Textarea } from \"./textarea\";\nimport \"./contact-template.css\";\n\ntype Without = Omit;\n\nexport type ContactTopic = {\n /** Sent with the message, e.g. \"sales\". */\n value: string;\n label: string;\n /** Who answers and when, e.g. \"The sales team replies within one working day.\" */\n response: string;\n /** A direct address for this topic, shown in the channel list. */\n email?: string;\n};\n\nexport type ContactOffice = { city: string; address: string; hours?: string; timezone?: string; mapHref?: string };\n\nexport type ContactMessage = { topic: string; name: string; email: string; company: string; message: string };\n\ntype Errors = Partial>;\n\nconst check = (values: ContactMessage): Errors => ({\n ...(values.name.trim() ? {} : { name: \"Enter your name.\" }),\n ...(isEmail(values.email) ? {} : { email: values.email.trim() ? \"Enter an email address like name@company.com.\" : \"Enter your email address.\" }),\n ...(values.message.trim().length >= 20 ? {} : { message: `Tell us a little more: at least 20 characters (${values.message.trim().length} so far).` }),\n});\n\n/**\n * A contact page that routes the message before it is written: choose\n * what it is about and the page says who answers and how soon. The form\n * validates where you are, keeps what you typed if sending fails, and ends\n * on a confirmation that names where the reply will go. Offices and the\n * usual questions follow. Built only from the Free blocks.\n */\nexport function ContactTemplate({\n brand,\n nav,\n signIn,\n primary,\n intro,\n topics,\n offices = [],\n faq,\n onSubmit,\n footer,\n className,\n}: {\n brand: string;\n nav?: readonly BlockNavLink[];\n signIn?: BlockAction;\n primary?: BlockAction;\n intro: { eyebrow?: string; title: string; lead?: string };\n topics: readonly ContactTopic[];\n offices?: readonly ContactOffice[];\n faq?: Without>;\n /** Send the message. A thrown error is shown above the form and nothing typed is lost. */\n onSubmit: (message: ContactMessage) => void | Promise;\n footer?: TemplateFooter;\n className?: string;\n}) {\n const id = useId();\n const empty: ContactMessage = { topic: topics[0]?.value ?? \"\", name: \"\", email: \"\", company: \"\", message: \"\" };\n const [values, setValues] = useState(empty);\n const [errors, setErrors] = useState({});\n const [touched, setTouched] = useState>({});\n const [sending, setSending] = useState(false);\n const [failure, setFailure] = useState();\n const [sent, setSent] = useState(null);\n const trap = useRef(null);\n const refs = { name: useRef(null), email: useRef(null), message: useRef(null) };\n const done = useRef(null);\n const topic = topics.find((item) => item.value === values.topic) ?? topics[0];\n\n useEffect(() => {\n if (sent) done.current?.focus();\n }, [sent]);\n\n const set = (key: keyof ContactMessage, value: string) => {\n const next = { ...values, [key]: value };\n setValues(next);\n if (touched[key]) setErrors(check(next));\n };\n const blur = (key: keyof Errors) => {\n setTouched((current) => ({ ...current, [key]: true }));\n setErrors((current) => ({ ...current, [key]: check(values)[key] }));\n };\n\n async function submit(event: FormEvent) {\n event.preventDefault();\n if (trap.current?.value) return setSent(values); // A bot filled the hidden field: pretend it went.\n const found = check(values);\n setErrors(found);\n setTouched({ name: true, email: true, message: true });\n const first = ([\"name\", \"email\", \"message\"] as const).find((key) => found[key]);\n if (first) return refs[first].current?.focus();\n setSending(true);\n setFailure(undefined);\n try {\n await onSubmit(values);\n setSent(values);\n } catch (reason) {\n setFailure(reason instanceof Error ? reason.message : \"The message did not send. Try again in a moment.\");\n } finally {\n setSending(false);\n }\n }\n\n return (\n \n \n
\n
\n {intro.eyebrow && {intro.eyebrow}}\n {intro.title}\n {intro.lead && {intro.lead}}\n
    \n {topics.map((item) => (\n
  • \n {item.label}\n {item.response}\n {item.email && {item.email}}\n
    • \n ))}\n
\n
\n\n
\n {sent ? (\n
\n \n

Message sent

\n

\n Thanks, {sent.name.split(\" \")[0]}. {topics.find((item) => item.value === sent.topic)?.response} We will reply to {sent.email}.\n

\n {\n setSent(null);\n setValues({ ...empty, name: sent.name, email: sent.email, company: sent.company });\n setTouched({});\n setErrors({});\n }}\n >\n Send another message\n \n
\n ) : (\n
\n

Send a message

\n {failure && {failure} Your message is still here.}\n
\n What is it about?\n ({ value: item.value, label: item.label }))} value={values.topic} onValueChange={(value) => set(\"topic\", value)} disabled={sending} />\n

\n \n {topic?.response}\n

\n
\n
\n \n {(props) => set(\"name\", e.target.value)} onBlur={() => blur(\"name\")} />}\n \n \n {(props) => set(\"email\", e.target.value)} onBlur={() => blur(\"email\")} />}\n \n
\n \n {(props) => set(\"company\", e.target.value)} />}\n \n \n {(props) =>