@mesob/auth-react 0.0.7 → 0.1.0

package/dist/index.js

@@ -1,428 +1,260 @@
 "use client";
 
-// src/client.ts
-var validErrorCodes = [
-  "USER_NOT_FOUND",
-  "INVALID_PASSWORD",
-  "USER_EXISTS",
-  "VERIFICATION_EXPIRED",
-  "VERIFICATION_MISMATCH",
-  "VERIFICATION_NOT_FOUND",
-  "TOO_MANY_ATTEMPTS",
-  "REQUIRES_VERIFICATION",
-  "UNAUTHORIZED",
-  "ACCESS_DENIED",
-  "HAS_NO_PASSWORD"
-];
-var AuthError = class extends Error {
-  code;
-  status;
-  details;
-  constructor(message, code, status, details) {
-    super(message);
-    this.name = "AuthError";
-    this.code = code;
-    this.status = status;
-    this.details = details;
-  }
-};
-var AuthClient = class {
-  baseURL;
-  constructor(config) {
-    this.baseURL = config.baseURL.replace(/\/$/, "");
-  }
-  async request(endpoint, options = {}) {
-    const url = `${this.baseURL}${endpoint}`;
-    const response = await fetch(url, {
-      ...options,
-      credentials: "include",
-      headers: {
-        "Content-Type": "application/json",
-        ...options.headers
-      }
-    });
-    if (!response.ok) {
-      const text = await response.text();
-      let errorData;
-      try {
-        errorData = JSON.parse(text);
-      } catch {
-        errorData = { error: "Unknown error", message: text };
-      }
-      const potentialCode = errorData.code || (typeof errorData.error === "string" ? errorData.error : null) || (typeof errorData.message === "string" ? errorData.message : null);
-      const upperCode = potentialCode?.toUpperCase().trim();
-      const errorCode = upperCode && validErrorCodes.includes(upperCode) ? upperCode : void 0;
-      const errorMessage = errorData.message || errorData.error || "Request failed";
-      throw new AuthError(
-        errorMessage,
-        errorCode,
-        response.status,
-        errorData.details
-      );
-    }
-    const data = await response.json();
-    return data;
-  }
-  signUpWithEmail(data) {
-    return this.request("/sign-up", {
-      method: "POST",
-      body: JSON.stringify({
-        email: data.email,
-        password: data.password,
-        fullName: data.fullName,
-        handle: data.handle
-      })
-    });
-  }
-  signUpWithPhone(data) {
-    return this.request("/sign-up", {
-      method: "POST",
-      body: JSON.stringify({
-        phone: data.phone,
-        password: data.password,
-        fullName: data.fullName,
-        handle: data.handle
-      })
-    });
-  }
-  checkUser(data) {
-    return this.request("/check-user", {
-      method: "POST",
-      body: JSON.stringify(data)
-    });
-  }
-  signInWithPassword(data) {
-    return this.request("/sign-in", {
-      method: "POST",
-      body: JSON.stringify(data)
-    });
-  }
-  signOut() {
-    return this.request("/sign-out", {
-      method: "POST"
-    });
-  }
-  requestEmailVerification(data) {
-    return this.request(
-      "/email/verification/request",
-      {
-        method: "POST",
-        body: JSON.stringify(data || {})
-      }
-    );
-  }
-  verifyEmail(data) {
-    return this.request("/email/verification/confirm", {
-      method: "POST",
-      body: JSON.stringify(data)
-    });
-  }
-  resendVerification(_verificationId) {
-    return this.requestEmailVerification();
-  }
-  requestPhoneOtp(data) {
-    return this.request(
-      "/phone/verification/request",
-      {
-        method: "POST",
-        body: JSON.stringify(data)
-      }
-    );
-  }
-  verifyPhoneOtp(data) {
-    return this.request("/phone/verification/confirm", {
-      method: "POST",
-      body: JSON.stringify(data)
-    });
-  }
-  forgotPassword(data) {
-    return this.request("/password/forgot", {
-      method: "POST",
-      body: JSON.stringify(data)
-    });
-  }
-  resetPassword(data) {
-    return this.request("/password/reset", {
-      method: "POST",
-      body: JSON.stringify(data)
-    });
-  }
-  verifyPassword(data) {
-    return this.request("/password/verify", {
-      method: "POST",
-      body: JSON.stringify(data)
-    });
-  }
-  changePassword(data) {
-    return this.request("/password/change", {
-      method: "POST",
-      body: JSON.stringify(data)
-    });
-  }
-  getSession() {
-    return this.request("/session", {
-      method: "GET"
-    });
-  }
-  getPendingAccountChange() {
-    return this.request(
-      "/account-change/pending",
-      {
-        method: "GET"
-      }
-    );
-  }
-  updateProfile(data) {
-    return this.request("/profile", {
-      method: "PUT",
-      body: JSON.stringify(data)
-    });
-  }
-  updateEmail(data) {
-    return this.request("/profile/email", {
-      method: "PUT",
-      body: JSON.stringify(data)
-    });
-  }
-  updatePhone(data) {
-    return this.request("/profile/phone", {
-      method: "PUT",
-      body: JSON.stringify(data)
-    });
-  }
-};
-
 // src/components/auth/auth-card.tsx
 import { jsx } from "react/jsx-runtime";
 var AuthCard = ({ children }) => {
   return /* @__PURE__ */ jsx("div", { className: "flex min-h-screen p-4 items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx("div", { className: "rounded-xl border bg-card p-8 shadow-lg", children }) }) });
 };
 
-// src/components/auth/auth-page-layout.tsx
+// src/components/auth/pages/forgot-password-page.tsx
 import {
   Alert,
   AlertDescription,
   AlertTitle
 } from "@mesob/ui/components/alert";
+import { toast } from "@mesob/ui/components/sonner";
 import { IconAlertCircle } from "@tabler/icons-react";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var AuthPageLayout = ({
-  title,
-  description,
-  children,
-  error,
-  footer,
-  logoImage
-}) => {
-  const errorContent = error ? (
-    // biome-ignore lint/style/noNestedTernary: <explanation>
-    typeof error === "string" ? { title: "Error", description: error } : error
-  ) : null;
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsx2("div", { className: "flex size-8 mb-6 w-full items-center justify-center rounded-md", children: /* @__PURE__ */ jsx2("img", { src: logoImage || "", alt: "Jiret", width: 42, height: 42 }) }),
-    /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-      /* @__PURE__ */ jsx2("h1", { className: "text-2xl font-bold tracking-tight", children: title }),
-      description && /* @__PURE__ */ jsx2("p", { className: "mt-2 text-sm text-muted-foreground", children: description })
-    ] }),
-    children,
-    errorContent && /* @__PURE__ */ jsxs(Alert, { variant: "destructive", children: [
-      /* @__PURE__ */ jsx2(IconAlertCircle, { className: "h-4 w-4" }),
-      /* @__PURE__ */ jsx2(AlertTitle, { children: errorContent.title }),
-      /* @__PURE__ */ jsx2(AlertDescription, { children: errorContent.description })
-    ] }),
-    /* @__PURE__ */ jsx2("div", { className: "mt-2 w-full", children: footer && /* @__PURE__ */ jsx2("div", { className: "w-full text-center text-sm text-muted-foreground", children: footer }) })
-  ] });
-};
+import { useEffect as useEffect2, useState as useState2 } from "react";
 
