@better-auth-ui/heroui 1.6.0 → 1.6.2

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

@@ -1,58 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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;

package/dist/src/components/settings/account/account-settings.js

@@ -1,19 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuth } from "@better-auth-ui/react";
-import { cn } from "../../../lib/utils";
-import { Appearance } from "./appearance";
-import { ChangeEmail } from "./change-email";
-import { ManageAccounts } from "./manage-accounts";
-import { UserProfile } from "./user-profile";
-/**
- * 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 function AccountSettings({ className, ...props }) {
-    const { multiSession } = useAuth();
-    return (_jsxs("div", { className: cn("flex w-full flex-col gap-4 md:gap-6", className), ...props, children: [_jsx(UserProfile, {}), _jsx(ChangeEmail, {}), _jsx(Appearance, {}), multiSession && _jsx(ManageAccounts, {})] }));
-}

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

@@ -1,16 +0,0 @@
-import { type CardProps } from "@heroui/react";
-export type AppearanceProps = {
-    className?: string;
-    variant?: CardProps["variant"];
-};
-/**
- * Renders a theme selector card with visual theme previews.
- *
- * Displays a card containing radio buttons for selecting between system, light,
- * and dark themes. Each option shows a visual preview of the theme. Only renders
- * if theme settings are configured (theme, setTheme, and themes are provided).
- *
- * @param className - Optional additional CSS class names for the card container.
- * @returns A JSX element containing the theme selector card, or null if theme settings are not configured.
- */
-export declare function Appearance({ className, variant, ...props }: AppearanceProps & CardProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/src/components/settings/account/appearance.js

@@ -1,28 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ThemePreviewDark, ThemePreviewLight, ThemePreviewSystem, useAuth } from "@better-auth-ui/react";
-import { Display, Moon, Sun } from "@gravity-ui/icons";
-import { Card, cn, Label, Radio, RadioGroup, useIsHydrated } from "@heroui/react";
-/**
- * Renders a theme selector card with visual theme previews.
- *
- * Displays a card containing radio buttons for selecting between system, light,
- * and dark themes. Each option shows a visual preview of the theme. Only renders
- * if theme settings are configured (theme, setTheme, and themes are provided).
- *
- * @param className - Optional additional CSS class names for the card container.
- * @returns A JSX element containing the theme selector card, or null if theme settings are not configured.
- */
-export function Appearance({ className, variant, ...props }) {
-    const { localization, settings: { theme, setTheme, themes } } = useAuth();
-    const hydrated = useIsHydrated();
-    if (!setTheme || !themes?.length) {
-        return null;
-    }
-    return (_jsxs(Card, { className: cn("p-4 md:p-6 gap-4", className), variant: variant, ...props, children: [_jsx(Card.Header, { children: _jsx(Card.Title, { className: "text-xl", children: localization.settings.appearance }) }), _jsx(Card.Content, { children: _jsxs(RadioGroup, { variant: variant === "transparent" ? "secondary" : "primary", value: hydrated ? theme : undefined, onChange: setTheme, isDisabled: !hydrated || !theme, children: [_jsx(Label, { className: "mb-2", children: localization.settings.theme }), _jsxs("div", { className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-3", children: [themes.includes("system") && (_jsxs(Radio, { value: "system", className: cn(variant === "transparent"
-                                        ? "bg-surface"
-                                        : "bg-surface-secondary", "mt-0 group relative flex-col gap-4 rounded-xl border border-transparent px-5 py-4 transition-all data-[selected=true]:border-accent data-[selected=true]:bg-accent/10", "data-[focus-visible=true]:border-accent data-[focus-visible=true]:bg-accent/10"), children: [_jsx(Radio.Control, { className: "absolute top-3 right-3 size-5", children: _jsx(Radio.Indicator, {}) }), _jsxs(Radio.Content, { className: "flex flex-col gap-3", children: [_jsxs(Label, { className: "cursor-pointer font-medium flex gap-2 items-center", children: [_jsx(Display, { className: "text-muted" }), localization.settings.system] }), _jsx(ThemePreviewSystem, { className: "w-full" })] })] })), themes.includes("light") && (_jsxs(Radio, { value: "light", className: cn(variant === "transparent"
-                                        ? "bg-surface"
-                                        : "bg-surface-secondary", "mt-0 group relative flex-col gap-4 rounded-xl border border-transparent px-5 py-4 transition-all data-[selected=true]:border-accent data-[selected=true]:bg-accent/10", "data-[focus-visible=true]:border-accent data-[focus-visible=true]:bg-accent/10"), children: [_jsx(Radio.Control, { className: "absolute top-3 right-3 size-5", children: _jsx(Radio.Indicator, {}) }), _jsxs(Radio.Content, { className: "flex flex-col gap-3", children: [_jsxs(Label, { className: "cursor-pointer font-medium flex gap-2 items-center", children: [_jsx(Sun, { className: "text-muted" }), localization.settings.light] }), _jsx(ThemePreviewLight, { className: "w-full" })] })] })), themes.includes("dark") && (_jsxs(Radio, { value: "dark", className: cn(variant === "transparent"
-                                        ? "bg-surface"
-                                        : "bg-surface-secondary", "mt-0 group relative flex-col gap-4 rounded-xl border border-transparent px-5 py-4 transition-all data-[selected=true]:border-accent data-[selected=true]:bg-accent/10", "data-[focus-visible=true]:border-accent data-[focus-visible=true]:bg-accent/10"), children: [_jsx(Radio.Control, { className: "absolute top-3 right-3 size-5", children: _jsx(Radio.Indicator, {}) }), _jsxs(Radio.Content, { className: "flex flex-col gap-3", children: [_jsxs(Label, { className: "cursor-pointer font-medium flex gap-2 items-center", children: [_jsx(Moon, { className: "text-muted" }), localization.settings.dark] }), _jsx(ThemePreviewDark, { className: "w-full" })] })] }))] })] }) })] }));
-}

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

