@sonordev/site-kit 1.2.7

package/dist/forms/index.mjs

@@ -0,0 +1,1142 @@
+'use client';
+export { configureFormsApi, defineForm, field, formsApi, initializeForms } from '../chunk-S7FRYNSU.mjs';
+import '../chunk-4XPGGLVP.mjs';
+import { useRef, useEffect, useCallback, useState, useMemo } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function useFormTracking({
+  formId,
+  totalSteps,
+  enabled = true,
+  debug = false
+}) {
+  const sessionIdRef = useRef("");
+  const startTimeRef = useRef(0);
+  const stepStartTimeRef = useRef(0);
+  const stepTimesRef = useRef({});
+  const currentStepRef = useRef(1);
+  const maxStepRef = useRef(1);
+  const analyticsIdRef = useRef(null);
+  useEffect(() => {
+    if (!enabled) return;
+    if (!formId) {
+      if (debug) console.warn("[Forms] Tracking skipped: formId is empty");
+      return;
+    }
+    sessionIdRef.current = crypto.randomUUID();
+    startTimeRef.current = Date.now();
+    stepStartTimeRef.current = Date.now();
+    const startTracking = async () => {
+      const apiUrl = window.__SITE_KIT_API_URL__;
+      const apiKey = window.__SITE_KIT_API_KEY__;
+      if (!apiUrl || !apiKey) {
+        if (debug) console.error("[Forms] Missing API URL or API key");
+        return;
+      }
+      try {
+        const response = await fetch(`${apiUrl}/api/public/forms/analytics/start`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "x-api-key": apiKey
+          },
+          body: JSON.stringify({
+            formId,
+            sessionId: sessionIdRef.current,
+            deviceType: getDeviceType()
+          })
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+        const data = await response.json();
+        analyticsIdRef.current = data.id;
+        if (debug) console.log("[Forms] Started tracking:", data.id);
+      } catch (error) {
+        if (debug) console.error("[Forms] Error starting tracking:", error);
+      }
+    };
+    startTracking();
+    const handleBeforeUnload = () => {
+      if (!analyticsIdRef.current) return;
+      const apiUrl = window.__SITE_KIT_API_URL__;
+      const apiKey = window.__SITE_KIT_API_KEY__;
+      if (!apiUrl || !apiKey) return;
+      const now = Date.now();
+      const currentStepTime = Math.floor((now - stepStartTimeRef.current) / 1e3);
+      stepTimesRef.current[currentStepRef.current] = currentStepTime;
+      const payload = JSON.stringify({
+        analyticsId: analyticsIdRef.current,
+        step: currentStepRef.current,
+        maxStep: maxStepRef.current,
+        stepTimes: stepTimesRef.current,
+        totalTimeSeconds: Math.floor((now - startTimeRef.current) / 1e3)
+      });
+      const blob = new Blob([payload], { type: "application/json" });
+      new Headers({
+        "Content-Type": "application/json",
+        "x-api-key": apiKey
+      });
+      const sent = navigator.sendBeacon(
+        `${apiUrl}/api/public/forms/analytics/abandon`,
+        blob
+      );
+      if (debug) console.log("[Forms] Abandonment tracked:", sent ? "success" : "failed");
+    };
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+    };
+  }, [formId, enabled, debug]);
+  const trackStepChange = useCallback(async (step) => {
+    if (!enabled || !analyticsIdRef.current) return;
+    const apiUrl = window.__SITE_KIT_API_URL__;
+    const apiKey = window.__SITE_KIT_API_KEY__;
+    if (!apiUrl || !apiKey) {
+      if (debug) console.error("[Forms] Missing API URL or API key");
+      return;
+    }
+    const now = Date.now();
+    const prevStepTime = Math.floor((now - stepStartTimeRef.current) / 1e3);
+    stepTimesRef.current[currentStepRef.current] = prevStepTime;
+    currentStepRef.current = step;
+    maxStepRef.current = Math.max(maxStepRef.current, step);
+    stepStartTimeRef.current = now;
+    try {
+      const response = await fetch(`${apiUrl}/api/public/forms/analytics/step`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "x-api-key": apiKey
+        },
+        body: JSON.stringify({
+          analyticsId: analyticsIdRef.current,
+          step,
+          maxStep: maxStepRef.current,
+          stepTimes: stepTimesRef.current
+        })
+      });
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+      if (debug) console.log("[Forms] Step changed to:", step);
+    } catch (error) {
+      if (debug) console.error("[Forms] Error updating step:", error);
+    }
+  }, [enabled, debug]);
+  const trackComplete = useCallback(async () => {
+    if (!enabled || !analyticsIdRef.current) return;
+    const apiUrl = window.__SITE_KIT_API_URL__;
+    const apiKey = window.__SITE_KIT_API_KEY__;
+    if (!apiUrl || !apiKey) {
+      if (debug) console.error("[Forms] Missing API URL or API key");
+      return;
+    }
+    const now = Date.now();
+    const finalStepTime = Math.floor((now - stepStartTimeRef.current) / 1e3);
+    stepTimesRef.current[currentStepRef.current] = finalStepTime;
+    try {
+      const response = await fetch(`${apiUrl}/api/public/forms/analytics/complete`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "x-api-key": apiKey
+        },
+        body: JSON.stringify({
+          analyticsId: analyticsIdRef.current,
+          totalSteps,
+          stepTimes: stepTimesRef.current,
+          totalTimeSeconds: Math.floor((now - startTimeRef.current) / 1e3)
+        })
+      });
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+      if (debug) console.log("[Forms] Form completed (conversion auto-logged via trigger)");
+    } catch (error) {
+      if (debug) console.error("[Forms] Error completing tracking:", error);
+    }
+  }, [enabled, totalSteps, formId, debug]);
+  return {
+    trackStepChange,
+    trackComplete,
+    sessionId: sessionIdRef.current
+  };
+}
+function getDeviceType() {
+  if (typeof window === "undefined") return "desktop";
+  const ua = navigator.userAgent;
+  if (/tablet|ipad|playbook|silk/i.test(ua)) return "tablet";
+  if (/mobile|iphone|ipod|android|blackberry|opera mini|iemobile/i.test(ua)) return "mobile";
+  return "desktop";
+}
+
+// src/forms/recaptcha.ts
+function getSiteKey(explicitSiteKey) {
+  if (typeof window === "undefined") return void 0;
+  if (explicitSiteKey) return explicitSiteKey;
+  const win = window;
+  return win.__SITE_KIT_RECAPTCHA_SITE_KEY__ ?? process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY;
+}
+function loadScript(siteKey) {
+  return new Promise((resolve, reject) => {
+    if (typeof window === "undefined") {
+      resolve(null);
+      return;
+    }
+    const win = window;
+    if (win.grecaptcha?.enterprise) {
+      resolve(win.grecaptcha);
+      return;
+    }
+    const existing = document.querySelector('script[src*="recaptcha/enterprise"]');
+    if (existing) {
+      const check = () => {
+        if (win.grecaptcha?.enterprise) resolve(win.grecaptcha);
+        else setTimeout(check, 50);
+      };
+      check();
+      return;
+    }
+    const script = document.createElement("script");
+    script.src = `https://www.google.com/recaptcha/enterprise.js?render=${siteKey}`;
+    script.async = true;
+    script.onload = () => resolve(win.grecaptcha);
+    script.onerror = () => reject(new Error("reCAPTCHA script failed to load"));
+    document.head.appendChild(script);
+  });
+}
+async function getRecaptchaToken(explicitSiteKey) {
+  const siteKey = getSiteKey(explicitSiteKey);
+  if (!siteKey || typeof window === "undefined") return null;
+  try {
+    const grecaptcha = await loadScript(siteKey);
+    if (!grecaptcha?.enterprise?.execute) return null;
+    const token = await grecaptcha.enterprise.execute(siteKey, { action: "submit" });
+    return token || null;
+  } catch (err) {
+    console.warn("[site-kit reCAPTCHA]", err);
+    return null;
+  }
+}
+
+// src/forms/useForm.ts
+function getUTMParams() {
+  if (typeof window === "undefined") return {};
+  const params = new URLSearchParams(window.location.search);
+  return {
+    utm_source: params.get("utm_source"),
+    utm_medium: params.get("utm_medium"),
+    utm_campaign: params.get("utm_campaign"),
+    utm_term: params.get("utm_term"),
+    utm_content: params.get("utm_content")
+  };
+}
+function useForm(formIdOrSlug, options = {}) {
+  const {
+    projectId: optionsProjectId,
+    onSuccess,
+    onError,
+    initialValues = {},
+    redirectUrl
+  } = options;
+  const projectId = optionsProjectId || (typeof window !== "undefined" ? window.__SITE_KIT_PROJECT_ID__ : void 0);
+  const [form, setForm] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [fetchError, setFetchError] = useState(null);
+  const [values, setValuesState] = useState(initialValues);
+  const [errors, setErrors] = useState({});
+  const [step, setStep] = useState(1);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isComplete, setIsComplete] = useState(false);
+  const totalSteps = form?.total_steps || 1;
+  const isMultiStep = form?.is_multi_step || false;
+  const { trackStepChange, trackComplete } = useFormTracking({
+    formId: form?.id || "",
+    totalSteps
+  });
+  useEffect(() => {
+    const apiUrl = typeof window !== "undefined" ? window.__SITE_KIT_API_URL__ || "https://api.uptrademedia.com" : "https://api.uptrademedia.com";
+    const apiKey = typeof window !== "undefined" ? window.__SITE_KIT_API_KEY__ : void 0;
+    if (!apiKey) {
+      setFetchError(new Error("API key is required. Provide it via SiteKitProvider (apiKey) or set __SITE_KIT_API_KEY__."));
+      setIsLoading(false);
+      return;
+    }
+    async function fetchForm() {
+      try {
+        setIsLoading(true);
+        setFetchError(null);
+        const response = await fetch(`${apiUrl}/api/public/forms/config`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "Authorization": `Bearer ${apiKey}`
+          },
+          body: JSON.stringify({
+            formIdOrSlug
+          })
+        });
+        if (!response.ok) {
+          throw new Error(`Failed to fetch form: ${response.statusText}`);
+        }
+        const data = await response.json();
+        if (!data) throw new Error("Form not found");
+        if (typeof window !== "undefined" && data.recaptcha_site_key) {
+          ;
+          window.__SITE_KIT_RECAPTCHA_SITE_KEY__ = data.recaptcha_site_key;
+        }
+        if (data.steps) {
+          data.steps.sort((a, b) => (a.step_number || 0) - (b.step_number || 0));
+        }
+        if (data.fields) {
+          data.fields.sort((a, b) => (a.sort_order || 0) - (b.sort_order || 0));
+        }
+        const total_steps = data.steps?.length || 1;
+        const is_multi_step = total_steps > 1;
+        setForm({
+          ...data,
+          total_steps,
+          is_multi_step
+        });
+        const defaults = {};
+        for (const field2 of data.fields || []) {
+          if (field2.default_value !== void 0 && field2.default_value !== null) {
+            defaults[field2.slug] = field2.default_value;
+          }
+        }
+        setValuesState({ ...defaults, ...initialValues });
+      } catch (err) {
+        setFetchError(err);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+    fetchForm();
+  }, [formIdOrSlug, projectId]);
+  const allFields = useMemo(() => form?.fields || [], [form]);
+  const fields = useMemo(() => {
+    if (!isMultiStep) return allFields;
+    const currentStepConfig = form?.steps?.find((s) => s.step_number === step);
+    if (!currentStepConfig) return allFields;
+    return allFields.filter((f) => f.step_id === currentStepConfig.id);
+  }, [form, step, allFields, isMultiStep]);
+  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 visibleFields = useMemo(() => {
+    return fields.filter(isFieldVisible);
+  }, [fields, isFieldVisible]);
+  const validateField = useCallback((field2) => {
+    if (!isFieldVisible(field2)) 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 && !new RegExp(rules.pattern).test(strValue)) {
+      return rules.custom_error || `${field2.label} is invalid`;
+    }
+    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 validate = useCallback(() => {
+    const newErrors = {};
+    for (const field2 of fields) {
+      const error = validateField(field2);
+      if (error) {
+        newErrors[field2.slug] = error;
+      }
+    }
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  }, [fields, validateField]);
+  const setFieldValue = useCallback((key, value) => {
+    setValuesState((prev) => ({ ...prev, [key]: value }));
+    setErrors((prev) => {
+      if (prev[key]) {
+        const next = { ...prev };
+        delete next[key];
+        return next;
+      }
+      return prev;
+    });
+  }, []);
+  const setValues = useCallback((newValues) => {
+    setValuesState((prev) => ({ ...prev, ...newValues }));
+  }, []);
+  const clearErrors = useCallback(() => {
+    setErrors({});
+  }, []);
+  const canGoNext = step < totalSteps;
+  const canGoPrev = step > 1;
+  const isLastStep = step === totalSteps;
+  const progress = Math.round(step / totalSteps * 100);
+  const nextStep = useCallback(() => {
+    if (!validate()) return false;
+    if (step < totalSteps) {
+      const newStep = step + 1;
+      setStep(newStep);
+      trackStepChange(newStep);
+      return true;
+    }
+    return false;
+  }, [step, totalSteps, validate, trackStepChange]);
+  const prevStep = useCallback(() => {
+    if (step > 1) {
+      const newStep = step - 1;
+      setStep(newStep);
+      trackStepChange(newStep);
+    }
+  }, [step, trackStepChange]);
+  const goToStep = useCallback((targetStep) => {
+    if (targetStep >= 1 && targetStep <= totalSteps) {
+      setStep(targetStep);
+      trackStepChange(targetStep);
+    }
+  }, [totalSteps, trackStepChange]);
+  const submit = useCallback(async () => {
+    if (!form) return;
+    if (!validate()) return;
+    setIsSubmitting(true);
+    try {
+      const apiUrl = typeof window !== "undefined" ? window.__SITE_KIT_API_URL__ || "https://api.uptrademedia.com" : "https://api.uptrademedia.com";
+      const apiKey = typeof window !== "undefined" ? window.__SITE_KIT_API_KEY__ : void 0;
+      if (!apiKey) {
+        throw new Error("API key is required. Set NEXT_PUBLIC_UPTRADE_API_KEY in your .env");
+      }
+      const honeypotFieldName = form.honeypot_field || "website";
+      const recaptchaToken = form.recaptcha_enabled ? await getRecaptchaToken(form.recaptcha_site_key) : null;
+      if (form.recaptcha_enabled && !recaptchaToken) {
+        throw new Error("reCAPTCHA is required but could not be initialized.");
+      }
+      const utm = getUTMParams();
+      const submission = {
+        formId: form.id,
+        data: {
+          ...values,
+          ...form.honeypot_enabled ? { [honeypotFieldName]: "" } : {}
+        },
+        metadata: {
+          pageUrl: typeof window !== "undefined" ? window.location.href : null,
+          referrer: typeof document !== "undefined" ? document.referrer || null : null,
+          userAgent: typeof navigator !== "undefined" ? navigator.userAgent : null,
+          sessionId: typeof sessionStorage !== "undefined" ? sessionStorage.getItem("_uptrade_sid") : null,
+          recaptchaToken: recaptchaToken || void 0,
+          utmSource: utm.utm_source,
+          utmMedium: utm.utm_medium,
+          utmCampaign: utm.utm_campaign
+        }
+      };
+      const response = await fetch(`${apiUrl}/api/public/forms/submit`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "Authorization": `Bearer ${apiKey}`
+        },
+        body: JSON.stringify(submission)
+      });
+      if (!response.ok) {
+        throw new Error(`Form submission failed: ${response.statusText}`);
+      }
+      const data = await response.json();
+      trackComplete();
+      setIsComplete(true);
+      onSuccess?.(data);
+      const finalRedirect = redirectUrl !== false ? redirectUrl || form.redirect_url : void 0;
+      if (finalRedirect) {
+        window.location.href = finalRedirect;
+      }
+    } catch (error) {
+      console.error("[useForm] Submission error:", error);
+      onError?.(error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [form, values, validate, trackComplete, onSuccess, onError, redirectUrl]);
+  const reset = useCallback(() => {
+    setValuesState(initialValues);
+    setErrors({});
+    setStep(1);
+    setIsComplete(false);
+  }, [initialValues]);
+  return {
+    form,
+    isLoading,
+    fetchError,
+    allFields,
+    fields,
+    visibleFields,
+    values,
+    errors,
+    setFieldValue,
+    setValues,
+    clearErrors,
+    step,
+    totalSteps,
+    isMultiStep,
+    progress,
+    nextStep,
+    prevStep,
+    goToStep,
+    canGoNext,
+    canGoPrev,
+    isLastStep,
+    validate,
+    validateField,
+    isFieldVisible,
+    submit,
+    isSubmitting,
+    isComplete,
+    reset
+  };
+}
+function normalizeOptions(options) {
+  if (!options) return [];
+  if (Array.isArray(options)) {
+    return options.map((opt) => {
+      if (typeof opt === "string") return { value: opt, label: opt };
+      if (typeof opt === "object" && opt !== null && "value" in opt && "label" in opt) return opt;
+      if (typeof opt === "object" && opt !== null && "label" in opt) return { value: opt.label, label: opt.label };
+      return { value: String(opt), label: String(opt) };
+    });
+  }
+  if (typeof options === "object" && options !== null) {
+    const obj = options;
+    if (Array.isArray(obj.choices)) return normalizeOptions(obj.choices);
+    if (Array.isArray(obj.items)) return normalizeOptions(obj.items);
+    if (Array.isArray(obj.options)) return normalizeOptions(obj.options);
+  }
+  return [];
+}
+function FormField({ field: field2, value, error, onChange, classPrefix = "uptrade-form" }) {
+  const inputId = `uptrade-${field2.id || field2.slug}`;
+  const options = normalizeOptions(field2.options);
+  const baseInputStyle = {
+    width: "100%",
+    padding: "var(--uptrade-input-padding, 10px 12px)",
+    fontSize: "var(--uptrade-font-size, 16px)",
+    border: error ? "1px solid var(--uptrade-input-border-error, #ef4444)" : "1px solid var(--uptrade-input-border, #d1d5db)",
+    borderRadius: "var(--uptrade-input-radius, 6px)",
+    backgroundColor: "var(--uptrade-input-bg, #ffffff)",
+    outline: "none",
+    fontFamily: "inherit"
+  };
+  const labelStyle = {
+    display: "block",
+    marginBottom: 6,
+    fontWeight: "var(--uptrade-label-weight, 500)",
+    color: "var(--uptrade-label-color, inherit)"
+  };
+  const errorStyle = {
+    color: "var(--uptrade-error-color, #ef4444)",
+    fontSize: 14,
+    marginTop: 4
+  };
+  const helpStyle = {
+    color: "var(--uptrade-help-color, #6b7280)",
+    fontSize: 14,
+    marginTop: 4
+  };
+  if (field2.field_type === "heading" || field2.field_type === "section_header") {
+    return /* @__PURE__ */ jsx("h3", { className: `${classPrefix}__heading`, style: { margin: "16px 0 8px", fontWeight: 600, fontSize: 18 }, children: field2.label });
+  }
+  if (field2.field_type === "paragraph") {
+    return /* @__PURE__ */ jsx("p", { className: `${classPrefix}__paragraph`, style: { color: "var(--uptrade-help-color, #6b7280)", margin: "8px 0" }, children: field2.help_text || field2.label });
+  }
+  if (field2.field_type === "hidden") {
+    return /* @__PURE__ */ jsx("input", { type: "hidden", name: field2.slug, value: String(value || "") });
+  }
+  const hideLabel = !!field2.hide_label;
+  const effectivePlaceholder = hideLabel ? field2.label : field2.placeholder;
+  return /* @__PURE__ */ jsxs("div", { className: `${classPrefix}__field ${classPrefix}__field--${field2.field_type}`, children: [
+    /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: `${classPrefix}__label`, style: { ...labelStyle, ...hideLabel ? { position: "absolute", width: 1, height: 1, padding: 0, margin: -1, overflow: "hidden", clip: "rect(0,0,0,0)", whiteSpace: "nowrap", border: 0 } : {} }, children: [
+      field2.label,
+      field2.is_required && /* @__PURE__ */ jsx("span", { style: { color: "var(--uptrade-error-color, #ef4444)" }, children: " *" })
+    ] }),
+    ["text", "email", "phone", "tel", "number"].includes(field2.field_type) && /* @__PURE__ */ jsx(
+      "input",
+      {
+        id: inputId,
+        className: `${classPrefix}__input`,
+        type: field2.field_type === "phone" || field2.field_type === "tel" ? "tel" : field2.field_type,
+        name: field2.slug,
+        value: String(value || ""),
+        placeholder: effectivePlaceholder,
+        required: field2.is_required,
+        onChange: (e) => onChange(e.target.value),
+        style: baseInputStyle
+      }
+    ),
+    field2.field_type === "textarea" && /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        id: inputId,
+        className: `${classPrefix}__textarea`,
+        name: field2.slug,
+        value: String(value || ""),
+        placeholder: effectivePlaceholder,
+        required: field2.is_required,
+        rows: 4,
+        onChange: (e) => onChange(e.target.value),
+        style: { ...baseInputStyle, resize: "vertical" }
+      }
+    ),
+    field2.field_type === "select" && /* @__PURE__ */ jsxs(
+      "select",
+      {
+        id: inputId,
+        className: `${classPrefix}__select`,
+        name: field2.slug,
+        value: String(value || ""),
+        required: field2.is_required,
+        onChange: (e) => onChange(e.target.value),
+        style: baseInputStyle,
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "", children: effectivePlaceholder || "Select an option" }),
+          options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
+        ]
+      }
+    ),
+    field2.field_type === "multi-select" && /* @__PURE__ */ jsx(
+      "select",
+      {
+        id: inputId,
+        className: `${classPrefix}__select ${classPrefix}__select--multi`,
+        name: field2.slug,
+        value: Array.isArray(value) ? value : [],
+        required: field2.is_required,
+        multiple: true,
+        onChange: (e) => {
+          const selected = Array.from(e.target.selectedOptions, (opt) => opt.value);
+          onChange(selected);
+        },
+        style: { ...baseInputStyle, height: 120 },
+        children: options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
+      }
+    ),
+    field2.field_type === "radio" && /* @__PURE__ */ jsx("div", { className: `${classPrefix}__radio-group`, style: { display: "flex", flexDirection: "column", gap: 8 }, children: options.map((option) => /* @__PURE__ */ jsxs("label", { className: `${classPrefix}__radio-option`, style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "radio",
+          name: field2.slug,
+          value: option.value,
+          checked: value === option.value,
+          onChange: () => onChange(option.value)
+        }
+      ),
+      option.label
+    ] }, option.value)) }),
+    field2.field_type === "checkbox" && options.length === 0 && /* @__PURE__ */ jsxs("label", { className: `${classPrefix}__checkbox`, style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          name: field2.slug,
+          checked: !!value,
+          onChange: (e) => onChange(e.target.checked)
+        }
+      ),
+      field2.help_text || field2.label
+    ] }),
+    field2.field_type === "checkbox" && options.length > 0 && /* @__PURE__ */ jsx("div", { className: `${classPrefix}__checkbox-group`, style: { display: "flex", flexDirection: "column", gap: 8 }, children: options.map((option) => {
+      const selectedValues = Array.isArray(value) ? value : [];
+      const isChecked = selectedValues.includes(option.value);
+      return /* @__PURE__ */ jsxs("label", { className: `${classPrefix}__checkbox-option`, style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: isChecked,
+            onChange: () => {
+              if (isChecked) {
+                onChange(selectedValues.filter((v) => v !== option.value));
+              } else {
+                onChange([...selectedValues, option.value]);
+              }
+            }
+          }
+        ),
+        option.label
+      ] }, option.value);
+    }) }),
+    field2.field_type === "date" && /* @__PURE__ */ jsx(
+      "input",
+      {
+        id: inputId,
+        className: `${classPrefix}__input ${classPrefix}__input--date`,
+        type: "date",
+        name: field2.slug,
+        value: String(value || ""),
+        required: field2.is_required,
+        onChange: (e) => onChange(e.target.value),
+        style: baseInputStyle
+      }
+    ),
+    field2.field_type === "time" && /* @__PURE__ */ jsx(
+      "input",
+      {
+        id: inputId,
+        className: `${classPrefix}__input ${classPrefix}__input--time`,
+        type: "time",
+        name: field2.slug,
+        value: String(value || ""),
+        required: field2.is_required,
+        onChange: (e) => onChange(e.target.value),
+        style: baseInputStyle
+      }
+    ),
+    field2.field_type === "datetime" && /* @__PURE__ */ jsx(
+      "input",
+      {
+        id: inputId,
+        className: `${classPrefix}__input ${classPrefix}__input--datetime`,
+        type: "datetime-local",
+        name: field2.slug,
+        value: String(value || ""),
+        required: field2.is_required,
+        onChange: (e) => onChange(e.target.value),
+        style: baseInputStyle
+      }
+    ),
+    field2.field_type === "file" && /* @__PURE__ */ jsx(
+      "input",
+      {
+        id: inputId,
+        className: `${classPrefix}__input ${classPrefix}__input--file`,
+        type: "file",
+        name: field2.slug,
+        required: field2.is_required,
+        onChange: (e) => {
+          const file = e.target.files?.[0];
+          if (file) {
+            onChange(file.name);
+          }
+        },
+        style: baseInputStyle
+      }
+    ),
+    field2.field_type === "rating" && /* @__PURE__ */ jsx("div", { className: `${classPrefix}__rating`, style: { display: "flex", gap: 4 }, children: [1, 2, 3, 4, 5].map((star) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onChange(star),
+        className: `${classPrefix}__rating-star`,
+        style: {
+          background: "none",
+          border: "none",
+          fontSize: 24,
+          cursor: "pointer",
+          color: value >= star ? "var(--uptrade-rating-active, #fbbf24)" : "var(--uptrade-rating-inactive, #d1d5db)"
+        },
+        children: "\u2605"
+      },
+      star
+    )) }),
+    field2.field_type === "slider" && /* @__PURE__ */ jsxs("div", { className: `${classPrefix}__slider`, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: inputId,
+          type: "range",
+          name: field2.slug,
+          value: Number(value || 50),
+          min: field2.validation?.min || 0,
+          max: field2.validation?.max || 100,
+          onChange: (e) => onChange(Number(e.target.value)),
+          style: { width: "100%" }
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: `${classPrefix}__slider-value`, style: { textAlign: "center", marginTop: 4 }, children: String(value || 50) })
+    ] }),
+    error && /* @__PURE__ */ jsx("p", { className: `${classPrefix}__error`, style: errorStyle, children: error }),
+    field2.help_text && !error && field2.field_type !== "checkbox" && /* @__PURE__ */ jsx("p", { className: `${classPrefix}__help`, style: helpStyle, children: field2.help_text })
+  ] });
+}
+function FormClient({
+  config,
+  className,
+  onSuccess,
+  onError,
+  customRender
+}) {
+  const [values, setValues] = useState({});
+  const [errors, setErrors] = useState({});
+  const [step, setStep] = useState(1);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isComplete, setIsComplete] = useState(false);
+  const [honeypotValue, setHoneypotValue] = useState("");
+  const honeypotFieldName = config.honeypot_field || "website";
+  const { trackStepChange, trackComplete } = useFormTracking({
+    formId: config.id,
+    totalSteps: config.total_steps
+  });
+  const currentFields = useMemo(() => {
+    if (!config.is_multi_step) {
+      return config.fields || [];
+    }
+    const currentStepConfig = config.steps?.find((s) => s.step_number === step);
+    if (!currentStepConfig) return config.fields || [];
+    return (config.fields || []).filter((f) => f.step_id === currentStepConfig.id);
+  }, [config, 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 && !new RegExp(rules.pattern).test(strValue)) {
+      return rules.custom_error || `${field2.label} is invalid`;
+    }
+    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 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 setFieldValue = useCallback((key, value) => {
+    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 < config.total_steps) {
+      const newStep = step + 1;
+      setStep(newStep);
+      trackStepChange(newStep);
+      return true;
+    }
+    return false;
+  }, [step, config.total_steps, validateStep, trackStepChange]);
+  const prevStep = useCallback(() => {
+    if (step > 1) {
+      const newStep = step - 1;
+      setStep(newStep);
+      trackStepChange(newStep);
+    }
+  }, [step, trackStepChange]);
+  const goToStep = useCallback((targetStep) => {
+    if (targetStep >= 1 && targetStep <= config.total_steps) {
+      setStep(targetStep);
+      trackStepChange(targetStep);
+    }
+  }, [config.total_steps, trackStepChange]);
+  const submit = useCallback(async () => {
+    if (!validateStep()) return;
+    setIsSubmitting(true);
+    try {
+      const apiUrl = typeof window !== "undefined" ? window.__SITE_KIT_API_URL__ || "https://api.uptrademedia.com" : "https://api.uptrademedia.com";
+      const apiKey = typeof window !== "undefined" ? window.__SITE_KIT_API_KEY__ : void 0;
+      if (!apiKey) {
+        throw new Error("API key is required. Set NEXT_PUBLIC_UPTRADE_API_KEY in your .env");
+      }
+      const recaptchaToken = config.recaptcha_enabled ? await getRecaptchaToken(config.recaptcha_site_key) : null;
+      if (config.recaptcha_enabled && !recaptchaToken) {
+        throw new Error("reCAPTCHA is required but could not be initialized.");
+      }
+      const utm = getUTMParams2();
+      const submission = {
+        form_id: config.id,
+        project_id: config.project_id,
+        data: {
+          ...values,
+          ...config.honeypot_enabled ? { [honeypotFieldName]: honeypotValue } : {}
+        },
+        routing_type: config.form_type,
+        status: "new",
+        metadata: {
+          pageUrl: typeof window !== "undefined" ? window.location.href : null,
+          referrer: typeof document !== "undefined" ? document.referrer || null : null,
+          userAgent: typeof navigator !== "undefined" ? navigator.userAgent : null,
+          sessionId: typeof sessionStorage !== "undefined" ? sessionStorage.getItem("_uptrade_sid") : null,
+          recaptchaToken: recaptchaToken || void 0,
+          utmSource: utm.utm_source,
+          utmMedium: utm.utm_medium,
+          utmCampaign: utm.utm_campaign
+        }
+      };
+      const response = await fetch(`${apiUrl}/api/public/forms/submit`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "Authorization": `Bearer ${apiKey}`
+        },
+        body: JSON.stringify(submission)
+      });
+      const data = await response.json().catch(() => null);
+      if (!response.ok) {
+        const msg = (data?.message ?? data?.error ?? (response.statusText || `HTTP ${response.status}`)).trim();
+        throw new Error(msg ? `Failed to submit form: ${msg}` : `Failed to submit form (${response.status})`);
+      }
+      trackComplete();
+      setIsComplete(true);
+      onSuccess?.(data);
+      if (config.redirect_url) {
+        window.location.href = config.redirect_url;
+      }
+    } catch (error) {
+      console.error("[Forms] Submission error:", error);
+      onError?.(error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [config, honeypotFieldName, honeypotValue, values, validateStep, trackComplete, onSuccess, onError]);
+  const progress = useMemo(() => {
+    return Math.round(step / config.total_steps * 100);
+  }, [step, config.total_steps]);
+  const renderProps = {
+    config,
+    fields: currentFields,
+    step,
+    totalSteps: config.total_steps,
+    values,
+    errors,
+    isSubmitting,
+    progress,
+    nextStep,
+    prevStep,
+    goToStep,
+    submit,
+    setFieldValue,
+    isFieldVisible
+  };
+  if (isComplete) {
+    return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx("p", { children: config.success_message }) });
+  }
+  if (customRender) {
+    return /* @__PURE__ */ jsx(Fragment, { children: customRender(renderProps) });
+  }
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      className: `uptrade-form ${className || ""}`,
+      onSubmit: (e) => {
+        e.preventDefault();
+        if (step < config.total_steps) {
+          nextStep();
+        } else {
+          submit();
+        }
+      },
+      children: [
+        config.is_multi_step && /* @__PURE__ */ jsxs("div", { className: "uptrade-form__progress", style: { marginBottom: 20 }, children: [
+          /* @__PURE__ */ jsxs("div", { className: "uptrade-form__progress-header", style: { display: "flex", justifyContent: "space-between", marginBottom: 8 }, children: [
+            /* @__PURE__ */ jsxs("span", { className: "uptrade-form__progress-step", children: [
+              "Step ",
+              step,
+              " of ",
+              config.total_steps
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "uptrade-form__progress-percent", children: [
+              progress,
+              "%"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "uptrade-form__progress-track", style: {
+            height: 4,
+            backgroundColor: "var(--uptrade-progress-bg, #e5e7eb)",
+            borderRadius: 2,
+            overflow: "hidden"
+          }, children: /* @__PURE__ */ jsx("div", { className: "uptrade-form__progress-bar", style: {
+            width: `${progress}%`,
+            height: "100%",
+            backgroundColor: "var(--uptrade-progress-fill, #3b82f6)",
+            transition: "width 0.3s ease"
+          } }) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "uptrade-form__fields", children: currentFields.map((field2) => {
+          if (!isFieldVisible(field2)) return null;
+          return /* @__PURE__ */ jsx("div", { className: `uptrade-form__field-wrapper uptrade-form__field-wrapper--${field2.width || "full"}`, children: /* @__PURE__ */ jsx(
+            FormField,
+            {
+              field: field2,
+              value: values[field2.slug],
+              error: errors[field2.slug],
+              onChange: (value) => setFieldValue(field2.slug, value)
+            }
+          ) }, field2.id);
+        }) }),
+        /* @__PURE__ */ jsxs("div", { className: "uptrade-form__actions", style: {
+          display: "flex",
+          justifyContent: step > 1 ? "space-between" : "flex-end",
+          marginTop: 24
+        }, children: [
+          step > 1 && /* @__PURE__ */ jsx("button", { type: "button", className: "uptrade-form__btn uptrade-form__btn--back", onClick: prevStep, children: "Back" }),
+          /* @__PURE__ */ jsx("button", { type: "submit", className: "uptrade-form__btn uptrade-form__btn--submit", disabled: isSubmitting, children: isSubmitting ? "Submitting..." : step < config.total_steps ? "Next" : config.submit_button_text })
+        ] }),
+        config.honeypot_enabled && /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            name: honeypotFieldName,
+            tabIndex: -1,
+            autoComplete: "off",
+            style: {
+              position: "absolute",
+              left: -9999,
+              opacity: 0,
+              pointerEvents: "none"
+            },
+            value: honeypotValue,
+            onChange: (e) => {
+              setHoneypotValue(e.target.value);
+              if (e.target.value) {
+                console.warn("[Forms] Honeypot triggered");
+              }
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+function getUTMParams2() {
+  if (typeof window === "undefined") return {};
+  const params = new URLSearchParams(window.location.search);
+  const utmParams = {};
+  for (const key of ["utm_source", "utm_medium", "utm_campaign"]) {
+    const value = params.get(key);
+    if (value) utmParams[key] = value;
+  }
+  return utmParams;
+}
+function ManagedForm({
+  formId,
+  projectId,
+  className,
+  onSuccess,
+  onError,
+  children
+}) {
+  const {
+    form,
+    isLoading,
+    fetchError
+  } = useForm(formId, {
+    projectId,
+    onSuccess,
+    onError
+  });
+  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: "#ef4444" }, children: fetchError?.message || "Form not found or inactive." }) });
+  }
+  return /* @__PURE__ */ jsx(
+    FormClient,
+    {
+      config: form,
+      className,
+      onSuccess,
+      onError,
+      customRender: children
+    }
+  );
+}
+
+export { FormClient, FormField as FormFieldComponent, ManagedForm, useForm, useFormTracking };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map