@sonordev/site-kit 3.8.0 → 3.8.2

package/dist/forms/index.mjs

@@ -1,11 +1,11 @@
 'use client';
-import { useFormTracking, submitForm, DEFAULT_FORM_SUCCESS_MESSAGE, useForm } from '../chunk-R26NFTOR.mjs';
-export { DEFAULT_FORM_SUCCESS_MESSAGE, useForm, useFormTracking } from '../chunk-R26NFTOR.mjs';
+import { useFormTracking, submitForm, DEFAULT_FORM_SUCCESS_MESSAGE, useForm } from '../chunk-U37WZT33.mjs';
+export { DEFAULT_FORM_SUCCESS_MESSAGE, useForm, useFormTracking } from '../chunk-U37WZT33.mjs';
 import { DEFAULT_HONEYPOT_FIELD } from '../chunk-X3S6KXAP.mjs';
 import '../chunk-6EDVCUAG.mjs';
-import { sonorFetch } from '../chunk-RSFSXEV2.mjs';
-import '../chunk-TKP3YFNS.mjs';
-import '../chunk-JVT6CUNN.mjs';
+import { sonorFetch } from '../chunk-VANWF4DM.mjs';
+import '../chunk-2ZWDYZNB.mjs';
+import '../chunk-33T23Y3P.mjs';
 import '../chunk-4XPGGLVP.mjs';
 import React2, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -920,6 +920,7 @@ function FormClient({
   const [values, setValues] = useState({});
   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);
@@ -935,9 +936,9 @@ function FormClient({
     if (!config2.is_multi_step) {
       return config2.fields || [];
     }
-    const currentStepConfig = config2.steps?.find((s) => s.step_number === step);
-    if (!currentStepConfig) return config2.fields || [];
-    return (config2.fields || []).filter((f) => f.step_id === currentStepConfig.id);
+    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;
@@ -1056,6 +1057,7 @@ function FormClient({
     if (!validateStep()) return false;
     if (step < config2.total_steps) {
       const newStep = step + 1;
+      setStepDirection("forward");
       setStep(newStep);
       trackStepChange(newStep);
       return true;
@@ -1065,21 +1067,26 @@ function FormClient({
   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);
     }
-  }, [config2.total_steps, trackStepChange]);
+  }, [step, config2.total_steps, trackStepChange]);
   const submit = useCallback(async () => {
     if (isSubmittingRef.current) return;
     const { ok, firstErrorStep } = validateAll();
     if (!ok) {
-      if (firstErrorStep != null) setStep(firstErrorStep);
+      if (firstErrorStep != null) {
+        setStepDirection("back");
+        setStep(firstErrorStep);
+      }
       return;
     }
     isSubmittingRef.current = true;
@@ -1110,6 +1117,20 @@ function FormClient({
   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,
@@ -1159,51 +1180,77 @@ function FormClient({
         }
       },
       children: [
-        config2.is_multi_step && /* @__PURE__ */ jsxs("div", { className: "sk-form__progress", style: { marginBottom: 20 }, children: [
-          /* @__PURE__ */ jsxs("div", { className: "sk-form__progress-header", style: { display: "flex", justifyContent: "space-between", marginBottom: 8 }, children: [
+        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
             ] }),
-            /* @__PURE__ */ jsxs("span", { className: "sk-form__progress-percent", children: [
+            config2.show_progress && /* @__PURE__ */ jsxs("span", { className: "sk-form__progress-percent", children: [
               progress,
               "%"
             ] })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "sk-form__progress-track", style: {
-            height: 4,
-            backgroundColor: "var(--sk-progress-bg, #e5e7eb)",
-            borderRadius: 2,
-            overflow: "hidden"
-          }, children: /* @__PURE__ */ jsx("div", { className: "sk-form__progress-bar", style: {
-            width: `${progress}%`,
-            height: "100%",
-            backgroundColor: "var(--sk-progress-fill, #2563eb)",
-            transition: "width 0.3s ease"
-          } }) })
-        ] }),
-        /* @__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,
+          /* @__PURE__ */ jsx(
+            "div",
             {
-              field: field2,
-              value: values[field2.slug],
-              error: errors[field2.slug],
-              onChange: (value) => setFieldValue(field2.slug, value)
+              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}%` } })
             }
-          ) }, field2.id);
-        }) }),
-        /* @__PURE__ */ jsxs("div", { className: "sk-form__actions", style: {
-          display: "flex",
-          justifyContent: step > 1 ? "space-between" : "flex-end",
-          marginTop: 24
-        }, 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 })
+          ),
+          /* @__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],
+                    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",
           {