@better-auth-ui/heroui 1.6.0

package/dist/src/components/auth/magic-link.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useSignInMagicLink, useSignInSocial } from "@better-auth-ui/react";
+import { Button, Card, Description, FieldError, Fieldset, Form, Input, Label, Link, Spinner, TextField, toast } from "@heroui/react";
+import { useState } from "react";
+import { cn } from "../../lib/utils";
+import { FieldSeparator } from "./field-separator";
+import { MagicLinkButton } from "./magic-link-button";
+import { ProviderButtons } from "./provider-buttons";
+/**
+ * Render a card-based sign-in form that sends an email magic link and optionally shows social provider buttons.
+ *
+ * @param className - Additional CSS class names applied to the card container
+ * @param socialLayout - Layout style for social provider buttons
+ * @param socialPosition - Position of social provider buttons; `"top"` or `"bottom"`. Defaults to `"bottom"`.
+ * @returns The magic-link sign-in UI as a JSX element
+ */
+export function MagicLink({ className, socialLayout, socialPosition = "bottom", variant, ...props }) {
+    const { basePaths, baseURL, localization, redirectTo, socialProviders, viewPaths } = useAuth();
+    const [email, setEmail] = useState("");
+    const { mutate: signInMagicLink, isPending: magicLinkPending } = useSignInMagicLink({
+        onError: (error) => toast.danger(error.error?.message || error.message),
+        onSuccess: () => {
+            setEmail("");
+            toast.success(localization.auth.magicLinkSent);
+        }
+    });
+    const { mutate: signInSocial, isPending: socialPending } = useSignInSocial({
+        onError: (error) => toast.danger(error.error?.message || error.message)
+    });
+    const isPending = magicLinkPending || socialPending;
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        signInMagicLink({ email, callbackURL: `${baseURL}${redirectTo}` });
+    };
+    const showSeparator = socialProviders && socialProviders.length > 0;
+    return (_jsx(Card, { className: cn("w-full max-w-sm p-4 md:p-6", className), variant: variant, ...props, children: _jsx(Card.Content, { children: _jsxs(Fieldset, { className: "gap-4", children: [_jsx(Label, { className: "text-xl", children: localization.auth.signIn }), socialPosition === "top" && (_jsxs(_Fragment, { children: [socialProviders && socialProviders.length > 0 && (_jsx(ProviderButtons, { socialLayout: socialLayout, signInSocial: signInSocial, isPending: isPending })), showSeparator && (_jsx(FieldSeparator, { children: localization.auth.or }))] })), _jsxs(Form, { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsx(Fieldset.Group, { children: _jsxs(TextField, { name: "email", type: "email", autoComplete: "email", isDisabled: isPending, value: email, onChange: setEmail, children: [_jsx(Label, { children: localization.auth.email }), _jsx(Input, { placeholder: localization.auth.emailPlaceholder, required: true, variant: variant === "transparent" ? "primary" : "secondary" }), _jsx(FieldError, { className: "text-wrap" })] }) }), _jsxs(Fieldset.Actions, { className: "flex-col gap-3", children: [_jsxs(Button, { type: "submit", className: "w-full", isPending: isPending, children: [isPending && _jsx(Spinner, { color: "current", size: "sm" }), localization.auth.sendMagicLink] }), _jsx(MagicLinkButton, { view: "magicLink", isPending: isPending })] })] }), socialPosition === "bottom" && (_jsxs(_Fragment, { children: [showSeparator && (_jsx(FieldSeparator, { children: localization.auth.or })), socialProviders && socialProviders.length > 0 && (_jsx(ProviderButtons, { socialLayout: socialLayout, signInSocial: signInSocial, isPending: isPending }))] })), _jsxs(Description, { className: "text-center text-sm", children: [localization.auth.needToCreateAnAccount, " ", _jsx(Link, { href: `${basePaths.auth}/${viewPaths.auth.signUp}`, className: "text-accent decoration-accent no-underline hover:underline", children: localization.auth.signUp })] })] }) }) }));
+}

package/dist/src/components/auth/provider-buttons.d.ts

