@insforge/react 1.0.3 → 1.0.5-dev.0

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-export { ConditionalProps, ForgotPassword, ForgotPasswordProps, Protect, ProtectProps, ResetPassword, ResetPasswordProps, SignIn, SignInButton, SignInButtonProps, SignInProps, SignOutButton, SignOutButtonProps, SignUp, SignUpButton, SignUpButtonProps, SignUpProps, SignedIn, SignedOut, UserButton, UserButtonProps, VerifyEmail, VerifyEmailProps } from './components.cjs';
+export { ConditionalProps, ForgotPassword, ForgotPasswordProps, Protect, ProtectProps, ResetPassword, ResetPasswordProps, SignIn, SignInButton, SignInButtonProps, SignInProps, SignOutButton, SignOutButtonProps, SignUp, SignUpButton, SignUpButtonProps, SignUpProps, SignedIn, SignedOut, UserButton, UserButtonProps, UserProfileModal, UserProfileModalProps, VerifyEmail, VerifyEmailProps } from './components.cjs';
 export { ForgotPasswordForm, ForgotPasswordFormProps, ResetPasswordForm, ResetPasswordFormProps, SignInForm, SignInFormProps, SignUpForm, SignUpFormProps, VerifyEmailStatus, VerifyEmailStatusProps } from './forms.cjs';
 export { AuthBranding, AuthContainer, AuthContainerProps, AuthDivider, AuthDividerProps, AuthEmailVerificationStep, AuthErrorBanner, AuthErrorBannerProps, AuthFormField, AuthFormFieldProps, AuthHeader, AuthHeaderProps, AuthLink, AuthLinkProps, AuthOAuthButton, AuthOAuthButtonProps, AuthOAuthProviders, AuthOAuthProvidersProps, AuthPasswordField, AuthPasswordFieldProps, AuthPasswordStrengthIndicator, AuthPasswordStrengthIndicatorProps, AuthResetPasswordVerificationStep, AuthSubmitButton, AuthSubmitButtonProps, AuthVerificationCodeInput, AuthVerificationCodeInputProps } from './atoms.cjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -10,7 +10,6 @@ export { checkPasswordStrength, createPasswordSchema, emailSchema, passwordSchem
 import { OAuthProviderConfig } from './types.cjs';
 export { AuthConfig, EmailVerificationMethod } from './types.cjs';
 export { BrowserNavigationAdapter, NavigationAdapter, NavigationProvider, NavigationProviderProps, useNavigationAdapter, useSearchParams } from './navigation.cjs';
-import '@insforge/sdk';
 import '@insforge/shared-schemas';
 import 'zod';
 

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { ConditionalProps, ForgotPassword, ForgotPasswordProps, Protect, ProtectProps, ResetPassword, ResetPasswordProps, SignIn, SignInButton, SignInButtonProps, SignInProps, SignOutButton, SignOutButtonProps, SignUp, SignUpButton, SignUpButtonProps, SignUpProps, SignedIn, SignedOut, UserButton, UserButtonProps, VerifyEmail, VerifyEmailProps } from './components.js';
+export { ConditionalProps, ForgotPassword, ForgotPasswordProps, Protect, ProtectProps, ResetPassword, ResetPasswordProps, SignIn, SignInButton, SignInButtonProps, SignInProps, SignOutButton, SignOutButtonProps, SignUp, SignUpButton, SignUpButtonProps, SignUpProps, SignedIn, SignedOut, UserButton, UserButtonProps, UserProfileModal, UserProfileModalProps, VerifyEmail, VerifyEmailProps } from './components.js';
 export { ForgotPasswordForm, ForgotPasswordFormProps, ResetPasswordForm, ResetPasswordFormProps, SignInForm, SignInFormProps, SignUpForm, SignUpFormProps, VerifyEmailStatus, VerifyEmailStatusProps } from './forms.js';
 export { AuthBranding, AuthContainer, AuthContainerProps, AuthDivider, AuthDividerProps, AuthEmailVerificationStep, AuthErrorBanner, AuthErrorBannerProps, AuthFormField, AuthFormFieldProps, AuthHeader, AuthHeaderProps, AuthLink, AuthLinkProps, AuthOAuthButton, AuthOAuthButtonProps, AuthOAuthProviders, AuthOAuthProvidersProps, AuthPasswordField, AuthPasswordFieldProps, AuthPasswordStrengthIndicator, AuthPasswordStrengthIndicatorProps, AuthResetPasswordVerificationStep, AuthSubmitButton, AuthSubmitButtonProps, AuthVerificationCodeInput, AuthVerificationCodeInputProps } from './atoms.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -10,7 +10,6 @@ export { checkPasswordStrength, createPasswordSchema, emailSchema, passwordSchem
 import { OAuthProviderConfig } from './types.js';
 export { AuthConfig, EmailVerificationMethod } from './types.js';
 export { BrowserNavigationAdapter, NavigationAdapter, NavigationProvider, NavigationProviderProps, useNavigationAdapter, useSearchParams } from './navigation.js';
