@rqdhw3n/react-auth-flow 1.0.4 → 1.0.6

package/dist/index.cjs.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
+const react = require("react");
 const reactRouterDom = require("react-router-dom");
-const AuthContext = React.createContext(
+const AuthContext = react.createContext(
   void 0
 );
 AuthContext.displayName = "AuthContext";
@@ -64,150 +64,304 @@ const DEFAULT_ENDPOINTS = {
   refresh: "/auth/refresh",
   forgotPassword: "/auth/forgot-password",
   resetPassword: "/auth/reset-password",
-  verifyEmail: "/auth/verify-email"
-};
-const defaultAdapter = async (url, options) => {
-  const response = await fetch(url, options);
-  return response;
+  verifyEmail: "/auth/verify-email",
+  twoFactorVerify: "/auth/2fa/verify"
 };
+async function parseResponse(response) {
+  if (!response.ok) {
+    let errorData = null;
+    try {
+      errorData = await response.json();
+    } catch {
+      errorData = {
+        error: {
+          message: response.statusText || "Request failed",
+          statusCode: response.status
+        }
+      };
+    }
+    throw errorData;
+  }
+  if (response.status === 204) {
+    return {};
+  }
+  const contentType = response.headers.get("content-type") ?? "";
+  if (contentType.includes("application/json")) {
+    return response.json();
+  }
+  const text = await response.text();
+  return text ? { message: text } : {};
+}
+function isResponseLike(value) {
+  return typeof value === "object" && value !== null && "ok" in value && "status" in value && "headers" in value;
+}
+function createDefaultRequestAdapter(config) {
+  const { baseURL, credentials, headers } = config;
+  return async ({ endpoint, method, data, headers: requestHeaders }) => {
+    const response = await fetch(`${baseURL}${endpoint}`, {
+      method,
+      credentials,
+      headers: {
+        "Content-Type": "application/json",
+        ...headers,
+        ...requestHeaders
+      },
+      body: data === void 0 ? void 0 : JSON.stringify(data)
+    });
+    return parseResponse(response);
+  };
+}
+function createLegacyAdapter(config) {
+  const { adapter, baseURL, credentials, headers } = config;
+  return async ({ endpoint, method, data, headers: requestHeaders }) => {
+    const response = await adapter(`${baseURL}${endpoint}`, {
+      method,
+      credentials,
+      headers: {
+        "Content-Type": "application/json",
+        ...headers,
+        ...requestHeaders
+      },
+      body: data === void 0 ? void 0 : JSON.stringify(data)
+    });
+    return parseResponse(response);
+  };
+}
 function createAuthClient(config = {}) {
   const {
-    baseURL = "",
+    baseURL,
+    baseUrl,
     endpoints = {},
-    headers = {},
+    headers: initialHeaders = {},
     credentials = "include",
-    adapter = defaultAdapter
+    requestAdapter,
+    adapter
   } = config;
-  const finalEndpoints = { ...DEFAULT_ENDPOINTS, ...endpoints };
+  const resolvedBaseURL = baseURL ?? baseUrl ?? "";
+  const finalEndpoints = {
+    ...DEFAULT_ENDPOINTS,
+    ...endpoints
+  };
+  const headers = { ...initialHeaders };
+  const resolvedAdapter = requestAdapter ?? (adapter ? createLegacyAdapter({
+    adapter,
+    baseURL: resolvedBaseURL,
+    credentials,
+    headers
+  }) : createDefaultRequestAdapter({
+    baseURL: resolvedBaseURL,
+    credentials,
+    headers
+  }));
   async function request(method, endpoint, data) {
-    const url = `${baseURL}${endpoint}`;
-    const options = {
-      method,
-      credentials,
-      headers: {
-        "Content-Type": "application/json",
-        ...headers
-      }
-    };
-    if (data) {
-      options.body = JSON.stringify(data);
-    }
     try {
-      const response = await adapter(url, options);
-      if (!response.ok) {
-        let errorData = null;
-        try {
-          errorData = await response.json();
-        } catch {
-          errorData = {
-            error: {
-              message: response.statusText,
-              statusCode: response.status
-            }
-          };
-        }
-        throw errorData;
-      }
-      const contentType = response.headers.get("content-type");
-      if (contentType && contentType.includes("application/json")) {
-        return await response.json();
+      const result = await resolvedAdapter({
+        endpoint,
+        method,
+        data,
+        headers
+      });
+      if (isResponseLike(result)) {
+        return await parseResponse(result);
       }
-      return {};
+      return result ?? {};
     } catch (error) {
       throw normalizeError(error);
     }
   }
   return {
-    /**
-     * Login with email and password
-     */
     async login(email, password, rememberMe) {
-      const response = await request(
-        "POST",
-        finalEndpoints.login,
-        { email, password, rememberMe }
-      );
-      return response;
+      return request("POST", finalEndpoints.login, {
+        email,
+        password,
+        rememberMe
+      });
     },
-    /**
-     * Register a new account
-     */
     async register(payload) {
-      const response = await request(
-        "POST",
-        finalEndpoints.register,
-        payload
-      );
-      return response;
+      return request("POST", finalEndpoints.register, payload);
     },
-    /**
-     * Logout the user
-     */
     async logout() {
       await request("POST", finalEndpoints.logout);
     },
-    /**
-     * Get current user
-     */
     async me() {
-      const response = await request(
-        "GET",
-        finalEndpoints.me
-      );
-      return response;
+      return request("GET", finalEndpoints.me);
     },
-    /**
-     * Refresh the authentication session
-     */
     async refresh() {
-      const response = await request(
-        "POST",
-        finalEndpoints.refresh
-      );
-      return response;
+      return request("POST", finalEndpoints.refresh);
     },
-    /**
-     * Request a password reset
-     */
     async forgotPassword(email) {
-      await request("POST", finalEndpoints.forgotPassword, { email });
+      return request("POST", finalEndpoints.forgotPassword, {
+        email
+      });
     },
-    /**
-     * Reset password with token
-     */
     async resetPassword(token, password, confirmPassword) {
-      await request("POST", finalEndpoints.resetPassword, {
+      return request("POST", finalEndpoints.resetPassword, {
         token,
         password,
         confirmPassword
       });
     },
-    /**
-     * Verify email with token
-     */
     async verifyEmail(token, email) {
-      await request("POST", finalEndpoints.verifyEmail, { token, email });
+      return request("POST", finalEndpoints.verifyEmail, {
+        token,
+        email
+      });
+    },
+    async verifyTwoFactor(code) {
+      return request("POST", finalEndpoints.twoFactorVerify, {
+        code
+      });
     },
-    /**
-     * Set custom headers for subsequent requests
-     */
     setHeaders(newHeaders) {
       Object.assign(headers, newHeaders);
     },
-    /**
-     * Get current endpoints configuration
-     */
     getEndpoints() {
       return finalEndpoints;
     }
   };
 }
+const DEFAULT_STORAGE_KEY = "rq-auth-flow-user";
+const DEFAULT_OTP_LENGTH = 6;
+let memoryUser = null;
+function getStorage() {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  try {
+    return window.localStorage;
+  } catch {
+    return null;
+  }
+}
+function readStoredUser(storageKey) {
+  const storage = getStorage();
+  if (!storage) {
+    return memoryUser;
+  }
+  const rawValue = storage.getItem(storageKey);
+  if (!rawValue) {
+    return null;
+  }
+  try {
+    return JSON.parse(rawValue);
+  } catch {
+    storage.removeItem(storageKey);
+    return null;
+  }
+}
+function writeStoredUser(storageKey, user) {
+  const storage = getStorage();
+  memoryUser = user;
+  if (!storage) {
+    return;
+  }
+  if (user === null) {
+    storage.removeItem(storageKey);
+    return;
+  }
+  storage.setItem(storageKey, JSON.stringify(user));
+}
+function createAdminUser(email, mockUser) {
+  return {
+    id: 1,
+    name: "Admin Test",
+    email,
+    roles: ["admin"],
+    permissions: ["users.manage", "billing.edit"],
+    ...mockUser
+  };
+}
+function createRegisteredUser(name, email, mockUser) {
+  return {
+    id: 2,
+    name: name || "New User",
+    email,
+    roles: ["user"],
+    permissions: ["users.create"],
+    ...mockUser
+  };
+}
+function toSuccessResponse(message, user) {
+  return user ? { success: true, message, user } : { success: true, message };
+}
+function createMockAuthAdapter(options = {}) {
+  const {
+    endpoints = {},
+    mockStorageKey = DEFAULT_STORAGE_KEY,
+    mockUser
+  } = options;
+  const resolvedEndpoints = {
+    login: "/auth/login",
+    register: "/auth/register",
+    logout: "/auth/logout",
+    me: "/auth/me",
+    refresh: "/auth/refresh",
+    forgotPassword: "/auth/forgot-password",
+    resetPassword: "/auth/reset-password",
+    verifyEmail: "/auth/verify-email",
+    twoFactorVerify: "/auth/2fa/verify",
+    ...endpoints
+  };
+  return async ({ endpoint, data }) => {
+    if (endpoint === resolvedEndpoints.login) {
+      const payload = data ?? {};
+      const user = createAdminUser(payload.email ?? "admin@example.com", mockUser);
+      writeStoredUser(mockStorageKey, user);
+      return toSuccessResponse("Mock login successful.", user);
+    }
+    if (endpoint === resolvedEndpoints.register) {
+      const payload = data ?? {};
+      const user = createRegisteredUser(
+        payload.name,
+        payload.email ?? "user@example.com",
+        mockUser
+      );
+      writeStoredUser(mockStorageKey, user);
+      return toSuccessResponse("Mock registration successful.", user);
+    }
+    if (endpoint === resolvedEndpoints.logout) {
+      writeStoredUser(mockStorageKey, null);
+      return toSuccessResponse("Mock logout successful.");
+    }
+    if (endpoint === resolvedEndpoints.me || endpoint === resolvedEndpoints.refresh) {
+      const user = readStoredUser(mockStorageKey);
+      return user ? { success: true, user } : { success: true, user: null };
+    }
+    if (endpoint === resolvedEndpoints.forgotPassword) {
+      return toSuccessResponse("Mock password reset request accepted.");
+    }
+    if (endpoint === resolvedEndpoints.resetPassword) {
+      return toSuccessResponse("Mock password reset successful.");
+    }
+    if (endpoint === resolvedEndpoints.verifyEmail) {
+      return toSuccessResponse("Mock email verification successful.");
+    }
+    if (endpoint === resolvedEndpoints.twoFactorVerify) {
+      const payload = data ?? {};
+      const code = payload.code?.trim() ?? "";
+      if (code.length !== DEFAULT_OTP_LENGTH) {
+        throw {
+          code: "INVALID_2FA_CODE",
+          message: `Mock 2FA code must be exactly ${DEFAULT_OTP_LENGTH} characters.`
+        };
+      }
+      return toSuccessResponse("Mock 2FA verification successful.");
+    }
+    return toSuccessResponse("Mock request successful.");
+  };
+}
 const initialState = {
   user: null,
   isAuthenticated: false,
   isLoading: false,
   error: null
 };
+const defaultTheme = {
+  primaryColor: "#2563eb",
+  primaryHoverColor: "#1d4ed8",
+  radius: "14px",
+  fontFamily: "inherit"
+};
 function authReducer(state, action) {
   switch (action.type) {
     case "SET_LOADING":
@@ -223,65 +377,129 @@ function authReducer(state, action) {
         isLoading: false
       };
     case "LOGOUT":
-      return initialState;
+      return { ...initialState };
     default:
       return state;
   }
 }
+function toAuthError(error) {
+  if (!error) {
+    return null;
+  }
+  return typeof error === "string" ? {
+    code: "AUTH_ERROR",
+    message: error
+  } : error;
+}
 const AuthProvider = ({
   children,
-  baseURL = "",
+  baseURL,
+  baseUrl,
   endpoints = {},
+  headers = {},
+  credentials = "include",
   onAuthError,
   autoRefresh = true,
-  refreshInterval = 5 * 60 * 1e3
-  // 5 minutes
+  autoRestore = true,
+  refreshInterval = 5 * 60 * 1e3,
+  requestAdapter,
+  theme,
+  mock = false,
+  mockStorageKey = "rq-auth-flow-user",
+  mockUser
 }) => {
-  const [state, dispatch] = React.useReducer(authReducer, initialState);
-  const clientRef = React.useRef(
-    createAuthClient({
-      baseURL,
+  const [state, dispatch] = react.useReducer(authReducer, initialState);
+  const resolvedTheme = { ...defaultTheme, ...theme };
+  const resolvedBaseURL = baseURL ?? baseUrl ?? "";
+  const client = react.useMemo(() => {
+    const resolvedRequestAdapter = mock ? createMockAuthAdapter({
       endpoints,
-      credentials: "include"
-    })
-  );
-  const client = clientRef.current;
-  const handleError = React.useCallback(
+      mockStorageKey,
+      mockUser
+    }) : requestAdapter;
+    return createAuthClient({
+      baseURL: resolvedBaseURL,
+      endpoints,
+      headers,
+      credentials,
+      requestAdapter: resolvedRequestAdapter
+    });
+  }, [
+    credentials,
+    endpoints,
+    headers,
+    mock,
+    mockStorageKey,
+    mockUser,
+    requestAdapter,
+    resolvedBaseURL
+  ]);
+  const handleError = react.useCallback(
     (error) => {
       dispatch({ type: "SET_ERROR", payload: error });
       onAuthError?.(error);
     },
     [onAuthError]
   );
-  const restoreSession = React.useCallback(async () => {
+  const clearError = react.useCallback(() => {
+    dispatch({ type: "SET_ERROR", payload: null });
+  }, []);
+  const setError = react.useCallback(
+    (error) => {
+      const nextError = toAuthError(error);
+      dispatch({ type: "SET_ERROR", payload: nextError });
+      if (nextError) {
+        onAuthError?.(nextError);
+      }
+    },
+    [onAuthError]
+  );
+  const setUser = react.useCallback((user) => {
+    dispatch({ type: "SET_USER", payload: user });
+  }, []);
+  const resolveAction = react.useCallback((response) => {
+    if (response?.user) {
+      dispatch({ type: "SET_USER", payload: response.user });
+      return response.user;
+    }
+    dispatch({ type: "SET_ERROR", payload: null });
+    return null;
+  }, []);
+  const restoreSession = react.useCallback(async () => {
     dispatch({ type: "SET_LOADING", payload: true });
     try {
       const response = await client.me();
       if (response.user) {
         dispatch({ type: "SET_USER", payload: response.user });
-      } else {
-        dispatch({ type: "LOGOUT" });
+        return response.user;
       }
-    } catch (_error) {
-      dispatch({ type: "SET_LOADING", payload: false });
+      dispatch({ type: "LOGOUT" });
+      return null;
+    } catch {
+      dispatch({ type: "LOGOUT" });
+      return null;
     }
   }, [client]);
-  const refreshSession = React.useCallback(async () => {
+  const refreshSession = react.useCallback(async () => {
+    dispatch({ type: "SET_LOADING", payload: true });
     try {
       const response = await client.refresh();
-      if (response.user) {
-        dispatch({ type: "SET_USER", payload: response.user });
-      }
+      return resolveAction(response);
     } catch (error) {
       const authError = normalizeError(error);
       handleError(authError);
+      return null;
     }
-  }, [client, handleError]);
-  const login = React.useCallback(
+  }, [client, handleError, resolveAction]);
+  const login = react.useCallback(
     async (payload) => {
       dispatch({ type: "SET_LOADING", payload: true });
       try {
-        const response = await client.login(payload.email, payload.password);
+        const response = await client.login(
+          payload.email,
+          payload.password,
+          payload.rememberMe
+        );
         if (!response.user) {
           throw new Error("No user data in response");
         }
@@ -295,7 +513,7 @@ const AuthProvider = ({
     },
     [client, handleError]
   );
-  const register = React.useCallback(
+  const register = react.useCallback(
     async (payload) => {
       dispatch({ type: "SET_LOADING", payload: true });
       try {
@@ -313,93 +531,174 @@ const AuthProvider = ({
     },
     [client, handleError]
   );
-  const logout = React.useCallback(async () => {
+  const logout = react.useCallback(async () => {
     dispatch({ type: "SET_LOADING", payload: true });
     try {
       await client.logout();
-    } catch (error) {
-      console.error("Logout error:", error);
+    } catch {
     } finally {
       dispatch({ type: "LOGOUT" });
     }
   }, [client]);
-  const forgotPassword = React.useCallback(
+  const forgotPassword = react.useCallback(
     async (payload) => {
       dispatch({ type: "SET_LOADING", payload: true });
       try {
-        await client.forgotPassword(payload.email);
-        dispatch({ type: "SET_LOADING", payload: false });
+        const response = await client.forgotPassword(payload.email);
+        resolveAction(response);
+        return response;
       } catch (error) {
         const authError = normalizeError(error);
         handleError(authError);
         throw authError;
       }
     },
-    [client, handleError]
+    [client, handleError, resolveAction]
   );
-  const resetPassword = React.useCallback(
+  const resetPassword = react.useCallback(
     async (payload) => {
       dispatch({ type: "SET_LOADING", payload: true });
       try {
-        await client.resetPassword(
+        const response = await client.resetPassword(
           payload.token,
           payload.password,
           payload.confirmPassword
         );
-        dispatch({ type: "SET_LOADING", payload: false });
+        resolveAction(response);
+        return response;
       } catch (error) {
         const authError = normalizeError(error);
         handleError(authError);
         throw authError;
       }
     },
-    [client, handleError]
+    [client, handleError, resolveAction]
   );
-  const verifyEmail = React.useCallback(
+  const verifyEmail = react.useCallback(
     async (payload) => {
       dispatch({ type: "SET_LOADING", payload: true });
       try {
-        await client.verifyEmail(payload.token, payload.email);
-        dispatch({ type: "SET_LOADING", payload: false });
+        const response = await client.verifyEmail(payload.token, payload.email);
+        resolveAction(response);
+        return response;
       } catch (error) {
         const authError = normalizeError(error);
         handleError(authError);
         throw authError;
       }
     },
-    [client, handleError]
+    [client, handleError, resolveAction]
   );
-  const setUser = React.useCallback((user) => {
-    dispatch({ type: "SET_USER", payload: user });
-  }, []);
-  React.useEffect(() => {
-    restoreSession();
-  }, [restoreSession]);
-  React.useEffect(() => {
+  const verifyTwoFactor = react.useCallback(
+    async (payload) => {
+      dispatch({ type: "SET_LOADING", payload: true });
+      try {
+        const response = await client.verifyTwoFactor(payload.code);
+        resolveAction(response);
+        return response;
+      } catch (error) {
+        const authError = normalizeError(error);
+        handleError(authError);
+        throw authError;
+      }
+    },
+    [client, handleError, resolveAction]
+  );
+  const hasRole = react.useCallback(
+    (role) => state.user?.roles?.includes(role) ?? false,
+    [state.user]
+  );
+  const hasAnyRole = react.useCallback(
+    (roles) => roles.some((role) => state.user?.roles?.includes(role)),
+    [state.user]
+  );
+  const hasPermission = react.useCallback(
+    (permission) => state.user?.permissions?.includes(permission) ?? false,
+    [state.user]
+  );
+  const hasAnyPermission = react.useCallback(
+    (permissions) => permissions.some(
+      (permission) => state.user?.permissions?.includes(permission)
+    ),
+    [state.user]
+  );
+  const hasAllPermissions = react.useCallback(
+    (permissions) => permissions.every(
+      (permission) => state.user?.permissions?.includes(permission)
+    ),
+    [state.user]
+  );
+  react.useEffect(() => {
+    if (!autoRestore) {
+      return;
+    }
+    void restoreSession();
+  }, [autoRestore, restoreSession]);
+  react.useEffect(() => {
     if (!autoRefresh || !state.isAuthenticated) {
       return;
     }
-    const interval = setInterval(() => {
-      refreshSession();
+    const intervalId = window.setInterval(() => {
+      void refreshSession();
     }, refreshInterval);
-    return () => clearInterval(interval);
-  }, [autoRefresh, state.isAuthenticated, refreshSession, refreshInterval]);
-  const value = {
-    ...state,
-    login,
-    register,
-    logout,
-    forgotPassword,
-    resetPassword,
-    verifyEmail,
-    refreshSession,
-    restoreSession,
-    setUser
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(AuthContext.Provider, { value, children });
+    return () => window.clearInterval(intervalId);
+  }, [autoRefresh, refreshInterval, refreshSession, state.isAuthenticated]);
+  const themeStyle = react.useMemo(
+    () => ({
+      "--rq-auth-primary": resolvedTheme.primaryColor,
+      "--rq-auth-primary-hover": resolvedTheme.primaryHoverColor,
+      "--rq-auth-radius": resolvedTheme.radius,
+      "--rq-auth-font-family": resolvedTheme.fontFamily,
+      fontFamily: resolvedTheme.fontFamily
+    }),
+    [resolvedTheme.fontFamily, resolvedTheme.primaryColor, resolvedTheme.primaryHoverColor, resolvedTheme.radius]
+  );
+  const value = react.useMemo(
+    () => ({
+      ...state,
+      login,
+      register,
+      logout,
+      forgotPassword,
+      resetPassword,
+      verifyEmail,
+      verifyTwoFactor,
+      refreshSession,
+      restoreSession,
+      clearError,
+      setError,
+      setUser,
+      hasRole,
+      hasAnyRole,
+      hasPermission,
+      hasAnyPermission,
+      hasAllPermissions
+    }),
+    [
+      clearError,
+      forgotPassword,
+      hasAllPermissions,
+      hasAnyPermission,
+      hasAnyRole,
+      hasPermission,
+      hasRole,
+      login,
+      logout,
+      refreshSession,
+      register,
+      resetPassword,
+      restoreSession,
+      setError,
+      setUser,
+      state,
+      verifyEmail,
+      verifyTwoFactor
+    ]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(AuthContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rq-auth-theme", style: themeStyle, children }) });
 };
 function useAuth() {
-  const context = React.useContext(AuthContext);
+  const context = react.useContext(AuthContext);
   if (!context) {
     throw new Error("useAuth must be used within an AuthProvider");
   }
@@ -408,16 +707,53 @@ function useAuth() {
 function cn(...classes) {
   return classes.filter(Boolean).join(" ");
 }
-const DEFAULT_CLASSES$4 = {
-  form: "space-y-5",
-  field: "space-y-2",
-  label: "block text-sm font-medium text-slate-700",
-  input: "w-full rounded-xl border border-slate-300 bg-white px-4 py-3 text-sm text-slate-900 outline-none transition placeholder:text-slate-400 focus:border-blue-500 focus:ring-4 focus:ring-blue-100 disabled:cursor-not-allowed disabled:bg-slate-100",
-  button: "w-full rounded-xl bg-blue-600 px-4 py-3 text-sm font-semibold text-white transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-60",
-  error: "rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-600",
-  title: "text-2xl font-bold text-slate-900",
-  subtitle: "mt-1 text-sm text-slate-500"
+const AUTH_FORM_CLASSES = {
+  container: "rq-auth-container",
+  card: "rq-auth-card",
+  shell: "rq-auth-shell",
+  brand: "rq-auth-brand",
+  footer: "rq-auth-footer",
+  header: "rq-auth-header",
+  form: "rq-auth-form",
+  field: "rq-auth-field",
+  label: "rq-auth-label",
+  input: "rq-auth-input",
+  button: "rq-auth-button",
+  buttonContent: "rq-auth-button-content",
+  buttonSpinner: "rq-auth-button-spinner",
+  error: "rq-auth-error",
+  success: "rq-auth-success",
+  title: "rq-auth-title",
+  subtitle: "rq-auth-subtitle",
+  checkbox: "rq-auth-checkbox",
+  checkboxInput: "rq-auth-checkbox-input",
+  checkboxLabel: "rq-auth-checkbox-label",
+  otpGroup: "rq-auth-otp-group",
+  otpInput: "rq-auth-otp-input",
+  socialButton: "rq-auth-social-button",
+  socialIcon: "rq-auth-social-icon",
+  socialLabel: "rq-auth-social-label"
 };
+const AuthLayout = ({
+  children,
+  title,
+  subtitle,
+  className,
+  cardClassName,
+  brand,
+  footer
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn(AUTH_FORM_CLASSES.shell, className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(AUTH_FORM_CLASSES.card, cardClassName), children: [
+    brand ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: AUTH_FORM_CLASSES.brand, children: brand }) : null,
+    (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: AUTH_FORM_CLASSES.header, children: [
+      title ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: AUTH_FORM_CLASSES.title, children: title }) : null,
+      subtitle ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: AUTH_FORM_CLASSES.subtitle, children: subtitle }) : null
+    ] }),
+    children,
+    footer ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: AUTH_FORM_CLASSES.footer, children: footer }) : null
+  ] }) });
+};
+AuthLayout.displayName = "AuthLayout";
 const LoginForm = ({
   className,
   formClassName,
@@ -438,15 +774,21 @@ const LoginForm = ({
   onSuccess,
   onError
 }) => {
-  const { login, isLoading: authLoading, error: authError } = useAuth();
-  const [formError, setFormError] = React.useState("");
-  const [email, setEmail] = React.useState("");
-  const [password, setPassword] = React.useState("");
-  const [rememberMe, setRememberMe] = React.useState(false);
+  const {
+    login,
+    clearError,
+    isLoading: authLoading,
+    error: authError
+  } = useAuth();
+  const [formError, setFormError] = react.useState("");
+  const [email, setEmail] = react.useState("");
+  const [password, setPassword] = react.useState("");
+  const [rememberMe, setRememberMe] = react.useState(false);
   const isLoading = authLoading;
   const error = formError || authError?.message;
   const handleSubmit = async (e) => {
     e.preventDefault();
+    clearError();
     setFormError("");
     if (!email || !password) {
       setFormError("Email and password are required");
@@ -464,89 +806,93 @@ const LoginForm = ({
       });
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
-    showTitle && title && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn(DEFAULT_CLASSES$4.title, titleClassName), children: title }),
-      subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(DEFAULT_CLASSES$4.subtitle, subtitleClassName), children: subtitle })
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(AUTH_FORM_CLASSES.container, className), children: [
+    showTitle && title && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: AUTH_FORM_CLASSES.header, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn(AUTH_FORM_CLASSES.title, titleClassName), children: title }),
+      subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(AUTH_FORM_CLASSES.subtitle, subtitleClassName), children: subtitle })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className: cn(DEFAULT_CLASSES$4.form, formClassName), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(DEFAULT_CLASSES$4.field, fieldClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "email", className: cn(DEFAULT_CLASSES$4.label, labelClassName), children: labels.email || "Email" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            id: "email",
-            type: "email",
-            value: email,
-            onChange: (e) => setEmail(e.target.value),
-            placeholder: placeholders.email || "your@email.com",
-            disabled: isLoading,
-            className: cn(DEFAULT_CLASSES$4.input, inputClassName),
-            required: true
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(DEFAULT_CLASSES$4.field, fieldClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "password", className: cn(DEFAULT_CLASSES$4.label, labelClassName), children: labels.password || "Password" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            id: "password",
-            type: "password",
-            value: password,
-            onChange: (e) => setPassword(e.target.value),
-            placeholder: placeholders.password || "••••••••",
-            disabled: isLoading,
-            className: cn(DEFAULT_CLASSES$4.input, inputClassName),
-            required: true
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            id: "rememberMe",
-            type: "checkbox",
-            checked: rememberMe,
-            onChange: (e) => setRememberMe(e.target.checked),
-            disabled: isLoading,
-            className: "h-4 w-4 rounded border-slate-300"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "label",
-          {
-            htmlFor: "rememberMe",
-            className: "ml-2 text-sm text-slate-700",
-            children: labels.rememberMe || "Remember me"
-          }
-        )
-      ] }),
-      error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(DEFAULT_CLASSES$4.error, errorClassName), children: error }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "submit",
-          disabled: isLoading,
-          className: cn(DEFAULT_CLASSES$4.button, buttonClassName),
-          children: isLoading ? loadingText : submitButtonText
-        }
-      )
-    ] })
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "form",
+      {
+        onSubmit: handleSubmit,
+        className: cn(AUTH_FORM_CLASSES.form, formClassName),
+        "aria-busy": isLoading,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(AUTH_FORM_CLASSES.field, fieldClassName), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "email", className: cn(AUTH_FORM_CLASSES.label, labelClassName), children: labels.email || "Email" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                id: "email",
+                type: "email",
+                value: email,
+                onChange: (e) => setEmail(e.target.value),
+                placeholder: placeholders.email || "your@email.com",
+                disabled: isLoading,
+                className: cn(AUTH_FORM_CLASSES.input, inputClassName),
+                autoComplete: "username",
+                required: true
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(AUTH_FORM_CLASSES.field, fieldClassName), children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "label",
+              {
+                htmlFor: "password",
+                className: cn(AUTH_FORM_CLASSES.label, labelClassName),
+                children: labels.password || "Password"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                id: "password",
+                type: "password",
+                value: password,
+                onChange: (e) => setPassword(e.target.value),
+                placeholder: placeholders.password || "Enter your password",
+                disabled: isLoading,
+                className: cn(AUTH_FORM_CLASSES.input, inputClassName),
+                autoComplete: "current-password",
+                required: true
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: "rememberMe", className: AUTH_FORM_CLASSES.checkbox, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                id: "rememberMe",
+                type: "checkbox",
+                checked: rememberMe,
+                onChange: (e) => setRememberMe(e.target.checked),
+                disabled: isLoading,
+                className: AUTH_FORM_CLASSES.checkboxInput
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: AUTH_FORM_CLASSES.checkboxLabel, children: labels.rememberMe || "Remember me" })
+          ] }),
+          error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(AUTH_FORM_CLASSES.error, errorClassName), role: "alert", children: error }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "submit",
+              disabled: isLoading,
+              className: cn(AUTH_FORM_CLASSES.button, buttonClassName),
+              "aria-busy": isLoading,
+              children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: AUTH_FORM_CLASSES.buttonContent, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: AUTH_FORM_CLASSES.buttonSpinner, "aria-hidden": "true" }),
+                loadingText
+              ] }) : submitButtonText
+            }
+          )
+        ]
+      }
+    )
   ] });
 };
 LoginForm.displayName = "LoginForm";
