@better-auth-ui/heroui 1.6.0 → 1.6.2

package/dist/components/settings/user-profile.js

@@ -1,20 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuth, useUpdateUser } from "@better-auth-ui/react";
-import { CheckIcon, PencilIcon } from "@heroicons/react/24/outline";
-import { Button, Card, Description, FieldError, Fieldset, Form, Input, Label, Skeleton, Spinner, TextField } from "@heroui/react";
-import { UserAvatar } from "../user/user-avatar";
-export function UserProfile({ className, ...config }) {
-    const { authClient, localization } = useAuth(config);
-    const { data: sessionData, isPending: isSessionPending } = authClient.useSession();
-    const [state, formAction, isPending] = useUpdateUser(config);
-    if (isSessionPending) {
-        return _jsx(UserProfileSkeleton, {});
-    }
-    return (_jsx(Card, { className: "p-4 md:p-6", children: _jsx(Form, { action: formAction, children: _jsxs(Fieldset, { className: "w-full gap-4 md:gap-6", children: [_jsx(Fieldset.Legend, { className: "text-xl", children: localization.settings.profile }), _jsx(Description, {}), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs(Button, { type: "button", isIconOnly: true, variant: "ghost", className: "p-0 h-auto w-auto rounded-full", children: [_jsx(UserAvatar, { ...config, size: "lg" }), _jsx("span", { className: "absolute right-0 bottom-0 size-3.5 rounded-full bg-background ring-2 ring-surface-quaternary flex items-center justify-center", children: _jsx(PencilIcon, { className: "size-2 text-muted" }) })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("p", { className: "text-sm font-medium", children: sessionData?.user?.displayUsername ||
-                                            sessionData?.user?.name ||
-                                            sessionData?.user?.email }), (sessionData?.user?.displayUsername ||
-                                        sessionData?.user?.name) && (_jsx("p", { className: "text-muted text-xs leading-none", children: sessionData?.user?.email }))] })] }), _jsx(Fieldset.Group, { children: _jsxs(TextField, { name: "name", defaultValue: sessionData?.user?.name || state.name, isDisabled: isPending, children: [_jsx(Label, { children: localization.auth.name }), _jsx(Input, { placeholder: localization.auth.name }), _jsx(FieldError, {})] }) }), _jsx(Fieldset.Actions, { children: _jsxs(Button, { type: "submit", isPending: isPending, children: [isPending ? (_jsx(Spinner, { color: "current", size: "sm" })) : (_jsx(CheckIcon, { className: "size-4" })), localization.settings.saveChanges] }) })] }) }) }));
-}
-function UserProfileSkeleton() {
-    return (_jsxs(Card, { className: "p-4 md:p-6 gap-4 md:gap-6", children: [_jsx(Skeleton, { className: "h-7 w-16 rounded-xl" }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Skeleton, { className: "size-12 rounded-full" }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Skeleton, { className: "h-4 mt-0.5 w-24 rounded-lg" }), _jsx(Skeleton, { className: "h-3 mt-0.5 w-32 rounded-lg" })] })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Skeleton, { className: "h-4 w-12 my-0.5 rounded-lg" }), _jsx(Skeleton, { className: "h-9 w-full rounded-xl" })] }), _jsx(Skeleton, { className: "h-10 md:h-9 w-36 rounded-full mt-1" })] }));
-}

package/dist/components/user/switch-account-popover.d.ts

@@ -1,10 +0,0 @@
-/**
- * Render the popover content for switching between multiple authenticated sessions.
- *
- * Shows the current session with a checkmark, lists other device sessions that can be activated,
- * and provides an option to add a new account. This component should be rendered inside a
- * Dropdown.SubmenuTrigger to defer the useListDeviceSessions query until the submenu is opened.
- *
- * @returns The switch account popover content as a JSX element
- */
-export declare function SwitchAccountPopover(): import("react/jsx-runtime").JSX.Element;

package/dist/components/user/switch-account-popover.js

