@chekinapp/ui 0.0.101 → 0.0.102

package/dist/index.cjs

@@ -6034,7 +6034,9 @@ var translation_default2 = {
   },
   clear: "Clear",
   show_less: "Show less",
-  show_more: "Show more"
+  show_more: "Show more",
+  tap_here_to_sign: "Tap here to sign",
+  click_here_to_sign: "Click here to sign"
 };
 
 // src/locales/es/translation.json
@@ -9290,6 +9292,7 @@ function getTrimmedCanvasData(canvas, padding = 10) {
 var SignatureCanvas = (0, import_react74.forwardRef)(
   ({ onClear, onEnd, onEnable, className, enabled }, ref) => {
     const { t } = (0, import_react_i18next17.useTranslation)();
+    const isMobile3 = useIsMobile();
     const canvasRef = (0, import_react74.useRef)(null);
     const containerRef = (0, import_react74.useRef)(null);
     const [size, setSize] = (0, import_react74.useState)({ width: 330, height: 190 });
@@ -9344,7 +9347,7 @@ var SignatureCanvas = (0, import_react74.forwardRef)(
         setHasSignature(false);
       },
       isEmpty: () => canvasRef.current?.isEmpty() ?? true,
-      fromDataURL: canvasRef.current?.fromDataURL,
+      fromDataURL: (...args) => canvasRef.current?.fromDataURL(...args),
       toDataURL: (type, encoderOptions) => canvasRef.current?.toDataURL(type, encoderOptions) ?? "",
       toTrimmedDataURL: (type = "image/png", encoderOptions, padding = 10) => {
         const canvas = canvasRef.current?.getCanvas();
@@ -9353,7 +9356,7 @@ var SignatureCanvas = (0, import_react74.forwardRef)(
         if (!trimmed) return "";
         return trimmed.canvas.toDataURL(type, encoderOptions);
       },
-      getCanvas: () => canvasRef.current?.getCanvas() ?? null
+      getCanvas: (...args) => canvasRef.current?.getCanvas(...args)
     }));
     return /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
       "div",
@@ -9361,53 +9364,52 @@ var SignatureCanvas = (0, import_react74.forwardRef)(
         ref: containerRef,
         className: cn("relative flex w-full flex-col items-center", className),
         children: [
-          !enabled && /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
-            "button",
-            {
-              type: "button",
-              className: cn(
-                "absolute left-1/2 top-0 z-10 flex -translate-x-1/2 flex-col items-center",
-                "justify-center rounded-xl border-2 border-[var(--signature-canvas-border)] bg-transparent",
-                "cursor-pointer select-none"
-              ),
-              style: { width: size.width, height: size.height },
-              onClick: onEnable,
-              "data-testid": "signature-placeholder",
-              children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
-                "span",
-                {
-                  className: cn(
-                    "mx-auto max-w-[200px] break-words text-center text-base font-medium",
-                    "text-[var(--signature-canvas-placeholder-text)] opacity-55"
-                  ),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_react_i18next17.Trans, { i18nKey: "tap_here_to_sign" })
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
             "div",
             {
               className: cn(
-                "overflow-hidden rounded-xl border-2",
-                "border-[var(--signature-canvas-border)] bg-[var(--signature-canvas-bg)]",
-                { hidden: !enabled }
+                "relative overflow-hidden rounded-xl border-2",
+                "border-[var(--signature-canvas-border)] bg-[var(--signature-canvas-bg)]"
               ),
               style: { width: size.width, height: size.height },
-              children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
-                import_react_signature_canvas.default,
-                {
-                  ref: canvasRef,
-                  "data-testid": "canvas",
-                  canvasProps: {
-                    width: size.width,
-                    height: size.height,
-                    style: { width: size.width, height: size.height }
-                  },
-                  onEnd: handleEnd,
-                  ...SIGNATURE_PROPS
-                }
-              )
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+                  import_react_signature_canvas.default,
+                  {
+                    ref: canvasRef,
+                    "data-testid": "canvas",
+                    canvasProps: {
+                      width: size.width,
+                      height: size.height,
+                      style: { width: size.width, height: size.height }
+                    },
+                    onEnd: handleEnd,
+                    ...SIGNATURE_PROPS
+                  }
+                ),
+                !enabled && /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: cn(
+                      "absolute inset-0 flex cursor-pointer items-center justify-center",
+                      "bg-transparent"
+                    ),
+                    onClick: onEnable,
+                    "data-testid": "signature-placeholder",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+                      "span",
+                      {
+                        className: cn(
+                          "max-w-[200px] break-words text-center text-lg font-medium",
+                          "text-[var(--signature-canvas-placeholder-text)] opacity-60"
+                        ),
+                        children: isMobile3 ? t("tap_here_to_sign") : t("click_here_to_sign")
+                      }
+                    )
+                  }
+                )
+              ]
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(