@mesob/auth-react 0.3.4 → 0.3.5

package/dist/index.js

@@ -20,8 +20,7 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-  Input,
-  Spinner
+  Input
 } from "@mesob/ui/components";
 import { useMesob as useMesob2 } from "@mesob/ui/providers";
 import { IconAlertCircle } from "@tabler/icons-react";
@@ -440,13 +439,21 @@ var AuthLayout = ({
   logoImage
 }) => {
   return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsx3("div", { className: "flex size-8 mb-6 w-full items-center justify-center rounded-md", children: /* @__PURE__ */ jsx3("img", { src: logoImage || "", alt: "Mesob", width: 42, height: 42 }) }),
+    /* @__PURE__ */ jsx3("div", { className: "flex size-8 mb-6 w-full items-center justify-center rounded-md", children: /* @__PURE__ */ jsx3(
+      "img",
+      {
+        src: logoImage || "",
+        alt: title,
+        width: 42,
+        height: 42
+      }
+    ) }),
     /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
       /* @__PURE__ */ jsx3("h1", { className: "text-2xl font-bold tracking-tight", children: title }),
       description && /* @__PURE__ */ jsx3("p", { className: "mt-2 text-sm text-muted-foreground", children: description })
     ] }),
     children,
-    /* @__PURE__ */ jsx3("div", { className: "mt-2 w-full", children: footer && /* @__PURE__ */ jsx3("div", { className: "w-full text-center text-sm text-muted-foreground", children: footer }) })
+    footer && /* @__PURE__ */ jsx3("div", { className: "mt-2 w-full", children: /* @__PURE__ */ jsx3("div", { className: "w-full text-center text-sm text-muted-foreground", children: footer }) })
   ] });
 };
 