@@ -1,25 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuth, useListDeviceSessions, useSession, useSetActiveSession } from "@better-auth-ui/react";
-import { Check, CirclePlus } from "@gravity-ui/icons";
-import { Dropdown, Label, Separator } from "@heroui/react";
-import { UserView } from "./user-view";
-/**
- * Render the popover content for switching between multiple authenticated sessions.
- *
- * Shows the current session with a checkmark, lists other device sessions that can be activated,
- * and provides an option to add a new account. This component should be rendered inside a
- * Dropdown.SubmenuTrigger to defer the useListDeviceSessions query until the submenu is opened.
- *
- * @returns The switch account popover content as a JSX element
- */
-export function SwitchAccountPopover() {
-    const { basePaths, viewPaths, localization } = useAuth();
-    const { settingActiveSession, setActiveSession } = useSetActiveSession();
-    const { data: sessionData } = useSession();
-    const { data: deviceSessions } = useListDeviceSessions();
-    return (_jsxs(Dropdown.Menu, { children: [_jsxs(Dropdown.Item, { className: "px-2", children: [_jsx(UserView, {}), _jsx(Check, { className: "ml-auto" })] }), deviceSessions
-                ?.filter((deviceSession) => deviceSession.session.id !== sessionData?.session?.id)
-                .map((deviceSession) => {
-                return (_jsx(Dropdown.Item, { className: "px-2", isDisabled: !!settingActiveSession, onPress: () => setActiveSession(deviceSession.session.token), children: _jsx(UserView, { user: deviceSession.user }) }, deviceSession.session.id));
-            }), _jsx(Separator, {}), _jsxs(Dropdown.Item, { textValue: localization.auth.addAccount, href: `${basePaths.auth}/${viewPaths.auth.signIn}`, children: [_jsx(CirclePlus, { className: "text-muted" }), _jsx(Label, { children: localization.auth.addAccount })] })] }));
-}

package/dist/components/user/switch-account-submenu.d.ts

@@ -1,10 +0,0 @@
-/**
- * Render the popover content for switching between multiple authenticated sessions.
- *
- * Shows the current session with a checkmark, lists other device sessions that can be activated,
- * and provides an option to add a new account. This component should be rendered inside a
- * Dropdown.SubmenuTrigger to defer the useListDeviceSessions query until the submenu is opened.
- *
- * @returns The switch account submenu popover content as a JSX element
- */
-export declare function SwitchAccountSubmenu(): import("react/jsx-runtime").JSX.Element;

package/dist/components/user/switch-account-submenu.js

@@ -1,25 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuth, useListDeviceSessions, useSession, useSetActiveSession } from "@better-auth-ui/react";
-import { Check, CirclePlus } from "@gravity-ui/icons";
-import { Dropdown, Label, Separator } from "@heroui/react";
-import { UserView } from "./user-view";
-/**
- * Render the popover content for switching between multiple authenticated sessions.
- *
- * Shows the current session with a checkmark, lists other device sessions that can be activated,
- * and provides an option to add a new account. This component should be rendered inside a
- * Dropdown.SubmenuTrigger to defer the useListDeviceSessions query until the submenu is opened.
- *
- * @returns The switch account submenu popover content as a JSX element
- */
-export function SwitchAccountSubmenu() {
-    const { basePaths, viewPaths, localization } = useAuth();
-    const { settingActiveSession, setActiveSession } = useSetActiveSession();
-    const { data: sessionData } = useSession();
-    const { data: deviceSessions } = useListDeviceSessions();
-    return (_jsx(Dropdown.Popover, { className: "min-w-40 md:min-w-56 max-w-[48svw]", children: _jsxs(Dropdown.Menu, { children: [_jsxs(Dropdown.Item, { className: "px-2", children: [_jsx(UserView, {}), _jsx(Check, { className: "ml-auto" })] }), deviceSessions
-                    ?.filter((deviceSession) => deviceSession.session.id !== sessionData?.session?.id)
-                    .map((deviceSession) => {
-                    return (_jsx(Dropdown.Item, { className: "px-2", isDisabled: !!settingActiveSession, onPress: () => setActiveSession(deviceSession.session.token), children: _jsx(UserView, { user: deviceSession.user }) }, deviceSession.session.id));
-                }), _jsx(Separator, {}), _jsxs(Dropdown.Item, { textValue: localization.auth.addAccount, href: `${basePaths.auth}/${viewPaths.auth.signIn}`, children: [_jsx(CirclePlus, { className: "text-muted" }), _jsx(Label, { children: localization.auth.addAccount })] })] }) }));
-}

package/dist/hooks/use-auth.d.ts

@@ -1,2 +0,0 @@
-import { type AnyAuthConfig } from "@better-auth-ui/react";
-export declare function useAuth(config?: AnyAuthConfig): import("@better-auth-ui/react").AuthConfig;

package/dist/hooks/use-auth.js

@@ -1,8 +0,0 @@
-import { useAuth as useAuthPrimitive } from "@better-auth-ui/react";
-import { toast } from "sonner";
-const extendConfig = {
-    toast
-};
-export function useAuth(config) {
-    return useAuthPrimitive();
-}

package/dist/hooks/use-redirect-to.d.ts