-// src/components/auth/countdown.tsx
-import { Button } from "@mesob/ui/components/button";
-import { Spinner } from "@mesob/ui/components/spinner";
-import { useTranslations } from "next-intl";
-import { useEffect, useState } from "react";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var Countdown = ({
-  initialSeconds = 60,
-  onResend,
-  resending = false
-}) => {
-  const t = useTranslations("Common");
-  const [seconds, setSeconds] = useState(initialSeconds);
-  const [isResending, setIsResending] = useState(false);
-  useEffect(() => {
-    if (seconds <= 0) {
-      return;
+// src/lib/translations.ts
+function createTranslator(messages, namespace) {
+  return (key, params) => {
+    const fullKey = namespace ? `${namespace}.${key}` : key;
+    const keys = fullKey.split(".");
+    let value = messages;
+    for (const k of keys) {
+      if (value && typeof value === "object" && value !== null) {
+        value = value[k];
+      } else {
+        return fullKey;
+      }
     }
-    const timer = setInterval(() => {
-      setSeconds((prev) => {
-        if (prev <= 1) {
-          clearInterval(timer);
-          return 0;
-        }
-        return prev - 1;
-      });
-    }, 1e3);
-    return () => clearInterval(timer);
-  }, [seconds]);
-  const handleResend = async () => {
-    setIsResending(true);
-    try {
-      await onResend();
-      setSeconds(initialSeconds);
-    } catch (_error) {
-    } finally {
-      setIsResending(false);
+    if (typeof value !== "string") {
+      return fullKey;
     }
-  };
-  if (seconds > 0) {
-    return /* @__PURE__ */ jsx3(Button, { variant: "ghost", disabled: true, children: t("resendIn", { seconds }) });
-  }
-  return /* @__PURE__ */ jsxs2(
-    Button,
-    {
-      variant: "ghost",
-      onClick: handleResend,
-      disabled: isResending || resending,
-      children: [
-        isResending || resending && /* @__PURE__ */ jsx3(Spinner, {}),
-        t("resend")
-      ]
+    if (params) {
+      return value.replace(
+        /\{(\w+)\}/g,
+        (_, param) => String(params[param] ?? `{${param}}`)
+      );
     }
-  );
+    return value;
+  };
+}
+
+// src/provider.tsx
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { deepmerge } from "deepmerge-ts";
+import createFetchClient from "openapi-fetch";
+import createClient from "openapi-react-query";
+import { createContext, useContext, useEffect, useState } from "react";
+
+// src/types.ts
+var defaultAuthClientConfig = {
+  features: {
+    enableSignup: true,
+    enablePasswordReset: true,
+    enableEmailSignup: true,
+    enablePhoneSignup: true,
+    enableSocialSignup: false,
+    socialProviders: []
+  },
+  navigation: {
+    locale: "en"
+  },
+  cookiePrefix: "msb"
 };
 
-// src/components/auth/forgot-password.tsx
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Button as Button2 } from "@mesob/ui/components/button";
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage
-} from "@mesob/ui/components/form";
-import { Input } from "@mesob/ui/components/input";
-import { Spinner as Spinner2 } from "@mesob/ui/components/spinner";
-import { useTranslations as useTranslations2 } from "next-intl";
-import { useMemo } from "react";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var ForgotPassword = ({
-  onSubmit,
-  isLoading = false
-}) => {
-  const t = useTranslations2("Auth.forgotPassword");
-  const forgotPasswordSchema = useMemo(
-    () => z.object({
-      account: z.string().min(1, t("errors.accountRequired"))
-    }),
-    [t]
-  );
-  const form = useForm({
-    resolver: zodResolver(forgotPasswordSchema),
-    defaultValues: {
-      account: ""
-    }
-  });
-  const handleSubmit = form.handleSubmit(async (values) => {
-    await onSubmit(values);
-  });
-  return /* @__PURE__ */ jsx4(Form, { ...form, children: /* @__PURE__ */ jsxs3("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
-    /* @__PURE__ */ jsx4(
-      FormField,
-      {
-        control: form.control,
-        name: "account",
-        render: ({ field }) => /* @__PURE__ */ jsxs3(FormItem, { children: [
-          /* @__PURE__ */ jsx4(FormLabel, { children: t("form.accountLabel") }),
-          /* @__PURE__ */ jsx4(FormControl, { children: /* @__PURE__ */ jsx4(
-            Input,
-            {
-              type: "text",
-              placeholder: t("form.accountPlaceholder"),
-              ...field
-            }
-          ) }),
-          /* @__PURE__ */ jsx4(FormMessage, {})
-        ] })
+// src/utils/custom-fetch.ts
+var createCustomFetch = (config) => {
+  return (input, init) => {
+    const baseUrl = config.baseURL;
+    if (input instanceof Request) {
+      const originalUrl = input.url;
+      const fullUrl2 = originalUrl.startsWith("http") ? originalUrl : `${baseUrl}${originalUrl}`;
+      if (originalUrl === fullUrl2) {
+        return fetch(input, {
+          credentials: "include"
+        });
       }
-    ),
-    /* @__PURE__ */ jsxs3(Button2, { type: "submit", className: "w-full", disabled: isLoading, children: [
-      isLoading && /* @__PURE__ */ jsx4(Spinner2, {}),
-      isLoading ? t("form.submitting") : t("form.submit")
-    ] })
-  ] }) });
+      const clonedRequest = input.clone();
+      const requestInit = {
+        method: clonedRequest.method,
+        headers: clonedRequest.headers,
+        credentials: "include"
+      };
+      if (clonedRequest.body !== null) {
+        requestInit.body = clonedRequest.body;
+        requestInit.duplex = "half";
+      }
+      return fetch(fullUrl2, requestInit);
+    }
+    const urlString = typeof input === "string" ? input : input.toString();
+    const fullUrl = urlString.startsWith("http") ? urlString : `${baseUrl}${urlString}`;
+    return fetch(fullUrl, {
+      ...init,
+      headers: {
+        "Content-Type": "application/json",
+        ...init?.headers
+      },
+      credentials: "include"
+    });
+  };
 };
 
-// src/components/auth/pages/forgot-password-page.tsx
-import { useTranslations as useTranslations3 } from "next-intl";
-import { useState as useState3 } from "react";
-
-// src/context/auth-provider.tsx
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect as useEffect2,
-  useState as useState2
-} from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var AuthContext = createContext(null);
-var useAuth = () => {
-  const context = useContext(AuthContext);
+// src/provider.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var SessionContext = createContext(null);
+var ApiContext = createContext(null);
+var ConfigContext = createContext(null);
+var queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1e3 * 60 * 5,
+      gcTime: 1e3 * 60 * 10,
+      retry: 1,
+      refetchOnWindowFocus: false
+    }
+  }
+});
+function useSession() {
+  const context = useContext(SessionContext);
   if (!context) {
-    throw new Error("useAuth must be used within AuthProvider");
+    throw new Error("useSession must be used within MesobAuthProvider");
   }
   return context;
-};
-var AuthProvider = ({ client, children }) => {
-  const [user, setUser] = useState2(null);
-  const [session, setSession] = useState2(null);
-  const [loading, setLoading] = useState2(true);
-  const [error, setError] = useState2(null);
-  const refresh = useCallback(async () => {
+}
+function useApi() {
+  const context = useContext(ApiContext);
+  if (!context) {
+    throw new Error("useApi must be used within MesobAuthProvider");
+  }
+  return context;
+}
+function useConfig() {
+  const context = useContext(ConfigContext);
+  if (!context) {
+    throw new Error("useConfig must be used within MesobAuthProvider");
+  }
+  return context;
+}
+function MesobAuthProvider({
+  config,
+  children
+}) {
+  const mergedConfig = deepmerge(
+    { ...defaultAuthClientConfig },
+    config
+  );
+  const api = createFetchClient({
+    baseUrl: mergedConfig.baseURL,
+    fetch: createCustomFetch(mergedConfig)
+  });
+  const hooks = createClient(api);
+  return /* @__PURE__ */ jsx2(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx2(AuthStateProvider, { config: mergedConfig, hooks, children }) });
+}
+function AuthStateProvider({
+  config,
+  hooks,
+  children
+}) {
+  const [authState, setAuthState] = useState({
+    user: null,
+    session: null,
+    isLoading: false,
+    error: null
+  });
+  const {
+    data: sessionData,
+    isLoading: sessionLoading,
+    error: sessionError,
+    refetch
+  } = hooks.useQuery(
+    "get",
+    "/session",
+    {},
+    {
+      enabled: true,
+      refetchOnMount: true,
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+      retry: false
+    }
+  );
+  useEffect(() => {
+    if (sessionLoading) {
+      setAuthState((prev) => ({ ...prev, isLoading: true }));
+      return;
+    }
+    if (sessionError) {
+      setAuthState({
+        user: null,
+        session: null,
+        isLoading: false,
+        error: sessionError
+      });
+      return;
+    }
+    if (sessionData) {
+      setAuthState({
+        user: sessionData.user,
+        session: sessionData.session,
+        isLoading: false,
+        error: null
+      });
+      return;
+    }
+    setAuthState({
+      user: null,
+      session: null,
+      isLoading: false,
+      error: null
+    });
+  }, [sessionData, sessionLoading, sessionError]);
+  const refresh = async () => {
+    await refetch();
+  };
+  const setAuth = (auth) => {
+    setAuthState({
+      user: auth.user,
+      session: auth.session,
+      isLoading: false,
+      error: null
+    });
+  };
+  const clearAuth = () => {
+    setAuthState({
+      user: null,
+      session: null,
+      isLoading: false,
+      error: null
+    });
+  };
+  const signOutMutation = hooks.useMutation("post", "/sign-out");
+  const signOut = async () => {
     try {
-      setLoading(true);
-      setError(null);
-      const data = await client.getSession();
-      setUser(data.user);
-      setSession(data.session);
-    } catch (err) {
-      setError(
-        err instanceof Error ? err : new Error("Failed to fetch session")
-      );
-      setUser(null);
-      setSession(null);
+      await signOutMutation.mutateAsync({});
     } finally {
-      setLoading(false);
+      clearAuth();
     }
-  }, [client]);
-  const setAuth = useCallback((data) => {
-    setUser(data.user);
-    setSession(data.session);
-    setError(null);
-    setLoading(false);
-  }, []);
-  useEffect2(() => {
-    refresh();
-  }, [refresh]);
-  return /* @__PURE__ */ jsx5(
-    AuthContext.Provider,
+  };
+  const t = createTranslator(config.messages || {});
+  return /* @__PURE__ */ jsx2(ConfigContext.Provider, { value: { config, t }, children: /* @__PURE__ */ jsx2(ApiContext.Provider, { value: { hooks, setAuth, clearAuth, refresh }, children: /* @__PURE__ */ jsx2(
+    SessionContext.Provider,
     {
       value: {
-        user,
-        session,
-        loading,
-        error,
-        client,
+        user: authState.user,
+        session: authState.session,
+        isLoading: authState.isLoading,
+        isAuthenticated: !!authState.user && !!authState.session,
+        error: authState.error,
         refresh,
-        setAuth
+        signOut
       },
       children
     }
-  );
-};
+  ) }) });
+}
 
 // src/constants/auth.error.codes.ts
 var AUTH_ERROR_MAPPING = {
@@ -474,57 +306,181 @@ var AUTH_ERROR_MAPPING = {
 var validCodes = Object.keys(AUTH_ERROR_MAPPING);
 
 // src/utils/handle-error.ts
-var handleError = (err, setError, t) => {
-  if (err instanceof AuthError) {
-    let errorCode = "";
-    if (err.code && validCodes.includes(err.code)) {
-      errorCode = err.code;
-    } else if (err.message) {
-      const messageUpper = err.message.toUpperCase().trim();
-      if (validCodes.includes(messageUpper)) {
-        errorCode = messageUpper;
-      }
-    }
-    if (errorCode && AUTH_ERROR_MAPPING[errorCode]) {
-      const mapping = AUTH_ERROR_MAPPING[errorCode];
-      setError({
-        title: mapping.title,
-        description: mapping.description
-      });
-      return;
+function isAuthError(err) {
+  return typeof err === "object" && err !== null && "message" in err && typeof err.message === "string";
+}
+function extractErrorCode(err) {
+  if (err.code && validCodes.includes(err.code)) {
+    return err.code;
+  }
+  if (err.message) {
+    const messageUpper = err.message.toUpperCase().trim();
+    if (validCodes.includes(messageUpper)) {
+      return messageUpper;
     }
+  }
+  return "";
+}
+function handleAuthError(err, setError, t) {
+  const errorCode = extractErrorCode(err);
+  if (errorCode && AUTH_ERROR_MAPPING[errorCode]) {
+    const mapping = AUTH_ERROR_MAPPING[errorCode];
     setError({
-      title: t("errors.fallback"),
-      // or 'Error'
-      description: err.message || t("errors.fallback")
+      title: mapping.title,
+      description: mapping.description
     });
+    return;
+  }
+  setError({
+    title: t("errors.fallback"),
+    description: err.message || t("errors.fallback")
+  });
+}
+function handleGenericError(err, setError, t) {
+  const message = err instanceof Error ? err.message : t("errors.fallback");
+  setError({
+    title: "Error",
+    description: message
+  });
+}
+var handleError = (err, setError, t) => {
+  if (isAuthError(err)) {
+    handleAuthError(err, setError, t);
   } else {
-    const message = err instanceof Error ? err.message : t("errors.fallback");
-    setError({
-      title: "Error",
-      description: message
-    });
+    handleGenericError(err, setError, t);
   }
 };
 
-// src/components/auth/pages/forgot-password-page.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
-var ForgotPasswordPage = ({
-  onNavigate,
-  linkComponent: Link,
-  links,
+// src/components/auth/auth-page-layout.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var AuthPageLayout = ({
+  title,
+  description,
+  children,
+  footer,
   logoImage
 }) => {
-  const t = useTranslations3("Auth.forgotPassword");
-  const { client } = useAuth();
-  const [isLoading, setIsLoading] = useState3(false);
-  const [error, setError] = useState3(null);
-  const signInLink = links?.signIn || "/auth/sign-in";
+  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__ */ 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 }) })
+  ] });
+};
+
+// src/components/auth/forgot-password.tsx
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "@mesob/ui/components/button";
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel
+} from "@mesob/ui/components/field";
+import { Input } from "@mesob/ui/components/input";
+import { Spinner } from "@mesob/ui/components/spinner";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+
+// src/hooks/use-translator.ts
+function useTranslator(namespace) {
+  const { config } = useConfig();
+  return createTranslator(config.messages || {}, namespace);
+}
+
+// src/components/auth/forgot-password.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var forgotPasswordSchema = (t) => z.object({
+  account: z.string().min(1, t("errors.accountRequired"))
+});
+var ForgotPassword = ({
+  onSubmit,
+  isLoading = false
+}) => {
+  const t = useTranslator("Auth.forgotPassword");
+  const form = useForm({
+    resolver: zodResolver(forgotPasswordSchema(t)),
+    defaultValues: {
+      account: ""
+    }
+  });
+  const handleSubmit = form.handleSubmit(async (values) => {
+    await onSubmit(values);
+  });
+  return /* @__PURE__ */ jsxs2("form", { id: "forgot-password-form", onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsx4(FieldGroup, { children: /* @__PURE__ */ jsx4(
+      Controller,
+      {
+        name: "account",
+        control: form.control,
+        render: ({ field, fieldState }) => /* @__PURE__ */ jsxs2(Field, { "data-invalid": fieldState.invalid, children: [
+          /* @__PURE__ */ jsx4(FieldLabel, { htmlFor: "forgot-password-account", children: t("form.accountLabel") }),
+          /* @__PURE__ */ jsx4(
+            Input,
+            {
+              ...field,
+              id: "forgot-password-account",
+              type: "text",
+              placeholder: t("form.accountPlaceholder"),
+              "aria-invalid": fieldState.invalid
+            }
+          ),
+          fieldState.invalid && /* @__PURE__ */ jsx4(FieldError, { errors: [fieldState.error] })
+        ] })
+      }
+    ) }),
+    /* @__PURE__ */ jsx4("div", { className: "mt-4", children: /* @__PURE__ */ jsxs2(
+      Button,
+      {
+        type: "submit",
+        form: "forgot-password-form",
+        className: "w-full",
+        disabled: isLoading,
+        children: [
+          isLoading && /* @__PURE__ */ jsx4(Spinner, {}),
+          isLoading ? t("form.submitting") : t("form.submit")
+        ]
+      }
+    ) })
+  ] });
+};
+
+// src/components/auth/pages/forgot-password-page.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var ForgotPasswordPage = (_props = {}) => {
+  const { hooks } = useApi();
+  const { config } = useConfig();
+  const t = createTranslator(config.messages || {}, "Auth.forgotPassword");
+  const [isLoading, setIsLoading] = useState2(false);
+  const [error, setError] = useState2(null);
+  const forgotPasswordMutation = hooks.useMutation("post", "/password/forgot");
+  const signInLink = config.navigation?.links?.signIn || "/auth/sign-in";
+  const Link = config.navigation?.linkComponent;
+  const onNavigate = config.navigation?.onNavigate || ((path) => {
+    if (typeof window !== "undefined") {
+      window.location.href = path;
+    }
+  });
+  const logoImage = config.ui.logoImage;
+  useEffect2(() => {
+    if (error) {
+      toast.error(error.title || "Error", {
+        description: error.description
+      });
+    }
+  }, [error]);
   const handleSubmit = async (values) => {
     setIsLoading(true);
     setError(null);
     try {
-      const res = await client.forgotPassword({ identifier: values.account });
+      const res = await forgotPasswordMutation.mutateAsync({
+        body: {
+          identifier: values.account
+        }
+      });
       if ("verificationId" in res && res.verificationId) {
         onNavigate(`/auth/reset-password?verificationId=${res.verificationId}`);
       } else {
@@ -541,14 +497,21 @@ var ForgotPasswordPage = ({
   const handleBack = () => {
     onNavigate(signInLink);
   };
-  return /* @__PURE__ */ jsx6(
+  let errorContent = null;
+  if (error) {
+    if (typeof error === "string") {
+      errorContent = { title: "Error", description: error };
+    } else {
+      errorContent = error;
+    }
+  }
+  return /* @__PURE__ */ jsxs3(
     AuthPageLayout,
     {
       title: t("title"),
       description: t("description"),
-      error,
       logoImage,
-      footer: Link ? /* @__PURE__ */ jsx6(Link, { href: signInLink, className: "text-primary hover:underline", children: t("footer.backToSignIn") }) : /* @__PURE__ */ jsx6(
+      footer: Link ? /* @__PURE__ */ jsx5(Link, { href: signInLink, className: "text-primary hover:underline", children: t("footer.backToSignIn") }) : /* @__PURE__ */ jsx5(
         "a",
         {
           href: signInLink,
@@ -560,65 +523,72 @@ var ForgotPasswordPage = ({
           children: t("footer.backToSignIn")
         }
       ),
-      children: /* @__PURE__ */ jsx6(
-        ForgotPassword,
-        {
-          onSubmit: handleSubmit,
-          isLoading,
-          onBack: handleBack
-        }
-      )
+      children: [
+        /* @__PURE__ */ jsx5(
+          ForgotPassword,
+          {
+            onSubmit: handleSubmit,
+            isLoading: isLoading || forgotPasswordMutation.isPending,
+            onBack: handleBack
+          }
+        ),
+        errorContent && /* @__PURE__ */ jsxs3(Alert, { variant: "destructive", className: "mt-4", children: [
+          /* @__PURE__ */ jsx5(IconAlertCircle, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx5(AlertTitle, { children: errorContent.title }),
+          /* @__PURE__ */ jsx5(AlertDescription, { children: errorContent.description })
+        ] })
+      ]
     }
   );
 };
 
 // src/components/auth/pages/reset-password-page.tsx
-import { useTranslations as useTranslations5 } from "next-intl";
-import { useState as useState5 } from "react";
+import {
+  Alert as Alert2,
+  AlertDescription as AlertDescription2,
+  AlertTitle as AlertTitle2
+} from "@mesob/ui/components/alert";
+import { toast as toast2 } from "@mesob/ui/components/sonner";
+import { IconAlertCircle as IconAlertCircle2 } from "@tabler/icons-react";
+import { useEffect as useEffect3, useState as useState4 } from "react";
 
 // src/components/auth/reset-password-form.tsx
 import { zodResolver as zodResolver2 } from "@hookform/resolvers/zod";
-import { Button as Button3 } from "@mesob/ui/components/button";
+import { Button as Button2 } from "@mesob/ui/components/button";
 import {
-  Form as Form2,
-  FormControl as FormControl2,
-  FormField as FormField2,
-  FormItem as FormItem2,
-  FormLabel as FormLabel2,
-  FormMessage as FormMessage2
-} from "@mesob/ui/components/form";
+  Field as Field2,
+  FieldError as FieldError2,
+  FieldGroup as FieldGroup2,
+  FieldLabel as FieldLabel2
+} from "@mesob/ui/components/field";
 import { Input as Input2 } from "@mesob/ui/components/input";
 import {
   InputOTP,
   InputOTPGroup,
   InputOTPSlot
 } from "@mesob/ui/components/input-otp";
-import { Spinner as Spinner3 } from "@mesob/ui/components/spinner";
+import { Spinner as Spinner2 } from "@mesob/ui/components/spinner";
 import { IconEye, IconEyeOff } from "@tabler/icons-react";
-import { useTranslations as useTranslations4 } from "next-intl";
-import { useMemo as useMemo2, useState as useState4 } from "react";
-import { useForm as useForm2 } from "react-hook-form";
+import { useState as useState3 } from "react";
+import { Controller as Controller2, useForm as useForm2 } from "react-hook-form";
 import { z as z2 } from "zod";
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var resetPasswordSchema = (t) => z2.object({
+  code: z2.string().length(6, t("errors.codeLength")),
+  password: z2.string().min(8, t("errors.passwordLength")),
+  confirmPassword: z2.string()
+}).refine((data) => data.password === data.confirmPassword, {
+  message: t("errors.passwordsMismatch"),
+  path: ["confirmPassword"]
+});
 var ResetPasswordForm = ({
   onSubmit,
   isLoading = false
 }) => {
-  const t = useTranslations4("Auth.resetPassword");
-  const [showPassword, setShowPassword] = useState4(false);
-  const resetPasswordSchema = useMemo2(
-    () => z2.object({
-      code: z2.string().length(6, t("errors.codeLength")),
-      password: z2.string().min(8, t("errors.passwordLength")),
-      confirmPassword: z2.string()
-    }).refine((data) => data.password === data.confirmPassword, {
-      message: t("errors.passwordsMismatch"),
-      path: ["confirmPassword"]
-    }),
-    [t]
-  );
+  const t = useTranslator("Auth.resetPassword");
+  const [showPassword, setShowPassword] = useState3(false);
   const form = useForm2({
-    resolver: zodResolver2(resetPasswordSchema),
+    resolver: zodResolver2(resetPasswordSchema(t)),
     defaultValues: {
       code: "",
       password: "",
@@ -628,110 +598,149 @@ var ResetPasswordForm = ({
   const handleSubmit = form.handleSubmit(async (values) => {
     await onSubmit(values);
   });
-  return /* @__PURE__ */ jsx7(Form2, { ...form, children: /* @__PURE__ */ jsxs4("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
-    /* @__PURE__ */ jsx7(
-      FormField2,
-      {
-        control: form.control,
-        name: "code",
-        render: ({ field }) => /* @__PURE__ */ jsxs4(FormItem2, { children: [
-          /* @__PURE__ */ jsx7("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx7(FormLabel2, { children: t("form.codeLabel") }) }),
-          /* @__PURE__ */ jsx7(FormControl2, { children: /* @__PURE__ */ jsx7("div", { className: "flex mt-2 justify-center", children: /* @__PURE__ */ jsx7(InputOTP, { maxLength: 6, ...field, containerClassName: "gap-4", children: /* @__PURE__ */ jsxs4(InputOTPGroup, { className: "gap-3 *:data-[slot=input-otp-slot]:h-12 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:text-xl", children: [
-            /* @__PURE__ */ jsx7(InputOTPSlot, { className: "h-12", index: 0 }),
-            /* @__PURE__ */ jsx7(InputOTPSlot, { className: "h-12", index: 1 }),
-            /* @__PURE__ */ jsx7(InputOTPSlot, { className: "h-12", index: 2 }),
-            /* @__PURE__ */ jsx7(InputOTPSlot, { className: "h-12", index: 3 }),
-            /* @__PURE__ */ jsx7(InputOTPSlot, { className: "h-12", index: 4 }),
-            /* @__PURE__ */ jsx7(InputOTPSlot, { className: "h-12", index: 5 })
-          ] }) }) }) }),
-          /* @__PURE__ */ jsx7(FormMessage2, {})
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsx7(
-      FormField2,
-      {
-        control: form.control,
-        name: "password",
-        render: ({ field }) => /* @__PURE__ */ jsxs4(FormItem2, { children: [
-          /* @__PURE__ */ jsx7(FormLabel2, { children: t("form.passwordLabel") }),
-          /* @__PURE__ */ jsx7(FormControl2, { children: /* @__PURE__ */ jsxs4("div", { className: "relative", children: [
-            /* @__PURE__ */ jsx7(
-              Input2,
-              {
-                type: showPassword ? "text" : "password",
-                placeholder: t("form.passwordPlaceholder"),
-                ...field
-              }
-            ),
-            /* @__PURE__ */ jsx7(
-              "button",
+  return /* @__PURE__ */ jsxs4("form", { id: "reset-password-form", onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsxs4(FieldGroup2, { children: [
+      /* @__PURE__ */ jsx6(
+        Controller2,
+        {
+          name: "code",
+          control: form.control,
+          render: ({ field, fieldState }) => /* @__PURE__ */ jsxs4(Field2, { "data-invalid": fieldState.invalid, children: [
+            /* @__PURE__ */ jsx6("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx6(FieldLabel2, { children: t("form.codeLabel") }) }),
+            /* @__PURE__ */ jsx6("div", { className: "flex mt-2 justify-center", children: /* @__PURE__ */ jsx6(
+              InputOTP,
               {
-                type: "button",
-                onClick: () => setShowPassword(!showPassword),
-                className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
-                children: showPassword ? /* @__PURE__ */ jsx7(IconEyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx7(IconEye, { className: "h-4 w-4" })
+                maxLength: 6,
+                value: field.value,
+                onChange: field.onChange,
+                onBlur: field.onBlur,
+                containerClassName: "gap-4",
+                "aria-invalid": fieldState.invalid,
+                children: /* @__PURE__ */ jsxs4(InputOTPGroup, { className: "gap-3 *:data-[slot=input-otp-slot]:h-12 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:text-xl", children: [
+                  /* @__PURE__ */ jsx6(InputOTPSlot, { className: "h-12", index: 0 }),
+                  /* @__PURE__ */ jsx6(InputOTPSlot, { className: "h-12", index: 1 }),
+                  /* @__PURE__ */ jsx6(InputOTPSlot, { className: "h-12", index: 2 }),
+                  /* @__PURE__ */ jsx6(InputOTPSlot, { className: "h-12", index: 3 }),
+                  /* @__PURE__ */ jsx6(InputOTPSlot, { className: "h-12", index: 4 }),
+                  /* @__PURE__ */ jsx6(InputOTPSlot, { className: "h-12", index: 5 })
+                ] })
               }
-            )
-          ] }) }),
-          /* @__PURE__ */ jsx7(FormMessage2, {})
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsx7(
-      FormField2,
+            ) }),
+            fieldState.invalid && /* @__PURE__ */ jsx6(FieldError2, { errors: [fieldState.error] })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        Controller2,
+        {
+          name: "password",
+          control: form.control,
+          render: ({ field, fieldState }) => /* @__PURE__ */ jsxs4(Field2, { "data-invalid": fieldState.invalid, children: [
+            /* @__PURE__ */ jsx6(FieldLabel2, { htmlFor: "reset-password-password", children: t("form.passwordLabel") }),
+            /* @__PURE__ */ jsxs4("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx6(
+                Input2,
+                {
+                  ...field,
+                  id: "reset-password-password",
+                  type: showPassword ? "text" : "password",
+                  placeholder: t("form.passwordPlaceholder"),
+                  "aria-invalid": fieldState.invalid
+                }
+              ),
+              /* @__PURE__ */ jsx6(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setShowPassword(!showPassword),
+                  className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+                  children: showPassword ? /* @__PURE__ */ jsx6(IconEyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx6(IconEye, { className: "h-4 w-4" })
+                }
+              )
+            ] }),
+            fieldState.invalid && /* @__PURE__ */ jsx6(FieldError2, { errors: [fieldState.error] })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        Controller2,
+        {
+          name: "confirmPassword",
+          control: form.control,
+          render: ({ field, fieldState }) => /* @__PURE__ */ jsxs4(Field2, { "data-invalid": fieldState.invalid, children: [
+            /* @__PURE__ */ jsx6(FieldLabel2, { htmlFor: "reset-password-confirmPassword", children: t("form.confirmPasswordLabel") }),
+            /* @__PURE__ */ jsxs4("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx6(
+                Input2,
+                {
+                  ...field,
+                  id: "reset-password-confirmPassword",
+                  type: showPassword ? "text" : "password",
+                  placeholder: t("form.passwordPlaceholder"),
+                  "aria-invalid": fieldState.invalid
+                }
+              ),
+              /* @__PURE__ */ jsx6(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setShowPassword(!showPassword),
+                  className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+                  children: showPassword ? /* @__PURE__ */ jsx6(IconEyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx6(IconEye, { className: "h-4 w-4" })
+                }
+              )
+            ] }),
+            fieldState.invalid && /* @__PURE__ */ jsx6(FieldError2, { errors: [fieldState.error] })
+          ] })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx6("div", { className: "mt-4", children: /* @__PURE__ */ jsxs4(
+      Button2,
       {
-        control: form.control,
-        name: "confirmPassword",
-        render: ({ field }) => /* @__PURE__ */ jsxs4(FormItem2, { children: [
-          /* @__PURE__ */ jsx7(FormLabel2, { children: t("form.confirmPasswordLabel") }),
-          /* @__PURE__ */ jsx7(FormControl2, { children: /* @__PURE__ */ jsxs4("div", { className: "relative", children: [
-            /* @__PURE__ */ jsx7(
-              Input2,
-              {
-                type: showPassword ? "text" : "password",
-                placeholder: t("form.passwordPlaceholder"),
-                ...field
-              }
-            ),
-            /* @__PURE__ */ jsx7(
-              "button",
-              {
-                type: "button",
-                onClick: () => setShowPassword(!showPassword),
-                className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
-                children: showPassword ? /* @__PURE__ */ jsx7(IconEyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx7(IconEye, { className: "h-4 w-4" })
-              }
-            )
-          ] }) }),
-          /* @__PURE__ */ jsx7(FormMessage2, {})
-        ] })
+        type: "submit",
+        form: "reset-password-form",
+        className: "w-full",
+        disabled: isLoading,
+        children: [
+          isLoading && /* @__PURE__ */ jsx6(Spinner2, {}),
+          isLoading ? t("form.submitting") : t("form.submit")
+        ]
       }
-    ),
-    /* @__PURE__ */ jsxs4(Button3, { type: "submit", className: "w-full", disabled: isLoading, children: [
-      isLoading && /* @__PURE__ */ jsx7(Spinner3, {}),
-      isLoading ? t("form.submitting") : t("form.submit")
-    ] })
-  ] }) });
+    ) })
+  ] });
 };
 
 // src/components/auth/pages/reset-password-page.tsx
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var ResetPasswordPage = ({
   verificationId,
-  onNavigate,
-  linkComponent: Link,
-  links,
-  logoImage,
   redirectUrl
 }) => {
-  const t = useTranslations5("Auth.resetPassword");
-  const common = useTranslations5("Common");
-  const { client, refresh } = useAuth();
-  const [isLoading, setIsLoading] = useState5(false);
-  const [error, setError] = useState5(null);
-  const signInLink = links?.signIn || "/auth/sign-in";
-  const forgotPasswordLink = links?.forgotPassword || "/auth/forgot-password";
+  const { hooks, refresh } = useApi();
+  const { config } = useConfig();
+  const t = createTranslator(config.messages || {}, "Auth.resetPassword");
+  const common = createTranslator(config.messages || {}, "Common");
+  const [isLoading, setIsLoading] = useState4(false);
+  const [error, setError] = useState4(null);
+  const resetPasswordMutation = hooks.useMutation("post", "/password/reset");
+  const signInLink = config.navigation?.links?.signIn || "/auth/sign-in";
+  const forgotPasswordLink = config.navigation?.links?.forgotPassword || "/auth/forgot-password";
+  const Link = config.navigation?.linkComponent;
+  const onNavigate = config.navigation?.onNavigate || ((path) => {
+    if (typeof window !== "undefined") {
+      window.location.href = path;
+    }
+  });
+  const logoImage = config.ui.logoImage;
+  const defaultRedirect = redirectUrl || config.navigation?.defaultRedirectUrl || "/";
+  useEffect3(() => {
+    if (error) {
+      toast2.error(error.title || "Error", {
+        description: error.description
+      });
+    }
+  }, [error]);
   const handleSubmit = async (values) => {
     if (!verificationId) {
       setError({
@@ -743,13 +752,15 @@ var ResetPasswordPage = ({
     setIsLoading(true);
     setError(null);
     try {
-      await client.resetPassword({
-        verificationId,
-        code: values.code,
-        password: values.password
+      await resetPasswordMutation.mutateAsync({
+        body: {
+          verificationId,
+          code: values.code,
+          password: values.password
+        }
       });
       await refresh();
-      onNavigate(redirectUrl || "/");
+      onNavigate(defaultRedirect);
     } catch (err) {
       handleError(err, setError, t);
     } finally {
@@ -757,20 +768,20 @@ var ResetPasswordPage = ({
     }
   };
   if (!verificationId) {
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx7(
       AuthPageLayout,
       {
         title: common("invalidLinkTitle"),
         description: common("invalidLinkDescription"),
         logoImage,
-        footer: Link ? /* @__PURE__ */ jsx8(
+        footer: Link ? /* @__PURE__ */ jsx7(
           Link,
           {
             href: forgotPasswordLink,
             className: "text-primary hover:underline",
             children: t("footer.requestNew")
           }
-        ) : /* @__PURE__ */ jsx8(
+        ) : /* @__PURE__ */ jsx7(
           "a",
           {
             href: forgotPasswordLink,
@@ -782,20 +793,27 @@ var ResetPasswordPage = ({
             children: t("footer.requestNew")
           }
         ),
-        children: /* @__PURE__ */ jsx8("div", {})
+        children: /* @__PURE__ */ jsx7("div", {})
       }
     );
   }
-  return /* @__PURE__ */ jsx8(
+  let errorContent = null;
+  if (error) {
+    if (typeof error === "string") {
+      errorContent = { title: "Error", description: error };
+    } else {
+      errorContent = error;
+    }
+  }
+  return /* @__PURE__ */ jsxs5(
     AuthPageLayout,
     {
       title: t("title"),
       description: t("description"),
-      error,
       logoImage,
       footer: Link ? /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between w-full gap-2", children: [
-        /* @__PURE__ */ jsx8(Link, { href: signInLink, className: "text-primary hover:underline", children: t("footer.backToSignIn") }),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx7(Link, { href: signInLink, className: "text-primary hover:underline", children: t("footer.backToSignIn") }),
+        /* @__PURE__ */ jsx7(
           Link,
           {
             href: forgotPasswordLink,
@@ -804,7 +822,7 @@ var ResetPasswordPage = ({
           }
         )
       ] }) : /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between w-full gap-2", children: [
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx7(
           "a",
           {
             href: forgotPasswordLink,
@@ -816,7 +834,7 @@ var ResetPasswordPage = ({
             children: t("footer.backToSignIn")
           }
         ),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx7(
           "a",
           {
             href: forgotPasswordLink,
@@ -829,40 +847,50 @@ var ResetPasswordPage = ({
           }
         )
       ] }),
-      children: /* @__PURE__ */ jsx8(
-        ResetPasswordForm,
-        {
-          verificationId,
-          onSubmit: handleSubmit,
-          isLoading,
-          error
-        }
-      )
+      children: [
+        /* @__PURE__ */ jsx7(
+          ResetPasswordForm,
+          {
+            verificationId,
+            onSubmit: handleSubmit,
+            isLoading: isLoading || resetPasswordMutation.isPending,
+            error
+          }
+        ),
+        errorContent && /* @__PURE__ */ jsxs5(Alert2, { variant: "destructive", className: "mt-4", children: [
+          /* @__PURE__ */ jsx7(IconAlertCircle2, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx7(AlertTitle2, { children: errorContent.title }),
+          /* @__PURE__ */ jsx7(AlertDescription2, { children: errorContent.description })
+        ] })
+      ]
     }
   );
 };
 
 // src/components/auth/pages/sign-in-page.tsx
-import { useTranslations as useTranslations7 } from "next-intl";
-import { useState as useState7 } from "react";
+import {
+  Alert as Alert3,
+  AlertDescription as AlertDescription3,
+  AlertTitle as AlertTitle3
+} from "@mesob/ui/components/alert";
+import { toast as toast3 } from "@mesob/ui/components/sonner";
+import { IconAlertCircle as IconAlertCircle3 } from "@tabler/icons-react";
+import { useEffect as useEffect5, useState as useState6 } from "react";
 
 // src/components/auth/sign-in.tsx
 import { zodResolver as zodResolver3 } from "@hookform/resolvers/zod";
-import { Button as Button4 } from "@mesob/ui/components/button";
+import { Button as Button3 } from "@mesob/ui/components/button";
 import {
-  Form as Form3,
-  FormControl as FormControl3,
-  FormField as FormField3,
-  FormItem as FormItem3,
-  FormLabel as FormLabel3,
-  FormMessage as FormMessage3
-} from "@mesob/ui/components/form";
+  Field as Field3,
+  FieldError as FieldError3,
+  FieldGroup as FieldGroup3,
+  FieldLabel as FieldLabel3
+} from "@mesob/ui/components/field";
 import { Input as Input3 } from "@mesob/ui/components/input";
-import { Spinner as Spinner4 } from "@mesob/ui/components/spinner";
+import { Spinner as Spinner3 } from "@mesob/ui/components/spinner";
 import { IconEye as IconEye2, IconEyeOff as IconEyeOff2 } from "@tabler/icons-react";
-import { useTranslations as useTranslations6 } from "next-intl";
-import { useMemo as useMemo3, useState as useState6 } from "react";
-import { useForm as useForm3 } from "react-hook-form";
+import { useEffect as useEffect4, useState as useState5 } from "react";
+import { Controller as Controller3, useForm as useForm3 } from "react-hook-form";
 import { z as z3 } from "zod";
 
 // src/utils/normalize-phone.ts
@@ -884,183 +912,256 @@ function normalizePhone(phone) {
 }
 
 // src/components/auth/sign-in.tsx
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var identifierSchema = (t) => z3.object({
+  identifier: z3.string().trim().min(1, { message: t("errors.requiredField") }).refine(
+    (val) => {
+      const isEmail = z3.email().safeParse(val).success;
+      const phoneRegex = /^(\+2519|2519|09)\d{8}$/;
+      const isPhone4 = phoneRegex.test(val);
+      return isEmail || isPhone4;
+    },
+    {
+      message: t("errors.invalidEmailOrPhone")
+    }
+  )
+});
+var passwordSchema = (t) => z3.object({
+  password: z3.string().min(8, t("errors.passwordLength")).max(128, t("errors.longPasswordError"))
+});
 var SignIn = ({
   onSubmit,
   isLoading = false,
-  identifier = "",
+  identifier: initialIdentifier = "",
   step = "identifier",
   onBack: _onBack
 }) => {
-  const t = useTranslations6("Auth.signIn");
-  const [showPassword, setShowPassword] = useState6(false);
-  const identifierSchema = useMemo3(
-    () => z3.object({
-      account: z3.string().trim().min(1, { message: t("errors.requiredField") }).refine(
-        (val) => {
-          const isEmail = z3.string().email().safeParse(val).success;
-          const phoneRegex = /^(\+2519|2519|09)\d{8}$/;
-          const isPhone4 = phoneRegex.test(val);
-          return isEmail || isPhone4;
-        },
-        {
-          message: t("errors.invalidEmailOrPhone")
-        }
-      )
-    }),
-    [t]
-  );
-  const passwordSchema = useMemo3(
-    () => z3.object({
-      password: z3.string().min(8, t("errors.passwordLength")).max(128, t("errors.longPasswordError"))
-    }),
-    [t]
-  );
+  const { hooks } = useApi();
+  const t = useTranslator("Auth.signIn");
+  const [showPassword, setShowPassword] = useState5(false);
+  const [currentIdentifier, setCurrentIdentifier] = useState5(initialIdentifier);
   const identifierForm = useForm3({
-    resolver: zodResolver3(identifierSchema),
+    resolver: zodResolver3(identifierSchema(t)),
     defaultValues: {
-      account: identifier
-    }
+      identifier: initialIdentifier
+    },
+    mode: "onChange"
   });
   const passwordForm = useForm3({
-    resolver: zodResolver3(passwordSchema),
+    resolver: zodResolver3(passwordSchema(t)),
     defaultValues: {
       password: ""
-    }
+    },
+    mode: "onChange"
   });
-  const handleIdentifierSubmit = identifierForm.handleSubmit(async (values) => {
+  const signInMutation = hooks.useMutation("post", "/sign-in");
+  useEffect4(() => {
+    if (initialIdentifier) {
+      identifierForm.setValue("identifier", initialIdentifier);
+      setCurrentIdentifier(initialIdentifier);
+    }
+  }, [initialIdentifier, identifierForm]);
+  const handleIdentifierSubmit = async (values) => {
     const phoneRegex = /^(\+2519|2519|09)\d{8}$/;
-    const normalizedAccount = phoneRegex.test(values.account) ? normalizePhone(values.account) : values.account;
-    await onSubmit({ account: normalizedAccount, password: "" }, "identifier");
-  });
-  const handlePasswordSubmit = passwordForm.handleSubmit(async (values) => {
+    const normalizedIdentifier = phoneRegex.test(values.identifier) ? normalizePhone(values.identifier) : values.identifier;
+    setCurrentIdentifier(normalizedIdentifier);
+    identifierForm.setValue("identifier", normalizedIdentifier);
     await onSubmit(
-      { account: identifier, password: values.password },
-      "password"
+      { identifier: normalizedIdentifier, password: "" },
+      "identifier"
     );
-  });
-  if (step === "password") {
-    return /* @__PURE__ */ jsx9(Form3, { ...passwordForm, children: /* @__PURE__ */ jsxs6("form", { onSubmit: handlePasswordSubmit, className: "space-y-4", children: [
-      /* @__PURE__ */ jsxs6("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx9("p", { className: "text-sm text-muted-foreground mb-2", children: t("form.enterPasswordFor") }),
-        /* @__PURE__ */ jsx9("p", { className: "font-bold", children: identifier })
-      ] }),
-      /* @__PURE__ */ jsx9(
-        FormField3,
+  };
+  const handlePasswordSubmit = async (values) => {
+    try {
+      await signInMutation.mutateAsync({
+        body: {
+          identifier: currentIdentifier || identifierForm.getValues("identifier"),
+          password: values.password
+        }
+      });
+      await onSubmit(
         {
-          control: passwordForm.control,
-          name: "password",
-          render: ({ field }) => /* @__PURE__ */ jsxs6(FormItem3, { children: [
-            /* @__PURE__ */ jsx9(FormLabel3, { children: t("form.passwordLabel") }),
-            /* @__PURE__ */ jsx9(FormControl3, { children: /* @__PURE__ */ jsxs6("div", { className: "relative", children: [
-              /* @__PURE__ */ jsx9(
+          identifier: currentIdentifier || identifierForm.getValues("identifier"),
+          password: values.password
+        },
+        "password"
+      );
+    } catch {
+      await onSubmit(
+        {
+          identifier: currentIdentifier || identifierForm.getValues("identifier"),
+          password: values.password
+        },
+        "password"
+      );
+    }
+  };
+  const isPasswordStep = step === "password";
+  const isSubmitting = isLoading || signInMutation.isPending;
+  if (isPasswordStep) {
+    return /* @__PURE__ */ jsxs6(
+      "form",
+      {
+        id: "sign-in-password-form",
+        onSubmit: passwordForm.handleSubmit(handlePasswordSubmit),
+        children: [
+          /* @__PURE__ */ jsxs6(FieldGroup3, { children: [
+            /* @__PURE__ */ jsxs6("div", { className: "text-center", children: [
+              /* @__PURE__ */ jsx8("p", { className: "text-sm text-muted-foreground mb-2", children: t("form.enterPasswordFor") }),
+              /* @__PURE__ */ jsx8("p", { className: "font-bold", children: currentIdentifier || identifierForm.getValues("identifier") })
+            ] }),
+            /* @__PURE__ */ jsx8(
+              Controller3,
+              {
+                name: "password",
+                control: passwordForm.control,
+                render: ({ field, fieldState }) => /* @__PURE__ */ jsxs6(Field3, { "data-invalid": fieldState.invalid, children: [
+                  /* @__PURE__ */ jsx8(FieldLabel3, { htmlFor: "sign-in-password", children: t("form.passwordLabel") }),
+                  /* @__PURE__ */ jsxs6("div", { className: "relative", children: [
+                    /* @__PURE__ */ jsx8(
+                      Input3,
+                      {
+                        ...field,
+                        id: "sign-in-password",
+                        type: showPassword ? "text" : "password",
+                        placeholder: t("form.passwordPlaceholder"),
+                        autoComplete: "current-password",
+                        "aria-invalid": fieldState.invalid
+                      }
+                    ),
+                    /* @__PURE__ */ jsx8(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => setShowPassword(!showPassword),
+                        className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+                        children: showPassword ? /* @__PURE__ */ jsx8(IconEyeOff2, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx8(IconEye2, { className: "h-4 w-4" })
+                      }
+                    )
+                  ] }),
+                  fieldState.invalid && /* @__PURE__ */ jsx8(FieldError3, { errors: [fieldState.error] })
+                ] })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx8("div", { className: "mt-4", children: /* @__PURE__ */ jsxs6(Button3, { type: "submit", className: "w-full", disabled: isSubmitting, children: [
+            isSubmitting && /* @__PURE__ */ jsx8(Spinner3, {}),
+            isSubmitting ? t("form.submitting") : t("form.submit")
+          ] }) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs6(
+    "form",
+    {
+      id: "sign-in-identifier-form",
+      onSubmit: identifierForm.handleSubmit(handleIdentifierSubmit),
+      children: [
+        /* @__PURE__ */ jsx8(FieldGroup3, { children: /* @__PURE__ */ jsx8(
+          Controller3,
+          {
+            name: "identifier",
+            control: identifierForm.control,
+            render: ({ field, fieldState }) => /* @__PURE__ */ jsxs6(Field3, { "data-invalid": fieldState.invalid, children: [
+              /* @__PURE__ */ jsx8(FieldLabel3, { htmlFor: "sign-in-identifier", children: t("form.accountLabel") }),
+              /* @__PURE__ */ jsx8(
                 Input3,
                 {
-                  type: showPassword ? "text" : "password",
-                  placeholder: t("form.passwordPlaceholder"),
-                  autoComplete: "current-password",
-                  ...field
+                  ...field,
+                  id: "sign-in-identifier",
+                  type: "text",
+                  placeholder: t("form.accountPlaceholder"),
+                  autoComplete: "username",
+                  "aria-invalid": fieldState.invalid
                 }
               ),
-              /* @__PURE__ */ jsx9(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => setShowPassword(!showPassword),
-                  className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
-                  children: showPassword ? /* @__PURE__ */ jsx9(IconEyeOff2, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx9(IconEye2, { className: "h-4 w-4" })
-                }
-              )
-            ] }) }),
-            /* @__PURE__ */ jsx9(FormMessage3, {})
-          ] })
-        }
-      ),
-      /* @__PURE__ */ jsx9(Button4, { type: "submit", className: "w-full", disabled: isLoading, children: isLoading ? t("form.submitting") : t("form.submit") })
-    ] }) });
-  }
-  return /* @__PURE__ */ jsx9(Form3, { ...identifierForm, children: /* @__PURE__ */ jsxs6("form", { onSubmit: handleIdentifierSubmit, className: "space-y-4", children: [
-    /* @__PURE__ */ jsx9(
-      FormField3,
-      {
-        control: identifierForm.control,
-        name: "account",
-        render: ({ field }) => /* @__PURE__ */ jsxs6(FormItem3, { children: [
-          /* @__PURE__ */ jsx9(FormLabel3, { children: t("form.accountLabel") }),
-          /* @__PURE__ */ jsx9(FormControl3, { children: /* @__PURE__ */ jsx9(
-            Input3,
-            {
-              type: "text",
-              placeholder: t("form.accountPlaceholder"),
-              ...field
-            }
-          ) }),
-          /* @__PURE__ */ jsx9(FormMessage3, {})
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsxs6(Button4, { type: "submit", className: "w-full", disabled: isLoading, children: [
-      isLoading && /* @__PURE__ */ jsx9(Spinner4, {}),
-      isLoading ? t("form.submitting") : t("form.continue")
-    ] })
-  ] }) });
+              fieldState.invalid && /* @__PURE__ */ jsx8(FieldError3, { errors: [fieldState.error] })
+            ] })
+          }
+        ) }),
+        /* @__PURE__ */ jsx8("div", { className: "mt-4", children: /* @__PURE__ */ jsxs6(Button3, { type: "submit", className: "w-full", disabled: isSubmitting, children: [
+          isSubmitting && /* @__PURE__ */ jsx8(Spinner3, {}),
+          isSubmitting ? t("form.submitting") : t("form.continue")
+        ] }) })
+      ]
+    }
+  );
 };
 
 // src/components/auth/pages/sign-in-page.tsx
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var isPhone = (s) => /^\+?[0-9()[\]\s-]{6,}$/.test(s);
-var SignInPage = ({
-  redirectUrl,
-  onNavigate,
-  linkComponent: Link,
-  links,
-  logoImage
-}) => {
-  const t = useTranslations7("Auth.signIn");
-  const { client, setAuth } = useAuth();
-  const [isLoading, setIsLoading] = useState7(false);
-  const [error, setError] = useState7(null);
-  const [step, setStep] = useState7("identifier");
-  const [identifier, setIdentifier] = useState7("");
-  const defaultRedirect = redirectUrl || "/dashboard";
-  const forgotPasswordLink = links?.forgotPassword || "/auth/forgot-password";
-  const signUpLink = links?.signUp || "/auth/sign-up";
+var SignInPage = ({ redirectUrl } = {}) => {
+  const { hooks, setAuth } = useApi();
+  const { config } = useConfig();
+  const t = createTranslator(config.messages || {}, "Auth.signIn");
+  const [isLoading, setIsLoading] = useState6(false);
+  const [error, setError] = useState6(null);
+  const [step, setStep] = useState6("identifier");
+  const [identifier, setIdentifier] = useState6("");
+  const checkUserMutation = hooks.useMutation("post", "/check-user");
+  const signInMutation = hooks.useMutation("post", "/sign-in");
+  const defaultRedirect = redirectUrl || config.navigation?.defaultRedirectUrl || "/dashboard";
+  const forgotPasswordLink = config.navigation?.links?.forgotPassword || "/auth/forgot-password";
+  const signUpLink = config.navigation?.links?.signUp || "/auth/sign-up";
+  const Link = config.navigation?.linkComponent;
+  const onNavigate = config.navigation?.onNavigate || ((path) => {
+    if (typeof window !== "undefined") {
+      window.location.href = path;
+    }
+  });
+  const logoImage = config.ui.logoImage;
+  useEffect5(() => {
+    if (error) {
+      toast3.error(error.title || "Error", {
+        description: error.description
+      });
+    }
+  }, [error]);
+  const handleIdentifierStep = async (identifierValue) => {
+    const checkResult = await checkUserMutation.mutateAsync({
+      body: {
+        identifier: identifierValue
+      }
+    });
+    if (checkResult.exists) {
+      setIdentifier(identifierValue);
+      setStep("password");
+      return;
+    }
+    const email = isPhone(identifierValue) ? "" : identifierValue;
+    if (email) {
+      onNavigate(`${signUpLink}?email=${encodeURIComponent(email)}`);
+    } else {
+      onNavigate(`${signUpLink}?phone=${encodeURIComponent(identifierValue)}`);
+    }
+  };
+  const handlePasswordStep = async (passwordValue) => {
+    const res = await signInMutation.mutateAsync({
+      body: {
+        identifier,
+        password: passwordValue
+      }
+    });
+    if ("verificationId" in res && res.verificationId) {
+      const verifyPath = isPhone(identifier) ? `/auth/verify-phone?context=sign-in&verificationId=${res.verificationId}&identifier=${encodeURIComponent(identifier)}` : `/auth/verify-email?verificationId=${res.verificationId}`;
+      onNavigate(verifyPath);
+      return;
+    }
+    if ("user" in res && "session" in res) {
+      setAuth(res);
+    }
+    onNavigate(defaultRedirect);
+  };
   const handleSubmit = async (values, currentStep) => {
     setIsLoading(true);
     setError(null);
     try {
       if (currentStep === "identifier") {
-        const checkResult = await client.checkUser({
-          identifier: values.account
-        });
-        if (checkResult.exists) {
-          setIdentifier(values.account);
-          setStep("password");
-        } else {
-          const email = isPhone(values.account) ? "" : values.account;
-          if (email) {
-            onNavigate(`${signUpLink}?email=${encodeURIComponent(email)}`);
-          } else {
-            onNavigate(
-              `${signUpLink}?phone=${encodeURIComponent(values.account)}`
-            );
-          }
-          return;
-        }
+        await handleIdentifierStep(values.identifier);
       } else {
-        const res = await client.signInWithPassword({
-          identifier,
-          password: values.password
-        });
-        if ("verificationId" in res && res.verificationId) {
-          const verifyPath = isPhone(identifier) ? `/auth/verify-phone?context=sign-in&verificationId=${res.verificationId}&identifier=${encodeURIComponent(identifier)}` : `/auth/verify-email?verificationId=${res.verificationId}`;
-          onNavigate(verifyPath);
-          return;
-        }
-        if ("user" in res && "session" in res) {
-          setAuth(res);
-        }
-        onNavigate(defaultRedirect);
+        await handlePasswordStep(values.password || "");
       }
     } catch (err) {
       handleError(err, setError, t);
@@ -1068,18 +1169,26 @@ var SignInPage = ({
       setIsLoading(false);
     }
   };
+  const isSubmitting = isLoading || checkUserMutation.isPending || signInMutation.isPending;
   const handleBack = () => {
     setStep("identifier");
     setIdentifier("");
     setError(null);
   };
   const isStepPassword = step === "password";
-  return /* @__PURE__ */ jsx10("div", { className: "space-y-4", children: /* @__PURE__ */ jsx10(
+  let errorContent = null;
+  if (error) {
+    if (typeof error === "string") {
+      errorContent = { title: "Error", description: error };
+    } else {
+      errorContent = error;
+    }
+  }
+  return /* @__PURE__ */ jsx9("div", { className: "space-y-4", children: /* @__PURE__ */ jsxs7(
     AuthPageLayout,
     {
       title: t("title"),
       description: isStepPassword ? void 0 : t("description"),
-      error,
       logoImage,
       footer: /* @__PURE__ */ jsxs7(
         "div",
@@ -1090,7 +1199,7 @@ var SignInPage = ({
           },
           children: [
             isStepPassword && // biome-ignore lint/a11y/useKeyWithClickEvents: change account
-            /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx9(
               "p",
               {
                 className: "text-primary inline-block cursor-pointer hover:underline",
@@ -1098,14 +1207,14 @@ var SignInPage = ({
                 children: t("changeAccount")
               }
             ),
-            Link ? /* @__PURE__ */ jsx10(
+            Link ? /* @__PURE__ */ jsx9(
               Link,
               {
                 href: forgotPasswordLink,
                 className: "text-primary inline-block hover:underline",
                 children: t("footer.forgotPassword")
               }
-            ) : /* @__PURE__ */ jsx10(
+            ) : /* @__PURE__ */ jsx9(
               "a",
               {
                 href: forgotPasswordLink,
@@ -1116,75 +1225,82 @@ var SignInPage = ({
           ]
         }
       ),
-      children: /* @__PURE__ */ jsx10(
-        SignIn,
-        {
-          onSubmit: handleSubmit,
-          isLoading,
-          identifier,
-          step
-        }
-      )
+      children: [
+        /* @__PURE__ */ jsx9(
+          SignIn,
+          {
+            onSubmit: handleSubmit,
+            isLoading: isSubmitting,
+            identifier,
+            step
+          }
+        ),
+        errorContent && /* @__PURE__ */ jsxs7(Alert3, { variant: "destructive", className: "mt-4", children: [
+          /* @__PURE__ */ jsx9(IconAlertCircle3, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx9(AlertTitle3, { children: errorContent.title }),
+          /* @__PURE__ */ jsx9(AlertDescription3, { children: errorContent.description })
+        ] })
+      ]
     }
   ) });
 };
 
 // src/components/auth/pages/sign-up-page.tsx
-import { useTranslations as useTranslations9 } from "next-intl";
-import { useState as useState9 } from "react";
+import {
+  Alert as Alert4,
+  AlertDescription as AlertDescription4,
+  AlertTitle as AlertTitle4
+} from "@mesob/ui/components/alert";
+import { toast as toast4 } from "@mesob/ui/components/sonner";
+import { IconAlertCircle as IconAlertCircle4 } from "@tabler/icons-react";
+import { useEffect as useEffect7, useState as useState8 } from "react";
 
 // src/components/auth/sign-up.tsx
 import { zodResolver as zodResolver4 } from "@hookform/resolvers/zod";
-import { Button as Button5 } from "@mesob/ui/components/button";
+import { Button as Button4 } from "@mesob/ui/components/button";
 import {
-  Form as Form4,
-  FormControl as FormControl4,
-  FormField as FormField4,
-  FormItem as FormItem4,
-  FormLabel as FormLabel4,
-  FormMessage as FormMessage4
-} from "@mesob/ui/components/form";
+  Field as Field4,
+  FieldError as FieldError4,
+  FieldGroup as FieldGroup4,
+  FieldLabel as FieldLabel4
+} from "@mesob/ui/components/field";
 import { Input as Input4 } from "@mesob/ui/components/input";
 import { IconEye as IconEye3, IconEyeOff as IconEyeOff3 } from "@tabler/icons-react";
-import { useTranslations as useTranslations8 } from "next-intl";
-import { useEffect as useEffect3, useMemo as useMemo4, useState as useState8 } from "react";
-import { useForm as useForm4 } from "react-hook-form";
+import { useEffect as useEffect6, useState as useState7 } from "react";
+import { Controller as Controller4, useForm as useForm4 } from "react-hook-form";
 import { z as z4 } from "zod";
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 var isPhone2 = (s) => /^\+?[0-9()[\]\s-]{6,}$/.test(s);
+var signUpSchema = (t) => z4.object({
+  fullName: z4.string().min(1, t("errors.fullNameRequired")),
+  identifier: z4.string().min(1, t("errors.contactRequired")).refine(
+    (val) => {
+      if (!val) {
+        return false;
+      }
+      return val.includes("@") || isPhone2(val);
+    },
+    {
+      message: t("errors.invalidEmailOrPhone")
+    }
+  ),
+  password: z4.string().min(8, t("errors.passwordLength")).max(128, t("errors.longPasswordError")),
+  confirmPassword: z4.string()
+}).refine((data) => data.password === data.confirmPassword, {
+  message: t("errors.passwordsMismatch"),
+  path: ["confirmPassword"]
+});
 var SignUp = ({
   onSubmit,
   isLoading = false,
   initialIdentifier
 }) => {
-  const t = useTranslations8("Auth.signUp");
+  const t = useTranslator("Auth.signUp");
   const hasInitialIdentifier = !!initialIdentifier;
-  const [showPassword, setShowPassword] = useState8(false);
-  const [showConfirmPassword, setShowConfirmPassword] = useState8(false);
-  const signUpSchema = useMemo4(
-    () => z4.object({
-      fullName: z4.string().min(1, t("errors.fullNameRequired")),
-      identifier: z4.string().min(1, t("errors.contactRequired")).refine(
-        (val) => {
-          if (!val) {
-            return false;
-          }
-          return val.includes("@") || isPhone2(val);
-        },
-        {
-          message: t("errors.invalidEmailOrPhone")
-        }
-      ),
-      password: z4.string().min(8, t("errors.passwordLength")).max(128, t("errors.longPasswordError")),
-      confirmPassword: z4.string()
-    }).refine((data) => data.password === data.confirmPassword, {
-      message: t("errors.passwordsMismatch"),
-      path: ["confirmPassword"]
-    }),
-    [t]
-  );
+  const [showPassword, setShowPassword] = useState7(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState7(false);
   const form = useForm4({
-    resolver: zodResolver4(signUpSchema),
+    resolver: zodResolver4(signUpSchema(t)),
     defaultValues: {
       fullName: "",
       identifier: initialIdentifier || "",
@@ -1192,7 +1308,7 @@ var SignUp = ({
       confirmPassword: ""
     }
   });
-  useEffect3(() => {
+  useEffect6(() => {
     if (initialIdentifier) {
       form.setValue("identifier", initialIdentifier);
     }
@@ -1210,135 +1326,182 @@ var SignUp = ({
     return t("form.phoneLabel");
   };
   const identifierLabel = getIdentifierLabel();
-  return /* @__PURE__ */ jsx11(Form4, { ...form, children: /* @__PURE__ */ jsxs8("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
-    /* @__PURE__ */ jsx11(
-      FormField4,
-      {
-        control: form.control,
-        name: "fullName",
-        render: ({ field }) => /* @__PURE__ */ jsxs8(FormItem4, { children: [
-          /* @__PURE__ */ jsx11(FormLabel4, { children: t("form.fullNameLabel") }),
-          /* @__PURE__ */ jsx11(FormControl4, { children: /* @__PURE__ */ jsx11(Input4, { placeholder: t("form.fullNamePlaceholder"), ...field }) }),
-          /* @__PURE__ */ jsx11(FormMessage4, {})
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsx11(
-      FormField4,
-      {
-        control: form.control,
-        name: "identifier",
-        render: ({ field }) => /* @__PURE__ */ jsxs8(FormItem4, { children: [
-          /* @__PURE__ */ jsx11(FormLabel4, { className: hasInitialIdentifier ? "block" : void 0, children: identifierLabel }),
-          /* @__PURE__ */ jsx11(FormControl4, { children: /* @__PURE__ */ jsx11(
-            Input4,
-            {
-              type: field.value.includes("@") ? "email" : "tel",
-              placeholder: hasInitialIdentifier ? void 0 : t("form.accountPlaceholder") || "Email or phone number",
-              ...field,
-              disabled: hasInitialIdentifier
-            }
-          ) }),
-          /* @__PURE__ */ jsx11(FormMessage4, {})
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsx11(
-      FormField4,
-      {
-        control: form.control,
-        name: "password",
-        render: ({ field }) => /* @__PURE__ */ jsxs8(FormItem4, { children: [
-          /* @__PURE__ */ jsx11(FormLabel4, { children: t("form.passwordLabel") }),
-          /* @__PURE__ */ jsx11(FormControl4, { children: /* @__PURE__ */ jsxs8("div", { className: "relative", children: [
-            /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsxs8("form", { id: "sign-up-form", onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsxs8(FieldGroup4, { children: [
+      /* @__PURE__ */ jsx10(
+        Controller4,
+        {
+          name: "fullName",
+          control: form.control,
+          render: ({ field, fieldState }) => /* @__PURE__ */ jsxs8(Field4, { "data-invalid": fieldState.invalid, children: [
+            /* @__PURE__ */ jsx10(FieldLabel4, { htmlFor: "sign-up-fullName", children: t("form.fullNameLabel") }),
+            /* @__PURE__ */ jsx10(
               Input4,
               {
-                type: showPassword ? "text" : "password",
-                placeholder: t("form.passwordPlaceholder"),
-                ...field
+                ...field,
+                id: "sign-up-fullName",
+                placeholder: t("form.fullNamePlaceholder"),
+                "aria-invalid": fieldState.invalid
               }
             ),
-            /* @__PURE__ */ jsx11(
-              "button",
+            fieldState.invalid && /* @__PURE__ */ jsx10(FieldError4, { errors: [fieldState.error] })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx10(
+        Controller4,
+        {
+          name: "identifier",
+          control: form.control,
+          render: ({ field, fieldState }) => /* @__PURE__ */ jsxs8(Field4, { "data-invalid": fieldState.invalid, children: [
+            /* @__PURE__ */ jsx10(
+              FieldLabel4,
               {
-                type: "button",
-                onClick: () => setShowPassword(!showPassword),
-                className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
-                children: showPassword ? /* @__PURE__ */ jsx11(IconEyeOff3, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx11(IconEye3, { className: "h-4 w-4" })
+                htmlFor: "sign-up-identifier",
+                className: hasInitialIdentifier ? "block" : void 0,
+                children: identifierLabel
               }
-            )
-          ] }) }),
-          /* @__PURE__ */ jsx11(FormMessage4, {})
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsx11(
-      FormField4,
-      {
-        control: form.control,
-        name: "confirmPassword",
-        render: ({ field }) => /* @__PURE__ */ jsxs8(FormItem4, { children: [
-          /* @__PURE__ */ jsx11(FormLabel4, { children: t("form.confirmPasswordLabel") }),
-          /* @__PURE__ */ jsx11(FormControl4, { children: /* @__PURE__ */ jsxs8("div", { className: "relative", children: [
-            /* @__PURE__ */ jsx11(
+            ),
+            /* @__PURE__ */ jsx10(
               Input4,
               {
-                type: showConfirmPassword ? "text" : "password",
-                placeholder: t("form.passwordPlaceholder"),
-                ...field
+                ...field,
+                id: "sign-up-identifier",
+                type: field.value.includes("@") ? "email" : "tel",
+                placeholder: hasInitialIdentifier ? void 0 : t("form.accountPlaceholder") || "Email or phone number",
+                disabled: hasInitialIdentifier,
+                "aria-invalid": fieldState.invalid
               }
             ),
-            /* @__PURE__ */ jsx11(
-              "button",
-              {
-                type: "button",
-                onClick: () => setShowConfirmPassword(!showConfirmPassword),
-                className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
-                children: showConfirmPassword ? /* @__PURE__ */ jsx11(IconEyeOff3, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx11(IconEye3, { className: "h-4 w-4" })
-              }
-            )
-          ] }) }),
-          /* @__PURE__ */ jsx11(FormMessage4, {})
-        ] })
+            fieldState.invalid && /* @__PURE__ */ jsx10(FieldError4, { errors: [fieldState.error] })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx10(
+        Controller4,
+        {
+          name: "password",
+          control: form.control,
+          render: ({ field, fieldState }) => /* @__PURE__ */ jsxs8(Field4, { "data-invalid": fieldState.invalid, children: [
+            /* @__PURE__ */ jsx10(FieldLabel4, { htmlFor: "sign-up-password", children: t("form.passwordLabel") }),
+            /* @__PURE__ */ jsxs8("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx10(
+                Input4,
+                {
+                  ...field,
+                  id: "sign-up-password",
+                  type: showPassword ? "text" : "password",
+                  placeholder: t("form.passwordPlaceholder"),
+                  "aria-invalid": fieldState.invalid
+                }
+              ),
+              /* @__PURE__ */ jsx10(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setShowPassword(!showPassword),
+                  className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+                  children: showPassword ? /* @__PURE__ */ jsx10(IconEyeOff3, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx10(IconEye3, { className: "h-4 w-4" })
+                }
+              )
+            ] }),
+            fieldState.invalid && /* @__PURE__ */ jsx10(FieldError4, { errors: [fieldState.error] })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx10(
+        Controller4,
+        {
+          name: "confirmPassword",
+          control: form.control,
+          render: ({ field, fieldState }) => /* @__PURE__ */ jsxs8(Field4, { "data-invalid": fieldState.invalid, children: [
+            /* @__PURE__ */ jsx10(FieldLabel4, { htmlFor: "sign-up-confirmPassword", children: t("form.confirmPasswordLabel") }),
+            /* @__PURE__ */ jsxs8("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx10(
+                Input4,
+                {
+                  ...field,
+                  id: "sign-up-confirmPassword",
+                  type: showConfirmPassword ? "text" : "password",
+                  placeholder: t("form.passwordPlaceholder"),
+                  "aria-invalid": fieldState.invalid
+                }
+              ),
+              /* @__PURE__ */ jsx10(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setShowConfirmPassword(!showConfirmPassword),
+                  className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+                  children: showConfirmPassword ? /* @__PURE__ */ jsx10(IconEyeOff3, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx10(IconEye3, { className: "h-4 w-4" })
+                }
+              )
+            ] }),
+            fieldState.invalid && /* @__PURE__ */ jsx10(FieldError4, { errors: [fieldState.error] })
+          ] })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx10("div", { className: "mt-4", children: /* @__PURE__ */ jsx10(
+      Button4,
+      {
+        type: "submit",
+        form: "sign-up-form",
+        className: "w-full",
+        disabled: isLoading,
+        children: isLoading ? t("form.submitting") : t("form.submit")
       }
-    ),
-    /* @__PURE__ */ jsx11(Button5, { type: "submit", className: "w-full", disabled: isLoading, children: isLoading ? t("form.submitting") : t("form.submit") })
-  ] }) });
+    ) })
+  ] });
 };
 
 // src/components/auth/pages/sign-up-page.tsx
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var isPhone3 = (s) => /^\+?[0-9()[\]\s-]{6,}$/.test(s);
 var SignUpPage = ({
   redirectUrl,
-  onNavigate,
-  linkComponent: Link,
-  links,
-  initialIdentifier,
-  logoImage
-}) => {
-  const t = useTranslations9("Auth.signUp");
-  const { client, setAuth } = useAuth();
-  const [isLoading, setIsLoading] = useState9(false);
-  const [error, setError] = useState9(null);
-  const signInLink = links?.signIn || "/auth/sign-in";
+  initialIdentifier
+} = {}) => {
+  const { hooks, setAuth } = useApi();
+  const { config } = useConfig();
+  const t = createTranslator(config.messages || {}, "Auth.signUp");
+  const [isLoading, setIsLoading] = useState8(false);
+  const [error, setError] = useState8(null);
+  const signUpMutation = hooks.useMutation("post", "/sign-up");
+  const signInLink = config.navigation?.links?.signIn || "/auth/sign-in";
+  const Link = config.navigation?.linkComponent;
+  const onNavigate = config.navigation?.onNavigate || ((path) => {
+    if (typeof window !== "undefined") {
+      window.location.href = path;
+    }
+  });
+  const logoImage = config.ui.logoImage;
+  const defaultRedirect = redirectUrl || config.navigation?.defaultRedirectUrl || "/";
+  useEffect7(() => {
+    if (error) {
+      toast4.error(error.title || "Error", {
+        description: error.description
+      });
+    }
+  }, [error]);
   const handleSubmit = async (values) => {
     setIsLoading(true);
     setError(null);
     try {
       const identifier = values.identifier;
       const usingPhone = isPhone3(identifier);
-      const res = usingPhone ? await client.signUpWithPhone({
-        phone: identifier,
-        password: values.password,
-        fullName: values.fullName,
-        handle: values.handle
-      }) : await client.signUpWithEmail({
-        email: identifier,
-        password: values.password,
-        fullName: values.fullName,
-        handle: values.handle
+      const res = await signUpMutation.mutateAsync({
+        body: usingPhone ? {
+          phone: identifier,
+          password: values.password,
+          fullName: values.fullName,
+          handle: values.handle
+        } : {
+          email: identifier,
+          password: values.password,
+          fullName: values.fullName,
+          handle: values.handle
+        }
       });
       if ("verificationId" in res && res.verificationId) {
         if (usingPhone) {
@@ -1355,24 +1518,31 @@ var SignUpPage = ({
       if ("user" in res && "session" in res) {
         setAuth(res);
       }
-      onNavigate(redirectUrl || "/");
+      onNavigate(defaultRedirect);
     } catch (err) {
       handleError(err, setError, t);
     } finally {
       setIsLoading(false);
     }
   };
-  return /* @__PURE__ */ jsx12(
+  let errorContent = null;
+  if (error) {
+    if (typeof error === "string") {
+      errorContent = { title: "Error", description: error };
+    } else {
+      errorContent = error;
+    }
+  }
+  return /* @__PURE__ */ jsxs9(
     AuthPageLayout,
     {
       title: t("title"),
       description: t("description"),
-      error,
       logoImage,
       footer: /* @__PURE__ */ jsxs9("p", { children: [
         t("footer.hasAccount"),
         " ",
-        Link ? /* @__PURE__ */ jsx12(Link, { href: signInLink, className: "text-primary hover:underline", children: t("footer.signInCta") }) : /* @__PURE__ */ jsx12(
+        Link ? /* @__PURE__ */ jsx11(Link, { href: signInLink, className: "text-primary hover:underline", children: t("footer.signInCta") }) : /* @__PURE__ */ jsx11(
           "a",
           {
             href: signInLink,
@@ -1385,69 +1555,131 @@ var SignUpPage = ({
           }
         )
       ] }),
-      children: /* @__PURE__ */ jsx12(
-        SignUp,
-        {
-          onSubmit: handleSubmit,
-          isLoading,
-          initialIdentifier
-        }
-      )
+      children: [
+        /* @__PURE__ */ jsx11(
+          SignUp,
+          {
+            onSubmit: handleSubmit,
+            isLoading: isLoading || signUpMutation.isPending,
+            initialIdentifier
+          }
+        ),
+        errorContent && /* @__PURE__ */ jsxs9(Alert4, { variant: "destructive", className: "mt-4", children: [
+          /* @__PURE__ */ jsx11(IconAlertCircle4, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx11(AlertTitle4, { children: errorContent.title }),
+          /* @__PURE__ */ jsx11(AlertDescription4, { children: errorContent.description })
+        ] })
+      ]
     }
   );
 };
 
 // src/components/auth/pages/verify-email-page.tsx
-import { useTranslations as useTranslations11 } from "next-intl";
-import { useState as useState10 } from "react";
+import {
+  Alert as Alert5,
+  AlertDescription as AlertDescription5,
+  AlertTitle as AlertTitle5
+} from "@mesob/ui/components/alert";
+import { toast as toast5 } from "@mesob/ui/components/sonner";
+import { IconAlertCircle as IconAlertCircle5 } from "@tabler/icons-react";
+import { useEffect as useEffect9, useState as useState10 } from "react";
 
 // src/components/auth/verification-form.tsx
 import { zodResolver as zodResolver5 } from "@hookform/resolvers/zod";
 import { Button as Button6 } from "@mesob/ui/components/button";
-import {
-  Form as Form5,
-  FormControl as FormControl5,
-  FormField as FormField5,
-  FormItem as FormItem5,
-  FormMessage as FormMessage5
-} from "@mesob/ui/components/form";
+import { Field as Field5, FieldError as FieldError5, FieldGroup as FieldGroup5 } from "@mesob/ui/components/field";
 import {
   InputOTP as InputOTP2,
   InputOTPGroup as InputOTPGroup2,
   InputOTPSlot as InputOTPSlot2
 } from "@mesob/ui/components/input-otp";
 import { Spinner as Spinner5 } from "@mesob/ui/components/spinner";
-import { useTranslations as useTranslations10 } from "next-intl";
-import { useMemo as useMemo5 } from "react";
-import { useForm as useForm5 } from "react-hook-form";
+import { Controller as Controller5, useForm as useForm5 } from "react-hook-form";
 import { z as z5 } from "zod";
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+
+// src/components/auth/countdown.tsx
+import { Button as Button5 } from "@mesob/ui/components/button";
+import { Spinner as Spinner4 } from "@mesob/ui/components/spinner";
+import { useEffect as useEffect8, useState as useState9 } from "react";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+var Countdown = ({
+  initialSeconds = 60,
+  onResend,
+  resending = false
+}) => {
+  const t = useTranslator("Common");
+  const [seconds, setSeconds] = useState9(initialSeconds);
+  const [isResending, setIsResending] = useState9(false);
+  useEffect8(() => {
+    if (seconds <= 0) {
+      return;
+    }
+    const timer = setInterval(() => {
+      setSeconds((prev) => {
+        if (prev <= 1) {
+          clearInterval(timer);
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1e3);
+    return () => clearInterval(timer);
+  }, [seconds]);
+  const handleResend = async () => {
+    setIsResending(true);
+    try {
+      await onResend();
+      setSeconds(initialSeconds);
+    } catch (_error) {
+    } finally {
+      setIsResending(false);
+    }
+  };
+  if (seconds > 0) {
+    return /* @__PURE__ */ jsx12(Button5, { variant: "ghost", disabled: true, children: t("resendIn", { seconds }) });
+  }
+  return /* @__PURE__ */ jsxs10(
+    Button5,
+    {
+      variant: "ghost",
+      onClick: handleResend,
+      disabled: isResending || resending,
+      children: [
+        isResending || resending && /* @__PURE__ */ jsx12(Spinner4, {}),
+        t("resend")
+      ]
+    }
+  );
+};
+
+// src/components/auth/verification-form.tsx
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+var verificationSchema = (t) => z5.object({
+  code: z5.string().length(6, t("form.codeLength"))
+});
 var VerificationForm = ({
   onSubmit,
   onResend,
   isLoading = false
 }) => {
-  const t = useTranslations10("Auth.verification");
-  const verificationSchema = useMemo5(
-    () => z5.object({
-      code: z5.string().length(6, t("form.codeLength"))
-    }),
-    [t]
-  );
+  const t = useTranslator("Auth.verification");
   const form = useForm5({
-    resolver: zodResolver5(verificationSchema),
+    resolver: zodResolver5(verificationSchema(t)),
     defaultValues: {
       code: ""
     }
   });
-  return /* @__PURE__ */ jsx13(Form5, { ...form, children: /* @__PURE__ */ jsxs10("form", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsx13(
-      FormField5,
+  const handleSubmit = form.handleSubmit(async (values) => {
+    await onSubmit(values);
+  });
+  return /* @__PURE__ */ jsxs11("form", { id: "verification-form", onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsx13(FieldGroup5, { children: /* @__PURE__ */ jsx13(
+      Controller5,
       {
-        control: form.control,
         name: "code",
-        render: ({ field }) => /* @__PURE__ */ jsxs10(FormItem5, { children: [
-          /* @__PURE__ */ jsx13(FormControl5, { children: /* @__PURE__ */ jsx13("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx13(
+        control: form.control,
+        render: ({ field, fieldState }) => /* @__PURE__ */ jsxs11(Field5, { "data-invalid": fieldState.invalid, children: [
+          /* @__PURE__ */ jsx13("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx13(
             InputOTP2,
             {
               maxLength: 6,
@@ -1457,7 +1689,8 @@ var VerificationForm = ({
               onChange: field.onChange,
               onBlur: field.onBlur,
               containerClassName: "gap-4 justify-center mb-2 flex items-center",
-              children: /* @__PURE__ */ jsxs10(InputOTPGroup2, { className: "gap-3 *:data-[slot=input-otp-slot]:h-12 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:text-xl", children: [
+              "aria-invalid": fieldState.invalid,
+              children: /* @__PURE__ */ jsxs11(InputOTPGroup2, { className: "gap-3 *:data-[slot=input-otp-slot]:h-12 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:text-xl", children: [
                 /* @__PURE__ */ jsx13(InputOTPSlot2, { className: "h-12", index: 0 }),
                 /* @__PURE__ */ jsx13(InputOTPSlot2, { className: "h-12", index: 1 }),
                 /* @__PURE__ */ jsx13(InputOTPSlot2, { className: "h-12", index: 2 }),
@@ -1466,22 +1699,18 @@ var VerificationForm = ({
                 /* @__PURE__ */ jsx13(InputOTPSlot2, { className: "h-12", index: 5 })
               ] })
             }
-          ) }) }),
-          /* @__PURE__ */ jsx13(FormMessage5, {})
+          ) }),
+          fieldState.invalid && /* @__PURE__ */ jsx13(FieldError5, { errors: [fieldState.error] })
         ] })
       }
-    ),
-    /* @__PURE__ */ jsxs10("div", { className: "flex justify-between items-center", children: [
+    ) }),
+    /* @__PURE__ */ jsxs11("div", { className: "flex justify-between items-center mt-4", children: [
       /* @__PURE__ */ jsx13(Countdown, { onResend, resending: isLoading }),
-      /* @__PURE__ */ jsxs10(
+      /* @__PURE__ */ jsxs11(
         Button6,
         {
-          type: "button",
-          onClick: () => {
-            form.handleSubmit(async (values) => {
-              await onSubmit(values);
-            })();
-          },
+          type: "submit",
+          form: "verification-form",
           disabled: isLoading || form.watch("code").length !== 6,
           children: [
             isLoading && /* @__PURE__ */ jsx13(Spinner5, {}),
@@ -1490,27 +1719,50 @@ var VerificationForm = ({
         }
       )
     ] })
-  ] }) });
+  ] });
 };
 
 // src/components/auth/pages/verify-email-page.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 var VerifyEmailPage = ({
   verificationId,
-  onNavigate,
-  linkComponent: Link,
-  links,
   email,
-  logoImage,
   redirectUrl
 }) => {
-  const t = useTranslations11("Auth.verification");
-  const common = useTranslations11("Common");
-  const footer = useTranslations11("Auth.forgotPassword.footer");
-  const { client, setAuth } = useAuth();
+  const { hooks, setAuth } = useApi();
+  const { config } = useConfig();
+  const t = createTranslator(config.messages || {}, "Auth.verification");
+  const common = createTranslator(config.messages || {}, "Common");
+  const footer = createTranslator(
+    config.messages || {},
+    "Auth.forgotPassword.footer"
+  );
   const [isLoading, setIsLoading] = useState10(false);
   const [error, setError] = useState10(null);
-  const signInLink = links?.signIn || "/auth/sign-in";
+  const verifyEmailMutation = hooks.useMutation(
+    "post",
+    "/email/verification/confirm"
+  );
+  const requestEmailMutation = hooks.useMutation(
+    "post",
+    "/email/verification/request"
+  );
+  const signInLink = config.navigation?.links?.signIn || "/auth/sign-in";
+  const Link = config.navigation?.linkComponent;
+  const onNavigate = config.navigation?.onNavigate || ((path) => {
+    if (typeof window !== "undefined") {
+      window.location.href = path;
+    }
+  });
+  const logoImage = config.ui.logoImage;
+  const defaultRedirect = redirectUrl || config.navigation?.defaultRedirectUrl || "/";
+  useEffect9(() => {
+    if (error) {
+      toast5.error(error.title || "Error", {
+        description: error.description
+      });
+    }
+  }, [error]);
   const handleSubmit = async (values) => {
     if (!verificationId) {
       setError({
@@ -1522,14 +1774,16 @@ var VerifyEmailPage = ({
     setIsLoading(true);
     setError(null);
     try {
-      const res = await client.verifyEmail({
-        verificationId,
-        code: values.code
+      const res = await verifyEmailMutation.mutateAsync({
+        body: {
+          verificationId,
+          code: values.code
+        }
       });
       if ("user" in res && "session" in res) {
         setAuth(res);
       }
-      onNavigate(redirectUrl || "/");
+      onNavigate(defaultRedirect);
     } catch (err) {
       handleError(err, setError, t);
     } finally {
@@ -1539,7 +1793,11 @@ var VerifyEmailPage = ({
   const handleResend = async () => {
     setError(null);
     try {
-      const res = await client.requestEmailVerification({ email });
+      const res = await requestEmailMutation.mutateAsync({
+        body: {
+          email
+        }
+      });
       if (res.verificationId) {
         onNavigate(
           `/auth/verify-email?verificationId=${res.verificationId}&email=${encodeURIComponent(email)}`
@@ -1576,12 +1834,19 @@ var VerifyEmailPage = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx14(
+  let errorContent = null;
+  if (error) {
+    if (typeof error === "string") {
+      errorContent = { title: "Error", description: error };
+    } else {
+      errorContent = error;
+    }
+  }
+  return /* @__PURE__ */ jsxs12(
     AuthPageLayout,
     {
       title: t("email.title"),
       description: t("email.description"),
-      error,
       logoImage,
       footer: Link ? /* @__PURE__ */ jsx14(Link, { href: signInLink, className: "text-primary hover:underline", children: footer("backToSignIn") }) : /* @__PURE__ */ jsx14(
         "a",
@@ -1595,41 +1860,77 @@ var VerifyEmailPage = ({
           children: footer("backToSignIn")
         }
       ),
-      children: /* @__PURE__ */ jsx14(
-        VerificationForm,
-        {
-          verificationId,
-          onSubmit: handleSubmit,
-          onResend: handleResend,
-          isLoading,
-          error
-        }
-      )
+      children: [
+        /* @__PURE__ */ jsx14(
+          VerificationForm,
+          {
+            verificationId,
+            onSubmit: handleSubmit,
+            onResend: handleResend,
+            isLoading: isLoading || verifyEmailMutation.isPending || requestEmailMutation.isPending,
+            error
+          }
+        ),
+        errorContent && /* @__PURE__ */ jsxs12(Alert5, { variant: "destructive", className: "mt-4", children: [
+          /* @__PURE__ */ jsx14(IconAlertCircle5, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx14(AlertTitle5, { children: errorContent.title }),
+          /* @__PURE__ */ jsx14(AlertDescription5, { children: errorContent.description })
+        ] })
+      ]
     }
   );
 };
 
 // src/components/auth/pages/verify-phone-page.tsx
-import { useTranslations as useTranslations12 } from "next-intl";
-import { useState as useState11 } from "react";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import {
+  Alert as Alert6,
+  AlertDescription as AlertDescription6,
+  AlertTitle as AlertTitle6
+} from "@mesob/ui/components/alert";
+import { toast as toast6 } from "@mesob/ui/components/sonner";
+import { IconAlertCircle as IconAlertCircle6 } from "@tabler/icons-react";
+import { useEffect as useEffect10, useState as useState11 } from "react";
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
 var VerifyPhonePage = ({
   verificationId,
   context,
   phone = "",
-  onNavigate,
-  linkComponent: Link,
-  links,
-  logoImage,
   redirectUrl
 }) => {
-  const t = useTranslations12("Auth.verification");
-  const common = useTranslations12("Common");
-  const footer = useTranslations12("Auth.forgotPassword.footer");
-  const { client, refresh, setAuth } = useAuth();
+  const { hooks, refresh, setAuth } = useApi();
+  const { config } = useConfig();
+  const t = createTranslator(config.messages || {}, "Auth.verification");
+  const common = createTranslator(config.messages || {}, "Common");
+  const footer = createTranslator(
+    config.messages || {},
+    "Auth.forgotPassword.footer"
+  );
   const [isLoading, setIsLoading] = useState11(false);
   const [error, setError] = useState11(null);
-  const signInLink = links?.signIn || "/auth/sign-in";
+  const verifyPhoneMutation = hooks.useMutation(
+    "post",
+    "/phone/verification/confirm"
+  );
+  const requestPhoneMutation = hooks.useMutation(
+    "post",
+    "/phone/verification/request"
+  );
+  const signInLink = config.navigation?.links?.signIn || "/auth/sign-in";
+  const Link = config.navigation?.linkComponent;
+  const onNavigate = config.navigation?.onNavigate || ((path) => {
+    if (typeof window !== "undefined") {
+      window.location.href = path;
+    }
+  });
+  const logoImage = config.ui.logoImage;
+  const defaultRedirect = redirectUrl || config.navigation?.defaultRedirectUrl || "/";
+  useEffect10(() => {
+    if (error) {
+      toast6.error(error.title || "Error", {
+        description: error.description
+      });
+    }
+  }, [error]);
   const handleSubmit = async (values) => {
     if (!verificationId) {
       setError({
@@ -1641,18 +1942,20 @@ var VerifyPhonePage = ({
     setIsLoading(true);
     setError(null);
     try {
-      const res = await client.verifyPhoneOtp({
-        verificationId,
-        code: values.code,
-        context
+      const res = await verifyPhoneMutation.mutateAsync({
+        body: {
+          verificationId,
+          code: values.code,
+          context
+        }
       });
       if (res && "user" in res && "session" in res && res.session) {
         setAuth(res);
-        onNavigate(redirectUrl || "/");
+        onNavigate(defaultRedirect);
         return;
       }
       await refresh();
-      onNavigate(redirectUrl || "/");
+      onNavigate(defaultRedirect);
     } catch (err) {
       handleError(err, setError, t);
     } finally {
@@ -1670,7 +1973,12 @@ var VerifyPhonePage = ({
         });
         return;
       }
-      const res = await client.requestPhoneOtp({ phone: targetPhone, context });
+      const res = await requestPhoneMutation.mutateAsync({
+        body: {
+          phone: targetPhone,
+          context
+        }
+      });
       if (res && "verificationId" in res && res.verificationId) {
         onNavigate(
           `/auth/verify-phone?context=${context}&verificationId=${res.verificationId}&phone=${targetPhone}`
@@ -1707,14 +2015,21 @@ var VerifyPhonePage = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx15(
+  let errorContent = null;
+  if (error) {
+    if (typeof error === "string") {
+      errorContent = { title: "Error", description: error };
+    } else {
+      errorContent = error;
+    }
+  }
+  return /* @__PURE__ */ jsxs13(
     AuthPageLayout,
     {
       title: t("phone.title"),
       description: t("phone.description", {
         target: phone || t("phone.missingPhone")
       }),
-      error,
       logoImage,
       footer: Link ? /* @__PURE__ */ jsx15(Link, { href: signInLink, className: "text-primary hover:underline", children: footer("backToSignIn") }) : /* @__PURE__ */ jsx15(
         "a",
@@ -1728,75 +2043,794 @@ var VerifyPhonePage = ({
           children: footer("backToSignIn")
         }
       ),
-      children: /* @__PURE__ */ jsx15(
-        VerificationForm,
-        {
-          verificationId,
-          onSubmit: handleSubmit,
-          onResend: handleResend,
-          isLoading,
-          error
-        }
-      )
+      children: [
+        /* @__PURE__ */ jsx15(
+          VerificationForm,
+          {
+            verificationId,
+            onSubmit: handleSubmit,
+            onResend: handleResend,
+            isLoading: isLoading || verifyPhoneMutation.isPending || requestPhoneMutation.isPending,
+            error
+          }
+        ),
+        errorContent && /* @__PURE__ */ jsxs13(Alert6, { variant: "destructive", className: "mt-4", children: [
+          /* @__PURE__ */ jsx15(IconAlertCircle6, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx15(AlertTitle6, { children: errorContent.title }),
+          /* @__PURE__ */ jsx15(AlertDescription6, { children: errorContent.description })
+        ] })
+      ]
     }
   );
 };
 
-// src/factory.ts
-var createAuthClient = (config) => {
-  const client = new AuthClient(config);
-  return {
-    signUpWithEmail: client.signUpWithEmail.bind(client),
-    signUpWithPhone: client.signUpWithPhone.bind(client),
-    signInWithPassword: client.signInWithPassword.bind(client),
-    signOut: client.signOut.bind(client),
-    requestEmailVerification: client.requestEmailVerification.bind(client),
-    verifyEmail: client.verifyEmail.bind(client),
-    resendVerification: client.resendVerification.bind(client),
-    requestPhoneOtp: client.requestPhoneOtp.bind(client),
-    verifyPhoneOtp: client.verifyPhoneOtp.bind(client),
-    forgotPassword: client.forgotPassword.bind(client),
-    resetPassword: client.resetPassword.bind(client),
-    changePassword: client.changePassword.bind(client),
-    getSession: client.getSession.bind(client),
-    useSession: () => {
-      throw new Error("useSession must be used within AuthProvider");
-    }
+// src/components/error-boundary.tsx
+import { Button as Button7 } from "@mesob/ui/components/button";
+import { Component } from "react";
+import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+var ErrorBoundary = class extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(_error, _errorInfo) {
+  }
+  reset = () => {
+    this.setState({ hasError: false, error: null });
   };
+  render() {
+    if (this.state.hasError && this.state.error) {
+      if (this.props.fallback) {
+        return this.props.fallback({
+          error: this.state.error,
+          reset: this.reset
+        });
+      }
+      return /* @__PURE__ */ jsx16(ErrorFallback, { error: this.state.error, reset: this.reset });
+    }
+    return this.props.children;
+  }
 };
+function ErrorFallback({ error, reset }) {
+  return /* @__PURE__ */ jsx16("div", { className: "flex flex-col items-center justify-center min-h-[400px] p-6", children: /* @__PURE__ */ jsxs14("div", { className: "max-w-md w-full space-y-4 text-center", children: [
+    /* @__PURE__ */ jsxs14("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx16("h2", { className: "text-2xl font-bold text-destructive", children: "Something went wrong" }),
+      /* @__PURE__ */ jsx16("p", { className: "text-muted-foreground", children: error.message || "An unexpected error occurred" })
+    ] }),
+    /* @__PURE__ */ jsx16(Button7, { onClick: reset, variant: "outline", children: "Try again" })
+  ] }) });
+}
+function AuthErrorBoundary({ children }) {
+  return /* @__PURE__ */ jsx16(ErrorBoundary, { children });
+}
+
+// src/components/iam/permissions/permissions-page.tsx
+import { Badge } from "@mesob/ui/components/badge";
+import { Button as Button8 } from "@mesob/ui/components/button";
+import { useState as useState12 } from "react";
+
+// src/components/shared/data-table/data-table.tsx
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from "@mesob/ui/components/table";
+
+// src/components/skeletons/table-skeleton.tsx
+import { Skeleton } from "@mesob/ui/components/skeleton";
+import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+function TableSkeleton({ columns = 5, rows = 10 }) {
+  const headerKeys = Array.from({ length: columns }, (_, i) => `header-${i}`);
+  const rowKeys = Array.from({ length: rows }, (_, i) => `row-${i}`);
+  const cellKeys = Array.from(
+    { length: rows },
+    (_, rowIdx) => Array.from({ length: columns }, (_2, colIdx) => `cell-${rowIdx}-${colIdx}`)
+  );
+  return /* @__PURE__ */ jsxs15("div", { className: "w-full space-y-4", children: [
+    /* @__PURE__ */ jsxs15("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ jsx17(Skeleton, { className: "h-8 w-48" }),
+      /* @__PURE__ */ jsx17(Skeleton, { className: "h-10 w-32" })
+    ] }),
+    /* @__PURE__ */ jsxs15("div", { className: "flex gap-4", children: [
+      /* @__PURE__ */ jsx17(Skeleton, { className: "h-10 flex-1 max-w-sm" }),
+      /* @__PURE__ */ jsx17(Skeleton, { className: "h-10 w-24" }),
+      /* @__PURE__ */ jsx17(Skeleton, { className: "h-10 w-24" })
+    ] }),
+    /* @__PURE__ */ jsxs15("div", { className: "border rounded-lg overflow-hidden", children: [
+      /* @__PURE__ */ jsx17("div", { className: "flex gap-4 p-4 bg-muted", children: headerKeys.map((key) => /* @__PURE__ */ jsx17(Skeleton, { className: "h-4 flex-1" }, key)) }),
+      rowKeys.map((rowKey, rowIdx) => /* @__PURE__ */ jsx17("div", { className: "flex gap-4 p-4 border-t", children: cellKeys[rowIdx]?.map((cellKey) => /* @__PURE__ */ jsx17(Skeleton, { className: "h-4 flex-1" }, cellKey)) }, rowKey))
+    ] }),
+    /* @__PURE__ */ jsxs15("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ jsx17(Skeleton, { className: "h-4 w-32" }),
+      /* @__PURE__ */ jsxs15("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx17(Skeleton, { className: "h-10 w-20" }),
+        /* @__PURE__ */ jsx17(Skeleton, { className: "h-10 w-20" })
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/shared/data-table/data-table.tsx
+import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+function DataTable({
+  data,
+  columns,
+  isLoading,
+  onRowClick,
+  emptyMessage = "No data available",
+  actions
+}) {
+  if (isLoading) {
+    return /* @__PURE__ */ jsx18(TableSkeleton, { columns: columns.length, rows: 5 });
+  }
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsxs16("div", { className: "flex flex-col items-center justify-center min-h-[400px] p-6", children: [
+      /* @__PURE__ */ jsx18("p", { className: "text-muted-foreground", children: emptyMessage }),
+      actions && /* @__PURE__ */ jsx18("div", { className: "mt-4", children: actions })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs16("div", { className: "w-full space-y-4", children: [
+    actions && /* @__PURE__ */ jsx18("div", { className: "flex justify-end", children: actions }),
+    /* @__PURE__ */ jsx18("div", { className: "border rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxs16(Table, { children: [
+      /* @__PURE__ */ jsx18(TableHeader, { children: /* @__PURE__ */ jsx18(TableRow, { children: columns.map((column) => /* @__PURE__ */ jsx18(TableHead, { children: column.header }, column.key)) }) }),
+      /* @__PURE__ */ jsx18(TableBody, { children: data.map((row) => /* @__PURE__ */ jsx18(
+        TableRow,
+        {
+          onClick: () => onRowClick?.(row),
+          className: onRowClick ? "cursor-pointer hover:bg-muted/50" : "",
+          children: columns.map((column) => /* @__PURE__ */ jsx18(TableCell, { children: column.cell(row) }, `${row.id}-${column.key}`))
+        },
+        row.id
+      )) })
+    ] }) })
+  ] });
+}
+
+// src/components/iam/permissions/permissions-page.tsx
+import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
+function PermissionsPage() {
+  const { hooks } = useApi();
+  const [page, setPage] = useState12(1);
+  const limit = 20;
+  const { data, isLoading, error } = hooks.useQuery("get", "/permissions", {
+    params: {
+      query: {
+        page: String(page),
+        limit: String(limit)
+      }
+    }
+  });
+  const columns = [
+    {
+      key: "name",
+      header: "Permission",
+      cell: (permission) => /* @__PURE__ */ jsxs17("div", { children: [
+        /* @__PURE__ */ jsx19("p", { className: "font-medium", children: permission.name }),
+        /* @__PURE__ */ jsx19(Badge, { variant: "outline", className: "mt-1 font-mono text-xs", children: permission.code })
+      ] })
+    },
+    {
+      key: "resource",
+      header: "Resource",
+      cell: (permission) => /* @__PURE__ */ jsx19(Badge, { variant: "secondary", children: permission.resource })
+    },
+    {
+      key: "action",
+      header: "Action",
+      cell: (permission) => /* @__PURE__ */ jsx19(Badge, { variant: "outline", children: permission.action })
+    },
+    {
+      key: "description",
+      header: "Description",
+      cell: (permission) => /* @__PURE__ */ jsx19("p", { className: "text-sm text-muted-foreground max-w-xs truncate", children: permission.description })
+    },
+    {
+      key: "actions",
+      header: "Actions",
+      cell: (_permission) => /* @__PURE__ */ jsx19(Button8, { variant: "outline", size: "sm", children: "Edit" })
+    }
+  ];
+  if (error) {
+    return /* @__PURE__ */ jsx19("div", { className: "p-6 text-center", children: /* @__PURE__ */ jsx19("p", { className: "text-destructive", children: "Error loading permissions" }) });
+  }
+  return /* @__PURE__ */ jsxs17("div", { className: "w-full p-6 space-y-4", children: [
+    /* @__PURE__ */ jsxs17("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ jsxs17("div", { children: [
+        /* @__PURE__ */ jsx19("h1", { className: "text-3xl font-bold", children: "Permissions" }),
+        /* @__PURE__ */ jsx19("p", { className: "text-muted-foreground", children: "Manage system permissions" })
+      ] }),
+      /* @__PURE__ */ jsx19(Button8, { children: "Create Permission" })
+    ] }),
+    /* @__PURE__ */ jsx19(
+      DataTable,
+      {
+        data: data?.permissions || [],
+        columns,
+        isLoading,
+        emptyMessage: "No permissions found"
+      }
+    ),
+    data && "permissions" in data && data.permissions && data.permissions.length >= limit && /* @__PURE__ */ jsxs17("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ jsx19(
+        Button8,
+        {
+          variant: "outline",
+          disabled: page === 1,
+          onClick: () => setPage(page - 1),
+          children: "Previous"
+        }
+      ),
+      /* @__PURE__ */ jsxs17("span", { className: "text-sm text-muted-foreground", children: [
+        "Page ",
+        page
+      ] }),
+      /* @__PURE__ */ jsx19(Button8, { variant: "outline", onClick: () => setPage(page + 1), children: "Next" })
+    ] })
+  ] });
+}
+
+// src/components/iam/roles/roles-page.tsx
+import { Badge as Badge2 } from "@mesob/ui/components/badge";
+import { Button as Button9 } from "@mesob/ui/components/button";
+import { useState as useState13 } from "react";
+import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
+function RolesPage() {
+  const { hooks } = useApi();
+  const [page, setPage] = useState13(1);
+  const limit = 20;
+  const { data, isLoading, error } = hooks.useQuery("get", "/roles", {
+    params: {
+      query: {
+        page: String(page),
+        limit: String(limit)
+      }
+    }
+  });
+  const columns = [
+    {
+      key: "name",
+      header: "Role",
+      cell: (role) => /* @__PURE__ */ jsxs18("div", { children: [
+        /* @__PURE__ */ jsx20("p", { className: "font-medium", children: role.name }),
+        /* @__PURE__ */ jsx20(Badge2, { variant: "outline", className: "mt-1", children: role.code })
+      ] })
+    },
+    {
+      key: "description",
+      header: "Description",
+      cell: (role) => /* @__PURE__ */ jsx20("p", { className: "text-sm text-muted-foreground", children: role.description })
+    },
+    {
+      key: "createdAt",
+      header: "Created",
+      cell: (role) => /* @__PURE__ */ jsx20("p", { className: "text-sm", children: new Date(role.createdAt).toLocaleDateString() })
+    },
+    {
+      key: "actions",
+      header: "Actions",
+      cell: (_role) => /* @__PURE__ */ jsxs18("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx20(Button9, { variant: "outline", size: "sm", children: "Permissions" }),
+        /* @__PURE__ */ jsx20(Button9, { variant: "outline", size: "sm", children: "Edit" })
+      ] })
+    }
+  ];
+  if (error) {
+    return /* @__PURE__ */ jsx20("div", { className: "p-6 text-center", children: /* @__PURE__ */ jsx20("p", { className: "text-destructive", children: "Error loading roles" }) });
+  }
+  return /* @__PURE__ */ jsxs18("div", { className: "w-full p-6 space-y-4", children: [
+    /* @__PURE__ */ jsxs18("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ jsxs18("div", { children: [
+        /* @__PURE__ */ jsx20("h1", { className: "text-3xl font-bold", children: "Roles" }),
+        /* @__PURE__ */ jsx20("p", { className: "text-muted-foreground", children: "Manage user roles" })
+      ] }),
+      /* @__PURE__ */ jsx20(Button9, { children: "Create Role" })
+    ] }),
+    /* @__PURE__ */ jsx20(
+      DataTable,
+      {
+        data: data?.roles || [],
+        columns,
+        isLoading,
+        emptyMessage: "No roles found"
+      }
+    ),
+    data && "roles" in data && data.roles && data.roles.length >= limit && /* @__PURE__ */ jsxs18("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ jsx20(
+        Button9,
+        {
+          variant: "outline",
+          disabled: page === 1,
+          onClick: () => setPage(page - 1),
+          children: "Previous"
+        }
+      ),
+      /* @__PURE__ */ jsxs18("span", { className: "text-sm text-muted-foreground", children: [
+        "Page ",
+        page
+      ] }),
+      /* @__PURE__ */ jsx20(Button9, { variant: "outline", onClick: () => setPage(page + 1), children: "Next" })
+    ] })
+  ] });
+}
 
-// src/hooks/use-session.ts
-var useSession = () => {
-  const { user, session, loading, error, refresh } = useAuth();
-  return {
-    user,
-    session,
-    isLoading: loading,
-    isAuthenticated: !!user && !!session,
-    error,
-    refresh
+// src/components/iam/sessions/sessions-page.tsx
+import { Button as Button10 } from "@mesob/ui/components/button";
+import { useState as useState14 } from "react";
+import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
+function SessionsPage() {
+  const { hooks } = useApi();
+  const [selectedSessionId] = useState14(null);
+  const { data, isLoading, error, refetch } = hooks.useQuery(
+    "get",
+    "/sessions"
+  );
+  const deleteMutation = hooks.useMutation("delete", "/sessions/{id}", {
+    onSuccess: () => {
+      refetch();
+    }
+  });
+  const handleDeleteSession = async (sessionId) => {
+    if (confirm("Are you sure you want to revoke this session?")) {
+      try {
+        await deleteMutation.mutateAsync({
+          params: {
+            path: { id: sessionId }
+          }
+        });
+      } catch (_err) {
+      }
+    }
   };
+  const columns = [
+    {
+      key: "createdAt",
+      header: "Created",
+      cell: (session) => /* @__PURE__ */ jsxs19("div", { children: [
+        /* @__PURE__ */ jsx21("p", { className: "text-sm font-medium", children: new Date(session.createdAt).toLocaleDateString() }),
+        /* @__PURE__ */ jsx21("p", { className: "text-xs text-muted-foreground", children: new Date(session.createdAt).toLocaleTimeString() })
+      ] })
+    },
+    {
+      key: "expiresAt",
+      header: "Expires",
+      cell: (session) => /* @__PURE__ */ jsx21("p", { className: "text-sm", children: new Date(session.expiresAt).toLocaleDateString() })
+    },
+    {
+      key: "userAgent",
+      header: "Device",
+      cell: (session) => /* @__PURE__ */ jsx21("p", { className: "text-sm truncate max-w-xs", children: session.userAgent || "Unknown" })
+    },
+    {
+      key: "ip",
+      header: "IP Address",
+      cell: (session) => /* @__PURE__ */ jsx21("p", { className: "text-sm font-mono", children: session.ip || "Unknown" })
+    },
+    {
+      key: "actions",
+      header: "Actions",
+      cell: (session) => /* @__PURE__ */ jsx21(
+        Button10,
+        {
+          variant: "destructive",
+          size: "sm",
+          onClick: () => handleDeleteSession(session.id),
+          disabled: deleteMutation.isPending && selectedSessionId === session.id,
+          children: deleteMutation.isPending && selectedSessionId === session.id ? "Revoking..." : "Revoke"
+        }
+      )
+    }
+  ];
+  if (error) {
+    return /* @__PURE__ */ jsx21("div", { className: "p-6 text-center", children: /* @__PURE__ */ jsx21("p", { className: "text-destructive", children: "Error loading sessions" }) });
+  }
+  return /* @__PURE__ */ jsxs19("div", { className: "w-full p-6 space-y-4", children: [
+    /* @__PURE__ */ jsxs19("div", { children: [
+      /* @__PURE__ */ jsx21("h1", { className: "text-3xl font-bold", children: "Sessions" }),
+      /* @__PURE__ */ jsx21("p", { className: "text-muted-foreground", children: "View and manage active sessions" })
+    ] }),
+    /* @__PURE__ */ jsx21(
+      DataTable,
+      {
+        data: data?.sessions || [],
+        columns,
+        isLoading,
+        emptyMessage: "No active sessions"
+      }
+    )
+  ] });
+}
+
+// src/components/iam/tenants/tenants-page.tsx
+import { Badge as Badge3 } from "@mesob/ui/components/badge";
+import { Button as Button11 } from "@mesob/ui/components/button";
+import { useState as useState15 } from "react";
+import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
+function TenantsPage() {
+  const { hooks } = useApi();
+  const [page, setPage] = useState15(1);
+  const limit = 20;
+  const { data, isLoading, error } = hooks.useQuery("get", "/tenants", {
+    params: {
+      query: {
+        page: String(page),
+        limit: String(limit)
+      }
+    }
+  });
+  const columns = [
+    {
+      key: "name",
+      header: "Tenant",
+      cell: (tenant) => /* @__PURE__ */ jsxs20("div", { children: [
+        /* @__PURE__ */ jsx22("p", { className: "font-medium", children: tenant.name }),
+        /* @__PURE__ */ jsxs20("p", { className: "text-sm text-muted-foreground", children: [
+          "/",
+          tenant.slug
+        ] })
+      ] })
+    },
+    {
+      key: "status",
+      header: "Status",
+      cell: (tenant) => /* @__PURE__ */ jsx22(Badge3, { variant: tenant.status === "active" ? "default" : "secondary", children: tenant.status })
+    },
+    {
+      key: "createdAt",
+      header: "Created",
+      cell: (tenant) => /* @__PURE__ */ jsx22("p", { className: "text-sm", children: new Date(tenant.createdAt).toLocaleDateString() })
+    },
+    {
+      key: "actions",
+      header: "Actions",
+      cell: (_tenant) => /* @__PURE__ */ jsxs20("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx22(Button11, { variant: "outline", size: "sm", children: "Domains" }),
+        /* @__PURE__ */ jsx22(Button11, { variant: "outline", size: "sm", children: "Edit" })
+      ] })
+    }
+  ];
+  if (error) {
+    return /* @__PURE__ */ jsx22("div", { className: "p-6 text-center", children: /* @__PURE__ */ jsx22("p", { className: "text-destructive", children: "Error loading tenants" }) });
+  }
+  return /* @__PURE__ */ jsxs20("div", { className: "w-full p-6 space-y-4", children: [
+    /* @__PURE__ */ jsxs20("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ jsxs20("div", { children: [
+        /* @__PURE__ */ jsx22("h1", { className: "text-3xl font-bold", children: "Tenants" }),
+        /* @__PURE__ */ jsx22("p", { className: "text-muted-foreground", children: "Manage tenant organizations" })
+      ] }),
+      /* @__PURE__ */ jsx22(Button11, { children: "Create Tenant" })
+    ] }),
+    /* @__PURE__ */ jsx22(
+      DataTable,
+      {
+        data: data?.tenants || [],
+        columns,
+        isLoading,
+        emptyMessage: "No tenants found"
+      }
+    ),
+    data && "tenants" in data && data.tenants && data.tenants.length >= limit && /* @__PURE__ */ jsxs20("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ jsx22(
+        Button11,
+        {
+          variant: "outline",
+          disabled: page === 1,
+          onClick: () => setPage(page - 1),
+          children: "Previous"
+        }
+      ),
+      /* @__PURE__ */ jsxs20("span", { className: "text-sm text-muted-foreground", children: [
+        "Page ",
+        page
+      ] }),
+      /* @__PURE__ */ jsx22(Button11, { variant: "outline", onClick: () => setPage(page + 1), children: "Next" })
+    ] })
+  ] });
+}
+
+// src/components/iam/users/users-page.tsx
+import { Badge as Badge4 } from "@mesob/ui/components/badge";
+import { Button as Button12 } from "@mesob/ui/components/button";
+import { useState as useState16 } from "react";
+import { jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
+function UsersPage() {
+  const { hooks } = useApi();
+  const [page, setPage] = useState16(1);
+  const limit = 20;
+  const { data, isLoading, error } = hooks.useQuery("get", "/users", {
+    params: {
+      query: {
+        page: String(page),
+        limit: String(limit)
+      }
+    }
+  });
+  const columns = [
+    {
+      key: "fullName",
+      header: "Name",
+      cell: (user) => /* @__PURE__ */ jsxs21("div", { children: [
+        /* @__PURE__ */ jsx23("p", { className: "font-medium", children: user.fullName }),
+        /* @__PURE__ */ jsxs21("p", { className: "text-sm text-muted-foreground", children: [
+          "@",
+          user.handle
+        ] })
+      ] })
+    },
+    {
+      key: "contact",
+      header: "Contact",
+      cell: (user) => /* @__PURE__ */ jsxs21("div", { className: "space-y-1", children: [
+        user.email && /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx23("p", { className: "text-sm", children: user.email }),
+          user.emailVerified && /* @__PURE__ */ jsx23(Badge4, { variant: "outline", className: "text-xs", children: "Verified" })
+        ] }),
+        user.phone && /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx23("p", { className: "text-sm", children: user.phone }),
+          user.phoneVerified && /* @__PURE__ */ jsx23(Badge4, { variant: "outline", className: "text-xs", children: "Verified" })
+        ] })
+      ] })
+    },
+    {
+      key: "lastSignIn",
+      header: "Last Sign In",
+      cell: (user) => /* @__PURE__ */ jsx23("p", { className: "text-sm", children: user.lastSignInAt ? new Date(user.lastSignInAt).toLocaleDateString() : "Never" })
+    },
+    {
+      key: "actions",
+      header: "Actions",
+      cell: (_user) => /* @__PURE__ */ jsxs21("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx23(Button12, { variant: "outline", size: "sm", children: "View" }),
+        /* @__PURE__ */ jsx23(Button12, { variant: "outline", size: "sm", children: "Edit" })
+      ] })
+    }
+  ];
+  if (error) {
+    return /* @__PURE__ */ jsx23("div", { className: "p-6 text-center", children: /* @__PURE__ */ jsx23("p", { className: "text-destructive", children: "Error loading users" }) });
+  }
+  return /* @__PURE__ */ jsxs21("div", { className: "w-full p-6 space-y-4", children: [
+    /* @__PURE__ */ jsxs21("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ jsxs21("div", { children: [
+        /* @__PURE__ */ jsx23("h1", { className: "text-3xl font-bold", children: "Users" }),
+        /* @__PURE__ */ jsx23("p", { className: "text-muted-foreground", children: "Manage user accounts" })
+      ] }),
+      /* @__PURE__ */ jsx23(Button12, { children: "Create User" })
+    ] }),
+    /* @__PURE__ */ jsx23(
+      DataTable,
+      {
+        data: data?.users || [],
+        columns,
+        isLoading,
+        emptyMessage: "No users found"
+      }
+    ),
+    data && "users" in data && data.users && data.users.length >= limit && /* @__PURE__ */ jsxs21("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ jsx23(
+        Button12,
+        {
+          variant: "outline",
+          disabled: page === 1,
+          onClick: () => setPage(page - 1),
+          children: "Previous"
+        }
+      ),
+      /* @__PURE__ */ jsxs21("span", { className: "text-sm text-muted-foreground", children: [
+        "Page ",
+        page
+      ] }),
+      /* @__PURE__ */ jsx23(Button12, { variant: "outline", onClick: () => setPage(page + 1), children: "Next" })
+    ] })
+  ] });
+}
+
+// src/components/profile/profile-page.tsx
+import { Button as Button13 } from "@mesob/ui/components/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from "@mesob/ui/components/card";
+import { Separator } from "@mesob/ui/components/separator";
+
+// src/components/skeletons/profile-skeleton.tsx
+import { Skeleton as Skeleton2 } from "@mesob/ui/components/skeleton";
+import { jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
+function ProfileSkeleton() {
+  return /* @__PURE__ */ jsxs22("div", { className: "w-full max-w-4xl space-y-8 p-6", children: [
+    /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-6", children: [
+      /* @__PURE__ */ jsx24(Skeleton2, { className: "h-24 w-24 rounded-full" }),
+      /* @__PURE__ */ jsxs22("div", { className: "space-y-2 flex-1", children: [
+        /* @__PURE__ */ jsx24(Skeleton2, { className: "h-8 w-48" }),
+        /* @__PURE__ */ jsx24(Skeleton2, { className: "h-4 w-64" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx24("div", { className: "space-y-6", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs22("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx24(Skeleton2, { className: "h-6 w-32" }),
+      /* @__PURE__ */ jsxs22("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxs22("div", { className: "flex justify-between items-center", children: [
+          /* @__PURE__ */ jsx24(Skeleton2, { className: "h-4 w-24" }),
+          /* @__PURE__ */ jsx24(Skeleton2, { className: "h-4 w-32" })
+        ] }),
+        /* @__PURE__ */ jsxs22("div", { className: "flex justify-between items-center", children: [
+          /* @__PURE__ */ jsx24(Skeleton2, { className: "h-4 w-24" }),
+          /* @__PURE__ */ jsx24(Skeleton2, { className: "h-4 w-40" })
+        ] })
+      ] })
+    ] }, i)) })
+  ] });
+}
+
+// src/components/profile/profile-page.tsx
+import { jsx as jsx25, jsxs as jsxs23 } from "react/jsx-runtime";
+function ProfilePage({ onEditClick }) {
+  const { user, isLoading } = useSession();
+  if (isLoading) {
+    return /* @__PURE__ */ jsx25(ProfileSkeleton, {});
+  }
+  if (!user) {
+    return /* @__PURE__ */ jsx25("div", { className: "flex items-center justify-center min-h-[400px]", children: /* @__PURE__ */ jsx25("p", { className: "text-muted-foreground", children: "Not authenticated" }) });
+  }
+  return /* @__PURE__ */ jsxs23("div", { className: "w-full max-w-4xl mx-auto space-y-6 p-6", children: [
+    /* @__PURE__ */ jsxs23("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs23("div", { children: [
+        /* @__PURE__ */ jsx25("h1", { className: "text-3xl font-bold", children: user.fullName }),
+        /* @__PURE__ */ jsxs23("p", { className: "text-muted-foreground", children: [
+          "@",
+          user.handle
+        ] })
+      ] }),
+      onEditClick && /* @__PURE__ */ jsx25(Button13, { onClick: onEditClick, children: "Edit Profile" })
+    ] }),
+    /* @__PURE__ */ jsx25(Separator, {}),
+    /* @__PURE__ */ jsxs23("div", { className: "grid gap-6 md:grid-cols-2", children: [
+      /* @__PURE__ */ jsxs23(Card, { children: [
+        /* @__PURE__ */ jsxs23(CardHeader, { children: [
+          /* @__PURE__ */ jsx25(CardTitle, { children: "Contact Information" }),
+          /* @__PURE__ */ jsx25(CardDescription, { children: "Your contact details" })
+        ] }),
+        /* @__PURE__ */ jsxs23(CardContent, { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs23("div", { children: [
+            /* @__PURE__ */ jsx25("p", { className: "text-sm font-medium text-muted-foreground", children: "Email" }),
+            /* @__PURE__ */ jsxs23("p", { className: "text-sm", children: [
+              user.email || "Not provided",
+              user.email && /* @__PURE__ */ jsx25(
+                "span",
+                {
+                  className: user.emailVerified ? "text-green-600 ml-2" : "text-yellow-600 ml-2",
+                  children: user.emailVerified ? "(Verified)" : "(Not verified)"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs23("div", { children: [
+            /* @__PURE__ */ jsx25("p", { className: "text-sm font-medium text-muted-foreground", children: "Phone" }),
+            /* @__PURE__ */ jsxs23("p", { className: "text-sm", children: [
+              user.phone || "Not provided",
+              user.phone && /* @__PURE__ */ jsx25(
+                "span",
+                {
+                  className: user.phoneVerified ? "text-green-600 ml-2" : "text-yellow-600 ml-2",
+                  children: user.phoneVerified ? "(Verified)" : "(Not verified)"
+                }
+              )
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs23(Card, { children: [
+        /* @__PURE__ */ jsxs23(CardHeader, { children: [
+          /* @__PURE__ */ jsx25(CardTitle, { children: "Account Information" }),
+          /* @__PURE__ */ jsx25(CardDescription, { children: "Your account details" })
+        ] }),
+        /* @__PURE__ */ jsxs23(CardContent, { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs23("div", { children: [
+            /* @__PURE__ */ jsx25("p", { className: "text-sm font-medium text-muted-foreground", children: "Tenant ID" }),
+            /* @__PURE__ */ jsx25("p", { className: "text-sm font-mono", children: user.tenantId })
+          ] }),
+          /* @__PURE__ */ jsxs23("div", { children: [
+            /* @__PURE__ */ jsx25("p", { className: "text-sm font-medium text-muted-foreground", children: "Last Sign In" }),
+            /* @__PURE__ */ jsx25("p", { className: "text-sm", children: user.lastSignInAt ? new Date(user.lastSignInAt).toLocaleString() : "Never" })
+          ] })
+        ] })
+      ] }),
+      user.userRoles && user.userRoles.length > 0 && /* @__PURE__ */ jsxs23(Card, { className: "md:col-span-2", children: [
+        /* @__PURE__ */ jsxs23(CardHeader, { children: [
+          /* @__PURE__ */ jsx25(CardTitle, { children: "Roles" }),
+          /* @__PURE__ */ jsx25(CardDescription, { children: "Your assigned roles" })
+        ] }),
+        /* @__PURE__ */ jsx25(CardContent, { children: /* @__PURE__ */ jsx25("div", { className: "flex flex-wrap gap-2", children: user.userRoles.map((role) => /* @__PURE__ */ jsx25(
+          "div",
+          {
+            className: "px-3 py-1 bg-primary/10 text-primary rounded-full text-sm",
+            children: role.name
+          },
+          role.id
+        )) }) })
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/skeletons/auth-form-skeleton.tsx
+import { Skeleton as Skeleton3 } from "@mesob/ui/components/skeleton";
+import { jsx as jsx26, jsxs as jsxs24 } from "react/jsx-runtime";
+function AuthFormSkeleton() {
+  return /* @__PURE__ */ jsxs24("div", { className: "w-full max-w-md space-y-6 p-6", children: [
+    /* @__PURE__ */ jsxs24("div", { className: "space-y-2 text-center", children: [
+      /* @__PURE__ */ jsx26(Skeleton3, { className: "h-8 w-48 mx-auto" }),
+      /* @__PURE__ */ jsx26(Skeleton3, { className: "h-4 w-64 mx-auto" })
+    ] }),
+    /* @__PURE__ */ jsxs24("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs24("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx26(Skeleton3, { className: "h-4 w-24" }),
+        /* @__PURE__ */ jsx26(Skeleton3, { className: "h-10 w-full" })
+      ] }),
+      /* @__PURE__ */ jsxs24("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx26(Skeleton3, { className: "h-4 w-24" }),
+        /* @__PURE__ */ jsx26(Skeleton3, { className: "h-10 w-full" })
+      ] }),
+      /* @__PURE__ */ jsx26(Skeleton3, { className: "h-10 w-full" })
+    ] }),
+    /* @__PURE__ */ jsxs24("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx26(Skeleton3, { className: "h-px w-full" }),
+      /* @__PURE__ */ jsx26(Skeleton3, { className: "h-4 w-32 mx-auto" })
+    ] })
+  ] });
+}
+
+// src/utils/cookie.ts
+var isProduction = typeof process !== "undefined" && process.env.NODE_ENV === "production";
+var getSessionCookieName = (config) => {
+  const prefix = config.cookiePrefix || "";
+  const baseName = "session_token";
+  if (prefix) {
+    return `${prefix}_${baseName}`;
+  }
+  return isProduction ? "__Host-session_token" : baseName;
 };
+
+// src/hooks/use-session-cookie-name.ts
+function useSessionCookieName() {
+  const { config } = useConfig();
+  return getSessionCookieName(config);
+}
 export {
   AuthCard,
-  AuthClient,
-  AuthPageLayout,
-  AuthProvider,
-  Countdown,
-  ForgotPassword,
+  AuthErrorBoundary,
+  AuthFormSkeleton,
+  DataTable,
+  ErrorBoundary,
   ForgotPasswordPage,
-  ResetPasswordForm,
+  MesobAuthProvider,
+  PermissionsPage,
+  ProfilePage,
+  ProfileSkeleton,
   ResetPasswordPage,
-  SignIn,
+  RolesPage,
+  SessionsPage,
   SignInPage,
-  SignUp,
   SignUpPage,
+  TableSkeleton,
+  TenantsPage,
+  UsersPage,
   VerificationForm,
   VerifyEmailPage,
   VerifyPhonePage,
-  createAuthClient,
+  getSessionCookieName,
+  handleError,
   normalizePhone,
-  useAuth,
-  useSession
+  useApi,
+  useConfig,
+  useSession,
+  useSessionCookieName,
+  useTranslator
 };
 //# sourceMappingURL=index.js.map