"use client"; import * as React from "react"; import { AnimatePresence, motion } from "motion/react"; import { cn } from "@kineticui/core"; import { FileIcon, XIcon } from "@kineticui/icons"; export type ComposeData = { name: string; email: string; topic: string; message: string; files: File[]; }; export type ComposeFormProps = { /** Recipient shown in the To row. */ to: { name: string; avatar?: React.ReactNode }; /** Topic chips in the About row. */ topics?: string[]; /** Placeholder per topic. */ placeholders?: Record; maxLength?: number; /** Slot for a bot check such as Cloudflare Turnstile or hCaptcha. */ verification?: React.ReactNode; /** When `verification` is used, pass whether it has passed; Send stays locked until true. */ verified?: boolean; /** Allow file attachments. */ attachments?: boolean; maxFiles?: number; /** Max size per file in MB. */ maxFileSizeMB?: number; onSubmit: (data: ComposeData) => Promise | void; className?: string; }; const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; function Row({ label, children, htmlFor }: { label: string; children: React.ReactNode; htmlFor?: string }) { return (

{label}

{children}

); } /** Email-client style contact form: To / From / About rows, topic chips, attachments, character count and a bot-check slot. */ export function ComposeForm({ to, topics = ["Question", "Hiring", "Freelance", "Collaboration", "Other"], placeholders = {}, maxLength = 4000, verification, verified, attachments = true, maxFiles = 3, maxFileSizeMB = 10, onSubmit, className, }: ComposeFormProps) { const [name, setName] = React.useState(""); const [email, setEmail] = React.useState(""); const [topic, setTopic] = React.useState(topics[0] ?? ""); const [message, setMessage] = React.useState(""); const [files, setFiles] = React.useState([]); const [touched, setTouched] = React.useState(false); const [state, setState] = React.useState<"idle" | "sending" | "sent" | "error">("idle"); const [fileError, setFileError] = React.useState(null); const fileRef = React.useRef(null); const id = React.useId(); const errors = { name: !name.trim() ? "Add your name" : null, email: !EMAIL.test(email) ? "Add a valid email" : null, message: message.trim().length < 10 ? "Write at least 10 characters" : null, }; const valid = !errors.name && !errors.email && !errors.message; const waiting = verification !== undefined && verified === false; const addFiles = (list: FileList | null) => { if (!list) return; const next = [...files]; for (const f of Array.from(list)) { if (next.length >= maxFiles) { setFileError(`Up to ${maxFiles} files`); break; } if (f.size > maxFileSizeMB * 1024 * 1024) { setFileError(`${f.name} is over ${maxFileSizeMB} MB`); continue; } next.push(f); } setFiles(next); }; const submit = async (e: React.FormEvent) => { e.preventDefault(); setTouched(true); if (!valid || waiting || state === "sending") return; setState("sending"); try { await onSubmit({ name: name.trim(), email: email.trim(), topic, message: message.trim(), files }); setState("sent"); } catch { setState("error"); } }; const reset = () => { setMessage(""); setFiles([]); setTouched(false); setState("idle"); }; const input = "w-full bg-transparent py-4 text-[17px] text-foreground outline-none placeholder:text-subtle sm:py-5"; return (

{state === "sent" ? "Message sent" : "New message"}

{state === "sent" ? (

Sent to {to.name.split(" ")[0]}

Thanks, {name.split(" ")[0]}. A reply will land at {email}, usually within a day.

) : ( {to.avatar ?? to.name[0]} {to.name}

setName(e.target.value)} placeholder="Your name" autoComplete="name" aria-invalid={touched && !!errors.name} className={input} /> {touched && errors.name ? {errors.name} : null}

setEmail(e.target.value)} placeholder="you@example.com" autoComplete="email" aria-label="Your email" aria-invalid={touched && !!errors.email} className={input} /> {touched && errors.email ? {errors.email} : null}

{topics.map((t) => ( ))}

setMessage(e.target.value.slice(0, maxLength))}
                placeholder={placeholders[topic] ?? "Write your message…"}
                aria-label="Message"
                aria-invalid={touched && !!errors.message}
                rows={7}
                className="min-h-40 resize-none bg-transparent text-[17px] leading-relaxed text-foreground outline-none placeholder:text-subtle"
              />
              {touched && errors.message ? <span className="-mt-2 text-xs text-danger">{errors.message}</span> : null}
              {files.length ? (
                <div className="flex flex-wrap gap-2">
                  {files.map((f, i) => (
                    <motion.span key={f.name + i} initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} className="flex items-center gap-2 rounded-xl border border-border bg-background py-1.5 pl-2 pr-1.5 text-xs">
                      <FileIcon size={14} className="text-subtle" />
                      <span className="max-w-40 truncate">{f.name}</span>
                      <span className="text-subtle">{(f.size / 1024).toFixed(0)} KB</span>
                      <button type="button" aria-label={`Remove ${f.name}`} onClick={() => setFiles((x) => x.filter((_, j) => j !== i))} className="text-subtle hover:text-foreground">
                        <XIcon size={12} />
                      </button>
                    </motion.span>
                  ))}
                </div>
              ) : null}
              {verification ? <div>{verification}</div> : null}
            </div>
            <div className="flex items-center gap-4 border-t border-border bg-surface-raised/50 px-6 py-4">
              {attachments ? (
                <>
                  <input ref={fileRef} type="file" multiple hidden onChange={(e) => { setFileError(null); addFiles(e.target.files); e.target.value = ""; }} />
                  <button type="button" aria-label="Attach files" onClick={() => fileRef.current?.click()} className="flex size-10 items-center justify-center rounded-full text-muted transition-colors hover:bg-surface-overlay hover:text-foreground">
                    <svg viewBox="0 0 24 24" className="size-5" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
                      <path d="M21 11.5l-8.6 8.6a5.5 5.5 0 01-7.8-7.8l8.6-8.6a3.7 3.7 0 015.2 5.2l-8.6 8.6a1.8 1.8 0 01-2.6-2.6l8-8" />
                    </svg>
                  </button>
                </>
              ) : null}
              {fileError ? <span className="text-xs text-danger">{fileError}</span> : state === "error" ? <span className="text-xs text-danger">Couldn't send. Please try again.</span> : null}
              <span className={cn("ml-auto font-mono text-sm", message.length > maxLength * 0.9 ? "text-warning" : "text-subtle")}>
                {message.length}/{maxLength}
              </span>
              <button
                type="submit"
                disabled={waiting || state === "sending"}
                className={cn(
                  "flex h-12 min-w-36 items-center justify-center gap-2 rounded-2xl px-7 text-[17px] font-semibold transition-all",
                  waiting || state === "sending" ? "bg-[#7dd3fc]/50 text-[#0b2a3a]/60" : "bg-[#7dd3fc] text-[#0b2a3a] hover:brightness-105 active:scale-[0.97]",
                )}
              >
                {waiting ? "Verifying…" : state === "sending" ? (
                  <>
                    <span className="size-4 rounded-full border-2 border-current border-t-transparent animate-kn-spin" /> Sending
                  </>
                ) : (
                  <>
                    Send
                    <svg viewBox="0 0 24 24" className="size-4" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
                      <path d="M5 12h14M13 6l6 6-6 6" />
                    </svg>
                  </>
                )}
              </button>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </form>
  );
}
</article></body></html>

Compose Form

Installation

Exports