@verma-consulting/design-library 0.1.47 → 0.1.48

package/dist/index.mjs

@@ -2271,6 +2271,183 @@ var CountrySelect = ({
   );
 };
 var CountrySelect_default = CountrySelect;
+
+// src/OTPField.tsx
+import {
+  useCallback as useCallback2,
+  useEffect as useEffect6,
+  useRef as useRef5,
+  useState as useState7
+} from "react";
+import { Box as Box10, TextField as TextField4 } from "@mui/material";
+import { jsx as jsx19 } from "react/jsx-runtime";
+function toCells(s, len) {
+  const slice = (s || "").slice(0, len);
+  return Array.from({ length: len }, (_, i) => {
+    var _a2;
+    return (_a2 = slice[i]) != null ? _a2 : "";
+  });
+}
+var OTPField = ({
+  length,
+  initialValue = "",
+  onChange,
+  onComplete,
+  secret = false,
+  autoSelect = false,
+  disabled = false,
+  inputFocusStyle,
+  sx,
+  type = "text",
+  inputMode = "text",
+  regexCriteria
+}) => {
+  const [cells, setCells] = useState7(() => toCells(initialValue, length));
+  const cellsRef = useRef5(cells);
+  cellsRef.current = cells;
+  const refs = useRef5([]);
+  useEffect6(() => {
+    setCells(toCells(initialValue, length));
+  }, [initialValue, length]);
+  const emit = useCallback2(
+    (next, editedIndex) => {
+      setCells(next);
+      const joined = next.join("");
+      onChange(joined, editedIndex);
+      if (onComplete && joined.length === length && next.every(Boolean)) {
+        onComplete(joined, length - 1);
+      }
+    },
+    [length, onChange, onComplete]
+  );
+  useEffect6(() => {
+    if (!autoSelect) return;
+    const id = requestAnimationFrame(() => {
+      var _a2;
+      return (_a2 = refs.current[0]) == null ? void 0 : _a2.focus();
+    });
+    return () => cancelAnimationFrame(id);
+  }, [autoSelect, length]);
+  const charAllowed = useCallback2(
+    (ch) => {
+      if (!ch) return true;
+      if (type === "numeric" && /\D/.test(ch)) return false;
+      if (regexCriteria && !regexCriteria.test(ch)) return false;
+      return true;
+    },
+    [regexCriteria, type]
+  );
+  const applyMany = useCallback2(
+    (startIdx, raw) => {
+      var _a2;
+      const incoming = (type === "numeric" ? raw.replace(/\D/g, "") : raw).split("");
+      const next = [...cellsRef.current];
+      let i = startIdx;
+      for (const ch of incoming) {
+        if (i >= length) break;
+        if (!charAllowed(ch)) return;
+        next[i] = ch;
+        i += 1;
+      }
+      const focusAt = Math.min(Math.max(i - 1, 0), length - 1);
+      emit(next, focusAt);
+      (_a2 = refs.current[focusAt]) == null ? void 0 : _a2.focus();
+    },
+    [charAllowed, emit, length, type]
+  );
+  const onFieldChange = (idx, e) => {
+    var _a2;
+    const raw = e.target.value;
+    if (raw.length > 1) {
+      applyMany(idx, raw);
+      return;
+    }
+    if (raw && !charAllowed(raw)) return;
+    const next = [...cellsRef.current];
+    next[idx] = raw;
+    emit(next, idx);
+    if (raw && idx < length - 1) {
+      (_a2 = refs.current[idx + 1]) == null ? void 0 : _a2.focus();
+    }
+  };
+  const onKeyDown = (idx, e) => {
+    var _a2, _b, _c;
+    if (e.key === "Backspace") {
+      const next = [...cellsRef.current];
+      if (next[idx]) {
+        next[idx] = "";
+        emit(next, idx);
+      } else if (idx > 0) {
+        next[idx - 1] = "";
+        emit(next, idx - 1);
+        (_a2 = refs.current[idx - 1]) == null ? void 0 : _a2.focus();
+      }
+      e.preventDefault();
+    } else if (e.key === "ArrowLeft" && idx > 0) {
+      (_b = refs.current[idx - 1]) == null ? void 0 : _b.focus();
+      e.preventDefault();
+    } else if (e.key === "ArrowRight" && idx < length - 1) {
+      (_c = refs.current[idx + 1]) == null ? void 0 : _c.focus();
+      e.preventDefault();
+    }
+  };
+  const onPasteFirst = (e) => {
+    e.preventDefault();
+    const text = e.clipboardData.getData("text").replace(/\s/g, "");
+    if (!text) return;
+    applyMany(0, text);
+  };
+  const inputType = secret ? "password" : type === "numeric" ? "tel" : "text";
+  return /* @__PURE__ */ jsx19(
+    Box10,
+    {
+      sx: [
+        {
+          display: "flex",
+          gap: 1,
+          flexWrap: "nowrap",
+          justifyContent: "center",
+          alignItems: "center"
+        },
+        ...sx == null ? [] : Array.isArray(sx) ? sx : [sx]
+      ],
+      children: Array.from({ length }).map((_, idx) => /* @__PURE__ */ jsx19(
+        TextField4,
+        {
+          inputRef: (el) => {
+            refs.current[idx] = el;
+          },
+          value: cells[idx],
+          onChange: (e) => onFieldChange(idx, e),
+          onKeyDown: (e) => onKeyDown(idx, e),
+          onPaste: idx === 0 ? onPasteFirst : void 0,
+          disabled,
+          size: "small",
+          type: inputType,
+          sx: {
+            width: 44,
+            "& .MuiOutlinedInput-input": {
+              textAlign: "center",
+              py: 1,
+              px: 0.5
+            },
+            ...inputFocusStyle ? {
+              "& .MuiOutlinedInput-root.Mui-focused fieldset": inputFocusStyle
+            } : {}
+          },
+          inputProps: {
+            maxLength: 1,
+            inputMode: inputMode != null ? inputMode : void 0,
+            "aria-label": `Code character ${idx + 1} of ${length}`,
+            autoComplete: "one-time-code"
+          }
+        },
+        idx
+      ))
+    }
+  );
+};
+var OTPField_default = OTPField;
 export {
   CountrySelect_default as CountrySelect,
   EmptyState_default as EmptyState,
@@ -2283,6 +2460,7 @@ export {
   InputFileUpload_default as InputFileUpload,
   Loader_default as Loader,
   Logo_default as Logo,
+  OTPField_default as OTPField,
   PhoneNumberField_default as PhoneNumberField,
   Pill_default as Pill,
   SearchableSelect_default as SearchableSelect,