@josephomills/esign 0.8.0 → 0.9.0

package/dist/ui/index.js

@@ -313,7 +313,7 @@ function PdfViewer({ url, placements, workerSrc, primaryColor = "#4f46e5" }) {
                     opacity: 0.85,
                     whiteSpace: "nowrap"
                   },
-                  children: "\u270D Sign here"
+                  children: pl.type === "date" ? "\u{1F4C5} Select a date" : "\u270D Sign here"
                 }
               )
             },
@@ -324,6 +324,27 @@ function PdfViewer({ url, placements, workerSrc, primaryColor = "#4f46e5" }) {
     )
   ] });
 }
+
+// src/shared/fields.ts
+var DATE_FORMATS = [
+  "DD/MM/YYYY",
+  "MM/DD/YYYY",
+  "YYYY-MM-DD",
+  "D MMM YYYY",
+  "Do MMM YYYY",
+  "Do MMMM YYYY",
+  "MMMM D, YYYY"
+];
+var DEFAULT_DATE_FORMAT = "Do MMMM YYYY";
+var DATE_FORMAT_LABELS = {
+  "DD/MM/YYYY": "02/10/2026",
+  "MM/DD/YYYY": "10/02/2026",
+  "YYYY-MM-DD": "2026-10-02",
+  "D MMM YYYY": "2 Oct 2026",
+  "Do MMM YYYY": "2nd Oct 2026",
+  "Do MMMM YYYY": "2nd October 2026",
+  "MMMM D, YYYY": "October 2, 2026"
+};
 var clamp = (v, min, max) => Math.min(Math.max(v, min), max);
 var MIN_W = 0.04;
 var MIN_H = 0.02;
