jdc-react-mailer 0.1.0

package/dist/index.d.cts

@@ -0,0 +1,73 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * Field names supported by the contact form.
+ * Honeypot is always included for spam protection but not configurable in `fields`.
+ */
+type FormFieldName = 'name' | 'email' | 'phone' | 'subject' | 'message';
+/**
+ * Order and inclusion of visible fields.
+ */
+type FormFieldsConfig = readonly FormFieldName[];
+/**
+ * Submit state for the form.
+ */
+type SubmitState = 'idle' | 'loading' | 'success' | 'error';
+/**
+ * Theme overrides applied as CSS custom properties on the form root.
+ */
+interface ThemeOverrides {
+    primary?: string;
+    primaryHover?: string;
+    bg?: string;
+    surface?: string;
+    border?: string;
+    text?: string;
+    muted?: string;
+    error?: string;
+    success?: string;
+    radius?: string;
+    spacing?: string;
+    fontFamily?: string;
+}
+/**
+ * Payload sent to the API endpoint (matches handler expectation).
+ */
+interface ContactFormPayload {
+    name?: string;
+    email: string;
+    phone?: string;
+    subject?: string;
+    message: string;
+    /** Honeypot; must be empty for valid submission */
+    website?: string;
+}
+/**
+ * Props for the ContactForm component.
+ */
+interface ContactFormProps {
+    /** POST endpoint URL (e.g. /api/contact). Required. */
+    endpoint: string;
+    /** Field order and inclusion. Default: ['name', 'email', 'subject', 'message'] */
+    fields?: FormFieldsConfig;
+    /** Override labels per field */
+    labels?: Partial<Record<FormFieldName, string>>;
+    /** Override placeholders per field */
+    placeholders?: Partial<Record<FormFieldName, string>>;
+    /** Inline theme overrides (CSS variables) */
+    theme?: ThemeOverrides;
+    /** Message shown after successful submit */
+    successMessage?: string;
+    /** Callback when submit succeeds */
+    onSuccess?: (data: ContactFormPayload) => void;
+    /** Callback when submit fails */
+    onError?: (error: Error) => void;
+    /** Optional class name for the form root */
+    className?: string;
+    /** Submit button label */
+    submitLabel?: string;
+}
+
+declare function ContactForm({ endpoint, fields, labels, placeholders, theme, successMessage, onSuccess, onError, className, submitLabel, }: ContactFormProps): react_jsx_runtime.JSX.Element;
+
+export { ContactForm, type ContactFormPayload, type ContactFormProps, type FormFieldName, type FormFieldsConfig, type SubmitState, type ThemeOverrides };

package/dist/index.d.ts

@@ -0,0 +1,73 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * Field names supported by the contact form.
+ * Honeypot is always included for spam protection but not configurable in `fields`.
+ */
+type FormFieldName = 'name' | 'email' | 'phone' | 'subject' | 'message';
+/**
+ * Order and inclusion of visible fields.
+ */
+type FormFieldsConfig = readonly FormFieldName[];
+/**
+ * Submit state for the form.
+ */
+type SubmitState = 'idle' | 'loading' | 'success' | 'error';
+/**
+ * Theme overrides applied as CSS custom properties on the form root.
+ */
+interface ThemeOverrides {
+    primary?: string;
+    primaryHover?: string;
+    bg?: string;
+    surface?: string;
+    border?: string;
+    text?: string;
+    muted?: string;
+    error?: string;
+    success?: string;
+    radius?: string;
+    spacing?: string;
+    fontFamily?: string;
+}
+/**
+ * Payload sent to the API endpoint (matches handler expectation).
+ */
+interface ContactFormPayload {
+    name?: string;
+    email: string;
+    phone?: string;
+    subject?: string;
+    message: string;
+    /** Honeypot; must be empty for valid submission */
+    website?: string;
+}
+/**
+ * Props for the ContactForm component.
+ */
+interface ContactFormProps {
+    /** POST endpoint URL (e.g. /api/contact). Required. */
+    endpoint: string;
+    /** Field order and inclusion. Default: ['name', 'email', 'subject', 'message'] */
+    fields?: FormFieldsConfig;
+    /** Override labels per field */
+    labels?: Partial<Record<FormFieldName, string>>;
+    /** Override placeholders per field */
+    placeholders?: Partial<Record<FormFieldName, string>>;
+    /** Inline theme overrides (CSS variables) */
+    theme?: ThemeOverrides;
+    /** Message shown after successful submit */
+    successMessage?: string;
+    /** Callback when submit succeeds */
+    onSuccess?: (data: ContactFormPayload) => void;
+    /** Callback when submit fails */
+    onError?: (error: Error) => void;
+    /** Optional class name for the form root */
+    className?: string;
+    /** Submit button label */
+    submitLabel?: string;
+}
+
+declare function ContactForm({ endpoint, fields, labels, placeholders, theme, successMessage, onSuccess, onError, className, submitLabel, }: ContactFormProps): react_jsx_runtime.JSX.Element;
+
+export { ContactForm, type ContactFormPayload, type ContactFormProps, type FormFieldName, type FormFieldsConfig, type SubmitState, type ThemeOverrides };

package/dist/index.js

