@alfadocs/ui-kit-debug 0.52.0 → 0.53.0

package/dist/_chunks/{signature-capture-CpMBhqQ9.js → signature-capture-CHbrKoA_.js}

@@ -1,10 +1,10 @@
-import { jsxs as W, jsx as k } from "react/jsx-runtime";
-import { forwardRef as Ce, useId as Se, useMemo as se, useRef as z, useState as N, useEffect as P, useCallback as T, useImperativeHandle as Re } from "react";
-import Ae from "signature_pad";
+import { jsxs as q, jsx as b } from "react/jsx-runtime";
+import { forwardRef as Ve, useId as Ae, useMemo as ie, useRef as z, useState as A, useEffect as N, useCallback as P, useImperativeHandle as Me } from "react";
+import Ne from "signature_pad";
 import { c as R } from "./index-D2ZczOXr.js";
-import { useTranslation as Me } from "react-i18next";
-import { u as Ne } from "./registry-nPAVE19X.js";
-const Pe = {
+import { useTranslation as Pe } from "react-i18next";
+import { u as Te } from "./registry-nPAVE19X.js";
+const je = {
   id: "signature-capture",
   capabilities: ["edit_inline", "submit"],
   state: {
@@ -43,7 +43,7 @@ const Pe = {
       description: "Sourced from the id prop."
     }
   }
-}, Te = R(
+}, Be = R(
   [
     "ds:signature-capture-alfadocs ds:flex ds:flex-col",
     "ds:gap-[var(--spacing-sm)]",
@@ -54,7 +54,7 @@ const Pe = {
     "ds:p-[var(--spacing-sm)]",
     "ds:aria-disabled:opacity-[var(--opacity-50)] ds:aria-disabled:cursor-not-allowed"
   ].join(" ")
-), Ve = R(
+), Ee = R(
   [
     "ds:relative ds:block",
     "ds:inline-size-[var(--signature-width)]",
@@ -69,7 +69,7 @@ const Pe = {
     "ds:focus-visible:outline-[var(--ring)]",
     "ds:forced-colors:focus-visible:outline-[CanvasText]"
   ].join(" ")
-), je = R(
+), $e = R(
   [
     "ds:block",
     "ds:inline-size-full",
@@ -77,11 +77,11 @@ const Pe = {
     "ds:touch-none",
     "ds:select-none"
   ].join(" ")
-), Ee = R(
+), De = R(
   ["ds:flex ds:items-stretch ds:flex-wrap ds:gap-[var(--spacing-sm)]"].join(
     " "
   )
-), ae = R(
+), oe = R(
   [
     "ds:inline-flex ds:flex-1 ds:items-center ds:justify-center",
     "ds:[min-block-size:var(--min-target-size)]",
@@ -102,7 +102,7 @@ const Pe = {
     "ds:forced-colors:focus-visible:outline-[CanvasText]",
     "ds:aria-disabled:opacity-[var(--opacity-50)] ds:aria-disabled:cursor-not-allowed"
   ].join(" ")
-), Be = R(
+), Fe = R(
   [
     "ds:inline-flex ds:flex-1 ds:items-center ds:justify-center",
     "ds:[min-block-size:var(--min-target-size)]",
@@ -121,7 +121,7 @@ const Pe = {
     "ds:forced-colors:focus-visible:outline-[CanvasText]",
     "ds:aria-disabled:opacity-[var(--opacity-50)] ds:aria-disabled:cursor-not-allowed"
   ].join(" ")
-), $e = R(
+), Le = R(
   [
     "ds:block ds:inline-size-full",
     "ds:[min-block-size:var(--min-target-size)]",
@@ -138,7 +138,7 @@ const Pe = {
     "ds:focus-visible:outline-[var(--ring)]",
     "ds:forced-colors:focus-visible:outline-[CanvasText]"
   ].join(" ")
-), De = R(
+), Ie = R(
   [
     "ds:flex ds:items-center ds:justify-center",
     "ds:inline-size-[var(--signature-width)]",
@@ -154,18 +154,18 @@ const Pe = {
     "ds:p-[var(--spacing-md)]"
   ].join(" ")
 );
-function ie(t) {
+function de(t) {
   return typeof document > "u" ? "" : getComputedStyle(document.documentElement).getPropertyValue(t).trim();
 }
-function oe(t, n) {
+function ce(t, n) {
   return typeof t == "number" ? `${t}px` : typeof t == "string" && t.length > 0 ? t : n;
 }
-function de(t) {
+function le(t) {
   if (typeof t == "string" && /[^0-9.\s\-px]/i.test(t)) return null;
   const n = parseFloat(t);
   return Number.isFinite(n) ? n : null;
 }
-function Fe(t) {
+function He(t) {
   let n = "";
   for (let s = 0; s < t.length; s += 1) {
     const i = t[s];
@@ -173,7 +173,7 @@ function Fe(t) {
   }
   return n;
 }
-function Le(t) {
+function Ue(t) {
   if (typeof atob == "function") {
     const s = atob(t), i = new Uint8Array(s.length);
     for (let a = 0; a < s.length; a += 1) i[a] = s.charCodeAt(a);
@@ -182,18 +182,18 @@ function Le(t) {
   const n = globalThis;
   return n.Buffer ? n.Buffer.from(t, "base64") : new Uint8Array();
 }
-async function Ie(t) {
+async function Oe(t) {
   var s;
   const n = globalThis;
   if ((s = n.crypto) != null && s.subtle) {
     const i = new Uint8Array(t.byteLength);
     i.set(t);
     const a = await n.crypto.subtle.digest("SHA-256", i.buffer);
-    return Fe(new Uint8Array(a));
+    return He(new Uint8Array(a));
   }
   return "";
 }
-function He(t, n, s, i, a) {
+function _e(t, n, s, i, a) {
   const v = Math.max(
     1,
     typeof window < "u" ? window.devicePixelRatio : 1
@@ -202,7 +202,7 @@ function He(t, n, s, i, a) {
   const d = C.getContext("2d");
   return d && (d.setTransform(v, 0, 0, v, 0, 0), d.fillStyle = a, d.fillRect(0, 0, n, s), d.fillStyle = i, d.font = "32px italic sans-serif", d.textAlign = "center", d.textBaseline = "middle", d.fillText(t, n / 2, s / 2, n - 16)), C;
 }
-const Ue = Ce(
+const We = Ve(
   ({
     id: t,
     onConfirm: n,
@@ -212,29 +212,30 @@ const Ue = Ce(
     height: v = 200,
     penColor: C,
     backgroundColor: d,
-    allowTypedFallback: ce = !0,
-    disabled: b = !1,
-    ariaLabel: le,
-    className: ue
-  }, fe) => {
-    const { t: c } = Me(), X = Se(), q = `${se(
-      () => `sig-${X.replace(/[^a-zA-Z0-9-_]/g, "")}`,
-      [X]
-    )}-live`, F = z(null), G = z(null), V = z(null), Z = z(null), h = z(null), [l, ge] = N("draw"), [S, L] = N(""), [pe, I] = N(!1), ve = z("empty"), [me, be] = N(""), [m, he] = N(""), [y, ye] = N(""), j = z(i), E = z(s), B = z(n);
-    P(() => {
-      j.current = i, E.current = s, B.current = n;
+    allowTypedFallback: ue = !0,
+    name: T,
+    disabled: h = !1,
+    ariaLabel: fe,
+    className: ge
+  }, pe) => {
+    const { t: c } = Pe(), G = Ae(), Z = `${ie(
+      () => `sig-${G.replace(/[^a-zA-Z0-9-_]/g, "")}`,
+      [G]
+    )}-live`, L = z(null), J = z(null), j = z(null), K = z(null), y = z(null), [l, ve] = A("draw"), [S, I] = A(""), [me, Q] = A(""), [be, H] = A(!1), he = z("empty"), [ye, we] = A(""), [m, xe] = A(""), [w, ke] = A(""), B = z(i), E = z(s), $ = z(n);
+    N(() => {
+      B.current = i, E.current = s, $.current = n;
     }, [i, s, n]);
-    const f = T(
+    const f = P(
       (e) => {
-        ve.current = e, be(c(`signature.state.${e}`));
+        he.current = e, we(c(`signature.state.${e}`));
       },
       [c]
     );
-    P(() => {
+    N(() => {
       if (typeof document > "u") return;
       function e() {
-        const o = C ?? ie("--foreground"), g = d ?? ie("--background");
-        he(o || "currentColor"), ye(g || "transparent");
+        const o = C ?? de("--foreground"), g = d ?? de("--background");
+        xe(o || "currentColor"), ke(g || "transparent");
       }
       e();
       const r = new MutationObserver(() => {
@@ -244,235 +245,245 @@ const Ue = Ce(
         attributes: !0,
         attributeFilter: ["class"]
       }), () => r.disconnect();
-    }, [C, d]), P(() => {
-      const e = h.current;
-      e && (m && (e.penColor = m), y && (e.backgroundColor = y));
-    }, [m, y]), P(() => {
+    }, [C, d]), N(() => {
+      const e = y.current;
+      e && (m && (e.penColor = m), w && (e.backgroundColor = w));
+    }, [m, w]), N(() => {
       if (l !== "draw") return;
-      const e = V.current;
+      const e = j.current;
       if (!e) return;
-      const r = new Ae(e, {
+      const r = new Ne(e, {
         penColor: m || "currentColor",
-        backgroundColor: y || "transparent",
+        backgroundColor: w || "transparent",
         minWidth: 0.5,
         maxWidth: 2.5,
         velocityFilterWeight: 0.7
       });
-      h.current = r;
+      y.current = r;
       const o = () => {
-        var w;
-        I(!0), f("drawing"), (w = j.current) == null || w.call(j);
+        var x;
+        H(!0), f("drawing"), (x = B.current) == null || x.call(B);
       }, g = () => {
       };
-      return r.addEventListener("beginStroke", o), r.addEventListener("endStroke", g), $(e), f("empty"), () => {
-        r.removeEventListener("beginStroke", o), r.removeEventListener("endStroke", g), r.clear(), r.off(), h.current = null;
+      return r.addEventListener("beginStroke", o), r.addEventListener("endStroke", g), D(e), f("empty"), () => {
+        r.removeEventListener("beginStroke", o), r.removeEventListener("endStroke", g), r.clear(), r.off(), y.current = null;
       };
-    }, [l]), P(() => {
-      const e = h.current;
-      e && (b ? e.off() : e.on());
-    }, [b, l]);
-    const J = 4096, $ = T(
+    }, [l]), N(() => {
+      const e = y.current;
+      e && (h ? e.off() : e.on());
+    }, [h, l]);
+    const Y = 4096, D = P(
       (e) => {
         const r = e.getBoundingClientRect(), o = Math.max(
           1,
           typeof window < "u" ? window.devicePixelRatio : 1
-        ), g = Math.max(1, Math.floor(r.width * o)), w = Math.max(1, Math.floor(r.height * o)), A = Math.min(g, J), x = Math.min(w, J);
-        if (e.width === A && e.height === x)
+        ), g = Math.max(1, Math.floor(r.width * o)), x = Math.max(1, Math.floor(r.height * o)), V = Math.min(g, Y), k = Math.min(x, Y);
+        if (e.width === V && e.height === k)
           return;
-        const p = h.current, M = p ? p.toData() : null;
-        e.width = A, e.height = x;
-        const D = e.getContext("2d");
-        D && D.scale(o, o), p && (y && (p.backgroundColor = y), m && (p.penColor = m), p.clear(), M && M.length > 0 && p.fromData(M));
+        const p = y.current, M = p ? p.toData() : null;
+        e.width = V, e.height = k;
+        const F = e.getContext("2d");
+        F && F.scale(o, o), p && (w && (p.backgroundColor = w), m && (p.penColor = m), p.clear(), M && M.length > 0 && p.fromData(M));
       },
-      [y, m]
+      [w, m]
     );
-    P(() => {
-      const e = V.current;
+    N(() => {
+      const e = j.current;
       if (!e) return;
       if (typeof ResizeObserver > "u") {
-        $(e);
+        D(e);
         return;
       }
       const r = new ResizeObserver(() => {
-        $(e);
+        D(e);
       });
       return r.observe(e), () => r.disconnect();
-    }, [$]);
-    const H = T(() => {
+    }, [D]);
+    const U = P(() => {
       var r;
-      const e = h.current;
-      e && e.clear(), L(""), I(!1), f("cleared"), (r = E.current) == null || r.call(E);
-    }, [f]), K = T(() => {
-      const e = h.current;
+      const e = y.current;
+      e && e.clear(), I(""), Q(""), H(!1), f("cleared"), (r = E.current) == null || r.call(E);
+    }, [f]), ee = P(() => {
+      const e = y.current;
       if (!e) return;
       const r = e.toData();
-      !r || r.length === 0 || (r.pop(), e.fromData(r), r.length === 0 && (I(!1), f("empty")));
-    }, [f]), Q = T(() => {
+      !r || r.length === 0 || (r.pop(), e.fromData(r), r.length === 0 && (H(!1), f("empty")));
+    }, [f]), te = P(() => {
       if (l === "typed") return S.trim().length === 0;
-      const e = h.current;
+      const e = y.current;
       return e ? e.isEmpty() : !0;
-    }, [l, S]), U = T(async () => {
-      var re;
-      const e = de(
+    }, [l, S]), O = P(async () => {
+      var se;
+      const e = le(
         typeof a == "number" ? `${a}` : String(a)
-      ), r = de(
+      ), r = le(
         typeof v == "number" ? `${v}` : String(v)
-      ), o = l === "draw" ? V.current ?? G.current ?? F.current : Z.current ?? F.current, g = o == null ? void 0 : o.getBoundingClientRect(), w = e ?? (g ? g.width : 400), A = r ?? (g ? g.height : 200);
-      let x = "", p = "", M;
+      ), o = l === "draw" ? j.current ?? J.current ?? L.current : K.current ?? L.current, g = o == null ? void 0 : o.getBoundingClientRect(), x = e ?? (g ? g.width : 400), V = r ?? (g ? g.height : 200);
+      let k = "", p = "", M;
       if (l === "draw") {
-        const u = h.current;
+        const u = y.current;
         if (!u || u.isEmpty()) return null;
-        x = u.toDataURL("image/png"), p = u.toSVG(), M = u.toData();
+        k = u.toDataURL("image/png"), p = u.toSVG(), M = u.toData();
       } else {
         const u = S.trim();
         if (u.length === 0) return null;
-        x = He(
+        k = _e(
           u,
-          w,
-          A,
+          x,
+          V,
           m || "currentColor",
-          y || "transparent"
+          w || "transparent"
         ).toDataURL("image/png");
-        const O = u.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
-        p = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${w} ${A}" width="${w}" height="${A}"><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="sans-serif" font-style="italic" font-size="32" fill="${m || "currentColor"}" letter-spacing="3">${O}</text></svg>`;
+        const X = u.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+        p = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${x} ${V}" width="${x}" height="${V}"><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="sans-serif" font-style="italic" font-size="32" fill="${m || "currentColor"}" letter-spacing="3">${X}</text></svg>`;
       }
-      const D = w * 25.4 / 96, ke = A * 25.4 / 96, ze = (/* @__PURE__ */ new Date()).toISOString();
-      let ee = "";
-      if (x) {
-        const u = x.indexOf(","), ne = u >= 0 ? x.slice(u + 1) : "", O = Le(ne);
-        ee = await Ie(O);
+      const F = x * 25.4 / 96, Se = V * 25.4 / 96, Re = (/* @__PURE__ */ new Date()).toISOString();
+      let ne = "";
+      if (k) {
+        const u = k.indexOf(","), ae = u >= 0 ? k.slice(u + 1) : "", X = Ue(ae);
+        ne = await Oe(X);
       }
-      const te = {
-        png: x,
+      const W = {
+        png: k,
         svg: p,
-        widthMm: D,
-        heightMm: ke,
-        capturedAt: ze,
-        sha256: ee,
+        widthMm: F,
+        heightMm: Se,
+        capturedAt: Re,
+        sha256: ne,
         strokes: M
       };
-      return f("captured"), (re = B.current) == null || re.call(B, te), te;
-    }, [l, S, a, v, m, y, f]), _ = se(
+      return f("captured"), T && Q(W.png), (se = $.current) == null || se.call($, W), W;
+    }, [
+      l,
+      S,
+      a,
+      v,
+      m,
+      w,
+      f,
+      T
+    ]), _ = ie(
       () => ({
-        clear: H,
-        undo: K,
-        isEmpty: Q,
-        confirm: U
+        clear: U,
+        undo: ee,
+        isEmpty: te,
+        confirm: O
       }),
-      [H, K, Q, U]
+      [U, ee, te, O]
     );
-    Re(fe, () => _, [_]), Ne(Pe, _, t);
-    const we = l === "typed" ? S.trim().length > 0 : pe, Y = b || !we, xe = {
-      "--signature-width": oe(
+    Me(pe, () => _, [_]), Te(je, _, t);
+    const ze = l === "typed" ? S.trim().length > 0 : be, re = h || !ze, Ce = {
+      "--signature-width": ce(
         a,
         "var(--signature-default-width)"
       ),
-      "--signature-height": oe(
+      "--signature-height": ce(
         v,
         "var(--signature-default-height)"
       )
     };
-    return /* @__PURE__ */ W(
+    return /* @__PURE__ */ q(
       "div",
       {
-        ref: F,
+        ref: L,
         role: "group",
-        "aria-label": le ?? c("signature.padLabel"),
-        "aria-disabled": b || void 0,
-        className: [Te(), ue].filter(Boolean).join(" "),
-        style: xe,
+        "aria-label": fe ?? c("signature.padLabel"),
+        "aria-disabled": h || void 0,
+        className: [Be(), ge].filter(Boolean).join(" "),
+        style: Ce,
         "data-component": "signature-capture",
         "data-component-id": t,
         children: [
-          l === "draw" ? /* @__PURE__ */ k("div", { ref: G, className: Ve(), children: /* @__PURE__ */ k(
+          T ? /* @__PURE__ */ b("input", { type: "hidden", name: T, value: me, readOnly: !0 }) : null,
+          l === "draw" ? /* @__PURE__ */ b("div", { ref: J, className: Ee(), children: /* @__PURE__ */ b(
             "canvas",
             {
-              ref: V,
+              ref: j,
               role: "img",
               "aria-label": c("signature.padLabel"),
-              className: je(),
+              className: $e(),
               "data-testid": "signature-canvas"
             }
-          ) }) : /* @__PURE__ */ W("label", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
-            /* @__PURE__ */ k("span", { className: "type-body-sm ds:text-[var(--muted-foreground)]", children: c("signature.typedFallback.label") }),
-            /* @__PURE__ */ k(
+          ) }) : /* @__PURE__ */ q("label", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
+            /* @__PURE__ */ b("span", { className: "type-body-sm ds:text-[var(--muted-foreground)]", children: c("signature.typedFallback.label") }),
+            /* @__PURE__ */ b(
               "input",
               {
                 type: "text",
                 value: S,
                 onChange: (e) => {
-                  L(e.target.value), e.target.value.length > 0 ? f("drawing") : f("empty");
+                  I(e.target.value), e.target.value.length > 0 ? f("drawing") : f("empty");
                 },
                 placeholder: c("signature.typedFallback.placeholder"),
                 "aria-label": c("signature.typedFallback.label"),
-                disabled: b,
-                className: $e(),
+                disabled: h,
+                className: Le(),
                 "data-testid": "signature-typed-input"
               }
             ),
-            S ? /* @__PURE__ */ k(
+            S ? /* @__PURE__ */ b(
               "div",
               {
-                ref: Z,
-                className: De(),
+                ref: K,
+                className: Ie(),
                 "aria-hidden": "true",
                 children: S
               }
             ) : null
           ] }),
-          /* @__PURE__ */ k(
+          /* @__PURE__ */ b(
             "div",
             {
-              id: q,
+              id: Z,
               "aria-live": "polite",
               "aria-atomic": "true",
               className: "ds:sr-only",
               "data-testid": "signature-live",
-              children: me
+              children: ye
             }
           ),
-          /* @__PURE__ */ W(
+          /* @__PURE__ */ q(
             "div",
             {
-              className: Ee(),
+              className: De(),
               role: "group",
               "aria-label": c("signature.padLabel"),
               children: [
-                /* @__PURE__ */ k(
+                /* @__PURE__ */ b(
                   "button",
                   {
                     type: "button",
                     onClick: () => {
-                      b || H();
+                      h || U();
                     },
-                    "aria-disabled": b || void 0,
-                    className: ae(),
+                    "aria-disabled": h || void 0,
+                    className: oe(),
                     children: c("signature.clear")
                   }
                 ),
-                ce ? /* @__PURE__ */ k(
+                ue ? /* @__PURE__ */ b(
                   "button",
                   {
                     type: "button",
                     onClick: () => {
-                      b || (L(""), ge((e) => e === "draw" ? "typed" : "draw"), f("cleared"));
+                      h || (I(""), ve((e) => e === "draw" ? "typed" : "draw"), f("cleared"));
                     },
-                    "aria-disabled": b || void 0,
-                    className: ae(),
+                    "aria-disabled": h || void 0,
+                    className: oe(),
                     "aria-pressed": l === "typed",
                     children: c(l === "draw" ? "signature.typedFallback.toggle" : "signature.typedFallback.toggleDraw")
                   }
                 ) : null,
-                /* @__PURE__ */ k(
+                /* @__PURE__ */ b(
                   "button",
                   {
                     type: "button",
                     onClick: () => {
-                      Y || U();
+                      re || O();
                     },
-                    "aria-disabled": Y || void 0,
-                    "aria-describedby": q,
-                    className: Be(),
+                    "aria-disabled": re || void 0,
+                    "aria-describedby": Z,
+                    className: Fe(),
                     "data-testid": "signature-confirm",
                     children: c("signature.confirm")
                   }
@@ -485,9 +496,9 @@ const Ue = Ce(
     );
   }
 );
-Ue.displayName = "SignatureCapture";
+We.displayName = "SignatureCapture";
 export {
-  Ue as S,
-  Pe as s
+  We as S,
+  je as s
 };
-//# sourceMappingURL=signature-capture-CpMBhqQ9.js.map
+//# sourceMappingURL=signature-capture-CHbrKoA_.js.map