@alfadocs/ui-kit 0.38.0 → 0.40.0

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

@@ -1,5 +1,5 @@
-import { jsxs as X, jsx as h } from "react/jsx-runtime";
-import { forwardRef as ze, useId as Se, useMemo as ae, useRef as C, useState as N, useEffect as P, useCallback as T, useImperativeHandle as Re } from "react";
+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 { c as R } from "./index-D2ZczOXr.js";
 import { useTranslation as Me } from "react-i18next";
@@ -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(" ")
@@ -76,18 +78,21 @@ const Pe = {
     "ds:select-none"
   ].join(" ")
 ), Ee = R(
-  ["ds:flex ds:items-center ds:flex-wrap ds:gap-[var(--spacing-xs)]"].join(" ")
-), q = R(
+  ["ds:flex ds:items-stretch ds:flex-wrap ds:gap-[var(--spacing-sm)]"].join(
+    " "
+  )
+), ae = R(
   [
-    "ds:inline-flex ds:items-center ds:justify-center",
+    "ds:inline-flex ds:flex-1 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-sm)] ds:pe-[var(--spacing-sm)]",
+    "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:border ds:border-[color:var(--border)]",
     "ds:bg-transparent ds:text-[var(--foreground)]",
-    "ds:text-[length:var(--font-size-sm)] ds:font-medium",
+    "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(--muted)]",
     "ds:focus-visible:outline-[length:var(--focus-ring-width)]",
@@ -99,13 +104,14 @@ const Pe = {
   ].join(" ")
 ), Be = R(
   [
-    "ds:inline-flex ds:items-center ds:justify-center",
+    "ds:inline-flex ds:flex-1 ds:items-center ds:justify-center",
     "ds:min-block-size-[var(--min-target-size)]",
     "ds:min-inline-size-[var(--min-target-size)]",
     "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-sm)] ds:font-medium",
+    "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)]",
@@ -138,7 +144,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,47 +194,47 @@ 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);
-  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;
+  ), 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;
 }
-const Ue = ze(
+const Ue = Ce(
   ({
     id: t,
     onConfirm: n,
     onClear: s,
     onStart: i,
     width: a = 400,
-    height: m = 200,
-    penColor: z,
-    backgroundColor: l,
+    height: v = 200,
+    penColor: C,
+    backgroundColor: d,
     allowTypedFallback: ce = !0,
-    disabled: f = !1,
+    disabled: b = !1,
     ariaLabel: le,
     className: ue
   }, fe) => {
-    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);
+    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;
     }, [i, s, n]);
