@chekinapp/ui 0.0.99 → 0.0.100

package/dist/index.js

@@ -8834,7 +8834,7 @@ var VALUE_PART = 1;
 var getSidebarState = (stateName) => document.cookie.split("; ").find((row) => row.startsWith(`${stateName}=`))?.split("=")[VALUE_PART] === "true";
 
 // src/signature-canvas/SignatureCanvas.tsx
-import { forwardRef as forwardRef41, useEffect as useEffect29, useRef as useRef21 } from "react";
+import { forwardRef as forwardRef41, useEffect as useEffect29, useRef as useRef21, useState as useState32, useCallback as useCallback24 } from "react";
 import { Trans, useTranslation as useTranslation17 } from "react-i18next";
 import ReactSignatureCanvas from "react-signature-pad-wrapper";
 
@@ -8852,21 +8852,37 @@ var sign_finger_default = SvgSignFinger;
 
 // src/signature-canvas/SignatureCanvas.tsx
 import { jsx as jsx107, jsxs as jsxs66 } from "react/jsx-runtime";
-var CANVAS_PROPS = {
-  width: "250px",
-  height: "174px"
-};
 var SIGNATURE_PROPS = {
   penColor: "#161643",
   minWidth: 1.5,
   maxWidth: 1.5,
   dotSize: 1
 };