@@ -0,0 +1,19 @@
+import type { SocialProvider } from "better-auth/social-providers";
+export type ProviderButtonsProps = {
+    isPending: boolean;
+    socialLayout?: SocialLayout;
+    signInSocial: (params: {
+        provider: SocialProvider;
+        callbackURL: string;
+    }) => void;
+};
+export type SocialLayout = "auto" | "horizontal" | "vertical" | "grid";
+/**
+ * Render social provider sign-in buttons and handle initiation and pending state.
+ *
+ * @param isPending - Disables all provider buttons when true.
+ * @param socialLayout - Preferred layout for the buttons; `"auto"` picks `"horizontal"` when there are four or more providers, otherwise `"vertical"`.
+ * @param signInSocial - Callback invoked with the provider and callbackURL when a button is clicked.
+ * @returns The JSX element that renders the configured social provider buttons.
+ */
+export declare function ProviderButtons({ isPending, socialLayout, signInSocial }: ProviderButtonsProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/auth/provider-buttons.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getProviderName } from "@better-auth-ui/core";
+import { providerIcons, useAuth } from "@better-auth-ui/react";
+import { Button } from "@heroui/react";
+import { useMemo } from "react";
+import { cn } from "../../lib/utils";
+/**
+ * Render social provider sign-in buttons and handle initiation and pending state.
+ *
+ * @param isPending - Disables all provider buttons when true.
+ * @param socialLayout - Preferred layout for the buttons; `"auto"` picks `"horizontal"` when there are four or more providers, otherwise `"vertical"`.
+ * @param signInSocial - Callback invoked with the provider and callbackURL when a button is clicked.
+ * @returns The JSX element that renders the configured social provider buttons.
+ */
+export function ProviderButtons({ isPending, socialLayout = "auto", signInSocial }) {
+    const { baseURL, localization, redirectTo, socialProviders } = useAuth();
+    const callbackURL = `${baseURL}${redirectTo}`;
+    const resolvedSocialLayout = useMemo(() => {
+        if (socialLayout === "auto") {
+            if (socialProviders?.length && socialProviders.length >= 4) {
+                return "horizontal";
+            }
+            return "vertical";
+        }
+        return socialLayout;
+    }, [socialLayout, socialProviders?.length]);
+    return (_jsx("div", { className: cn("gap-3", resolvedSocialLayout === "grid" && "grid grid-cols-2", resolvedSocialLayout === "vertical" && "flex flex-col", resolvedSocialLayout === "horizontal" && "flex flex-wrap"), children: socialProviders?.map((provider) => {
+            const ProviderIcon = providerIcons[provider];
+            return (_jsxs(Button, { className: cn("w-full", resolvedSocialLayout === "horizontal" && "flex-1"), variant: "tertiary", isPending: isPending, onPress: () => signInSocial({ provider, callbackURL }), children: [_jsx(ProviderIcon, {}), resolvedSocialLayout === "vertical"
+                        ? localization.auth.continueWith.replace("{{provider}}", getProviderName(provider))
+                        : resolvedSocialLayout === "grid"
+                            ? getProviderName(provider)
+                            : null] }, provider));
+        }) }));
+}

package/dist/src/components/auth/reset-password.d.ts

