@insforge/react 1.0.4 → 1.0.5-dev.1

package/dist/index.cjs

@@ -16,7 +16,6 @@ if (typeof document !== 'undefined' && typeof window !== 'undefined') {
 
 var React2 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
-var sdk = require('@insforge/sdk');
 var react = require('@insforge/shared/react');
 var lucideReact = require('lucide-react');
 var zod = require('zod');
@@ -246,7 +245,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element = REACT_ELEMENT_TYPE;
         var ForwardRef = REACT_FORWARD_REF_TYPE;
-        var Fragment9 = REACT_FRAGMENT_TYPE;
+        var Fragment10 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo = REACT_MEMO_TYPE;
         var Portal = REACT_PORTAL_TYPE;
@@ -305,7 +304,7 @@ var require_react_is_development = __commonJS({
         exports$1.ContextProvider = ContextProvider;
         exports$1.Element = Element;
         exports$1.ForwardRef = ForwardRef;
-        exports$1.Fragment = Fragment9;
+        exports$1.Fragment = Fragment10;
         exports$1.Lazy = Lazy;
         exports$1.Memo = Memo;
         exports$1.Portal = Portal;
@@ -488,6 +487,8 @@ function useSearchParams() {
   const adapter = useNavigationAdapter();
   return adapter.useSearchParams();
 }
+
+// src/core/InsforgeManager.ts
 var InsforgeManager = class _InsforgeManager {
   // Static private instance
   static instance = null;
@@ -503,7 +504,7 @@ var InsforgeManager = class _InsforgeManager {
   // Private constructor (prevents external instantiation)
   constructor(config) {
     this.config = config;
-    this.sdk = sdk.createClient({ baseUrl: config.baseUrl });
+    this.sdk = config.client;
     this.user = void 0;
     this.isLoaded = false;
   }
@@ -511,6 +512,9 @@ var InsforgeManager = class _InsforgeManager {
   static getInstance(config) {
     if (typeof window !== "undefined" && _InsforgeManager.instance) {
       _InsforgeManager.instance.updateConfig(config);
+      if (config.client && _InsforgeManager.instance.sdk !== config.client) {
+        _InsforgeManager.instance.sdk = config.client;
+      }
       return _InsforgeManager.instance;
     }
     _InsforgeManager.instance = new _InsforgeManager(config);
@@ -588,12 +592,10 @@ var InsforgeManager = class _InsforgeManager {
       }
       const userResult = await this.sdk.auth.getCurrentUser();
       if (userResult.data) {
-        const profile = userResult.data.user.profile;
         const userData = {
           id: userResult.data.user.id,
           email: userResult.data.user.email,
-          name: profile?.name || "",
-          avatarUrl: profile?.avatar_url || ""
+          profile: userResult.data.user.profile
         };
         this.user = userData;
         if (this.config.onAuthChange) {
@@ -629,12 +631,10 @@ var InsforgeManager = class _InsforgeManager {
   async handleAuthSuccess(authToken, fallbackUser) {
     const userResult = await this.sdk.auth.getCurrentUser();
     if (userResult.data) {
-      const profile = userResult.data.user.profile;
       const userData = {
         id: userResult.data.user.id,
         email: userResult.data.user.email,
-        name: profile?.name || "",
-        avatarUrl: profile?.avatar_url || ""
+        profile: userResult.data.user.profile
       };
       this.user = userData;
       this.notifyListeners();
@@ -654,8 +654,7 @@ var InsforgeManager = class _InsforgeManager {
       const userData = {
         id: fallbackUser.id || "",
         email: fallbackUser.email || "",
-        name: fallbackUser.name || "",
-        avatarUrl: ""
+        profile: fallbackUser.profile || null
       };
       this.user = userData;
       this.notifyListeners();
@@ -676,7 +675,7 @@ var InsforgeManager = class _InsforgeManager {
         sdkResult.data.user ? {
           id: sdkResult.data.user.id,
           email: sdkResult.data.user.email,
-          name: sdkResult.data.user.profile?.name || ""
+          profile: sdkResult.data.user.profile || void 0
         } : void 0
       );
       return sdkResult.data;
@@ -697,7 +696,7 @@ var InsforgeManager = class _InsforgeManager {
           sdkResult.data.user ? {
             id: sdkResult.data.user.id,
             email: sdkResult.data.user.email,
-            name: sdkResult.data.user.profile?.name || ""
+            profile: sdkResult.data.user.profile || void 0
           } : void 0
         );
       }
@@ -735,27 +734,21 @@ var InsforgeManager = class _InsforgeManager {
     if (!this.user) {
       return { error: "No user signed in" };
     }
-    const profileUpdate = {
-      name: data.name,
-      avatar_url: data.avatarUrl
-    };
-    const result = await this.sdk.auth.setProfile(profileUpdate);
+    if (!data) {
+      return { error: "No profile data provided" };
+    }
+    const result = await this.sdk.auth.setProfile(data);
     if (result.data) {
-      const userResult = await this.sdk.auth.getCurrentUser();
-      if (userResult.data) {
-        const profile = userResult.data.user.profile;
-        const updatedUser = {
-          id: userResult.data.user.id,
-          email: userResult.data.user.email,
-          name: profile?.name || "",
-          avatarUrl: profile?.avatar_url || ""
-        };
-        this.user = updatedUser;
-        if (this.config.onAuthChange) {
-          this.config.onAuthChange(updatedUser);
-        }
-        this.notifyListeners();
+      const updatedUser = {
+        id: this.user.id,
+        email: this.user.email,
+        profile: data
+      };
+      this.user = updatedUser;
+      if (this.config.onAuthChange) {
+        this.config.onAuthChange(updatedUser);
       }
+      this.notifyListeners();
       return null;
     }
     const error = result.error;
@@ -851,12 +844,10 @@ var InsforgeManager = class _InsforgeManager {
       return;
     }
     if (initialState.userId) {
-      const normalizeValue = (val) => val && val !== "null" ? val : "";
       this.user = {
         id: initialState.userId,
-        email: normalizeValue(initialState.user?.email),
-        name: normalizeValue(initialState.user?.name),
-        avatarUrl: normalizeValue(initialState.user?.avatarUrl)
+        email: initialState.user?.email || "",
+        profile: initialState.user?.profile || null
       };
     } else {
       this.user = null;
@@ -2200,7 +2191,7 @@ function StyleProvider({ children, nonce }) {
 }
 function InsforgeProviderCore({
   children,
-  baseUrl,
+  client,
   afterSignInUrl = "/",
   onAuthChange,
   onSignIn,
@@ -2210,14 +2201,14 @@ function InsforgeProviderCore({
 }) {
   const manager = React2.useMemo(
     () => InsforgeManager.getInstance({
-      baseUrl,
+      client,
       afterSignInUrl,
       onAuthChange,
       onSignIn,
       onSignOut,
       onRefresh
     }),
-    [baseUrl, afterSignInUrl, onAuthChange, onSignIn, onSignOut, onRefresh]
+    [client, afterSignInUrl, onAuthChange, onSignIn, onSignOut, onRefresh]
   );
   if (initialState) {
     const currentState = manager.getState();
@@ -2269,7 +2260,7 @@ function InsforgeProviderCore({
       loginWithOAuth: (provider, redirectTo) => manager.loginWithOAuth(provider, redirectTo),
       getPublicAuthConfig: () => manager.getPublicAuthConfig(),
       // Config
-      baseUrl: manager.getConfig().baseUrl,
+      baseUrl: manager.getConfig().client.getHttpClient().baseUrl,
       afterSignInUrl: manager.getConfig().afterSignInUrl || "/"
     }),
     [state, manager]
@@ -5278,9 +5269,384 @@ var UserButtonMenuItemIcon = styled.div`
     height: 100%;
   }
 `;
-function UserButton({ afterSignOutUrl = "/", mode = "simple" }) {
+var ProfileModalOverlay = styled.div`
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  padding: ${theme.spacing[4]};
+`;
+var ProfileModalContainer = styled.div`
+  background-color: ${theme.colors.bgWhite};
+  border-radius: ${theme.radius.xl};
+  box-shadow: ${theme.shadow.lg};
+  width: 100%;
+  max-width: 400px;
+  max-height: 90vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  font-family: ${theme.fontFamily.base};
+`;
+var ProfileModalHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: ${theme.spacing[4]} ${theme.spacing[6]};
+  border-bottom: 1px solid ${theme.colors.border};
+`;
+var ProfileModalTitle = styled.h2`
+  font-size: ${theme.fontSize.lg};
+  font-weight: ${theme.fontWeight.semibold};
+  color: ${theme.colors.text};
+  margin: 0;
+`;
+var ProfileModalCloseButton = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: ${theme.radius.md};
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: ${theme.colors.textSecondary};
+  transition: all ${theme.transition.fast};
+
+  &:hover {
+    background-color: ${theme.colors.bgLight};
+    color: ${theme.colors.text};
+  }
+
+  svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+`;
+var ProfileModalBody = styled.div`
+  padding: ${theme.spacing[6]};
+  overflow-y: auto;
+  flex: 1;
+`;
+var ProfileAvatarSection = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: ${theme.spacing[6]};
+`;
+var ProfileAvatar = styled.div`
+  width: 5rem;
+  height: 5rem;
+  border-radius: ${theme.radius.full};
+  background-color: ${theme.colors.primary};
+  color: ${theme.colors.bgWhite};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: ${theme.fontWeight.semibold};
+  font-size: ${theme.fontSize["2xl"]};
+  overflow: hidden;
+`;
+var ProfileAvatarImage = styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+`;
+var ProfileFieldsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${theme.spacing[4]};
+`;
+var ProfileField = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${theme.spacing[1]};
+`;
+var ProfileFieldLabel = styled.label`
+  font-size: ${theme.fontSize.sm};
+  font-weight: ${theme.fontWeight.medium};
+  color: ${theme.colors.textSecondary};
+  text-transform: capitalize;
+`;
+var ProfileFieldValue = styled.div`
+  font-size: ${theme.fontSize.base};
+  color: ${theme.colors.text};
+  padding: ${theme.spacing[2]} 0;
+  word-break: break-word;
+`;
+var ProfileFieldInput = styled.input`
+  width: 100%;
+  height: ${theme.sizes.input.height};
+  padding: 0 ${theme.spacing[3]};
+  border: 1px solid ${theme.colors.border};
+  border-radius: ${theme.radius.md};
+  font-size: ${theme.fontSize.base};
+  font-family: ${theme.fontFamily.base};
+  color: ${theme.colors.text};
+  background-color: ${theme.colors.bgWhite};
+  transition: border-color ${theme.transition.fast};
+
+  &:focus {
+    outline: none;
+    border-color: ${theme.colors.borderFocus};
+  }
+
+  &:disabled {
+    background-color: ${theme.colors.bgLight};
+    color: ${theme.colors.textSecondary};
+    cursor: not-allowed;
+  }
+`;
+var ProfileModalFooter = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: ${theme.spacing[3]};
+  padding: ${theme.spacing[4]} ${theme.spacing[6]};
+  border-top: 1px solid ${theme.colors.border};
+`;
+var ProfileButton = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${theme.spacing[2]};
+  height: ${theme.sizes.button.height};
+  padding: 0 ${theme.spacing[4]};
+  border-radius: ${theme.radius.md};
+  font-size: ${theme.fontSize.sm};
+  font-weight: ${theme.fontWeight.medium};
+  font-family: ${theme.fontFamily.base};
+  cursor: pointer;
+  transition: all ${theme.transition.fast};
+
+  ${(props) => props.$primary ? `
+    background-color: ${theme.colors.primary};
+    color: ${theme.colors.bgWhite};
+    border: none;
+
+    &:hover:not(:disabled) {
+      background-color: ${theme.colors.primaryHover};
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  ` : `
+    background-color: ${theme.colors.bgWhite};
+    color: ${theme.colors.text};
+    border: 1px solid ${theme.colors.border};
+
+    &:hover:not(:disabled) {
+      background-color: ${theme.colors.bgLight};
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  `}
+`;
+var ProfileSpinner = styled.div`
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid transparent;
+  border-top-color: currentColor;
+  border-radius: ${theme.radius.full};
+  animation: spin 0.6s linear infinite;
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+`;
+var READ_ONLY_FIELDS = ["id", "email", "avatar_url", "created_at", "updated_at"];
+var HIDDEN_FIELDS = ["id"];
+function formatFieldLabel(key) {
+  return key.replace(/_/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").toLowerCase();
+}
+function UserProfileModal({ onClose, onError }) {
+  const { user, updateUser, isLoaded } = useInsforge();
+  const [isEditing, setIsEditing] = React2.useState(false);
+  const [isSaving, setIsSaving] = React2.useState(false);
+  const [imageError, setImageError] = React2.useState(false);
+  const [formData, setFormData] = React2.useState({});
+  React2.useEffect(() => {
+    if (user) {
+      const initialData = {
+        name: user.profile?.name || ""
+      };
+      if (user.profile) {
+        Object.entries(user.profile).forEach(([key, value]) => {
+          if (!HIDDEN_FIELDS.includes(key) && typeof value === "string") {
+            initialData[key] = value;
+          }
+        });
+      }
+      setFormData(initialData);
+    }
+  }, [user]);
+  React2.useEffect(() => {
+    setImageError(false);
+    const avatarUrl = user?.profile?.avatar_url;
+    if (!avatarUrl) {
+      return;
+    }
+    const checkImageUrl = async () => {
+      try {
+        const response = await fetch(avatarUrl, {
+          method: "HEAD",
+          cache: "no-cache"
+        });
+        if (!response.ok) {
+          setImageError(true);
+        }
+      } catch {
+        setImageError(true);
+      }
+    };
+    void checkImageUrl();
+  }, [user?.profile?.avatar_url]);
+  const handleFieldChange = React2.useCallback((key, value) => {
+    setFormData((prev2) => ({
+      ...prev2,
+      [key]: value
+    }));
+  }, []);
+  const handleSave = React2.useCallback(async () => {
+    if (!user) return;
+    setIsSaving(true);
+    try {
+      const { name, ...dynamicFields } = formData;
+      const updateData = {
+        profile: {
+          name
+        }
+      };
+      if (Object.keys(dynamicFields).length > 0) {
+        updateData.profile = dynamicFields;
+      }
+      const result = await updateUser(updateData);
+      if (result?.error) {
+        onError?.(result.error);
+      } else {
+        setIsEditing(false);
+      }
+    } catch (error) {
+      onError?.(error instanceof Error ? error.message : "Failed to update profile");
+    } finally {
+      setIsSaving(false);
+    }
+  }, [user, formData, updateUser, onError]);
+  const handleCancel = React2.useCallback(() => {
+    if (user) {
+      const resetData = {
+        name: user.profile?.name || ""
+      };
+      if (user.profile) {
+        Object.entries(user.profile).forEach(([key, value]) => {
+          if (!HIDDEN_FIELDS.includes(key) && typeof value === "string") {
+            resetData[key] = value;
+          }
+        });
+      }
+      setFormData(resetData);
+    }
+    setIsEditing(false);
+  }, [user]);
+  const handleOverlayClick = React2.useCallback(
+    (e) => {
+      if (e.target === e.currentTarget) {
+        onClose();
+      }
+    },
+    [onClose]
+  );
+  React2.useEffect(() => {
+    const handleEscape = (e) => {
+      if (e.key === "Escape") {
+        if (isEditing) {
+          handleCancel();
+        } else {
+          onClose();
+        }
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isEditing, handleCancel, onClose]);
+  if (!isLoaded || !user) {
+    return null;
+  }
+  const initials = user.profile?.name ? user.profile.name.charAt(0).toUpperCase() : user.email.split("@")[0].slice(0, 2).toUpperCase();
+  const fields = [];
+  fields.push({ key: "email", value: user.email, readOnly: true });
+  fields.push({
+    key: "name",
+    value: isEditing ? formData.name || "" : user.profile?.name || "",
+    readOnly: false
+  });
+  if (user.profile) {
+    Object.entries(user.profile).forEach(([key, value]) => {
+      if (!HIDDEN_FIELDS.includes(key) && typeof value === "string") {
+        fields.push({
+          key,
+          value: isEditing ? formData[key] ?? value : value,
+          readOnly: READ_ONLY_FIELDS.includes(key)
+        });
+      }
+    });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(ProfileModalOverlay, { onClick: handleOverlayClick, children: /* @__PURE__ */ jsxRuntime.jsxs(ProfileModalContainer, { onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(ProfileModalHeader, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ProfileModalTitle, { children: "Profile" }),
+      /* @__PURE__ */ jsxRuntime.jsx(ProfileModalCloseButton, { onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ProfileModalBody, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ProfileAvatarSection, { children: /* @__PURE__ */ jsxRuntime.jsx(ProfileAvatar, { children: user.profile?.avatar_url && !imageError ? /* @__PURE__ */ jsxRuntime.jsx(
+        ProfileAvatarImage,
+        {
+          src: user.profile.avatar_url,
+          alt: user.profile?.name || user.email,
+          onError: () => setImageError(true)
+        }
+      ) : initials }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ProfileFieldsContainer, { children: fields.map(({ key, value, readOnly }) => /* @__PURE__ */ jsxRuntime.jsxs(ProfileField, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ProfileFieldLabel, { children: formatFieldLabel(key) }),
+        isEditing && !readOnly ? /* @__PURE__ */ jsxRuntime.jsx(
+          ProfileFieldInput,
+          {
+            type: "text",
+            value: formData[key] ?? value,
+            onChange: (e) => handleFieldChange(key, e.target.value),
+            disabled: isSaving
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(ProfileFieldValue, { children: value || "-" })
+      ] }, key)) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(ProfileModalFooter, { children: isEditing ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ProfileButton, { onClick: handleCancel, disabled: isSaving, children: "Cancel" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ProfileButton, { $primary: true, onClick: () => void handleSave(), disabled: isSaving, children: [
+        isSaving && /* @__PURE__ */ jsxRuntime.jsx(ProfileSpinner, {}),
+        isSaving ? "Saving..." : "Save"
+      ] })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx(ProfileButton, { $primary: true, onClick: () => setIsEditing(true), children: "Edit Profile" }) })
+  ] }) });
+}
+function UserButton({
+  afterSignOutUrl = "/",
+  mode = "simple",
+  showProfile = true,
+  onProfileError
+}) {
   const { user } = useInsforge();
   const [isOpen, setIsOpen] = React2.useState(false);
+  const [showProfileModal, setShowProfileModal] = React2.useState(false);
   const [imageError, setImageError] = React2.useState(false);
   const [openUpward, setOpenUpward] = React2.useState(false);
   const [horizontalOffset, setHorizontalOffset] = React2.useState(0);
@@ -5288,7 +5654,7 @@ function UserButton({ afterSignOutUrl = "/", mode = "simple" }) {
   const menuRef = React2.useRef(null);
   React2.useEffect(() => {
     setImageError(false);
-    const avatarUrl = user?.avatarUrl;
+    const avatarUrl = user?.profile?.avatar_url;
     if (!avatarUrl) {
       return;
     }
@@ -5309,7 +5675,7 @@ function UserButton({ afterSignOutUrl = "/", mode = "simple" }) {
       }
     };
     void checkImageUrl();
-  }, [user?.avatarUrl]);
+  }, [user?.profile?.avatar_url]);
   React2.useEffect(() => {
     if (isOpen && dropdownRef.current) {
       const buttonRect = dropdownRef.current.getBoundingClientRect();
@@ -5353,7 +5719,7 @@ function UserButton({ afterSignOutUrl = "/", mode = "simple" }) {
   if (!user) {
     return null;
   }
-  const initials = user.name ? user.name.charAt(0).toUpperCase() : user.email.split("@")[0].slice(0, 2).toUpperCase();
+  const initials = user.profile?.name ? user.profile.name.charAt(0).toUpperCase() : user.email.split("@")[0].slice(0, 2).toUpperCase();
   return /* @__PURE__ */ jsxRuntime.jsxs(UserButtonContainer, { ref: dropdownRef, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       UserButtonButton,
@@ -5363,25 +5729,41 @@ function UserButton({ afterSignOutUrl = "/", mode = "simple" }) {
         "aria-expanded": isOpen,
         "aria-haspopup": "true",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(UserButtonAvatar, { children: user.avatarUrl && !imageError ? /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(UserButtonAvatar, { children: user.profile?.avatar_url && !imageError ? /* @__PURE__ */ jsxRuntime.jsx(
             UserButtonAvatarImage,
             {
-              src: user.avatarUrl,
+              src: user.profile.avatar_url,
               alt: user.email,
               onError: () => setImageError(true)
             }
           ) : /* @__PURE__ */ jsxRuntime.jsx(UserButtonAvatarInitials, { children: initials }) }),
           mode === "detailed" && /* @__PURE__ */ jsxRuntime.jsxs(UserButtonInfo, { children: [
-            user.name && /* @__PURE__ */ jsxRuntime.jsx(UserButtonName, { children: user.name }),
+            user.profile?.name && /* @__PURE__ */ jsxRuntime.jsx(UserButtonName, { children: user.profile.name }),
             /* @__PURE__ */ jsxRuntime.jsx(UserButtonEmail, { children: user.email })
           ] })
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsxRuntime.jsx(UserButtonMenu, { ref: menuRef, $openUpward: openUpward, $horizontalOffset: horizontalOffset, children: /* @__PURE__ */ jsxRuntime.jsx(SignOutButton, { afterSignOutUrl, children: /* @__PURE__ */ jsxRuntime.jsxs(UserButtonMenuItem, { $signout: true, onClick: () => setIsOpen(false), children: [
-      /* @__PURE__ */ jsxRuntime.jsx(UserButtonMenuItemIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogOut, {}) }),
-      "Sign out"
-    ] }) }) })
+    isOpen && /* @__PURE__ */ jsxRuntime.jsxs(UserButtonMenu, { ref: menuRef, $openUpward: openUpward, $horizontalOffset: horizontalOffset, children: [
+      showProfile && /* @__PURE__ */ jsxRuntime.jsxs(
+        UserButtonMenuItem,
+        {
+          onClick: () => {
+            setShowProfileModal(true);
+            setIsOpen(false);
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(UserButtonMenuItemIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, {}) }),
+            "Profile"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(SignOutButton, { afterSignOutUrl, children: /* @__PURE__ */ jsxRuntime.jsxs(UserButtonMenuItem, { $signout: true, onClick: () => setIsOpen(false), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(UserButtonMenuItemIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogOut, {}) }),
+        "Sign out"
+      ] }) })
+    ] }),
+    showProfileModal && /* @__PURE__ */ jsxRuntime.jsx(UserProfileModal, { onClose: () => setShowProfileModal(false), onError: onProfileError })
   ] });
 }
 function Protect({
@@ -5548,6 +5930,7 @@ exports.SignedIn = SignedIn;
 exports.SignedOut = SignedOut;
 exports.StyleProvider = StyleProvider;
 exports.UserButton = UserButton;
+exports.UserProfileModal = UserProfileModal;
 exports.VerifyEmail = VerifyEmail;
 exports.VerifyEmailStatus = VerifyEmailStatus;
 exports.checkPasswordStrength = checkPasswordStrength;