@mesob/auth-react 0.3.4 → 0.3.5

package/dist/components/profile/security.js

@@ -2,7 +2,7 @@
 
 // src/components/profile/change-email-form.tsx
 import {
-  Button as Button4,
+  Button as Button3,
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger
@@ -342,7 +342,7 @@ import {
 // src/components/auth/verification-form.tsx
 import { zodResolver as zodResolver2 } from "@hookform/resolvers/zod";
 import {
-  Button as Button3,
+  Button as Button2,
   Form,
   FormControl,
   FormField,
@@ -351,8 +351,7 @@ import {
   FormMessage,
   InputOTP,
   InputOTPGroup,
-  InputOTPSlot,
-  Spinner as Spinner3
+  InputOTPSlot
 } from "@mesob/ui/components";
 import { useForm as useForm2 } from "react-hook-form";
 import { z as z2 } from "zod";
@@ -372,7 +371,7 @@ function useTranslator(namespace) {
 }
 
 // src/components/auth/countdown.tsx
-import { Button as Button2, Spinner as Spinner2 } from "@mesob/ui/components";
+import { Spinner as Spinner2 } from "@mesob/ui/components";
 import { useEffect as useEffect2, useState as useState3 } from "react";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var Countdown = ({
@@ -408,17 +407,19 @@ var Countdown = ({
       setIsResending(false);
     }
   };
+  const busy = isResending || resending;
   if (seconds > 0) {
-    return /* @__PURE__ */ jsx3(Button2, { variant: "ghost", disabled: true, children: t("resendIn", { seconds }) });
+    return /* @__PURE__ */ jsx3("p", { className: "text-sm text-muted-foreground", children: t("resendIn", { seconds }) });
   }
   return /* @__PURE__ */ jsxs2(
-    Button2,
+    "button",
     {
-      variant: "ghost",
+      type: "button",
       onClick: handleResend,
-      disabled: isResending || resending,
+      disabled: busy,
+      className: "text-sm text-primary hover:underline disabled:opacity-50 flex items-center gap-1",
       children: [
-        isResending || resending && /* @__PURE__ */ jsx3(Spinner2, {}),
+        busy && /* @__PURE__ */ jsx3(Spinner2, { className: "h-3 w-3" }),
         t("resend")
       ]
     }
@@ -438,13 +439,12 @@ var VerificationForm = ({
   const t = useTranslator("Auth.verification");
   const form = useForm2({
     resolver: zodResolver2(verificationSchema(t)),
-    defaultValues: {
-      code: ""
-    }
+    defaultValues: { code: "" }
   });
   const handleSubmit = form.handleSubmit(async (values) => {
     await onSubmit(values);
   });
+  const codeLength = form.watch("code").length;
   return /* @__PURE__ */ jsx4(Form, { ...form, children: /* @__PURE__ */ jsxs3(
     "form",
     {
@@ -482,21 +482,18 @@ var VerificationForm = ({
             ] })
           }
         ),
-        /* @__PURE__ */ jsxs3("div", { className: "flex justify-between items-center", children: [
-          /* @__PURE__ */ jsx4(Countdown, { onResend, resending: isLoading }),
-          /* @__PURE__ */ jsxs3(
-            Button3,
-            {
-              type: "submit",
-              form: "verification-form",
-              disabled: isLoading || form.watch("code").length !== 6,
-              children: [
-                isLoading && /* @__PURE__ */ jsx4(Spinner3, {}),
-                t("form.confirm")
-              ]
-            }
-          )
-        ] })
+        /* @__PURE__ */ jsx4(
+          Button2,
+          {
+            type: "submit",
+            form: "verification-form",
+            className: "w-full",
+            disabled: isLoading || codeLength !== 6,
+            loading: isLoading,
+            children: t("form.confirm")
+          }
+        ),
+        /* @__PURE__ */ jsx4("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx4(Countdown, { onResend, resending: isLoading }) })
       ]
     }
   ) });
@@ -700,7 +697,7 @@ function ChangeEmailForm() {
       CollapsibleTrigger,
       {
         render: /* @__PURE__ */ jsx7(
-          Button4,
+          Button3,
           {
             variant: "ghost",
             className: "w-full justify-between p-4 h-auto"
@@ -742,13 +739,13 @@ function ChangeEmailForm() {
 // src/components/profile/change-password-form.tsx
 import { zodResolver as zodResolver3 } from "@hookform/resolvers/zod";
 import {
-  Button as Button5,
+  Button as Button4,
   Collapsible as Collapsible2,
   CollapsibleContent as CollapsibleContent2,
   CollapsibleTrigger as CollapsibleTrigger2,
   Input as Input2,
   Label as Label2,
-  Spinner as Spinner4
+  Spinner as Spinner3
 } from "@mesob/ui/components";
 import { IconChevronDown as IconChevronDown2, IconEye as IconEye2, IconEyeOff as IconEyeOff2 } from "@tabler/icons-react";
 import { useState as useState6 } from "react";
@@ -844,7 +841,7 @@ function ChangePasswordForm() {
       CollapsibleTrigger2,
       {
         render: /* @__PURE__ */ jsx8(
-          Button5,
+          Button4,
           {
             variant: "ghost",
             className: "w-full justify-between p-4 h-auto"
@@ -947,7 +944,7 @@ function ChangePasswordForm() {
           ] }),
           /* @__PURE__ */ jsxs6("div", { className: "flex justify-end gap-2", children: [
             /* @__PURE__ */ jsx8(
-              Button5,
+              Button4,
               {
                 type: "button",
                 variant: "outline",
@@ -959,8 +956,8 @@ function ChangePasswordForm() {
                 children: "Cancel"
               }
             ),
-            /* @__PURE__ */ jsxs6(Button5, { type: "submit", disabled: isSubmitting, children: [
-              isSubmitting && /* @__PURE__ */ jsx8(Spinner4, { className: "mr-2 h-4 w-4" }),
+            /* @__PURE__ */ jsxs6(Button4, { type: "submit", disabled: isSubmitting, children: [
+              isSubmitting && /* @__PURE__ */ jsx8(Spinner3, { className: "mr-2 h-4 w-4" }),
               "Change Password"
             ] })
           ] })
@@ -972,7 +969,7 @@ function ChangePasswordForm() {
 
 // src/components/profile/change-phone-form.tsx
 import {
-  Button as Button7,
+  Button as Button6,
   Collapsible as Collapsible3,
   CollapsibleContent as CollapsibleContent3,
   CollapsibleTrigger as CollapsibleTrigger3
@@ -982,7 +979,7 @@ import { useState as useState9 } from "react";
 
 // src/components/profile/request-change-phone-form.tsx
 import { zodResolver as zodResolver4 } from "@hookform/resolvers/zod";
-import { Button as Button6, Input as Input3, Label as Label3, Spinner as Spinner5 } from "@mesob/ui/components";
+import { Button as Button5, Input as Input3, Label as Label3, Spinner as Spinner4 } from "@mesob/ui/components";
 import { IconEye as IconEye3, IconEyeOff as IconEyeOff3 } from "@tabler/icons-react";
 import { useEffect as useEffect3, useState as useState7 } from "react";
 import { useForm as useForm4 } from "react-hook-form";
@@ -1240,7 +1237,7 @@ function RequestChangePhoneForm({
         ] }),
         /* @__PURE__ */ jsxs7("div", { className: "flex justify-end gap-2", children: [
           /* @__PURE__ */ jsx9(
-            Button6,
+            Button5,
             {
               type: "button",
               variant: "outline",
@@ -1249,8 +1246,8 @@ function RequestChangePhoneForm({
               children: "Cancel"
             }
           ),
-          /* @__PURE__ */ jsxs7(Button6, { type: "submit", disabled: isLoading, children: [
-            isLoading && /* @__PURE__ */ jsx9(Spinner5, { className: "mr-2 h-4 w-4" }),
+          /* @__PURE__ */ jsxs7(Button5, { type: "submit", disabled: isLoading, children: [
+            isLoading && /* @__PURE__ */ jsx9(Spinner4, { className: "mr-2 h-4 w-4" }),
             isChecking ? "Checking\u2026" : buttonText
           ] })
         ] })
@@ -1423,7 +1420,7 @@ function ChangePhoneForm() {
       CollapsibleTrigger3,
       {
         render: /* @__PURE__ */ jsx11(
-          Button7,
+          Button6,
           {
             variant: "ghost",
             className: "w-full justify-between p-4 h-auto"