@@ -0,0 +1,341 @@
+// src/hooks/useContactForm.ts
+import { useState, useCallback } from "react";
+var DEFAULT_FIELDS = ["name", "email", "subject", "message"];
+var DEFAULT_LABELS = {
+  name: "Name",
+  email: "Email",
+  phone: "Phone (optional)",
+  subject: "Subject",
+  message: "Message"
+};
+var HONEPOT_NAME = "website";
+function isValidEmail(value) {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.trim());
+}
+function isValidPhone(value) {
+  return /^[0-9()\-\s+.ext]+$/.test(value.trim());
+}
+function getFieldErrors(payload, fields) {
+  const errors = {};
+  if (fields.includes("name") && payload.name !== void 0) {
+    const v = String(payload.name).trim();
+    if (!v) errors.name = "Name is required";
+  }
+  if (fields.includes("email")) {
+    const v = String(payload.email ?? "").trim();
+    if (!v) errors.email = "Email is required";
+    else if (!isValidEmail(v)) errors.email = "Please enter a valid email address";
+  }
+  if (fields.includes("phone") && payload.phone) {
+    const v = String(payload.phone).trim();
+    if (v && !isValidPhone(v)) errors.phone = "Please enter a valid phone number";
+  }
+  if (fields.includes("subject") && payload.subject !== void 0) {
+    const v = String(payload.subject).trim();
+    if (!v) errors.subject = "Subject is required";
+  }
+  if (fields.includes("message")) {
+    const v = String(payload.message ?? "").trim();
+    if (!v) errors.message = "Message is required";
+  }
+  return errors;
+}
+function useContactForm({
+  endpoint,
+  fields = DEFAULT_FIELDS,
+  onSuccess,
+  onError
+}) {
+  const [values, setValues] = useState({});
+  const [errors, setErrors] = useState({});
+  const [submitState, setSubmitState] = useState("idle");
+  const [errorMessage, setErrorMessage] = useState(null);
+  const setValue = useCallback(
+    (field, value) => {
+      setValues((prev) => ({ ...prev, [field]: value }));
+      if (errors[field]) {
+        setErrors((prev) => {
+          const next = { ...prev };
+          delete next[field];
+          return next;
+        });
+      }
+    },
+    [errors]
+  );
+  const validate = useCallback(() => {
+    const payload = {
+      email: values.email ?? "",
+      message: values.message ?? "",
+      name: values.name,
+      phone: values.phone,
+      subject: values.subject
+    };
+    const nextErrors = getFieldErrors(payload, fields);
+    setErrors(nextErrors);
+    return Object.keys(nextErrors).length === 0;
+  }, [values, fields]);
+  const reset = useCallback(() => {
+    setValues({});
+    setErrors({});
+    setSubmitState("idle");
+    setErrorMessage(null);
+  }, []);
+  const submit = useCallback(
+    async (e) => {
+      e.preventDefault();
+      const payload = {
+        email: (values.email ?? "").trim(),
+        message: (values.message ?? "").trim(),
+        name: fields.includes("name") ? (values.name ?? "").trim() : void 0,
+        phone: fields.includes("phone") ? (values.phone ?? "").trim() || void 0 : void 0,
+        subject: fields.includes("subject") ? (values.subject ?? "").trim() : void 0,
+        website: (values.website ?? "").trim()
+      };
+      if (!validate()) return;
+      if (payload.website) {
+        setValues({});
+        setErrors({});
+        setSubmitState("success");
+        setErrorMessage(null);
+        onSuccess?.(payload);
+        return;
+      }
+      setSubmitState("loading");
+      setErrorMessage(null);
+      try {
+        const res = await fetch(endpoint, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(payload)
+        });
+        const data = await res.json().catch(() => ({}));
+        if (!res.ok) {
+          const msg = typeof data?.message === "string" ? data.message : res.statusText || "Something went wrong";
+          throw new Error(msg);
+        }
+        setValues({});
+        setErrors({});
+        setSubmitState("success");
+        setErrorMessage(null);
+        onSuccess?.(payload);
+      } catch (err) {
+        const error = err instanceof Error ? err : new Error("Submission failed");
+        setSubmitState("error");
+        setErrorMessage(error.message);
+        onError?.(error);
+      }
+    },
+    [endpoint, fields, values, validate, onSuccess, onError, reset]
+  );
+  return {
+    values,
+    errors,
+    submitState,
+    errorMessage,
+    setValue,
+    setErrorMessage,
+    validate,
+    submit,
+    reset
+  };
+}
+
+// src/components/ContactForm/ContactForm.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_FIELDS2 = ["name", "email", "subject", "message"];
+var THEME_KEYS = {
+  primary: "--jdcm-primary",
+  primaryHover: "--jdcm-primary-hover",
+  bg: "--jdcm-bg",
+  surface: "--jdcm-surface",
+  border: "--jdcm-border",
+  text: "--jdcm-text",
+  muted: "--jdcm-muted",
+  error: "--jdcm-error",
+  success: "--jdcm-success",
+  radius: "--jdcm-radius",
+  spacing: "--jdcm-spacing",
+  fontFamily: "--jdcm-font"
+};
+function themeToStyle(theme) {
+  const style = {};
+  for (const [key, value] of Object.entries(theme)) {
+    const cssVar = THEME_KEYS[key];
+    if (cssVar && value != null) style[cssVar] = value;
+  }
+  return style;
+}
+function ContactForm({
+  endpoint,
+  fields = DEFAULT_FIELDS2,
+  labels = {},
+  placeholders = {},
+  theme,
+  successMessage = "Thanks! I'll be in touch.",
+  onSuccess,
+  onError,
+  className,
+  submitLabel = "Send message"
+}) {
+  const {
+    values,
+    errors,
+    submitState,
+    errorMessage,
+    setValue,
+    setErrorMessage,
+    submit
+  } = useContactForm({ endpoint, fields, onSuccess, onError });
+  const rootClassName = ["jdcm-root", className].filter(Boolean).join(" ");
+  const rootStyle = theme ? themeToStyle(theme) : void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: rootClassName,
+      style: rootStyle,
+      ...theme ? { "data-theme-set": "true" } : {},
+      role: "region",
+      "aria-label": "Contact form",
+      children: [
+        submitState === "success" && /* @__PURE__ */ jsx("p", { className: "jdcm-success-msg", role: "status", children: successMessage }),
+        submitState === "error" && errorMessage && /* @__PURE__ */ jsxs("div", { className: "jdcm-error-banner", role: "alert", children: [
+          /* @__PURE__ */ jsx("span", { children: errorMessage }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setErrorMessage(null),
+              "aria-label": "Dismiss error",
+              children: "Dismiss"
+            }
+          )
+        ] }),
+        submitState !== "success" && /* @__PURE__ */ jsxs("form", { className: "jdcm-form", onSubmit: submit, noValidate: true, children: [
+          /* @__PURE__ */ jsxs("div", { className: "jdcm-field jdcm-hp", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx("label", { htmlFor: "jdcm-website", children: "Website" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                id: "jdcm-website",
+                type: "text",
+                name: HONEPOT_NAME,
+                tabIndex: -1,
+                autoComplete: "off",
+                value: values.website ?? "",
+                onChange: (e) => setValue(HONEPOT_NAME, e.target.value)
+              }
+            )
+          ] }),
+          fields.includes("name") && /* @__PURE__ */ jsxs("div", { className: "jdcm-field", children: [
+            /* @__PURE__ */ jsx("label", { htmlFor: "jdcm-name", children: labels.name ?? DEFAULT_LABELS.name }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                id: "jdcm-name",
+                type: "text",
+                name: "name",
+                autoComplete: "name",
+                placeholder: placeholders.name,
+                value: values.name ?? "",
+                onChange: (e) => setValue("name", e.target.value),
+                "aria-invalid": Boolean(errors.name),
+                "aria-describedby": errors.name ? "jdcm-name-err" : void 0
+              }
+            ),
+            errors.name && /* @__PURE__ */ jsx("span", { id: "jdcm-name-err", className: "jdcm-error-msg", children: errors.name })
+          ] }),
+          fields.includes("email") && /* @__PURE__ */ jsxs("div", { className: "jdcm-field", children: [
+            /* @__PURE__ */ jsx("label", { htmlFor: "jdcm-email", children: labels.email ?? DEFAULT_LABELS.email }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                id: "jdcm-email",
+                type: "email",
+                name: "email",
+                required: true,
+                autoComplete: "email",
+                placeholder: placeholders.email,
+                value: values.email ?? "",
+                onChange: (e) => setValue("email", e.target.value),
+                "aria-invalid": Boolean(errors.email),
+                "aria-describedby": errors.email ? "jdcm-email-err" : void 0
+              }
+            ),
+            errors.email && /* @__PURE__ */ jsx("span", { id: "jdcm-email-err", className: "jdcm-error-msg", children: errors.email })
+          ] }),
+          fields.includes("phone") && /* @__PURE__ */ jsxs("div", { className: "jdcm-field", children: [
+            /* @__PURE__ */ jsx("label", { htmlFor: "jdcm-phone", children: labels.phone ?? DEFAULT_LABELS.phone }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                id: "jdcm-phone",
+                type: "tel",
+                name: "phone",
+                autoComplete: "tel",
+                placeholder: placeholders.phone,
+                value: values.phone ?? "",
+                onChange: (e) => setValue("phone", e.target.value),
+                "aria-invalid": Boolean(errors.phone),
+                "aria-describedby": errors.phone ? "jdcm-phone-err" : void 0
+              }
+            ),
+            errors.phone && /* @__PURE__ */ jsx("span", { id: "jdcm-phone-err", className: "jdcm-error-msg", children: errors.phone })
+          ] }),
+          fields.includes("subject") && /* @__PURE__ */ jsxs("div", { className: "jdcm-field", children: [
+            /* @__PURE__ */ jsx("label", { htmlFor: "jdcm-subject", children: labels.subject ?? DEFAULT_LABELS.subject }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                id: "jdcm-subject",
+                type: "text",
+                name: "subject",
+                autoComplete: "off",
+                placeholder: placeholders.subject,
+                value: values.subject ?? "",
+                onChange: (e) => setValue("subject", e.target.value),
+                "aria-invalid": Boolean(errors.subject),
+                "aria-describedby": errors.subject ? "jdcm-subject-err" : void 0
+              }
+            ),
+            errors.subject && /* @__PURE__ */ jsx("span", { id: "jdcm-subject-err", className: "jdcm-error-msg", children: errors.subject })
+          ] }),
+          fields.includes("message") && /* @__PURE__ */ jsxs("div", { className: "jdcm-field", children: [
+            /* @__PURE__ */ jsx("label", { htmlFor: "jdcm-message", children: labels.message ?? DEFAULT_LABELS.message }),
+            /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                id: "jdcm-message",
+                name: "message",
+                required: true,
+                placeholder: placeholders.message,
+                value: values.message ?? "",
+                onChange: (e) => setValue("message", e.target.value),
+                "aria-invalid": Boolean(errors.message),
+                "aria-describedby": errors.message ? "jdcm-message-err" : void 0
+              }
+            ),
+            errors.message && /* @__PURE__ */ jsx("span", { id: "jdcm-message-err", className: "jdcm-error-msg", children: errors.message })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "submit",
+              className: "jdcm-submit",
+              disabled: submitState === "loading",
+              "aria-busy": submitState === "loading",
+              children: [
+                submitState === "loading" && /* @__PURE__ */ jsx("span", { className: "jdcm-spinner", "aria-hidden": "true" }),
+                submitState === "loading" ? "Sending\u2026" : submitLabel
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ContactForm
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useContactForm.ts","../src/components/ContactForm/ContactForm.tsx"],"sourcesContent":["import { useState, useCallback } from 'react';\nimport type {\n  FormFieldName,\n  FormFieldsConfig,\n  ContactFormPayload,\n  SubmitState,\n} from '../components/ContactForm/types';\n\nconst DEFAULT_FIELDS: FormFieldsConfig = ['name', 'email', 'subject', 'message'];\n\nconst DEFAULT_LABELS: Record<FormFieldName, string> = {\n  name: 'Name',\n  email: 'Email',\n  phone: 'Phone (optional)',\n  subject: 'Subject',\n  message: 'Message',\n};\n\nconst HONEPOT_NAME = 'website';\n\nfunction isValidEmail(value: string): boolean {\n  return /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(value.trim());\n}\n\nfunction isValidPhone(value: string): boolean {\n  return /^[0-9()\\-\\s+.ext]+$/.test(value.trim());\n}\n\nfunction getFieldErrors(\n  payload: Partial<ContactFormPayload>,\n  fields: FormFieldsConfig\n): Partial<Record<FormFieldName, string>> {\n  const errors: Partial<Record<FormFieldName, string>> = {};\n\n  if (fields.includes('name') && payload.name !== undefined) {\n    const v = String(payload.name).trim();\n    if (!v) errors.name = 'Name is required';\n  }\n\n  if (fields.includes('email')) {\n    const v = String(payload.email ?? '').trim();\n    if (!v) errors.email = 'Email is required';\n    else if (!isValidEmail(v)) errors.email = 'Please enter a valid email address';\n  }\n\n  if (fields.includes('phone') && payload.phone) {\n    const v = String(payload.phone).trim();\n    if (v && !isValidPhone(v)) errors.phone = 'Please enter a valid phone number';\n  }\n\n  if (fields.includes('subject') && payload.subject !== undefined) {\n    const v = String(payload.subject).trim();\n    if (!v) errors.subject = 'Subject is required';\n  }\n\n  if (fields.includes('message')) {\n    const v = String(payload.message ?? '').trim();\n    if (!v) errors.message = 'Message is required';\n  }\n\n  return errors;\n}\n\nexport interface UseContactFormOptions {\n  endpoint: string;\n  fields?: FormFieldsConfig;\n  onSuccess?: (data: ContactFormPayload) => void;\n  onError?: (error: Error) => void;\n}\n\nexport interface UseContactFormReturn {\n  values: Partial<ContactFormPayload>;\n  errors: Partial<Record<FormFieldName, string>>;\n  submitState: SubmitState;\n  errorMessage: string | null;\n  setValue: (field: FormFieldName | typeof HONEPOT_NAME, value: string) => void;\n  setErrorMessage: (msg: string | null) => void;\n  validate: () => boolean;\n  submit: (e: React.FormEvent) => Promise<void>;\n  reset: () => void;\n}\n\nexport function useContactForm({\n  endpoint,\n  fields = DEFAULT_FIELDS,\n  onSuccess,\n  onError,\n}: UseContactFormOptions): UseContactFormReturn {\n  const [values, setValues] = useState<Partial<ContactFormPayload>>({});\n  const [errors, setErrors] = useState<Partial<Record<FormFieldName, string>>>({});\n  const [submitState, setSubmitState] = useState<SubmitState>('idle');\n  const [errorMessage, setErrorMessage] = useState<string | null>(null);\n\n  const setValue = useCallback(\n    (field: FormFieldName | typeof HONEPOT_NAME, value: string) => {\n      setValues((prev) => ({ ...prev, [field]: value }));\n      if (errors[field as FormFieldName]) {\n        setErrors((prev) => {\n          const next = { ...prev };\n          delete next[field as FormFieldName];\n          return next;\n        });\n      }\n    },\n    [errors]\n  );\n\n  const validate = useCallback((): boolean => {\n    const payload: Partial<ContactFormPayload> = {\n      email: values.email ?? '',\n      message: values.message ?? '',\n      name: values.name,\n      phone: values.phone,\n      subject: values.subject,\n    };\n    const nextErrors = getFieldErrors(payload, fields);\n    setErrors(nextErrors);\n    return Object.keys(nextErrors).length === 0;\n  }, [values, fields]);\n\n  const reset = useCallback(() => {\n    setValues({});\n    setErrors({});\n    setSubmitState('idle');\n    setErrorMessage(null);\n  }, []);\n\n  const submit = useCallback(\n    async (e: React.FormEvent) => {\n      e.preventDefault();\n\n      const payload: Partial<ContactFormPayload> = {\n        email: (values.email ?? '').trim(),\n        message: (values.message ?? '').trim(),\n        name: fields.includes('name') ? (values.name ?? '').trim() : undefined,\n        phone: fields.includes('phone') ? (values.phone ?? '').trim() || undefined : undefined,\n        subject: fields.includes('subject') ? (values.subject ?? '').trim() : undefined,\n        website: (values.website ?? '').trim(),\n      };\n\n      if (!validate()) return;\n\n      if (payload.website) {\n        setValues({});\n        setErrors({});\n        setSubmitState('success');\n        setErrorMessage(null);\n        onSuccess?.(payload as ContactFormPayload);\n        return;\n      }\n\n      setSubmitState('loading');\n      setErrorMessage(null);\n\n      try {\n        const res = await fetch(endpoint, {\n          method: 'POST',\n          headers: { 'Content-Type': 'application/json' },\n          body: JSON.stringify(payload),\n        });\n\n        const data = await res.json().catch(() => ({}));\n\n        if (!res.ok) {\n          const msg =\n            typeof data?.message === 'string'\n              ? data.message\n              : res.statusText || 'Something went wrong';\n          throw new Error(msg);\n        }\n\n        setValues({});\n        setErrors({});\n        setSubmitState('success');\n        setErrorMessage(null);\n        onSuccess?.(payload as ContactFormPayload);\n      } catch (err) {\n        const error = err instanceof Error ? err : new Error('Submission failed');\n        setSubmitState('error');\n        setErrorMessage(error.message);\n        onError?.(error);\n      }\n    },\n    [endpoint, fields, values, validate, onSuccess, onError, reset]\n  );\n  return {\n    values,\n    errors,\n    submitState,\n    errorMessage,\n    setValue,\n    setErrorMessage,\n    validate,\n    submit,\n    reset,\n  };\n}\n\nexport { DEFAULT_LABELS, HONEPOT_NAME };\n","import React from 'react';\nimport { useContactForm, DEFAULT_LABELS, HONEPOT_NAME } from '../../hooks/useContactForm';\nimport type { ContactFormProps, FormFieldName, ThemeOverrides } from './types';\n/* Consumer imports: import 'jdc-react-mailer/style.css' */\n\nconst DEFAULT_FIELDS: FormFieldName[] = ['name', 'email', 'subject', 'message'];\n\nconst THEME_KEYS: Record<keyof ThemeOverrides, string> = {\n  primary: '--jdcm-primary',\n  primaryHover: '--jdcm-primary-hover',\n  bg: '--jdcm-bg',\n  surface: '--jdcm-surface',\n  border: '--jdcm-border',\n  text: '--jdcm-text',\n  muted: '--jdcm-muted',\n  error: '--jdcm-error',\n  success: '--jdcm-success',\n  radius: '--jdcm-radius',\n  spacing: '--jdcm-spacing',\n  fontFamily: '--jdcm-font',\n};\n\nfunction themeToStyle(theme: ThemeOverrides): React.CSSProperties {\n  const style: React.CSSProperties = {};\n  for (const [key, value] of Object.entries(theme)) {\n    const cssVar = THEME_KEYS[key as keyof ThemeOverrides];\n    if (cssVar && value != null) style[cssVar as keyof React.CSSProperties] = value;\n  }\n  return style;\n}\n\nexport function ContactForm({\n  endpoint,\n  fields = DEFAULT_FIELDS,\n  labels = {},\n  placeholders = {},\n  theme,\n  successMessage = \"Thanks! I'll be in touch.\",\n  onSuccess,\n  onError,\n  className,\n  submitLabel = 'Send message',\n}: ContactFormProps) {\n  const {\n    values,\n    errors,\n    submitState,\n    errorMessage,\n    setValue,\n    setErrorMessage,\n    submit,\n  } = useContactForm({ endpoint, fields, onSuccess, onError });\n\n  const rootClassName = ['jdcm-root', className].filter(Boolean).join(' ');\n  const rootStyle = theme ? themeToStyle(theme) : undefined;\n\n  return (\n    <div\n      className={rootClassName}\n      style={rootStyle}\n      {...(theme ? { 'data-theme-set': 'true' } : {})}\n      role=\"region\"\n      aria-label=\"Contact form\"\n    >\n      {submitState === 'success' && (\n        <p className=\"jdcm-success-msg\" role=\"status\">\n          {successMessage}\n        </p>\n      )}\n\n      {submitState === 'error' && errorMessage && (\n        <div className=\"jdcm-error-banner\" role=\"alert\">\n          <span>{errorMessage}</span>\n          <button\n            type=\"button\"\n            onClick={() => setErrorMessage(null)}\n            aria-label=\"Dismiss error\"\n          >\n            Dismiss\n          </button>\n        </div>\n      )}\n\n      {submitState !== 'success' && (\n        <form className=\"jdcm-form\" onSubmit={submit} noValidate>\n          {/* Honeypot */}\n          <div className=\"jdcm-field jdcm-hp\" aria-hidden=\"true\">\n            <label htmlFor=\"jdcm-website\">Website</label>\n            <input\n              id=\"jdcm-website\"\n              type=\"text\"\n              name={HONEPOT_NAME}\n              tabIndex={-1}\n              autoComplete=\"off\"\n              value={values.website ?? ''}\n              onChange={(e) => setValue(HONEPOT_NAME, e.target.value)}\n            />\n          </div>\n\n          {fields.includes('name') && (\n            <div className=\"jdcm-field\">\n              <label htmlFor=\"jdcm-name\">\n                {labels.name ?? DEFAULT_LABELS.name}\n              </label>\n              <input\n                id=\"jdcm-name\"\n                type=\"text\"\n                name=\"name\"\n                autoComplete=\"name\"\n                placeholder={placeholders.name}\n                value={values.name ?? ''}\n                onChange={(e) => setValue('name', e.target.value)}\n                aria-invalid={Boolean(errors.name)}\n                aria-describedby={errors.name ? 'jdcm-name-err' : undefined}\n              />\n              {errors.name && (\n                <span id=\"jdcm-name-err\" className=\"jdcm-error-msg\">\n                  {errors.name}\n                </span>\n              )}\n            </div>\n          )}\n\n          {fields.includes('email') && (\n            <div className=\"jdcm-field\">\n              <label htmlFor=\"jdcm-email\">\n                {labels.email ?? DEFAULT_LABELS.email}\n              </label>\n              <input\n                id=\"jdcm-email\"\n                type=\"email\"\n                name=\"email\"\n                required\n                autoComplete=\"email\"\n                placeholder={placeholders.email}\n                value={values.email ?? ''}\n                onChange={(e) => setValue('email', e.target.value)}\n                aria-invalid={Boolean(errors.email)}\n                aria-describedby={errors.email ? 'jdcm-email-err' : undefined}\n              />\n              {errors.email && (\n                <span id=\"jdcm-email-err\" className=\"jdcm-error-msg\">\n                  {errors.email}\n                </span>\n              )}\n            </div>\n          )}\n\n          {fields.includes('phone') && (\n            <div className=\"jdcm-field\">\n              <label htmlFor=\"jdcm-phone\">\n                {labels.phone ?? DEFAULT_LABELS.phone}\n              </label>\n              <input\n                id=\"jdcm-phone\"\n                type=\"tel\"\n                name=\"phone\"\n                autoComplete=\"tel\"\n                placeholder={placeholders.phone}\n                value={values.phone ?? ''}\n                onChange={(e) => setValue('phone', e.target.value)}\n                aria-invalid={Boolean(errors.phone)}\n                aria-describedby={errors.phone ? 'jdcm-phone-err' : undefined}\n              />\n              {errors.phone && (\n                <span id=\"jdcm-phone-err\" className=\"jdcm-error-msg\">\n                  {errors.phone}\n                </span>\n              )}\n            </div>\n          )}\n\n          {fields.includes('subject') && (\n            <div className=\"jdcm-field\">\n              <label htmlFor=\"jdcm-subject\">\n                {labels.subject ?? DEFAULT_LABELS.subject}\n              </label>\n              <input\n                id=\"jdcm-subject\"\n                type=\"text\"\n                name=\"subject\"\n                autoComplete=\"off\"\n                placeholder={placeholders.subject}\n                value={values.subject ?? ''}\n                onChange={(e) => setValue('subject', e.target.value)}\n                aria-invalid={Boolean(errors.subject)}\n                aria-describedby={errors.subject ? 'jdcm-subject-err' : undefined}\n              />\n              {errors.subject && (\n                <span id=\"jdcm-subject-err\" className=\"jdcm-error-msg\">\n                  {errors.subject}\n                </span>\n              )}\n            </div>\n          )}\n\n          {fields.includes('message') && (\n            <div className=\"jdcm-field\">\n              <label htmlFor=\"jdcm-message\">\n                {labels.message ?? DEFAULT_LABELS.message}\n              </label>\n              <textarea\n                id=\"jdcm-message\"\n                name=\"message\"\n                required\n                placeholder={placeholders.message}\n                value={values.message ?? ''}\n                onChange={(e) => setValue('message', e.target.value)}\n                aria-invalid={Boolean(errors.message)}\n                aria-describedby={errors.message ? 'jdcm-message-err' : undefined}\n              />\n              {errors.message && (\n                <span id=\"jdcm-message-err\" className=\"jdcm-error-msg\">\n                  {errors.message}\n                </span>\n              )}\n            </div>\n          )}\n\n          <button\n            type=\"submit\"\n            className=\"jdcm-submit\"\n            disabled={submitState === 'loading'}\n            aria-busy={submitState === 'loading'}\n          >\n            {submitState === 'loading' && (\n              <span className=\"jdcm-spinner\" aria-hidden=\"true\" />\n            )}\n            {submitState === 'loading' ? 'Sending…' : submitLabel}\n          </button>\n        </form>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAAA,SAAS,UAAU,mBAAmB;AAQtC,IAAM,iBAAmC,CAAC,QAAQ,SAAS,WAAW,SAAS;AAE/E,IAAM,iBAAgD;AAAA,EACpD,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AACX;AAEA,IAAM,eAAe;AAErB,SAAS,aAAa,OAAwB;AAC5C,SAAO,6BAA6B,KAAK,MAAM,KAAK,CAAC;AACvD;AAEA,SAAS,aAAa,OAAwB;AAC5C,SAAO,sBAAsB,KAAK,MAAM,KAAK,CAAC;AAChD;AAEA,SAAS,eACP,SACA,QACwC;AACxC,QAAM,SAAiD,CAAC;AAExD,MAAI,OAAO,SAAS,MAAM,KAAK,QAAQ,SAAS,QAAW;AACzD,UAAM,IAAI,OAAO,QAAQ,IAAI,EAAE,KAAK;AACpC,QAAI,CAAC,EAAG,QAAO,OAAO;AAAA,EACxB;AAEA,MAAI,OAAO,SAAS,OAAO,GAAG;AAC5B,UAAM,IAAI,OAAO,QAAQ,SAAS,EAAE,EAAE,KAAK;AAC3C,QAAI,CAAC,EAAG,QAAO,QAAQ;AAAA,aACd,CAAC,aAAa,CAAC,EAAG,QAAO,QAAQ;AAAA,EAC5C;AAEA,MAAI,OAAO,SAAS,OAAO,KAAK,QAAQ,OAAO;AAC7C,UAAM,IAAI,OAAO,QAAQ,KAAK,EAAE,KAAK;AACrC,QAAI,KAAK,CAAC,aAAa,CAAC,EAAG,QAAO,QAAQ;AAAA,EAC5C;AAEA,MAAI,OAAO,SAAS,SAAS,KAAK,QAAQ,YAAY,QAAW;AAC/D,UAAM,IAAI,OAAO,QAAQ,OAAO,EAAE,KAAK;AACvC,QAAI,CAAC,EAAG,QAAO,UAAU;AAAA,EAC3B;AAEA,MAAI,OAAO,SAAS,SAAS,GAAG;AAC9B,UAAM,IAAI,OAAO,QAAQ,WAAW,EAAE,EAAE,KAAK;AAC7C,QAAI,CAAC,EAAG,QAAO,UAAU;AAAA,EAC3B;AAEA,SAAO;AACT;AAqBO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AACF,GAAgD;AAC9C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAsC,CAAC,CAAC;AACpE,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAiD,CAAC,CAAC;AAC/E,QAAM,CAAC,aAAa,cAAc,IAAI,SAAsB,MAAM;AAClE,QAAM,CAAC,cAAc,eAAe,IAAI,SAAwB,IAAI;AAEpE,QAAM,WAAW;AAAA,IACf,CAAC,OAA4C,UAAkB;AAC7D,gBAAU,CAAC,UAAU,EAAE,GAAG,MAAM,CAAC,KAAK,GAAG,MAAM,EAAE;AACjD,UAAI,OAAO,KAAsB,GAAG;AAClC,kBAAU,CAAC,SAAS;AAClB,gBAAM,OAAO,EAAE,GAAG,KAAK;AACvB,iBAAO,KAAK,KAAsB;AAClC,iBAAO;AAAA,QACT,CAAC;AAAA,MACH;AAAA,IACF;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,QAAM,WAAW,YAAY,MAAe;AAC1C,UAAM,UAAuC;AAAA,MAC3C,OAAO,OAAO,SAAS;AAAA,MACvB,SAAS,OAAO,WAAW;AAAA,MAC3B,MAAM,OAAO;AAAA,MACb,OAAO,OAAO;AAAA,MACd,SAAS,OAAO;AAAA,IAClB;AACA,UAAM,aAAa,eAAe,SAAS,MAAM;AACjD,cAAU,UAAU;AACpB,WAAO,OAAO,KAAK,UAAU,EAAE,WAAW;AAAA,EAC5C,GAAG,CAAC,QAAQ,MAAM,CAAC;AAEnB,QAAM,QAAQ,YAAY,MAAM;AAC9B,cAAU,CAAC,CAAC;AACZ,cAAU,CAAC,CAAC;AACZ,mBAAe,MAAM;AACrB,oBAAgB,IAAI;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,QAAM,SAAS;AAAA,IACb,OAAO,MAAuB;AAC5B,QAAE,eAAe;AAEjB,YAAM,UAAuC;AAAA,QAC3C,QAAQ,OAAO,SAAS,IAAI,KAAK;AAAA,QACjC,UAAU,OAAO,WAAW,IAAI,KAAK;AAAA,QACrC,MAAM,OAAO,SAAS,MAAM,KAAK,OAAO,QAAQ,IAAI,KAAK,IAAI;AAAA,QAC7D,OAAO,OAAO,SAAS,OAAO,KAAK,OAAO,SAAS,IAAI,KAAK,KAAK,SAAY;AAAA,QAC7E,SAAS,OAAO,SAAS,SAAS,KAAK,OAAO,WAAW,IAAI,KAAK,IAAI;AAAA,QACtE,UAAU,OAAO,WAAW,IAAI,KAAK;AAAA,MACvC;AAEA,UAAI,CAAC,SAAS,EAAG;AAEjB,UAAI,QAAQ,SAAS;AACnB,kBAAU,CAAC,CAAC;AACZ,kBAAU,CAAC,CAAC;AACZ,uBAAe,SAAS;AACxB,wBAAgB,IAAI;AACpB,oBAAY,OAA6B;AACzC;AAAA,MACF;AAEA,qBAAe,SAAS;AACxB,sBAAgB,IAAI;AAEpB,UAAI;AACF,cAAM,MAAM,MAAM,MAAM,UAAU;AAAA,UAChC,QAAQ;AAAA,UACR,SAAS,EAAE,gBAAgB,mBAAmB;AAAA,UAC9C,MAAM,KAAK,UAAU,OAAO;AAAA,QAC9B,CAAC;AAED,cAAM,OAAO,MAAM,IAAI,KAAK,EAAE,MAAM,OAAO,CAAC,EAAE;AAE9C,YAAI,CAAC,IAAI,IAAI;AACX,gBAAM,MACJ,OAAO,MAAM,YAAY,WACrB,KAAK,UACL,IAAI,cAAc;AACxB,gBAAM,IAAI,MAAM,GAAG;AAAA,QACrB;AAEA,kBAAU,CAAC,CAAC;AACZ,kBAAU,CAAC,CAAC;AACZ,uBAAe,SAAS;AACxB,wBAAgB,IAAI;AACpB,oBAAY,OAA6B;AAAA,MAC3C,SAAS,KAAK;AACZ,cAAM,QAAQ,eAAe,QAAQ,MAAM,IAAI,MAAM,mBAAmB;AACxE,uBAAe,OAAO;AACtB,wBAAgB,MAAM,OAAO;AAC7B,kBAAU,KAAK;AAAA,MACjB;AAAA,IACF;AAAA,IACA,CAAC,UAAU,QAAQ,QAAQ,UAAU,WAAW,SAAS,KAAK;AAAA,EAChE;AACA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;;;ACnIQ,cAMA,YANA;AA5DR,IAAMA,kBAAkC,CAAC,QAAQ,SAAS,WAAW,SAAS;AAE9E,IAAM,aAAmD;AAAA,EACvD,SAAS;AAAA,EACT,cAAc;AAAA,EACd,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,YAAY;AACd;AAEA,SAAS,aAAa,OAA4C;AAChE,QAAM,QAA6B,CAAC;AACpC,aAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,KAAK,GAAG;AAChD,UAAM,SAAS,WAAW,GAA2B;AACrD,QAAI,UAAU,SAAS,KAAM,OAAM,MAAmC,IAAI;AAAA,EAC5E;AACA,SAAO;AACT;AAEO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,SAASA;AAAA,EACT,SAAS,CAAC;AAAA,EACV,eAAe,CAAC;AAAA,EAChB;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAChB,GAAqB;AACnB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,eAAe,EAAE,UAAU,QAAQ,WAAW,QAAQ,CAAC;AAE3D,QAAM,gBAAgB,CAAC,aAAa,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACvE,QAAM,YAAY,QAAQ,aAAa,KAAK,IAAI;AAEhD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,OAAO;AAAA,MACN,GAAI,QAAQ,EAAE,kBAAkB,OAAO,IAAI,CAAC;AAAA,MAC7C,MAAK;AAAA,MACL,cAAW;AAAA,MAEV;AAAA,wBAAgB,aACf,oBAAC,OAAE,WAAU,oBAAmB,MAAK,UAClC,0BACH;AAAA,QAGD,gBAAgB,WAAW,gBAC1B,qBAAC,SAAI,WAAU,qBAAoB,MAAK,SACtC;AAAA,8BAAC,UAAM,wBAAa;AAAA,UACpB;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS,MAAM,gBAAgB,IAAI;AAAA,cACnC,cAAW;AAAA,cACZ;AAAA;AAAA,UAED;AAAA,WACF;AAAA,QAGD,gBAAgB,aACf,qBAAC,UAAK,WAAU,aAAY,UAAU,QAAQ,YAAU,MAEtD;AAAA,+BAAC,SAAI,WAAU,sBAAqB,eAAY,QAC9C;AAAA,gCAAC,WAAM,SAAQ,gBAAe,qBAAO;AAAA,YACrC;AAAA,cAAC;AAAA;AAAA,gBACC,IAAG;AAAA,gBACH,MAAK;AAAA,gBACL,MAAM;AAAA,gBACN,UAAU;AAAA,gBACV,cAAa;AAAA,gBACb,OAAO,OAAO,WAAW;AAAA,gBACzB,UAAU,CAAC,MAAM,SAAS,cAAc,EAAE,OAAO,KAAK;AAAA;AAAA,YACxD;AAAA,aACF;AAAA,UAEC,OAAO,SAAS,MAAM,KACrB,qBAAC,SAAI,WAAU,cACb;AAAA,gCAAC,WAAM,SAAQ,aACZ,iBAAO,QAAQ,eAAe,MACjC;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,IAAG;AAAA,gBACH,MAAK;AAAA,gBACL,MAAK;AAAA,gBACL,cAAa;AAAA,gBACb,aAAa,aAAa;AAAA,gBAC1B,OAAO,OAAO,QAAQ;AAAA,gBACtB,UAAU,CAAC,MAAM,SAAS,QAAQ,EAAE,OAAO,KAAK;AAAA,gBAChD,gBAAc,QAAQ,OAAO,IAAI;AAAA,gBACjC,oBAAkB,OAAO,OAAO,kBAAkB;AAAA;AAAA,YACpD;AAAA,YACC,OAAO,QACN,oBAAC,UAAK,IAAG,iBAAgB,WAAU,kBAChC,iBAAO,MACV;AAAA,aAEJ;AAAA,UAGD,OAAO,SAAS,OAAO,KACtB,qBAAC,SAAI,WAAU,cACb;AAAA,gCAAC,WAAM,SAAQ,cACZ,iBAAO,SAAS,eAAe,OAClC;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,IAAG;AAAA,gBACH,MAAK;AAAA,gBACL,MAAK;AAAA,gBACL,UAAQ;AAAA,gBACR,cAAa;AAAA,gBACb,aAAa,aAAa;AAAA,gBAC1B,OAAO,OAAO,SAAS;AAAA,gBACvB,UAAU,CAAC,MAAM,SAAS,SAAS,EAAE,OAAO,KAAK;AAAA,gBACjD,gBAAc,QAAQ,OAAO,KAAK;AAAA,gBAClC,oBAAkB,OAAO,QAAQ,mBAAmB;AAAA;AAAA,YACtD;AAAA,YACC,OAAO,SACN,oBAAC,UAAK,IAAG,kBAAiB,WAAU,kBACjC,iBAAO,OACV;AAAA,aAEJ;AAAA,UAGD,OAAO,SAAS,OAAO,KACtB,qBAAC,SAAI,WAAU,cACb;AAAA,gCAAC,WAAM,SAAQ,cACZ,iBAAO,SAAS,eAAe,OAClC;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,IAAG;AAAA,gBACH,MAAK;AAAA,gBACL,MAAK;AAAA,gBACL,cAAa;AAAA,gBACb,aAAa,aAAa;AAAA,gBAC1B,OAAO,OAAO,SAAS;AAAA,gBACvB,UAAU,CAAC,MAAM,SAAS,SAAS,EAAE,OAAO,KAAK;AAAA,gBACjD,gBAAc,QAAQ,OAAO,KAAK;AAAA,gBAClC,oBAAkB,OAAO,QAAQ,mBAAmB;AAAA;AAAA,YACtD;AAAA,YACC,OAAO,SACN,oBAAC,UAAK,IAAG,kBAAiB,WAAU,kBACjC,iBAAO,OACV;AAAA,aAEJ;AAAA,UAGD,OAAO,SAAS,SAAS,KACxB,qBAAC,SAAI,WAAU,cACb;AAAA,gCAAC,WAAM,SAAQ,gBACZ,iBAAO,WAAW,eAAe,SACpC;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,IAAG;AAAA,gBACH,MAAK;AAAA,gBACL,MAAK;AAAA,gBACL,cAAa;AAAA,gBACb,aAAa,aAAa;AAAA,gBAC1B,OAAO,OAAO,WAAW;AAAA,gBACzB,UAAU,CAAC,MAAM,SAAS,WAAW,EAAE,OAAO,KAAK;AAAA,gBACnD,gBAAc,QAAQ,OAAO,OAAO;AAAA,gBACpC,oBAAkB,OAAO,UAAU,qBAAqB;AAAA;AAAA,YAC1D;AAAA,YACC,OAAO,WACN,oBAAC,UAAK,IAAG,oBAAmB,WAAU,kBACnC,iBAAO,SACV;AAAA,aAEJ;AAAA,UAGD,OAAO,SAAS,SAAS,KACxB,qBAAC,SAAI,WAAU,cACb;AAAA,gCAAC,WAAM,SAAQ,gBACZ,iBAAO,WAAW,eAAe,SACpC;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,IAAG;AAAA,gBACH,MAAK;AAAA,gBACL,UAAQ;AAAA,gBACR,aAAa,aAAa;AAAA,gBAC1B,OAAO,OAAO,WAAW;AAAA,gBACzB,UAAU,CAAC,MAAM,SAAS,WAAW,EAAE,OAAO,KAAK;AAAA,gBACnD,gBAAc,QAAQ,OAAO,OAAO;AAAA,gBACpC,oBAAkB,OAAO,UAAU,qBAAqB;AAAA;AAAA,YAC1D;AAAA,YACC,OAAO,WACN,oBAAC,UAAK,IAAG,oBAAmB,WAAU,kBACnC,iBAAO,SACV;AAAA,aAEJ;AAAA,UAGF;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAU;AAAA,cACV,UAAU,gBAAgB;AAAA,cAC1B,aAAW,gBAAgB;AAAA,cAE1B;AAAA,gCAAgB,aACf,oBAAC,UAAK,WAAU,gBAAe,eAAY,QAAO;AAAA,gBAEnD,gBAAgB,YAAY,kBAAa;AAAA;AAAA;AAAA,UAC5C;AAAA,WACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":["DEFAULT_FIELDS"]}