@@ -341,6 +362,8 @@ function FieldDesigner({
   const [failed, setFailed] = useState(false);
   const [selectedId, setSelectedId] = useState(value[0]?.id ?? null);
   const [drawMode, setDrawMode] = useState(false);
+  const [pendingType, setPendingType] = useState("signature");
+  const [configId, setConfigId] = useState(null);
   const [drag, setDrag] = useState(null);
   const [live, setLive] = useState(null);
   const stageRef = useRef(null);
@@ -433,15 +456,21 @@ function FieldDesigner({
   function onPointerUp() {
     if (drag && live && live.w >= MIN_W && live.h >= MIN_H) {
       if (drag.mode === "new") {
+        const isDate = pendingType === "date";
+        const n = value.filter((v) => v.type === pendingType).length + 1;
+        const base = isDate ? "Date" : "Signature";
         const f = {
           id: newId(),
-          label: value.length === 0 ? "Signature" : `Signature ${value.length + 1}`,
+          label: n === 1 ? base : `${base} ${n}`,
+          type: pendingType,
+          ...isDate ? { dateFormat: DEFAULT_DATE_FORMAT, minDate: null } : {},
           page,
           ...live
         };
         onChange([...value, f]);
         setSelectedId(f.id);
         setDrawMode(false);
+        if (isDate) setConfigId(f.id);
       } else {
         onChange(value.map((x) => x.id === drag.id ? { ...x, ...live } : x));
       }
@@ -452,10 +481,15 @@ function FieldDesigner({
   function removeField(id) {
     onChange(value.filter((f) => f.id !== id));
     if (selectedId === id) setSelectedId(null);
+    if (configId === id) setConfigId(null);
   }
   function rename(id, label) {
     onChange(value.map((f) => f.id === id ? { ...f, label } : f));
   }
+  function setConfig(id, patch) {
+    onChange(value.map((f) => f.id === id ? { ...f, ...patch } : f));
+  }
+  const configField = value.find((f) => f.id === configId && f.type === "date") ?? null;
   const handle = (id, geom, c) => {
     const cx = c[1] === "w" ? geom.x : geom.x + geom.w;
     const cy = c[0] === "n" ? geom.y : geom.y + geom.h;
@@ -501,25 +535,35 @@ function FieldDesigner({
             flexWrap: "wrap"
           },
           children: [
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => setDrawMode((d) => !d),
-                style: {
-                  fontSize: 13,
-                  fontWeight: 600,
-                  padding: "5px 12px",
-                  borderRadius: 6,
-                  border: `1px solid ${primaryColor}`,
-                  background: drawMode ? primaryColor : "#fff",
-                  color: drawMode ? "#fff" : primaryColor,
-                  cursor: "pointer"
+            ["signature", "date"].map((t) => {
+              const active = drawMode && pendingType === t;
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    if (active) setDrawMode(false);
+                    else {
+                      setPendingType(t);
+                      setDrawMode(true);
+                    }
+                  },
+                  style: {
+                    fontSize: 13,
+                    fontWeight: 600,
+                    padding: "5px 12px",
+                    borderRadius: 6,
+                    border: `1px solid ${primaryColor}`,
+                    background: active ? primaryColor : "#fff",
+                    color: active ? "#fff" : primaryColor,
+                    cursor: "pointer"
+                  },
+                  children: t === "date" ? "+ Date" : "+ Signature"
                 },
-                children: drawMode ? "Now drag on the page\u2026" : "+ Add field"
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#6b7280" }, children: "or drag on the page (desktop)." }),
+                t
+              );
+            }),
+            /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#6b7280" }, children: drawMode ? `Drag a ${pendingType} box on the page\u2026` : "or drag on the page." }),
             numPages > 1 ? /* @__PURE__ */ jsxs("label", { style: { marginLeft: "auto", fontSize: 13, color: "#374151" }, children: [
               "Page",
               " ",
@@ -590,8 +634,9 @@ function FieldDesigner({
                           padding: "0 4px"
                         },
                         children: [
-                          "\u270D ",
-                          f.label || "Signature"
+                          f.type === "date" ? "\u{1F4C5}" : "\u270D",
+                          " ",
+                          f.label || (f.type === "date" ? "Date" : "Signature")
                         ]
                       }
                     )
@@ -630,7 +675,39 @@ function FieldDesigner({
                       },
                       children: "\xD7"
                     }
-                  )
+                  ),
+                  f.type === "date" ? /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": `Configure ${f.label}`,
+                      onPointerDown: (e) => e.stopPropagation(),
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        setConfigId(f.id);
+                      },
+                      style: {
+                        position: "absolute",
+                        left: `${geom.x * 100}%`,
+                        top: `${geom.y * 100}%`,
+                        transform: "translate(-50%, -50%)",
+                        marginTop: -18,
+                        width: 22,
+                        height: 22,
+                        borderRadius: "50%",
+                        background: "#fff",
+                        color: primaryColor,
+                        border: `2px solid ${primaryColor}`,
+                        boxShadow: "0 1px 3px rgba(0,0,0,0.3)",
+                        fontSize: 12,
+                        lineHeight: "14px",
+                        cursor: "pointer",
+                        padding: 0,
+                        touchAction: "none"
+                      },
+                      children: "\u2699"
+                    }
+                  ) : null
                 ] }) : null
               ] }, f.id);
             }),
@@ -652,11 +729,99 @@ function FieldDesigner({
             ) : null
           ]
         }
