@planetaexo/design-system 0.9.3 → 0.9.5

package/dist/index.cjs

@@ -3894,8 +3894,11 @@ function BookingConfirmationEmail({
   );
 }
 function BookingOtpEmail({
-  bodyMessage,
+  greeting,
+  intro,
+  code,
   expiryMessage,
+  teamSignature,
   logoUrl,
   className
 }) {
@@ -3915,15 +3918,44 @@ function BookingOtpEmail({
       className,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(EmailLogo, { src: logoUrl }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "16px", lineHeight: "1.5", margin: "0 0 12px" }, children: greeting }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "15px", lineHeight: "1.5", margin: "0 0 24px" }, children: intro }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          "p",
+          "table",
           {
-            style: {
-              fontSize: "16px",
-              lineHeight: "1.6",
-              margin: "0 0 16px"
-            },
-            children: bodyMessage
+            role: "presentation",
+            cellPadding: 0,
+            cellSpacing: 0,
+            border: 0,
+            style: { width: "100%", borderCollapse: "collapse", margin: "0 0 24px" },
+            children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
+              "td",
+              {
+                align: "center",
+                style: {
+                  backgroundColor: emailTokens.primaryLight,
+                  border: `1px solid ${emailTokens.border}`,
+                  borderRadius: "12px",
+                  padding: "24px 16px"
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: {
+                      fontFamily: emailTokens.fontFamily,
+                      fontSize: "36px",
+                      fontWeight: 700,
+                      letterSpacing: "0.3em",
+                      color: emailTokens.foreground,
+                      lineHeight: 1,
+                      // Padding esquerdo compensa letter-spacing final, mantendo visualmente centralizado.
+                      paddingLeft: "0.3em"
+                    },
+                    children: code
+                  }
+                )
+              }
+            ) }) })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -3933,11 +3965,12 @@ function BookingOtpEmail({
               color: emailTokens.mutedForeground,
               fontSize: "14px",
               lineHeight: "1.5",
-              margin: "0"
+              margin: "0 0 24px"
             },
             children: expiryMessage
           }
-        )
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "14px", lineHeight: "1.5", margin: "0" }, children: teamSignature })
       ]
     }
   );