@@ -1,8 +0,0 @@
-import type { AnyAuthConfig } from "@better-auth-ui/react";
-/**
- * Redirects unauthenticated users to the sign-in page, preserving the current URL as a redirectTo query parameter.
- *
- * @param config - Optional partial AuthConfig used to customize auth behavior
- * @param shouldRedirect - Condition to check before redirecting (default: when user is not authenticated and not loading)
- */
-export declare function useRedirectTo(config?: AnyAuthConfig, shouldRedirect?: boolean): void;

package/dist/hooks/use-redirect-to.js

@@ -1,19 +0,0 @@
-import { useEffect } from "react";
-import { useAuth } from "./use-auth";
-/**
- * Redirects unauthenticated users to the sign-in page, preserving the current URL as a redirectTo query parameter.
- *
- * @param config - Optional partial AuthConfig used to customize auth behavior
- * @param shouldRedirect - Condition to check before redirecting (default: when user is not authenticated and not loading)
- */
-export function useRedirectTo(config, shouldRedirect) {
-    const { basePaths, viewPaths, replace } = useAuth(config);
-    useEffect(() => {
-        if (shouldRedirect === false)
-            return;
-        const currentURL = window.location.pathname + window.location.search;
-        const redirectTo = encodeURIComponent(currentURL);
-        const signInPath = `${basePaths.auth}/${viewPaths.auth.signIn}?redirectTo=${redirectTo}`;
-        replace(signInPath);
-    }, [basePaths.auth, viewPaths.auth.signIn, replace, shouldRedirect]);
-}

package/dist/hooks/use-sign-in.d.ts

@@ -1,8 +0,0 @@
-import type { AuthConfig } from "@better-auth-ui/react";
-export declare function useSignIn(config: AuthConfig<{
-    RESEND: string;
-    VERIFICATION_EMAIL_SENT: string;
-}>): [state: {
-    email: string;
-    password: string;
-}, dispatch: (payload: FormData) => void, isPending: boolean];

package/dist/hooks/use-sign-in.js

@@ -1,53 +0,0 @@
-"use client";
-import { useActionState } from "react";
-export function useSignIn(config) {
-    const { authClient, baseURL, emailAndPassword, localization, redirectTo, navigate, toast } = config;
-    const { refetch } = authClient.useSession();
-    const signInAction = async (_, formData) => {
-        const email = formData.get("email");
-        const password = formData.get("password");
-        const rememberMe = formData.get("rememberMe") === "on";
-        const { error } = await authClient.signIn.email({
-            email,
-            password,
-            ...(emailAndPassword?.rememberMe ? { rememberMe } : {})
-        }, { disableSignal: true });
-        if (error) {
-            if (error.code === "EMAIL_NOT_VERIFIED") {
-                const toastId = toast.error(error.message, {
-                    action: {
-                        label: localization.RESEND,
-                        onClick: async () => {
-                            const callbackURL = `${baseURL ?? ""}${redirectTo}`;
-                            toast.dismiss?.(toastId);
-                            const { error } = await authClient.sendVerificationEmail({
-                                email,
-                                callbackURL
-                            });
-                            if (error) {
-                                toast.error(error.message);
-                            }
-                            else {
-                                toast.success(localization.VERIFICATION_EMAIL_SENT);
-                            }
-                        }
-                    }
-                });
-            }
-            else {
-                toast.error(error.message);
-            }
-            return {
-                email,
-                password: ""
-            };
-        }
-        await refetch();
-        navigate(redirectTo);
-        return { email, password };
-    };
-    return useActionState(signInAction, {
-        email: "",
-        password: ""
-    });
-}

package/dist/lib/utils.d.ts

@@ -1,2 +0,0 @@
-import { type ClassValue } from "clsx";
-export declare function cn(...inputs: ClassValue[]): string;

package/dist/lib/utils.js

@@ -1,5 +0,0 @@
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-export function cn(...inputs) {
-    return twMerge(clsx(inputs));
-}

package/dist/server.d.ts

@@ -1 +0,0 @@
-export * from "@better-auth-ui/react/server";

package/dist/server.js

@@ -1 +0,0 @@
-export * from "@better-auth-ui/react/server";

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

