namirasoft-site-react 1.3.158 → 1.3.160

package/dist/App.js.map

@@ -1 +1 @@
-{"version":3,"file":"App.js","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW,CAAC;AACnB,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,MAAM,UAAU,GAAG;IAGlB,IAAI,KAAK,GAAG,MAAM,CAAe,IAAI,CAAC,CAAC;IACvC,IAAI,OAAO,GAAG;QACb,OAAO,EAAE,OAAO;QAChB,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,SAAS;QACpB,OAAO,EAAE,OAAO;QAChB,SAAS,EAAE,SAAS;QACpB,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,QAAQ;KAClB,CAAA;IACD,IAAI,IAAI,GAAG,CAAC;YACX,EAAE,EAAE,CAAC;YACL,OAAO,EAAE,oBAAoB;YAC7B,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,yCAAyC;YAClD,IAAI,EAAE,IAAI;YACV,MAAM,EAAE,SAAS;SACjB;QACD;YACC,EAAE,EAAE,CAAC;YACL,OAAO,EAAE,oBAAoB;YAC7B,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,yCAAyC;YAClD,IAAI,EAAE,IAAI;YACV,MAAM,EAAE,MAAM;SACd;QACD;YACC,EAAE,EAAE,CAAC;YACL,OAAO,EAAE,oBAAoB;YAC7B,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,yCAAyC;YAClD,IAAI,EAAE,IAAI;YACV,MAAM,EAAE,MAAM;SACd;KACA,CAAA;IAWD,SAAS,OAAO,CAAC,GAAQ,EAAE,MAAc;QAExC,IAAI,MAAM,KAAK,OAAO,EACtB;YACC,OAAO,gBAAO,EAAE,EAAE,GAAG,GAAG,CAAC,EAAE,EAAE,EAAE,IAAI,EAAC,UAAU,GAAG,CAAC;SAClD;aACD;YACC,OAAQ,GAAW,CAAC,MAAM,CAAC,CAAC;SAC5B;IACF,CAAC;IACD,SAAS,OAAO,CAAC,IAAY;QAE5B,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IACnB,CAAC;IACD,SAAS,QAAQ,KACf,CAAC;IAEH,OAAO,CACN,8BACC,KAAC,OAAO,IACP,GAAG,EAAE,KAAK,EACV,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,mBAAmB,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,CAAA,CAAC,CAAC,EACxC,SAAS,EAAE,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,QAAQ,EAAE,EACnC,SAAS,EAAE,QAAQ,EACnB,QAAQ,EAAE,CAAC,EACX,UAAU,EAAE,GAAG,EACf,OAAO,EAAE,OAAO,GACf,EACF,KAAC,aAAa,IACb,KAAK,EAAC,aAAa,EACnB,WAAW,EAAC,EAAE,EACd,QAAQ,EAAE,KAAK,GACd,IACA,CACH,CAAC;AACH,CAAC"}
+{"version":3,"file":"App.js","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW,CAAC;AACnB,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,MAAM,UAAU,GAAG;IAGlB,IAAI,KAAK,GAAG,MAAM,CAAe,IAAI,CAAC,CAAC;IACvC,IAAI,OAAO,GAAG;QACb,OAAO,EAAE,OAAO;QAChB,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,SAAS;QACpB,OAAO,EAAE,OAAO;QAChB,SAAS,EAAE,SAAS;QACpB,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,QAAQ;KAClB,CAAA;IACD,IAAI,IAAI,GAAG,CAAC;YACX,EAAE,EAAE,CAAC;YACL,OAAO,EAAE,oBAAoB;YAC7B,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,yCAAyC;YAClD,IAAI,EAAE,IAAI;YACV,MAAM,EAAE,SAAS;SACjB;QACD;YACC,EAAE,EAAE,CAAC;YACL,OAAO,EAAE,oBAAoB;YAC7B,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,yCAAyC;YAClD,IAAI,EAAE,IAAI;YACV,MAAM,EAAE,MAAM;SACd;QACD;YACC,EAAE,EAAE,CAAC;YACL,OAAO,EAAE,oBAAoB;YAC7B,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,yCAAyC;YAClD,IAAI,EAAE,IAAI;YACV,MAAM,EAAE,MAAM;SACd;KACA,CAAA;IAWD,SAAS,OAAO,CAAC,GAAQ,EAAE,MAAc;QAExC,IAAI,MAAM,KAAK,OAAO,EACtB;YACC,OAAO,gBAAO,EAAE,EAAE,GAAG,GAAG,CAAC,EAAE,EAAE,EAAE,IAAI,EAAC,UAAU,GAAG,CAAC;SAClD;aACD;YACC,OAAQ,GAAW,CAAC,MAAM,CAAC,CAAC;SAC5B;IACF,CAAC;IACD,SAAS,OAAO,CAAC,IAAY;QAE5B,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IACnB,CAAC;IACD,SAAS,QAAQ,KACf,CAAC;IACH,OAAO,CACN,8BACC,KAAC,OAAO,IACP,GAAG,EAAE,KAAK,EACV,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,mBAAmB,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,CAAA,CAAC,CAAC,EACxC,SAAS,EAAE,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,QAAQ,EAAE,EACnC,SAAS,EAAE,QAAQ,EACnB,QAAQ,EAAE,CAAC,EACX,UAAU,EAAE,GAAG,EACf,OAAO,EAAE,OAAO,GACf,EACF,KAAC,aAAa,IACb,KAAK,EAAC,aAAa,EACnB,WAAW,EAAC,EAAE,EACd,QAAQ,EAAE,KAAK,GACd,IACA,CACH,CAAC;AACH,CAAC"}