@@ -0,0 +1,11 @@
+import { type CardProps } from "@heroui/react";
+export type ResetPasswordProps = {
+    className?: string;
+    variant?: CardProps["variant"];
+};
+/**
+ * Renders a reset password form that verifies a "token" URL parameter on mount and redirects to sign-in if absent.
+ *
+ * Renders password (and optional confirm-password) inputs with visibility toggles, applies min/max length constraints from the auth configuration, shows field errors, and submits the new password to the auth client.
+ */
+export declare function ResetPassword({ className, variant, ...props }: ResetPasswordProps & CardProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/auth/reset-password.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useResetPassword } from "@better-auth-ui/react";
+import { Eye, EyeSlash } from "@gravity-ui/icons";
+import { Button, Card, Description, FieldError, Fieldset, Form, InputGroup, Label, Link, Spinner, TextField, toast } from "@heroui/react";
+import { useEffect, useState } from "react";
+import { cn } from "../../lib/utils";
+/**
+ * Renders a reset password form that verifies a "token" URL parameter on mount and redirects to sign-in if absent.
+ *
+ * Renders password (and optional confirm-password) inputs with visibility toggles, applies min/max length constraints from the auth configuration, shows field errors, and submits the new password to the auth client.
+ */
+export function ResetPassword({ className, variant, ...props }) {
+    const { basePaths, emailAndPassword, localization, viewPaths, navigate } = useAuth();
+    const { mutate: resetPassword, isPending } = useResetPassword({
+        onError: (error) => toast.danger(error.error?.message || error.message),
+        onSuccess: () => {
+            toast.success(localization.auth.passwordResetSuccess);
+            navigate({ to: `${basePaths.auth}/${viewPaths.auth.signIn}` });
+        }
+    });
+    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+    const [isConfirmPasswordVisible, setIsConfirmPasswordVisible] = useState(false);
+    useEffect(() => {
+        const searchParams = new URLSearchParams(window.location.search);
+        const token = searchParams.get("token");
+        if (!token) {
+            toast.danger(localization.auth.invalidResetPasswordToken);
+            navigate({ to: `${basePaths.auth}/${viewPaths.auth.signIn}` });
+        }
+    }, [
+        basePaths.auth,
+        localization.auth.invalidResetPasswordToken,
+        viewPaths.auth.signIn,
+        navigate
+    ]);
+    function handleSubmit(e) {
+        e.preventDefault();
+        const searchParams = new URLSearchParams(window.location.search);
+        const token = searchParams.get("token");
+        if (!token) {
+            toast.danger(localization.auth.invalidResetPasswordToken);
+            navigate({ to: `${basePaths.auth}/${viewPaths.auth.signIn}` });
+            return;
+        }
+        const formData = new FormData(e.currentTarget);
+        const password = formData.get("password");
+        const confirmPassword = formData.get("confirmPassword");
+        if (emailAndPassword?.confirmPassword && password !== confirmPassword) {
+            toast.danger(localization.auth.passwordsDoNotMatch);
+            return;
+        }
+        resetPassword({ token, newPassword: password });
+    }
+    return (_jsx(Card, { className: cn("w-full max-w-sm p-4 md:p-6", className), variant: variant, ...props, children: _jsx(Card.Content, { children: _jsx(Form, { onSubmit: handleSubmit, children: _jsxs(Fieldset, { className: "gap-4", children: [_jsx(Label, { className: "text-xl", children: localization.auth.resetPassword }), _jsxs(TextField, { minLength: emailAndPassword?.minPasswordLength, maxLength: emailAndPassword?.maxPasswordLength, name: "password", autoComplete: "new-password", isDisabled: isPending, children: [_jsx(Label, { children: localization.auth.password }), _jsxs(InputGroup, { variant: variant === "transparent" ? "primary" : "secondary", children: [_jsx(InputGroup.Input, { name: "password", placeholder: localization.auth.newPasswordPlaceholder, type: isPasswordVisible ? "text" : "password", required: true }), _jsx(InputGroup.Suffix, { className: "px-0", children: _jsx(Button, { isIconOnly: true, "aria-label": isPasswordVisible
+                                                    ? localization.auth.hidePassword
+                                                    : localization.auth.showPassword, size: "sm", variant: "ghost", onPress: () => setIsPasswordVisible(!isPasswordVisible), isDisabled: isPending, children: isPasswordVisible ? _jsx(EyeSlash, {}) : _jsx(Eye, {}) }) })] }), _jsx(FieldError, { className: "text-wrap" })] }), emailAndPassword?.confirmPassword && (_jsxs(TextField, { minLength: emailAndPassword?.minPasswordLength, maxLength: emailAndPassword?.maxPasswordLength, name: "confirmPassword", autoComplete: "new-password", isDisabled: isPending, children: [_jsx(Label, { children: localization.auth.confirmPassword }), _jsxs(InputGroup, { variant: variant === "transparent" ? "primary" : "secondary", children: [_jsx(InputGroup.Input, { placeholder: localization.auth.confirmPasswordPlaceholder, type: isConfirmPasswordVisible ? "text" : "password", required: true, name: "confirmPassword" }), _jsx(InputGroup.Suffix, { className: "px-0", children: _jsx(Button, { isIconOnly: true, "aria-label": isConfirmPasswordVisible
+                                                    ? localization.auth.hidePassword
+                                                    : localization.auth.showPassword, size: "sm", variant: "ghost", onPress: () => setIsConfirmPasswordVisible(!isConfirmPasswordVisible), isDisabled: isPending, children: isConfirmPasswordVisible ? _jsx(EyeSlash, {}) : _jsx(Eye, {}) }) })] }), _jsx(FieldError, { className: "text-wrap" })] })), _jsx(Fieldset.Actions, { children: _jsxs(Button, { type: "submit", className: "w-full", isPending: isPending, children: [isPending && _jsx(Spinner, { color: "current", size: "sm" }), localization.auth.resetPassword] }) }), _jsxs(Description, { className: "text-center text-sm", children: [localization.auth.rememberYourPassword, " ", _jsx(Link, { href: `${basePaths.auth}/${viewPaths.auth.signIn}`, className: "text-accent decoration-accent no-underline hover:underline", children: localization.auth.signIn })] })] }) }) }) }));
+}

package/dist/src/components/auth/sign-in.d.ts