@@ -1,8 +0,0 @@
-import { type AuthProviderProps } from "@better-auth-ui/react";
-/**
- * Provides an authentication context by rendering an auth provider with the sonner toast handler injected, forwarding remaining configuration and rendering `children` inside it.
- *
- * @param children - React nodes to render inside the authentication provider
- * @returns A React element that renders an authentication provider configured with the provided props and toast handler
- */
-export declare function AuthProvider({ children, navigate, ...config }: AuthProviderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,13 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { AuthProvider as AuthProviderPrimitive } from "@better-auth-ui/react";
-import { RouterProvider } from "@heroui/react";
-import { toast } from "sonner";
-/**
- * Provides an authentication context by rendering an auth provider with the sonner toast handler injected, forwarding remaining configuration and rendering `children` inside it.
- *
- * @param children - React nodes to render inside the authentication provider
- * @returns A React element that renders an authentication provider configured with the provided props and toast handler
- */
-export function AuthProvider({ children, navigate, ...config }) {
-    return (_jsx(AuthProviderPrimitive, { toast: toast, navigate: navigate, ...config, children: _jsx(RouterProvider, { navigate: (path) => navigate({ to: path }), children: children }) }));
-}

package/dist/src/components/auth/auth.d.ts

@@ -1,22 +0,0 @@
-import type { AuthView } from "@better-auth-ui/react/core";
-import type { CardProps } from "@heroui/react";
-import type { SocialLayout } from "./provider-buttons";
-export type AuthProps = {
-    className?: string;
-    path?: string;
-    socialLayout?: SocialLayout;
-    socialPosition?: "top" | "bottom";
-    variant?: CardProps["variant"];
-    view?: AuthView;
-};
-/**
- * Render the appropriate authentication view based on the provided `view` or `path`.
- *
- * @param path - Route path used to resolve an auth view when `view` is not provided
- * @param socialLayout - Social layout to apply to sign-in/sign-up/magic-link views
- * @param socialPosition - Position for social buttons ("top" or "bottom")
- * @param variant - Variant to apply to the card
- * @param view - Explicit auth view to render (e.g., "signIn", "signUp")
- * @returns The React element for the resolved authentication view
- */
-export declare function Auth({ path, socialLayout, socialPosition, view, ...props }: AuthProps & CardProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/auth/auth.js

@@ -1,42 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useAuth } from "@better-auth-ui/react";
-import { ForgotPassword } from "./forgot-password";
-import { MagicLink } from "./magic-link";
-import { ResetPassword } from "./reset-password";
-import { SignIn } from "./sign-in";
-import { SignOut } from "./sign-out";
-import { SignUp } from "./sign-up";
-/**
- * Render the appropriate authentication view based on the provided `view` or `path`.
- *
- * @param path - Route path used to resolve an auth view when `view` is not provided
- * @param socialLayout - Social layout to apply to sign-in/sign-up/magic-link views
- * @param socialPosition - Position for social buttons ("top" or "bottom")
- * @param variant - Variant to apply to the card
- * @param view - Explicit auth view to render (e.g., "signIn", "signUp")
- * @returns The React element for the resolved authentication view
- */
-export function Auth({ path, socialLayout, socialPosition, view, ...props }) {
-    const { viewPaths } = useAuth();
-    if (!view && !path) {
-        throw new Error("[Better Auth UI] Either `view` or `path` must be provided");
-    }
-    const authPathViews = Object.fromEntries(Object.entries(viewPaths.auth).map(([k, v]) => [v, k]));
-    const currentView = view || (path ? authPathViews[path] : undefined);
-    switch (currentView) {
-        case "signIn":
-            return (_jsx(SignIn, { socialLayout: socialLayout, socialPosition: socialPosition, ...props }));
-        case "signUp":
-            return (_jsx(SignUp, { socialLayout: socialLayout, socialPosition: socialPosition, ...props }));
-        case "magicLink":
-            return (_jsx(MagicLink, { socialLayout: socialLayout, socialPosition: socialPosition, ...props }));
-        case "forgotPassword":
-            return _jsx(ForgotPassword, { ...props });
-        case "resetPassword":
-            return _jsx(ResetPassword, { ...props });
-        case "signOut":
-            return _jsx(SignOut, { ...props });
-        default:
-            throw new Error(`[Better Auth UI] Valid views are: ${Object.keys(viewPaths.auth).join(", ")}`);
-    }
-}

package/dist/src/components/auth/field-separator.d.ts

@@ -1,4 +0,0 @@
-import type { ReactNode } from "react";
-export declare function FieldSeparator({ children }: {
-    children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/auth/field-separator.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Separator } from "@heroui/react";
-export function FieldSeparator({ children }) {
-    return (_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Separator, { className: "flex-1" }), _jsx("p", { className: "text-xs text-muted shrink-0", children: children }), _jsx(Separator, { className: "flex-1" })] }));
-}

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

