@sonordev/site-kit 6.4.0 → 7.0.0

package/dist/FormStage-OTPKEWID.js

@@ -0,0 +1,418 @@
+'use client';
+import { StageStyles, SummaryTick } from './chunk-J4FSB4OG.js';
+import { useFieldControls, stageViews, stageFirstName, stageEstimate, formatAnswer, AUTO_ADVANCE_TYPES } from './chunk-JMRESWQT.js';
+import { FormField } from './chunk-QPEEKFCA.js';
+import { isEmptyValue } from './chunk-AQSNPZY4.js';
+import './chunk-PKBMQBKP.js';
+import { useState, useRef, useMemo, useEffect, useCallback } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var REST = -1;
+function FormStage({
+  config,
+  values,
+  errors,
+  touched,
+  isSubmitting,
+  submitError,
+  momentum,
+  className,
+  setFieldValue,
+  validateField,
+  isFieldVisible,
+  fieldIsComplete,
+  applyFieldError,
+  submit,
+  trackStepChange,
+  trackFieldFocus,
+  trackFieldBlur,
+  honeypot
+}) {
+  const fieldControls = useFieldControls(config.fields);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [visited, setVisited] = useState({});
+  const [shakeCount, setShakeCount] = useState(0);
+  const formRef = useRef(null);
+  const autoAdvanceTimer = useRef(null);
+  const hasInteractedRef = useRef(false);
+  const views = useMemo(() => {
+    return stageViews(config).map((v) => ({ ...v, fields: v.fields.filter(isFieldVisible) })).filter((v) => v.fields.length > 0);
+  }, [config, isFieldVisible]);
+  const total = views.length;
+  const questionCount = useMemo(
+    () => views.reduce((n, v) => n + v.fields.length, 0),
+    [views]
+  );
+  useEffect(() => {
+    if (activeIndex > 0 && activeIndex >= total) setActiveIndex(total - 1);
+  }, [activeIndex, total]);
+  const nameViewIndex = useMemo(
+    () => views.findIndex((v) => v.fields.some((f) => /^first[_-]?name$/i.test(f.slug))),
+    [views]
+  );
+  const nameField = nameViewIndex >= 0 ? views[nameViewIndex].fields.find((f) => /^first[_-]?name$/i.test(f.slug)) : void 0;
+  const firstName = nameField ? stageFirstName(values[nameField.slug]) : null;
+  const clearAutoAdvance = useCallback(() => {
+    if (autoAdvanceTimer.current !== null) {
+      window.clearTimeout(autoAdvanceTimer.current);
+      autoAdvanceTimer.current = null;
+    }
+  }, []);
+  useEffect(() => clearAutoAdvance, [clearAutoAdvance]);
+  const beatHasValue = useCallback(
+    (index) => (views[index]?.fields || []).some((f) => !isEmptyValue(values[f.slug])),
+    [views, values]
+  );
+  const beatComplete = useCallback(
+    (index) => {
+      const v = views[index];
+      if (!v) return false;
+      return v.fields.every(
+        (f) => fieldIsComplete(f) || !f.is_required && isEmptyValue(values[f.slug])
+      ) && (beatHasValue(index) || visited[index] === true);
+    },
+    [views, fieldIsComplete, values, beatHasValue, visited]
+  );
+  const activate = useCallback(
+    (index) => {
+      hasInteractedRef.current = true;
+      clearAutoAdvance();
+      setShakeCount(0);
+      setActiveIndex(index);
+      if (index !== REST) trackStepChange(index + 1);
+    },
+    [clearAutoAdvance, trackStepChange]
+  );
+  const advance = useCallback(() => {
+    hasInteractedRef.current = true;
+    clearAutoAdvance();
+    const view = views[activeIndex];
+    if (!view) return;
+    let failed = false;
+    for (const field of view.fields) {
+      const error = validateField(field);
+      if (error) {
+        applyFieldError(field.slug, error);
+        failed = true;
+      }
+    }
+    if (failed) {
+      setShakeCount((n) => n + 1);
+      return;
+    }
+    setShakeCount(0);
+    setVisited((prev) => ({ ...prev, [activeIndex]: true }));
+    if (activeIndex >= views.length - 1) {
+      setActiveIndex(REST);
+    } else {
+      setActiveIndex(activeIndex + 1);
+      trackStepChange(activeIndex + 2);
+    }
+  }, [views, activeIndex, validateField, applyFieldError, trackStepChange, clearAutoAdvance]);
+  const advanceRef = useRef(advance);
+  advanceRef.current = advance;
+  useEffect(() => {
+    const index = views.findIndex((v) => v.fields.some((f) => errors[f.slug]));
+    if (index >= 0 && index !== activeIndex) {
+      setActiveIndex(index);
+      setShakeCount((n) => n + 1);
+      trackStepChange(index + 1);
+    }
+  }, [errors]);
+  useEffect(() => {
+    if (!hasInteractedRef.current) return;
+    const timer = window.setTimeout(() => {
+      if (activeIndex === REST) {
+        formRef.current?.querySelector('[data-sk-part="stage-submit"]')?.focus();
+        return;
+      }
+      const root = formRef.current?.querySelector(
+        '[data-sk-beat-state="active"]'
+      );
+      if (!root) return;
+      const inputs = Array.from(
+        root.querySelectorAll(
+          "input:not([data-sk-honeypot]), textarea, select"
+        )
+      );
+      const errored = inputs.find((el) => {
+        const name = el.getAttribute("name");
+        return name ? !!errors[name] : false;
+      });
+      (errored || inputs[0])?.focus({ preventScroll: false });
+    }, 90);
+    return () => window.clearTimeout(timer);
+  }, [activeIndex, shakeCount]);
+  const handleFieldChange = useCallback(
+    (field, soloAutoAdvance) => (value) => {
+      hasInteractedRef.current = true;
+      setFieldValue(field.slug, value);
+      if (soloAutoAdvance && !isEmptyValue(value)) {
+        clearAutoAdvance();
+        autoAdvanceTimer.current = window.setTimeout(() => {
+          autoAdvanceTimer.current = null;
+          advanceRef.current();
+        }, 380);
+      }
+    },
+    [setFieldValue, clearAutoAdvance]
+  );
+  const travelInputs = useCallback(() => {
+    const root = formRef.current?.querySelector(
+      '[data-sk-beat-state="active"]'
+    );
+    if (!root) return [];
+    return Array.from(
+      root.querySelectorAll(
+        'input:not([data-sk-honeypot]):not([type="radio"]):not([type="checkbox"]), textarea, select'
+      )
+    );
+  }, []);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (activeIndex === REST) return;
+      const target = e.target;
+      const tag = target.tagName;
+      const isField = tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT";
+      if (!isField) return;
+      if (e.key === "Enter") {
+        if (tag === "TEXTAREA" && e.shiftKey) return;
+        e.preventDefault();
+        const inputs = travelInputs();
+        const index = inputs.indexOf(target);
+        if (index >= 0 && index < inputs.length - 1) inputs[index + 1].focus();
+        else advance();
+        return;
+      }
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        if (tag !== "INPUT") return;
+        const type = target.type;
+        if (type === "number" || type === "range") return;
+        e.preventDefault();
+        const inputs = travelInputs();
+        const index = inputs.indexOf(target);
+        if (e.key === "ArrowDown") {
+          if (index >= 0 && index < inputs.length - 1) inputs[index + 1].focus();
+          else advance();
+        } else {
+          if (index > 0) inputs[index - 1].focus();
+          else if (activeIndex > 0) activate(activeIndex - 1);
+        }
+      }
+    },
+    [activeIndex, advance, activate, travelInputs]
+  );
+  const handleSubmit = useCallback(
+    (e) => {
+      e.preventDefault();
+      if (isSubmitting) return;
+      if (activeIndex !== REST) advance();
+      else void submit();
+    },
+    [activeIndex, isSubmitting, advance, submit]
+  );
+  const handleFinaleSubmit = useCallback(() => {
+    hasInteractedRef.current = true;
+    clearAutoAdvance();
+    if (isSubmitting) return;
+    void submit();
+  }, [isSubmitting, submit, clearAutoAdvance]);
+  const ready = momentum.total > 0 ? momentum.done >= momentum.total : true;
+  const completeBeats = views.reduce((n, _v, i) => n + (beatComplete(i) ? 1 : 0), 0);
+  const activeView = activeIndex === REST ? null : views[activeIndex];
+  !!activeView && activeView.fields.length > 1;
+  const activeAllOptionalEmpty = !!activeView && activeView.fields.every((f) => !f.is_required && isEmptyValue(values[f.slug]));
+  const activeHasTextarea = !!activeView && activeView.fields.some((f) => f.field_type === "textarea");
+  const eyebrow = activeIndex !== REST && firstName && activeIndex === nameViewIndex + 1 ? { text: `Nice to meet you, ${firstName}.`, greet: true } : activeView?.step?.title ? { text: activeView.step.title, greet: false } : null;
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      ref: formRef,
+      className: `sk-form sk-stage ${className || ""}`,
+      "data-sk-part": "stage",
+      "data-sk-state": isSubmitting ? "submitting" : "idle",
+      "data-sk-ready": activeIndex === REST && ready && total > 0 ? "true" : void 0,
+      onSubmit: handleSubmit,
+      onKeyDown: handleKeyDown,
+      children: [
+        /* @__PURE__ */ jsx(StageStyles, {}),
+        /* @__PURE__ */ jsxs("header", { className: "sk-stage__head", "data-sk-part": "stage-head", children: [
+          /* @__PURE__ */ jsx("span", { className: "sk-stage__head-name", children: config.name }),
+          /* @__PURE__ */ jsx("span", { className: "sk-stage__head-meta", "data-sk-part": "stage-estimate", children: `Takes ${stageEstimate(questionCount)}` })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "sk-stage__hud", "data-sk-part": "stage-hud", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "sk-stage__meter",
+              "data-sk-part": "stage-meter",
+              role: "progressbar",
+              "aria-label": "Form progress",
+              "aria-valuemin": 0,
+              "aria-valuemax": total,
+              "aria-valuenow": completeBeats,
+              "aria-valuetext": `${completeBeats} of ${total} answered`,
+              children: views.map((v, i) => /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "sk-stage__seg",
+                  "data-sk-lit": beatComplete(i) ? "true" : void 0,
+                  "data-sk-live": i === activeIndex ? "true" : void 0,
+                  "aria-hidden": "true"
+                },
+                v.fields[0].id
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "sk-stage__counter",
+              "data-sk-part": "stage-counter",
+              "data-sk-ready": activeIndex === REST && ready ? "true" : void 0,
+              "aria-live": "polite",
+              children: activeIndex === REST ? ready ? "Ready" : `${completeBeats} / ${total}` : `${activeIndex + 1} / ${total}`
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "sk-stage__beats", "data-sk-part": "stage-beats", children: views.map((view, i) => {
+          const isActive = i === activeIndex;
+          const filled = visited[i] === true || beatHasValue(i);
+          const answers = view.fields.map((f) => formatAnswer(values[f.slug])).filter((a) => a !== null);
+          const summaryValue = answers.length ? answers.join(" \xB7 ") : filled ? "Skipped" : null;
+          const summaryLabel = view.step?.title || view.fields.map((f) => f.label).join(" \xB7 ");
+          const complete = beatComplete(i) && answers.length > 0;
+          return /* @__PURE__ */ jsxs(
+            "section",
+            {
+              className: "sk-stage__beat",
+              "data-sk-part": "stage-beat",
+              "data-sk-beat-state": isActive ? "active" : filled ? "filled" : "upcoming",
+              "data-sk-beat-filled": filled ? "true" : void 0,
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "sk-stage__collapse sk-stage__collapse--summary", children: /* @__PURE__ */ jsx("div", { inert: isActive ? true : void 0, children: /* @__PURE__ */ jsx("div", { className: "sk-stage__summary-inner", children: /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: "sk-stage__summary",
+                    "data-sk-part": "stage-summary",
+                    onClick: () => activate(i),
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "sk-stage__summary-idx", "aria-hidden": "true", children: String(i + 1).padStart(2, "0") }),
+                      /* @__PURE__ */ jsx("span", { className: "sk-stage__summary-label", children: summaryLabel }),
+                      summaryValue !== null && /* @__PURE__ */ jsxs(
+                        "span",
+                        {
+                          className: "sk-stage__summary-value" + (answers.length === 0 ? " sk-stage__summary-value--skipped" : ""),
+                          children: [
+                            summaryValue,
+                            complete && /* @__PURE__ */ jsx(SummaryTick, {})
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                ) }) }) }),
+                /* @__PURE__ */ jsx("div", { className: "sk-stage__collapse sk-stage__collapse--body", children: /* @__PURE__ */ jsx("div", { inert: isActive ? void 0 : true, children: /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "sk-stage__body-inner" + (isActive && shakeCount > 0 ? " sk-stage__shake" : ""),
+                    children: [
+                      isActive && eyebrow && /* @__PURE__ */ jsx(
+                        "p",
+                        {
+                          className: "sk-stage__eyebrow" + (eyebrow.greet ? " sk-stage__eyebrow--greet" : ""),
+                          "data-sk-part": "stage-eyebrow",
+                          children: eyebrow.text
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          className: "sk-stage__question" + (view.fields.length > 1 ? " sk-stage__question--group" : ""),
+                          "data-sk-part": "stage-question",
+                          children: [
+                            /* @__PURE__ */ jsx("div", { className: "sk-stage__fields", children: view.fields.map((f) => /* @__PURE__ */ jsx(
+                              FormField,
+                              {
+                                controls: fieldControls,
+                                field: { ...f, hide_label: false },
+                                value: values[f.slug],
+                                error: errors[f.slug],
+                                showValid: !!touched[f.slug] && !errors[f.slug] && fieldIsComplete(f),
+                                onChange: handleFieldChange(
+                                  f,
+                                  view.fields.length === 1 && AUTO_ADVANCE_TYPES.includes(f.field_type)
+                                ),
+                                onFocus: () => trackFieldFocus(f.slug),
+                                onBlur: () => trackFieldBlur(f.slug),
+                                classPrefix: "sk-stage"
+                              },
+                              f.id
+                            )) }),
+                            /* @__PURE__ */ jsxs("div", { className: "sk-stage__actions", "data-sk-part": "stage-actions", children: [
+                              /* @__PURE__ */ jsx(
+                                "button",
+                                {
+                                  type: "submit",
+                                  className: "sk-form__btn sk-form__btn--submit",
+                                  "data-sk-part": "stage-ok",
+                                  children: isActive && activeAllOptionalEmpty ? "Skip" : "OK"
+                                }
+                              ),
+                              /* @__PURE__ */ jsx("span", { className: "sk-stage__hint", "data-sk-part": "stage-hint", children: isActive && activeHasTextarea ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                                /* @__PURE__ */ jsx("kbd", { children: "Enter \u21B5" }),
+                                " to continue \xB7 ",
+                                /* @__PURE__ */ jsx("kbd", { children: "Shift + Enter" }),
+                                " ",
+                                "for a new line"
+                              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                                "press ",
+                                /* @__PURE__ */ jsx("kbd", { children: "Enter \u21B5" })
+                              ] }) })
+                            ] })
+                          ]
+                        }
+                      )
+                    ]
+                  },
+                  isActive ? shakeCount : 0
+                ) }) })
+              ]
+            },
+            view.fields[0].id
+          );
+        }) }),
+        /* @__PURE__ */ jsxs("div", { className: "sk-stage__finale", "data-sk-part": "stage-finale", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "sk-form__btn sk-form__btn--submit",
+              "data-sk-part": "stage-submit",
+              disabled: isSubmitting,
+              onClick: handleFinaleSubmit,
+              children: isSubmitting ? "Submitting..." : config.submit_button_text
+            }
+          ),
+          activeIndex === REST && ready && /* @__PURE__ */ jsxs("span", { className: "sk-stage__hint", children: [
+            "press ",
+            /* @__PURE__ */ jsx("kbd", { children: "Enter \u21B5" })
+          ] })
+        ] }),
+        submitError && /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "sk-stage__submit-error",
+            role: "alert",
+            style: { color: "var(--sk-error, #dc2626)" },
+            children: submitError
+          }
+        ),
+        honeypot
+      ]
+    }
+  );
+}
+
+export { FormStage };