@@ -1,15 +0,0 @@
-import { type CardProps } from "@heroui/react";
-export type ChangeEmailProps = {
-    className?: string;
-    variant?: CardProps["variant"];
-};
-/**
- * Render a card containing a form to view and update the authenticated user's email.
- *
- * Shows a loading skeleton until session data is available, displays the current
- * email as the form's default value, and sends a verification email to the
- * new address upon successful submission.
- *
- * @returns A JSX element rendering the change-email card and form
- */
-export declare function ChangeEmail({ className, variant, ...props }: ChangeEmailProps & CardProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/settings/account/change-email.js

@@ -1,35 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuth, useChangeEmail, useSession } from "@better-auth-ui/react";
-import { Check, Envelope } from "@gravity-ui/icons";
-import { Button, Card, cn, FieldError, Fieldset, Form, InputGroup, Label, Skeleton, Spinner, TextField, toast } from "@heroui/react";
-/**
- * Render a card containing a form to view and update the authenticated user's email.
- *
- * Shows a loading skeleton until session data is available, displays the current
- * email as the form's default value, and sends a verification email to the
- * new address upon successful submission.
- *
- * @returns A JSX element rendering the change-email card and form
- */
-export function ChangeEmail({ className, variant, ...props }) {
-    const { localization, baseURL, viewPaths } = useAuth();
-    const { data: sessionData } = useSession({
-        throwOnError: (error) => {
-            toast.danger(error.error?.message || error.message);
-            return false;
-        }
-    });
-    const { mutate: changeEmail, isPending } = useChangeEmail({
-        onSuccess: () => toast.success(localization.settings.changeEmailSuccess),
-        onError: (error) => toast.danger(error.error?.message || error.message)
-    });
-    function handleSubmit(e) {
-        e.preventDefault();
-        const formData = new FormData(e.currentTarget);
-        changeEmail({
-            newEmail: formData.get("email"),
-            callbackURL: `${baseURL}/${viewPaths.settings.account}`
-        });
-    }
-    return (_jsxs(Card, { className: cn("p-4 md:p-6 gap-4", className), variant: variant, ...props, children: [_jsx(Card.Header, { children: _jsx(Card.Title, { className: "text-xl", children: localization.settings.changeEmail }) }), _jsx(Card.Content, { children: _jsx(Form, { onSubmit: handleSubmit, children: _jsxs(Fieldset, { className: "w-full gap-4", children: [_jsx(Fieldset.Group, { children: _jsxs(TextField, { name: "email", type: "email", defaultValue: sessionData?.user.email, isDisabled: isPending || !sessionData, children: [_jsx(Label, { children: localization.auth.email }), sessionData ? (_jsxs(InputGroup, { variant: variant === "transparent" ? "primary" : "secondary", children: [_jsx(InputGroup.Prefix, { children: _jsx(Envelope, {}) }), _jsx(InputGroup.Input, { required: true, autoComplete: "email", placeholder: localization.auth.emailPlaceholder })] })) : (_jsx(Skeleton, { className: "h-10 md:h-9 w-full rounded-xl" })), _jsx(FieldError, {})] }, sessionData?.user.email) }), _jsx(Fieldset.Actions, { children: _jsxs(Button, { type: "submit", isPending: isPending, isDisabled: !sessionData, children: [isPending ? _jsx(Spinner, { color: "current", size: "sm" }) : _jsx(Check, {}), localization.settings.updateEmail] }) })] }) }) })] }));
-}

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