@@ -1,15 +0,0 @@
-import { type CardProps } from "@heroui/react";
-export type ForgotPasswordProps = {
-    className?: string;
-    variant?: CardProps["variant"];
-};
-/**
- * Render a card-based "Forgot Password" form that sends a password-reset email.
- *
- * The form displays an email input, submit button, and a link back to sign-in.
- * Toasts are displayed on success or error via the `useForgotPassword` hook.
- *
- * @param className - Optional additional CSS class names applied to the card
- * @returns The forgot-password form UI as a JSX element
- */
-export declare function ForgotPassword({ className, variant, ...props }: ForgotPasswordProps & CardProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,29 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuth, useRequestPasswordReset } from "@better-auth-ui/react";
-import { Button, Card, Description, FieldError, Fieldset, Form, Input, Label, Link, Spinner, TextField, toast } from "@heroui/react";
-import { cn } from "../../lib/utils";
-/**
- * Render a card-based "Forgot Password" form that sends a password-reset email.
- *
- * The form displays an email input, submit button, and a link back to sign-in.
- * Toasts are displayed on success or error via the `useForgotPassword` hook.
- *
- * @param className - Optional additional CSS class names applied to the card
- * @returns The forgot-password form UI as a JSX element
- */
-export function ForgotPassword({ className, variant, ...props }) {
-    const { basePaths, localization, viewPaths, navigate } = useAuth();
-    const { mutate: requestPasswordReset, isPending } = useRequestPasswordReset({
-        onError: (error) => toast.danger(error.error?.message || error.message),
-        onSuccess: () => {
-            toast.success(localization.auth.passwordResetEmailSent);
-            navigate({ to: `${basePaths.auth}/${viewPaths.auth.signIn}` });
-        }
-    });
-    function handleSubmit(e) {
-        e.preventDefault();
-        const formData = new FormData(e.currentTarget);
-        requestPasswordReset({ email: formData.get("email") });
-    }
-    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.forgotPassword }), _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" })] }), _jsx(Fieldset.Actions, { children: _jsxs(Button, { type: "submit", className: "w-full", isPending: isPending, children: [isPending && _jsx(Spinner, { color: "current", size: "sm" }), localization.auth.sendResetLink] }) }), _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/magic-link-button.d.ts

@@ -1,13 +0,0 @@
-import type { AuthView } from "@better-auth-ui/core";
-export type MagicLinkButtonProps = {
-    isPending: boolean;
-    view?: AuthView;
-};
-/**
- * Renders a full-width tertiary link-style button that navigates to either the magic-link or sign-in route.
- *
- * @param isPending - If true, applies disabled styling and prevents interaction
- * @param view - Current auth view; when `"magicLink"`, the button targets the sign-in/password variant
- * @returns The rendered Link element with the appropriate href, icon, and label
- */
-export declare function MagicLinkButton({ isPending, view }: MagicLinkButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,20 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuth } from "@better-auth-ui/react";
-import { Envelope, Lock } from "@gravity-ui/icons";
-import { Link } from "@heroui/react";
-import { buttonVariants } from "@heroui/styles";
-import { cn } from "../../lib/utils";
-/**
- * Renders a full-width tertiary link-style button that navigates to either the magic-link or sign-in route.
- *
- * @param isPending - If true, applies disabled styling and prevents interaction
- * @param view - Current auth view; when `"magicLink"`, the button targets the sign-in/password variant
- * @returns The rendered Link element with the appropriate href, icon, and label
- */
-export function MagicLinkButton({ isPending, view }) {
-    const { basePaths, viewPaths, localization } = useAuth();
-    const isMagicLinkView = view === "magicLink";
-    return (_jsxs(Link, { href: `${basePaths.auth}/${isMagicLinkView ? viewPaths.auth.signIn : viewPaths.auth.magicLink}`, className: cn(buttonVariants({ variant: "tertiary" }), "w-full gap-2", isPending && "status-disabled pointer-events-none"), children: [isMagicLinkView ? _jsx(Lock, {}) : _jsx(Envelope, {}), localization.auth.continueWith.replace("{{provider}}", isMagicLinkView
-                ? localization.auth.password
-                : localization.auth.magicLink)] }));
-}

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

@@ -1,17 +0,0 @@
-import { type CardProps } from "@heroui/react";
-import { type SocialLayout } from "./provider-buttons";
-export type MagicLinkProps = {
-    className?: string;
-    socialLayout?: SocialLayout;
-    socialPosition?: "top" | "bottom";
-    variant?: CardProps["variant"];
-};
-/**
- * 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 declare function MagicLink({ className, socialLayout, socialPosition, variant, ...props }: MagicLinkProps & CardProps): import("react/jsx-runtime").JSX.Element;

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

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

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

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

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

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

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