@insforge/react 1.0.4 → 1.0.5-dev.0

package/dist/components.d.cts

@@ -163,13 +163,29 @@ declare function VerifyEmail({ token, onSuccess, onError, ...uiProps }: VerifyEm
 interface UserButtonProps {
     afterSignOutUrl?: string;
     mode?: 'detailed' | 'simple';
+    /** Whether to show the Profile menu item (default: true) */
+    showProfile?: boolean;
+    /** Callback when profile update fails */
+    onProfileError?: (error: string) => void;
 }
 /**
  * User profile button with dropdown menu and sign-out functionality.
  *
  * Styles are powered by Emotion CSS-in-JS to prevent FOUC in SSR environments.
  */
-declare function UserButton({ afterSignOutUrl, mode }: UserButtonProps): react_jsx_runtime.JSX.Element | null;
+declare function UserButton({ afterSignOutUrl, mode, showProfile, onProfileError, }: UserButtonProps): react_jsx_runtime.JSX.Element | null;
+
+interface UserProfileModalProps {
+    /** Called when the modal is closed */
+    onClose: () => void;
+    /** Called when an error occurs */
+    onError?: (error: string) => void;
+}
+/**
+ * User profile modal component.
+ * Displays user profile information with edit capability for allowed fields.
+ */
+declare function UserProfileModal({ onClose, onError }: UserProfileModalProps): react_jsx_runtime.JSX.Element | null;
 
 interface ProtectProps {
     children: ReactNode;
@@ -341,4 +357,4 @@ interface SignOutButtonProps {
  */
 declare function SignOutButton({ children, className, afterSignOutUrl }: SignOutButtonProps): react_jsx_runtime.JSX.Element;
 
-export { type ConditionalProps$1 as ConditionalProps, ForgotPassword, type ForgotPasswordProps, Protect, type ProtectProps, ResetPassword, type ResetPasswordProps, SignIn, SignInButton, type SignInButtonProps, type SignInProps, SignOutButton, type SignOutButtonProps, SignUp, SignUpButton, type SignUpButtonProps, type SignUpProps, SignedIn, SignedOut, UserButton, type UserButtonProps, VerifyEmail, type VerifyEmailProps };
+export { type ConditionalProps$1 as ConditionalProps, ForgotPassword, type ForgotPasswordProps, Protect, type ProtectProps, ResetPassword, type ResetPasswordProps, SignIn, SignInButton, type SignInButtonProps, type SignInProps, SignOutButton, type SignOutButtonProps, SignUp, SignUpButton, type SignUpButtonProps, type SignUpProps, SignedIn, SignedOut, UserButton, type UserButtonProps, UserProfileModal, type UserProfileModalProps, VerifyEmail, type VerifyEmailProps };

package/dist/components.d.ts

@@ -163,13 +163,29 @@ declare function VerifyEmail({ token, onSuccess, onError, ...uiProps }: VerifyEm
 interface UserButtonProps {
     afterSignOutUrl?: string;
     mode?: 'detailed' | 'simple';
+    /** Whether to show the Profile menu item (default: true) */
+    showProfile?: boolean;
+    /** Callback when profile update fails */
+    onProfileError?: (error: string) => void;
 }
 /**
  * User profile button with dropdown menu and sign-out functionality.
  *
  * Styles are powered by Emotion CSS-in-JS to prevent FOUC in SSR environments.
  */
-declare function UserButton({ afterSignOutUrl, mode }: UserButtonProps): react_jsx_runtime.JSX.Element | null;
+declare function UserButton({ afterSignOutUrl, mode, showProfile, onProfileError, }: UserButtonProps): react_jsx_runtime.JSX.Element | null;
+
+interface UserProfileModalProps {
+    /** Called when the modal is closed */
+    onClose: () => void;
+    /** Called when an error occurs */
+    onError?: (error: string) => void;
+}
+/**
+ * User profile modal component.
+ * Displays user profile information with edit capability for allowed fields.
+ */
+declare function UserProfileModal({ onClose, onError }: UserProfileModalProps): react_jsx_runtime.JSX.Element | null;
 
 interface ProtectProps {
     children: ReactNode;
@@ -341,4 +357,4 @@ interface SignOutButtonProps {
  */
 declare function SignOutButton({ children, className, afterSignOutUrl }: SignOutButtonProps): react_jsx_runtime.JSX.Element;
 
-export { type ConditionalProps$1 as ConditionalProps, ForgotPassword, type ForgotPasswordProps, Protect, type ProtectProps, ResetPassword, type ResetPasswordProps, SignIn, SignInButton, type SignInButtonProps, type SignInProps, SignOutButton, type SignOutButtonProps, SignUp, SignUpButton, type SignUpButtonProps, type SignUpProps, SignedIn, SignedOut, UserButton, type UserButtonProps, VerifyEmail, type VerifyEmailProps };
+export { type ConditionalProps$1 as ConditionalProps, ForgotPassword, type ForgotPasswordProps, Protect, type ProtectProps, ResetPassword, type ResetPasswordProps, SignIn, SignInButton, type SignInButtonProps, type SignInProps, SignOutButton, type SignOutButtonProps, SignUp, SignUpButton, type SignUpButtonProps, type SignUpProps, SignedIn, SignedOut, UserButton, type UserButtonProps, UserProfileModal, type UserProfileModalProps, VerifyEmail, type VerifyEmailProps };

package/dist/components.js

@@ -3,7 +3,7 @@ import { createContext, forwardRef, useContext, useState, useMemo, useRef, useEf
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import '@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;
@@ -211,7 +211,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;
@@ -270,7 +270,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;
@@ -2127,6 +2127,8 @@ var theme = {
     sm: "0.875rem",
     // 14px
     base: "1rem",
+    // 16px
+    lg: "1.125rem",
     // 20px
     "2xl": "1.5rem"
     // 24px
@@ -2158,6 +2160,10 @@ var theme = {
     base: "200ms cubic-bezier(0.4, 0, 0.2, 1)"
   },
   sizes: {
+    input: {
+      height: "2.5rem"
+      // 40px
+    },
     button: {
       height: "2.5rem",
       // 40px for submit
@@ -4673,9 +4679,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);
@@ -4773,10 +5152,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({
@@ -4895,6 +5296,6 @@ react-is/cjs/react-is.development.js:
    *)
 */
 
-export { AuthBranding, AuthContainer, AuthDivider, AuthEmailVerificationStep, AuthErrorBanner, AuthFormField, AuthHeader, AuthLink, AuthOAuthButton, AuthOAuthProviders, AuthPasswordField, AuthPasswordStrengthIndicator, AuthResetPasswordVerificationStep, AuthSubmitButton, AuthVerificationCodeInput, ForgotPassword, ForgotPasswordForm, Protect, ResetPassword, ResetPasswordForm, SignIn, SignInButton, SignInForm, SignOutButton, SignUp, SignUpButton, SignUpForm, SignedIn, SignedOut, UserButton, VerifyEmail, VerifyEmailStatus };
+export { AuthBranding, AuthContainer, AuthDivider, AuthEmailVerificationStep, AuthErrorBanner, AuthFormField, AuthHeader, AuthLink, AuthOAuthButton, AuthOAuthProviders, AuthPasswordField, AuthPasswordStrengthIndicator, AuthResetPasswordVerificationStep, AuthSubmitButton, AuthVerificationCodeInput, ForgotPassword, ForgotPasswordForm, Protect, ResetPassword, ResetPasswordForm, SignIn, SignInButton, SignInForm, SignOutButton, SignUp, SignUpButton, SignUpForm, SignedIn, SignedOut, UserButton, UserProfileModal, VerifyEmail, VerifyEmailStatus };
 //# sourceMappingURL=components.js.map
 //# sourceMappingURL=components.js.map