-      )
+      ),
+      configField ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            marginTop: 10,
+            border: `1px solid ${primaryColor}66`,
+            borderRadius: 8,
+            padding: 12,
+            background: "#fff",
+            fontSize: 13,
+            color: "#374151"
+          },
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  marginBottom: 8
+                },
+                children: [
+                  /* @__PURE__ */ jsxs("strong", { children: [
+                    "\u{1F4C5} ",
+                    configField.label || "Date"
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setConfigId(null),
+                      style: {
+                        fontSize: 12,
+                        padding: "3px 10px",
+                        borderRadius: 6,
+                        border: `1px solid ${primaryColor}`,
+                        background: primaryColor,
+                        color: "#fff",
+                        cursor: "pointer"
+                      },
+                      children: "Done"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs("label", { style: { display: "block", marginBottom: 8 }, children: [
+              "Display format",
+              /* @__PURE__ */ jsx(
+                "select",
+                {
+                  value: configField.dateFormat ?? DEFAULT_DATE_FORMAT,
+                  onChange: (e) => setConfig(configField.id, { dateFormat: e.target.value }),
+                  style: {
+                    display: "block",
+                    marginTop: 4,
+                    width: "100%",
+                    padding: "4px 6px",
+                    borderRadius: 6,
+                    border: "1px solid #d1d5db"
+                  },
+                  children: DATE_FORMATS.map((fmt) => /* @__PURE__ */ jsx("option", { value: fmt, children: DATE_FORMAT_LABELS[fmt] }, fmt))
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("label", { style: { display: "block" }, children: [
+              "Earliest date",
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "date",
+                  value: configField.minDate ?? "",
+                  onChange: (e) => setConfig(configField.id, { minDate: e.target.value || null }),
+                  style: {
+                    display: "block",
+                    marginTop: 4,
+                    padding: "4px 6px",
+                    borderRadius: 6,
+                    border: "1px solid #d1d5db"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { style: { color: "#9ca3af", fontSize: 11 }, children: "Leave blank to use the document's creation date." })
+            ] })
+          ]
+        }
+      ) : null
     ] }),
     hideFieldList ? null : /* @__PURE__ */ jsxs("div", { style: { flex: "1 1 200px", minWidth: 180, maxWidth: 300 }, children: [
       /* @__PURE__ */ jsxs("p", { style: { fontSize: 13, fontWeight: 600, color: "#374151", margin: "0 0 8px" }, children: [
-        "Signature fields (",
+        "Fields (",
         value.length,
         ")"
       ] }),
@@ -678,6 +843,7 @@ function FieldDesigner({
             cursor: "pointer"
           },
           children: [
+            /* @__PURE__ */ jsx("span", { style: { fontSize: 13 }, children: f.type === "date" ? "\u{1F4C5}" : "\u270D" }),
             /* @__PURE__ */ jsx(
               "input",
               {
@@ -699,6 +865,27 @@ function FieldDesigner({
               "p",
               f.page
             ] }),
+            f.type === "date" ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": `Configure ${f.label}`,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setConfigId(f.id);
+                },
+                style: {
+                  border: "none",
+                  background: "transparent",
+                  color: "#6b7280",
+                  cursor: "pointer",
+                  fontSize: 13,
+                  lineHeight: 1,
+                  padding: 0
+                },
+                children: "\u2699"
+              }
+            ) : null,
             /* @__PURE__ */ jsx(
               "button",
               {
@@ -731,9 +918,12 @@ function SigningExperience(props) {
   const primary = props.branding?.primaryColor ?? "#4f46e5";
   const [signaturePng, setSignaturePng] = useState(null);
   const [consent, setConsent] = useState({ signerName: "", consent: false });
+  const [dateValues, setDateValues] = useState({});
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState(null);
-  const canSubmit = !!signaturePng && consent.consent && consent.signerName.trim().length > 0 && !submitting;
+  const dateFields = (props.placements ?? []).filter((p) => p.type === "date" && p.id);
+  const allDatesFilled = dateFields.every((f) => dateValues[f.id]);
+  const canSubmit = !!signaturePng && consent.consent && consent.signerName.trim().length > 0 && allDatesFilled && !submitting;
   async function submit() {
     if (!canSubmit) return;
     setSubmitting(true);
@@ -745,7 +935,8 @@ function SigningExperience(props) {
         body: JSON.stringify({
           signaturePng,
           signerName: consent.signerName.trim(),
-          consent: true
+          consent: true,
+          dateValues
         })
       });
       if (!res.ok) {
@@ -790,6 +981,31 @@ function SigningExperience(props) {
             /* @__PURE__ */ jsx("label", { style: { fontSize: 13, fontWeight: 600, color: "#374151" }, children: "Your signature" }),
             /* @__PURE__ */ jsx("div", { style: { marginTop: 6 }, children: /* @__PURE__ */ jsx(SignaturePad, { primaryColor: primary, onChange: setSignaturePng }) })
           ] }),
+          dateFields.length > 0 ? /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: dateFields.map((f) => /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("label", { style: { fontSize: 13, fontWeight: 600, color: "#374151" }, children: [
+              "\u{1F4C5} ",
+              f.label || "Date"
+            ] }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "date",
+                value: dateValues[f.id] ?? "",
+                min: f.minDate ?? void 0,
+                onChange: (e) => setDateValues((prev) => ({ ...prev, [f.id]: e.target.value })),
+                style: {
+                  display: "block",
+                  marginTop: 6,
+                  padding: "10px 12px",
+                  borderRadius: 8,
+                  border: "1px solid #d1d5db",
+                  fontSize: 15,
+                  width: "100%",
+                  maxWidth: 280
+                }
+              }
+            )
+          ] }, f.id)) }) : null,
           /* @__PURE__ */ jsx(ConsentBlock, { value: consent, onChange: setConsent, primaryColor: primary }),
           error ? /* @__PURE__ */ jsx(
             "div",