-const DEFAULT_CLASSES$3 = {
-  form: "space-y-5",
-  field: "space-y-2",
-  label: "block text-sm font-medium text-slate-700",
-  input: "w-full rounded-xl border border-slate-300 bg-white px-4 py-3 text-sm text-slate-900 outline-none transition placeholder:text-slate-400 focus:border-blue-500 focus:ring-4 focus:ring-blue-100 disabled:cursor-not-allowed disabled:bg-slate-100",
-  button: "w-full rounded-xl bg-blue-600 px-4 py-3 text-sm font-semibold text-white transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-60",
-  error: "rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-600",
-  title: "text-2xl font-bold text-slate-900",
-  subtitle: "mt-1 text-sm text-slate-500"
-};
 const RegisterForm = ({
   className,
   formClassName,
@@ -567,16 +913,22 @@ const RegisterForm = ({
   onSuccess,
   onError
 }) => {
-  const { register, isLoading: authLoading, error: authError } = useAuth();
-  const [formError, setFormError] = React.useState("");
-  const [name, setName] = React.useState("");
-  const [email, setEmail] = React.useState("");
-  const [password, setPassword] = React.useState("");
-  const [confirmPassword, setConfirmPassword] = React.useState("");
+  const {
+    register,
+    clearError,
+    isLoading: authLoading,
+    error: authError
+  } = useAuth();
+  const [formError, setFormError] = react.useState("");
+  const [name, setName] = react.useState("");
+  const [email, setEmail] = react.useState("");
+  const [password, setPassword] = react.useState("");
+  const [confirmPassword, setConfirmPassword] = react.useState("");
   const isLoading = authLoading;
   const error = formError || authError?.message;
   const handleSubmit = async (e) => {
     e.preventDefault();
+    clearError();
     setFormError("");
     if (!name || !email || !password || !confirmPassword) {
       setFormError("All fields are required");
@@ -607,101 +959,120 @@ const RegisterForm = ({
       });
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
-    showTitle && title && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn(DEFAULT_CLASSES$3.title, titleClassName), children: title }),
-      subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(DEFAULT_CLASSES$3.subtitle, subtitleClassName), children: subtitle })
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(AUTH_FORM_CLASSES.container, className), children: [
+    showTitle && title && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: AUTH_FORM_CLASSES.header, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn(AUTH_FORM_CLASSES.title, titleClassName), children: title }),
+      subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(AUTH_FORM_CLASSES.subtitle, subtitleClassName), children: subtitle })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className: cn(DEFAULT_CLASSES$3.form, formClassName), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(DEFAULT_CLASSES$3.field, fieldClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "name", className: cn(DEFAULT_CLASSES$3.label, labelClassName), children: labels.name || "Full Name" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            id: "name",
-            type: "text",
-            value: name,
-            onChange: (e) => setName(e.target.value),
-            placeholder: placeholders.name || "John Doe",
-            disabled: isLoading,
-            className: cn(DEFAULT_CLASSES$3.input, inputClassName),
-            required: true
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(DEFAULT_CLASSES$3.field, fieldClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "email", className: cn(DEFAULT_CLASSES$3.label, labelClassName), children: labels.email || "Email" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            id: "email",
-            type: "email",
-            value: email,
-            onChange: (e) => setEmail(e.target.value),
-            placeholder: placeholders.email || "your@email.com",
-            disabled: isLoading,
-            className: cn(DEFAULT_CLASSES$3.input, inputClassName),
-            required: true
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(DEFAULT_CLASSES$3.field, fieldClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "password", className: cn(DEFAULT_CLASSES$3.label, labelClassName), children: labels.password || "Password" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            id: "password",
-            type: "password",
-            value: password,
-            onChange: (e) => setPassword(e.target.value),
-            placeholder: placeholders.password || "••••••••",
-            disabled: isLoading,
-            className: cn(DEFAULT_CLASSES$3.input, inputClassName),
-            required: true
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(DEFAULT_CLASSES$3.field, fieldClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "confirmPassword", className: cn(DEFAULT_CLASSES$3.label, labelClassName), children: labels.confirmPassword || "Confirm Password" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            id: "confirmPassword",
-            type: "password",
-            value: confirmPassword,
-            onChange: (e) => setConfirmPassword(e.target.value),
-            placeholder: placeholders.confirmPassword || "••••••••",
-            disabled: isLoading,
-            className: cn(DEFAULT_CLASSES$3.input, inputClassName),
-            required: true
-          }
-        )
-      ] }),
-      error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(DEFAULT_CLASSES$3.error, errorClassName), children: error }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "submit",
-          disabled: isLoading,
-          className: cn(DEFAULT_CLASSES$3.button, buttonClassName),
-          children: isLoading ? loadingText : submitButtonText
-        }
-      )
-    ] })
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "form",
+      {
+        onSubmit: handleSubmit,
+        className: cn(AUTH_FORM_CLASSES.form, formClassName),
+        "aria-busy": isLoading,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(AUTH_FORM_CLASSES.field, fieldClassName), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "name", className: cn(AUTH_FORM_CLASSES.label, labelClassName), children: labels.name || "Full Name" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                id: "name",
+                type: "text",
+                value: name,
+                onChange: (e) => setName(e.target.value),
+                placeholder: placeholders.name || "John Doe",
+                disabled: isLoading,
+                className: cn(AUTH_FORM_CLASSES.input, inputClassName),
+                autoComplete: "name",
+                required: true
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(AUTH_FORM_CLASSES.field, fieldClassName), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "email", className: cn(AUTH_FORM_CLASSES.label, labelClassName), children: labels.email || "Email" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                id: "email",
+                type: "email",
+                value: email,
+                onChange: (e) => setEmail(e.target.value),
+                placeholder: placeholders.email || "your@email.com",
+                disabled: isLoading,
+                className: cn(AUTH_FORM_CLASSES.input, inputClassName),
+                autoComplete: "email",
+                required: true
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(AUTH_FORM_CLASSES.field, fieldClassName), children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "label",
+              {
+                htmlFor: "password",
+                className: cn(AUTH_FORM_CLASSES.label, labelClassName),
+                children: labels.password || "Password"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                id: "password",
+                type: "password",
+                value: password,
+                onChange: (e) => setPassword(e.target.value),
+                placeholder: placeholders.password || "Create a password",
+                disabled: isLoading,
+                className: cn(AUTH_FORM_CLASSES.input, inputClassName),
+                autoComplete: "new-password",
+                required: true
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(AUTH_FORM_CLASSES.field, fieldClassName), children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "label",
+              {
+                htmlFor: "confirmPassword",
+                className: cn(AUTH_FORM_CLASSES.label, labelClassName),
+                children: labels.confirmPassword || "Confirm Password"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                id: "confirmPassword",
+                type: "password",
+                value: confirmPassword,
+                onChange: (e) => setConfirmPassword(e.target.value),
+                placeholder: placeholders.confirmPassword || "Confirm your password",
+                disabled: isLoading,
+                className: cn(AUTH_FORM_CLASSES.input, inputClassName),
+                autoComplete: "new-password",
+                required: true
+              }
+            )
+          ] }),
+          error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(AUTH_FORM_CLASSES.error, errorClassName), role: "alert", children: error }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "submit",
+              disabled: isLoading,
+              className: cn(AUTH_FORM_CLASSES.button, buttonClassName),
+              "aria-busy": isLoading,
+              children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: AUTH_FORM_CLASSES.buttonContent, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: AUTH_FORM_CLASSES.buttonSpinner, "aria-hidden": "true" }),
+                loadingText
+              ] }) : submitButtonText
+            }
+          )
+        ]
+      }
+    )
   ] });
 };
 RegisterForm.displayName = "RegisterForm";