package/dist/ManagedForm-3VRALWUD.js

@@ -0,0 +1,14 @@
+export { ManagedForm } from './chunk-5C4WVOVO.js';
+import './chunk-JMRESWQT.js';
+import './chunk-DXO6SBMD.js';
+import './chunk-QPEEKFCA.js';
+import './chunk-6CUFRMMF.js';
+import './chunk-AQSNPZY4.js';
+import './chunk-5SQK3D53.js';
+import './chunk-NJCTQH2P.js';
+import './chunk-L2V5PUFN.js';
+import './chunk-GJWI74ZZ.js';
+import './chunk-4WI3FU5L.js';
+import './chunk-HPUXKMNR.js';
+import './chunk-7ZHJIRM3.js';
+import './chunk-PKBMQBKP.js';

package/dist/ManagedNewsletterForm-A2FE6L5C.js

@@ -0,0 +1,62 @@
+import { NewsletterShell } from './chunk-SC4MZGWZ.js';
+import './chunk-GYF2ULVO.js';
+import { useForm } from './chunk-6CUFRMMF.js';
+import './chunk-AQSNPZY4.js';
+import './chunk-5SQK3D53.js';
+import './chunk-NJCTQH2P.js';
+import './chunk-L2V5PUFN.js';
+import './chunk-GJWI74ZZ.js';
+import './chunk-4WI3FU5L.js';
+import './chunk-HPUXKMNR.js';
+import './chunk-7ZHJIRM3.js';
+import './chunk-PKBMQBKP.js';
+import { jsx } from 'react/jsx-runtime';
+
+function ManagedNewsletterForm({
+  formSlug,
+  title,
+  description,
+  buttonText,
+  successMessage
+}) {
+  const {
+    form,
+    fetchError,
+    allFields,
+    values,
+    setFieldValue,
+    submit,
+    isSubmitting,
+    isComplete,
+    submitError
+  } = useForm(formSlug, { trackAnalytics: true });
+  if (fetchError) {
+    console.warn(`[Articles] NewsletterWidget: form "${formSlug}" could not be loaded`, fetchError);
+    return null;
+  }
+  if (!form) return null;
+  const emailField = allFields.find((f) => f.field_type === "email") ?? allFields.find((f) => f.slug === "email") ?? allFields[0];
+  if (!emailField) {
+    console.warn(`[Articles] NewsletterWidget: form "${formSlug}" has no fields`);
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    NewsletterShell,
+    {
+      title,
+      description,
+      buttonText,
+      email: String(values[emailField.slug] ?? ""),
+      onEmailChange: (value) => setFieldValue(emailField.slug, value),
+      onFormSubmit: (e) => {
+        e.preventDefault();
+        void submit();
+      },
+      status: isComplete ? "success" : isSubmitting ? "submitting" : submitError ? "error" : "idle",
+      successMessage,
+      errorMessage: submitError
+    }
+  );
+}
+
+export { ManagedNewsletterForm as default };