@planetaexo/design-system 0.4.16 → 0.4.17

package/dist/index.js

@@ -5025,6 +5025,7 @@ var OTPCodeInput = ({
   const updateValue = (newDigits) => {
     onChange(newDigits.join(""));
   };
+  const focusedIndexRef = React22.useRef(0);
   const focusSlot = (index) => {
     var _a;
     if (index >= 0 && index < length) {
@@ -5067,20 +5068,22 @@ var OTPCodeInput = ({
     e.preventDefault();
     const pasted = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, length);
     if (!pasted) return;
+    const startIndex = focusedIndexRef.current;
     const newDigits = [...digits];
-    for (let i = 0; i < pasted.length; i++) {
-      newDigits[i] = pasted[i];
+    for (let i = 0; i < pasted.length && startIndex + i < length; i++) {
+      newDigits[startIndex + i] = pasted[i];
     }
     updateValue(newDigits);
-    const nextEmpty = newDigits.findIndex((d, i) => i >= pasted.length && !d);
-    focusSlot(nextEmpty !== -1 ? nextEmpty : Math.min(pasted.length, length - 1));
+    const lastFilled = Math.min(startIndex + pasted.length, length) - 1;
+    focusSlot(lastFilled < length - 1 ? lastFilled + 1 : lastFilled);
   };
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center", className), children: [
     /* @__PURE__ */ jsx(
       "label",
       {
+        htmlFor: baseId,
         className: cn(
-          "text-sm text-muted-foreground mb-2",
+          "self-start text-sm text-muted-foreground font-ui mb-2",
           required && "after:content-['*'] after:text-primary after:ml-0.5"
         ),
         children: label
@@ -5090,11 +5093,12 @@ var OTPCodeInput = ({
       "div",
       {
         className: cn(
-          "flex gap-2",
+          "flex justify-center gap-2",
           disabled && "opacity-50 pointer-events-none"
         ),
         role: "group",
         "aria-label": label,
+        onPaste: handlePaste,
         children: digits.map((digit, index) => /* @__PURE__ */ jsx(
           "input",
           {
@@ -5105,17 +5109,19 @@ var OTPCodeInput = ({
             type: "text",
             inputMode: "numeric",
             pattern: "\\d*",
-            maxLength: 1,
+            maxLength: 2,
             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: handlePaste,
-            onFocus: (e) => e.target.select(),
+            onFocus: (e) => {
+              focusedIndexRef.current = index;
+              e.target.select();
+            },
             className: cn(
-              "w-10 h-12 text-center text-lg rounded-lg border",
+              "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",
@@ -5126,7 +5132,7 @@ var OTPCodeInput = ({
         ))
       }
     ),
-    error && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-destructive", children: error })
+    error && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-destructive font-ui self-start", children: error })
   ] });
 };
 OTPCodeInput.displayName = "OTPCodeInput";