@alfadocs/ui-kit 0.38.0 → 0.39.0

package/dist/_chunks/sign-document-DId1p-nn.js

@@ -0,0 +1,315 @@
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { forwardRef as ie, useId as oe, useMemo as M, useRef as k, useState as b, useEffect as L, useCallback as c, useImperativeHandle as de } from "react";
+import { c as i } from "./index-D2ZczOXr.js";
+import { useTranslation as ce } from "react-i18next";
+import { P as le } from "./pdf-viewer-Cy6Ul3hZ.js";
+import { S as ge } from "./signature-capture-BRzCklg4.js";
+import { u as me } from "./registry-nPAVE19X.js";
+import { C as O } from "./circle-check-9AeSgJD_.js";
+const ue = {
+  id: "sign-document",
+  capabilities: ["submit"],
+  state: {
+    isReadComplete: {
+      type: "boolean",
+      descriptionKey: "signDocument.agent.state.isReadComplete",
+      description: "True when the reader has reached the last page (or read-gating is off).",
+      read: (n) => n.isReadComplete()
+    }
+  },
+  actions: {
+    submit: {
+      safety: "write",
+      descriptionKey: "signDocument.agent.actions.confirm",
+      description: "Confirm the current signature, emitting it via onSign. No-op if unsigned.",
+      invoke: (n) => n.confirm()
+    },
+    reset: {
+      safety: "destructive",
+      descriptionKey: "signDocument.agent.actions.reset",
+      description: "Clear the captured signature and return to unsigned.",
+      invoke: (n) => {
+        n.reset();
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "sign-document",
+      description: "Marks the SignDocument wrapper."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    }
+  }
+}, pe = i(
+  [
+    "ds:flex ds:flex-col ds:gap-[var(--spacing-md)]",
+    "ds:rounded-[var(--radius-md)] ds:border ds:border-[color:var(--card-border)]",
+    "ds:shadow-[var(--shadow-card)] ds:[.theme-accessible_&]:border-2",
+    "ds:bg-[var(--background)] ds:text-[var(--foreground)]",
+    "ds:p-[var(--spacing-md)]",
+    "ds:aria-disabled:opacity-[var(--opacity-50)] ds:aria-disabled:cursor-not-allowed"
+  ].join(" ")
+), fe = i(
+  ["type-heading-sm ds:text-[var(--foreground)]"].join(" ")
+), ve = i(
+  ["ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]"].join(" ")
+), be = i(
+  ["type-body-sm ds:font-medium ds:text-[var(--foreground)]"].join(" ")
+), he = i(
+  [
+    "ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)]",
+    "type-body-sm ds:text-[var(--muted-foreground)]"
+  ].join(" ")
+), ye = i(
+  [
+    "ds:flex ds:items-center ds:gap-[var(--spacing-xs)]",
+    "type-body-sm",
+    "ds:rounded-[var(--radius-sm)]",
+    "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)]",
+    "ds:pt-[var(--spacing-xs)] ds:pb-[var(--spacing-xs)]",
+    "ds:bg-[color-mix(in_srgb,var(--info)_10%,transparent)]",
+    "ds:text-[var(--foreground)]",
+    "ds:border ds:border-[color:color-mix(in_srgb,var(--info)_40%,transparent)]"
+  ].join(" ")
+), xe = i(
+  [
+    "ds:inline-flex ds:items-center ds:justify-center ds:self-start",
+    "ds:min-block-size-[var(--min-target-size)]",
+    "ds:min-inline-size-[var(--min-target-size)]",
+    "ds:gap-[var(--spacing-xs)]",
+    "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]",
+    "ds:rounded-[var(--radius-sm)]",
+    "ds:bg-[var(--primary)] ds:text-[var(--primary-foreground)]",
+    "ds:text-[length:var(--font-size-sm)] ds:font-medium",
+    "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+    "ds:hover:bg-[var(--primary-hover)]",
+    "ds:focus-visible:outline-[length:var(--focus-ring-width)]",
+    "ds:focus-visible:outline-solid",
+    "ds:focus-visible:outline-[var(--ring)]",
+    "ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+    "ds:forced-colors:focus-visible:outline-[CanvasText]",
+    "ds:disabled:opacity-[var(--opacity-50)] ds:disabled:cursor-not-allowed",
+    "ds:disabled:hover:bg-[var(--primary)]"
+  ].join(" ")
+), De = i(
+  [
+    "ds:flex ds:items-center ds:gap-[var(--spacing-sm)]",
+    "ds:rounded-[var(--radius-sm)]",
+    "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]",
+    "ds:pt-[var(--spacing-sm)] ds:pb-[var(--spacing-sm)]",
+    "ds:bg-[color-mix(in_srgb,var(--success)_12%,transparent)]",
+    "ds:text-[var(--foreground)]",
+    "ds:border ds:border-[color:color-mix(in_srgb,var(--success)_45%,transparent)]"
+  ].join(" ")
+);
+function Z(n, m) {
+  const a = new Date(n);
+  if (Number.isNaN(a.getTime())) return n;
+  try {
+    return new Intl.DateTimeFormat(m, {
+      dateStyle: "long",
+      timeStyle: "short"
+    }).format(a);
+  } catch {
+    return a.toISOString();
+  }
+}
+const Se = ie(
+  ({
+    id: n,
+    src: m,
+    documentTitle: a,
+    requireReadToEnd: _ = !0,
+    onSign: h,
+    onError: y,
+    signedAt: x = null,
+    disabled: D = !1,
+    readOnly: S = !1,
+    ariaLabel: N,
+    className: G
+  }, J) => {
+    const { t: s, i18n: V } = ce(), z = oe(), u = M(
+      () => `sign-doc-${z.replace(/[^a-zA-Z0-9-_]/g, "")}`,
+      [z]
+    ), R = `${u}-doc-heading`, H = `${u}-sign-label`, Q = `${u}-live`, C = `${u}-gate-hint`, p = k(null), [E, w] = b(0), [U, $] = b(1), [W, j] = b(!1), [T, l] = b(!1), g = x != null, X = D || S || g, f = k(h), v = k(y);
+    L(() => {
+      f.current = h, v.current = y;
+    }, [h, y]), L(() => {
+      j(!1), w(0), $(1), l(!1);
+    }, [m]);
+    const Y = c(
+      (e) => {
+        w(e.numPages), e.numPages <= 1 && j(!0);
+      },
+      []
+    ), q = c((e) => {
+      $(e), w((t) => (t > 0 && e >= t && j(!0), t));
+    }, []), ee = c((e) => {
+      var t;
+      (t = v.current) == null || t.call(v, e);
+    }, []), B = !g && !S;
+    L(() => {
+      if (!B) return;
+      const e = () => {
+        const F = p.current;
+        F && l(!F.isEmpty());
+      };
+      e();
+      const t = window.setInterval(e, 200);
+      return () => window.clearInterval(t);
+    }, [B]);
+    const o = !_ || W, K = !(!X && o) || !T, se = c((e) => {
+      var t;
+      (t = f.current) == null || t.call(f, e);
+    }, []), I = c(async () => {
+      const e = p.current;
+      return e ? e.confirm() : null;
+    }, []), A = c(() => {
+      var e;
+      (e = p.current) == null || e.clear(), l(!1);
+    }, []), P = M(
+      () => ({
+        reset: A,
+        confirm: I,
+        isReadComplete: () => o
+      }),
+      [A, I, o]
+    );
+    de(J, () => P, [P]), me(ue, P, n);
+    const ne = N ?? (a ? s("signDocument.regionLabelNamed", { title: a }) : s("signDocument.regionLabel")), ae = a ?? s("signDocument.documentLabel"), te = g ? s("signDocument.signedOn", {
+      date: Z(x, V.language)
+    }) : o ? s("signDocument.readyToSign") : "", re = o ? T ? "" : s("signDocument.signToEnable") : s("signDocument.scrollToEnd");
+    return /* @__PURE__ */ d(
+      "div",
+      {
+        role: "group",
+        "aria-labelledby": !N && a ? R : void 0,
+        "aria-label": N || !a ? ne : void 0,
+        "aria-disabled": D || void 0,
+        className: [pe(), G].filter(Boolean).join(" "),
+        "data-component": "sign-document",
+        "data-component-id": n,
+        "data-signed": g || void 0,
+        children: [
+          /* @__PURE__ */ r(
+            "span",
+            {
+              role: "status",
+              "aria-live": "polite",
+              "aria-atomic": "true",
+              className: "ds:sr-only",
+              "data-testid": "sign-document-live",
+              id: Q,
+              children: te
+            }
+          ),
+          /* @__PURE__ */ r("span", { className: "ds:sr-only", id: C, children: re }),
+          a ? /* @__PURE__ */ r("h2", { id: R, className: fe(), children: a }) : null,
+          /* @__PURE__ */ r(
+            le,
+            {
+              src: m,
+              ariaLabel: ae,
+              onLoadComplete: Y,
+              onPageChange: q,
+              onError: ee
+            }
+          ),
+          g ? (
+            /* ---- Already-signed, read-only ---- */
+            /* @__PURE__ */ d(
+              "div",
+              {
+                className: De(),
+                "data-testid": "sign-document-signed",
+                children: [
+                  /* @__PURE__ */ r(
+                    O,
+                    {
+                      "aria-hidden": "true",
+                      className: "ds:size-5 ds:text-[var(--success)] ds:shrink-0"
+                    }
+                  ),
+                  /* @__PURE__ */ d("span", { className: "type-body-sm", children: [
+                    /* @__PURE__ */ r("strong", { className: "ds:font-semibold", children: s("signDocument.signed") }),
+                    " — ",
+                    s("signDocument.signedOn", {
+                      date: Z(x, V.language)
+                    })
+                  ] })
+                ]
+              }
+            )
+          ) : S ? null : (
+            /* ---- Sign surface ---- */
+            /* @__PURE__ */ d(
+              "div",
+              {
+                className: ve(),
+                role: "group",
+                "aria-labelledby": H,
+                "aria-describedby": C,
+                children: [
+                  /* @__PURE__ */ d("div", { className: "ds:flex ds:flex-wrap ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)]", children: [
+                    /* @__PURE__ */ r("span", { id: H, className: be(), children: s("signDocument.signatureSection") }),
+                    E > 0 ? /* @__PURE__ */ r(
+                      "span",
+                      {
+                        className: he(),
+                        "data-testid": "sign-document-progress",
+                        children: s("signDocument.pageProgress", {
+                          current: U,
+                          total: E
+                        })
+                      }
+                    ) : null
+                  ] }),
+                  _ && !o ? /* @__PURE__ */ r("p", { className: ye(), "data-testid": "sign-document-hint", children: s("signDocument.scrollToEnd") }) : null,
+                  /* @__PURE__ */ r(
+                    ge,
+                    {
+                      ref: p,
+                      ariaLabel: s("signDocument.signatureSection"),
+                      disabled: D || !o,
+                      onStart: () => l(!0),
+                      onClear: () => l(!1),
+                      onConfirm: se
+                    }
+                  ),
+                  /* @__PURE__ */ d(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        K || I();
+                      },
+                      disabled: K,
+                      "aria-describedby": C,
+                      className: xe(),
+                      "data-testid": "sign-document-confirm",
+                      children: [
+                        /* @__PURE__ */ r(O, { "aria-hidden": "true", className: "ds:size-4" }),
+                        s("signDocument.confirm")
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          )
+        ]
+      }
+    );
+  }
+);
+Se.displayName = "SignDocument";
+export {
+  Se as S,
+  ue as s
+};
+//# sourceMappingURL=sign-document-DId1p-nn.js.map

package/dist/_chunks/{signature-capture-C-fF71xI.js → signature-capture-BRzCklg4.js}

@@ -48,7 +48,9 @@ const Pe = {
     "ds:signature-capture-alfadocs ds:flex ds:flex-col",
     "ds:gap-[var(--spacing-sm)]",
     "ds:bg-[var(--background)] ds:text-[var(--foreground)]",
-    "ds:rounded-[var(--radius-md)] ds:border ds:border-[color:var(--border)]",
+    "ds:rounded-[var(--radius-md)] ds:border ds:border-[color:var(--card-border)]",
+    "ds:shadow-[var(--shadow-card)]",
+    "ds:[.theme-accessible_&]:border-2",
     "ds:p-[var(--spacing-sm)]",
     "ds:aria-disabled:opacity-[var(--opacity-50)] ds:aria-disabled:cursor-not-allowed"
   ].join(" ")
@@ -138,7 +140,8 @@ const Pe = {
     "ds:inline-size-[var(--signature-width)]",
     "ds:block-size-[var(--signature-height)]",
     "ds:rounded-[var(--radius-sm)]",
-    "ds:border ds:border-[color:var(--border)]",
+    "ds:border ds:border-[color:var(--card-border)]",
+    "ds:[.theme-accessible_&]:border-2",
     "ds:bg-[var(--background)] ds:text-[var(--foreground)]",
     "ds:font-[family-name:var(--font-sans)]",
     "ds:italic",
@@ -187,13 +190,13 @@ async function Ie(t) {
   return "";
 }
 function He(t, n, s, i, a) {
-  const m = Math.max(
+  const v = Math.max(
     1,
     typeof window < "u" ? window.devicePixelRatio : 1
   ), z = document.createElement("canvas");
-  z.width = Math.floor(n * m), z.height = Math.floor(s * m);
+  z.width = Math.floor(n * v), z.height = Math.floor(s * v);
   const l = z.getContext("2d");
-  return l && (l.setTransform(m, 0, 0, m, 0, 0), l.fillStyle = a, l.fillRect(0, 0, n, s), l.fillStyle = i, l.font = "32px italic sans-serif", l.textAlign = "center", l.textBaseline = "middle", l.fillText(t, n / 2, s / 2, n - 16)), z;
+  return l && (l.setTransform(v, 0, 0, v, 0, 0), l.fillStyle = a, l.fillRect(0, 0, n, s), l.fillStyle = i, l.font = "32px italic sans-serif", l.textAlign = "center", l.textBaseline = "middle", l.fillText(t, n / 2, s / 2, n - 16)), z;
 }
 const Ue = ze(
   ({
@@ -202,7 +205,7 @@ const Ue = ze(
     onClear: s,
     onStart: i,
     width: a = 400,
-    height: m = 200,
+    height: v = 200,
     penColor: z,
     backgroundColor: l,
     allowTypedFallback: ce = !0,
@@ -213,13 +216,13 @@ const Ue = ze(
     const { t: o } = Me(), G = Se(), Z = `${ae(
       () => `sig-${G.replace(/[^a-zA-Z0-9-_]/g, "")}`,
       [G]
-    )}-live`, F = C(null), J = C(null), V = C(null), K = C(null), y = C(null), [d, ge] = N("draw"), [S, L] = N(""), [pe, I] = N(!1), ve = C("empty"), [me, be] = N(""), [b, he] = N(""), [w, ye] = N(""), j = C(i), E = C(s), B = C(n);
+    )}-live`, F = C(null), J = C(null), V = C(null), K = C(null), y = C(null), [d, ge] = N("draw"), [S, L] = N(""), [pe, I] = N(!1), me = C("empty"), [ve, be] = N(""), [b, he] = N(""), [w, ye] = N(""), j = C(i), E = C(s), B = C(n);
     P(() => {
       j.current = i, E.current = s, B.current = n;
     }, [i, s, n]);
     const g = T(
       (e) => {
-        ve.current = e, be(o(`signature.state.${e}`));
+        me.current = e, be(o(`signature.state.${e}`));
       },
       [o]
     );
@@ -272,10 +275,10 @@ const Ue = ze(
         ), p = Math.max(1, Math.floor(r.width * c)), x = Math.max(1, Math.floor(r.height * c)), A = Math.min(p, Q), k = Math.min(x, Q);
         if (e.width === A && e.height === k)
           return;
-        const v = y.current, M = v ? v.toData() : null;
+        const m = y.current, M = m ? m.toData() : null;
         e.width = A, e.height = k;
         const D = e.getContext("2d");
-        D && D.scale(c, c), v && (w && (v.backgroundColor = w), b && (v.penColor = b), v.clear(), M && M.length > 0 && v.fromData(M));
+        D && D.scale(c, c), m && (w && (m.backgroundColor = w), b && (m.penColor = b), m.clear(), M && M.length > 0 && m.fromData(M));
       },
       [w, b]
     );
@@ -304,18 +307,18 @@ const Ue = ze(
       if (d === "typed") return S.trim().length === 0;
       const e = y.current;
       return e ? e.isEmpty() : !0;
-    }, [d, S]), O = T(async () => {
+    }, [d, S]), _ = T(async () => {
       var ne;
       const e = de(
         typeof a == "number" ? `${a}` : String(a)
       ), r = de(
-        typeof m == "number" ? `${m}` : String(m)
+        typeof v == "number" ? `${v}` : String(v)
       ), c = d === "draw" ? V.current ?? J.current ?? F.current : K.current ?? F.current, p = c == null ? void 0 : c.getBoundingClientRect(), x = e ?? (p ? p.width : 400), A = r ?? (p ? p.height : 200);
-      let k = "", v = "", M;
+      let k = "", m = "", M;
       if (d === "draw") {
         const u = y.current;
         if (!u || u.isEmpty()) return null;
-        k = u.toDataURL("image/png"), v = u.toSVG(), M = u.toData();
+        k = u.toDataURL("image/png"), m = u.toSVG(), M = u.toData();
       } else {
         const u = S.trim();
         if (u.length === 0) return null;
@@ -327,7 +330,7 @@ const Ue = ze(
           w || "transparent"
         ).toDataURL("image/png");
         const W = u.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
-        v = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${x} ${A}" width="${x}" height="${A}"><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="sans-serif" font-style="italic" font-size="32" fill="${b || "currentColor"}" letter-spacing="3">${W}</text></svg>`;
+        m = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${x} ${A}" width="${x}" height="${A}"><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="sans-serif" font-style="italic" font-size="32" fill="${b || "currentColor"}" letter-spacing="3">${W}</text></svg>`;
       }
       const D = x * 25.4 / 96, ke = A * 25.4 / 96, Ce = (/* @__PURE__ */ new Date()).toISOString();
       let te = "";
@@ -337,7 +340,7 @@ const Ue = ze(
       }
       const re = {
         png: k,
-        svg: v,
+        svg: m,
         widthMm: D,
         heightMm: ke,
         capturedAt: Ce,
@@ -345,23 +348,23 @@ const Ue = ze(
         strokes: M
       };
       return g("captured"), (ne = B.current) == null || ne.call(B, re), re;
-    }, [d, S, a, m, b, w, g]), _ = ae(
+    }, [d, S, a, v, b, w, g]), O = ae(
       () => ({
         clear: H,
         undo: U,
         isEmpty: Y,
-        confirm: O
+        confirm: _
       }),
-      [H, U, Y, O]
+      [H, U, Y, _]
     );
-    Re(fe, () => _, [_]), Ne(Pe, _, t);
+    Re(fe, () => O, [O]), Ne(Pe, O, t);
     const we = d === "typed" ? S.trim().length > 0 : pe, ee = f || !we, xe = {
       "--signature-width": oe(
         a,
         "var(--signature-default-width)"
       ),
       "--signature-height": oe(
-        m,
+        v,
         "var(--signature-default-height)"
       )
     };
@@ -421,7 +424,7 @@ const Ue = ze(
               "aria-atomic": "true",
               className: "ds:sr-only",
               "data-testid": "signature-live",
-              children: me
+              children: ve
             }
           ),
           /* @__PURE__ */ X(
@@ -473,7 +476,7 @@ const Ue = ze(
                   {
                     type: "button",
                     onClick: () => {
-                      ee || O();
+                      ee || _();
                     },
                     "aria-disabled": ee || void 0,
                     "aria-describedby": Z,
@@ -495,4 +498,4 @@ export {
   Ue as S,
   Pe as s
 };
-//# sourceMappingURL=signature-capture-C-fF71xI.js.map
+//# sourceMappingURL=signature-capture-BRzCklg4.js.map