@chekinapp/ui 0.0.101 → 0.0.103

package/dist/index.d.cts

@@ -21,6 +21,7 @@ import * as RadixPopover from '@radix-ui/react-popover';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import ReactSignatureCanvas from 'react-signature-canvas';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import { ToastT } from 'sonner';
@@ -861,6 +862,8 @@ declare const uiKitTranslations: {
         clear: string;
         show_less: string;
         show_more: string;
+        tap_here_to_sign: string;
+        click_here_to_sign: string;
     };
     readonly es: {
         verified: string;
@@ -1315,6 +1318,8 @@ declare const uiKitI18nResources: {
             clear: string;
             show_less: string;
             show_more: string;
+            tap_here_to_sign: string;
+            click_here_to_sign: string;
         };
     };
     readonly es: {
@@ -2177,12 +2182,10 @@ type SignatureCanvasProps = {
     className?: string;
     enabled?: boolean;
 };
-type SignatureCanvasRef = {
-    clear: () => void;
-    isEmpty: () => boolean;
-    toDataURL: (type?: string, encoderOptions?: number) => string;
+type SignatureCanvasRef = Pick<ReactSignatureCanvas, 'clear' | 'isEmpty' | 'toDataURL'> & {
+    fromDataURL: (...args: Parameters<ReactSignatureCanvas['fromDataURL']>) => ReturnType<ReactSignatureCanvas['fromDataURL']> | undefined;
+    getCanvas: () => ReturnType<ReactSignatureCanvas['getCanvas']> | undefined;
     toTrimmedDataURL: (type?: string, encoderOptions?: number, padding?: number) => string;
-    getCanvas: () => HTMLCanvasElement | null;
 };
 declare const SignatureCanvas: React$1.ForwardRefExoticComponent<SignatureCanvasProps & React$1.RefAttributes<SignatureCanvasRef>>;
 

package/dist/index.d.ts

@@ -21,6 +21,7 @@ import * as RadixPopover from '@radix-ui/react-popover';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import ReactSignatureCanvas from 'react-signature-canvas';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import { ToastT } from 'sonner';
@@ -861,6 +862,8 @@ declare const uiKitTranslations: {
         clear: string;
         show_less: string;
         show_more: string;
+        tap_here_to_sign: string;
+        click_here_to_sign: string;
     };
     readonly es: {
         verified: string;
@@ -1315,6 +1318,8 @@ declare const uiKitI18nResources: {
             clear: string;
             show_less: string;
             show_more: string;
+            tap_here_to_sign: string;
+            click_here_to_sign: string;
         };
     };
     readonly es: {
@@ -2177,12 +2182,10 @@ type SignatureCanvasProps = {
     className?: string;
     enabled?: boolean;
 };
-type SignatureCanvasRef = {
-    clear: () => void;
-    isEmpty: () => boolean;
-    toDataURL: (type?: string, encoderOptions?: number) => string;
+type SignatureCanvasRef = Pick<ReactSignatureCanvas, 'clear' | 'isEmpty' | 'toDataURL'> & {
+    fromDataURL: (...args: Parameters<ReactSignatureCanvas['fromDataURL']>) => ReturnType<ReactSignatureCanvas['fromDataURL']> | undefined;
+    getCanvas: () => ReturnType<ReactSignatureCanvas['getCanvas']> | undefined;
     toTrimmedDataURL: (type?: string, encoderOptions?: number, padding?: number) => string;
-    getCanvas: () => HTMLCanvasElement | null;
 };
 declare const SignatureCanvas: React$1.ForwardRefExoticComponent<SignatureCanvasProps & React$1.RefAttributes<SignatureCanvasRef>>;
 

package/dist/index.js

@@ -5652,7 +5652,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
@@ -8850,7 +8852,7 @@ import {
   useImperativeHandle,
   useLayoutEffect as useLayoutEffect4
 } from "react";
-import { Trans, useTranslation as useTranslation17 } from "react-i18next";
+import { useTranslation as useTranslation17 } from "react-i18next";
 import ReactSignatureCanvas from "react-signature-canvas";
 import { jsx as jsx106, jsxs as jsxs65 } from "react/jsx-runtime";
 var SIGNATURE_PROPS = {
@@ -8916,6 +8918,7 @@ function getTrimmedCanvasData(canvas, padding = 10) {
 var SignatureCanvas = forwardRef41(
   ({ onClear, onEnd, onEnable, className, enabled }, ref) => {
     const { t } = useTranslation17();
+    const isMobile3 = useIsMobile();
     const canvasRef = useRef21(null);
     const containerRef = useRef21(null);
     const [size, setSize] = useState32({ width: 330, height: 190 });
@@ -8970,7 +8973,7 @@ var SignatureCanvas = forwardRef41(
         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();
@@ -8979,7 +8982,7 @@ var SignatureCanvas = forwardRef41(
         if (!trimmed) return "";
         return trimmed.canvas.toDataURL(type, encoderOptions);
       },
-      getCanvas: () => canvasRef.current?.getCanvas() ?? null
+      getCanvas: (...args) => canvasRef.current?.getCanvas(...args)
     }));
     return /* @__PURE__ */ jsxs65(
       "div",
@@ -8987,53 +8990,52 @@ var SignatureCanvas = forwardRef41(
         ref: containerRef,
         className: cn("relative flex w-full flex-col items-center", className),
         children: [
-          !enabled && /* @__PURE__ */ jsx106(
-            "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__ */ jsx106(
-                "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__ */ jsx106(Trans, { i18nKey: "tap_here_to_sign" })
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx106(
+          /* @__PURE__ */ jsxs65(
             "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__ */ jsx106(
-                ReactSignatureCanvas,
-                {
-                  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__ */ jsx106(
+                  ReactSignatureCanvas,
+                  {
+                    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__ */ jsx106(
+                  "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__ */ jsx106(
+                      "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__ */ jsx106(
@@ -11357,9 +11359,9 @@ var Webcam = memo7(
         {
           ref: containerRef,
           className: cn(
-            className,
             "webcam relative z-[1] mx-auto flex h-[222px] w-[332px] items-center justify-center overflow-hidden rounded-[6px] text-center",
-            "kiosko:h-[620px] kiosko:max-h-[620px] kiosko:w-[890px] kiosko:max-w-[890px]"
+            "kiosko:h-[620px] kiosko:max-h-[620px] kiosko:w-[890px] kiosko:max-w-[890px]",
+            className
           ),
           style: isMirroredInCSS ? mirroredTransformStyle : void 0,
           children: [