@unlev/exeq 0.1.9 → 0.1.10

package/dist/index.mjs

@@ -1221,8 +1221,8 @@ function FieldNavigator({
   currentFieldId,
   onNavigate,
   allRequiredFilled,
-  onSubmit,
-  submitLabel = "Complete"
+  onComplete,
+  completeLabel = "Complete"
 }) {
   const currentIndex = fields.findIndex((f) => f.id === currentFieldId);
   const hasPrev = currentIndex > 0;
@@ -1273,10 +1273,10 @@ function FieldNavigator({
     /* @__PURE__ */ jsx5(
       "button",
       {
-        onClick: onSubmit,
+        onClick: onComplete,
         disabled: !allRequiredFilled,
-        className: "submit-btn",
-        children: submitLabel
+        className: "complete-btn",
+        children: completeLabel
       }
     )
   ] });
@@ -1528,20 +1528,8 @@ function SignerView({
       }));
     }
   }, [fields.filter((f) => f.type === "signature" && f.value).length]);
-  const stepLabel = isLastSigner ? submitLabel || "Complete" : `Next: ${signerOrder[currentSignerIndex + 1]}`;
   return /* @__PURE__ */ jsxs6("div", { className: "signer-layout", ref: containerRef, children: [
     loading && /* @__PURE__ */ jsx6("div", { className: "loading-indicator", children: "Loading document..." }),
-    isMultiSigner && /* @__PURE__ */ jsx6("div", { className: "signer-progress-bar", children: signerOrder.map((role, i) => /* @__PURE__ */ jsxs6(
-      "div",
-      {
-        className: `signer-progress-step ${i < currentSignerIndex ? "completed" : ""} ${i === currentSignerIndex ? "active" : ""} ${i > currentSignerIndex ? "upcoming" : ""}`,
-        children: [
-          /* @__PURE__ */ jsx6("div", { className: "signer-progress-dot", children: i < currentSignerIndex ? "\u2713" : i + 1 }),
-          /* @__PURE__ */ jsx6("span", { className: "signer-progress-label", children: role })
-        ]
-      },
-      role
-    )) }),
     /* @__PURE__ */ jsxs6("div", { className: "signer-content", children: [
       /* @__PURE__ */ jsx6("div", { className: "signer-pdf-area", children: pages.length > 0 && /* @__PURE__ */ jsx6(
         PdfViewer,
@@ -1556,65 +1544,77 @@ function SignerView({
         }
       ) }),
       /* @__PURE__ */ jsxs6("div", { className: "signer-panel", children: [
-        /* @__PURE__ */ jsxs6("div", { className: "signer-role-indicator", children: [
-          /* @__PURE__ */ jsx6("span", { className: "signer-role-indicator-label", children: "Signing as" }),
-          /* @__PURE__ */ jsx6("strong", { children: signer })
+        /* @__PURE__ */ jsxs6("div", { className: "signer-panel-header", children: [
+          /* @__PURE__ */ jsxs6("div", { className: "signer-role-indicator", children: [
+            /* @__PURE__ */ jsx6("span", { className: "signer-role-indicator-label", children: "Signing as" }),
+            /* @__PURE__ */ jsx6("strong", { children: signer })
+          ] }),
+          isMultiSigner && /* @__PURE__ */ jsxs6("div", { className: "signer-step-badge", children: [
+            "Step ",
+            currentSignerIndex + 1,
+            " of ",
+            signerOrder.length
+          ] })
         ] }),
-        selectedField && isFieldEditable && /* @__PURE__ */ jsxs6("div", { className: "signer-field-input", children: [
-          /* @__PURE__ */ jsx6("h3", { children: selectedField.label }),
-          selectedField.required && /* @__PURE__ */ jsx6("span", { className: "required-badge", children: "Required" }),
-          (selectedField.type === "signature" || selectedField.type === "initials") && /* @__PURE__ */ jsx6(
-            SignatureCanvas,
-            {
-              width: 280,
-              height: selectedField.type === "initials" ? 80 : 120,
-              onSign: (dataUrl) => handleFieldUpdate(selectedField.id, dataUrl),
-              initialValue: selectedField.value
-            }
-          ),
-          selectedField.type === "text" && /* @__PURE__ */ jsx6(
-            "input",
-            {
-              type: selectedField.textSubtype === "email" ? "email" : selectedField.textSubtype === "number" ? "number" : selectedField.textSubtype === "phone" ? "tel" : selectedField.textSubtype === "date" ? "date" : "text",
-              value: selectedField.value,
-              onChange: (e) => handleFieldUpdate(selectedField.id, e.target.value),
-              placeholder: selectedField.placeholder,
-              className: "signer-text-input"
-            }
-          ),
-          selectedField.type === "checkbox" && /* @__PURE__ */ jsxs6("label", { className: "signer-checkbox-label", children: [
-            /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsxs6("div", { className: "signer-panel-body", children: [
+          selectedField && isFieldEditable && /* @__PURE__ */ jsxs6("div", { className: "signer-field-input", children: [
+            /* @__PURE__ */ jsx6("h3", { children: selectedField.label }),
+            selectedField.required && /* @__PURE__ */ jsx6("span", { className: "required-badge", children: "Required" }),
+            (selectedField.type === "signature" || selectedField.type === "initials") && /* @__PURE__ */ jsx6(
+              SignatureCanvas,
+              {
+                width: 280,
+                height: selectedField.type === "initials" ? 80 : 120,
+                onSign: (dataUrl) => handleFieldUpdate(selectedField.id, dataUrl),
+                initialValue: selectedField.value
+              }
+            ),
+            selectedField.type === "text" && /* @__PURE__ */ jsx6(
               "input",
               {
-                type: "checkbox",
-                checked: selectedField.value === "true",
-                onChange: (e) => handleFieldUpdate(selectedField.id, e.target.checked ? "true" : "")
+                type: selectedField.textSubtype === "email" ? "email" : selectedField.textSubtype === "number" ? "number" : selectedField.textSubtype === "phone" ? "tel" : selectedField.textSubtype === "date" ? "date" : "text",
+                value: selectedField.value,
+                onChange: (e) => handleFieldUpdate(selectedField.id, e.target.value),
+                placeholder: selectedField.placeholder,
+                className: "signer-text-input"
               }
             ),
-            selectedField.placeholder || "Check this box"
+            selectedField.type === "checkbox" && /* @__PURE__ */ jsxs6("label", { className: "signer-checkbox-label", children: [
+              /* @__PURE__ */ jsx6(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: selectedField.value === "true",
+                  onChange: (e) => handleFieldUpdate(selectedField.id, e.target.checked ? "true" : "")
+                }
+              ),
+              selectedField.placeholder || "Check this box"
+            ] }),
+            selectedField.type === "signed-date" && /* @__PURE__ */ jsx6("div", { className: "signer-date-display", children: selectedField.value || "Will auto-fill when you sign" })
           ] }),
-          selectedField.type === "signed-date" && /* @__PURE__ */ jsx6("div", { className: "signer-date-display", children: selectedField.value || "Will auto-fill when you sign" })
-        ] }),
-        selectedField && !isFieldEditable && /* @__PURE__ */ jsxs6("div", { className: "signer-field-readonly", children: [
-          /* @__PURE__ */ jsx6("h3", { children: selectedField.label }),
-          /* @__PURE__ */ jsx6("p", { children: "This field belongs to another signer." })
+          selectedField && !isFieldEditable && /* @__PURE__ */ jsxs6("div", { className: "signer-field-readonly", children: [
+            /* @__PURE__ */ jsx6("h3", { children: selectedField.label }),
+            /* @__PURE__ */ jsx6("p", { children: "This field belongs to another signer." })
+          ] }),
+          !selectedField && editableFields.length > 0 && /* @__PURE__ */ jsx6("div", { className: "panel-empty", children: "Select a field to fill it in, or use the navigation below." })
         ] }),
-        !selectedField && editableFields.length > 0 && /* @__PURE__ */ jsx6("div", { className: "panel-empty", children: "Select a field to fill it in, or use the navigation below." }),
-        /* @__PURE__ */ jsx6(
-          FieldNavigator,
-          {
-            fields: editableFields,
-            currentFieldId: selectedFieldId,
-            onNavigate: handleNavigate,
-            allRequiredFilled,
-            onSubmit: handleAdvanceOrSubmit,
-            submitLabel: stepLabel
-          }
-        ),
-        submitting && /* @__PURE__ */ jsx6("div", { className: "loading-indicator", children: "Generating PDF..." }),
-        /* @__PURE__ */ jsxs6("div", { className: "powered-by", children: [
-          "Powered by ",
-          /* @__PURE__ */ jsx6("a", { href: "https://exeq.org", target: "_blank", rel: "noopener noreferrer", children: "Exeq.org" })
+        /* @__PURE__ */ jsxs6("div", { className: "signer-panel-footer", children: [
+          /* @__PURE__ */ jsx6(
+            FieldNavigator,
+            {
+              fields: editableFields,
+              currentFieldId: selectedFieldId,
+              onNavigate: handleNavigate,
+              allRequiredFilled,
+              onComplete: handleAdvanceOrSubmit,
+              completeLabel: isLastSigner ? submitLabel || "Complete" : `Next: ${signerOrder[currentSignerIndex + 1]}`
+            }
+          ),
+          submitting && /* @__PURE__ */ jsx6("div", { className: "loading-indicator", children: "Generating PDF..." }),
+          /* @__PURE__ */ jsxs6("div", { className: "powered-by", children: [
+            "Powered by ",
+            /* @__PURE__ */ jsx6("a", { href: "https://exeq.org", target: "_blank", rel: "noopener noreferrer", children: "Exeq.org" })
+          ] })
         ] })
       ] })
     ] })