@insforge/react 0.6.10 → 0.7.1

package/dist/components.d.cts

@@ -321,4 +321,29 @@ interface SignUpButtonProps {
  */
 declare function SignUpButton({ children, className }: SignUpButtonProps): 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, SignUp, SignUpButton, type SignUpButtonProps, type SignUpProps, SignedIn, SignedOut, UserButton, type UserButtonProps, VerifyEmail, type VerifyEmailProps };
+interface SignOutButtonProps {
+    children?: React.ReactNode;
+    className?: string;
+    afterSignOutUrl?: string;
+}
+/**
+ * SignOutButton Component
+ *
+ * A simple unstyled button that signs out the current user.
+ * If children is a valid React element, it will be rendered with the sign-out logic attached.
+ *
+ * @example
+ * ```tsx
+ * <SignOutButton />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <SignOutButton afterSignOutUrl="/goodbye">
+ *   <button className="custom-button">Logout</button>
+ * </SignOutButton>
+ * ```
+ */
+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 };

package/dist/components.d.ts

@@ -321,4 +321,29 @@ interface SignUpButtonProps {
  */
 declare function SignUpButton({ children, className }: SignUpButtonProps): 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, SignUp, SignUpButton, type SignUpButtonProps, type SignUpProps, SignedIn, SignedOut, UserButton, type UserButtonProps, VerifyEmail, type VerifyEmailProps };
+interface SignOutButtonProps {
+    children?: React.ReactNode;
+    className?: string;
+    afterSignOutUrl?: string;
+}
+/**
+ * SignOutButton Component
+ *
+ * A simple unstyled button that signs out the current user.
+ * If children is a valid React element, it will be rendered with the sign-out logic attached.
+ *
+ * @example
+ * ```tsx
+ * <SignOutButton />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <SignOutButton afterSignOutUrl="/goodbye">
+ *   <button className="custom-button">Logout</button>
+ * </SignOutButton>
+ * ```
+ */
+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 };

package/dist/components.js

@@ -2521,6 +2521,25 @@ function VerifyEmail({ token, onSuccess, onError, ...uiProps }) {
   }, [token, verifyEmail, onSuccess, onError]);
   return /* @__PURE__ */ jsx(VerifyEmailStatus, { status, error, ...uiProps });
 }
+function SignOutButton({ children, className, afterSignOutUrl = "/" }) {
+  const { signOut } = useInsforge();
+  const handleClick = async () => {
+    await signOut();
+    window.location.href = afterSignOutUrl;
+  };
+  if (children && isValidElement(children)) {
+    const originalOnClick = children.props?.onClick;
+    return cloneElement(children, {
+      onClick: async (e) => {
+        await handleClick();
+        if (originalOnClick) {
+          originalOnClick(e);
+        }
+      }
+    });
+  }
+  return /* @__PURE__ */ jsx("button", { type: "button", className, onClick: () => void handleClick(), children: children || "Sign out" });
+}
 var UserButtonContainer = styled.div`
   position: relative;
   display: inline-block;
@@ -2636,7 +2655,7 @@ var UserButtonMenuItemIcon = styled.div`
   }
 `;
 function UserButton({ afterSignOutUrl = "/", mode = "detailed" }) {
-  const { user, signOut } = useInsforge();
+  const { user } = useInsforge();
   const [isOpen, setIsOpen] = useState(false);
   const [imageError, setImageError] = useState(false);
   const dropdownRef = useRef(null);
@@ -2677,11 +2696,6 @@ function UserButton({ afterSignOutUrl = "/", mode = "detailed" }) {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [isOpen]);
-  async function handleSignOut() {
-    await signOut();
-    setIsOpen(false);
-    window.location.href = afterSignOutUrl;
-  }
   if (!user) {
     return null;
   }
@@ -2710,10 +2724,10 @@ function UserButton({ afterSignOutUrl = "/", mode = "detailed" }) {
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsx(UserButtonMenu, { children: /* @__PURE__ */ jsxs(UserButtonMenuItem, { $signout: true, onClick: () => void handleSignOut(), children: [
+    isOpen && /* @__PURE__ */ jsx(UserButtonMenu, { children: /* @__PURE__ */ jsx(SignOutButton, { afterSignOutUrl, children: /* @__PURE__ */ jsxs(UserButtonMenuItem, { $signout: true, onClick: () => setIsOpen(false), children: [
       /* @__PURE__ */ jsx(UserButtonMenuItemIcon, { children: /* @__PURE__ */ jsx(LogOut, {}) }),
       "Sign out"
-    ] }) })
+    ] }) }) })
   ] });
 }
 function Protect({
@@ -2810,6 +2824,6 @@ function SignUpButton({ children, className }) {
   return /* @__PURE__ */ jsx("button", { type: "button", className, onClick: handleClick, children: children || "Sign up" });
 }
 
-export { AuthBranding, AuthContainer, AuthDivider, AuthEmailVerificationStep, AuthErrorBanner, AuthFormField, AuthHeader, AuthLink, AuthOAuthButton, AuthOAuthProviders, AuthPasswordField, AuthPasswordStrengthIndicator, AuthResetPasswordVerificationStep, AuthSubmitButton, AuthVerificationCodeInput, ForgotPassword, ForgotPasswordForm, Protect, ResetPassword, ResetPasswordForm, SignIn, SignInButton, SignInForm, 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, VerifyEmail, VerifyEmailStatus };
 //# sourceMappingURL=components.js.map
 //# sourceMappingURL=components.js.map