-const DEFAULT_CLASSES$2 = {
-  form: "space-y-5",
-  field: "space-y-2",
-  label: "block text-sm font-medium text-slate-700",
-  input: "w-full rounded-xl border border-slate-300 bg-white px-4 py-3 text-sm text-slate-900 outline-none transition placeholder:text-slate-400 focus:border-blue-500 focus:ring-4 focus:ring-blue-100 disabled:cursor-not-allowed disabled:bg-slate-100",
-  button: "w-full rounded-xl bg-blue-600 px-4 py-3 text-sm font-semibold text-white transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-60",
-  error: "rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-600",
-  success: "rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700",
-  title: "text-2xl font-bold text-slate-900",
-  subtitle: "mt-1 text-sm text-slate-500"
-};
 const ForgotPasswordForm = ({
   className,
   formClassName,
@@ -725,16 +1096,18 @@ const ForgotPasswordForm = ({
 }) => {
   const {
     forgotPassword,
+    clearError,
     isLoading: authLoading,
     error: authError
   } = useAuth();
-  const [formError, setFormError] = React.useState("");
-  const [email, setEmail] = React.useState("");
-  const [successMessage, setSuccessMessage] = React.useState("");
+  const [formError, setFormError] = react.useState("");
+  const [email, setEmail] = react.useState("");
+  const [successMessage, setSuccessMessage] = react.useState("");
   const isLoading = authLoading;
   const error = formError || authError?.message;
   const handleSubmit = async (e) => {
     e.preventDefault();
+    clearError();
     setFormError("");
     setSuccessMessage("");
     if (!email) {
@@ -756,61 +1129,63 @@ const ForgotPasswordForm = ({
     }
   };
   if (successMessage) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
-      showTitle && title && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn(DEFAULT_CLASSES$2.title, titleClassName), children: title }),
-        subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(DEFAULT_CLASSES$2.subtitle, subtitleClassName), children: subtitle })
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(AUTH_FORM_CLASSES.container, className), children: [
+      showTitle && title && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: AUTH_FORM_CLASSES.header, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn(AUTH_FORM_CLASSES.title, titleClassName), children: title }),
+        subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(AUTH_FORM_CLASSES.subtitle, subtitleClassName), children: subtitle })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(DEFAULT_CLASSES$2.success, successClassName), children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: successMessage }) })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(AUTH_FORM_CLASSES.success, successClassName), role: "status", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: successMessage }) })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
-    showTitle && title && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn(DEFAULT_CLASSES$2.title, titleClassName), children: title }),
-      subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(DEFAULT_CLASSES$2.subtitle, subtitleClassName), children: subtitle })
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(AUTH_FORM_CLASSES.container, className), children: [
+    showTitle && title && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: AUTH_FORM_CLASSES.header, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn(AUTH_FORM_CLASSES.title, titleClassName), children: title }),
+      subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(AUTH_FORM_CLASSES.subtitle, subtitleClassName), children: subtitle })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className: cn(DEFAULT_CLASSES$2.form, formClassName), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(DEFAULT_CLASSES$2.field, fieldClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "email", className: cn(DEFAULT_CLASSES$2.label, labelClassName), children: labels.email || "Email" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            id: "email",
-            type: "email",
-            value: email,
-            onChange: (e) => setEmail(e.target.value),
-            placeholder: placeholders.email || "your@email.com",
-            disabled: isLoading,
-            className: cn(DEFAULT_CLASSES$2.input, inputClassName),
-            required: true
-          }
-        )
-      ] }),
-      error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(DEFAULT_CLASSES$2.error, errorClassName), children: error }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "submit",
-          disabled: isLoading,
-          className: cn(DEFAULT_CLASSES$2.button, buttonClassName),
-          children: isLoading ? loadingText : submitButtonText
-        }
-      )
-    ] })
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "form",
+      {
+        onSubmit: handleSubmit,
+        className: cn(AUTH_FORM_CLASSES.form, formClassName),
+        "aria-busy": isLoading,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(AUTH_FORM_CLASSES.field, fieldClassName), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "email", className: cn(AUTH_FORM_CLASSES.label, labelClassName), children: labels.email || "Email" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                id: "email",
+                type: "email",
+                value: email,
+                onChange: (e) => setEmail(e.target.value),
+                placeholder: placeholders.email || "your@email.com",
+                disabled: isLoading,
+                className: cn(AUTH_FORM_CLASSES.input, inputClassName),
+                autoComplete: "email",
+                required: true
+              }
+            )
+          ] }),
+          error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(AUTH_FORM_CLASSES.error, errorClassName), role: "alert", children: error }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "submit",
+              disabled: isLoading,
+              className: cn(AUTH_FORM_CLASSES.button, buttonClassName),
+              "aria-busy": isLoading,
+              children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: AUTH_FORM_CLASSES.buttonContent, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: AUTH_FORM_CLASSES.buttonSpinner, "aria-hidden": "true" }),
+                loadingText
+              ] }) : submitButtonText
+            }
+          )
+        ]
+      }
+    )
   ] });
 };
 ForgotPasswordForm.displayName = "ForgotPasswordForm";