+var ASPECT_RATIO = 330 / 190;
 var SignatureCanvas = forwardRef41(
   ({ onClear, hasSignature, onEnd, onEnable, className, enabled }, ref) => {
     const { t } = useTranslation17();
     const internalRef = useRef21(null);
+    const containerRef = useRef21(null);
     const combinedRef = useCombinedRef(ref, internalRef);
+    const [size, setSize] = useState32({ width: 330, height: 190 });
+    const calculateSize = useCallback24((containerWidth) => {
+      const width = Math.min(containerWidth, 646);
+      const height = Math.round(width / ASPECT_RATIO);
+      setSize({ width, height });
+    }, []);
+    useEffect29(() => {
+      const container = containerRef.current;
+      if (!container) return;
+      const observer = new ResizeObserver((entries) => {
+        const entry = entries[0];
+        if (entry) {
+          calculateSize(entry.contentRect.width);
+        }
+      });
+      observer.observe(container);
+      return () => observer.disconnect();
+    }, [calculateSize]);
     useEffect29(() => {
       if (!onEnd) return;
       const signPad = internalRef.current?.instance;
@@ -8875,73 +8891,85 @@ var SignatureCanvas = forwardRef41(
         signPad?.removeEventListener("endStroke", onEnd);
       };
     }, [onEnd]);
-    return /* @__PURE__ */ jsxs66("div", { className: cn("relative inline-flex flex-col", className), children: [
-      !enabled && /* @__PURE__ */ jsxs66(
-        "button",
-        {
-          type: "button",
-          className: cn(
-            "absolute left-0 top-0 z-10 flex h-[174px] w-[250px] flex-col items-center",
-            "justify-between rounded border-0 bg-[var(--signature-canvas-placeholder-bg)] px-0 pb-7 pt-10",
-            "cursor-pointer select-none"
-          ),
-          onClick: onEnable,
-          "data-testid": "signature-placeholder",
-          children: [
-            /* @__PURE__ */ jsx107(SvgIcon, { as: sign_finger_default, size: 41, className: "w-[37px] opacity-[0.55]" }),
-            /* @__PURE__ */ jsx107(
-              "span",
-              {
-                className: cn(
-                  "mx-auto mt-2 max-w-[154px] break-words text-center text-sm font-medium uppercase",
-                  "text-[var(--signature-canvas-placeholder-text)] opacity-[0.55]"
-                ),
-                children: /* @__PURE__ */ jsx107(Trans, { i18nKey: "signature_placeholder_text" })
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx107(
-        "div",
-        {
-          className: cn(
-            "inline-flex h-[174px] w-[250px] cursor-pointer justify-center rounded border",
-            "border-[var(--signature-canvas-border)] shadow-[var(--signature-canvas-shadow)]",
-            "box-border max-[320px]:overflow-hidden"
-          ),
-          children: /* @__PURE__ */ jsx107(
-            ReactSignatureCanvas,
+    return /* @__PURE__ */ jsxs66(
+      "div",
+      {
+        ref: containerRef,
+        className: cn("relative flex w-full flex-col items-center", className),
+        children: [
+          !enabled && /* @__PURE__ */ jsxs66(
+            "button",
             {
-              ref: combinedRef,
-              "data-testid": "canvas",
-              ...SIGNATURE_PROPS,
-              canvasProps: CANVAS_PROPS
+              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__ */ jsx107(SvgIcon, { as: sign_finger_default, size: 41, className: "w-[37px] opacity-55" }),
+                /* @__PURE__ */ jsx107(
+                  "span",
+                  {
+                    className: cn(
+                      "mx-auto mt-4 max-w-[200px] break-words text-center text-base font-medium",
+                      "text-[var(--signature-canvas-placeholder-text)] opacity-55"
+                    ),
+                    children: /* @__PURE__ */ jsx107(Trans, { i18nKey: "tap_here_to_sign" })
+                  }
+                )
+              ]
             }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsx107(
-        "div",
-        {
-          className: cn("text-right", {
-            invisible: !enabled || !hasSignature
-          }),
-          children: /* @__PURE__ */ jsx107(
-            Button,
+          ),
+          /* @__PURE__ */ jsx107(
+            "div",
             {
-              variant: "link",
               className: cn(
-                "ml-auto mt-2 h-[30px] min-w-[70px] select-none rounded-sm px-2 py-0.5 text-right",
-                "text-xs uppercase hover:opacity-[0.88] active:opacity-100"
+                "inline-flex cursor-pointer justify-center rounded-xl border-2",
+                "border-[var(--signature-canvas-border)] bg-[var(--signature-canvas-bg)]",
+                { hidden: !enabled }
               ),
-              onClick: onClear,
-              children: t("clear")
+              style: { width: size.width, height: size.height },
+              children: /* @__PURE__ */ jsx107(
+                ReactSignatureCanvas,
+                {
+                  ref: combinedRef,
+                  "data-testid": "canvas",
+                  options: SIGNATURE_PROPS,
+                  canvasProps: {
+                    style: { width: `${size.width}px`, height: `${size.height}px` }
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx107(
+            "div",
+            {
+              className: cn("w-full text-right", {
+                invisible: !enabled || !hasSignature
+              }),
+              style: { maxWidth: size.width },
+              children: /* @__PURE__ */ jsx107(
+                Button,
+                {
+                  variant: "link",
+                  className: cn(
+                    "ml-auto mt-2 h-[30px] min-w-[70px] select-none rounded-sm px-2 py-0.5 text-right",
+                    "text-xs uppercase hover:opacity-[0.88] active:opacity-100"
+                  ),
+                  onClick: onClear,
+                  children: t("clear")
+                }
+              )
             }
           )
-        }
-      )
-    ] });
+        ]
+      }
+    );
   }
 );
 SignatureCanvas.displayName = "SignatureCanvas";
@@ -9965,11 +9993,11 @@ function TimelineDescription({ className, asChild, ...props }) {
 import { Toaster, toast as toast2 } from "sonner";
 
 // src/toaster/useUpdateToast.ts
-import { useCallback as useCallback25, useRef as useRef22 } from "react";
+import { useCallback as useCallback26, useRef as useRef22 } from "react";
 import { toast } from "sonner";
 function useUpdateToast({ id }) {
   const toastIdRef = useRef22("");
-  const getToastOptions = useCallback25(
+  const getToastOptions = useCallback26(
     (options) => ({
       id: toastIdRef.current,
       dismissible: false,
@@ -10314,7 +10342,7 @@ function UploadedFilesList({
 }
 
 // src/vertical-tabs/VerticalTabs.tsx
-import { useState as useState33 } from "react";
+import { useState as useState34 } from "react";
 import { jsx as jsx133, jsxs as jsxs81 } from "react/jsx-runtime";
 function getKey(index, key) {
   return `${key || "step"}_${index}`;
@@ -10326,7 +10354,7 @@ function VerticalTabs({
   className
 }) {
   const defaultValue = getKey(0, stepKey);
-  const [value, setValue] = useState33(defaultValue);
+  const [value, setValue] = useState34(defaultValue);
   const hasImages = steps.every((step) => step.images?.length);
   return /* @__PURE__ */ jsxs81(
     "div",
@@ -10485,7 +10513,7 @@ function VideoModal({
 }
 
 // src/video-player/VideoPlayer.tsx
-import { useEffect as useEffect33, useRef as useRef24, useState as useState34 } from "react";
+import { useEffect as useEffect33, useRef as useRef24, useState as useState35 } from "react";
 import { useTranslation as useTranslation22 } from "react-i18next";
 import {
   Loader2 as Loader23,
@@ -10512,15 +10540,15 @@ function VideoPlayer({
   const videoRef = useRef24(null);
   const iframeRef = useRef24(null);
   const containerRef = useRef24(null);
-  const [isPlaying, setIsPlaying] = useState34(false);
-  const [isMuted, setIsMuted] = useState34(false);
-  const [currentTime, setCurrentTime] = useState34(0);
-  const [duration, setDuration] = useState34(0);
-  const [isFullScreenMode, setIsFullScreenMode] = useState34(isFullScreen);
-  const [isLoading, setIsLoading] = useState34(true);
-  const [videoSource, setVideoSource] = useState34("file");
-  const [youtubeEmbedUrl, setYoutubeEmbedUrl] = useState34("");
-  const [vimeoEmbedUrl, setVimeoEmbedUrl] = useState34("");
+  const [isPlaying, setIsPlaying] = useState35(false);
+  const [isMuted, setIsMuted] = useState35(false);
+  const [currentTime, setCurrentTime] = useState35(0);
+  const [duration, setDuration] = useState35(0);
+  const [isFullScreenMode, setIsFullScreenMode] = useState35(isFullScreen);
+  const [isLoading, setIsLoading] = useState35(true);
+  const [videoSource, setVideoSource] = useState35("file");
+  const [youtubeEmbedUrl, setYoutubeEmbedUrl] = useState35("");
+  const [vimeoEmbedUrl, setVimeoEmbedUrl] = useState35("");
   useClickEscape({ enabled: isFullScreenMode, onClick: onClose });
   useEffect33(() => {
     const youtubeRegex = /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})/;
@@ -10804,11 +10832,11 @@ function VideoPlayer({
 import {
   forwardRef as forwardRef54,
   memo as memo7,
-  useCallback as useCallback27,
+  useCallback as useCallback28,
   useImperativeHandle,
   useMemo as useMemo7,
   useRef as useRef25,
-  useState as useState35
+  useState as useState36
 } from "react";
 import { isFirefox, isMobile as isMobile2 } from "react-device-detect";
 import ReactWebcam from "react-webcam";
@@ -10863,7 +10891,7 @@ async function compressImage(image) {
 }
 
 // src/webcam/useErrorHandler.ts
-import { useCallback as useCallback26 } from "react";
+import { useCallback as useCallback27 } from "react";
 import { useTranslation as useTranslation23 } from "react-i18next";
 import { isSafari as isSafari2 } from "react-device-detect";
 
@@ -11029,7 +11057,7 @@ var GET_USER_MEDIA_ERROR = "getUserMedia is not implemented in this browser";
 function useErrorHandler({ onError }) {
   const { t } = useTranslation23();
   const handleError = useEvent(onError);
-  const handleUserMediaError = useCallback26(
+  const handleUserMediaError = useCallback27(
     (error) => {
       console.error(error);
       let errorText = "";
@@ -11124,10 +11152,10 @@ var Webcam = memo7(
       onError,
       ...props
     }, ref) => {
-      const [minScreenshotHeight, setMinScreenshotHeight] = useState35();
-      const [minScreenshotWidth, setMinScreenshotWidth] = useState35();
-      const [useReducedConstraints, setUseReducedConstraints] = useState35(false);
-      const [numberOfCameras, setNumberOfCameras] = useState35(0);
+      const [minScreenshotHeight, setMinScreenshotHeight] = useState36();
+      const [minScreenshotWidth, setMinScreenshotWidth] = useState36();
+      const [useReducedConstraints, setUseReducedConstraints] = useState36(false);
+      const [numberOfCameras, setNumberOfCameras] = useState36(0);
       const constraints = useMemo7(() => {
         if (videoConstraints) {
           return videoConstraints;
@@ -11159,7 +11187,7 @@ var Webcam = memo7(
           onError(errorDetails);
         }
       });
-      const handleUserMediaErrorWithFallback = useCallback27(
+      const handleUserMediaErrorWithFallback = useCallback28(
         (error) => {
           if (error instanceof DOMException && error.name === "OverconstrainedError" && !useReducedConstraints && !videoConstraints) {
             console.warn("Camera constraints failed, trying reduced constraints:", error);
@@ -11209,7 +11237,7 @@ var Webcam = memo7(
           ...webcamRef.current
         })
       );
-      const handleUserMediaSuccess = useCallback27(
+      const handleUserMediaSuccess = useCallback28(
         (stream) => {
           if (!isMobile2) {
             const track = stream.getVideoTracks()[0];
@@ -11300,17 +11328,17 @@ Webcam.displayName = "Webcam";
 
 // src/mobile-webcam/MobileWebcam.tsx
 import { Camera, ChevronLeft as ChevronLeft4 } from "lucide-react";
-import { forwardRef as forwardRef55, useCallback as useCallback29 } from "react";
+import { forwardRef as forwardRef55, useCallback as useCallback30 } from "react";
 import { createPortal } from "react-dom";
 import { useTranslation as useTranslation25 } from "react-i18next";
 
 // src/mobile-webcam/DeviceCamera/DeviceCamera.tsx
-import { useCallback as useCallback28 } from "react";
+import { useCallback as useCallback29 } from "react";
 import { useTranslation as useTranslation24 } from "react-i18next";
 import { jsx as jsx137, jsxs as jsxs85 } from "react/jsx-runtime";
 function DeviceCamera({ onChange, facingMode, className }) {
   const { t } = useTranslation24();
-  const handleNativeScreenshot = useCallback28(
+  const handleNativeScreenshot = useCallback29(
     (event) => {
       const file = event.target.files?.[0];
       onChange(file ? compressImage(file) : void 0);
@@ -11326,7 +11354,7 @@ function DeviceCamera({ onChange, facingMode, className }) {
       ),
       children: [
         /* @__PURE__ */ jsx137("div", { children: t("camera_errors.experiencing_camera_issues") }),
-        /* @__PURE__ */ jsxs85("label", { className: "text-[16px] font-semibold uppercase leading-6 text-[var(--text-button-color)]", children: [
+        /* @__PURE__ */ jsxs85("label", { className: "text-[16px] font-semibold uppercase leading-6", children: [
           t("open_devices_camera"),
           /* @__PURE__ */ jsx137(
             "input",
@@ -11358,7 +11386,7 @@ var MobileWebcam = forwardRef55(
   ({ onScreenshot, onBack, title, text, disabled, className, ...props }, ref) => {
     const rootElement = getDocument()?.body;
     const { t } = useTranslation25();
-    const handleNativeScreenshot = useCallback29(
+    const handleNativeScreenshot = useCallback30(
       (photo) => onScreenshot({ isNative: true, photo }),
       [onScreenshot]
     );
@@ -18056,7 +18084,7 @@ AirbnbPhoneField.displayName = "AirbnbPhoneField";
 import * as React72 from "react";
 import { ChevronDown as ChevronDown6, Search as Search3 } from "lucide-react";
 import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
-import { useCallback as useCallback49 } from "react";
+import { useCallback as useCallback50 } from "react";
 import { jsx as jsx179, jsxs as jsxs119 } from "react/jsx-runtime";
 var ROW_HEIGHT = 48;
 var DESKTOP_LIST_HEIGHT = 280;
@@ -18135,7 +18163,7 @@ var AirbnbSearchableSelectInternal = ({
     isDisabled: !open || isMobile3
   });
   const handleOnOpenChange = useEvent(onOpenChange);
-  const setSelectOpen = useCallback49(
+  const setSelectOpen = useCallback50(
     (nextOpen, options2) => {
       setOpen(nextOpen);
       handleOnOpenChange?.(nextOpen);