@@ -517,7 +524,7 @@ var ForgotPassword = () => {
   return /* @__PURE__ */ jsxs2(
     AuthLayout,
     {
-      title: t("title"),
+      title: config.ui.name,
       description: t("description"),
       logoImage,
       footer: Link ? /* @__PURE__ */ jsx4(Link, { href: signInLink, className: "text-primary hover:underline", children: t("footer.backToSignIn") }) : /* @__PURE__ */ jsx4(
@@ -547,29 +554,20 @@ var ForgotPassword = () => {
                   name: "account",
                   render: ({ field }) => /* @__PURE__ */ jsxs2(FormItem, { children: [
                     /* @__PURE__ */ jsx4(FormLabel, { children: t("form.accountLabel") }),
-                    /* @__PURE__ */ jsx4(FormControl, { children: /* @__PURE__ */ jsx4(
-                      Input,
-                      {
-                        ...field,
-                        type: "text",
-                        placeholder: t("form.accountPlaceholder")
-                      }
-                    ) }),
+                    /* @__PURE__ */ jsx4(FormControl, { children: /* @__PURE__ */ jsx4(Input, { ...field, type: "text" }) }),
                     /* @__PURE__ */ jsx4(FormMessage, {})
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsxs2(
+              /* @__PURE__ */ jsx4(
                 Button,
                 {
                   type: "submit",
                   form: "forgot-password-form",
                   className: "w-full",
                   disabled: isLoading || forgotPasswordMutation.isPending,
-                  children: [
-                    isLoading || forgotPasswordMutation.isPending && /* @__PURE__ */ jsx4(Spinner, {}),
-                    isLoading || forgotPasswordMutation.isPending ? t("form.submitting") : t("form.submit")
-                  ]
+                  loading: isLoading || forgotPasswordMutation.isPending,
+                  children: isLoading || forgotPasswordMutation.isPending ? t("form.submitting") : t("form.submit")
                 }
               )
             ]
@@ -602,7 +600,6 @@ import {
   InputOTP,
   InputOTPGroup,
   InputOTPSlot,
-  Spinner as Spinner2,
   useFormField
 } from "@mesob/ui/components";
 import { useMesob as useMesob3 } from "@mesob/ui/providers";
@@ -612,12 +609,7 @@ import { useForm as useForm2 } from "react-hook-form";
 import { toast as toast2 } from "sonner";
 import { z as z2 } from "zod";
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-function PasswordInput({
-  field,
-  show,
-  onToggle,
-  placeholder
-}) {
+function PasswordInput({ field, show, onToggle }) {
   const { formItemId, error } = useFormField();
   return /* @__PURE__ */ jsxs3("div", { className: "relative", children: [
     /* @__PURE__ */ jsx5(
@@ -626,7 +618,6 @@ function PasswordInput({
         ...field,
         id: formItemId,
         type: show ? "text" : "password",
-        placeholder,
         "aria-invalid": !!error,
         className: "pr-10"
       }
@@ -747,7 +738,7 @@ var ResetPasswordForm = ({
   return /* @__PURE__ */ jsxs3(
     AuthLayout,
     {
-      title: t("title"),
+      title: config.ui.name,
       description: t("description"),
       logoImage,
       footer: /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between w-full gap-2", children: [
@@ -810,8 +801,7 @@ var ResetPasswordForm = ({
                       {
                         field,
                         show: showPassword,
-                        onToggle: () => setShowPassword(!showPassword),
-                        placeholder: t("form.passwordPlaceholder")
+                        onToggle: () => setShowPassword(!showPassword)
                       }
                     ),
                     /* @__PURE__ */ jsx5(FormMessage2, {})
@@ -830,25 +820,22 @@ var ResetPasswordForm = ({
                       {
                         field,
                         show: showPassword,
-                        onToggle: () => setShowPassword(!showPassword),
-                        placeholder: t("form.passwordPlaceholder")
+                        onToggle: () => setShowPassword(!showPassword)
                       }
                     ),
                     /* @__PURE__ */ jsx5(FormMessage2, {})
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsxs3(
+              /* @__PURE__ */ jsx5(
                 Button2,
                 {
                   type: "submit",
                   form: "reset-password-form",
                   className: "w-full",
                   disabled: isLoading || resetPasswordMutation.isPending,
-                  children: [
-                    isLoading || resetPasswordMutation.isPending && /* @__PURE__ */ jsx5(Spinner2, {}),
-                    isLoading || resetPasswordMutation.isPending ? t("form.submitting") : t("form.submit")
-                  ]
+                  loading: isLoading || resetPasswordMutation.isPending,
+                  children: isLoading || resetPasswordMutation.isPending ? t("form.submitting") : t("form.submit")
                 }
               )
             ]
@@ -908,12 +895,7 @@ function normalizePhone(phone) {
 // src/components/auth/sign-in.tsx
 import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var isPhone = (s) => /^\+?[0-9()[\]\s-]{6,}$/.test(s);
-function PasswordInput2({
-  field,
-  show,
-  onToggle,
-  placeholder
-}) {
+function PasswordInput2({ field, show, onToggle }) {
   const { formItemId, error } = useFormField2();
   return /* @__PURE__ */ jsxs4("div", { className: "relative", children: [
     /* @__PURE__ */ jsx6(
@@ -922,7 +904,6 @@ function PasswordInput2({
         ...field,
         id: formItemId,
         type: show ? "text" : "password",
-        placeholder,
         autoComplete: "current-password",
         "aria-invalid": !!error,
         className: "pr-10"
@@ -983,7 +964,7 @@ var SignIn = ({ redirectUrl } = {}) => {
   const form = useForm3({
     resolver: zodResolver3(signInSchema(t, phoneRegex)),
     defaultValues: { username: "", password: "" },
-    mode: "onChange"
+    mode: "onBlur"
   });
   useEffect3(() => {
     if (error) {
@@ -1007,11 +988,14 @@ var SignIn = ({ redirectUrl } = {}) => {
         setShowPasswordField(true);
       } else {
         const email = isPhone(normalizedUsername) ? "" : normalizedUsername;
+        const redirectParam = defaultRedirect ? `&redirect=${encodeURIComponent(defaultRedirect)}` : "";
         if (email) {
-          onNavigate(`${signUpLink}?email=${encodeURIComponent(email)}`);
+          onNavigate(
+            `${signUpLink}?email=${encodeURIComponent(email)}${redirectParam}`
+          );
         } else {
           onNavigate(
-            `${signUpLink}?phone=${encodeURIComponent(normalizedUsername)}`
+            `${signUpLink}?phone=${encodeURIComponent(normalizedUsername)}${redirectParam}`
           );
         }
       }
@@ -1044,7 +1028,8 @@ var SignIn = ({ redirectUrl } = {}) => {
         }
       });
       if ("verificationId" in res && res.verificationId) {
-        const verifyPath = isPhone(username) ? `/auth/verify-phone?context=sign-in&verificationId=${res.verificationId}&identifier=${encodeURIComponent(username)}` : `/auth/verify-email?verificationId=${res.verificationId}`;
+        const redirectParam = defaultRedirect ? `&redirect=${encodeURIComponent(defaultRedirect)}` : "";
+        const verifyPath = isPhone(username) ? `/auth/verify-phone?context=sign-in&verificationId=${res.verificationId}&identifier=${encodeURIComponent(username)}${redirectParam}` : `/auth/verify-email?verificationId=${res.verificationId}${redirectParam}`;
         onNavigate(verifyPath);
         return;
       }
@@ -1107,6 +1092,7 @@ var SignIn = ({ redirectUrl } = {}) => {
                 id: "sign-in-username",
                 type: "text",
                 value: username,
+                autoComplete: "username",
                 disabled: true
               }
             )
@@ -1123,8 +1109,7 @@ var SignIn = ({ redirectUrl } = {}) => {
                   {
                     field: { ...field, value: field.value ?? "" },
                     show: showPassword,
-                    onToggle: () => setShowPassword(!showPassword),
-                    placeholder: t("form.passwordPlaceholder")
+                    onToggle: () => setShowPassword(!showPassword)
                   }
                 ),
                 /* @__PURE__ */ jsx6(FormMessage3, {})
@@ -1138,15 +1123,7 @@ var SignIn = ({ redirectUrl } = {}) => {
             name: "username",
             render: ({ field }) => /* @__PURE__ */ jsxs4(FormItem3, { children: [
               /* @__PURE__ */ jsx6(FormLabel3, { children: t("form.accountLabel") }),
-              /* @__PURE__ */ jsx6(FormControl3, { children: /* @__PURE__ */ jsx6(
-                Input3,
-                {
-                  ...field,
-                  type: "text",
-                  placeholder: t("form.accountPlaceholder"),
-                  autoComplete: "username"
-                }
-              ) }),
+              /* @__PURE__ */ jsx6(FormControl3, { children: /* @__PURE__ */ jsx6(Input3, { ...field, type: "text", autoComplete: "username" }) }),
               /* @__PURE__ */ jsx6(FormMessage3, {})
             ] })
           }
@@ -1167,7 +1144,7 @@ var SignIn = ({ redirectUrl } = {}) => {
   return /* @__PURE__ */ jsx6("div", { className: "space-y-4", children: /* @__PURE__ */ jsxs4(
     AuthLayout,
     {
-      title: t("title"),
+      title: config.ui.name,
       description: t("description"),
       logoImage,
       footer: showPasswordField ? /* @__PURE__ */ jsx6("div", { className: "flex items-center justify-center w-full", children: Link ? /* @__PURE__ */ jsx6(
@@ -1225,12 +1202,7 @@ import { toast as toast4 } from "sonner";
 import { z as z4 } from "zod";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var isPhone2 = (s) => /^\+?[0-9()[\]\s-]{6,}$/.test(s);
-function PasswordInput3({
-  field,
-  show,
-  onToggle,
-  placeholder
-}) {
+function PasswordInput3({ field, show, onToggle }) {
   const { formItemId, error } = useFormField3();
   return /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
     /* @__PURE__ */ jsx7(
@@ -1239,7 +1211,6 @@ function PasswordInput3({
         ...field,
         id: formItemId,
         type: show ? "text" : "password",
-        placeholder,
         "aria-invalid": !!error,
         className: "pr-10"
       }
@@ -1341,13 +1312,14 @@ var SignUp = ({
         }
       });
       if ("verificationId" in res && res.verificationId) {
+        const redirectParam = defaultRedirect ? `&redirect=${encodeURIComponent(defaultRedirect)}` : "";
         if (usingPhone) {
           onNavigate(
-            `/auth/verify-phone?context=sign-up&verificationId=${res.verificationId}&phone=${encodeURIComponent(identifier)}`
+            `/auth/verify-phone?context=sign-up&verificationId=${res.verificationId}&phone=${encodeURIComponent(identifier)}${redirectParam}`
           );
         } else {
           onNavigate(
-            `/auth/verify-email?verificationId=${res.verificationId}&email=${encodeURIComponent(identifier)}`
+            `/auth/verify-email?verificationId=${res.verificationId}&email=${encodeURIComponent(identifier)}${redirectParam}`
           );
         }
         return;
@@ -1383,7 +1355,7 @@ var SignUp = ({
   return /* @__PURE__ */ jsxs5(
     AuthLayout,
     {
-      title: t("title"),
+      title: config.ui.name,
       description: t("description"),
       logoImage,
       footer: /* @__PURE__ */ jsxs5("p", { children: [
@@ -1411,13 +1383,7 @@ var SignUp = ({
               name: "fullName",
               render: ({ field }) => /* @__PURE__ */ jsxs5(FormItem4, { children: [
                 /* @__PURE__ */ jsx7(FormLabel4, { children: t("form.fullNameLabel") }),
-                /* @__PURE__ */ jsx7(FormControl4, { children: /* @__PURE__ */ jsx7(
-                  Input4,
-                  {
-                    ...field,
-                    placeholder: t("form.fullNamePlaceholder")
-                  }
-                ) }),
+                /* @__PURE__ */ jsx7(FormControl4, { children: /* @__PURE__ */ jsx7(Input4, { ...field }) }),
                 /* @__PURE__ */ jsx7(FormMessage4, {})
               ] })
             }
@@ -1440,7 +1406,6 @@ var SignUp = ({
                   {
                     ...field,
                     type: field.value.includes("@") ? "email" : "tel",
-                    placeholder: hasInitialIdentifier ? void 0 : t("form.accountPlaceholder") || "Email or phone number",
                     disabled: hasInitialIdentifier
                   }
                 ) }),
@@ -1460,8 +1425,7 @@ var SignUp = ({
                   {
                     field,
                     show: showPassword,
-                    onToggle: () => setShowPassword(!showPassword),
-                    placeholder: t("form.passwordPlaceholder")
+                    onToggle: () => setShowPassword(!showPassword)
                   }
                 ),
                 /* @__PURE__ */ jsx7(FormMessage4, {})
@@ -1480,8 +1444,7 @@ var SignUp = ({
                   {
                     field,
                     show: showConfirmPassword,
-                    onToggle: () => setShowConfirmPassword(!showConfirmPassword),
-                    placeholder: t("form.passwordPlaceholder")
+                    onToggle: () => setShowConfirmPassword(!showConfirmPassword)
                   }
                 ),
                 /* @__PURE__ */ jsx7(FormMessage4, {})
@@ -1512,7 +1475,7 @@ var SignUp = ({
 // src/components/auth/verification-form.tsx
 import { zodResolver as zodResolver5 } from "@hookform/resolvers/zod";
 import {
-  Button as Button6,
+  Button as Button5,
   Form as Form5,
   FormControl as FormControl5,
   FormField as FormField5,
@@ -1521,14 +1484,13 @@ import {
   FormMessage as FormMessage5,
   InputOTP as InputOTP2,
   InputOTPGroup as InputOTPGroup2,
-  InputOTPSlot as InputOTPSlot2,
-  Spinner as Spinner4
+  InputOTPSlot as InputOTPSlot2
 } from "@mesob/ui/components";
 import { useForm as useForm5 } from "react-hook-form";
 import { z as z5 } from "zod";
 
 // src/components/auth/countdown.tsx
-import { Button as Button5, Spinner as Spinner3 } from "@mesob/ui/components";
+import { Spinner } from "@mesob/ui/components";
 import { useEffect as useEffect5, useState as useState6 } from "react";
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var Countdown = ({
@@ -1564,17 +1526,19 @@ var Countdown = ({
       setIsResending(false);
     }
   };
+  const busy = isResending || resending;
   if (seconds > 0) {
-    return /* @__PURE__ */ jsx8(Button5, { variant: "ghost", disabled: true, children: t("resendIn", { seconds }) });
+    return /* @__PURE__ */ jsx8("p", { className: "text-sm text-muted-foreground", children: t("resendIn", { seconds }) });
   }
   return /* @__PURE__ */ jsxs6(
-    Button5,
+    "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__ */ jsx8(Spinner3, {}),
+        busy && /* @__PURE__ */ jsx8(Spinner, { className: "h-3 w-3" }),
         t("resend")
       ]
     }
@@ -1594,13 +1558,12 @@ var VerificationForm = ({
   const t = useTranslator("Auth.verification");
   const form = useForm5({
     resolver: zodResolver5(verificationSchema(t)),
-    defaultValues: {
-      code: ""
-    }
+    defaultValues: { code: "" }
   });
   const handleSubmit = form.handleSubmit(async (values) => {
     await onSubmit(values);
   });
+  const codeLength = form.watch("code").length;
   return /* @__PURE__ */ jsx9(Form5, { ...form, children: /* @__PURE__ */ jsxs7(
     "form",
     {
@@ -1638,21 +1601,18 @@ var VerificationForm = ({
             ] })
           }
         ),
-        /* @__PURE__ */ jsxs7("div", { className: "flex justify-between items-center", children: [
-          /* @__PURE__ */ jsx9(Countdown, { onResend, resending: isLoading }),
-          /* @__PURE__ */ jsxs7(
-            Button6,
-            {
-              type: "submit",
-              form: "verification-form",
-              disabled: isLoading || form.watch("code").length !== 6,
-              children: [
-                isLoading && /* @__PURE__ */ jsx9(Spinner4, {}),
-                t("form.confirm")
-              ]
-            }
-          )
-        ] })
+        /* @__PURE__ */ jsx9(
+          Button5,
+          {
+            type: "submit",
+            form: "verification-form",
+            className: "w-full",
+            disabled: isLoading || codeLength !== 6,
+            loading: isLoading,
+            children: t("form.confirm")
+          }
+        ),
+        /* @__PURE__ */ jsx9("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx9(Countdown, { onResend, resending: isLoading }) })
       ]
     }
   ) });
@@ -1784,7 +1744,7 @@ var VerifyEmail = ({
   return /* @__PURE__ */ jsxs8(
     AuthLayout,
     {
-      title: t("email.title"),
+      title: config.ui.name,
       description: t("email.description"),
       logoImage,
       footer: Link ? /* @__PURE__ */ jsx10(Link, { href: signInLink, className: "text-primary hover:underline", children: footer("backToSignIn") }) : /* @__PURE__ */ jsx10(
@@ -1949,7 +1909,7 @@ var VerifyPhone = ({
   return /* @__PURE__ */ jsxs9(
     AuthLayout,
     {
-      title: t("phone.title"),
+      title: config.ui.name,
       description: t("phone.description", {
         target: phone || t("phone.missingPhone")
       }),
@@ -1988,7 +1948,7 @@ var VerifyPhone = ({
 };
 
 // src/components/error-boundary.tsx
-import { Button as Button7 } from "@mesob/ui/components";
+import { Button as Button6 } from "@mesob/ui/components";
 import { Component } from "react";
 import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 var ErrorBoundary = class extends Component {
@@ -2023,7 +1983,7 @@ function ErrorFallback({ error, reset }) {
       /* @__PURE__ */ jsx12("h2", { className: "text-2xl font-bold text-destructive", children: "Something went wrong" }),
       /* @__PURE__ */ jsx12("p", { className: "text-muted-foreground", children: error.message || "An unexpected error occurred" })
     ] }),
-    /* @__PURE__ */ jsx12(Button7, { onClick: reset, variant: "outline", children: "Try again" })
+    /* @__PURE__ */ jsx12(Button6, { onClick: reset, variant: "outline", children: "Try again" })
   ] }) });
 }
 function AuthErrorBoundary({ children }) {
@@ -2031,7 +1991,7 @@ function AuthErrorBoundary({ children }) {
 }
 
 // src/components/iam/permissions.tsx
-import { Badge, Button as Button8 } from "@mesob/ui/components";
+import { Badge, Button as Button7 } from "@mesob/ui/components";
 import { useLocale } from "next-intl";
 import { useState as useState9 } from "react";
 
@@ -2169,7 +2129,7 @@ function Permissions() {
     {
       key: "actions",
       header: "Actions",
-      cell: (_permission) => /* @__PURE__ */ jsx15(Button8, { variant: "outline", size: "sm", children: "Edit" })
+      cell: (_permission) => /* @__PURE__ */ jsx15(Button7, { variant: "outline", size: "sm", children: "Edit" })
     }
   ];
   if (error) {
@@ -2181,7 +2141,7 @@ function Permissions() {
         /* @__PURE__ */ jsx15("h1", { className: "text-3xl font-bold", children: "Permissions" }),
         /* @__PURE__ */ jsx15("p", { className: "text-muted-foreground", children: "Manage system permissions" })
       ] }),
-      /* @__PURE__ */ jsx15(Button8, { children: "Create Permission" })
+      /* @__PURE__ */ jsx15(Button7, { children: "Create Permission" })
     ] }),
     /* @__PURE__ */ jsx15(
       DataTable,
@@ -2194,11 +2154,11 @@ function Permissions() {
     ),
     data && "permissions" in data && data.permissions && data.permissions.length >= limit && /* @__PURE__ */ jsxs13("div", { className: "flex justify-between items-center", children: [
       /* @__PURE__ */ jsx15(
-        Button8,
+        Button7,
         {
           variant: "outline",
           disabled: page === 1,
-          onClick: () => setPage(page - 1),
+          onClick: () => setPage((prev) => prev - 1),
           children: "Previous"
         }
       ),
@@ -2206,13 +2166,20 @@ function Permissions() {
         "Page ",
         page
       ] }),
-      /* @__PURE__ */ jsx15(Button8, { variant: "outline", onClick: () => setPage(page + 1), children: "Next" })
+      /* @__PURE__ */ jsx15(
+        Button7,
+        {
+          variant: "outline",
+          onClick: () => setPage((prev) => prev + 1),
+          children: "Next"
+        }
+      )
     ] })
   ] });
 }
 
 // src/components/iam/roles.tsx
-import { Badge as Badge2, Button as Button9 } from "@mesob/ui/components";
+import { Badge as Badge2, Button as Button8 } from "@mesob/ui/components";
 import { useLocale as useLocale2 } from "next-intl";
 import { useState as useState10 } from "react";
 import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
@@ -2264,8 +2231,8 @@ function Roles() {
       key: "actions",
       header: "Actions",
       cell: (_role) => /* @__PURE__ */ jsxs14("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsx16(Button9, { variant: "outline", size: "sm", children: "Permissions" }),
-        /* @__PURE__ */ jsx16(Button9, { variant: "outline", size: "sm", children: "Edit" })
+        /* @__PURE__ */ jsx16(Button8, { variant: "outline", size: "sm", children: "Permissions" }),
+        /* @__PURE__ */ jsx16(Button8, { variant: "outline", size: "sm", children: "Edit" })
       ] })
     }
   ];
@@ -2278,7 +2245,7 @@ function Roles() {
         /* @__PURE__ */ jsx16("h1", { className: "text-3xl font-bold", children: "Roles" }),
         /* @__PURE__ */ jsx16("p", { className: "text-muted-foreground", children: "Manage user roles" })
       ] }),
-      /* @__PURE__ */ jsx16(Button9, { children: "Create Role" })
+      /* @__PURE__ */ jsx16(Button8, { children: "Create Role" })
     ] }),
     /* @__PURE__ */ jsx16(
       DataTable,
@@ -2291,11 +2258,11 @@ function Roles() {
     ),
     data && "roles" in data && data.roles && data.roles.length >= limit && /* @__PURE__ */ jsxs14("div", { className: "flex justify-between items-center", children: [
       /* @__PURE__ */ jsx16(
-        Button9,
+        Button8,
         {
           variant: "outline",
           disabled: page === 1,
-          onClick: () => setPage(page - 1),
+          onClick: () => setPage((prev) => prev - 1),
           children: "Previous"
         }
       ),
@@ -2303,13 +2270,20 @@ function Roles() {
         "Page ",
         page
       ] }),
-      /* @__PURE__ */ jsx16(Button9, { variant: "outline", onClick: () => setPage(page + 1), children: "Next" })
+      /* @__PURE__ */ jsx16(
+        Button8,
+        {
+          variant: "outline",
+          onClick: () => setPage((prev) => prev + 1),
+          children: "Next"
+        }
+      )
     ] })
   ] });
 }
 
 // src/components/iam/sessions.tsx
-import { Button as Button10 } from "@mesob/ui/components";
+import { Button as Button9 } from "@mesob/ui/components";
 import { useState as useState11 } from "react";
 import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
 function Sessions() {
@@ -2364,7 +2338,7 @@ function Sessions() {
       key: "actions",
       header: "Actions",
       cell: (session) => /* @__PURE__ */ jsx17(
-        Button10,
+        Button9,
         {
           variant: "destructive",
           size: "sm",
@@ -2396,7 +2370,7 @@ function Sessions() {
 }
 
 // src/components/iam/tenants.tsx
-import { Badge as Badge3, Button as Button11 } from "@mesob/ui/components";
+import { Badge as Badge3, Button as Button10 } from "@mesob/ui/components";
 import { useState as useState12 } from "react";
 import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
 function Tenants() {
@@ -2437,8 +2411,8 @@ function Tenants() {
       key: "actions",
       header: "Actions",
       cell: (_tenant) => /* @__PURE__ */ jsxs16("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsx18(Button11, { variant: "outline", size: "sm", children: "Domains" }),
-        /* @__PURE__ */ jsx18(Button11, { variant: "outline", size: "sm", children: "Edit" })
+        /* @__PURE__ */ jsx18(Button10, { variant: "outline", size: "sm", children: "Domains" }),
+        /* @__PURE__ */ jsx18(Button10, { variant: "outline", size: "sm", children: "Edit" })
       ] })
     }
   ];
@@ -2451,7 +2425,7 @@ function Tenants() {
         /* @__PURE__ */ jsx18("h1", { className: "text-3xl font-bold", children: "Tenants" }),
         /* @__PURE__ */ jsx18("p", { className: "text-muted-foreground", children: "Manage tenant organizations" })
       ] }),
-      /* @__PURE__ */ jsx18(Button11, { children: "Create Tenant" })
+      /* @__PURE__ */ jsx18(Button10, { children: "Create Tenant" })
     ] }),
     /* @__PURE__ */ jsx18(
       DataTable,
@@ -2464,11 +2438,11 @@ function Tenants() {
     ),
     data && "tenants" in data && data.tenants && data.tenants.length >= limit && /* @__PURE__ */ jsxs16("div", { className: "flex justify-between items-center", children: [
       /* @__PURE__ */ jsx18(
-        Button11,
+        Button10,
         {
           variant: "outline",
           disabled: page === 1,
-          onClick: () => setPage(page - 1),
+          onClick: () => setPage((prev) => prev - 1),
           children: "Previous"
         }
       ),
@@ -2476,13 +2450,20 @@ function Tenants() {
         "Page ",
         page
       ] }),
-      /* @__PURE__ */ jsx18(Button11, { variant: "outline", onClick: () => setPage(page + 1), children: "Next" })
+      /* @__PURE__ */ jsx18(
+        Button10,
+        {
+          variant: "outline",
+          onClick: () => setPage((prev) => prev + 1),
+          children: "Next"
+        }
+      )
     ] })
   ] });
 }
 
 // src/components/iam/users.tsx
-import { Badge as Badge4, Button as Button12 } from "@mesob/ui/components";
+import { Badge as Badge4, Button as Button11 } from "@mesob/ui/components";
 import { useState as useState13 } from "react";
 import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
 function Users() {
@@ -2532,8 +2513,8 @@ function Users() {
       key: "actions",
       header: "Actions",
       cell: (_user) => /* @__PURE__ */ jsxs17("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsx19(Button12, { variant: "outline", size: "sm", children: "View" }),
-        /* @__PURE__ */ jsx19(Button12, { variant: "outline", size: "sm", children: "Edit" })
+        /* @__PURE__ */ jsx19(Button11, { variant: "outline", size: "sm", children: "View" }),
+        /* @__PURE__ */ jsx19(Button11, { variant: "outline", size: "sm", children: "Edit" })
       ] })
     }
   ];
@@ -2546,7 +2527,7 @@ function Users() {
         /* @__PURE__ */ jsx19("h1", { className: "text-3xl font-bold", children: "Users" }),
         /* @__PURE__ */ jsx19("p", { className: "text-muted-foreground", children: "Manage user accounts" })
       ] }),
-      /* @__PURE__ */ jsx19(Button12, { children: "Create User" })
+      /* @__PURE__ */ jsx19(Button11, { children: "Create User" })
     ] }),
     /* @__PURE__ */ jsx19(
       DataTable,
@@ -2559,11 +2540,11 @@ function Users() {
     ),
     data && "users" in data && data.users && data.users.length >= limit && /* @__PURE__ */ jsxs17("div", { className: "flex justify-between items-center", children: [
       /* @__PURE__ */ jsx19(
-        Button12,
+        Button11,
         {
           variant: "outline",
           disabled: page === 1,
-          onClick: () => setPage(page - 1),
+          onClick: () => setPage((prev) => prev - 1),
           children: "Previous"
         }
       ),
@@ -2571,7 +2552,14 @@ function Users() {
         "Page ",
         page
       ] }),
-      /* @__PURE__ */ jsx19(Button12, { variant: "outline", onClick: () => setPage(page + 1), children: "Next" })
+      /* @__PURE__ */ jsx19(
+        Button11,
+        {
+          variant: "outline",
+          onClick: () => setPage((prev) => prev + 1),
+          children: "Next"
+        }
+      )
     ] })
   ] });
 }
@@ -2607,7 +2595,7 @@ function Account() {
 
 // src/components/profile/change-email-form.tsx
 import {
-  Button as Button14,
+  Button as Button13,
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger
@@ -2617,7 +2605,7 @@ import { useState as useState16 } from "react";
 
 // src/components/profile/request-change-email-form.tsx
 import { zodResolver as zodResolver6 } from "@hookform/resolvers/zod";
-import { Button as Button13, Input as Input5, Label, Spinner as Spinner5 } from "@mesob/ui/components";
+import { Button as Button12, Input as Input5, Label, Spinner as Spinner2 } from "@mesob/ui/components";
 import { IconEye as IconEye4, IconEyeOff as IconEyeOff4 } from "@tabler/icons-react";
 import { useEffect as useEffect8, useState as useState14 } from "react";
 import { useForm as useForm6 } from "react-hook-form";
@@ -2842,7 +2830,7 @@ function RequestChangeEmailForm({
         ] }),
         /* @__PURE__ */ jsxs19("div", { className: "flex justify-end gap-2", children: [
           /* @__PURE__ */ jsx21(
-            Button13,
+            Button12,
             {
               type: "button",
               variant: "outline",
@@ -2851,8 +2839,8 @@ function RequestChangeEmailForm({
               children: "Cancel"
             }
           ),
-          /* @__PURE__ */ jsxs19(Button13, { type: "submit", disabled: isLoading, children: [
-            isLoading && /* @__PURE__ */ jsx21(Spinner5, { className: "mr-2 h-4 w-4" }),
+          /* @__PURE__ */ jsxs19(Button12, { type: "submit", disabled: isLoading, children: [
+            isLoading && /* @__PURE__ */ jsx21(Spinner2, { className: "mr-2 h-4 w-4" }),
             isChecking ? "Checking\u2026" : buttonText
           ] })
         ] })
@@ -3070,7 +3058,7 @@ function ChangeEmailForm() {
       CollapsibleTrigger,
       {
         render: /* @__PURE__ */ jsx24(
-          Button14,
+          Button13,
           {
             variant: "ghost",
             className: "w-full justify-between p-4 h-auto"
@@ -3112,13 +3100,13 @@ function ChangeEmailForm() {
 // src/components/profile/change-password-form.tsx
 import { zodResolver as zodResolver7 } from "@hookform/resolvers/zod";
 import {
-  Button as Button15,
+  Button as Button14,
   Collapsible as Collapsible2,
   CollapsibleContent as CollapsibleContent2,
   CollapsibleTrigger as CollapsibleTrigger2,
   Input as Input6,
   Label as Label2,
-  Spinner as Spinner6
+  Spinner as Spinner3
 } from "@mesob/ui/components";
 import { IconChevronDown as IconChevronDown2, IconEye as IconEye5, IconEyeOff as IconEyeOff5 } from "@tabler/icons-react";
 import { useState as useState17 } from "react";
@@ -3214,7 +3202,7 @@ function ChangePasswordForm() {
       CollapsibleTrigger2,
       {
         render: /* @__PURE__ */ jsx25(
-          Button15,
+          Button14,
           {
             variant: "ghost",
             className: "w-full justify-between p-4 h-auto"
@@ -3317,7 +3305,7 @@ function ChangePasswordForm() {
           ] }),
           /* @__PURE__ */ jsxs22("div", { className: "flex justify-end gap-2", children: [
             /* @__PURE__ */ jsx25(
-              Button15,
+              Button14,
               {
                 type: "button",
                 variant: "outline",
@@ -3329,8 +3317,8 @@ function ChangePasswordForm() {
                 children: "Cancel"
               }
             ),
-            /* @__PURE__ */ jsxs22(Button15, { type: "submit", disabled: isSubmitting, children: [
-              isSubmitting && /* @__PURE__ */ jsx25(Spinner6, { className: "mr-2 h-4 w-4" }),
+            /* @__PURE__ */ jsxs22(Button14, { type: "submit", disabled: isSubmitting, children: [
+              isSubmitting && /* @__PURE__ */ jsx25(Spinner3, { className: "mr-2 h-4 w-4" }),
               "Change Password"
             ] })
           ] })
@@ -3342,7 +3330,7 @@ function ChangePasswordForm() {
 
 // src/components/profile/change-phone-form.tsx
 import {
-  Button as Button17,
+  Button as Button16,
   Collapsible as Collapsible3,
   CollapsibleContent as CollapsibleContent3,
   CollapsibleTrigger as CollapsibleTrigger3
@@ -3352,7 +3340,7 @@ import { useState as useState20 } from "react";
 
 // src/components/profile/request-change-phone-form.tsx
 import { zodResolver as zodResolver8 } from "@hookform/resolvers/zod";
-import { Button as Button16, Input as Input7, Label as Label3, Spinner as Spinner7 } from "@mesob/ui/components";
+import { Button as Button15, Input as Input7, Label as Label3, Spinner as Spinner4 } from "@mesob/ui/components";
 import { IconEye as IconEye6, IconEyeOff as IconEyeOff6 } from "@tabler/icons-react";
 import { useEffect as useEffect9, useState as useState18 } from "react";
 import { useForm as useForm8 } from "react-hook-form";
@@ -3590,7 +3578,7 @@ function RequestChangePhoneForm({
         ] }),
         /* @__PURE__ */ jsxs23("div", { className: "flex justify-end gap-2", children: [
           /* @__PURE__ */ jsx26(
-            Button16,
+            Button15,
             {
               type: "button",
               variant: "outline",
@@ -3599,8 +3587,8 @@ function RequestChangePhoneForm({
               children: "Cancel"
             }
           ),
-          /* @__PURE__ */ jsxs23(Button16, { type: "submit", disabled: isLoading, children: [
-            isLoading && /* @__PURE__ */ jsx26(Spinner7, { className: "mr-2 h-4 w-4" }),
+          /* @__PURE__ */ jsxs23(Button15, { type: "submit", disabled: isLoading, children: [
+            isLoading && /* @__PURE__ */ jsx26(Spinner4, { className: "mr-2 h-4 w-4" }),
             isChecking ? "Checking\u2026" : buttonText
           ] })
         ] })
@@ -3773,7 +3761,7 @@ function ChangePhoneForm() {
       CollapsibleTrigger3,
       {
         render: /* @__PURE__ */ jsx28(
-          Button17,
+          Button16,
           {
             variant: "ghost",
             className: "w-full justify-between p-4 h-auto"