@@ -0,0 +1,14 @@
+import { type CardProps } from "@heroui/react";
+import { type SocialLayout } from "./provider-buttons";
+export interface SignInProps {
+    className?: string;
+    socialLayout?: SocialLayout;
+    socialPosition?: "top" | "bottom";
+    variant?: CardProps["variant"];
+}
+/**
+ * Render the sign-in UI using auth context for configuration and localization.
+ *
+ * @returns The sign-in JSX element containing email/password fields, optional magic-link button, and social provider buttons.
+ */
+export declare function SignIn({ className, socialLayout, socialPosition, variant, ...props }: SignInProps & CardProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/auth/sign-in.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useSendVerificationEmail, useSignInEmail, useSignInSocial } from "@better-auth-ui/react";
+import { Button, Card, Checkbox, Description, FieldError, Form, Input, Label, Link, Spinner, TextField, toast } from "@heroui/react";
+import { useState } from "react";
+import { cn } from "../../lib/utils";
+import { FieldSeparator } from "./field-separator";
+import { MagicLinkButton } from "./magic-link-button";
+import { ProviderButtons } from "./provider-buttons";
+/**
+ * Render the sign-in UI using auth context for configuration and localization.
+ *
+ * @returns The sign-in JSX element containing email/password fields, optional magic-link button, and social provider buttons.
+ */
+export function SignIn({ className, socialLayout, socialPosition = "bottom", variant, ...props }) {
+    const { basePaths, baseURL, emailAndPassword, localization, magicLink, navigate, redirectTo, socialProviders, viewPaths } = useAuth();
+    const [password, setPassword] = useState("");
+    const { mutate: sendVerificationEmail } = useSendVerificationEmail({
+        onError: (error) => toast.danger(error.error?.message || error.message),
+        onSuccess: () => toast.success(localization.auth.verificationEmailSent)
+    });
+    const { mutate: signInEmail, isPending: signInPending } = useSignInEmail({
+        onError: (error, { email }) => {
+            setPassword("");
+            if (error.error?.code === "EMAIL_NOT_VERIFIED") {
+                toast.danger(error.error?.message || error.message, {
+                    actionProps: {
+                        children: localization.auth.resend,
+                        onClick: () => sendVerificationEmail({
+                            email,
+                            callbackURL: `${baseURL}${redirectTo}`
+                        })
+                    }
+                });
+            }
+            else {
+                toast.danger(error.error?.message || error.message);
+            }
+        },
+        onSuccess: () => navigate({ to: redirectTo })
+    });
+    const { mutate: signInSocial, isPending: socialPending } = useSignInSocial({
+        onError: (error) => toast.danger(error.error?.message || error.message)
+    });
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        const formData = new FormData(e.currentTarget);
+        const email = formData.get("email");
+        const rememberMe = formData.get("rememberMe") === "on";
+        signInEmail({
+            email,
+            password,
+            ...(emailAndPassword?.rememberMe ? { rememberMe } : {})
+        });
+    };
+    const isPending = signInPending || socialPending;
+    const showSeparator = emailAndPassword?.enabled && socialProviders && socialProviders.length > 0;
+    return (_jsxs(Card, { className: cn("w-full max-w-sm p-4 md:p-6 gap-4", className), variant: variant, ...props, children: [_jsx(Card.Header, { children: _jsx(Card.Title, { className: "text-xl", children: localization.auth.signIn }) }), _jsxs(Card.Content, { className: "gap-4", children: [socialPosition === "top" && (_jsxs(_Fragment, { children: [socialProviders && socialProviders.length > 0 && (_jsx(ProviderButtons, { socialLayout: socialLayout, signInSocial: signInSocial, isPending: isPending })), showSeparator && (_jsx(FieldSeparator, { children: localization.auth.or }))] })), emailAndPassword?.enabled && (_jsxs(Form, { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs(TextField, { name: "email", type: "email", autoComplete: "email", isDisabled: isPending, children: [_jsx(Label, { children: localization.auth.email }), _jsx(Input, { placeholder: localization.auth.emailPlaceholder, variant: variant === "transparent" ? "primary" : "secondary", required: true }), _jsx(FieldError, { className: "text-wrap" })] }), _jsxs(TextField, { minLength: emailAndPassword?.minPasswordLength, maxLength: emailAndPassword?.maxPasswordLength, name: "password", type: "password", autoComplete: "current-password", isDisabled: isPending, value: password, onChange: setPassword, children: [_jsx(Label, { children: localization.auth.password }), _jsx(Input, { placeholder: localization.auth.passwordPlaceholder, variant: variant === "transparent" ? "primary" : "secondary", required: true }), _jsx(FieldError, { className: "text-wrap" })] }), emailAndPassword?.rememberMe && (_jsxs(Checkbox, { name: "rememberMe", isDisabled: isPending, variant: variant === "transparent" ? "primary" : "secondary", children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, {}) }), _jsx(Checkbox.Content, { children: _jsx(Label, { children: localization.auth.rememberMe }) })] })), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs(Button, { type: "submit", className: "w-full", isPending: isPending, children: [isPending && _jsx(Spinner, { color: "current", size: "sm" }), localization.auth.signIn] }), magicLink && (_jsx(MagicLinkButton, { view: "signIn", isPending: isPending }))] })] })), socialPosition === "bottom" && (_jsxs(_Fragment, { children: [showSeparator && (_jsx(FieldSeparator, { children: localization.auth.or })), socialProviders && socialProviders.length > 0 && (_jsx(ProviderButtons, { socialLayout: socialLayout, signInSocial: signInSocial, isPending: isPending }))] }))] }), _jsxs(Card.Footer, { className: "flex-col gap-3", children: [emailAndPassword?.forgotPassword && (_jsx(Link, { href: `${basePaths.auth}/${viewPaths.auth.forgotPassword}`, className: "no-underline hover:underline self-center", children: localization.auth.forgotPasswordLink })), emailAndPassword?.enabled && (_jsxs(Description, { className: "justify-center text-sm", children: [localization.auth.needToCreateAnAccount, " ", _jsx(Link, { href: `${basePaths.auth}/${viewPaths.auth.signUp}`, className: "text-accent no-underline hover:underline decoration-accent-hover", children: localization.auth.signUp })] }))] })] }));
+}

