@apexcura/ui-components 0.0.14-Beta58 → 0.0.14-Beta59

package/dist/index.d.mts

@@ -116,4 +116,6 @@ declare const SwitchElement: () => React$1.JSX.Element;
 
 declare const Upload: (props: ElementType) => React$1.JSX.Element;
 
-export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, DateRangePickerElement, DropDownGroup, FileUpload, Image, MultipleSelectElement, Navbar, NumberElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleCheckbox, SingleSelectElement, SwitchElement, TableElement, TabsElement, TextElement, TextareaElement, Upload };
+declare const OtpElement: (props: ElementType) => React$1.JSX.Element;
+
+export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, DateRangePickerElement, DropDownGroup, FileUpload, Image, MultipleSelectElement, Navbar, NumberElement, OtpElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleCheckbox, SingleSelectElement, SwitchElement, TableElement, TabsElement, TextElement, TextareaElement, Upload };

package/dist/index.d.ts

@@ -116,4 +116,6 @@ declare const SwitchElement: () => React$1.JSX.Element;
 
 declare const Upload: (props: ElementType) => React$1.JSX.Element;
 
-export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, DateRangePickerElement, DropDownGroup, FileUpload, Image, MultipleSelectElement, Navbar, NumberElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleCheckbox, SingleSelectElement, SwitchElement, TableElement, TabsElement, TextElement, TextareaElement, Upload };
+declare const OtpElement: (props: ElementType) => React$1.JSX.Element;
+
+export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, DateRangePickerElement, DropDownGroup, FileUpload, Image, MultipleSelectElement, Navbar, NumberElement, OtpElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleCheckbox, SingleSelectElement, SwitchElement, TableElement, TabsElement, TextElement, TextareaElement, Upload };

package/dist/index.js

@@ -42,6 +42,7 @@ __export(src_exports, {
   MultipleSelectElement: () => MultipleSelectElement,
   Navbar: () => Navbar,
   NumberElement: () => NumberElement,
+  OtpElement: () => OtpElement,
   PasswordElement: () => PasswordElement,
   RadioElement: () => RadioElement,
   SelectElement: () => SelectElement,
@@ -1014,6 +1015,61 @@ var Upload2 = (props) => {
     "Upload"
   ));
 };
+
+// src/Components/OtpElement.tsx
+var import_react30 = __toESM(require("react"));
+var import_antd22 = require("antd");
+var OtpElement = (props) => {
+  const [otp, setOtp] = (0, import_react30.useState)(Array(length).fill(""));
+  const inputRefs = (0, import_react30.useRef)([]);
+  const handleChange = (e, index) => {
+    const value = e.target.value;
+    if (/^[0-9]$/.test(value) || value === "") {
+      const newOtp = [...otp];
+      newOtp[index] = value;
+      setOtp(newOtp);
+      props.onChange && props.onChange(newOtp.join(""));
+      if (value && index < length - 1) {
+        inputRefs.current[index + 1]?.focus();
+      }
+    }
+  };
+  const handleKeyDown = (e, index) => {
+    if (e.key === "Backspace" && !otp[index] && index > 0) {
+      inputRefs.current[index - 1]?.focus();
+    }
+  };
+  const handlePaste = (e) => {
+    e.preventDefault();
+    const pasteData = e.clipboardData.getData("text");
+    if (/^\d+$/.test(pasteData)) {
+      const newOtp = pasteData.split("").slice(0, length);
+      setOtp(newOtp.concat(Array(length - newOtp.length).fill("")));
+      props.onChange && props.onChange(newOtp.join(""));
+      newOtp.forEach((_, idx) => {
+        if (inputRefs.current[idx]) {
+          inputRefs.current[idx]?.focus();
+        }
+      });
+    }
+  };
+  (0, import_react30.useEffect)(() => {
+    inputRefs.current[0]?.focus();
+  }, []);
+  return /* @__PURE__ */ import_react30.default.createElement("div", { className: props.containerClassName }, Array.from({ length }).map((_, index) => /* @__PURE__ */ import_react30.default.createElement(
+    import_antd22.Input,
+    {
+      key: index,
+      className: props.className,
+      maxLength: 1,
+      value: otp[index],
+      onChange: (e) => handleChange(e, index),
+      onKeyDown: (e) => handleKeyDown(e, index),
+      onPaste: handlePaste,
+      ref: (el) => inputRefs.current[index] = el
+    }
+  )));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddMoreTable,
@@ -1028,6 +1084,7 @@ var Upload2 = (props) => {
   MultipleSelectElement,
   Navbar,
   NumberElement,
+  OtpElement,
   PasswordElement,
   RadioElement,
   SelectElement,

package/dist/index.mjs

@@ -955,6 +955,61 @@ var Upload2 = (props) => {
     "Upload"
   ));
 };
+
+// src/Components/OtpElement.tsx
+import React30, { useState as useState11, useRef, useEffect as useEffect3 } from "react";
+import { Input as Input3 } from "antd";
+var OtpElement = (props) => {
+  const [otp, setOtp] = useState11(Array(length).fill(""));
+  const inputRefs = useRef([]);
+  const handleChange = (e, index) => {
+    const value = e.target.value;
+    if (/^[0-9]$/.test(value) || value === "") {
+      const newOtp = [...otp];
+      newOtp[index] = value;
+      setOtp(newOtp);
+      props.onChange && props.onChange(newOtp.join(""));
+      if (value && index < length - 1) {
+        inputRefs.current[index + 1]?.focus();
+      }
+    }
+  };
+  const handleKeyDown = (e, index) => {
+    if (e.key === "Backspace" && !otp[index] && index > 0) {
+      inputRefs.current[index - 1]?.focus();
+    }
+  };
+  const handlePaste = (e) => {
+    e.preventDefault();
+    const pasteData = e.clipboardData.getData("text");
+    if (/^\d+$/.test(pasteData)) {
+      const newOtp = pasteData.split("").slice(0, length);
+      setOtp(newOtp.concat(Array(length - newOtp.length).fill("")));
+      props.onChange && props.onChange(newOtp.join(""));
+      newOtp.forEach((_, idx) => {
+        if (inputRefs.current[idx]) {
+          inputRefs.current[idx]?.focus();
+        }
+      });
+    }
+  };
+  useEffect3(() => {
+    inputRefs.current[0]?.focus();
+  }, []);
+  return /* @__PURE__ */ React30.createElement("div", { className: props.containerClassName }, Array.from({ length }).map((_, index) => /* @__PURE__ */ React30.createElement(
+    Input3,
+    {
+      key: index,
+      className: props.className,
+      maxLength: 1,
+      value: otp[index],
+      onChange: (e) => handleChange(e, index),
+      onKeyDown: (e) => handleKeyDown(e, index),
+      onPaste: handlePaste,
+      ref: (el) => inputRefs.current[index] = el
+    }
+  )));
+};
 export {
   AddMoreTable,
   ButtonElement,
@@ -968,6 +1023,7 @@ export {
   MultipleSelectElement,
   Navbar,
   NumberElement,
+  OtpElement,
   PasswordElement,
   RadioElement,
   SelectElement,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apexcura/ui-components",
-  "version": "0.0.14-Beta58",
+  "version": "0.0.14-Beta59",
   "description": "Apex cura React components library",
   "keywords": [
     "apex cura",