-const DEFAULT_CLASSES$1 = {
-  form: "space-y-5",
-  field: "space-y-2",
-  label: "block text-sm font-medium text-slate-700",
-  input: "w-full rounded-xl border border-slate-300 bg-white px-4 py-3 text-sm text-slate-900 outline-none transition placeholder:text-slate-400 focus:border-blue-500 focus:ring-4 focus:ring-blue-100 disabled:cursor-not-allowed disabled:bg-slate-100",
-  button: "w-full rounded-xl bg-blue-600 px-4 py-3 text-sm font-semibold text-white transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-60",
-  error: "rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-600",
-  success: "rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700",
-  title: "text-2xl font-bold text-slate-900",
-  subtitle: "mt-1 text-sm text-slate-500"
-};
 const ResetPasswordForm = ({
   token,
   className,
@@ -835,17 +1210,19 @@ const ResetPasswordForm = ({
 }) => {
   const {
     resetPassword,
+    clearError,
     isLoading: authLoading,
     error: authError
   } = useAuth();
-  const [formError, setFormError] = React.useState("");
-  const [password, setPassword] = React.useState("");
-  const [confirmPassword, setConfirmPassword] = React.useState("");
-  const [successMessage, setSuccessMessage] = React.useState("");
+  const [formError, setFormError] = react.useState("");
+  const [password, setPassword] = react.useState("");
+  const [confirmPassword, setConfirmPassword] = react.useState("");
+  const [successMessage, setSuccessMessage] = react.useState("");
   const isLoading = authLoading;
   const error = formError || authError?.message;
   const handleSubmit = async (e) => {
     e.preventDefault();
+    clearError();
     setFormError("");
     setSuccessMessage("");
     if (!password || !confirmPassword) {
@@ -876,77 +1253,94 @@ const ResetPasswordForm = ({
     }
   };
   if (successMessage) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
-      showTitle && title && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn(DEFAULT_CLASSES$1.title, titleClassName), children: title }),
-        subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(DEFAULT_CLASSES$1.subtitle, subtitleClassName), children: subtitle })
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(AUTH_FORM_CLASSES.container, className), children: [
+      showTitle && title && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: AUTH_FORM_CLASSES.header, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn(AUTH_FORM_CLASSES.title, titleClassName), children: title }),
+        subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(AUTH_FORM_CLASSES.subtitle, subtitleClassName), children: subtitle })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(DEFAULT_CLASSES$1.success, successClassName), children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: successMessage }) })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(AUTH_FORM_CLASSES.success, successClassName), role: "status", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: successMessage }) })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
-    showTitle && title && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn(DEFAULT_CLASSES$1.title, titleClassName), children: title }),
-      subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(DEFAULT_CLASSES$1.subtitle, subtitleClassName), children: subtitle })
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(AUTH_FORM_CLASSES.container, className), children: [
+    showTitle && title && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: AUTH_FORM_CLASSES.header, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn(AUTH_FORM_CLASSES.title, titleClassName), children: title }),
+      subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(AUTH_FORM_CLASSES.subtitle, subtitleClassName), children: subtitle })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className: cn(DEFAULT_CLASSES$1.form, formClassName), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(DEFAULT_CLASSES$1.field, fieldClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "password", className: cn(DEFAULT_CLASSES$1.label, labelClassName), children: labels.password || "New Password" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            id: "password",
-            type: "password",
-            value: password,
-            onChange: (e) => setPassword(e.target.value),
-            placeholder: placeholders.password || "••••••••",
-            disabled: isLoading,
-            className: cn(DEFAULT_CLASSES$1.input, inputClassName),
-            required: true
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(DEFAULT_CLASSES$1.field, fieldClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "confirmPassword", className: cn(DEFAULT_CLASSES$1.label, labelClassName), children: labels.confirmPassword || "Confirm Password" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            id: "confirmPassword",
-            type: "password",
-            value: confirmPassword,
-            onChange: (e) => setConfirmPassword(e.target.value),
-            placeholder: placeholders.confirmPassword || "••••••••",
-            disabled: isLoading,
-            className: cn(DEFAULT_CLASSES$1.input, inputClassName),
-            required: true
-          }
-        )
-      ] }),
-      error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(DEFAULT_CLASSES$1.error, errorClassName), children: error }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "submit",
-          disabled: isLoading,
-          className: cn(DEFAULT_CLASSES$1.button, buttonClassName),
-          children: isLoading ? loadingText : submitButtonText
-        }
-      )
-    ] })
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "form",
+      {
+        onSubmit: handleSubmit,
+        className: cn(AUTH_FORM_CLASSES.form, formClassName),
+        "aria-busy": isLoading,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(AUTH_FORM_CLASSES.field, fieldClassName), children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "label",
+              {
+                htmlFor: "password",
+                className: cn(AUTH_FORM_CLASSES.label, labelClassName),
+                children: labels.password || "New Password"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                id: "password",
+                type: "password",
+                value: password,
+                onChange: (e) => setPassword(e.target.value),
+                placeholder: placeholders.password || "Enter a new password",
+                disabled: isLoading,
+                className: cn(AUTH_FORM_CLASSES.input, inputClassName),
+                autoComplete: "new-password",
+                required: true
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(AUTH_FORM_CLASSES.field, fieldClassName), children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "label",
+              {
+                htmlFor: "confirmPassword",
+                className: cn(AUTH_FORM_CLASSES.label, labelClassName),
+                children: labels.confirmPassword || "Confirm Password"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                id: "confirmPassword",
+                type: "password",
+                value: confirmPassword,
+                onChange: (e) => setConfirmPassword(e.target.value),
+                placeholder: placeholders.confirmPassword || "Confirm your new password",
+                disabled: isLoading,
+                className: cn(AUTH_FORM_CLASSES.input, inputClassName),
+                autoComplete: "new-password",
+                required: true
+              }
+            )
+          ] }),
+          error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(AUTH_FORM_CLASSES.error, errorClassName), role: "alert", children: error }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "submit",
+              disabled: isLoading,
+              className: cn(AUTH_FORM_CLASSES.button, buttonClassName),
+              "aria-busy": isLoading,
+              children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: AUTH_FORM_CLASSES.buttonContent, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: AUTH_FORM_CLASSES.buttonSpinner, "aria-hidden": "true" }),
+                loadingText
+              ] }) : submitButtonText
+            }
+          )
+        ]
+      }
+    )
   ] });
 };
 ResetPasswordForm.displayName = "ResetPasswordForm";