package/dist/src/components/auth/sign-out.d.ts

@@ -0,0 +1,11 @@
+import { type CardProps } from "@heroui/react";
+export type SignOutProps = {
+    className?: string;
+    variant?: CardProps["variant"];
+};
+/**
+ * Initiates sign-out on mount and renders a loading card while sign-out proceeds.
+ *
+ * @returns A Card containing a centered Spinner shown during the sign-out process
+ */
+export declare function SignOut({ className, ...props }: SignOutProps & CardProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/auth/sign-out.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useAuth, useSignOut } from "@better-auth-ui/react";
+import { Card, Spinner, toast } from "@heroui/react";
+import { useEffect, useRef } from "react";
+import { cn } from "../../lib/utils";
+/**
+ * Initiates sign-out on mount and renders a loading card while sign-out proceeds.
+ *
+ * @returns A Card containing a centered Spinner shown during the sign-out process
+ */
+export function SignOut({ className, ...props }) {
+    const { basePaths, navigate, viewPaths } = useAuth();
+    const { mutate: signOut } = useSignOut({
+        onError: (error) => {
+            toast.danger(error.error?.message || error.message);
+            navigate({
+                to: `${basePaths.auth}/${viewPaths.auth.signIn}`,
+                replace: true
+            });
+        },
+        onSuccess: () => navigate({
+            to: `${basePaths.auth}/${viewPaths.auth.signIn}`,
+            replace: true
+        })
+    });
+    const hasSignedOut = useRef(false);
+    useEffect(() => {
+        if (hasSignedOut.current)
+            return;
+        hasSignedOut.current = true;
+        signOut();
+    }, [signOut]);
+    return (_jsx(Card, { variant: "transparent", className: cn("w-full max-w-sm", className), ...props, children: _jsx(Spinner, { className: "mx-auto my-auto", color: "current" }) }));
+}

package/dist/src/components/auth/sign-up.d.ts

