@alfadocs/ui-kit 0.67.1 → 0.69.0

package/dist/_chunks/{signature-capture-COi0Uiqu.js → signature-capture-Ct_4Md4e.js}

@@ -1,36 +1,70 @@
 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 { forwardRef as Ae, useId as Pe, useMemo as ie, useRef as C, useState as P, useEffect as V, useCallback as M, useImperativeHandle as Te } from "react";
+import Ve from "signature_pad";
 import { c as R } from "./index-D2ZczOXr.js";
-import { useTranslation as Pe } from "react-i18next";
-import { u as Te } from "./registry-nPAVE19X.js";
+import { useTranslation as Me } from "react-i18next";
+import { u as Ne } from "./registry-DvAUVLHh.js";
 const je = {
   id: "signature-capture",
-  capabilities: ["edit_inline", "submit"],
+  // Multi-step media lifecycle: draw / type strokes (capture) then commit the
+  // serialised signature (submit).
+  capabilities: ["capture", "submit"],
   state: {
     isEmpty: {
       type: "boolean",
+      descriptionKey: "ui.agent.signatureCapture.state.isEmpty",
       description: "True when no signature has been drawn or typed.",
       read: (t) => t.isEmpty()
     }
   },
   actions: {
     clear: {
+      // Erases all captured strokes — destructive (loses drawn/typed input).
       safety: "destructive",
+      idempotent: !0,
+      descriptionKey: "ui.agent.signatureCapture.actions.clear",
       description: "Erase the current signature. Loses unsaved input.",
       invoke: (t) => {
         t.clear();
       }
     },
     undo: {
+      // Removes the last stroke — reversible by redrawing.
       safety: "write",
+      descriptionKey: "ui.agent.signatureCapture.actions.undo",
       description: "Undo the last stroke.",
       invoke: (t) => {
         t.undo();
       }
     },
     confirm: {
+      // Commits the captured media and returns its serialised payload.
       safety: "write",
+      returns: "SignatureConfirmPayload | null",
+      returnsSchema: {
+        oneOf: [
+          {
+            type: "object",
+            description: "The committed signature payload.",
+            properties: {
+              dataUrl: {
+                type: "string",
+                description: "PNG data URL of the captured signature."
+              },
+              capturedAt: {
+                type: "string",
+                description: "ISO-8601 UTC timestamp of the commit."
+              }
+            },
+            required: ["dataUrl"]
+          },
+          {
+            type: "null",
+            description: "Returned when the pad is empty."
+          }
+        ]
+      },
+      descriptionKey: "ui.agent.signatureCapture.actions.confirm",
       description: "Commit the signature and return its serialised payload.",
       invoke: (t) => t.confirm()
     }
@@ -43,7 +77,7 @@ const je = {
       description: "Sourced from the id prop."
     }
   }
-}, Be = R(
+}, Ee = R(
   [
     "ds:signature-capture-alfadocs ds:flex ds:flex-col",
     "ds:gap-[var(--spacing-sm)]",
@@ -54,7 +88,7 @@ const je = {
     "ds:p-[var(--spacing-sm)]",
     "ds:aria-disabled:opacity-[var(--opacity-50)] ds:aria-disabled:cursor-not-allowed"
   ].join(" ")
-), Ee = R(
+), Be = R(
   [
     "ds:relative ds:block",
     // Mobile-first: fill the available width but never exceed the configured
@@ -73,7 +107,7 @@ const je = {
     "ds:focus-visible:outline-[var(--ring)]",
     "ds:forced-colors:focus-visible:outline-[CanvasText]"
   ].join(" ")
-), $e = R(
+), Le = R(
   [
     "ds:block",
     // Arbitrary-property form, NOT `inline-size-full` / `block-size-full`:
@@ -89,7 +123,7 @@ const je = {
     "ds:touch-none",
     "ds:select-none"
   ].join(" ")
-), De = R(
+), Ue = R(
   ["ds:flex ds:items-stretch ds:flex-wrap ds:gap-[var(--spacing-sm)]"].join(
     " "
   )
@@ -114,7 +148,7 @@ const je = {
     "ds:forced-colors:focus-visible:outline-[CanvasText]",
     "ds:aria-disabled:opacity-[var(--opacity-50)] ds:aria-disabled:cursor-not-allowed"
   ].join(" ")
-), Fe = R(
+), $e = R(
   [
     "ds:inline-flex ds:flex-1 ds:items-center ds:justify-center",
     "ds:[min-block-size:var(--min-target-size)]",
@@ -133,7 +167,7 @@ const je = {
     "ds:forced-colors:focus-visible:outline-[CanvasText]",
     "ds:aria-disabled:opacity-[var(--opacity-50)] ds:aria-disabled:cursor-not-allowed"
   ].join(" ")
-), Le = R(
+), De = R(
   [
     "ds:block ds:inline-size-full",
     "ds:[min-block-size:var(--min-target-size)]",
@@ -150,7 +184,7 @@ const je = {
     "ds:focus-visible:outline-[var(--ring)]",
     "ds:forced-colors:focus-visible:outline-[CanvasText]"
   ].join(" ")
-), Ie = R(
+), Fe = R(
   [
     "ds:flex ds:items-center ds:justify-center",
     // Match the pad frame: responsive width capped at the configured size.
@@ -180,7 +214,7 @@ function le(t) {
   const n = parseFloat(t);
   return Number.isFinite(n) ? n : null;
 }
-function He(t) {
+function Ie(t) {
   let n = "";
   for (let s = 0; s < t.length; s += 1) {
     const i = t[s];
@@ -188,7 +222,7 @@ function He(t) {
   }
   return n;
 }
-function Ue(t) {
+function He(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);
@@ -204,53 +238,53 @@ async function Oe(t) {
     const i = new Uint8Array(t.byteLength);
     i.set(t);
     const a = await n.crypto.subtle.digest("SHA-256", i.buffer);
-    return He(new Uint8Array(a));
+    return Ie(new Uint8Array(a));
   }
   return "";
 }
 function _e(t, n, s, i, a) {
-  const v = Math.max(
+  const m = Math.max(
     1,
     typeof window < "u" ? window.devicePixelRatio : 1
-  ), C = document.createElement("canvas");
-  C.width = Math.floor(n * v), C.height = Math.floor(s * v);
-  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;
+  ), z = document.createElement("canvas");
+  z.width = Math.floor(n * m), z.height = Math.floor(s * m);
+  const d = z.getContext("2d");
+  return d && (d.setTransform(m, 0, 0, m, 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)), z;
 }
-const We = Ve(
+const Ke = Ae(
   ({
     id: t,
     onConfirm: n,
     onClear: s,
     onStart: i,
     width: a = 400,
-    height: v = 200,
-    penColor: C,
+    height: m = 200,
+    penColor: z,
     backgroundColor: d,
     allowTypedFallback: ue = !0,
-    name: T,
+    name: N,
     disabled: h = !1,
     ariaLabel: fe,
-    className: ge
-  }, pe) => {
-    const { t: c } = Pe(), G = Ae(), Z = `${ie(
+    className: pe
+  }, ge) => {
+    const { t: c } = Me(), G = Pe(), X = `${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;
+    )}-live`, D = C(null), Z = C(null), j = C(null), J = C(null), y = C(null), [l, me] = P("draw"), [S, F] = P(""), [ve, Q] = P(""), [be, I] = P(!1), he = C("empty"), [ye, we] = P(""), [v, xe] = P(""), [w, ke] = P(""), E = C(i), B = C(s), L = C(n);
+    V(() => {
+      E.current = i, B.current = s, L.current = n;
     }, [i, s, n]);
-    const f = P(
+    const f = M(
       (e) => {
         he.current = e, we(c(`signature.state.${e}`));
       },
       [c]
     );
-    N(() => {
+    V(() => {
       if (typeof document > "u") return;
       function e() {
-        const o = C ?? de("--foreground"), g = d ?? de("--background");
-        xe(o || "currentColor"), ke(g || "transparent");
+        const o = z ?? de("--foreground"), p = d ?? de("--background");
+        xe(o || "currentColor"), ke(p || "transparent");
       }
       e();
       const r = new MutationObserver(() => {
@@ -260,15 +294,15 @@ const We = Ve(
         attributes: !0,
         attributeFilter: ["class"]
       }), () => r.disconnect();
-    }, [C, d]), N(() => {
+    }, [z, d]), V(() => {
       const e = y.current;
-      e && (m && (e.penColor = m), w && (e.backgroundColor = w));
-    }, [m, w]), N(() => {
+      e && (v && (e.penColor = v), w && (e.backgroundColor = w));
+    }, [v, w]), V(() => {
       if (l !== "draw") return;
       const e = j.current;
       if (!e) return;
-      const r = new Ne(e, {
-        penColor: m || "currentColor",
+      const r = new Ve(e, {
+        penColor: v || "currentColor",
         backgroundColor: w || "transparent",
         minWidth: 0.5,
         maxWidth: 2.5,
@@ -277,146 +311,146 @@ const We = Ve(
       y.current = r;
       const o = () => {
         var x;
-        H(!0), f("drawing"), (x = B.current) == null || x.call(B);
-      }, g = () => {
+        I(!0), f("drawing"), (x = E.current) == null || x.call(E);
+      }, p = () => {
       };
-      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;
+      return r.addEventListener("beginStroke", o), r.addEventListener("endStroke", p), U(e), f("empty"), () => {
+        r.removeEventListener("beginStroke", o), r.removeEventListener("endStroke", p), r.clear(), r.off(), y.current = null;
       };
-    }, [l]), N(() => {
+    }, [l]), V(() => {
       const e = y.current;
       e && (h ? e.off() : e.on());
     }, [h, l]);
-    const Y = 4096, D = P(
+    const Y = 4096, U = M(
       (e) => {
         const r = e.getBoundingClientRect(), o = Math.max(
           1,
           typeof window < "u" ? window.devicePixelRatio : 1
-        ), 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)
+        ), p = Math.max(1, Math.floor(r.width * o)), x = Math.max(1, Math.floor(r.height * o)), A = Math.min(p, Y), k = Math.min(x, Y);
+        if (e.width === A && e.height === k)
           return;
-        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));
+        const g = y.current, T = g ? g.toData() : null;
+        e.width = A, e.height = k;
+        const $ = e.getContext("2d");
+        $ && $.scale(o, o), g && (w && (g.backgroundColor = w), v && (g.penColor = v), g.clear(), T && T.length > 0 && g.fromData(T));
       },
-      [w, m]
+      [w, v]
     );
-    N(() => {
+    V(() => {
       const e = j.current;
       if (!e) return;
       if (typeof ResizeObserver > "u") {
-        D(e);
+        U(e);
         return;
       }
       const r = new ResizeObserver(() => {
-        D(e);
+        U(e);
       });
       return r.observe(e), () => r.disconnect();
-    }, [D]);
-    const U = P(() => {
+    }, [U]);
+    const H = M(() => {
       var r;
       const e = y.current;
-      e && e.clear(), I(""), Q(""), H(!1), f("cleared"), (r = E.current) == null || r.call(E);
-    }, [f]), ee = P(() => {
+      e && e.clear(), F(""), Q(""), I(!1), f("cleared"), (r = B.current) == null || r.call(B);
+    }, [f]), ee = M(() => {
       const e = y.current;
       if (!e) return;
       const r = e.toData();
-      !r || r.length === 0 || (r.pop(), e.fromData(r), r.length === 0 && (H(!1), f("empty")));
-    }, [f]), te = P(() => {
+      !r || r.length === 0 || (r.pop(), e.fromData(r), r.length === 0 && (I(!1), f("empty")));
+    }, [f]), te = M(() => {
       if (l === "typed") return S.trim().length === 0;
       const e = y.current;
       return e ? e.isEmpty() : !0;
-    }, [l, S]), O = P(async () => {
+    }, [l, S]), O = M(async () => {
       var se;
       const e = le(
         typeof a == "number" ? `${a}` : String(a)
       ), r = le(
-        typeof v == "number" ? `${v}` : String(v)
-      ), 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;
+        typeof m == "number" ? `${m}` : String(m)
+      ), o = l === "draw" ? j.current ?? Z.current ?? D.current : J.current ?? D.current, p = o == null ? void 0 : o.getBoundingClientRect(), x = e ?? (p ? p.width : 400), A = r ?? (p ? p.height : 200);
+      let k = "", g = "", T;
       if (l === "draw") {
         const u = y.current;
         if (!u || u.isEmpty()) return null;
-        k = u.toDataURL("image/png"), p = u.toSVG(), M = u.toData();
+        k = u.toDataURL("image/png"), g = u.toSVG(), T = u.toData();
       } else {
         const u = S.trim();
         if (u.length === 0) return null;
         k = _e(
           u,
           x,
-          V,
-          m || "currentColor",
+          A,
+          v || "currentColor",
           w || "transparent"
         ).toDataURL("image/png");
-        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 W = u.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+        g = `<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="${v || "currentColor"}" letter-spacing="3">${W}</text></svg>`;
       }
-      const F = x * 25.4 / 96, Se = V * 25.4 / 96, Re = (/* @__PURE__ */ new Date()).toISOString();
+      const $ = x * 25.4 / 96, Se = A * 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 u = k.indexOf(","), ae = u >= 0 ? k.slice(u + 1) : "", W = He(ae);
+        ne = await Oe(W);
       }
-      const W = {
+      const K = {
         png: k,
-        svg: p,
-        widthMm: F,
+        svg: g,
+        widthMm: $,
         heightMm: Se,
         capturedAt: Re,
         sha256: ne,
-        strokes: M
+        strokes: T
       };
-      return f("captured"), T && Q(W.png), (se = $.current) == null || se.call($, W), W;
+      return f("captured"), N && Q(K.png), (se = L.current) == null || se.call(L, K), K;
     }, [
       l,
       S,
       a,
-      v,
       m,
+      v,
       w,
       f,
-      T
+      N
     ]), _ = ie(
       () => ({
-        clear: U,
+        clear: H,
         undo: ee,
         isEmpty: te,
         confirm: O
       }),
-      [U, ee, te, O]
+      [H, ee, te, O]
     );
-    Me(pe, () => _, [_]), Te(je, _, t);
-    const ze = l === "typed" ? S.trim().length > 0 : be, re = h || !ze, Ce = {
+    Te(ge, () => _, [_]), Ne(je, _, t);
+    const Ce = l === "typed" ? S.trim().length > 0 : be, re = h || !Ce, ze = {
       "--signature-width": ce(
         a,
         "var(--signature-default-width)"
       ),
       "--signature-height": ce(
-        v,
+        m,
         "var(--signature-default-height)"
       )
     };
     return /* @__PURE__ */ q(
       "div",
       {
-        ref: L,
+        ref: D,
         role: "group",
         "aria-label": fe ?? c("signature.padLabel"),
         "aria-disabled": h || void 0,
-        className: [Be(), ge].filter(Boolean).join(" "),
-        style: Ce,
+        className: [Ee(), pe].filter(Boolean).join(" "),
+        style: ze,
         "data-component": "signature-capture",
         "data-component-id": t,
         children: [
-          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(
+          N ? /* @__PURE__ */ b("input", { type: "hidden", name: N, value: ve, readOnly: !0 }) : null,
+          l === "draw" ? /* @__PURE__ */ b("div", { ref: Z, className: Be(), children: /* @__PURE__ */ b(
             "canvas",
             {
               ref: j,
               role: "img",
               "aria-label": c("signature.padLabel"),
-              className: $e(),
+              className: Le(),
               "data-testid": "signature-canvas"
             }
           ) }) : /* @__PURE__ */ q("label", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
@@ -427,20 +461,20 @@ const We = Ve(
                 type: "text",
                 value: S,
                 onChange: (e) => {
-                  I(e.target.value), e.target.value.length > 0 ? f("drawing") : f("empty");
+                  F(e.target.value), e.target.value.length > 0 ? f("drawing") : f("empty");
                 },
                 placeholder: c("signature.typedFallback.placeholder"),
                 "aria-label": c("signature.typedFallback.label"),
                 disabled: h,
-                className: Le(),
+                className: De(),
                 "data-testid": "signature-typed-input"
               }
             ),
             S ? /* @__PURE__ */ b(
               "div",
               {
-                ref: K,
-                className: Ie(),
+                ref: J,
+                className: Fe(),
                 "aria-hidden": "true",
                 children: S
               }
@@ -449,7 +483,7 @@ const We = Ve(
           /* @__PURE__ */ b(
             "div",
             {
-              id: Z,
+              id: X,
               "aria-live": "polite",
               "aria-atomic": "true",
               className: "ds:sr-only",
@@ -460,7 +494,7 @@ const We = Ve(
           /* @__PURE__ */ q(
             "div",
             {
-              className: De(),
+              className: Ue(),
               role: "group",
               "aria-label": c("signature.padLabel"),
               children: [
@@ -469,7 +503,7 @@ const We = Ve(
                   {
                     type: "button",
                     onClick: () => {
-                      h || U();
+                      h || H();
                     },
                     "aria-disabled": h || void 0,
                     className: oe(),
@@ -481,7 +515,7 @@ const We = Ve(
                   {
                     type: "button",
                     onClick: () => {
-                      h || (I(""), ve((e) => e === "draw" ? "typed" : "draw"), f("cleared"));
+                      h || (F(""), me((e) => e === "draw" ? "typed" : "draw"), f("cleared"));
                     },
                     "aria-disabled": h || void 0,
                     className: oe(),
@@ -497,8 +531,8 @@ const We = Ve(
                       re || O();
                     },
                     "aria-disabled": re || void 0,
-                    "aria-describedby": Z,
-                    className: Fe(),
+                    "aria-describedby": X,
+                    className: $e(),
                     "data-testid": "signature-confirm",
                     children: c("signature.confirm")
                   }
@@ -511,9 +545,9 @@ const We = Ve(
     );
   }
 );
-We.displayName = "SignatureCapture";
+Ke.displayName = "SignatureCapture";
 export {
-  We as S,
+  Ke as S,
   je as s
 };
-//# sourceMappingURL=signature-capture-COi0Uiqu.js.map
+//# sourceMappingURL=signature-capture-Ct_4Md4e.js.map