-import '@insforge/sdk';
 import '@insforge/shared-schemas';
 import 'zod';
 

package/dist/index.js

@@ -17,7 +17,7 @@ import { createContext, forwardRef, useContext, useState, useMemo, useEffect, us
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createClient } from '@insforge/sdk';
 import { InsforgeContext } from '@insforge/shared/react';
-import { AlertTriangle, Check, EyeOff, Eye, Loader2, CircleCheck, LogOut } from 'lucide-react';
+import { AlertTriangle, Check, EyeOff, Eye, Loader2, CircleCheck, X, User, LogOut } from 'lucide-react';
 import { z } from 'zod';
 
 var __create = Object.create;
@@ -225,7 +225,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;
@@ -284,7 +284,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;
@@ -568,11 +568,14 @@ var InsforgeManager = class _InsforgeManager {
       const userResult = await this.sdk.auth.getCurrentUser();
       if (userResult.data) {
         const profile = userResult.data.user.profile;
+        const { name, avatar_url, ...dynamicFields } = profile || {};
         const userData = {
           id: userResult.data.user.id,
           email: userResult.data.user.email,
-          name: profile?.name || "",
-          avatarUrl: profile?.avatar_url || ""
+          name: name || "",
+          avatarUrl: avatar_url || "",
+          // Store additional dynamic fields
+          profile: Object.keys(dynamicFields).length > 0 ? dynamicFields : void 0
         };
         this.user = userData;
         if (this.config.onAuthChange) {
@@ -609,11 +612,14 @@ var InsforgeManager = class _InsforgeManager {
     const userResult = await this.sdk.auth.getCurrentUser();
     if (userResult.data) {
       const profile = userResult.data.user.profile;
+      const { name, avatar_url, ...dynamicFields } = profile || {};
       const userData = {
         id: userResult.data.user.id,
         email: userResult.data.user.email,
-        name: profile?.name || "",
-        avatarUrl: profile?.avatar_url || ""
+        name: name || "",
+        avatarUrl: avatar_url || "",
+        // Store additional dynamic fields
+        profile: Object.keys(dynamicFields).length > 0 ? dynamicFields : void 0
       };
       this.user = userData;
       this.notifyListeners();
@@ -714,27 +720,32 @@ var InsforgeManager = class _InsforgeManager {
     if (!this.user) {
       return { error: "No user signed in" };
     }
-    const profileUpdate = {
-      name: data.name,
-      avatar_url: data.avatarUrl
-    };
+    const profileUpdate = {};
+    if (data.name !== void 0) {
+      profileUpdate.name = data.name;
+    }
+    if (data.avatarUrl !== void 0) {
+      profileUpdate.avatar_url = data.avatarUrl;
+    }
+    if (data.profile) {
+      Object.assign(profileUpdate, data.profile);
+    }
     const result = await this.sdk.auth.setProfile(profileUpdate);
     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,
+        // Use sent value if provided, otherwise keep existing
+        name: profileUpdate.name !== void 0 ? profileUpdate.name : this.user.name || "",
+        avatarUrl: profileUpdate.avatar_url !== void 0 ? profileUpdate.avatar_url : this.user.avatarUrl || "",
+        // Merge existing profile with new dynamic fields
+        profile: data.profile ? { ...this.user.profile, ...data.profile } : this.user.profile
+      };
+      this.user = updatedUser;
+      if (this.config.onAuthChange) {
+        this.config.onAuthChange(updatedUser);
       }
+      this.notifyListeners();
       return null;
     }
     const error = result.error;
@@ -5097,11 +5108,7 @@ function VerifyEmail({ token: token2, onSuccess, onError, ...uiProps }) {
         }
         setStatus("success");
         if (onSuccess) {
-          onSuccess({
-            accessToken: result.accessToken,
-            user: result.user,
-            redirectTo: result.redirectTo
-          });
+          onSuccess(result);
         }
       } catch (err) {
         const errorMessage = err instanceof Error ? err.message : "Email verification failed";
@@ -5261,9 +5268,382 @@ 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] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [imageError, setImageError] = useState(false);
+  const [formData, setFormData] = useState({});
+  useEffect(() => {
+    if (user) {
+      const initialData = {
+        name: user.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]);
+  useEffect(() => {
+    setImageError(false);
+    const avatarUrl = user?.avatarUrl;
+    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?.avatarUrl]);
+  const handleFieldChange = useCallback((key, value) => {
+    setFormData((prev2) => ({
+      ...prev2,
+      [key]: value
+    }));
+  }, []);
+  const handleSave = useCallback(async () => {
+    if (!user) return;
+    setIsSaving(true);
+    try {
+      const { name, ...dynamicFields } = formData;
+      const updateData = {
+        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 = useCallback(() => {
+    if (user) {
+      const resetData = {
+        name: user.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 = useCallback(
+    (e) => {
+      if (e.target === e.currentTarget) {
+        onClose();
+      }
+    },
+    [onClose]
+  );
+  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.name ? user.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.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__ */ jsx(ProfileModalOverlay, { onClick: handleOverlayClick, children: /* @__PURE__ */ jsxs(ProfileModalContainer, { onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxs(ProfileModalHeader, { children: [
+      /* @__PURE__ */ jsx(ProfileModalTitle, { children: "Profile" }),
+      /* @__PURE__ */ jsx(ProfileModalCloseButton, { onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx(X, {}) })
+    ] }),
+    /* @__PURE__ */ jsxs(ProfileModalBody, { children: [
+      /* @__PURE__ */ jsx(ProfileAvatarSection, { children: /* @__PURE__ */ jsx(ProfileAvatar, { children: user.avatarUrl && !imageError ? /* @__PURE__ */ jsx(
+        ProfileAvatarImage,
+        {
+          src: user.avatarUrl,
+          alt: user.name || user.email,
+          onError: () => setImageError(true)
+        }
+      ) : initials }) }),
+      /* @__PURE__ */ jsx(ProfileFieldsContainer, { children: fields.map(({ key, value, readOnly }) => /* @__PURE__ */ jsxs(ProfileField, { children: [
+        /* @__PURE__ */ jsx(ProfileFieldLabel, { children: formatFieldLabel(key) }),
+        isEditing && !readOnly ? /* @__PURE__ */ jsx(
+          ProfileFieldInput,
+          {
+            type: "text",
+            value: formData[key] ?? value,
+            onChange: (e) => handleFieldChange(key, e.target.value),
+            disabled: isSaving
+          }
+        ) : /* @__PURE__ */ jsx(ProfileFieldValue, { children: value || "-" })
+      ] }, key)) })
+    ] }),
+    /* @__PURE__ */ jsx(ProfileModalFooter, { children: isEditing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ProfileButton, { onClick: handleCancel, disabled: isSaving, children: "Cancel" }),
+      /* @__PURE__ */ jsxs(ProfileButton, { $primary: true, onClick: handleSave, disabled: isSaving, children: [
+        isSaving && /* @__PURE__ */ jsx(ProfileSpinner, {}),
+        isSaving ? "Saving..." : "Save"
+      ] })
+    ] }) : /* @__PURE__ */ jsx(ProfileButton, { $primary: true, onClick: () => setIsEditing(true), children: "Edit Profile" }) })
+  ] }) });
+}
+function UserButton({
+  afterSignOutUrl = "/",
+  mode = "simple",
+  showProfile = true,
+  onProfileError
+}) {
   const { user } = useInsforge();
   const [isOpen, setIsOpen] = useState(false);
+  const [showProfileModal, setShowProfileModal] = useState(false);
   const [imageError, setImageError] = useState(false);
   const [openUpward, setOpenUpward] = useState(false);
   const [horizontalOffset, setHorizontalOffset] = useState(0);
@@ -5361,10 +5741,32 @@ function UserButton({ afterSignOutUrl = "/", mode = "simple" }) {
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsx(UserButtonMenu, { ref: menuRef, $openUpward: openUpward, $horizontalOffset: horizontalOffset, children: /* @__PURE__ */ jsx(SignOutButton, { afterSignOutUrl, children: /* @__PURE__ */ jsxs(UserButtonMenuItem, { $signout: true, onClick: () => setIsOpen(false), children: [
-      /* @__PURE__ */ jsx(UserButtonMenuItemIcon, { children: /* @__PURE__ */ jsx(LogOut, {}) }),
-      "Sign out"
-    ] }) }) })
+    isOpen && /* @__PURE__ */ jsxs(UserButtonMenu, { ref: menuRef, $openUpward: openUpward, $horizontalOffset: horizontalOffset, children: [
+      showProfile && /* @__PURE__ */ jsxs(
+        UserButtonMenuItem,
+        {
+          onClick: () => {
+            setShowProfileModal(true);
+            setIsOpen(false);
+          },
+          children: [
+            /* @__PURE__ */ jsx(UserButtonMenuItemIcon, { children: /* @__PURE__ */ jsx(User, {}) }),
+            "Profile"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(SignOutButton, { afterSignOutUrl, children: /* @__PURE__ */ jsxs(UserButtonMenuItem, { $signout: true, onClick: () => setIsOpen(false), children: [
+        /* @__PURE__ */ jsx(UserButtonMenuItemIcon, { children: /* @__PURE__ */ jsx(LogOut, {}) }),
+        "Sign out"
+      ] }) })
+    ] }),
+    showProfileModal && /* @__PURE__ */ jsx(
+      UserProfileModal,
+      {
+        onClose: () => setShowProfileModal(false),
+        onError: onProfileError
+      }
+    )
   ] });
 }
 function Protect({
@@ -5495,6 +5897,6 @@ react-is/cjs/react-is.development.js:
    *)
 */
 
-export { AuthBranding, AuthContainer, AuthDivider, AuthEmailVerificationStep, AuthErrorBanner, AuthFormField, AuthHeader, AuthLink, AuthOAuthButton, AuthOAuthProviders, AuthPasswordField, AuthPasswordStrengthIndicator, AuthResetPasswordVerificationStep, AuthSubmitButton, AuthVerificationCodeInput, BrowserNavigationAdapter, ForgotPassword, ForgotPasswordForm, InsforgeProvider, InsforgeProviderCore, NavigationProvider, OAUTH_PROVIDER_CONFIG, Protect, ResetPassword, ResetPasswordForm, SignIn, SignInButton, SignInForm, SignOutButton, SignUp, SignUpButton, SignUpForm, SignedIn, SignedOut, StyleProvider, UserButton, VerifyEmail, VerifyEmailStatus, checkPasswordStrength, createPasswordSchema, emailSchema, getAllProviderConfigs, getProviderConfig, passwordSchema, resolveAuthPath, resolveAuthUrl, theme, useAuth, useInsforge, useNavigationAdapter, usePublicAuthConfig, useSearchParams, useUser, validateEmail, validatePassword };
+export { AuthBranding, AuthContainer, AuthDivider, AuthEmailVerificationStep, AuthErrorBanner, AuthFormField, AuthHeader, AuthLink, AuthOAuthButton, AuthOAuthProviders, AuthPasswordField, AuthPasswordStrengthIndicator, AuthResetPasswordVerificationStep, AuthSubmitButton, AuthVerificationCodeInput, BrowserNavigationAdapter, ForgotPassword, ForgotPasswordForm, InsforgeProvider, InsforgeProviderCore, NavigationProvider, OAUTH_PROVIDER_CONFIG, Protect, ResetPassword, ResetPasswordForm, SignIn, SignInButton, SignInForm, SignOutButton, SignUp, SignUpButton, SignUpForm, SignedIn, SignedOut, StyleProvider, UserButton, UserProfileModal, VerifyEmail, VerifyEmailStatus, checkPasswordStrength, createPasswordSchema, emailSchema, getAllProviderConfigs, getProviderConfig, passwordSchema, resolveAuthPath, resolveAuthUrl, theme, useAuth, useInsforge, useNavigationAdapter, usePublicAuthConfig, useSearchParams, useUser, validateEmail, validatePassword };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map