@@ -0,0 +1,19 @@
+import { type CardProps } from "@heroui/react";
+import { type SocialLayout } from "./provider-buttons";
+export type SignUpProps = {
+    className?: string;
+    socialLayout?: SocialLayout;
+    socialPosition?: "top" | "bottom";
+    variant?: CardProps["variant"];
+};
+/**
+ * Render a sign-up form with name, email, password (and optional confirm password) fields, optional social provider buttons, and password visibility controls.
+ *
+ * The component reflects request state by disabling inputs and showing a pending indicator during sign-up or social sign-in.
+ *
+ * @param className - Additional CSS classes applied to the outer card container
+ * @param socialLayout - Social layout to apply to the provider buttons component
+ * @param socialPosition - Position of social provider buttons relative to the form; `"top"` or `"bottom"` (default `"bottom"`)
+ * @returns The sign-up form React element
+ */
+export declare function SignUp({ className, socialLayout, socialPosition, variant, ...props }: SignUpProps & CardProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/auth/sign-up.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useSignInSocial, useSignUpEmail } from "@better-auth-ui/react";
+import { Eye, EyeSlash } from "@gravity-ui/icons";
+import { Button, Card, Description, FieldError, Fieldset, Form, Input, InputGroup, Label, Link, Spinner, TextField, toast } from "@heroui/react";
+import { useState } from "react";
+import { cn } from "../../lib/utils";
+import { FieldSeparator } from "./field-separator";
+import { MagicLinkButton } from "./magic-link-button";
+import { ProviderButtons } from "./provider-buttons";
+/**
+ * Render a sign-up form with name, email, password (and optional confirm password) fields, optional social provider buttons, and password visibility controls.
+ *
+ * The component reflects request state by disabling inputs and showing a pending indicator during sign-up or social sign-in.
+ *
+ * @param className - Additional CSS classes applied to the outer card container
+ * @param socialLayout - Social layout to apply to the provider buttons component
+ * @param socialPosition - Position of social provider buttons relative to the form; `"top"` or `"bottom"` (default `"bottom"`)
+ * @returns The sign-up form React element
+ */
+export function SignUp({ className, socialLayout, socialPosition = "bottom", variant, ...props }) {
+    const { basePaths, emailAndPassword, localization, magicLink, navigate, redirectTo, socialProviders, viewPaths } = useAuth();
+    const [password, setPassword] = useState("");
+    const [confirmPassword, setConfirmPassword] = useState("");
+    const { mutate: signUpEmail, isPending: signUpPending } = useSignUpEmail({
+        onError: (error) => {
+            setPassword("");
+            setConfirmPassword("");
+            toast.danger(error.error?.message || error.message);
+        },
+        onSuccess: () => {
+            if (emailAndPassword?.requireEmailVerification) {
+                toast.success(localization.auth.verifyYourEmail);
+                navigate({ to: `${basePaths.auth}/${viewPaths.auth.signIn}` });
+            }
+            else {
+                navigate({ to: redirectTo });
+            }
+        }
+    });
+    const { mutate: signInSocial, isPending: socialPending } = useSignInSocial({
+        onError: (error) => toast.danger(error.error?.message || error.message)
+    });
+    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+    const [isConfirmPasswordVisible, setIsConfirmPasswordVisible] = useState(false);
+    const isPending = signUpPending || socialPending;
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        const formData = new FormData(e.currentTarget);
+        const name = formData.get("name");
+        const email = formData.get("email");
+        if (emailAndPassword?.confirmPassword && password !== confirmPassword) {
+            toast.danger(localization.auth.passwordsDoNotMatch);
+            setPassword("");
+            setConfirmPassword("");
+            return;
+        }
+        signUpEmail({ name, email, password });
+    };
+    const showSeparator = emailAndPassword?.enabled && socialProviders && socialProviders.length > 0;
+    return (_jsx(Card, { className: cn("w-full max-w-sm p-4 md:p-6", className), variant: variant, ...props, children: _jsx(Card.Content, { children: _jsxs(Fieldset, { className: "gap-4", children: [_jsx(Label, { className: "text-xl", children: localization.auth.signUp }), socialPosition === "top" && (_jsxs(_Fragment, { children: [socialProviders && socialProviders.length > 0 && (_jsx(ProviderButtons, { isPending: isPending, socialLayout: socialLayout, signInSocial: signInSocial })), showSeparator && (_jsx(FieldSeparator, { children: localization.auth.or }))] })), emailAndPassword?.enabled && (_jsxs(Form, { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs(Fieldset.Group, { children: [_jsxs(TextField, { name: "name", type: "text", autoComplete: "name", isDisabled: isPending, children: [_jsx(Label, { children: localization.auth.name }), _jsx(Input, { placeholder: localization.auth.namePlaceholder, required: true, variant: variant === "transparent" ? "primary" : "secondary" }), _jsx(FieldError, { className: "text-wrap" })] }), _jsxs(TextField, { name: "email", type: "email", autoComplete: "email", isDisabled: isPending, children: [_jsx(Label, { children: localization.auth.email }), _jsx(Input, { placeholder: localization.auth.emailPlaceholder, required: true, variant: variant === "transparent" ? "primary" : "secondary" }), _jsx(FieldError, { className: "text-wrap" })] }), _jsxs(TextField, { minLength: emailAndPassword?.minPasswordLength, maxLength: emailAndPassword?.maxPasswordLength, name: "password", autoComplete: "new-password", isDisabled: isPending, value: password, onChange: setPassword, children: [_jsx(Label, { children: localization.auth.password }), _jsxs(InputGroup, { variant: variant === "transparent" ? "primary" : "secondary", children: [_jsx(InputGroup.Input, { placeholder: localization.auth.passwordPlaceholder, type: isPasswordVisible ? "text" : "password", name: "password", required: true }), _jsx(InputGroup.Suffix, { className: "px-0", children: _jsx(Button, { isIconOnly: true, "aria-label": isPasswordVisible
+                                                                ? localization.auth.hidePassword
+                                                                : localization.auth.showPassword, size: "sm", variant: "ghost", onPress: () => setIsPasswordVisible(!isPasswordVisible), isDisabled: isPending, children: isPasswordVisible ? _jsx(EyeSlash, {}) : _jsx(Eye, {}) }) })] }), _jsx(FieldError, { className: "text-wrap" })] }), emailAndPassword?.confirmPassword && (_jsxs(TextField, { minLength: emailAndPassword?.minPasswordLength, maxLength: emailAndPassword?.maxPasswordLength, name: "confirmPassword", autoComplete: "new-password", isDisabled: isPending, value: confirmPassword, onChange: setConfirmPassword, children: [_jsx(Label, { children: localization.auth.confirmPassword }), _jsxs(InputGroup, { variant: variant === "transparent" ? "primary" : "secondary", children: [_jsx(InputGroup.Input, { name: "confirmPassword", placeholder: localization.auth.confirmPasswordPlaceholder, type: isConfirmPasswordVisible ? "text" : "password", required: true }), _jsx(InputGroup.Suffix, { className: "px-0", children: _jsx(Button, { isIconOnly: true, "aria-label": isConfirmPasswordVisible
+                                                                ? localization.auth.hidePassword
+                                                                : localization.auth.showPassword, size: "sm", variant: "ghost", onPress: () => setIsConfirmPasswordVisible(!isConfirmPasswordVisible), isDisabled: isPending, children: isConfirmPasswordVisible ? _jsx(EyeSlash, {}) : _jsx(Eye, {}) }) })] }), _jsx(FieldError, { className: "text-wrap" })] }))] }), _jsxs(Fieldset.Actions, { className: "flex-col gap-3", children: [_jsxs(Button, { type: "submit", className: "w-full", isPending: isPending, children: [isPending && _jsx(Spinner, { color: "current", size: "sm" }), localization.auth.signUp] }), magicLink && (_jsx(MagicLinkButton, { view: "signUp", isPending: isPending }))] })] })), socialPosition === "bottom" && (_jsxs(_Fragment, { children: [showSeparator && (_jsx(FieldSeparator, { children: localization.auth.or })), socialProviders && socialProviders.length > 0 && (_jsx(ProviderButtons, { socialLayout: socialLayout, signInSocial: signInSocial, isPending: isPending }))] })), emailAndPassword?.enabled && (_jsxs(Description, { className: "text-center text-sm", children: [localization.auth.alreadyHaveAnAccount, " ", _jsx(Link, { href: `${basePaths.auth}/${viewPaths.auth.signIn}`, className: "text-accent decoration-accent no-underline hover:underline", children: localization.auth.signIn })] }))] }) }) }));
+}

