@planetaexo/design-system 0.9.4 → 0.9.5

package/dist/index.cjs

@@ -5696,74 +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];
-    if (numeric.length === 1) {
-      newDigits[index] = numeric;
-      updateValue(newDigits);
-      if (index < length - 1) focusSlot(index + 1);
-      return;
-    }
-    const toPaste = numeric.slice(0, length - index);
-    for (let i = 0; i < toPaste.length; i++) {
-      newDigits[index + i] = toPaste[i];
-    }
-    updateValue(newDigits);
-    const lastFilled = Math.min(index + toPaste.length, length) - 1;
-    focusSlot(lastFilled < length - 1 ? lastFilled + 1 : lastFilled);
-  };
-  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",
@@ -5776,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";