@retinalabsllc/zairusjs 10.0.2 → 10.0.9

package/dist/index.d.mts

@@ -404,7 +404,8 @@ interface UniversalSecurityPageProps {
     onVerifyAndDisable2FA?: (otp: string) => Promise<{
         success: boolean;
     }>;
-    onEnablePasskey?: () => Promise<{
+    onRequestPasskeySetup?: () => Promise<any>;
+    onVerifyAndEnablePasskey?: (credential: any) => Promise<{
         success: boolean;
     }>;
     onDisablePasskey?: () => Promise<{

package/dist/index.d.ts

@@ -404,7 +404,8 @@ interface UniversalSecurityPageProps {
     onVerifyAndDisable2FA?: (otp: string) => Promise<{
         success: boolean;
     }>;
-    onEnablePasskey?: () => Promise<{
+    onRequestPasskeySetup?: () => Promise<any>;
+    onVerifyAndEnablePasskey?: (credential: any) => Promise<{
         success: boolean;
     }>;
     onDisablePasskey?: () => Promise<{

package/dist/index.js

@@ -2665,6 +2665,7 @@ var import_react45 = __toESM(require("react"));
 var import_react_hot_toast8 = __toESM(require("react-hot-toast"));
 var import_react46 = require("@hugeicons/react");
 var import_core_free_icons16 = require("@hugeicons/core-free-icons");
+var import_browser = require("@simplewebauthn/browser");
 var UniversalSecurityPage = ({
   has2FA,
   hasPasskey,
@@ -2675,7 +2676,8 @@ var UniversalSecurityPage = ({
   onRequest2FASetup,
   onVerifyAndEnable2FA,
   onVerifyAndDisable2FA,
-  onEnablePasskey,
+  onRequestPasskeySetup,
+  onVerifyAndEnablePasskey,
   onDisablePasskey
 }) => {
   const [show2FASetupModal, setShow2FASetupModal] = (0, import_react45.useState)(false);
@@ -2714,9 +2716,14 @@ var UniversalSecurityPage = ({
   };
   const handleCopySecret = async (secret) => {
     try {
-      if (navigator.clipboard && window.isSecureContext) {
+      if (navigator?.clipboard?.writeText && window.isSecureContext) {
         await navigator.clipboard.writeText(secret);
+        import_react_hot_toast8.default.success("Secret copied to clipboard");
       } else {
+        throw new Error("Clipboard API not available");
+      }
+    } catch (e) {
+      try {
         const textArea = document.createElement("textarea");
         textArea.value = secret;
         textArea.style.position = "fixed";
@@ -2727,10 +2734,10 @@ var UniversalSecurityPage = ({
         textArea.select();
         document.execCommand("copy");
         textArea.remove();
+        import_react_hot_toast8.default.success("Secret copied to clipboard");
+      } catch (err) {
+        import_react_hot_toast8.default.error("Unable to copy. Please manually copy the key.");
       }
-      import_react_hot_toast8.default.success("Secret copied to clipboard");
-    } catch {
-      import_react_hot_toast8.default.error("Unable to copy");
     }
   };
   const handleToggle2FA = async () => {
@@ -2797,36 +2804,28 @@ var UniversalSecurityPage = ({
     }
   };
   const submitEnablePasskey = async () => {
-    if (!onEnablePasskey) return;
+    if (!onRequestPasskeySetup || !onVerifyAndEnablePasskey) return;
     setIsSubmitting(true);
     try {
-      if (!window.PublicKeyCredential) {
-        throw new Error("Passkeys are not supported on this device/browser.");
+      const options = await onRequestPasskeySetup();
+      let credentialResponse;
+      try {
+        credentialResponse = await (0, import_browser.startRegistration)({ optionsJSON: options });
+      } catch (err) {
+        if (err.name === "NotAllowedError") {
+          throw new Error("Passkey setup was canceled or is not supported on this device.");
+        }
+        throw err;
       }
-      const challenge = window.crypto.getRandomValues ? window.crypto.getRandomValues(new Uint8Array(32)) : new Uint8Array(32).fill(1);
-      const userId = new Uint8Array(16).fill(2);
-      const publicKeyCredentialCreationOptions = {
-        challenge,
-        rp: { name: "Aeona Finance", id: window.location.hostname },
-        user: {
-          id: userId,
-          name: userEmail || "User",
-          displayName: userEmail || "User"
-        },
-        pubKeyCredParams: [{ alg: -7, type: "public-key" }, { alg: -257, type: "public-key" }],
-        authenticatorSelection: { authenticatorAttachment: "platform", userVerification: "required" },
-        timeout: 6e4,
-        attestation: "none"
-      };
-      const credential = await navigator.credentials.create({ publicKey: publicKeyCredentialCreationOptions });
-      if (!credential) throw new Error("Passkey creation was canceled.");
-      const res = await onEnablePasskey();
+      const res = await onVerifyAndEnablePasskey(credentialResponse);
       if (res.success) {
         import_react_hot_toast8.default.success("Passkey Created Successfully");
         setShowPasskeyModal(false);
+      } else {
+        import_react_hot_toast8.default.error("Failed to verify device passkey.");
       }
     } catch (error) {
-      import_react_hot_toast8.default.error(error.message || "Passkey setup failed or was canceled.");
+      import_react_hot_toast8.default.error(error.message || "Passkey setup interrupted.");
     } finally {
       setIsSubmitting(false);
     }
@@ -2862,18 +2861,10 @@ var UniversalSecurityPage = ({
       toggleLoading: isPasskeyLoading,
       isLast: true
     }
-  ))), show2FASetupModal && /* @__PURE__ */ import_react45.default.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ import_react45.default.createElement("div", { className: "absolute inset-0 bg-black/40 ", onClick: () => !isSubmitting && setShow2FASetupModal(false) }), /* @__PURE__ */ import_react45.default.createElement("div", { className: "relative w-full max-w-sm bg-white rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200 max-h-[90vh]" }, /* @__PURE__ */ import_react45.default.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 " }, /* @__PURE__ */ import_react45.default.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, "Enable 2FA"), /* @__PURE__ */ import_react45.default.createElement("button", { onClick: () => !isSubmitting && setShow2FASetupModal(false), className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ import_react45.default.createElement(import_react46.HugeiconsIcon, { icon: import_core_free_icons16.CancelCircleIcon, size: 18 }))), /* @__PURE__ */ import_react45.default.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-6 pt-2" }, /* @__PURE__ */ import_react45.default.createElement("div", { className: "w-full flex justify-center mb-6 mix-blend-multiply" }, twoFaQr ? /* @__PURE__ */ import_react45.default.createElement("img", { src: twoFaQr, alt: "2FA QR Code", className: "w-40 h-40 object-contain rounded-xl border border-neutral-100 p-2" }) : /* @__PURE__ */ import_react45.default.createElement("div", { className: "w-40 h-40 bg-neutral-100 rounded-xl flex items-center justify-center animate-pulse" })), /* @__PURE__ */ import_react45.default.createElement("div", { className: "grid grid-cols-1 gap-y-6 gap-x-4 mb-8" }, /* @__PURE__ */ import_react45.default.createElement("div", null, /* @__PURE__ */ import_react45.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2 uppercase" }, "Setup Key"), /* @__PURE__ */ import_react45.default.createElement("div", { className: "flex items-center gap-2 min-w-0 bg-neutral-50 px-3 py-2.5 rounded-xl border border-neutral-100" }, /* @__PURE__ */ import_react45.default.createElement("span", { className: "text-[13px] font-mono tracking-widest text-black truncate min-w-0 block flex-1" }, twoFaSecret), /* @__PURE__ */ import_react45.default.createElement(
-    "button",
-    {
-      type: "button",
-      onClick: () => handleCopySecret(twoFaSecret),
-      className: "text-neutral-400 hover:text-black transition-colors outline-none shrink-0 ml-2"
-    },
-    /* @__PURE__ */ import_react45.default.createElement(import_react46.HugeiconsIcon, { icon: import_core_free_icons16.Copy01Icon, size: 16 })
-  )))), /* @__PURE__ */ import_react45.default.createElement("div", { className: "text-center mb-8 mt-2" }, /* @__PURE__ */ import_react45.default.createElement("h2", { className: "text-xl text-black mb-2 tracking-tight" }, "Security Check"), /* @__PURE__ */ import_react45.default.createElement("p", { className: "text-[13px] text-neutral-500" }, "Enter the 6-digit code from your app")), /* @__PURE__ */ import_react45.default.createElement("form", { className: "space-y-8", autoComplete: "off", onSubmit: (e) => {
+  ))), show2FASetupModal && /* @__PURE__ */ import_react45.default.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ import_react45.default.createElement("div", { className: "absolute inset-0 bg-black/40 ", onClick: () => !isSubmitting && setShow2FASetupModal(false) }), /* @__PURE__ */ import_react45.default.createElement("div", { className: "relative w-full max-w-sm bg-white rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200 max-h-[90vh]" }, /* @__PURE__ */ import_react45.default.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 " }, /* @__PURE__ */ import_react45.default.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, "Enable 2FA"), /* @__PURE__ */ import_react45.default.createElement("button", { onClick: () => !isSubmitting && setShow2FASetupModal(false), className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ import_react45.default.createElement(import_react46.HugeiconsIcon, { icon: import_core_free_icons16.CancelCircleIcon, size: 18 }))), /* @__PURE__ */ import_react45.default.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-6 pt-2" }, /* @__PURE__ */ import_react45.default.createElement("div", { className: "w-full flex justify-center mb-6 mix-blend-multiply" }, twoFaQr ? /* @__PURE__ */ import_react45.default.createElement("img", { src: twoFaQr, alt: "2FA QR Code", className: "w-40 h-40 object-contain rounded-xl border border-neutral-100 p-2" }) : /* @__PURE__ */ import_react45.default.createElement("div", { className: "w-40 h-40 bg-neutral-100 rounded-xl flex items-center justify-center animate-pulse" })), /* @__PURE__ */ import_react45.default.createElement("div", { className: "text-center mb-8 mt-2" }, /* @__PURE__ */ import_react45.default.createElement("h2", { className: "text-xl text-black mb-2 tracking-tight" }, "Security Check"), /* @__PURE__ */ import_react45.default.createElement("p", { className: "text-[13px] text-neutral-500" }, "Enter the 6-digit code from your app")), /* @__PURE__ */ import_react45.default.createElement("form", { className: "space-y-4", autoComplete: "off", onSubmit: (e) => {
     e.preventDefault();
     submitEnable2FA(otp.join(""));
-  } }, /* @__PURE__ */ import_react45.default.createElement("div", { className: "flex justify-between gap-2", onPaste: handlePaste }, otp.map((digit, index) => /* @__PURE__ */ import_react45.default.createElement(
+  } }, /* @__PURE__ */ import_react45.default.createElement("div", { className: "flex justify-between gap-2 pb-6", onPaste: handlePaste }, otp.map((digit, index) => /* @__PURE__ */ import_react45.default.createElement(
     "input",
     {
       key: index,
@@ -2906,8 +2897,9 @@ var UniversalSecurityPage = ({
     {
       type: "button",
       onClick: () => handleCopySecret(twoFaSecret),
-      className: "w-full flex items-center justify-center py-2.5 rounded-full border border-neutral-200 text-black hover:bg-neutral-50 outline-none text-[13px] tracking-wide transition-colors mt-2"
+      className: "w-full flex items-center justify-center py-3 rounded-full bg-neutral-100 text-black hover:bg-neutral-200 outline-none text-[13px] font-medium tracking-wide transition-colors mt-3"
     },
+    /* @__PURE__ */ import_react45.default.createElement(import_react46.HugeiconsIcon, { icon: import_core_free_icons16.Copy01Icon, size: 16, className: "mr-2" }),
     "Copy Secret Key"
   ))))), show2FADisableModal && /* @__PURE__ */ import_react45.default.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ import_react45.default.createElement("div", { className: "absolute inset-0 bg-black/40 ", onClick: () => !isSubmitting && setShow2FADisableModal(false) }), /* @__PURE__ */ import_react45.default.createElement("div", { className: "relative w-full max-w-sm bg-white rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ import_react45.default.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 " }, /* @__PURE__ */ import_react45.default.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, "Disable 2FA"), /* @__PURE__ */ import_react45.default.createElement("button", { onClick: () => !isSubmitting && setShow2FADisableModal(false), className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ import_react45.default.createElement(import_react46.HugeiconsIcon, { icon: import_core_free_icons16.CancelCircleIcon, size: 18 }))), /* @__PURE__ */ import_react45.default.createElement("div", { className: "p-6" }, /* @__PURE__ */ import_react45.default.createElement("div", { className: "text-center mb-8 mt-2" }, /* @__PURE__ */ import_react45.default.createElement("h2", { className: "text-xl text-black mb-2 tracking-tight" }, "Security Check"), /* @__PURE__ */ import_react45.default.createElement("p", { className: "text-[13px] text-neutral-500" }, "Enter the code from your authenticator app to disable 2FA.")), /* @__PURE__ */ import_react45.default.createElement("form", { className: "space-y-8", autoComplete: "off", onSubmit: (e) => {
     e.preventDefault();

package/dist/index.mjs

@@ -2653,6 +2653,7 @@ import {
   Key01Icon,
   ArrowRight01Icon as ArrowRight01Icon4
 } from "@hugeicons/core-free-icons";
+import { startRegistration } from "@simplewebauthn/browser";
 var UniversalSecurityPage = ({
   has2FA,
   hasPasskey,
@@ -2663,7 +2664,8 @@ var UniversalSecurityPage = ({
   onRequest2FASetup,
   onVerifyAndEnable2FA,
   onVerifyAndDisable2FA,
-  onEnablePasskey,
+  onRequestPasskeySetup,
+  onVerifyAndEnablePasskey,
   onDisablePasskey
 }) => {
   const [show2FASetupModal, setShow2FASetupModal] = useState18(false);
@@ -2702,9 +2704,14 @@ var UniversalSecurityPage = ({
   };
   const handleCopySecret = async (secret) => {
     try {
-      if (navigator.clipboard && window.isSecureContext) {
+      if (navigator?.clipboard?.writeText && window.isSecureContext) {
         await navigator.clipboard.writeText(secret);
+        toast7.success("Secret copied to clipboard");
       } else {
+        throw new Error("Clipboard API not available");
+      }
+    } catch (e) {
+      try {
         const textArea = document.createElement("textarea");
         textArea.value = secret;
         textArea.style.position = "fixed";
@@ -2715,10 +2722,10 @@ var UniversalSecurityPage = ({
         textArea.select();
         document.execCommand("copy");
         textArea.remove();
+        toast7.success("Secret copied to clipboard");
+      } catch (err) {
+        toast7.error("Unable to copy. Please manually copy the key.");
       }
-      toast7.success("Secret copied to clipboard");
-    } catch {
-      toast7.error("Unable to copy");
     }
   };
   const handleToggle2FA = async () => {
@@ -2785,36 +2792,28 @@ var UniversalSecurityPage = ({
     }
   };
   const submitEnablePasskey = async () => {
-    if (!onEnablePasskey) return;
+    if (!onRequestPasskeySetup || !onVerifyAndEnablePasskey) return;
     setIsSubmitting(true);
     try {
-      if (!window.PublicKeyCredential) {
-        throw new Error("Passkeys are not supported on this device/browser.");
+      const options = await onRequestPasskeySetup();
+      let credentialResponse;
+      try {
+        credentialResponse = await startRegistration({ optionsJSON: options });
+      } catch (err) {
+        if (err.name === "NotAllowedError") {
+          throw new Error("Passkey setup was canceled or is not supported on this device.");
+        }
+        throw err;
       }
-      const challenge = window.crypto.getRandomValues ? window.crypto.getRandomValues(new Uint8Array(32)) : new Uint8Array(32).fill(1);
-      const userId = new Uint8Array(16).fill(2);
-      const publicKeyCredentialCreationOptions = {
-        challenge,
-        rp: { name: "Aeona Finance", id: window.location.hostname },
-        user: {
-          id: userId,
-          name: userEmail || "User",
-          displayName: userEmail || "User"
-        },
-        pubKeyCredParams: [{ alg: -7, type: "public-key" }, { alg: -257, type: "public-key" }],
-        authenticatorSelection: { authenticatorAttachment: "platform", userVerification: "required" },
-        timeout: 6e4,
-        attestation: "none"
-      };
-      const credential = await navigator.credentials.create({ publicKey: publicKeyCredentialCreationOptions });
-      if (!credential) throw new Error("Passkey creation was canceled.");
-      const res = await onEnablePasskey();
+      const res = await onVerifyAndEnablePasskey(credentialResponse);
       if (res.success) {
         toast7.success("Passkey Created Successfully");
         setShowPasskeyModal(false);
+      } else {
+        toast7.error("Failed to verify device passkey.");
       }
     } catch (error) {
-      toast7.error(error.message || "Passkey setup failed or was canceled.");
+      toast7.error(error.message || "Passkey setup interrupted.");
     } finally {
       setIsSubmitting(false);
     }
@@ -2850,18 +2849,10 @@ var UniversalSecurityPage = ({
       toggleLoading: isPasskeyLoading,
       isLast: true
     }
-  ))), show2FASetupModal && /* @__PURE__ */ React27.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React27.createElement("div", { className: "absolute inset-0 bg-black/40 ", onClick: () => !isSubmitting && setShow2FASetupModal(false) }), /* @__PURE__ */ React27.createElement("div", { className: "relative w-full max-w-sm bg-white rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200 max-h-[90vh]" }, /* @__PURE__ */ React27.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 " }, /* @__PURE__ */ React27.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, "Enable 2FA"), /* @__PURE__ */ React27.createElement("button", { onClick: () => !isSubmitting && setShow2FASetupModal(false), className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ React27.createElement(HugeiconsIcon19, { icon: CancelCircleIcon6, size: 18 }))), /* @__PURE__ */ React27.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-6 pt-2" }, /* @__PURE__ */ React27.createElement("div", { className: "w-full flex justify-center mb-6 mix-blend-multiply" }, twoFaQr ? /* @__PURE__ */ React27.createElement("img", { src: twoFaQr, alt: "2FA QR Code", className: "w-40 h-40 object-contain rounded-xl border border-neutral-100 p-2" }) : /* @__PURE__ */ React27.createElement("div", { className: "w-40 h-40 bg-neutral-100 rounded-xl flex items-center justify-center animate-pulse" })), /* @__PURE__ */ React27.createElement("div", { className: "grid grid-cols-1 gap-y-6 gap-x-4 mb-8" }, /* @__PURE__ */ React27.createElement("div", null, /* @__PURE__ */ React27.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2 uppercase" }, "Setup Key"), /* @__PURE__ */ React27.createElement("div", { className: "flex items-center gap-2 min-w-0 bg-neutral-50 px-3 py-2.5 rounded-xl border border-neutral-100" }, /* @__PURE__ */ React27.createElement("span", { className: "text-[13px] font-mono tracking-widest text-black truncate min-w-0 block flex-1" }, twoFaSecret), /* @__PURE__ */ React27.createElement(
-    "button",
-    {
-      type: "button",
-      onClick: () => handleCopySecret(twoFaSecret),
-      className: "text-neutral-400 hover:text-black transition-colors outline-none shrink-0 ml-2"
-    },
-    /* @__PURE__ */ React27.createElement(HugeiconsIcon19, { icon: Copy01Icon3, size: 16 })
-  )))), /* @__PURE__ */ React27.createElement("div", { className: "text-center mb-8 mt-2" }, /* @__PURE__ */ React27.createElement("h2", { className: "text-xl text-black mb-2 tracking-tight" }, "Security Check"), /* @__PURE__ */ React27.createElement("p", { className: "text-[13px] text-neutral-500" }, "Enter the 6-digit code from your app")), /* @__PURE__ */ React27.createElement("form", { className: "space-y-8", autoComplete: "off", onSubmit: (e) => {
+  ))), show2FASetupModal && /* @__PURE__ */ React27.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React27.createElement("div", { className: "absolute inset-0 bg-black/40 ", onClick: () => !isSubmitting && setShow2FASetupModal(false) }), /* @__PURE__ */ React27.createElement("div", { className: "relative w-full max-w-sm bg-white rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200 max-h-[90vh]" }, /* @__PURE__ */ React27.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 " }, /* @__PURE__ */ React27.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, "Enable 2FA"), /* @__PURE__ */ React27.createElement("button", { onClick: () => !isSubmitting && setShow2FASetupModal(false), className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ React27.createElement(HugeiconsIcon19, { icon: CancelCircleIcon6, size: 18 }))), /* @__PURE__ */ React27.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-6 pt-2" }, /* @__PURE__ */ React27.createElement("div", { className: "w-full flex justify-center mb-6 mix-blend-multiply" }, twoFaQr ? /* @__PURE__ */ React27.createElement("img", { src: twoFaQr, alt: "2FA QR Code", className: "w-40 h-40 object-contain rounded-xl border border-neutral-100 p-2" }) : /* @__PURE__ */ React27.createElement("div", { className: "w-40 h-40 bg-neutral-100 rounded-xl flex items-center justify-center animate-pulse" })), /* @__PURE__ */ React27.createElement("div", { className: "text-center mb-8 mt-2" }, /* @__PURE__ */ React27.createElement("h2", { className: "text-xl text-black mb-2 tracking-tight" }, "Security Check"), /* @__PURE__ */ React27.createElement("p", { className: "text-[13px] text-neutral-500" }, "Enter the 6-digit code from your app")), /* @__PURE__ */ React27.createElement("form", { className: "space-y-4", autoComplete: "off", onSubmit: (e) => {
     e.preventDefault();
     submitEnable2FA(otp.join(""));
-  } }, /* @__PURE__ */ React27.createElement("div", { className: "flex justify-between gap-2", onPaste: handlePaste }, otp.map((digit, index) => /* @__PURE__ */ React27.createElement(
+  } }, /* @__PURE__ */ React27.createElement("div", { className: "flex justify-between gap-2 pb-6", onPaste: handlePaste }, otp.map((digit, index) => /* @__PURE__ */ React27.createElement(
     "input",
     {
       key: index,
@@ -2894,8 +2885,9 @@ var UniversalSecurityPage = ({
     {
       type: "button",
       onClick: () => handleCopySecret(twoFaSecret),
-      className: "w-full flex items-center justify-center py-2.5 rounded-full border border-neutral-200 text-black hover:bg-neutral-50 outline-none text-[13px] tracking-wide transition-colors mt-2"
+      className: "w-full flex items-center justify-center py-3 rounded-full bg-neutral-100 text-black hover:bg-neutral-200 outline-none text-[13px] font-medium tracking-wide transition-colors mt-3"
     },
+    /* @__PURE__ */ React27.createElement(HugeiconsIcon19, { icon: Copy01Icon3, size: 16, className: "mr-2" }),
     "Copy Secret Key"
   ))))), show2FADisableModal && /* @__PURE__ */ React27.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React27.createElement("div", { className: "absolute inset-0 bg-black/40 ", onClick: () => !isSubmitting && setShow2FADisableModal(false) }), /* @__PURE__ */ React27.createElement("div", { className: "relative w-full max-w-sm bg-white rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React27.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 " }, /* @__PURE__ */ React27.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, "Disable 2FA"), /* @__PURE__ */ React27.createElement("button", { onClick: () => !isSubmitting && setShow2FADisableModal(false), className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ React27.createElement(HugeiconsIcon19, { icon: CancelCircleIcon6, size: 18 }))), /* @__PURE__ */ React27.createElement("div", { className: "p-6" }, /* @__PURE__ */ React27.createElement("div", { className: "text-center mb-8 mt-2" }, /* @__PURE__ */ React27.createElement("h2", { className: "text-xl text-black mb-2 tracking-tight" }, "Security Check"), /* @__PURE__ */ React27.createElement("p", { className: "text-[13px] text-neutral-500" }, "Enter the code from your authenticator app to disable 2FA.")), /* @__PURE__ */ React27.createElement("form", { className: "space-y-8", autoComplete: "off", onSubmit: (e) => {
     e.preventDefault();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retinalabsllc/zairusjs",
-  "version": "10.0.2",
+  "version": "10.0.9",
   "description": "A perceptive, Ai data driven Next.js UI component library.",
   "author": "Retina Labs Company",
   "license": "MIT",
@@ -39,6 +39,8 @@
   "dependencies": {
     "@hugeicons/core-free-icons": "^1.1.0",
     "@hugeicons/react": "^1.1.1",
+    "@simplewebauthn/browser": "^13.3.0",
+    "@simplewebauthn/server": "^13.3.2",
     "clsx": "^2.1.1",
     "react-google-recaptcha-v3": "^1.11.0",
     "react-hot-toast": "^2.6.0",