sa2kit 3.0.0 → 3.1.0

package/dist/common/auth/components/index.mjs

@@ -1,9 +1,875 @@
-export { AdminLoginPage, AuthGuard, ForgotPasswordModal, LoginForm, LoginModal, RegisterForm, RegisterFormHeadless, RegisterModal, SignInForm, UserMenu, VerifyOtpForm } from '../../../chunk-RWCD2CAD.mjs';
-import '../../../chunk-7E3J7VAD.mjs';
-import '../../../chunk-LKBIVQBT.mjs';
-import '../../../chunk-TTYCVBIQ.mjs';
+import { useAuthContext } from '../../../chunk-LKBIVQBT.mjs';
+import { useAuthActions } from '../../../chunk-TTYCVBIQ.mjs';
+import { validatePhoneNumber, validatePassword, validateEmail } from '../../../chunk-ZF7DKR5A.mjs';
 export { validateEmail, validatePassword, validatePhoneNumber } from '../../../chunk-ZF7DKR5A.mjs';
-import '../../../chunk-MZOGYD4N.mjs';
 import '../../../chunk-MAI35PU6.mjs';
+import React7, { useState, useEffect } from 'react';
+import { X, Phone, Lock, EyeOff, Eye, Mail, User, LogOut, LogIn } from 'lucide-react';
+import { createPortal } from 'react-dom';
+
+function SignInForm({
+  authClient,
+  initialMode = "email-password",
+  onSuccess,
+  onError,
+  children
+}) {
+  const actions = useAuthActions(authClient);
+  const [mode, setMode] = useState(initialMode);
+  const [step, setStep] = useState("credentials");
+  const [email, setEmail] = useState("");
+  const [phone, setPhone] = useState("");
+  const [password, setPassword] = useState("");
+  const [otp, setOtp] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const fail = (message) => {
+    setError(message);
+    onError?.(message);
+  };
+  const sendOtp = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      if (mode === "phone-otp") {
+        if (!validatePhoneNumber(phone)) {
+          fail("\u8BF7\u8F93\u5165\u6B63\u786E\u7684\u624B\u673A\u53F7");
+          return;
+        }
+        const result = await actions.sendPhoneOtp(phone.trim());
+        if (!result.success) {
+          fail(result.error);
+          return;
+        }
+        setStep("otp");
+      } else if (mode === "email-otp") {
+        if (!validateEmail(email)) {
+          fail("\u8BF7\u8F93\u5165\u6B63\u786E\u7684\u90AE\u7BB1");
+          return;
+        }
+        const result = await actions.sendEmailOtp(email.trim(), "sign-in");
+        if (!result.success) {
+          fail(result.error);
+          return;
+        }
+        setStep("otp");
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleSubmit = async (e) => {
+    e?.preventDefault();
+    setLoading(true);
+    setError(null);
+    try {
+      if (mode === "email-password") {
+        if (!validateEmail(email)) return fail("\u8BF7\u8F93\u5165\u6B63\u786E\u7684\u90AE\u7BB1");
+        const pwd = validatePassword(password);
+        if (!pwd.valid) return fail(pwd.message ?? "\u5BC6\u7801\u65E0\u6548");
+        const result = await actions.signInWithEmail(email.trim(), password);
+        if (!result.success) return fail(result.error);
+        onSuccess?.();
+        return;
+      }
+      if (mode === "phone-password") {
+        if (!validatePhoneNumber(phone)) return fail("\u8BF7\u8F93\u5165\u6B63\u786E\u7684\u624B\u673A\u53F7");
+        const pwd = validatePassword(password);
+        if (!pwd.valid) return fail(pwd.message ?? "\u5BC6\u7801\u65E0\u6548");
+        const result = await actions.signInWithPhonePassword(phone.trim(), password);
+        if (!result.success) return fail(result.error);
+        onSuccess?.();
+        return;
+      }
+      if (mode === "phone-otp") {
+        if (step === "credentials") {
+          await sendOtp();
+          return;
+        }
+        if (!/^\d{4,8}$/.test(otp)) return fail("\u8BF7\u8F93\u5165\u9A8C\u8BC1\u7801");
+        const result = await actions.verifyPhoneOtp(phone.trim(), otp);
+        if (!result.success) return fail(result.error);
+        onSuccess?.();
+        return;
+      }
+      if (mode === "email-otp") {
+        if (step === "credentials") {
+          await sendOtp();
+          return;
+        }
+        if (!/^\d{4,8}$/.test(otp)) return fail("\u8BF7\u8F93\u5165\u9A8C\u8BC1\u7801");
+        const result = await actions.signInWithEmailOtp(email.trim(), otp);
+        if (!result.success) return fail(result.error);
+        onSuccess?.();
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+  const state = {
+    mode,
+    step,
+    email,
+    phone,
+    password,
+    otp,
+    loading,
+    error,
+    setMode: (next) => {
+      setMode(next);
+      setStep("credentials");
+      setError(null);
+    },
+    setEmail,
+    setPhone,
+    setPassword,
+    setOtp,
+    sendOtp,
+    handleSubmit
+  };
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, children(state));
+}
+function RegisterFormHeadless({
+  authClient,
+  initialChannel = "email",
+  onSuccess,
+  onError,
+  children
+}) {
+  const actions = useAuthActions(authClient);
+  const [channel, setChannel] = useState(initialChannel);
+  const [step, setStep] = useState("credentials");
+  const [email, setEmail] = useState("");
+  const [phone, setPhone] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [name, setName] = useState("");
+  const [otp, setOtp] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const fail = (message) => {
+    setError(message);
+    onError?.(message);
+  };
+  const sendOtp = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      if (!validatePhoneNumber(phone)) {
+        fail("\u8BF7\u8F93\u5165\u6B63\u786E\u7684\u624B\u673A\u53F7");
+        return;
+      }
+      const result = await actions.sendPhoneOtp(phone.trim());
+      if (!result.success) {
+        fail(result.error);
+        return;
+      }
+      setStep("otp");
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleSubmit = async (e) => {
+    e?.preventDefault();
+    setLoading(true);
+    setError(null);
+    try {
+      if (channel === "email") {
+        if (!validateEmail(email)) return fail("\u8BF7\u8F93\u5165\u6B63\u786E\u7684\u90AE\u7BB1");
+        const pwd = validatePassword(password);
+        if (!pwd.valid) return fail(pwd.message ?? "\u5BC6\u7801\u65E0\u6548");
+        if (password !== confirmPassword) return fail("\u4E24\u6B21\u5BC6\u7801\u4E0D\u4E00\u81F4");
+        if (!name.trim()) return fail("\u8BF7\u586B\u5199\u6635\u79F0");
+        const result = await actions.signUpWithEmail(email.trim(), password, name.trim());
+        if (!result.success) return fail(result.error);
+        onSuccess?.();
+        return;
+      }
+      if (step === "credentials") {
+        const pwd = validatePassword(password);
+        if (!pwd.valid) return fail(pwd.message ?? "\u5BC6\u7801\u65E0\u6548");
+        if (password !== confirmPassword) return fail("\u4E24\u6B21\u5BC6\u7801\u4E0D\u4E00\u81F4");
+        await sendOtp();
+        return;
+      }
+      if (!/^\d{4,8}$/.test(otp)) return fail("\u8BF7\u8F93\u5165\u9A8C\u8BC1\u7801");
+      const verify = await actions.verifyPhoneOtp(phone.trim(), otp);
+      if (!verify.success) return fail(verify.error);
+      onSuccess?.();
+    } finally {
+      setLoading(false);
+    }
+  };
+  const state = {
+    channel,
+    step,
+    email,
+    phone,
+    password,
+    confirmPassword,
+    name,
+    otp,
+    loading,
+    error,
+    setChannel: (next) => {
+      setChannel(next);
+      setStep("credentials");
+      setError(null);
+    },
+    setEmail,
+    setPhone,
+    setPassword,
+    setConfirmPassword,
+    setName,
+    setOtp,
+    sendOtp,
+    handleSubmit
+  };
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, children(state));
+}
+function VerifyOtpForm({
+  authClient,
+  channel,
+  target,
+  onSuccess,
+  onError,
+  children
+}) {
+  const actions = useAuthActions(authClient);
+  const [otp, setOtp] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const fail = (message) => {
+    setError(message);
+    onError?.(message);
+  };
+  const resendOtp = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      if (channel === "phone") {
+        if (!validatePhoneNumber(target)) return fail("\u624B\u673A\u53F7\u65E0\u6548");
+        const result = await actions.sendPhoneOtp(target.trim());
+        if (!result.success) fail(result.error);
+      } else {
+        if (!validateEmail(target)) return fail("\u90AE\u7BB1\u65E0\u6548");
+        const result = await actions.sendEmailOtp(target.trim(), "sign-in");
+        if (!result.success) fail(result.error);
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleSubmit = async (e) => {
+    e?.preventDefault();
+    setLoading(true);
+    setError(null);
+    try {
+      if (!/^\d{4,8}$/.test(otp)) return fail("\u8BF7\u8F93\u5165\u9A8C\u8BC1\u7801");
+      if (channel === "phone") {
+        const result = await actions.verifyPhoneOtp(target.trim(), otp);
+        if (!result.success) return fail(result.error);
+      } else {
+        const result = await actions.signInWithEmailOtp(target.trim(), otp);
+        if (!result.success) return fail(result.error);
+      }
+      onSuccess?.();
+    } finally {
+      setLoading(false);
+    }
+  };
+  const state = {
+    channel,
+    target,
+    otp,
+    loading,
+    error,
+    setOtp,
+    resendOtp,
+    handleSubmit
+  };
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, children(state));
+}
+var overlayClass = "fixed top-0 left-0 right-0 bottom-0 w-screen h-screen bg-black/50 backdrop-blur-sm flex items-center justify-center z-[9999] p-4";
+var panelClass = "bg-white rounded-2xl shadow-xl w-full max-w-[420px] max-h-[90vh] overflow-y-auto relative";
+var closeBtnClass = "absolute top-5 right-5 bg-transparent border-none text-gray-500 cursor-pointer p-2 rounded-lg transition-all hover:bg-gray-100 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 min-w-9 min-h-9 flex items-center justify-center";
+var inputClass = "w-full py-3 px-4 pl-12 border-2 border-gray-200 rounded-lg text-base transition-all box-border min-h-12 bg-white focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/10 placeholder:text-gray-400 disabled:bg-gray-50 disabled:text-gray-500 disabled:cursor-not-allowed";
+var submitClass = "w-full bg-blue-500 text-white border-none py-3.5 px-6 rounded-lg text-base font-medium cursor-pointer transition-all mt-2 min-h-[52px] hover:bg-blue-600 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-blue-500/30 active:translate-y-0 disabled:bg-gray-400 disabled:cursor-not-allowed disabled:transform-none disabled:shadow-none focus:outline-none focus:ring-2 focus:ring-blue-700 focus:ring-offset-2";
+var errorClass = "text-red-500 text-sm my-4 p-3 bg-red-50 border border-red-200 rounded-lg leading-relaxed";
+var linkBtnClass = "bg-transparent border-none text-blue-500 cursor-pointer text-sm font-medium underline px-1 py-0.5 rounded transition-all hover:text-blue-600 hover:bg-blue-50 hover:no-underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2";
+function useClientMounted() {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  return mounted;
+}
+function AuthModalPortal({ children }) {
+  const mounted = useClientMounted();
+  if (!mounted) return null;
+  return createPortal(children, document.body);
+}
+var authModalStyles = {
+  overlayClass,
+  panelClass,
+  closeBtnClass,
+  inputClass,
+  submitClass,
+  errorClass,
+  linkBtnClass
+};
+function ForgotPasswordModal({ isOpen, onClose, onSuccess }) {
+  const { requestPhonePasswordReset, resetPhonePassword } = useAuthContext();
+  const [phone, setPhone] = useState("");
+  const [otp, setOtp] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [countdown, setCountdown] = useState(0);
+  const startCountdown = () => {
+    setCountdown(60);
+    const timer = setInterval(() => {
+      setCountdown((prev) => {
+        if (prev <= 1) {
+          clearInterval(timer);
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1e3);
+  };
+  const handleSendCode = async () => {
+    setError("");
+    if (!validatePhoneNumber(phone)) {
+      setError("\u8BF7\u8F93\u5165\u6B63\u786E\u7684\u624B\u673A\u53F7");
+      return;
+    }
+    setLoading(true);
+    try {
+      const result = await requestPhonePasswordReset(phone.trim());
+      if (!result.success) {
+        setError(result.error);
+        return;
+      }
+      startCountdown();
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError("");
+    if (!validatePhoneNumber(phone)) return setError("\u8BF7\u8F93\u5165\u6B63\u786E\u7684\u624B\u673A\u53F7");
+    const pwd = validatePassword(newPassword);
+    if (!pwd.valid) return setError(pwd.message ?? "\u5BC6\u7801\u65E0\u6548");
+    if (newPassword !== confirmPassword) return setError("\u4E24\u6B21\u5BC6\u7801\u4E0D\u4E00\u81F4");
+    if (!/^\d{4,8}$/.test(otp)) return setError("\u8BF7\u8F93\u5165\u9A8C\u8BC1\u7801");
+    setLoading(true);
+    try {
+      const result = await resetPhonePassword(phone.trim(), otp, newPassword);
+      if (!result.success) {
+        setError(result.error);
+        return;
+      }
+      onSuccess?.();
+    } finally {
+      setLoading(false);
+    }
+  };
+  if (!isOpen) return null;
+  return /* @__PURE__ */ React7.createElement(AuthModalPortal, null, /* @__PURE__ */ React7.createElement("div", { className: authModalStyles.overlayClass, style: { margin: 0 }, onClick: (e) => e.target === e.currentTarget && onClose() }, /* @__PURE__ */ React7.createElement("div", { className: authModalStyles.panelClass, onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React7.createElement("button", { type: "button", className: authModalStyles.closeBtnClass, onClick: onClose }, /* @__PURE__ */ React7.createElement(X, { size: 20 })), /* @__PURE__ */ React7.createElement("div", { className: "px-6 pt-6 pb-4 text-center border-b border-gray-100" }, /* @__PURE__ */ React7.createElement("h2", { className: "text-2xl font-semibold text-gray-800 mb-2" }, "\u91CD\u7F6E\u5BC6\u7801"), /* @__PURE__ */ React7.createElement("p", { className: "text-gray-500 text-sm" }, "\u8BF7\u8F93\u5165\u624B\u673A\u53F7\u548C\u9A8C\u8BC1\u7801\u91CD\u7F6E\u5BC6\u7801")), /* @__PURE__ */ React7.createElement("form", { onSubmit: handleSubmit, className: "p-6" }, /* @__PURE__ */ React7.createElement("div", { className: "mb-5" }, /* @__PURE__ */ React7.createElement("label", { htmlFor: "reset-phone", className: "block mb-1.5 text-sm font-medium text-gray-700" }, "\u624B\u673A\u53F7"), /* @__PURE__ */ React7.createElement("div", { className: "relative flex items-center" }, /* @__PURE__ */ React7.createElement(Phone, { size: 18, className: "absolute left-4 text-gray-400 z-[1] pointer-events-none" }), /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      id: "reset-phone",
+      type: "tel",
+      value: phone,
+      onChange: (e) => setPhone(e.target.value),
+      placeholder: "\u8BF7\u8F93\u5165\u624B\u673A\u53F7",
+      className: authModalStyles.inputClass,
+      disabled: loading
+    }
+  ))), /* @__PURE__ */ React7.createElement("div", { className: "mb-5" }, /* @__PURE__ */ React7.createElement("label", { htmlFor: "reset-otp", className: "block mb-1.5 text-sm font-medium text-gray-700" }, "\u9A8C\u8BC1\u7801"), /* @__PURE__ */ React7.createElement("div", { className: "relative flex items-center" }, /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      id: "reset-otp",
+      type: "text",
+      inputMode: "numeric",
+      value: otp,
+      onChange: (e) => setOtp(e.target.value),
+      placeholder: "\u8BF7\u8F93\u5165\u9A8C\u8BC1\u7801",
+      className: "w-full py-3 px-4 pr-28 border-2 border-gray-200 rounded-lg text-base transition-all box-border min-h-12 bg-white focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/10",
+      disabled: loading,
+      maxLength: 8
+    }
+  ), /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      type: "button",
+      className: "absolute right-2 top-1/2 -translate-y-1/2 bg-transparent border-none text-blue-500 text-sm font-medium cursor-pointer px-2 py-1 rounded transition-all whitespace-nowrap hover:bg-blue-50 disabled:text-gray-400 disabled:cursor-not-allowed",
+      onClick: handleSendCode,
+      disabled: loading || countdown > 0
+    },
+    countdown > 0 ? `${countdown}\u79D2\u540E\u91CD\u8BD5` : "\u53D1\u9001\u9A8C\u8BC1\u7801"
+  ))), /* @__PURE__ */ React7.createElement("div", { className: "mb-5" }, /* @__PURE__ */ React7.createElement("label", { htmlFor: "reset-password", className: "block mb-1.5 text-sm font-medium text-gray-700" }, "\u65B0\u5BC6\u7801"), /* @__PURE__ */ React7.createElement("div", { className: "relative flex items-center" }, /* @__PURE__ */ React7.createElement(Lock, { size: 18, className: "absolute left-4 text-gray-400 z-[1] pointer-events-none" }), /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      id: "reset-password",
+      type: showPassword ? "text" : "password",
+      value: newPassword,
+      onChange: (e) => setNewPassword(e.target.value),
+      placeholder: "\u8BF7\u8F93\u5165\u65B0\u5BC6\u7801",
+      className: `${authModalStyles.inputClass} pr-12`,
+      disabled: loading
+    }
+  ), /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      type: "button",
+      className: "absolute right-4 bg-transparent border-none text-gray-400 cursor-pointer p-1 rounded transition-all flex items-center justify-center min-w-6 min-h-6 hover:text-gray-600 hover:bg-gray-100",
+      onClick: () => setShowPassword((v) => !v),
+      disabled: loading
+    },
+    showPassword ? /* @__PURE__ */ React7.createElement(EyeOff, { size: 18 }) : /* @__PURE__ */ React7.createElement(Eye, { size: 18 })
+  ))), /* @__PURE__ */ React7.createElement("div", { className: "mb-5" }, /* @__PURE__ */ React7.createElement("label", { htmlFor: "reset-confirm-password", className: "block mb-1.5 text-sm font-medium text-gray-700" }, "\u786E\u8BA4\u5BC6\u7801"), /* @__PURE__ */ React7.createElement("div", { className: "relative flex items-center" }, /* @__PURE__ */ React7.createElement(Lock, { size: 18, className: "absolute left-4 text-gray-400 z-[1] pointer-events-none" }), /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      id: "reset-confirm-password",
+      type: showConfirmPassword ? "text" : "password",
+      value: confirmPassword,
+      onChange: (e) => setConfirmPassword(e.target.value),
+      placeholder: "\u8BF7\u518D\u6B21\u8F93\u5165\u65B0\u5BC6\u7801",
+      className: `${authModalStyles.inputClass} pr-12`,
+      disabled: loading
+    }
+  ), /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      type: "button",
+      className: "absolute right-4 bg-transparent border-none text-gray-400 cursor-pointer p-1 rounded transition-all flex items-center justify-center min-w-6 min-h-6 hover:text-gray-600 hover:bg-gray-100",
+      onClick: () => setShowConfirmPassword((v) => !v),
+      disabled: loading
+    },
+    showConfirmPassword ? /* @__PURE__ */ React7.createElement(EyeOff, { size: 18 }) : /* @__PURE__ */ React7.createElement(Eye, { size: 18 })
+  ))), error && /* @__PURE__ */ React7.createElement("div", { className: authModalStyles.errorClass }, error), /* @__PURE__ */ React7.createElement("button", { type: "submit", className: authModalStyles.submitClass, disabled: loading }, loading ? "\u63D0\u4EA4\u4E2D..." : "\u91CD\u7F6E\u5BC6\u7801")))));
+}
+
+// src/common/auth/components/styled/LoginModal.tsx
+var MODE_LABELS = {
+  "phone-password": "\u624B\u673A\u5BC6\u7801",
+  "email-password": "\u90AE\u7BB1\u5BC6\u7801",
+  "phone-otp": "\u624B\u673A\u9A8C\u8BC1\u7801",
+  "email-otp": "\u90AE\u7BB1\u9A8C\u8BC1\u7801"
+};
+function LoginModal({
+  isOpen,
+  onClose,
+  onSuccess,
+  onSwitchToRegister,
+  defaultMode = "phone-password"
+}) {
+  const { authClient, refreshSession } = useAuthContext();
+  const [showPassword, setShowPassword] = useState(false);
+  const [showForgotPassword, setShowForgotPassword] = useState(false);
+  const handleSuccess = async () => {
+    await refreshSession();
+    onSuccess?.();
+  };
+  if (!isOpen) return null;
+  return /* @__PURE__ */ React7.createElement(AuthModalPortal, null, /* @__PURE__ */ React7.createElement("div", { className: authModalStyles.overlayClass, style: { margin: 0 }, onClick: (e) => e.target === e.currentTarget && onClose() }, /* @__PURE__ */ React7.createElement(SignInForm, { authClient, initialMode: defaultMode, onSuccess: handleSuccess }, (state) => /* @__PURE__ */ React7.createElement("div", { className: authModalStyles.panelClass, onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React7.createElement("button", { type: "button", className: authModalStyles.closeBtnClass, onClick: onClose }, /* @__PURE__ */ React7.createElement(X, { size: 20 })), /* @__PURE__ */ React7.createElement("div", { className: "px-6 pt-6 pb-4 text-center border-b border-gray-100" }, /* @__PURE__ */ React7.createElement("h2", { className: "text-2xl font-semibold text-gray-800 mb-2" }, "\u7528\u6237\u767B\u5F55"), /* @__PURE__ */ React7.createElement("p", { className: "text-gray-500 text-sm" }, "\u9009\u62E9\u767B\u5F55\u65B9\u5F0F\u5E76\u586B\u5199\u4FE1\u606F")), /* @__PURE__ */ React7.createElement("div", { className: "px-6 pt-4 flex flex-wrap gap-2" }, Object.keys(MODE_LABELS).map((mode) => /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      key: mode,
+      type: "button",
+      onClick: () => state.setMode(mode),
+      className: `px-3 py-1.5 text-xs rounded-full border transition-all ${state.mode === mode ? "bg-blue-500 text-white border-blue-500" : "bg-white text-gray-600 border-gray-200 hover:border-blue-300"}`
+    },
+    MODE_LABELS[mode]
+  ))), /* @__PURE__ */ React7.createElement("form", { onSubmit: state.handleSubmit, className: "p-6" }, (state.mode === "email-password" || state.mode === "email-otp") && state.step === "credentials" && /* @__PURE__ */ React7.createElement("div", { className: "mb-5" }, /* @__PURE__ */ React7.createElement("label", { htmlFor: "login-email", className: "block mb-1.5 text-sm font-medium text-gray-700" }, "\u90AE\u7BB1"), /* @__PURE__ */ React7.createElement("div", { className: "relative flex items-center" }, /* @__PURE__ */ React7.createElement(Mail, { size: 18, className: "absolute left-4 text-gray-400 z-[1] pointer-events-none" }), /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      id: "login-email",
+      type: "email",
+      autoComplete: "email",
+      value: state.email,
+      onChange: (e) => state.setEmail(e.target.value),
+      placeholder: "\u8BF7\u8F93\u5165\u90AE\u7BB1",
+      className: authModalStyles.inputClass,
+      disabled: state.loading
+    }
+  ))), (state.mode === "phone-password" || state.mode === "phone-otp") && state.step === "credentials" && /* @__PURE__ */ React7.createElement("div", { className: "mb-5" }, /* @__PURE__ */ React7.createElement("label", { htmlFor: "login-phone", className: "block mb-1.5 text-sm font-medium text-gray-700" }, "\u624B\u673A\u53F7"), /* @__PURE__ */ React7.createElement("div", { className: "relative flex items-center" }, /* @__PURE__ */ React7.createElement(Phone, { size: 18, className: "absolute left-4 text-gray-400 z-[1] pointer-events-none" }), /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      id: "login-phone",
+      type: "tel",
+      autoComplete: "tel",
+      value: state.phone,
+      onChange: (e) => state.setPhone(e.target.value),
+      placeholder: "\u8BF7\u8F93\u5165\u624B\u673A\u53F7",
+      className: authModalStyles.inputClass,
+      disabled: state.loading
+    }
+  ))), (state.mode === "email-password" || state.mode === "phone-password") && /* @__PURE__ */ React7.createElement("div", { className: "mb-5" }, /* @__PURE__ */ React7.createElement("label", { htmlFor: "login-password", className: "block mb-1.5 text-sm font-medium text-gray-700" }, "\u5BC6\u7801"), /* @__PURE__ */ React7.createElement("div", { className: "relative flex items-center" }, /* @__PURE__ */ React7.createElement(Lock, { size: 18, className: "absolute left-4 text-gray-400 z-[1] pointer-events-none" }), /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      id: "login-password",
+      type: showPassword ? "text" : "password",
+      autoComplete: "current-password",
+      value: state.password,
+      onChange: (e) => state.setPassword(e.target.value),
+      placeholder: "\u8BF7\u8F93\u5165\u5BC6\u7801",
+      className: `${authModalStyles.inputClass} pr-12`,
+      disabled: state.loading
+    }
+  ), /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      type: "button",
+      className: "absolute right-4 bg-transparent border-none text-gray-400 cursor-pointer p-1 rounded transition-all flex items-center justify-center min-w-6 min-h-6 hover:text-gray-600 hover:bg-gray-100",
+      onClick: () => setShowPassword((v) => !v),
+      disabled: state.loading
+    },
+    showPassword ? /* @__PURE__ */ React7.createElement(EyeOff, { size: 18 }) : /* @__PURE__ */ React7.createElement(Eye, { size: 18 })
+  ))), (state.mode === "phone-otp" || state.mode === "email-otp") && state.step === "otp" && /* @__PURE__ */ React7.createElement("div", { className: "mb-5" }, /* @__PURE__ */ React7.createElement("label", { htmlFor: "login-otp", className: "block mb-1.5 text-sm font-medium text-gray-700" }, "\u9A8C\u8BC1\u7801"), /* @__PURE__ */ React7.createElement("div", { className: "relative flex items-center" }, /* @__PURE__ */ React7.createElement(User, { size: 18, className: "absolute left-4 text-gray-400 z-[1] pointer-events-none" }), /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      id: "login-otp",
+      type: "text",
+      inputMode: "numeric",
+      value: state.otp,
+      onChange: (e) => state.setOtp(e.target.value),
+      placeholder: "\u8BF7\u8F93\u5165\u9A8C\u8BC1\u7801",
+      className: authModalStyles.inputClass,
+      disabled: state.loading,
+      maxLength: 8
+    }
+  ))), (state.mode === "phone-password" || state.mode === "phone-otp") && state.step === "credentials" && /* @__PURE__ */ React7.createElement("div", { className: "text-right -mt-2 mb-4" }, /* @__PURE__ */ React7.createElement("button", { type: "button", onClick: () => setShowForgotPassword(true), className: authModalStyles.linkBtnClass }, "\u5FD8\u8BB0\u5BC6\u7801\uFF1F")), state.error && /* @__PURE__ */ React7.createElement("div", { className: authModalStyles.errorClass }, state.error), /* @__PURE__ */ React7.createElement("button", { type: "submit", className: authModalStyles.submitClass, disabled: state.loading }, state.loading ? "\u5904\u7406\u4E2D..." : state.step === "otp" ? "\u9A8C\u8BC1\u5E76\u767B\u5F55" : state.mode === "phone-otp" || state.mode === "email-otp" ? "\u53D1\u9001\u9A8C\u8BC1\u7801" : "\u767B\u5F55"), onSwitchToRegister && /* @__PURE__ */ React7.createElement("div", { className: "text-center mt-5 pt-4 border-t border-gray-100" }, /* @__PURE__ */ React7.createElement("span", { className: "text-gray-500 text-sm mr-1" }, "\u8FD8\u6CA1\u6709\u8D26\u53F7\uFF1F"), /* @__PURE__ */ React7.createElement("button", { type: "button", onClick: onSwitchToRegister, className: authModalStyles.linkBtnClass }, "\u7ACB\u5373\u6CE8\u518C")))))), /* @__PURE__ */ React7.createElement(
+    ForgotPasswordModal,
+    {
+      isOpen: showForgotPassword,
+      onClose: () => setShowForgotPassword(false),
+      onSuccess: () => {
+        setShowForgotPassword(false);
+        handleSuccess();
+      }
+    }
+  ));
+}
+function RegisterModal({ isOpen, onClose, onSuccess, onSwitchToLogin }) {
+  const { authClient, refreshSession } = useAuthContext();
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const handleSuccess = async () => {
+    await refreshSession();
+    onSuccess?.();
+  };
+  if (!isOpen) return null;
+  return /* @__PURE__ */ React7.createElement(AuthModalPortal, null, /* @__PURE__ */ React7.createElement("div", { className: authModalStyles.overlayClass, style: { margin: 0 }, onClick: (e) => e.target === e.currentTarget && onClose() }, /* @__PURE__ */ React7.createElement(RegisterFormHeadless, { authClient, initialChannel: "phone", onSuccess: handleSuccess }, (state) => /* @__PURE__ */ React7.createElement("div", { className: authModalStyles.panelClass, onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React7.createElement("button", { type: "button", className: authModalStyles.closeBtnClass, onClick: onClose }, /* @__PURE__ */ React7.createElement(X, { size: 20 })), /* @__PURE__ */ React7.createElement("div", { className: "px-6 pt-6 pb-4 text-center border-b border-gray-100" }, /* @__PURE__ */ React7.createElement("h2", { className: "text-2xl font-semibold text-gray-800 mb-2" }, "\u7528\u6237\u6CE8\u518C"), /* @__PURE__ */ React7.createElement("p", { className: "text-gray-500 text-sm" }, "\u8BF7\u586B\u5199\u4EE5\u4E0B\u4FE1\u606F\u521B\u5EFA\u8D26\u6237")), /* @__PURE__ */ React7.createElement("div", { className: "px-6 pt-4 flex gap-2" }, /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => state.setChannel("phone"),
+      className: `px-3 py-1.5 text-xs rounded-full border transition-all ${state.channel === "phone" ? "bg-blue-500 text-white border-blue-500" : "bg-white text-gray-600 border-gray-200 hover:border-blue-300"}`
+    },
+    "\u624B\u673A\u53F7\u6CE8\u518C"
+  ), /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => state.setChannel("email"),
+      className: `px-3 py-1.5 text-xs rounded-full border transition-all ${state.channel === "email" ? "bg-blue-500 text-white border-blue-500" : "bg-white text-gray-600 border-gray-200 hover:border-blue-300"}`
+    },
+    "\u90AE\u7BB1\u6CE8\u518C"
+  )), /* @__PURE__ */ React7.createElement("form", { onSubmit: state.handleSubmit, className: "p-6" }, state.channel === "email" && /* @__PURE__ */ React7.createElement("div", { className: "mb-5" }, /* @__PURE__ */ React7.createElement("label", { htmlFor: "register-email", className: "block mb-1.5 text-sm font-medium text-gray-700" }, "\u90AE\u7BB1 *"), /* @__PURE__ */ React7.createElement("div", { className: "relative flex items-center" }, /* @__PURE__ */ React7.createElement(Mail, { size: 18, className: "absolute left-4 text-gray-400 z-[1] pointer-events-none" }), /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      id: "register-email",
+      type: "email",
+      autoComplete: "email",
+      value: state.email,
+      onChange: (e) => state.setEmail(e.target.value),
+      placeholder: "\u8BF7\u8F93\u5165\u90AE\u7BB1",
+      className: authModalStyles.inputClass,
+      disabled: state.loading
+    }
+  ))), state.channel === "phone" && state.step === "credentials" && /* @__PURE__ */ React7.createElement("div", { className: "mb-5" }, /* @__PURE__ */ React7.createElement("label", { htmlFor: "register-phone", className: "block mb-1.5 text-sm font-medium text-gray-700" }, "\u624B\u673A\u53F7 *"), /* @__PURE__ */ React7.createElement("div", { className: "relative flex items-center" }, /* @__PURE__ */ React7.createElement(Phone, { size: 18, className: "absolute left-4 text-gray-400 z-[1] pointer-events-none" }), /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      id: "register-phone",
+      type: "tel",
+      autoComplete: "tel",
+      value: state.phone,
+      onChange: (e) => state.setPhone(e.target.value),
+      placeholder: "\u8BF7\u8F93\u5165\u624B\u673A\u53F7",
+      className: authModalStyles.inputClass,
+      disabled: state.loading
+    }
+  ))), state.channel === "email" && /* @__PURE__ */ React7.createElement("div", { className: "mb-5" }, /* @__PURE__ */ React7.createElement("label", { htmlFor: "register-name", className: "block mb-1.5 text-sm font-medium text-gray-700" }, "\u6635\u79F0 *"), /* @__PURE__ */ React7.createElement("div", { className: "relative flex items-center" }, /* @__PURE__ */ React7.createElement(User, { size: 18, className: "absolute left-4 text-gray-400 z-[1] pointer-events-none" }), /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      id: "register-name",
+      type: "text",
+      autoComplete: "name",
+      value: state.name,
+      onChange: (e) => state.setName(e.target.value),
+      placeholder: "\u8BF7\u8F93\u5165\u6635\u79F0",
+      className: authModalStyles.inputClass,
+      disabled: state.loading
+    }
+  ))), state.step === "credentials" && /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("div", { className: "mb-5" }, /* @__PURE__ */ React7.createElement("label", { htmlFor: "register-password", className: "block mb-1.5 text-sm font-medium text-gray-700" }, "\u5BC6\u7801 *"), /* @__PURE__ */ React7.createElement("div", { className: "relative flex items-center" }, /* @__PURE__ */ React7.createElement(Lock, { size: 18, className: "absolute left-4 text-gray-400 z-[1] pointer-events-none" }), /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      id: "register-password",
+      type: showPassword ? "text" : "password",
+      autoComplete: "new-password",
+      value: state.password,
+      onChange: (e) => state.setPassword(e.target.value),
+      placeholder: "\u8BF7\u8F93\u5165\u5BC6\u7801\uFF08\u81F3\u5C116\u4F4D\uFF09",
+      className: `${authModalStyles.inputClass} pr-12`,
+      disabled: state.loading
+    }
+  ), /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      type: "button",
+      className: "absolute right-4 bg-transparent border-none text-gray-400 cursor-pointer p-1 rounded transition-all flex items-center justify-center min-w-6 min-h-6 hover:text-gray-600 hover:bg-gray-100",
+      onClick: () => setShowPassword((v) => !v),
+      disabled: state.loading
+    },
+    showPassword ? /* @__PURE__ */ React7.createElement(EyeOff, { size: 18 }) : /* @__PURE__ */ React7.createElement(Eye, { size: 18 })
+  ))), /* @__PURE__ */ React7.createElement("div", { className: "mb-5" }, /* @__PURE__ */ React7.createElement("label", { htmlFor: "register-confirm-password", className: "block mb-1.5 text-sm font-medium text-gray-700" }, "\u786E\u8BA4\u5BC6\u7801 *"), /* @__PURE__ */ React7.createElement("div", { className: "relative flex items-center" }, /* @__PURE__ */ React7.createElement(Lock, { size: 18, className: "absolute left-4 text-gray-400 z-[1] pointer-events-none" }), /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      id: "register-confirm-password",
+      type: showConfirmPassword ? "text" : "password",
+      autoComplete: "new-password",
+      value: state.confirmPassword,
+      onChange: (e) => state.setConfirmPassword(e.target.value),
+      placeholder: "\u8BF7\u518D\u6B21\u8F93\u5165\u5BC6\u7801",
+      className: `${authModalStyles.inputClass} pr-12`,
+      disabled: state.loading
+    }
+  ), /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      type: "button",
+      className: "absolute right-4 bg-transparent border-none text-gray-400 cursor-pointer p-1 rounded transition-all flex items-center justify-center min-w-6 min-h-6 hover:text-gray-600 hover:bg-gray-100",
+      onClick: () => setShowConfirmPassword((v) => !v),
+      disabled: state.loading
+    },
+    showConfirmPassword ? /* @__PURE__ */ React7.createElement(EyeOff, { size: 18 }) : /* @__PURE__ */ React7.createElement(Eye, { size: 18 })
+  )))), state.channel === "phone" && state.step === "otp" && /* @__PURE__ */ React7.createElement("div", { className: "mb-5" }, /* @__PURE__ */ React7.createElement("label", { htmlFor: "register-otp", className: "block mb-1.5 text-sm font-medium text-gray-700" }, "\u9A8C\u8BC1\u7801 *"), /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      id: "register-otp",
+      type: "text",
+      inputMode: "numeric",
+      value: state.otp,
+      onChange: (e) => state.setOtp(e.target.value),
+      placeholder: "\u8BF7\u8F93\u5165\u9A8C\u8BC1\u7801",
+      className: "w-full py-3 px-4 border-2 border-gray-200 rounded-lg text-base transition-all box-border min-h-12 bg-white focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/10",
+      disabled: state.loading,
+      maxLength: 8
+    }
+  )), state.error && /* @__PURE__ */ React7.createElement("div", { className: authModalStyles.errorClass }, state.error), /* @__PURE__ */ React7.createElement("button", { type: "submit", className: authModalStyles.submitClass, disabled: state.loading }, state.loading ? "\u5904\u7406\u4E2D..." : state.channel === "phone" && state.step === "credentials" ? "\u53D1\u9001\u9A8C\u8BC1\u7801" : state.channel === "phone" && state.step === "otp" ? "\u5B8C\u6210\u6CE8\u518C" : "\u6CE8\u518C"), onSwitchToLogin && /* @__PURE__ */ React7.createElement("div", { className: "text-center mt-5 pt-4 border-t border-gray-100" }, /* @__PURE__ */ React7.createElement("span", { className: "text-gray-500 text-sm mr-1" }, "\u5DF2\u6709\u8D26\u53F7\uFF1F"), /* @__PURE__ */ React7.createElement("button", { type: "button", onClick: onSwitchToLogin, className: authModalStyles.linkBtnClass }, "\u7ACB\u5373\u767B\u5F55")))))));
+}
+function AuthGuard({ children, fallback, requireAuth = true }) {
+  const { isAuthenticated, loading, refreshSession } = useAuthContext();
+  const [showLoginModal, setShowLoginModal] = useState(false);
+  const [showRegisterModal, setShowRegisterModal] = useState(false);
+  useEffect(() => {
+    if (!loading && requireAuth && !isAuthenticated) {
+      setShowLoginModal(true);
+      setShowRegisterModal(false);
+    }
+  }, [loading, requireAuth, isAuthenticated]);
+  const handleAuthSuccess = async () => {
+    await refreshSession();
+    setShowLoginModal(false);
+    setShowRegisterModal(false);
+  };
+  if (loading) {
+    return /* @__PURE__ */ React7.createElement("div", { className: "flex items-center justify-center min-h-[200px] text-gray-500 flex-col gap-3" }, /* @__PURE__ */ React7.createElement("div", { className: "w-8 h-8 border-[3px] border-gray-200 border-t-blue-500 rounded-full animate-spin" }), /* @__PURE__ */ React7.createElement("div", null, "\u9A8C\u8BC1\u767B\u5F55\u72B6\u6001..."));
+  }
+  if (requireAuth && !isAuthenticated) {
+    return /* @__PURE__ */ React7.createElement(React7.Fragment, null, fallback ?? /* @__PURE__ */ React7.createElement("div", { className: "flex items-center justify-center min-h-[200px] text-gray-500 flex-col gap-4 p-6 text-center" }, /* @__PURE__ */ React7.createElement("div", { className: "text-5xl opacity-50" }, "\u{1F512}"), /* @__PURE__ */ React7.createElement("div", { className: "text-lg font-medium" }, "\u8BF7\u5148\u767B\u5F55\u4EE5\u8BBF\u95EE\u6B64\u9875\u9762"), /* @__PURE__ */ React7.createElement("div", { className: "text-sm opacity-70" }, "\u767B\u5F55\u6216\u6CE8\u518C\u540E\u5373\u53EF\u67E5\u770B\u76F8\u5173\u5185\u5BB9"), /* @__PURE__ */ React7.createElement("div", { className: "flex gap-3 mt-2" }, /* @__PURE__ */ React7.createElement(
+      "button",
+      {
+        type: "button",
+        className: "px-4 py-2 rounded-lg bg-blue-500 text-white text-sm font-medium hover:bg-blue-600 transition-colors",
+        onClick: () => {
+          setShowRegisterModal(false);
+          setShowLoginModal(true);
+        }
+      },
+      "\u767B\u5F55"
+    ), /* @__PURE__ */ React7.createElement(
+      "button",
+      {
+        type: "button",
+        className: "px-4 py-2 rounded-lg border border-gray-200 text-gray-700 text-sm font-medium hover:border-blue-300 hover:text-blue-600 transition-colors",
+        onClick: () => {
+          setShowLoginModal(false);
+          setShowRegisterModal(true);
+        }
+      },
+      "\u6CE8\u518C"
+    ))), /* @__PURE__ */ React7.createElement(
+      LoginModal,
+      {
+        isOpen: showLoginModal,
+        onClose: () => setShowLoginModal(false),
+        onSuccess: handleAuthSuccess,
+        onSwitchToRegister: () => {
+          setShowLoginModal(false);
+          setShowRegisterModal(true);
+        }
+      }
+    ), /* @__PURE__ */ React7.createElement(
+      RegisterModal,
+      {
+        isOpen: showRegisterModal,
+        onClose: () => setShowRegisterModal(false),
+        onSuccess: handleAuthSuccess,
+        onSwitchToLogin: () => {
+          setShowRegisterModal(false);
+          setShowLoginModal(true);
+        }
+      }
+    ));
+  }
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, children);
+}
+function UserMenu({ customMenuItems = [], className }) {
+  const { user, isAuthenticated, signOut, refreshSession } = useAuthContext();
+  const [isOpen, setIsOpen] = useState(false);
+  const [showLoginModal, setShowLoginModal] = useState(false);
+  const [showRegisterModal, setShowRegisterModal] = useState(false);
+  useEffect(() => {
+    const handleGlobalClick = () => setIsOpen(false);
+    if (isOpen) document.addEventListener("click", handleGlobalClick);
+    return () => document.removeEventListener("click", handleGlobalClick);
+  }, [isOpen]);
+  const visibleCustomMenuItems = customMenuItems.filter((item) => {
+    if (item.requireAuth === true) return isAuthenticated;
+    if (item.requireAuth === false) return !isAuthenticated;
+    return true;
+  });
+  const handleAuthSuccess = async () => {
+    await refreshSession();
+    setShowLoginModal(false);
+    setShowRegisterModal(false);
+  };
+  const displayName = user?.name || user?.phoneNumber || user?.email || "\u7528\u6237";
+  return /* @__PURE__ */ React7.createElement("div", { className: `relative inline-block ${className ?? ""}` }, /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      type: "button",
+      className: "flex items-center gap-2 px-3 py-2 bg-slate-50 text-slate-500 border border-slate-200 rounded-lg cursor-pointer transition-all min-w-11 min-h-11 text-sm font-medium hover:bg-slate-200 hover:text-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-500/10",
+      onClick: () => setIsOpen((v) => !v)
+    },
+    /* @__PURE__ */ React7.createElement(User, { size: 24 }),
+    isAuthenticated && user && /* @__PURE__ */ React7.createElement("span", { className: "max-w-[120px] overflow-hidden text-ellipsis whitespace-nowrap" }, displayName)
+  ), isOpen && /* @__PURE__ */ React7.createElement(
+    "div",
+    {
+      className: "absolute top-[calc(100%+0.5rem)] right-0 z-[1000] min-w-[200px] bg-white border border-slate-200 rounded-xl shadow-lg max-h-[90vh] overflow-y-auto p-2",
+      onClick: (e) => e.stopPropagation()
+    },
+    isAuthenticated && user ? /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("div", { className: "p-3 mb-2 bg-slate-50 rounded-lg" }, /* @__PURE__ */ React7.createElement("div", { className: "text-sm font-semibold text-slate-800 mb-1 overflow-hidden text-ellipsis whitespace-nowrap" }, user.name || "\u672A\u8BBE\u7F6E\u540D\u79F0"), /* @__PURE__ */ React7.createElement("div", { className: "text-xs text-slate-500 mb-1 overflow-hidden text-ellipsis whitespace-nowrap" }, user.phoneNumber || user.email), user.role && /* @__PURE__ */ React7.createElement("div", { className: "text-xs text-blue-500 font-medium" }, user.role === "admin" ? "\u7BA1\u7406\u5458" : "\u666E\u901A\u7528\u6237")), visibleCustomMenuItems.length > 0 && /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("div", { className: "h-px bg-slate-200 my-2" }), visibleCustomMenuItems.map((item) => {
+      const IconComponent = item.icon;
+      return /* @__PURE__ */ React7.createElement(
+        "button",
+        {
+          key: item.id,
+          type: "button",
+          className: "flex items-center gap-3 w-full p-3 bg-transparent border-none rounded-lg text-gray-700 text-sm font-medium cursor-pointer transition-all text-left min-h-11 hover:bg-slate-100 hover:text-slate-800",
+          onClick: () => {
+            item.onClick();
+            setIsOpen(false);
+          }
+        },
+        IconComponent && /* @__PURE__ */ React7.createElement(IconComponent, { size: 16 }),
+        /* @__PURE__ */ React7.createElement("span", null, item.label)
+      );
+    })), /* @__PURE__ */ React7.createElement("div", { className: "h-px bg-slate-200 my-2" }), /* @__PURE__ */ React7.createElement(
+      "button",
+      {
+        type: "button",
+        className: "flex items-center gap-3 w-full p-3 bg-transparent border-none rounded-lg text-gray-700 text-sm font-medium cursor-pointer transition-all text-left min-h-11 hover:bg-red-50 hover:text-red-600",
+        onClick: async () => {
+          await signOut();
+          setIsOpen(false);
+        }
+      },
+      /* @__PURE__ */ React7.createElement(LogOut, { size: 16 }),
+      /* @__PURE__ */ React7.createElement("span", null, "\u9000\u51FA\u767B\u5F55")
+    )) : /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(
+      "button",
+      {
+        type: "button",
+        className: "flex items-center gap-3 w-full p-3 bg-transparent border-none rounded-lg text-gray-700 text-sm font-medium cursor-pointer transition-all text-left min-h-11 hover:bg-slate-100 hover:text-slate-800",
+        onClick: () => {
+          setShowLoginModal(true);
+          setIsOpen(false);
+        }
+      },
+      /* @__PURE__ */ React7.createElement(LogIn, { size: 16 }),
+      /* @__PURE__ */ React7.createElement("span", null, "\u767B\u5F55")
+    ), /* @__PURE__ */ React7.createElement(
+      "button",
+      {
+        type: "button",
+        className: "flex items-center gap-3 w-full p-3 bg-transparent border-none rounded-lg text-gray-700 text-sm font-medium cursor-pointer transition-all text-left min-h-11 hover:bg-slate-100 hover:text-slate-800",
+        onClick: () => {
+          setShowRegisterModal(true);
+          setIsOpen(false);
+        }
+      },
+      /* @__PURE__ */ React7.createElement(User, { size: 16 }),
+      /* @__PURE__ */ React7.createElement("span", null, "\u6CE8\u518C")
+    ), visibleCustomMenuItems.length > 0 && /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("div", { className: "h-px bg-slate-200 my-2" }), visibleCustomMenuItems.map((item) => {
+      const IconComponent = item.icon;
+      return /* @__PURE__ */ React7.createElement(
+        "button",
+        {
+          key: item.id,
+          type: "button",
+          className: "flex items-center gap-3 w-full p-3 bg-transparent border-none rounded-lg text-gray-700 text-sm font-medium cursor-pointer transition-all text-left min-h-11 hover:bg-slate-100 hover:text-slate-800",
+          onClick: () => {
+            item.onClick();
+            setIsOpen(false);
+          }
+        },
+        IconComponent && /* @__PURE__ */ React7.createElement(IconComponent, { size: 16 }),
+        /* @__PURE__ */ React7.createElement("span", null, item.label)
+      );
+    })))
+  ), /* @__PURE__ */ React7.createElement(
+    LoginModal,
+    {
+      isOpen: showLoginModal,
+      onClose: () => setShowLoginModal(false),
+      onSuccess: handleAuthSuccess,
+      onSwitchToRegister: () => {
+        setShowLoginModal(false);
+        setShowRegisterModal(true);
+      }
+    }
+  ), /* @__PURE__ */ React7.createElement(
+    RegisterModal,
+    {
+      isOpen: showRegisterModal,
+      onClose: () => setShowRegisterModal(false),
+      onSuccess: handleAuthSuccess,
+      onSwitchToLogin: () => {
+        setShowRegisterModal(false);
+        setShowLoginModal(true);
+      }
+    }
+  ));
+}
+
+export { AuthGuard, ForgotPasswordModal, LoginModal, RegisterFormHeadless, RegisterModal, SignInForm, UserMenu, VerifyOtpForm };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map