package/dist/components/NSActionMenu.js

@@ -1,13 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { NSButtonBlue } from '../main';
 import Styles from './NSActionMenu.module.css';
 export function NSActionMenu(props) {
     const [state, setState] = useState({
         isShow: false
     });
+    const menuRef = useRef(null);
+    useEffect(() => {
+        function handleClickOutside(event) {
+            if (menuRef.current && !menuRef.current.contains(event.target)) {
+                setState({ isShow: false });
+            }
+        }
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [menuRef]);
     return (_jsx(_Fragment, { children: props.items.length >= 1 ?
-            _jsxs("div", { className: Styles.ns_action_bar, children: [_jsxs("button", { onClick: () => setState((prevState) => (Object.assign(Object.assign({}, prevState), { isShow: !state.isShow }))), children: ["Action Menu", _jsx("img", { className: Styles.ns_action_menu_icon, src: "https://static.namirasoft.com/image/concept/ellipsis/vertical-blue.png", alt: "Icon", width: 8, height: 24 })] }), _jsx("ul", { className: `${Styles.ns_action_item_holder} ${state.isShow ? Styles.ns_show : Styles.ns_hide} `, children: props.items.map((item) => _jsx("li", { onClick: item.handler, className: `${Styles.ns_action_item}
+            _jsxs("div", { className: Styles.ns_action_bar, ref: menuRef, children: [_jsxs("button", { onClick: () => setState((prevState) => (Object.assign(Object.assign({}, prevState), { isShow: !state.isShow }))), children: ["Action Menu", _jsx("img", { className: Styles.ns_action_menu_icon, src: "https://static.namirasoft.com/image/concept/ellipsis/vertical-blue.png", alt: "Icon", width: 8, height: 24 })] }), _jsx("ul", { className: `${Styles.ns_action_item_holder} ${state.isShow ? Styles.ns_show : Styles.ns_hide} `, children: props.items.map((item) => _jsx("li", { onClick: item.handler, className: `${Styles.ns_action_item}
 								${item.isActive() ? Styles.ns_active_item : Styles.ns_deActive_item}
 								`, children: item.menu_item }, item.id)) })] })
             :

package/dist/components/NSActionMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSActionMenu.js","sourceRoot":"","sources":["../../src/components/NSActionMenu.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAuB,YAAY,EAAE,MAAM,SAAS,CAAC;AAC5D,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAkB/C,MAAM,UAAU,YAAY,CAAC,KAAyB;IAErD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAqB;QACtD,MAAM,EAAE,KAAK;KACb,CAAC,CAAA;IACF,OAAO,CACN,4BACE,KAAK,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC;YAEzB,eAAK,SAAS,EAAE,MAAM,CAAC,aAAa,aACnC,kBAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,iCAC3C,SAAS,KAAE,MAAM,EAAE,CAAC,KAAK,CAAC,MAAM,IAClC,CAAC,4BAEF,cACC,SAAS,EAAE,MAAM,CAAC,mBAAmB,EACrC,GAAG,EAAC,wEAAwE,EAC5E,GAAG,EAAC,MAAM,EACV,KAAK,EAAE,CAAC,EACR,MAAM,EAAE,EAAE,GACT,IACM,EACT,aAAI,SAAS,EAAE,GAAG,MAAM,CAAC,qBAAqB,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,GAAG,YACjG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CACzB,aAEC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,SAAS,EAAE,GAAG,MAAM,CAAC,cAAc;UACjC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB;SAClE,YAEA,IAAI,CAAC,SAAS,IANV,IAAI,CAAC,EAAE,CAOR,CACL,GACG,IACA;YACN,CAAC;gBACD,4BACC,KAAC,YAAY,IACZ,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,EAC/B,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,GAC9B,GACA,GAEF,CACH,CAAC;AACH,CAAC"}
+{"version":3,"file":"NSActionMenu.js","sourceRoot":"","sources":["../../src/components/NSActionMenu.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAuB,YAAY,EAAE,MAAM,SAAS,CAAC;AAC5D,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAkB/C,MAAM,UAAU,YAAY,CAAC,KAAyB;IAErD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAqB;QACtD,MAAM,EAAE,KAAK;KACb,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE7C,SAAS,CAAC,GAAG,EAAE;QAEd,SAAS,kBAAkB,CAAC,KAAiB;YAE5C,IAAI,OAAO,CAAC,OAAO,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EACtE;gBACC,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;aAC5B;QACF,CAAC;QAED,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAC3D,OAAO,GAAG,EAAE;YAEX,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAC/D,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACN,4BACE,KAAK,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC;YACzB,eAAK,SAAS,EAAE,MAAM,CAAC,aAAa,EAAE,GAAG,EAAE,OAAO,aACjD,kBAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,iCAC3C,SAAS,KAAE,MAAM,EAAE,CAAC,KAAK,CAAC,MAAM,IAClC,CAAC,4BAEF,cACC,SAAS,EAAE,MAAM,CAAC,mBAAmB,EACrC,GAAG,EAAC,wEAAwE,EAC5E,GAAG,EAAC,MAAM,EACV,KAAK,EAAE,CAAC,EACR,MAAM,EAAE,EAAE,GACT,IACM,EACT,aAAI,SAAS,EAAE,GAAG,MAAM,CAAC,qBAAqB,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,GAAG,YACjG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CACzB,aAEC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,SAAS,EAAE,GAAG,MAAM,CAAC,cAAc;UACjC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB;SAClE,YAEA,IAAI,CAAC,SAAS,IANV,IAAI,CAAC,EAAE,CAOR,CACL,GACG,IACA;YACN,CAAC;gBACD,4BACC,KAAC,YAAY,IACZ,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,EAC/B,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,GAC9B,GACA,GAEF,CACH,CAAC;AACH,CAAC"}

package/dist/components/NSBoxOTP.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const NSBoxOTP: React.FC;
+export default NSBoxOTP;

package/dist/components/NSBoxOTP.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useRef } from 'react';
+import Styles from './NSBoxOTP.module.css';
+const NSBoxOTP = () => {
+    const [values, setValues] = useState(Array(6).fill(''));
+    const inputsRef = useRef([]);
+    const handleChange = (index) => (event) => {
+        var _a;
+        const newValue = event.target.value;
+        if (/^\d?$/.test(newValue)) {
+            const updatedValues = [...values];
+            updatedValues[index] = newValue;
+            setValues(updatedValues);
+            if (newValue && index < 5) {
+                (_a = inputsRef.current[index + 1]) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        }
+    };
+    const handleKeyDown = (index) => (event) => {
+        var _a;
+        if (event.key === 'Backspace' && !values[index] && index > 0) {
+            (_a = inputsRef.current[index - 1]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    };
+    return (_jsx("div", { style: { display: 'flex', gap: '10px' }, children: values.map((value, index) => (_jsx("input", { ref: el => inputsRef.current[index] = el, type: "text", value: value, onChange: handleChange(index), onKeyDown: handleKeyDown(index), maxLength: 1, style: { width: '30px', textAlign: 'center' }, className: Styles.ns_otp_input }, index))) }));
+};
+export default NSBoxOTP;
+//# sourceMappingURL=NSBoxOTP.js.map

package/dist/components/NSBoxOTP.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NSBoxOTP.js","sourceRoot":"","sources":["../../src/components/NSBoxOTP.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAe,MAAM,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,MAAM,MAAM,uBAAuB,CAAA;AAE1C,MAAM,QAAQ,GAAa,GAAG,EAAE;IAC5B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAW,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;IAClE,MAAM,SAAS,GAAG,MAAM,CAA8B,EAAE,CAAC,CAAC;IAE1D,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,CAAC,KAAoC,EAAE,EAAE;;QAC7E,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QACpC,IAAI,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;YACxB,MAAM,aAAa,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC;YAClC,aAAa,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC;YAChC,SAAS,CAAC,aAAa,CAAC,CAAC;YACzB,IAAI,QAAQ,IAAI,KAAK,GAAG,CAAC,EAAE;gBACvB,MAAA,SAAS,CAAC,OAAO,CAAC,KAAK,GAAG,CAAC,CAAC,0CAAE,KAAK,EAAE,CAAC;aACzC;SACJ;IACL,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,CAAC,KAA4C,EAAE,EAAE;;QACtF,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,EAAE;YAC1D,MAAA,SAAS,CAAC,OAAO,CAAC,KAAK,GAAG,CAAC,CAAC,0CAAE,KAAK,EAAE,CAAC;SACzC;IACL,CAAC,CAAC;IAEF,OAAO,CACH,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,YACvC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1B,gBAEI,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,EAAE,EACxC,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,YAAY,CAAC,KAAK,CAAC,EAC7B,SAAS,EAAE,aAAa,CAAC,KAAK,CAAC,EAC/B,SAAS,EAAE,CAAC,EACZ,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,EAC7C,SAAS,EAAE,MAAM,CAAC,YAAY,IARzB,KAAK,CASZ,CACL,CAAC,GACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/NSBoxOTP.module.css

@@ -0,0 +1,11 @@
+.ns_otp_input{
+    border: none;
+    background-color: transparent;
+    border-bottom: 2px solid #141B5C;
+}
+
+.ns_otp_input:focus{
+    border: none;
+    outline: none;
+    border-bottom: 2px solid #141B5C;
+}

package/dist/components/NSHeader.module.css

@@ -95,7 +95,9 @@
     border: 0;
     transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
 }
-
+.ns_navbar_first_level_item {
+    color: #fff;
+}
 @media (max-width: 768px) {
     .ns_navbar_elements ul li:not(:last-child) {
         margin-right: 30px;
@@ -112,6 +114,7 @@
         border-bottom: 0.5px solid transparent;
         border-image: linear-gradient(90deg, #ffffff00 0%, rgb(0, 0, 0, 40%), #ffffff00 100%);
         border-image-slice: 1;
+
     }
 
     .ns_navbar_menu_icon {
@@ -155,6 +158,11 @@
         transform: translate3d(0px, 0, 0px) !important;
         position: relative !important;
     }
+
+    .ns_navbar_second_level_item {
+        color: #fff !important;
+
+    }
 }
 
 .ns_navbar_parent_content {
@@ -204,9 +212,7 @@
     padding: 10px;
 }
 
-.ns_navbar_first_level_item {
-    color: #fff;
-}
+
 
 .ns_navbar_second_level_item {
     color: #000 !important;

package/dist/components/NSVerification.d.ts

@@ -0,0 +1,7 @@
+import { IBaseComponentProps, IImageProps } from '../main';
+interface INSVerificationProps extends IBaseComponentProps {
+    verificationType: string;
+    image?: IImageProps;
+}
+declare function NSVerification(props: INSVerificationProps): import("react/jsx-runtime").JSX.Element;
+export default NSVerification;

package/dist/components/NSVerification.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import vector from '../assets/images/verify.png';
+import NSBoxOTP from './NSBoxOTP';
+import Styles from './NSVerification.module.css';
+function NSVerification(props) {
+    var _a, _b, _c, _d, _e;
+    return (_jsxs("div", { className: `${Styles.ns_verification_container} ${(_a = props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: props.style, children: [_jsx("img", { src: (_c = (_b = props.image) === null || _b === void 0 ? void 0 : _b.src) !== null && _c !== void 0 ? _c : vector, alt: (_e = (_d = props.image) === null || _d === void 0 ? void 0 : _d.alt) !== null && _e !== void 0 ? _e : 'verification vector', className: Styles.ns_verification_vector }), _jsxs("p", { children: ["Please enter code sent to ", props.verificationType] }), _jsx(NSBoxOTP, {})] }));
+}
+export default NSVerification;
+//# sourceMappingURL=NSVerification.js.map

package/dist/components/NSVerification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NSVerification.js","sourceRoot":"","sources":["../../src/components/NSVerification.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAEhD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAOhD,SAAS,cAAc,CAAC,KAA0B;;IAC9C,OAAO,CACH,eACI,SAAS,EAAE,GAAG,MAAM,CAAC,yBAAyB,IAAI,MAAA,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EACpF,KAAK,EAAE,KAAK,CAAC,KAAK,aAEZ,cACA,GAAG,EAAE,MAAA,MAAA,KAAK,CAAC,KAAK,0CAAE,GAAG,mCAAI,MAAM,EAC/B,GAAG,EAAE,MAAA,MAAA,KAAK,CAAC,KAAK,0CAAE,GAAG,mCAAI,qBAAqB,EAC9C,SAAS,EAAE,MAAM,CAAC,sBAAsB,GACtC,EACF,sDAA8B,KAAK,CAAC,gBAAgB,IAAK,EACzD,KAAC,QAAQ,KAAG,IACV,CACT,CAAC;AACN,CAAC;AAED,eAAe,cAAc,CAAC"}

package/dist/components/NSVerification.module.css

@@ -0,0 +1,23 @@
+.ns_verification_container {
+    background-color: #FFF;
+    border: 1px solid #A1A4B0;
+    backdrop-filter: blur(5px);
+    border-radius: 8px;
+    width: 100%;
+    max-width: 594px;
+    padding: 16px;
+    color: #141B5C !important;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    align-items: center;
+}
+
+.ns_verification_container p{
+    text-align: center;
+}
+
+.ns_verification_vector{
+    width: 224px;
+    height: 224px;
+}

package/dist/main.d.ts

@@ -7,6 +7,7 @@ export * from "./components/NSBoxEmail";
 export * from "./components/NSBoxEntity";
 export * from "./components/NSBoxEnum";
 export * from "./components/NSBoxErrorNotifier";
+export * from "./components/NSBoxOTP";
 export * from "./components/NSBoxInteger";
 export * from "./components/NSBoxIPV4";
 export * from "./components/NSBoxIPV6";
@@ -48,6 +49,7 @@ export * from "./components/NSPagination";
 export * from "./components/NSTable";
 export * from "./components/NSTabPage";
 export * from "./components/NSTitle";
+export * from "./components/NSVerification";
 export * from "./pages/NSLoginPage";
 export * from "./pages/NSNotFoundPage";
 export * from "./components/NSModal";

package/dist/main.js

@@ -7,6 +7,7 @@ export * from "./components/NSBoxEmail";
 export * from "./components/NSBoxEntity";
 export * from "./components/NSBoxEnum";
 export * from "./components/NSBoxErrorNotifier";
+export * from "./components/NSBoxOTP";
 export * from "./components/NSBoxInteger";
 export * from "./components/NSBoxIPV4";
 export * from "./components/NSBoxIPV6";
@@ -48,6 +49,7 @@ export * from "./components/NSPagination";
 export * from "./components/NSTable";
 export * from "./components/NSTabPage";
 export * from "./components/NSTitle";
+export * from "./components/NSVerification";
 export * from "./pages/NSLoginPage";
 export * from "./pages/NSNotFoundPage";
 export * from "./components/NSModal";

package/dist/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,iCAAiC,CAAC;AAChD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"main.js","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,iCAAiC,CAAC;AAChD,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC"}

package/package.json

@@ -8,7 +8,7 @@
     "framework": "npm",
     "application": "package",
     "private": false,
-    "version": "1.3.158",
+    "version": "1.3.160",
     "author": "Amir Abolhasani, Alireza Esmaeeli, Sepideh Mazloumi, Hooman Shashaeh",
     "license": "MIT",
     "main": "./dist/main.js",

package/src/App.tsx

@@ -67,7 +67,6 @@ export function App()
 	}
 	function onChange(): void
 	{ }
-
 	return (
 		<>
 			<NSTable

package/src/components/NSActionMenu.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { IBaseComponentProps, NSButtonBlue } from '../main';
 import Styles from './NSActionMenu.module.css';
 
@@ -22,12 +22,31 @@ export function NSActionMenu(props: INSActionMenuProps)
 {
 	const [state, setState] = useState<INSActionMenuState>({
 		isShow: false
-	})
+	});
+
+	const menuRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() =>
+	{
+		function handleClickOutside(event: MouseEvent)
+		{
+			if (menuRef.current && !menuRef.current.contains(event.target as Node))
+			{
+				setState({ isShow: false });
+			}
+		}
+
+		document.addEventListener('mousedown', handleClickOutside);
+		return () =>
+		{
+			document.removeEventListener('mousedown', handleClickOutside);
+		};
+	}, [menuRef]);
+
 	return (
 		<>
 			{props.items.length >= 1 ?
-
-				<div className={Styles.ns_action_bar}>
+				<div className={Styles.ns_action_bar} ref={menuRef}>
 					<button onClick={() => setState((prevState) => ({
 						...prevState, isShow: !state.isShow
 					}))}>

package/src/components/NSBoxOTP.module.css

@@ -0,0 +1,11 @@
+.ns_otp_input{
+    border: none;
+    background-color: transparent;
+    border-bottom: 2px solid #141B5C;
+}
+
+.ns_otp_input:focus{
+    border: none;
+    outline: none;
+    border-bottom: 2px solid #141B5C;
+}

package/src/components/NSBoxOTP.tsx

@@ -0,0 +1,45 @@
+import React, { useState, ChangeEvent, useRef } from 'react';
+import Styles from './NSBoxOTP.module.css'
+
+const NSBoxOTP: React.FC = () => {
+    const [values, setValues] = useState<string[]>(Array(6).fill(''));
+    const inputsRef = useRef<(HTMLInputElement | null)[]>([]);
+
+    const handleChange = (index: number) => (event: ChangeEvent<HTMLInputElement>) => {
+        const newValue = event.target.value;
+        if (/^\d?$/.test(newValue)) {
+            const updatedValues = [...values];
+            updatedValues[index] = newValue;
+            setValues(updatedValues);
+            if (newValue && index < 5) {
+                inputsRef.current[index + 1]?.focus();
+            }
+        }
+    };
+
+    const handleKeyDown = (index: number) => (event: React.KeyboardEvent<HTMLInputElement>) => {
+        if (event.key === 'Backspace' && !values[index] && index > 0) {
+            inputsRef.current[index - 1]?.focus();
+        }
+    };
+
+    return (
+        <div style={{ display: 'flex', gap: '10px' }}>
+            {values.map((value, index) => (
+                <input
+                    key={index}
+                    ref={el => inputsRef.current[index] = el}
+                    type="text"
+                    value={value}
+                    onChange={handleChange(index)}
+                    onKeyDown={handleKeyDown(index)}
+                    maxLength={1}
+                    style={{ width: '30px', textAlign: 'center' }}
+                    className={Styles.ns_otp_input}
+                />
+            ))}
+        </div>
+    );
+};
+
+export default NSBoxOTP;

package/src/components/NSHeader.module.css

@@ -95,7 +95,9 @@
     border: 0;
     transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
 }
-
+.ns_navbar_first_level_item {
+    color: #fff;
+}
 @media (max-width: 768px) {
     .ns_navbar_elements ul li:not(:last-child) {
         margin-right: 30px;
@@ -112,6 +114,7 @@
         border-bottom: 0.5px solid transparent;
         border-image: linear-gradient(90deg, #ffffff00 0%, rgb(0, 0, 0, 40%), #ffffff00 100%);
         border-image-slice: 1;
+
     }
 
     .ns_navbar_menu_icon {
@@ -155,6 +158,11 @@
         transform: translate3d(0px, 0, 0px) !important;
         position: relative !important;
     }
+
+    .ns_navbar_second_level_item {
+        color: #fff !important;
+
+    }
 }
 
 .ns_navbar_parent_content {
@@ -204,9 +212,7 @@
     padding: 10px;
 }
 
-.ns_navbar_first_level_item {
-    color: #fff;
-}
+
 
 .ns_navbar_second_level_item {
     color: #000 !important;

package/src/components/NSVerification.module.css

@@ -0,0 +1,23 @@
+.ns_verification_container {
+    background-color: #FFF;
+    border: 1px solid #A1A4B0;
+    backdrop-filter: blur(5px);
+    border-radius: 8px;
+    width: 100%;
+    max-width: 594px;
+    padding: 16px;
+    color: #141B5C !important;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    align-items: center;
+}
+
+.ns_verification_container p{
+    text-align: center;
+}
+
+.ns_verification_vector{
+    width: 224px;
+    height: 224px;
+}

package/src/components/NSVerification.tsx

@@ -0,0 +1,28 @@
+import vector from '../assets/images/verify.png'
+import { IBaseComponentProps, IImageProps } from '../main';
+import NSBoxOTP from './NSBoxOTP';
+import Styles from './NSVerification.module.css'
+
+interface INSVerificationProps extends IBaseComponentProps {
+    verificationType : string;
+    image ?: IImageProps;
+}
+
+function NSVerification(props:INSVerificationProps) {
+    return (
+        <div 
+            className={`${Styles.ns_verification_container} ${props.classList?.join(" ")}`}
+	    	style={props.style}
+            >
+            <img 
+            src={props.image?.src ?? vector} 
+            alt={props.image?.alt ?? 'verification vector'} 
+            className={Styles.ns_verification_vector}
+            />
+            <p>Please enter code sent to {props.verificationType}</p>
+            <NSBoxOTP />
+        </div>
+    );
+}
+
+export default NSVerification;

package/src/main.ts

@@ -7,6 +7,7 @@ export * from "./components/NSBoxEmail";
 export * from "./components/NSBoxEntity";
 export * from "./components/NSBoxEnum";
 export * from "./components/NSBoxErrorNotifier";
+export * from "./components/NSBoxOTP";
 export * from "./components/NSBoxInteger";
 export * from "./components/NSBoxIPV4";
 export * from "./components/NSBoxIPV6";
@@ -48,6 +49,7 @@ export * from "./components/NSPagination";
 export * from "./components/NSTable";
 export * from "./components/NSTabPage";
 export * from "./components/NSTitle";
+export * from "./components/NSVerification";
 export * from "./pages/NSLoginPage";
 export * from "./pages/NSNotFoundPage";
 export * from "./components/NSModal";