@chekinapp/ui 0.0.99 → 0.0.100

package/dist/index.cjs

@@ -9234,21 +9234,37 @@ var sign_finger_default = SvgSignFinger;
 
 // src/signature-canvas/SignatureCanvas.tsx
 var import_jsx_runtime109 = require("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 = (0, import_react74.forwardRef)(
   ({ onClear, hasSignature, onEnd, onEnable, className, enabled }, ref) => {
     const { t } = (0, import_react_i18next17.useTranslation)();
     const internalRef = (0, import_react74.useRef)(null);
+    const containerRef = (0, import_react74.useRef)(null);
     const combinedRef = useCombinedRef(ref, internalRef);
+    const [size, setSize] = (0, import_react74.useState)({ width: 330, height: 190 });
+    const calculateSize = (0, import_react74.useCallback)((containerWidth) => {
+      const width = Math.min(containerWidth, 646);
+      const height = Math.round(width / ASPECT_RATIO);
+      setSize({ width, height });
+    }, []);
+    (0, import_react74.useEffect)(() => {
+      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]);
     (0, import_react74.useEffect)(() => {
       if (!onEnd) return;
       const signPad = internalRef.current?.instance;
@@ -9257,73 +9273,85 @@ var SignatureCanvas = (0, import_react74.forwardRef)(
         signPad?.removeEventListener("endStroke", onEnd);
       };
     }, [onEnd]);
-    return /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("div", { className: cn("relative inline-flex flex-col", className), children: [
-      !enabled && /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
-        "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__ */ (0, import_jsx_runtime109.jsx)(SvgIcon, { as: sign_finger_default, size: 41, className: "w-[37px] opacity-[0.55]" }),
-            /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
-              "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__ */ (0, import_jsx_runtime109.jsx)(import_react_i18next17.Trans, { i18nKey: "signature_placeholder_text" })
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
-        "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__ */ (0, import_jsx_runtime109.jsx)(
-            import_react_signature_pad_wrapper.default,
+    return /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
+      "div",
+      {
+        ref: containerRef,
+        className: cn("relative flex w-full flex-col items-center", className),
+        children: [
+          !enabled && /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
+            "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__ */ (0, import_jsx_runtime109.jsx)(SvgIcon, { as: sign_finger_default, size: 41, className: "w-[37px] opacity-55" }),
+                /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+                  "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__ */ (0, import_jsx_runtime109.jsx)(import_react_i18next17.Trans, { i18nKey: "tap_here_to_sign" })
+                  }
+                )
+              ]
             }
-          )
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
-        "div",
-        {
-          className: cn("text-right", {
-            invisible: !enabled || !hasSignature
-          }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
-            Button,
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+            "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__ */ (0, import_jsx_runtime109.jsx)(
+                import_react_signature_pad_wrapper.default,
+                {
+                  ref: combinedRef,
+                  "data-testid": "canvas",
+                  options: SIGNATURE_PROPS,
+                  canvasProps: {
+                    style: { width: `${size.width}px`, height: `${size.height}px` }
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+            "div",
+            {
+              className: cn("w-full text-right", {
+                invisible: !enabled || !hasSignature
+              }),
+              style: { maxWidth: size.width },
+              children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+                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";
@@ -11682,7 +11710,7 @@ function DeviceCamera({ onChange, facingMode, className }) {
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { children: t("camera_errors.experiencing_camera_issues") }),
-        /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("label", { className: "text-[16px] font-semibold uppercase leading-6 text-[var(--text-button-color)]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("label", { className: "text-[16px] font-semibold uppercase leading-6", children: [
           t("open_devices_camera"),
           /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
             "input",