package/dist/src/components/email/email-changed-email.d.ts

@@ -0,0 +1,3 @@
+import { type EmailChangedEmailProps } from "@better-auth-ui/react";
+export type { EmailChangedEmailProps } from "@better-auth-ui/react";
+export declare function EmailChangedEmail({ colors, classNames, ...props }: EmailChangedEmailProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/email/email-changed-email.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { EmailChangedEmail as EmailChangedEmailPrimitive } from "@better-auth-ui/react";
+import { cn } from "@heroui/react";
+export function EmailChangedEmail({ colors, classNames, ...props }) {
+    return (_jsx(EmailChangedEmailPrimitive, { colors: {
+            light: {
+                background: "#F5F5F5",
+                primary: "#0285F7",
+                primaryForeground: "#FCFCFC",
+                ...colors?.light
+            },
+            dark: {
+                background: "#060607",
+                primary: "#0584F6",
+                primaryForeground: "#FCFCFC",
+                ...colors?.dark
+            }
+        }, classNames: {
+            ...classNames,
+            card: cn("border-none rounded-3xl", classNames?.card),
+            button: cn("rounded-full", classNames?.button)
+        }, ...props }));
+}

package/dist/src/components/email/email-verification-email.d.ts

@@ -0,0 +1,3 @@
+import { type EmailVerificationEmailProps } from "@better-auth-ui/react";
+export type { EmailVerificationEmailProps } from "@better-auth-ui/react";
+export declare function EmailVerificationEmail({ colors, classNames, ...props }: EmailVerificationEmailProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/email/email-verification-email.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { EmailVerificationEmail as EmailVerificationEmailPrimitive } from "@better-auth-ui/react";
+import { cn } from "@heroui/react";
+export function EmailVerificationEmail({ colors, classNames, ...props }) {
+    return (_jsx(EmailVerificationEmailPrimitive, { colors: {
+            light: {
+                background: "#F5F5F5",
+                primary: "#0285F7",
+                primaryForeground: "#FCFCFC",
+                ...colors?.light
+            },
+            dark: {
+                background: "#060607",
+                primary: "#0584F6",
+                primaryForeground: "#FCFCFC",
+                ...colors?.dark
+            }
+        }, classNames: {
+            ...classNames,
+            card: cn("border-none rounded-3xl", classNames?.card),
+            button: cn("rounded-full", classNames?.button)
+        }, ...props }));
+}

package/dist/src/components/email/magic-link-email.d.ts

@@ -0,0 +1,3 @@
+import { type MagicLinkEmailProps } from "@better-auth-ui/react";
+export type { MagicLinkEmailProps } from "@better-auth-ui/react";
+export declare function MagicLinkEmail({ colors, classNames, ...props }: MagicLinkEmailProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/email/magic-link-email.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MagicLinkEmail as MagicLinkEmailPrimitive } from "@better-auth-ui/react";
+import { cn } from "@heroui/react";
+export function MagicLinkEmail({ colors, classNames, ...props }) {
+    return (_jsx(MagicLinkEmailPrimitive, { colors: {
+            light: {
+                background: "#F5F5F5",
+                primary: "#0285F7",
+                primaryForeground: "#FCFCFC",
+                ...colors?.light
+            },
+            dark: {
+                background: "#060607",
+                primary: "#0584F6",
+                primaryForeground: "#FCFCFC",
+                ...colors?.dark
+            }
+        }, classNames: {
+            ...classNames,
+            card: cn("border-none rounded-3xl", classNames?.card),
+            button: cn("rounded-full", classNames?.button)
+        }, ...props }));
+}

package/dist/src/components/email/new-device-email.d.ts

@@ -0,0 +1,3 @@
+import { type NewDeviceEmailProps } from "@better-auth-ui/react";
+export type { NewDeviceEmailProps } from "@better-auth-ui/react";
+export declare function NewDeviceEmail({ colors, classNames, ...props }: NewDeviceEmailProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/email/new-device-email.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NewDeviceEmail as NewDeviceEmailPrimitive } from "@better-auth-ui/react";
+import { cn } from "@heroui/react";
+export function NewDeviceEmail({ colors, classNames, ...props }) {
+    return (_jsx(NewDeviceEmailPrimitive, { colors: {
+            light: {
+                background: "#F5F5F5",
+                primary: "#0285F7",
+                primaryForeground: "#FCFCFC",
+                ...colors?.light
+            },
+            dark: {
+                background: "#060607",
+                primary: "#0584F6",
+                primaryForeground: "#FCFCFC",
+                ...colors?.dark
+            }
+        }, classNames: {
+            ...classNames,
+            card: cn("border-none rounded-3xl", classNames?.card),
+            button: cn("rounded-full", classNames?.button)
+        }, ...props }));
+}

package/dist/src/components/email/otp-email.d.ts

@@ -0,0 +1,3 @@
+import { type OtpEmailProps } from "@better-auth-ui/react";
+export type { OtpEmailProps } from "@better-auth-ui/react";
+export declare function OtpEmail({ colors, classNames, ...props }: OtpEmailProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/email/otp-email.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { OtpEmail as OtpEmailPrimitive } from "@better-auth-ui/react";
+import { cn } from "@heroui/react";
+export function OtpEmail({ colors, classNames, ...props }) {
+    return (_jsx(OtpEmailPrimitive, { colors: {
+            light: {
+                background: "#F5F5F5",
+                primary: "#0285F7",
+                primaryForeground: "#FCFCFC",
+                ...colors?.light
+            },
+            dark: {
+                background: "#060607",
+                primary: "#0584F6",
+                primaryForeground: "#FCFCFC",
+                ...colors?.dark
+            }
+        }, classNames: {
+            ...classNames,
+            card: cn("border-none rounded-3xl", classNames?.card)
+        }, ...props }));
+}

package/dist/src/components/email/password-changed-email.d.ts

@@ -0,0 +1,3 @@
+import { type PasswordChangedEmailProps } from "@better-auth-ui/react";
+export type { PasswordChangedEmailProps } from "@better-auth-ui/react";
+export declare function PasswordChangedEmail({ colors, classNames, ...props }: PasswordChangedEmailProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/email/password-changed-email.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PasswordChangedEmail as PasswordChangedEmailPrimitive } from "@better-auth-ui/react";
+import { cn } from "@heroui/react";
+export function PasswordChangedEmail({ colors, classNames, ...props }) {
+    return (_jsx(PasswordChangedEmailPrimitive, { colors: {
+            light: {
+                background: "#F5F5F5",
+                primary: "#0285F7",
+                primaryForeground: "#FCFCFC",
+                ...colors?.light
+            },
+            dark: {
+                background: "#060607",
+                primary: "#0584F6",
+                primaryForeground: "#FCFCFC",
+                ...colors?.dark
+            }
+        }, classNames: {
+            ...classNames,
+            card: cn("border-none rounded-3xl", classNames?.card),
+            button: cn("rounded-full", classNames?.button)
+        }, ...props }));
+}

package/dist/src/components/email/reset-password-email.d.ts

@@ -0,0 +1,3 @@
+import { type ResetPasswordEmailProps } from "@better-auth-ui/react";
+export type { ResetPasswordEmailProps } from "@better-auth-ui/react";
+export declare function ResetPasswordEmail({ colors, classNames, ...props }: ResetPasswordEmailProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/email/reset-password-email.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ResetPasswordEmail as ResetPasswordEmailPrimitive } from "@better-auth-ui/react";
+import { cn } from "@heroui/react";
+export function ResetPasswordEmail({ colors, classNames, ...props }) {
+    return (_jsx(ResetPasswordEmailPrimitive, { colors: {
+            light: {
+                background: "#F5F5F5",
+                primary: "#0285F7",
+                primaryForeground: "#FCFCFC",
+                ...colors?.light
+            },
+            dark: {
+                background: "#060607",
+                primary: "#0584F6",
+                primaryForeground: "#FCFCFC",
+                ...colors?.dark
+            }
+        }, classNames: {
+            ...classNames,
+            card: cn("border-none rounded-3xl", classNames?.card),
+            button: cn("rounded-full", classNames?.button)
+        }, ...props }));
+}

package/dist/src/components/settings/account/account-settings.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentProps } from "react";
+export type AccountSettingsProps = {
+    className?: string;
+};
+/**
+ * Renders the account settings layout including user profile, change email, appearance, and accounts management.
+ *
+ * UserProfile, ChangeEmail, and Appearance are always rendered; Accounts is rendered when `multiSession` is enabled.
+ *
+ * @param className - Optional additional CSS class names for the outer container.
+ * @returns The account settings container as a JSX element.
+ */
+export declare function AccountSettings({ className, ...props }: AccountSettingsProps & ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;