@sonordev/site-kit 4.0.1 → 4.0.2

package/dist/forms/index.mjs

@@ -1,17 +1,20 @@
 'use client';
 export { FormCelebration } from '../chunk-54CARHDR.mjs';
-import { countStageViews, countStageQuestions, DelightStyles, FormMomentum, FormField } from '../chunk-LYDTOFXJ.mjs';
-export { DatePicker, FormField as FormFieldComponent } from '../chunk-LYDTOFXJ.mjs';
-import { useFormTracking, submitForm, DEFAULT_FORM_SUCCESS_MESSAGE, useForm, getApiConfig } from '../chunk-CTZHLX2B.mjs';
-export { DEFAULT_FORM_SUCCESS_MESSAGE, useForm, useFormTracking } from '../chunk-CTZHLX2B.mjs';
-import { DEFAULT_HONEYPOT_FIELD } from '../chunk-TMVKRQGJ.mjs';
+export { FormClient, ManagedForm } from '../chunk-NCWVR4BU.mjs';
+import '../chunk-MZY3MEUO.mjs';
+export { DatePicker } from '../chunk-MU3D5IO7.mjs';
+export { FormEnhancer } from '../chunk-UQPUFRXF.mjs';
+import '../chunk-ZVBLXXNJ.mjs';
+import '../chunk-R4PCXP3F.mjs';
+export { FormField as FormFieldComponent } from '../chunk-LB7LHVWI.mjs';
+export { useForm, useFormTracking } from '../chunk-JFVEKSZT.mjs';
+export { DEFAULT_FORM_SUCCESS_MESSAGE } from '../chunk-AJNT5GCU.mjs';
+import '../chunk-TMVKRQGJ.mjs';
 import '../chunk-6EDVCUAG.mjs';
-import { sonorFetch } from '../chunk-5GPFPMDQ.mjs';
-import '../chunk-JGTIVQIN.mjs';
-import '../chunk-6GFEJH4F.mjs';
+import { sonorFetch } from '../chunk-FGN27J35.mjs';
+import '../chunk-KNYK2VLX.mjs';
+import '../chunk-QTN3F7D7.mjs';
 import '../chunk-BEXTDHO4.mjs';
-import { useState, useRef, useMemo, useEffect, useCallback } from 'react';
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
 // src/forms/formsApi.ts
 var config = null;
@@ -330,546 +333,7 @@ async function initializeForms(forms) {
     console.error("[Site-Kit] Failed to sync forms:", error);
   }
 }
