@alfadocs/ui-kit 0.38.0 → 0.40.0

package/dist/_chunks/sign-document-CpLDZ6Db.js

@@ -0,0 +1,316 @@
+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-DoiBd6i3.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:inline-size-full ds:items-center ds:justify-center",
+    "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:pt-[var(--spacing-md)] ds:pb-[var(--spacing-md)]",
+    "ds:rounded-[var(--radius-sm)]",
+    "ds:bg-[var(--primary)] ds:text-[var(--primary-foreground)]",
+    "ds:text-[length:var(--font-size-base)] 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: z } = ce(), V = oe(), u = M(
+      () => `sign-doc-${V.replace(/[^a-zA-Z0-9-_]/g, "")}`,
+      [V]
+    ), 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, z.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, z.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-CpLDZ6Db.js.map