-const DEFAULT_CLASSES = {
-  form: "space-y-5",
-  field: "space-y-2",
-  label: "block text-sm font-medium text-slate-700",
-  input: "w-full rounded-xl border border-slate-300 bg-white px-4 py-3 text-sm text-slate-900 outline-none transition placeholder:text-slate-400 focus:border-blue-500 focus:ring-4 focus:ring-blue-100 disabled:cursor-not-allowed disabled:bg-slate-100",
-  button: "w-full rounded-xl bg-blue-600 px-4 py-3 text-sm font-semibold text-white transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-60",
-  error: "rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-600",
-  success: "rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700",
-  title: "text-2xl font-bold text-slate-900",
-  subtitle: "mt-1 text-sm text-slate-500"
-};
 const VerifyEmailForm = ({
   token: initialToken,
   email: initialEmail,
@@ -972,23 +1366,19 @@ const VerifyEmailForm = ({
 }) => {
   const {
     verifyEmail,
+    clearError,
     isLoading: authLoading,
     error: authError
   } = useAuth();
-  const [formError, setFormError] = React.useState("");
-  const [email, setEmail] = React.useState(initialEmail || "");
-  const [token, setToken] = React.useState(initialToken || "");
-  const [successMessage, setSuccessMessage] = React.useState("");
+  const [formError, setFormError] = react.useState("");
+  const [email, setEmail] = react.useState(initialEmail || "");
+  const [token, setToken] = react.useState(initialToken || "");
+  const [successMessage, setSuccessMessage] = react.useState("");
   const isLoading = authLoading;
   const error = formError || authError?.message;
-  React.useEffect(() => {
-    if (token && email && !successMessage && !error) {
-      handleSubmit({ preventDefault: () => {
-      } });
-    }
-  }, [token, email]);
   const handleSubmit = async (e) => {
     e.preventDefault();
+    clearError();
     setFormError("");
     setSuccessMessage("");
     if (!token) {
@@ -1012,105 +1402,356 @@ const VerifyEmailForm = ({
       });
     }
   };
+  react.useEffect(() => {
+    if (token && email && !successMessage && !error) {
+      void handleSubmit({ preventDefault: () => {
+      } });
+    }
+  }, [token, email]);
   if (successMessage) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
-      showTitle && title && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn(DEFAULT_CLASSES.title, titleClassName), children: title }),
-        subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(DEFAULT_CLASSES.subtitle, subtitleClassName), children: subtitle })
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(AUTH_FORM_CLASSES.container, className), children: [
+      showTitle && title && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: AUTH_FORM_CLASSES.header, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn(AUTH_FORM_CLASSES.title, titleClassName), children: title }),
+        subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(AUTH_FORM_CLASSES.subtitle, subtitleClassName), children: subtitle })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(DEFAULT_CLASSES.success, successClassName), children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: successMessage }) })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(AUTH_FORM_CLASSES.success, successClassName), role: "status", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: successMessage }) })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
-    showTitle && title && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn(DEFAULT_CLASSES.title, titleClassName), children: title }),
-      subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(DEFAULT_CLASSES.subtitle, subtitleClassName), children: subtitle })
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(AUTH_FORM_CLASSES.container, className), children: [
+    showTitle && title && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: AUTH_FORM_CLASSES.header, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn(AUTH_FORM_CLASSES.title, titleClassName), children: title }),
+      subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(AUTH_FORM_CLASSES.subtitle, subtitleClassName), children: subtitle })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className: cn(DEFAULT_CLASSES.form, formClassName), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(DEFAULT_CLASSES.field, fieldClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "email", className: cn(DEFAULT_CLASSES.label, labelClassName), children: labels.email || "Email" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            id: "email",
-            type: "email",
-            value: email,
-            onChange: (e) => setEmail(e.target.value),
-            placeholder: placeholders.email || "your@email.com",
-            disabled: isLoading,
-            className: cn(DEFAULT_CLASSES.input, inputClassName),
-            required: true
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(DEFAULT_CLASSES.field, fieldClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "token", className: cn(DEFAULT_CLASSES.label, labelClassName), children: labels.token || "Verification Code" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "form",
+      {
+        onSubmit: handleSubmit,
+        className: cn(AUTH_FORM_CLASSES.form, formClassName),
+        "aria-busy": isLoading,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(AUTH_FORM_CLASSES.field, fieldClassName), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "email", className: cn(AUTH_FORM_CLASSES.label, labelClassName), children: labels.email || "Email" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                id: "email",
+                type: "email",
+                value: email,
+                onChange: (e) => setEmail(e.target.value),
+                placeholder: placeholders.email || "your@email.com",
+                disabled: isLoading,
+                className: cn(AUTH_FORM_CLASSES.input, inputClassName),
+                autoComplete: "email",
+                required: true
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(AUTH_FORM_CLASSES.field, fieldClassName), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "token", className: cn(AUTH_FORM_CLASSES.label, labelClassName), children: labels.token || "Verification Code" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                id: "token",
+                type: "text",
+                value: token,
+                onChange: (e) => setToken(e.target.value),
+                placeholder: placeholders.token || "Enter verification code",
+                disabled: isLoading,
+                className: cn(AUTH_FORM_CLASSES.input, inputClassName),
+                autoComplete: "one-time-code",
+                required: true
+              }
+            )
+          ] }),
+          error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(AUTH_FORM_CLASSES.error, errorClassName), role: "alert", children: error }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "submit",
+              disabled: isLoading,
+              className: cn(AUTH_FORM_CLASSES.button, buttonClassName),
+              "aria-busy": isLoading,
+              children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: AUTH_FORM_CLASSES.buttonContent, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: AUTH_FORM_CLASSES.buttonSpinner, "aria-hidden": "true" }),
+                loadingText
+              ] }) : submitButtonText
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+VerifyEmailForm.displayName = "VerifyEmailForm";
+function toDigits(value, length) {
+  return Array.from({ length }, (_, index) => value[index] ?? "");
+}
+const OtpInput = ({
+  length = 6,
+  value,
+  onChange,
+  onComplete,
+  disabled = false,
+  className,
+  inputClassName
+}) => {
+  const [internalValue, setInternalValue] = react.useState("");
+  const inputRefs = react.useRef([]);
+  const baseId = react.useId();
+  const currentValue = value ?? internalValue;
+  const digits = react.useMemo(
+    () => toDigits(currentValue.slice(0, length), length),
+    [currentValue, length]
+  );
+  const commitValue = (nextDigits) => {
+    const nextValue = nextDigits.join("").slice(0, length);
+    if (value === void 0) {
+      setInternalValue(nextValue);
+    }
+    onChange?.(nextValue);
+    if (nextDigits.every(Boolean) && nextValue.length === length) {
+      onComplete?.(nextValue);
+    }
+  };
+  const focusInput = (index) => {
+    inputRefs.current[index]?.focus();
+    inputRefs.current[index]?.select();
+  };
+  const handleChange = (index, nextChunk) => {
+    const sanitized = nextChunk.replace(/\s+/g, "");
+    const nextDigits = [...digits];
+    if (!sanitized) {
+      nextDigits[index] = "";
+      commitValue(nextDigits);
+      return;
+    }
+    if (sanitized.length > 1) {
+      sanitized.slice(0, length - index).split("").forEach((character, offset) => {
+        nextDigits[index + offset] = character;
+      });
+      commitValue(nextDigits);
+      focusInput(Math.min(index + sanitized.length, length - 1));
+      return;
+    }
+    nextDigits[index] = sanitized;
+    commitValue(nextDigits);
+    if (index < length - 1) {
+      focusInput(index + 1);
+    }
+  };
+  const handleKeyDown = (index, event) => {
+    if (event.key === "Backspace" && !digits[index] && index > 0) {
+      focusInput(index - 1);
+    }
+    if (event.key === "ArrowLeft" && index > 0) {
+      event.preventDefault();
+      focusInput(index - 1);
+    }
+    if (event.key === "ArrowRight" && index < length - 1) {
+      event.preventDefault();
+      focusInput(index + 1);
+    }
+  };
+  const handlePaste = (index, event) => {
+    event.preventDefault();
+    handleChange(index, event.clipboardData.getData("text"));
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(AUTH_FORM_CLASSES.otpGroup, className),
+      style: {
+        "--rq-auth-otp-columns": String(length)
+      },
+      children: digits.map((digit, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ref: (element) => {
+            inputRefs.current[index] = element;
+          },
+          id: `${baseId}-${index}`,
+          type: "text",
+          inputMode: "text",
+          autoComplete: index === 0 ? "one-time-code" : "off",
+          maxLength: 1,
+          value: digit,
+          disabled,
+          className: cn(AUTH_FORM_CLASSES.otpInput, inputClassName),
+          onChange: (event) => handleChange(index, event.target.value),
+          onKeyDown: (event) => handleKeyDown(index, event),
+          onPaste: (event) => handlePaste(index, event),
+          "aria-label": `OTP digit ${index + 1}`
+        },
+        `otp-${index}`
+      ))
+    }
+  );
+};
+OtpInput.displayName = "OtpInput";
+const TwoFactorForm = ({
+  onSuccess,
+  onError,
+  className,
+  submitButtonText = "Verify Code",
+  loadingText = "Verifying...",
+  title = "Two-factor authentication",
+  subtitle = "Enter the verification code to continue.",
+  length = 6
+}) => {
+  const {
+    verifyTwoFactor,
+    clearError,
+    isLoading,
+    error: authError
+  } = useAuth();
+  const [code, setCode] = react.useState("");
+  const [formError, setFormError] = react.useState("");
+  const error = formError || authError?.message;
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    clearError();
+    setFormError("");
+    if (code.length !== length) {
+      setFormError(`Enter the full ${length}-digit code.`);
+      return;
+    }
+    try {
+      const response = await verifyTwoFactor({ code });
+      onSuccess?.(response);
+    } catch (caughtError) {
+      const message = caughtError instanceof Error ? caughtError.message : "Two-factor verification failed";
+      setFormError(message);
+      onError?.({
+        code: "TWO_FACTOR_ERROR",
+        message
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(AUTH_FORM_CLASSES.container, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: AUTH_FORM_CLASSES.header, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: AUTH_FORM_CLASSES.title, children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: AUTH_FORM_CLASSES.subtitle, children: subtitle })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className: AUTH_FORM_CLASSES.form, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: AUTH_FORM_CLASSES.field, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: AUTH_FORM_CLASSES.label, children: "Verification code" }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
+          OtpInput,
           {
-            id: "token",
-            type: "text",
-            value: token,
-            onChange: (e) => setToken(e.target.value),
-            placeholder: placeholders.token || "Enter verification code",
-            disabled: isLoading,
-            className: cn(DEFAULT_CLASSES.input, inputClassName),
-            required: true
+            length,
+            value: code,
+            onChange: setCode,
+            disabled: isLoading
           }
         )
       ] }),