-    const g = T(
+    const f = T(
       (e) => {
-        ve.current = e, be(o(`signature.state.${e}`));
+        ve.current = e, be(c(`signature.state.${e}`));
       },
-      [o]
+      [c]
     );
     P(() => {
       if (typeof document > "u") return;
       function e() {
-        const c = z ?? ie("--foreground"), p = l ?? ie("--background");
-        he(c || "currentColor"), ye(p || "transparent");
+        const o = C ?? ie("--foreground"), g = d ?? ie("--background");
+        he(o || "currentColor"), ye(g || "transparent");
       }
       e();
       const r = new MutationObserver(() => {
@@ -237,47 +244,47 @@ const Ue = ze(
         attributes: !0,
         attributeFilter: ["class"]
       }), () => r.disconnect();
-    }, [z, l]), P(() => {
-      const e = y.current;
-      e && (b && (e.penColor = b), w && (e.backgroundColor = w));
-    }, [b, w]), P(() => {
-      if (d !== "draw") return;
+    }, [C, d]), P(() => {
+      const e = h.current;
+      e && (m && (e.penColor = m), y && (e.backgroundColor = y));
+    }, [m, y]), P(() => {
+      if (l !== "draw") return;
       const e = V.current;
       if (!e) return;
       const r = new Ae(e, {
-        penColor: b || "currentColor",
-        backgroundColor: w || "transparent",
+        penColor: m || "currentColor",
+        backgroundColor: y || "transparent",
         minWidth: 0.5,
         maxWidth: 2.5,
         velocityFilterWeight: 0.7
       });
-      y.current = r;
-      const c = () => {
-        var x;
-        I(!0), g("drawing"), (x = j.current) == null || x.call(j);
-      }, p = () => {
+      h.current = r;
+      const o = () => {
+        var w;
+        I(!0), f("drawing"), (w = j.current) == null || w.call(j);
+      }, g = () => {
       };
-      return r.addEventListener("beginStroke", c), r.addEventListener("endStroke", p), $(e), g("empty"), () => {
-        r.removeEventListener("beginStroke", c), r.removeEventListener("endStroke", p), r.clear(), r.off(), y.current = null;
+      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;
       };
-    }, [d]), P(() => {
-      const e = y.current;
-      e && (f ? e.off() : e.on());
-    }, [f, d]);
-    const Q = 4096, $ = T(
+    }, [l]), P(() => {
+      const e = h.current;
+      e && (b ? e.off() : e.on());
+    }, [b, l]);
+    const J = 4096, $ = T(
       (e) => {
-        const r = e.getBoundingClientRect(), c = Math.max(
+        const r = e.getBoundingClientRect(), o = Math.max(
           1,
           typeof window < "u" ? window.devicePixelRatio : 1
-        ), 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)
+        ), 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)
           return;
-        const v = y.current, M = v ? v.toData() : null;
-        e.width = A, e.height = k;
+        const p = h.current, M = p ? p.toData() : null;
+        e.width = A, e.height = x;
         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(o, o), p && (y && (p.backgroundColor = y), m && (p.penColor = m), p.clear(), M && M.length > 0 && p.fromData(M));
       },
-      [w, b]
+      [y, m]
     );
     P(() => {
       const e = V.current;
@@ -293,130 +300,130 @@ const Ue = ze(
     }, [$]);
     const H = T(() => {
       var r;
-      const e = y.current;
-      e && e.clear(), L(""), I(!1), g("cleared"), (r = E.current) == null || r.call(E);
-    }, [g]), U = T(() => {
-      const e = y.current;
+      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;
       if (!e) return;
       const r = e.toData();
-      !r || r.length === 0 || (r.pop(), e.fromData(r), r.length === 0 && (I(!1), g("empty")));
-    }, [g]), Y = T(() => {
-      if (d === "typed") return S.trim().length === 0;
-      const e = y.current;
+      !r || r.length === 0 || (r.pop(), e.fromData(r), r.length === 0 && (I(!1), f("empty")));
+    }, [f]), Q = T(() => {
+      if (l === "typed") return S.trim().length === 0;
+      const e = h.current;
       return e ? e.isEmpty() : !0;
-    }, [d, S]), O = T(async () => {
-      var ne;
+    }, [l, S]), U = T(async () => {
+      var re;
       const e = de(
         typeof a == "number" ? `${a}` : String(a)
       ), r = de(
-        typeof m == "number" ? `${m}` : String(m)
-      ), 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;
-      if (d === "draw") {
-        const u = y.current;
+        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;
+      if (l === "draw") {
+        const u = h.current;
         if (!u || u.isEmpty()) return null;
-        k = u.toDataURL("image/png"), v = u.toSVG(), M = u.toData();
+        x = u.toDataURL("image/png"), p = u.toSVG(), M = u.toData();
       } else {
         const u = S.trim();
         if (u.length === 0) return null;
-        k = He(
+        x = He(
           u,
-          x,
+          w,
           A,
-          b || "currentColor",
-          w || "transparent"
+          m || "currentColor",
+          y || "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>`;
+        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 D = x * 25.4 / 96, ke = A * 25.4 / 96, Ce = (/* @__PURE__ */ new Date()).toISOString();
-      let te = "";
-      if (k) {
-        const u = k.indexOf(","), se = u >= 0 ? k.slice(u + 1) : "", W = Le(se);
-        te = await Ie(W);
+      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 re = {
-        png: k,
-        svg: v,
+      const te = {
+        png: x,
+        svg: p,
         widthMm: D,
         heightMm: ke,
-        capturedAt: Ce,
-        sha256: te,
+        capturedAt: ze,
+        sha256: ee,
         strokes: M
       };
-      return g("captured"), (ne = B.current) == null || ne.call(B, re), re;
-    }, [d, S, a, m, b, w, g]), _ = ae(
+      return f("captured"), (re = B.current) == null || re.call(B, te), te;
+    }, [l, S, a, v, m, y, f]), _ = se(
       () => ({
         clear: H,
-        undo: U,
-        isEmpty: Y,
-        confirm: O
+        undo: K,
+        isEmpty: Q,
+        confirm: U
       }),
-      [H, U, Y, O]
+      [H, K, Q, U]
     );
     Re(fe, () => _, [_]), Ne(Pe, _, t);
-    const we = d === "typed" ? S.trim().length > 0 : pe, ee = f || !we, xe = {
+    const we = l === "typed" ? S.trim().length > 0 : pe, Y = b || !we, xe = {
       "--signature-width": oe(
         a,
         "var(--signature-default-width)"
       ),
       "--signature-height": oe(
-        m,
+        v,
         "var(--signature-default-height)"
       )
     };
-    return /* @__PURE__ */ X(
+    return /* @__PURE__ */ W(
       "div",
       {
         ref: F,
         role: "group",
-        "aria-label": le ?? o("signature.padLabel"),
-        "aria-disabled": f || void 0,
+        "aria-label": le ?? c("signature.padLabel"),
+        "aria-disabled": b || void 0,
         className: [Te(), ue].filter(Boolean).join(" "),
         style: xe,
         "data-component": "signature-capture",
         "data-component-id": t,
         children: [
-          d === "draw" ? /* @__PURE__ */ h("div", { ref: J, className: Ve(), children: /* @__PURE__ */ h(
+          l === "draw" ? /* @__PURE__ */ k("div", { ref: G, className: Ve(), children: /* @__PURE__ */ k(
             "canvas",
             {
               ref: V,
               role: "img",
-              "aria-label": o("signature.padLabel"),
+              "aria-label": c("signature.padLabel"),
               className: je(),
               "data-testid": "signature-canvas"
             }
-          ) }) : /* @__PURE__ */ X("label", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
-            /* @__PURE__ */ h("span", { className: "type-body-sm ds:text-[var(--muted-foreground)]", children: o("signature.typedFallback.label") }),
-            /* @__PURE__ */ h(
+          ) }) : /* @__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(
               "input",
               {
                 type: "text",
                 value: S,
                 onChange: (e) => {
-                  L(e.target.value), e.target.value.length > 0 ? g("drawing") : g("empty");
+                  L(e.target.value), e.target.value.length > 0 ? f("drawing") : f("empty");
                 },
-                placeholder: o("signature.typedFallback.placeholder"),
-                "aria-label": o("signature.typedFallback.label"),
-                disabled: f,
+                placeholder: c("signature.typedFallback.placeholder"),
+                "aria-label": c("signature.typedFallback.label"),
+                disabled: b,
                 className: $e(),
                 "data-testid": "signature-typed-input"
               }
             ),
-            S ? /* @__PURE__ */ h(
+            S ? /* @__PURE__ */ k(
               "div",
               {
-                ref: K,
+                ref: Z,
                 className: De(),
                 "aria-hidden": "true",
                 children: S
               }
             ) : null
           ] }),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ k(
             "div",
             {
-              id: Z,
+              id: q,
               "aria-live": "polite",
               "aria-atomic": "true",
               className: "ds:sr-only",
@@ -424,62 +431,50 @@ const Ue = ze(
               children: me
             }
           ),
-          /* @__PURE__ */ X(
+          /* @__PURE__ */ W(
             "div",
             {
               className: Ee(),
               role: "group",
-              "aria-label": o("signature.padLabel"),
+              "aria-label": c("signature.padLabel"),
               children: [
-                /* @__PURE__ */ h(
+                /* @__PURE__ */ k(
                   "button",
                   {
                     type: "button",
                     onClick: () => {
-                      f || H();
+                      b || H();
                     },
-                    "aria-disabled": f || void 0,
-                    className: q(),
-                    children: o("signature.clear")
+                    "aria-disabled": b || void 0,
+                    className: ae(),
+                    children: c("signature.clear")
                   }
                 ),
-                d === "draw" ? /* @__PURE__ */ h(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => {
-                      f || U();
-                    },
-                    "aria-disabled": f || void 0,
-                    className: q(),
-                    children: o("signature.undo")
-                  }
-                ) : null,
-                ce ? /* @__PURE__ */ h(
+                ce ? /* @__PURE__ */ k(
                   "button",
                   {
                     type: "button",
                     onClick: () => {
-                      f || (L(""), ge((e) => e === "draw" ? "typed" : "draw"), g("cleared"));
+                      b || (L(""), ge((e) => e === "draw" ? "typed" : "draw"), f("cleared"));
                     },
-                    "aria-disabled": f || void 0,
-                    className: q(),
-                    "aria-pressed": d === "typed",
-                    children: o(d === "draw" ? "signature.typedFallback.toggle" : "signature.typedFallback.toggleDraw")
+                    "aria-disabled": b || void 0,
+                    className: ae(),
+                    "aria-pressed": l === "typed",
+                    children: c(l === "draw" ? "signature.typedFallback.toggle" : "signature.typedFallback.toggleDraw")
                   }
                 ) : null,
-                /* @__PURE__ */ h(
+                /* @__PURE__ */ k(
                   "button",
                   {
                     type: "button",
                     onClick: () => {
-                      ee || O();
+                      Y || U();
                     },
-                    "aria-disabled": ee || void 0,
-                    "aria-describedby": Z,
+                    "aria-disabled": Y || void 0,
+                    "aria-describedby": q,
                     className: Be(),
                     "data-testid": "signature-confirm",
-                    children: o("signature.confirm")
+                    children: c("signature.confirm")
                   }
                 )
               ]
@@ -495,4 +490,4 @@ export {
   Ue as S,
   Pe as s
 };
-//# sourceMappingURL=signature-capture-C-fF71xI.js.map
+//# sourceMappingURL=signature-capture-DoiBd6i3.js.map