@@ -5663,66 +5696,19 @@ var OTPCodeInput = ({
   required
 }) => {
   const baseId = id != null ? id : React22__namespace.useId();
-  const inputRefs = React22__namespace.useRef([]);
+  const inputRef = React22__namespace.useRef(null);
+  const [focused, setFocused] = React22__namespace.useState(false);
   const digits = React22__namespace.useMemo(() => {
     const arr = value.split("").slice(0, length);
     while (arr.length < length) arr.push("");
     return arr;
   }, [value, length]);
-  const updateValue = (newDigits) => {
-    onChange(newDigits.join(""));
-  };
-  const focusedIndexRef = React22__namespace.useRef(0);
-  const focusSlot = (index) => {
-    var _a;
-    if (index >= 0 && index < length) {
-      (_a = inputRefs.current[index]) == null ? void 0 : _a.focus();
-    }
-  };
-  const handleChange = (index, raw) => {
-    const numeric = raw.replace(/\D/g, "");
-    if (!numeric) return;
-    const newDigits = [...digits];
-    newDigits[index] = numeric[numeric.length - 1];
-    updateValue(newDigits);
-    if (index < length - 1) {
-      focusSlot(index + 1);
-    }
-  };
-  const handleKeyDown = (index, e) => {
-    if (e.key === "Backspace") {
-      e.preventDefault();
-      const newDigits = [...digits];
-      if (newDigits[index]) {
-        newDigits[index] = "";
-        updateValue(newDigits);
-      } else if (index > 0) {
-        newDigits[index - 1] = "";
-        updateValue(newDigits);
-        focusSlot(index - 1);
-      }
-    } else if (e.key === "ArrowLeft") {
-      e.preventDefault();
-      focusSlot(index - 1);
-    } else if (e.key === "ArrowRight") {
-      e.preventDefault();
-      focusSlot(index + 1);
-    } else if (e.key === "Tab") ; else if (!/^\d$/.test(e.key) && e.key.length === 1) {
-      e.preventDefault();
-    }
-  };
-  const handlePaste = (e, startIndex) => {
-    e.preventDefault();
-    const pasted = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, length);
-    if (!pasted) return;
-    const newDigits = [...digits];
-    for (let i = 0; i < pasted.length && startIndex + i < length; i++) {
-      newDigits[startIndex + i] = pasted[i];
-    }
-    updateValue(newDigits);
-    const lastFilled = Math.min(startIndex + pasted.length, length) - 1;
-    focusSlot(lastFilled < length - 1 ? lastFilled + 1 : lastFilled);
+  const handleChange = (e) => {
+    const numeric = e.target.value.replace(/\D/g, "").slice(0, length);
+    onChange(numeric);
   };
+  const activeIndex = Math.min(value.length, length - 1);
+  const errorId = error ? `${baseId}-error` : void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center", className), children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "label",
@@ -5735,50 +5721,71 @@ var OTPCodeInput = ({
         children: label
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         className: cn(
-          "flex justify-center gap-2",
+          "relative",
           disabled && "opacity-50 pointer-events-none"
         ),
-        role: "group",
-        "aria-label": label,
-        children: digits.map((digit, index) => /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            ref: (el) => {
-              inputRefs.current[index] = el;
-            },
-            id: index === 0 ? baseId : `${baseId}-${index}`,
-            type: "text",
-            inputMode: "numeric",
-            pattern: "\\d*",
-            maxLength: 1,
-            value: digit,
-            autoComplete: index === 0 ? "one-time-code" : "off",
-            "aria-label": `${label} d\xEDgito ${index + 1} de ${length}`,
-            disabled,
-            onChange: (e) => handleChange(index, e.target.value),
-            onKeyDown: (e) => handleKeyDown(index, e),
-            onPaste: (e) => handlePaste(e, index),
-            onFocus: (e) => {
-              focusedIndexRef.current = index;
-              e.target.select();
-            },
-            className: cn(
-              "w-11 h-14 text-center text-lg rounded-lg border font-ui",
-              "bg-background text-foreground border-border",
-              "transition-colors",
-              "focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary",
-              error && "border-destructive focus:border-destructive focus:ring-destructive"
-            )
-          },
-          index
-        ))
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ref: inputRef,
+              id: baseId,
+              type: "text",
+              inputMode: "numeric",
+              pattern: "\\d*",
+              maxLength: length,
+              value,
+              autoComplete: "one-time-code",
+              "aria-label": label,
+              "aria-describedby": errorId,
+              "aria-invalid": !!error,
+              disabled,
+              required,
+              onChange: handleChange,
+              onFocus: () => setFocused(true),
+              onBlur: () => setFocused(false),
+              className: "absolute inset-0 w-full h-full opacity-0 cursor-text outline-none"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "flex justify-center gap-2 pointer-events-none",
+              role: "group",
+              "aria-hidden": "true",
+              children: digits.map((digit, i) => {
+                const isActive = focused && i === activeIndex;
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "w-11 h-14 flex items-center justify-center text-lg rounded-lg border font-ui",
+                      "bg-background text-foreground border-border transition-colors",
+                      isActive && "border-primary ring-1 ring-primary",
+                      error && "border-destructive"
+                    ),
+                    children: digit
+                  },
+                  i
+                );
+              })
+            }
+          )
+        ]
       }
     ),
-    error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-destructive font-ui self-start", children: error })
+    error && /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        id: errorId,
+        className: "mt-1 text-xs text-destructive font-ui self-start",
+        children: error
+      }
+    )
   ] });
 };
 OTPCodeInput.displayName = "OTPCodeInput";