-      error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(DEFAULT_CLASSES.error, errorClassName), children: error }),
+      error ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: AUTH_FORM_CLASSES.error, role: "alert", children: error }) : null,
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           type: "submit",
           disabled: isLoading,
-          className: cn(DEFAULT_CLASSES.button, buttonClassName),
+          className: AUTH_FORM_CLASSES.button,
           children: isLoading ? loadingText : submitButtonText
         }
       )
     ] })
   ] });
 };
-VerifyEmailForm.displayName = "VerifyEmailForm";
+TwoFactorForm.displayName = "TwoFactorForm";
+const defaultLabels = {
+  google: "Continue with Google",
+  github: "Continue with GitHub",
+  facebook: "Continue with Facebook",
+  custom: "Continue"
+};
+const defaultIcons = {
+  google: "G",
+  github: "GH",
+  facebook: "f",
+  custom: "+"
+};
+const SocialLoginButton = ({
+  provider,
+  label,
+  icon,
+  onClick,
+  className,
+  disabled = false
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      className: cn(AUTH_FORM_CLASSES.socialButton, className),
+      "data-provider": provider,
+      onClick,
+      disabled,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: AUTH_FORM_CLASSES.socialIcon, "aria-hidden": "true", children: icon ?? defaultIcons[provider] }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: AUTH_FORM_CLASSES.socialLabel, children: label ?? defaultLabels[provider] })
+      ]
+    }
+  );
+};
+SocialLoginButton.displayName = "SocialLoginButton";
 const ProtectedRoute = ({
   children,
   redirectTo = "/login",
   fallback,
   roles,
-  permissions
+  permissions,
+  unauthorizedTo,
+  requireAllPermissions = true
 }) => {
-  const { isAuthenticated, isLoading, user } = useAuth();
+  const {
+    isAuthenticated,
+    isLoading,
+    hasAllPermissions,
+    hasAnyPermission,
+    hasAnyRole
+  } = useAuth();
   if (isLoading) {
     return fallback || /* @__PURE__ */ jsxRuntime.jsx("div", { className: "auth-loading", children: "Loading..." });
   }
   if (!isAuthenticated) {
     return /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Navigate, { to: redirectTo, replace: true });
   }