-function HoneypotField({ name, value, onChange }) {
-  return /* @__PURE__ */ jsx(
-    "input",
-    {
-      type: "text",
-      name,
-      tabIndex: -1,
-      autoComplete: "new-password",
-      "aria-hidden": "true",
-      inert: true,
-      "data-sk-honeypot": "",
-      "data-1p-ignore": "",
-      "data-lpignore": "true",
-      "data-form-type": "other",
-      "data-bwignore": "",
-      style: {
-        position: "absolute",
-        left: -9999,
-        width: 1,
-        height: 1,
-        overflow: "hidden",
-        opacity: 0,
-        visibility: "hidden",
-        pointerEvents: "none"
-      },
-      value,
-      onChange: (e) => {
-        onChange(e.target.value);
-        if (e.target.value) {
-          console.warn("[Forms] Honeypot triggered");
-        }
-      }
-    }
-  );
-}
-function nativeEligible(config2) {
-  return !!config2?.native_token && !config2.is_multi_step;
-}
-function nativeFormProps(config2) {
-  if (!nativeEligible(config2)) return {};
-  const { apiUrl } = getApiConfig();
-  return { action: `${apiUrl}/api/public/forms/submit-native`, method: "post" };
-}
-function NativeFallbackFields({ config: config2, returnTo }) {
-  if (!nativeEligible(config2)) return null;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("input", { type: "hidden", name: "_sk_token", value: config2.native_token, readOnly: true }),
-    returnTo ? /* @__PURE__ */ jsx("input", { type: "hidden", name: "_sk_return", value: returnTo, readOnly: true }) : null
-  ] });
-}
-function FormClient({
-  config: config2,
-  className,
-  onSuccess,
-  onError,
-  customRender,
-  experience,
-  nativeReturnTo
-}) {
-  const [values, setValues] = useState(() => {
-    const defaults = {};
-    for (const field2 of config2.fields || []) {
-      if (field2.default_value !== void 0 && field2.default_value !== null) {
-        defaults[field2.slug] = field2.default_value;
-      }
-    }
-    return defaults;
-  });
-  const [errors, setErrors] = useState({});
-  const [step, setStep] = useState(1);
-  const [stepDirection, setStepDirection] = useState("forward");
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [isComplete, setIsComplete] = useState(false);
-  const [submitError, setSubmitError] = useState(null);
-  const [honeypotValue, setHoneypotValue] = useState("");
-  const [touched, setTouched] = useState({});
-  const honeypotFieldName = config2.honeypot_field || DEFAULT_HONEYPOT_FIELD;
-  const formLoadedAt = useRef(Date.now());
-  const isSubmittingRef = useRef(false);
-  const stageBeatCount = useMemo(() => countStageViews(config2), [config2]);
-  const questionCount = useMemo(() => countStageQuestions(config2), [config2]);
-  const requested = experience ?? (config2.layout === "stage" ? "stage" : config2.layout === "classic" ? "classic" : "spotlight");
-  const resolvedExperience = !customRender && questionCount > 0 && requested !== "classic" ? requested : "classic";
-  const { trackStepChange, trackComplete } = useFormTracking({
-    formId: config2.id,
-    // Alternate experiences report their unit (beat / field index) as the
-    // step — form_analytics becomes a drop-off funnel with zero API changes.
-    totalSteps: resolvedExperience === "stage" ? stageBeatCount : resolvedExperience === "spotlight" ? questionCount : config2.total_steps
-  });
-  const [Celebration, setCelebration] = useState(null);
-  useEffect(() => {
-    if (!isSubmitting && !isComplete) return;
-    let cancelled = false;
-    import('../FormCelebration-7CBANVNS.mjs').then((m) => {
-      if (!cancelled) setCelebration(() => m.FormCelebration);
-    }).catch(() => {
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [isSubmitting, isComplete]);
-  const [Experience, setExperience] = useState(null);
-  useEffect(() => {
-    if (resolvedExperience === "classic") {
-      setExperience(null);
-      return;
-    }
-    let cancelled = false;
-    const load = resolvedExperience === "stage" ? import('../FormStage-ZLZD5EW4.mjs').then((m) => m.FormStage) : import('../FormSpotlight-6MXGX6TU.mjs').then((m) => m.FormSpotlight);
-    load.then((Component) => {
-      if (!cancelled) setExperience(() => Component);
-    }).catch((err) => {
-      console.error("[Forms] Experience failed to load; using classic form:", err);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [resolvedExperience]);
-  const currentFields = useMemo(() => {
-    if (!config2.is_multi_step) {
-      return config2.fields || [];
-    }
-    const currentStepConfig2 = config2.steps?.find((s) => s.step_number === step);
-    if (!currentStepConfig2) return config2.fields || [];
-    return (config2.fields || []).filter((f) => f.step_id === currentStepConfig2.id);
-  }, [config2, step]);
-  const isFieldVisible = useCallback((field2) => {
-    if (!field2.conditional?.show_when) return true;
-    const { field: condField, operator, value } = field2.conditional.show_when;
-    const fieldValue = values[condField];
-    switch (operator) {
-      case "equals":
-        return fieldValue === value;
-      case "not_equals":
-        return fieldValue !== value;
-      case "contains":
-        return String(fieldValue).includes(String(value));
-      case "not_contains":
-        return !String(fieldValue).includes(String(value));
-      case "is_empty":
-        return !fieldValue || fieldValue === "";
-      case "not_empty":
-        return !!fieldValue && fieldValue !== "";
-      case "greater_than":
-        return Number(fieldValue) > Number(value);
-      case "less_than":
-        return Number(fieldValue) < Number(value);
-      default:
-        return true;
-    }
-  }, [values]);
-  const validateField = useCallback((field2) => {
-    if (!isFieldVisible(field2)) return null;
-    if (["heading", "section_header", "paragraph", "hidden"].includes(field2.field_type)) return null;
-    const value = values[field2.slug];
-    const rules = field2.validation || {};
-    if (field2.is_required && (!value || value === "")) {
-      return rules.custom_error || `${field2.label} is required`;
-    }
-    if (!value) return null;
-    const strValue = String(value);
-    if (rules.min_length && strValue.length < rules.min_length) {
-      return `${field2.label} must be at least ${rules.min_length} characters`;
-    }
-    if (rules.max_length && strValue.length > rules.max_length) {
-      return `${field2.label} must be no more than ${rules.max_length} characters`;
-    }
-    if (rules.min !== void 0 && Number(value) < rules.min) {
-      return `${field2.label} must be at least ${rules.min}`;
-    }
-    if (rules.max !== void 0 && Number(value) > rules.max) {
-      return `${field2.label} must be no more than ${rules.max}`;
-    }
-    if (rules.pattern) {
-      try {
-        if (!new RegExp(rules.pattern).test(strValue)) {
-          return rules.custom_error || `${field2.label} is invalid`;
-        }
-      } catch {
-      }
-    }
-    if (field2.field_type === "email" && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(strValue)) {
-      return "Please enter a valid email address";
-    }
-    if (field2.field_type === "phone" && !/^[\d\s\-\+\(\)]+$/.test(strValue)) {
-      return "Please enter a valid phone number";
-    }
-    return null;
-  }, [values, isFieldVisible]);
-  const fieldIsComplete = useCallback((field2) => {
-    if (!isFieldVisible(field2)) return false;
-    if (["heading", "section_header", "paragraph", "hidden"].includes(field2.field_type)) return false;
-    const value = values[field2.slug];
-    if (value === void 0 || value === null || value === "") return false;
-    return validateField(field2) === null;
-  }, [values, isFieldVisible, validateField]);
-  const momentum = useMemo(() => {
-    const measurable = (config2.fields || []).filter(
-      (f) => f.is_required && isFieldVisible(f) && !["heading", "section_header", "paragraph", "hidden"].includes(f.field_type)
-    );
-    return { done: measurable.filter(fieldIsComplete).length, total: measurable.length };
-  }, [config2, isFieldVisible, fieldIsComplete]);
-  const validateStep = useCallback(() => {
-    const newErrors = {};
-    for (const field2 of currentFields) {
-      const error = validateField(field2);
-      if (error) {
-        newErrors[field2.slug] = error;
-      }
-    }
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  }, [currentFields, validateField]);
-  const validateAll = useCallback(() => {
-    const allFields = config2.fields || [];
-    const newErrors = {};
-    for (const field2 of allFields) {
-      const error = validateField(field2);
-      if (error) newErrors[field2.slug] = error;
-    }
-    setErrors(newErrors);
-    if (Object.keys(newErrors).length === 0) return { ok: true, firstErrorStep: null };
-    let firstErrorStep = null;
-    if (config2.is_multi_step && config2.steps) {
-      const ordered = [...config2.steps].sort((a, b) => a.step_number - b.step_number);
-      for (const s of ordered) {
-        if (allFields.some((f) => f.step_id === s.id && newErrors[f.slug])) {
-          firstErrorStep = s.step_number;
-          break;
-        }
-      }
-    }
-    return { ok: false, firstErrorStep };
-  }, [config2, validateField]);
-  const buildVisibleValues = useCallback(() => {
-    const out = {};
-    for (const field2 of config2.fields || []) {
-      if (!isFieldVisible(field2)) continue;
-      if (field2.slug in values) out[field2.slug] = values[field2.slug];
-    }
-    return out;
-  }, [config2, values, isFieldVisible]);
-  const setFieldValue = useCallback((key, value) => {
-    setTouched((prev) => prev[key] ? prev : { ...prev, [key]: true });
-    setValues((prev) => ({ ...prev, [key]: value }));
-    if (errors[key]) {
-      setErrors((prev) => {
-        const next = { ...prev };
-        delete next[key];
-        return next;
-      });
-    }
-  }, [errors]);
-  const nextStep = useCallback(() => {
-    if (!validateStep()) return false;
-    if (step < config2.total_steps) {
-      const newStep = step + 1;
-      setStepDirection("forward");
-      setStep(newStep);
-      trackStepChange(newStep);
-      return true;
-    }
-    return false;
-  }, [step, config2.total_steps, validateStep, trackStepChange]);
-  const prevStep = useCallback(() => {
-    if (step > 1) {
-      const newStep = step - 1;
-      setStepDirection("back");
-      setStep(newStep);
-      trackStepChange(newStep);
-    }
-  }, [step, trackStepChange]);
-  const goToStep = useCallback((targetStep) => {
-    if (targetStep >= 1 && targetStep <= config2.total_steps) {
-      setStepDirection(targetStep < step ? "back" : "forward");
-      setStep(targetStep);
-      trackStepChange(targetStep);
-    }
-  }, [step, config2.total_steps, trackStepChange]);
-  const submit = useCallback(async () => {
-    if (isSubmittingRef.current) return;
-    const { ok, firstErrorStep } = validateAll();
-    if (!ok) {
-      if (firstErrorStep != null) {
-        setStepDirection("back");
-        setStep(firstErrorStep);
-      }
-      return;
-    }
-    isSubmittingRef.current = true;
-    setIsSubmitting(true);
-    setSubmitError(null);
-    try {
-      const data = await submitForm({
-        config: config2,
-        values: buildVisibleValues(),
-        honeypotValue: config2.honeypot_enabled ? honeypotValue : "",
-        formLoadedAt: formLoadedAt.current
-      });
-      trackComplete();
-      setIsComplete(true);
-      onSuccess?.(data);
-      if (config2.redirect_url) {
-        window.location.href = config2.redirect_url;
-      }
-    } catch (error) {
-      console.error("[Forms] Submission error:", error);
-      setSubmitError("Something went wrong sending your submission. Please try again.");
-      onError?.(error);
-    } finally {
-      isSubmittingRef.current = false;
-      setIsSubmitting(false);
-    }
-  }, [config2, honeypotValue, validateAll, buildVisibleValues, trackComplete, onSuccess, onError]);
-  const progress = useMemo(() => {
-    return Math.round(step / config2.total_steps * 100);
-  }, [step, config2.total_steps]);
-  const currentStepConfig = useMemo(
-    () => config2.steps?.find((s) => s.step_number === step),
-    [config2.steps, step]
-  );
-  const stepPanelRef = useRef(null);
-  const hasNavigatedRef = useRef(false);
-  useEffect(() => {
-    if (!config2.is_multi_step) return;
-    if (!hasNavigatedRef.current) {
-      hasNavigatedRef.current = true;
-      return;
-    }
-    stepPanelRef.current?.focus();
-  }, [step, config2.is_multi_step]);
-  const renderProps = {
-    config: config2,
-    fields: currentFields,
-    step,
-    totalSteps: config2.total_steps,
-    values,
-    errors,
-    isSubmitting,
-    progress,
-    nextStep,
-    prevStep,
-    goToStep,
-    submit,
-    setFieldValue,
-    isFieldVisible
-  };
-  if (isComplete) {
-    const raw = config2.success_message;
-    const message = typeof raw === "string" && raw.trim().length > 0 ? raw.trim() : DEFAULT_FORM_SUCCESS_MESSAGE;
-    if (Celebration) return /* @__PURE__ */ jsx(Celebration, { message, className });
-    return /* @__PURE__ */ jsx("div", { className, "data-sk-part": "celebration-fallback", role: "status", children: /* @__PURE__ */ jsx("p", { children: message }) });
-  }
-  if (customRender) {
-    return /* @__PURE__ */ jsx(Fragment, { children: customRender(renderProps) });
-  }
-  if (resolvedExperience !== "classic" && Experience) {
-    const bundle = {
-      config: config2,
-      values,
-      errors,
-      touched,
-      isSubmitting,
-      submitError,
-      momentum,
-      className,
-      setFieldValue,
-      validateField,
-      isFieldVisible,
-      fieldIsComplete,
-      applyFieldError: (slug, message) => setErrors((prev) => ({ ...prev, [slug]: message })),
-      submit,
-      trackStepChange,
-      honeypot: config2.honeypot_enabled ? /* @__PURE__ */ jsx(
-        HoneypotField,
-        {
-          name: honeypotFieldName,
-          value: honeypotValue,
-          onChange: setHoneypotValue
-        }
-      ) : null
-    };
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(DelightStyles, {}),
-      /* @__PURE__ */ jsx(Experience, { ...bundle })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs(
-    "form",
-    {
-      "data-sk-state": isSubmitting ? "submitting" : "idle",
-      "data-sk-ready": momentum.total > 0 && momentum.done >= momentum.total && step >= config2.total_steps ? "true" : void 0,
-      className: `sk-form ${className || ""}`,
-      ...nativeFormProps(config2),
-      onSubmit: (e) => {
-        e.preventDefault();
-        if (step < config2.total_steps) {
-          nextStep();
-        } else {
-          submit();
-        }
-      },
-      children: [
-        /* @__PURE__ */ jsx(DelightStyles, {}),
-        /* @__PURE__ */ jsx(FormMomentum, { done: momentum.done, total: momentum.total }),
-        config2.is_multi_step && /* @__PURE__ */ jsxs("div", { className: "sk-form__progress", children: [
-          /* @__PURE__ */ jsxs("div", { className: "sk-form__progress-header", children: [
-            /* @__PURE__ */ jsxs("span", { className: "sk-form__progress-step", children: [
-              "Step ",
-              step,
-              " of ",
-              config2.total_steps
-            ] }),
-            config2.show_progress && /* @__PURE__ */ jsxs("span", { className: "sk-form__progress-percent", children: [
-              progress,
-              "%"
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "sk-form__progress-track",
-              role: "progressbar",
-              "aria-valuemin": 1,
-              "aria-valuemax": config2.total_steps,
-              "aria-valuenow": step,
-              "aria-valuetext": `Step ${step} of ${config2.total_steps}`,
-              children: /* @__PURE__ */ jsx("div", { className: "sk-form__progress-bar", style: { width: `${progress}%` } })
-            }
-          ),
-          /* @__PURE__ */ jsx("ol", { className: "sk-form__progress-dots", "aria-hidden": "true", children: Array.from({ length: config2.total_steps }, (_, i) => i + 1).map((n) => /* @__PURE__ */ jsx(
-            "li",
-            {
-              className: "sk-form__progress-dot" + (n === step ? " sk-form__progress-dot--current" : "") + (n < step ? " sk-form__progress-dot--done" : "")
-            },
-            n
-          )) })
-        ] }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            ref: stepPanelRef,
-            tabIndex: -1,
-            className: "sk-form__step" + (config2.is_multi_step ? ` sk-form__step--${stepDirection}` : ""),
-            children: [
-              config2.is_multi_step && (currentStepConfig?.title || currentStepConfig?.description) && /* @__PURE__ */ jsxs("div", { className: "sk-form__step-intro", children: [
-                currentStepConfig.title && /* @__PURE__ */ jsx("h3", { className: "sk-form__step-title", children: currentStepConfig.title }),
-                currentStepConfig.description && /* @__PURE__ */ jsx("p", { className: "sk-form__step-description", children: currentStepConfig.description })
-              ] }),
-              /* @__PURE__ */ jsx("div", { className: "sk-form__fields", children: currentFields.map((field2) => {
-                if (!isFieldVisible(field2)) return null;
-                return /* @__PURE__ */ jsx("div", { className: `sk-form__field-wrapper sk-form__field-wrapper--${field2.width || "full"}`, children: /* @__PURE__ */ jsx(
-                  FormField,
-                  {
-                    field: field2,
-                    value: values[field2.slug],
-                    error: errors[field2.slug],
-                    showValid: !!touched[field2.slug] && !errors[field2.slug] && fieldIsComplete(field2),
-                    onChange: (value) => setFieldValue(field2.slug, value)
-                  }
-                ) }, field2.id);
-              }) })
-            ]
-          },
-          step
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: "sk-form__actions",
-            style: { justifyContent: step > 1 ? "space-between" : "flex-end" },
-            children: [
-              step > 1 && /* @__PURE__ */ jsx("button", { type: "button", className: "sk-form__btn sk-form__btn--back", onClick: prevStep, children: "Back" }),
-              /* @__PURE__ */ jsx("button", { type: "submit", className: "sk-form__btn sk-form__btn--submit", disabled: isSubmitting, children: isSubmitting ? "Submitting..." : step < config2.total_steps ? "Next" : config2.submit_button_text })
-            ]
-          }
-        ),
-        submitError && /* @__PURE__ */ jsx(
-          "p",
-          {
-            className: "sk-form__submit-error",
-            role: "alert",
-            style: { color: "var(--sk-error, #dc2626)", fontSize: 14, marginTop: 12 },
-            children: submitError
-          }
-        ),
-        config2.honeypot_enabled && /* @__PURE__ */ jsx(
-          HoneypotField,
-          {
-            name: honeypotFieldName,
-            value: honeypotValue,
-            onChange: setHoneypotValue
-          }
-        ),
-        /* @__PURE__ */ jsx(NativeFallbackFields, { config: config2, returnTo: nativeReturnTo })
-      ]
-    }
-  );
-}
-function ManagedForm({
-  formId,
-  projectId,
-  className,
-  onSuccess,
-  onError,
-  initialConfig,
-  experience,
-  nativeReturnTo,
-  children
-}) {
-  const {
-    form,
-    isLoading,
-    fetchError
-  } = useForm(formId, {
-    projectId,
-    onSuccess,
-    onError,
-    initialForm: initialConfig
-  });
-  if (isLoading) {
-    return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx("p", { style: { color: "#6b7280" }, children: "Loading form..." }) });
-  }
-  if (fetchError || !form) {
-    return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx("p", { style: { color: "var(--sk-error, #dc2626)" }, children: fetchError?.message || "Form not found or inactive." }) });
-  }
-  return /* @__PURE__ */ jsx(
-    FormClient,
-    {
-      config: form,
-      className,
-      onSuccess,
-      onError,
-      customRender: children,
-      experience,
-      nativeReturnTo
-    }
-  );
-}
 
-export { FormClient, ManagedForm, configureFormsApi, defineForm, field, formsApi, initializeForms };
+export { configureFormsApi, defineForm, field, formsApi, initializeForms };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map