@@ -1,19 +0,0 @@
-import type { Session, User } from "better-auth";
-export type DeviceSession = {
-    session: Session;
-    user: User;
-};
-export type ManageAccountProps = {
-    deviceSession?: DeviceSession | null;
-    isPending?: boolean;
-};
-/**
- * Render a single account card with user info and switch/revoke controls.
- *
- * Shows the user's avatar and info. For non-active sessions, provides a switch button.
- * All sessions have a revoke/sign-out button.
- *
- * @param deviceSession - The device session object containing session and user data
- * @returns A JSX element containing the account card
- */
-export declare function ManageAccount({ deviceSession, isPending }: ManageAccountProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/settings/account/manage-account.js

@@ -1,27 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuth, useRevokeMultiSession, useSession, useSetActiveSession } from "@better-auth-ui/react";
-import { ArrowRightArrowLeft, ArrowRightFromSquare } from "@gravity-ui/icons";
-import { Button, Card, Spinner, toast } from "@heroui/react";
-import { UserView } from "../../user/user-view";
-/**
- * Render a single account card with user info and switch/revoke controls.
- *
- * Shows the user's avatar and info. For non-active sessions, provides a switch button.
- * All sessions have a revoke/sign-out button.
- *
- * @param deviceSession - The device session object containing session and user data
- * @returns A JSX element containing the account card
- */
-export function ManageAccount({ deviceSession, isPending }) {
-    const { localization } = useAuth();
-    const { data: sessionData } = useSession();
-    const { mutate: setActiveSession, isPending: isSwitching } = useSetActiveSession({
-        onError: (error) => toast.danger(error.error?.message || error.message)
-    });
-    const { mutate: revokeSession, isPending: isRevoking } = useRevokeMultiSession({
-        onError: (error) => toast.danger(error.error?.message || error.message),
-        onSuccess: () => toast.success(localization.settings.revokeSessionSuccess)
-    });
-    const isActive = deviceSession?.session.userId === sessionData?.session.userId;
-    return (_jsxs(Card, { className: "flex-row items-center border p-3 shadow-none", children: [_jsx(UserView, { user: deviceSession?.user, isPending: isPending, size: "md" }), deviceSession && (_jsxs("div", { className: "flex items-center gap-1 shrink-0 ml-auto", children: [!isActive && (_jsx(Button, { isIconOnly: true, variant: "ghost", size: "sm", onPress: () => setActiveSession({ sessionToken: deviceSession.session.token }), isPending: isSwitching || isRevoking, "aria-label": localization.auth.switchAccount, children: isSwitching ? (_jsx(Spinner, { color: "current", size: "sm" })) : (_jsx(ArrowRightArrowLeft, {})) })), _jsx(Button, { isIconOnly: true, variant: "ghost", size: "sm", onPress: () => revokeSession({ sessionToken: deviceSession.session.token }), isPending: isSwitching || isRevoking, "aria-label": localization.auth.signOut, children: isRevoking ? (_jsx(Spinner, { color: "current", size: "sm" })) : (_jsx(ArrowRightFromSquare, {})) })] }))] }));
-}

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

@@ -1,14 +0,0 @@
-import { type CardProps } from "@heroui/react";
-export type ManageAccountsProps = {
-    className?: string;
-    variant?: CardProps["variant"];
-};
-/**
- * Render a card that lists and manages all device sessions for the current user.
- *
- * Shows each session with user information and actions to switch to or revoke a session.
- * When device session data is loading, a pending placeholder row is displayed.
- *
- * @returns A JSX element containing the accounts management card
- */
-export declare function ManageAccounts({ className, ...props }: ManageAccountsProps & CardProps): import("react/jsx-runtime").JSX.Element;