-  if (roles && roles.length > 0) {
-    const hasRole = user?.roles?.some((role) => roles.includes(role));
-    if (!hasRole) {
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "auth-forbidden", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "You do not have permission to access this page." }) });
-    }
-  }
-  if (permissions && permissions.length > 0) {
-    const hasPermission = user?.permissions?.some(
-      (permission) => permissions.includes(permission)
-    );
-    if (!hasPermission) {
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "auth-forbidden", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "You do not have permission to access this page." }) });
-    }
+  const hasRequiredRole = !roles?.length || hasAnyRole(roles);
+  const hasRequiredPermission = !permissions?.length || (requireAllPermissions ? hasAllPermissions(permissions) : hasAnyPermission(permissions));
+  if (!hasRequiredRole || !hasRequiredPermission) {
+    return /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Navigate, { to: unauthorizedTo ?? redirectTo, replace: true });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
 };
 ProtectedRoute.displayName = "ProtectedRoute";
+const GuestRoute = ({
+  children,
+  redirectTo = "/",
+  fallback
+}) => {
+  const { isAuthenticated, isLoading } = useAuth();
+  if (isLoading) {
+    return fallback || /* @__PURE__ */ jsxRuntime.jsx("div", { className: "auth-loading", children: "Loading..." });
+  }
+  if (isAuthenticated) {
+    return /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Navigate, { to: redirectTo, replace: true });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+};
+GuestRoute.displayName = "GuestRoute";
 exports.AuthContext = AuthContext;
+exports.AuthLayout = AuthLayout;
 exports.AuthProvider = AuthProvider;
 exports.ForgotPasswordForm = ForgotPasswordForm;
+exports.GuestRoute = GuestRoute;
 exports.LoginForm = LoginForm;
+exports.OtpInput = OtpInput;
 exports.ProtectedRoute = ProtectedRoute;
 exports.RegisterForm = RegisterForm;
 exports.ResetPasswordForm = ResetPasswordForm;
+exports.SocialLoginButton = SocialLoginButton;
+exports.TwoFactorForm = TwoFactorForm;
 exports.VerifyEmailForm = VerifyEmailForm;
 exports.cn = cn;
 exports.createAuthClient = createAuthClient;