@better-auth-ui/heroui 1.6.9 → 1.6.10

package/dist/components/auth/organization/organization-view.js

@@ -1,31 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useActiveOrganization, useAuth, useAuthPlugin, useListOrganizationMembers, useSession } from "@better-auth-ui/react";
-import { Chip, cn } from "@heroui/react";
-import { organizationPlugin } from "../../../lib/auth/organization-plugin";
-import { OrganizationLogo } from "./organization-logo";
-import { OrganizationViewSkeleton } from "./organization-view-skeleton";
-/**
- * Compact organization row: logo, primary name, secondary slug — analogous to {@link UserView}.
- */
-export function OrganizationView({ className, isPending, size = "md", hideSlug, hideRole, organization, ...props }) {
-    const { authClient } = useAuth();
-    const { roles } = useAuthPlugin(organizationPlugin);
-    const { data: session } = useSession(authClient);
-    const { data: activeOrganization, isPending: activeOrganizationPending } = useActiveOrganization(authClient, {
-        enabled: !organization && !isPending
-    });
-    const resolvedOrganization = organization ?? activeOrganization;
-    const { data: membersList, isPending: membersPending } = useListOrganizationMembers(authClient, {
-        query: {
-            organizationId: resolvedOrganization?.id
-        },
-        enabled: !!resolvedOrganization?.id && !hideRole
-    });
-    const membership = membersList?.members?.find((member) => member.userId === session?.user.id);
-    if (isPending ||
-        (!organization && activeOrganizationPending) ||
-        (!hideRole && !!resolvedOrganization?.id && membersPending)) {
-        return (_jsx(OrganizationViewSkeleton, { className: className, hideSlug: hideSlug, size: size, ...props }));
-    }
-    return (_jsxs("div", { className: cn("flex min-w-0 items-center gap-2", className), ...props, children: [_jsx(OrganizationLogo, { organization: resolvedOrganization, className: size === "sm" ? "size-5 [&>span]:text-xs" : undefined, size: size === "lg" ? "md" : "sm" }), _jsxs("div", { className: "flex flex-col min-w-0", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx("p", { className: "text-foreground text-sm font-medium truncate leading-tight", children: resolvedOrganization?.name }), !hideRole && !!membership && (_jsx(Chip, { className: "shrink-0 -my-0.5", size: "sm", children: roles?.[membership.role] ?? membership.role }))] }), !hideSlug && (_jsx("p", { className: "text-muted text-xs truncate overflow-x-hidden font-mono leading-tight", children: resolvedOrganization?.slug }))] })] }));
-}

package/dist/components/auth/organization/organization.js

@@ -1,60 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useActiveOrganization, useAuth, useAuthenticate, useAuthPlugin } from "@better-auth-ui/react";
-import { Gear, Person } from "@gravity-ui/icons";
-import { cn, Tabs } from "@heroui/react";
-import { useEffect, useMemo } from "react";
-import { organizationPlugin } from "../../../lib/auth/organization-plugin";
-import { OrganizationPeople } from "./organization-people";
-import { OrganizationSettings } from "./organization-settings";
-/**
- * Organization management shell: tabs for profile / danger zone and for
- * people (members / invitations). Path segments come from
- * `useAuthPlugin(organizationPlugin).viewPaths.organization`.
- */
-export function Organization({ className, hideNav, path, variant, view, ...props }) {
-    if (!view && !path) {
-        throw new Error("[Better Auth UI] Either `view` or `path` must be provided");
-    }
-    const { authClient, basePaths, localization, navigate } = useAuth();
-    useAuthenticate(authClient);
-    const { localization: organizationLocalization, viewPaths: organizationViewPaths, slug } = useAuthPlugin(organizationPlugin);
-    const { data: activeOrganization, isPending } = useActiveOrganization(authClient);
-    useEffect(() => {
-        if (!isPending && !activeOrganization) {
-            navigate({
-                to: `${basePaths.settings}/${organizationViewPaths.settings?.organizations}`,
-                replace: true
-            });
-        }
-    }, [
-        basePaths.settings,
-        isPending,
-        navigate,
-        organizationViewPaths.settings?.organizations,
-        activeOrganization
-    ]);
-    const currentView = useMemo(() => {
-        if (view)
-            return view;
-        const match = Object.entries(organizationViewPaths.organization).find(([, segment]) => segment === path);
-        return match?.[0];
-    }, [view, path, organizationViewPaths.organization]);
-    if (!currentView) {
-        const validPaths = Object.values(organizationViewPaths.organization).join(", ");
-        throw new Error(`[Better Auth UI] Unknown organization path "${path}". Valid paths are: ${validPaths}`);
-    }
-    if (!isPending && !activeOrganization) {
-        return null;
-    }
-    return (_jsxs(Tabs, { className: cn(className), orientation: "horizontal", selectedKey: currentView, ...props, children: [!hideNav && (_jsx(Tabs.ListContainer, { children: _jsxs(Tabs.List, { "aria-label": localization.settings.settings, className: "max-w-fit overflow-x-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden", children: [_jsxs(Tabs.Tab, { id: "settings", href: slug
-                                ? `${basePaths.organization}/${slug}/${organizationViewPaths.organization.settings}`
-                                : `${basePaths.organization}/${organizationViewPaths.organization.settings}`, className: "gap-2", onPress: (e) => e.target.scrollIntoView({
-                                behavior: "smooth",
-                                inline: "center"
-                            }), children: [_jsx(Gear, { className: "text-muted" }), localization.settings.settings, _jsx(Tabs.Indicator, {})] }), _jsxs(Tabs.Tab, { id: "people", href: slug
-                                ? `${basePaths.organization}/${slug}/${organizationViewPaths.organization.people}`
-                                : `${basePaths.organization}/${organizationViewPaths.organization.people}`, className: "gap-2", onPress: (e) => e.target.scrollIntoView({
-                                behavior: "smooth",
-                                inline: "center"
-                            }), children: [_jsx(Person, { className: "text-muted" }), organizationLocalization.people, _jsx(Tabs.Indicator, {})] })] }) })), _jsx(Tabs.Panel, { id: "settings", className: "px-0", children: _jsx(OrganizationSettings, { variant: variant }) }), _jsx(Tabs.Panel, { id: "people", className: "px-0", children: _jsx(OrganizationPeople, {}) })] }));
-}

package/dist/components/auth/organization/organizations-empty.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuthPlugin } from "@better-auth-ui/react";
-import { Briefcase } from "@gravity-ui/icons";
-import { Button, EmptyState } from "@heroui/react";
-import { organizationPlugin } from "../../../lib/auth/organization-plugin";
-export function OrganizationsEmpty({ onCreatePress }) {
-    const { localization: organizationLocalization } = useAuthPlugin(organizationPlugin);
-    return (_jsxs(EmptyState, { className: "flex flex-col items-center gap-4 text-center", children: [_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-surface-secondary", children: _jsx(Briefcase, { className: "size-5" }) }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("p", { className: "text-sm font-semibold text-foreground", children: organizationLocalization.noOrganizations }), _jsx("span", { className: "text-sm text-muted", children: organizationLocalization.organizationsDescription })] }), _jsx(Button, { size: "sm", onPress: onCreatePress, children: organizationLocalization.createOrganization })] }));
-}

package/dist/components/auth/organization/organizations-settings.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "@heroui/react";
-import { Organizations } from "./organizations";
-import { UserInvitations } from "./user-invitations";
-/**
- * Renders the organizations settings panel.
- *
- * Displays all organizations the user belongs to with an empty state and
- * create button, followed by a card for invitations to the user.
- *
- * @param className - Optional additional CSS class names for the outer container.
- * @param variant - Card variant forwarded to each card.
- * @returns The organizations settings UI as a JSX element.
- */
-export function OrganizationsSettings({ className, variant, ...props }) {
-    return (_jsxs("div", { className: cn("flex w-full flex-col gap-4 md:gap-6", className), ...props, children: [_jsx(Organizations, { variant: variant }), _jsx(UserInvitations, { variant: variant })] }));
-}

package/dist/components/auth/organization/organizations.js

@@ -1,21 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useAuth, useAuthPlugin, useListOrganizations } from "@better-auth-ui/react";
-import { Button, Card } from "@heroui/react";
-import { useState } from "react";
-import { organizationPlugin } from "../../../lib/auth/organization-plugin";
-import { CreateOrganizationDialog } from "./create-organization-dialog";
-import { OrganizationRow } from "./organization-row";
-import { OrganizationViewSkeleton } from "./organization-view-skeleton";
-import { OrganizationsEmpty } from "./organizations-empty";
-/**
- * Lists organizations the user belongs to (via {@link useListOrganizations}): loading skeleton,
- * empty state with create, or a card of rows with a Manage control per organization.
- * Owns {@link CreateOrganizationDialog} open state and the create actions.
- */
-export function Organizations({ variant }) {
-    const { authClient } = useAuth();
-    const { localization: organizationLocalization } = useAuthPlugin(organizationPlugin);
-    const [createOpen, setCreateOpen] = useState(false);
-    const { data: organizations, isPending: organizationsPending } = useListOrganizations(authClient);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-end justify-between gap-3", children: [_jsx("h2", { className: "truncate text-sm font-semibold", children: organizationLocalization.organizations }), _jsx(Button, { className: "shrink-0", size: "sm", isDisabled: organizationsPending, onPress: () => setCreateOpen(true), children: organizationLocalization.createOrganization })] }), _jsx(Card, { variant: variant, children: _jsx(Card.Content, { className: "gap-0", children: organizationsPending ? (_jsx(OrganizationViewSkeleton, {})) : !organizations?.length ? (_jsx(OrganizationsEmpty, { onCreatePress: () => setCreateOpen(true) })) : (organizations.map((organization, index) => (_jsxs("div", { children: [index > 0 && (_jsx("div", { className: "-mx-4 my-4 border-b border-dashed" })), _jsx(OrganizationRow, { organization: organization })] }, organization.id)))) }) })] }), _jsx(CreateOrganizationDialog, { isOpen: createOpen, onOpenChange: setCreateOpen })] }));
-}

package/dist/components/auth/organization/remove-member-dialog.js

@@ -1,20 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuth, useAuthPlugin, useRemoveMember } from "@better-auth-ui/react";
-import { TrashBin } from "@gravity-ui/icons";
-import { AlertDialog, Button, Card, Chip, Spinner, toast } from "@heroui/react";
-import { organizationPlugin } from "../../../lib/auth/organization-plugin";
-import { UserView } from "../user/user-view";
-export function RemoveMemberDialog({ isOpen, onOpenChange, member }) {
-    const { authClient, localization } = useAuth();
-    const { localization: organizationLocalization, roles } = useAuthPlugin(organizationPlugin);
-    const { mutate: removeMember, isPending } = useRemoveMember(authClient, {
-        onSuccess: () => {
-            onOpenChange(false);
-            toast.success(organizationLocalization.memberRemoved);
-        }
-    });
-    return (_jsx(AlertDialog.Backdrop, { isOpen: isOpen, onOpenChange: onOpenChange, children: _jsx(AlertDialog.Container, { children: _jsxs(AlertDialog.Dialog, { children: [_jsx(AlertDialog.CloseTrigger, {}), _jsxs(AlertDialog.Header, { children: [_jsx(AlertDialog.Icon, { status: "danger", children: _jsx(TrashBin, {}) }), _jsx(AlertDialog.Heading, { children: organizationLocalization.removeMember })] }), _jsxs(AlertDialog.Body, { className: "flex flex-col gap-4 overflow-visible", children: [_jsx("p", { className: "text-muted text-sm", children: organizationLocalization.removeMemberWarning }), _jsx(Card, { variant: "secondary", children: _jsxs(Card.Content, { className: "justify-between flex-row items-center gap-2", children: [_jsx(UserView, { user: member.user }), _jsx(Chip, { size: "sm", variant: "tertiary", children: _jsx(Chip.Label, { children: roles?.[member.role] ?? member.role }) })] }) })] }), _jsxs(AlertDialog.Footer, { children: [_jsx(Button, { slot: "close", variant: "tertiary", isDisabled: isPending, children: localization.settings.cancel }), _jsxs(Button, { variant: "danger", isPending: isPending, onPress: () => removeMember({
-                                    memberIdOrEmail: member.id,
-                                    organizationId: member.organizationId
-                                }), children: [isPending && _jsx(Spinner, { color: "current", size: "sm" }), organizationLocalization.removeMember] })] })] }) }) }));
-}

package/dist/components/auth/organization/slug-field.js

@@ -1,38 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuth, useAuthPlugin, useCheckSlug } from "@better-auth-ui/react";
-import { Check, Xmark } from "@gravity-ui/icons";
-import { FieldError, InputGroup, Label, Spinner, TextField } from "@heroui/react";
-import { useDebouncer } from "@tanstack/react-pacer";
-import { useEffect } from "react";
-import { organizationPlugin } from "../../../lib/auth/organization-plugin";
-/**
- * Sanitize a slug value so it only contains lowercase alphanumeric characters
- * and dashes. Runs of disallowed characters are collapsed to a single dash, but
- * leading/trailing dashes are preserved while the user is still typing.
- */
-export function sanitizeSlug(value) {
-    return value.toLowerCase().replace(/[^a-z0-9]+/g, "-");
-}
-/**
- * Organization slug field with debounced availability checking.
- */
-export function SlugField({ value, onChange, currentSlug, variant, ...props }) {
-    const { authClient } = useAuth();
-    const { localization, checkSlug: checkSlugEnabled } = useAuthPlugin(organizationPlugin);
-    const { mutate: checkSlug, data: checkSlugData, error: checkSlugError, reset: resetCheckSlug } = useCheckSlug(authClient);
-    const debouncer = useDebouncer((value) => {
-        if (!checkSlugEnabled || !value.trim() || value.trim() === currentSlug)
-            return;
-        checkSlug({ slug: value.trim() });
-    }, { wait: 500 });
-    useEffect(() => {
-        if (!checkSlugEnabled)
-            return;
-        resetCheckSlug();
-        debouncer.maybeExecute(value);
-    }, [checkSlugEnabled, value, debouncer.maybeExecute, resetCheckSlug]);
-    const handleChange = (next) => {
-        onChange(sanitizeSlug(next));
-    };
-    return (_jsxs(TextField, { id: "slug", name: "slug", ...props, value: value, onChange: handleChange, children: [_jsx(Label, { children: localization.slug }), _jsxs(InputGroup, { variant: variant, children: [_jsx(InputGroup.Input, { placeholder: localization.slugPlaceholder, required: true }), checkSlugEnabled && !!value.trim() && value.trim() !== currentSlug && (_jsx(InputGroup.Suffix, { className: "px-2", children: checkSlugData?.status ? (_jsx(Check, { className: "text-success" })) : checkSlugError ? (_jsx(Xmark, { className: "text-danger" })) : (_jsx(Spinner, { size: "sm", color: "current" })) }))] }), _jsx(FieldError, {})] }));
-}

package/dist/components/auth/organization/user-invitation-row-skeleton.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Skeleton } from "@heroui/react";
-/**
- * Placeholder row matching {@link UserInvitationRow} while invitations load.
- */
-export function UserInvitationRowSkeleton() {
-    return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Skeleton, { className: "size-10 shrink-0 rounded-xl" }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Skeleton, { className: "h-4 w-40 rounded-lg" }), _jsx(Skeleton, { className: "h-3 w-28 rounded-lg" })] })] }));
-}

package/dist/components/auth/organization/user-invitation-row.js

@@ -1,22 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAcceptInvitation, useAuth, useAuthPlugin, useRejectInvitation } from "@better-auth-ui/react";
-import { Check, Clock, Xmark } from "@gravity-ui/icons";
-import { Button, Chip, Spinner } from "@heroui/react";
-import { organizationPlugin } from "../../../lib/auth/organization-plugin";
-/**
- * Single invitation row with accept/reject actions for the current user.
- */
-export function UserInvitationRow({ invitation }) {
-    const { authClient } = useAuth();
-    const { localization: organizationLocalization, roles } = useAuthPlugin(organizationPlugin);
-    const { mutate: acceptInvitation, isPending: isAccepting } = useAcceptInvitation(authClient);
-    const { mutate: rejectInvitation, isPending: isRejecting } = useRejectInvitation(authClient);
-    return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-surface-secondary", children: _jsx(Clock, { className: "size-4.5" }) }), _jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "truncate text-sm font-medium leading-tight", children: invitation.organizationName }), _jsx(Chip, { size: "sm", children: roles?.[invitation.role] ?? invitation.role })] }), _jsx("span", { className: "truncate text-muted text-xs", children: new Date(invitation.createdAt).toLocaleString(undefined, {
-                            dateStyle: "medium",
-                            timeStyle: "short"
-                        }) })] }), _jsxs("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: [_jsxs(Button, { variant: "outline", size: "sm", isPending: isAccepting, isDisabled: isRejecting, onPress: () => acceptInvitation({
-                            invitationId: invitation.id
-                        }), children: [isAccepting ? _jsx(Spinner, { color: "current", size: "sm" }) : _jsx(Check, {}), organizationLocalization.accept] }), _jsx(Button, { variant: "danger-soft", size: "sm", isIconOnly: true, isPending: isRejecting, isDisabled: isAccepting, onPress: () => rejectInvitation({
-                            invitationId: invitation.id
-                        }), "aria-label": organizationLocalization.rejectInvitation, children: isRejecting ? _jsx(Spinner, { color: "current", size: "sm" }) : _jsx(Xmark, {}) })] })] }));
-}

package/dist/components/auth/organization/user-invitations-empty.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuthPlugin } from "@better-auth-ui/react";
-import { PaperPlane } from "@gravity-ui/icons";
-import { EmptyState } from "@heroui/react";
-import { organizationPlugin } from "../../../lib/auth/organization-plugin";
-/**
- * Empty state for `UserInvitations`
- */
-export function UserInvitationsEmpty() {
-    const { localization: organizationLocalization } = useAuthPlugin(organizationPlugin);
-    return (_jsxs(EmptyState, { className: "flex flex-col items-center gap-4 text-center", children: [_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-surface-secondary", children: _jsx(PaperPlane, { className: "size-5" }) }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("p", { className: "text-sm font-semibold text-foreground", children: organizationLocalization.noInvitations }), _jsx("span", { className: "text-sm text-muted", children: organizationLocalization.userInvitationsEmptyDescription })] })] }));
-}

package/dist/components/auth/organization/user-invitations.js

@@ -1,18 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuth, useAuthPlugin, useListUserInvitations } from "@better-auth-ui/react";
-import { Card } from "@heroui/react";
-import { organizationPlugin } from "../../../lib/auth/organization-plugin";
-import { UserInvitationRow } from "./user-invitation-row";
-import { UserInvitationRowSkeleton } from "./user-invitation-row-skeleton";
-import { UserInvitationsEmpty } from "./user-invitations-empty";
-/**
- * Organization invitations for the signed-in user (from
- * {@link useListUserInvitations}). Always renders the section card; uses
- * {@link UserInvitationsEmpty} when there are no pending invitations.
- */
-export function UserInvitations({ variant }) {
-    const { authClient } = useAuth();
-    const { localization: organizationLocalization } = useAuthPlugin(organizationPlugin);
-    const { data: invitations, isPending } = useListUserInvitations(authClient);
-    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("h2", { className: "truncate text-sm font-semibold", children: organizationLocalization.invitations }), _jsx(Card, { variant: variant, children: _jsx(Card.Content, { children: isPending ? (_jsx(UserInvitationRowSkeleton, {})) : !invitations?.length ? (_jsx(UserInvitationsEmpty, {})) : (invitations?.map((invitation, index) => (_jsxs("div", { children: [index > 0 && (_jsx("div", { className: "border-b border-dashed -mx-4 my-4" })), _jsx(UserInvitationRow, { invitation: invitation })] }, invitation.id)))) }) })] }));
-}

package/dist/components/auth/passkey/add-passkey-dialog.js

@@ -1,22 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAddPasskey, useAuth, useAuthPlugin } from "@better-auth-ui/react";
-import { Fingerprint } from "@gravity-ui/icons";
-import { AlertDialog, Button, FieldError, Form, Input, Label, Spinner, TextField } from "@heroui/react";
-import { passkeyPlugin } from "../../../lib/auth/passkey-plugin";
-export function AddPasskeyDialog({ isOpen, onOpenChange }) {
-    const { authClient, localization } = useAuth();
-    const { localization: passkeyLocalization } = useAuthPlugin(passkeyPlugin);
-    const { mutate: addPasskey, isPending: isAdding } = useAddPasskey(authClient);
-    const handleOpenChange = (open) => {
-        onOpenChange(open);
-    };
-    const handleSubmit = (e) => {
-        e.preventDefault();
-        const formData = new FormData(e.target);
-        const name = formData.get("name")?.trim();
-        addPasskey(name ? { name } : undefined, {
-            onSuccess: () => handleOpenChange(false)
-        });
-    };
-    return (_jsx(AlertDialog.Backdrop, { isOpen: isOpen, onOpenChange: handleOpenChange, children: _jsx(AlertDialog.Container, { children: _jsx(AlertDialog.Dialog, { children: _jsxs(Form, { onSubmit: handleSubmit, children: [_jsx(AlertDialog.CloseTrigger, {}), _jsxs(AlertDialog.Header, { children: [_jsx(AlertDialog.Icon, { status: "default", children: _jsx(Fingerprint, {}) }), _jsx(AlertDialog.Heading, { children: passkeyLocalization.addPasskey })] }), _jsxs(AlertDialog.Body, { className: "overflow-visible", children: [_jsx("p", { className: "text-muted text-sm", children: passkeyLocalization.passkeysDescription }), _jsxs(TextField, { className: "mt-4", id: "name", name: "name", isDisabled: isAdding, children: [_jsx(Label, { children: passkeyLocalization.name }), _jsx(Input, { autoFocus: true, placeholder: localization.settings.optional, variant: "secondary" }), _jsx(FieldError, {})] })] }), _jsxs(AlertDialog.Footer, { children: [_jsx(Button, { slot: "close", variant: "tertiary", isDisabled: isAdding, children: localization.settings.cancel }), _jsxs(Button, { type: "submit", isPending: isAdding, children: [isAdding && _jsx(Spinner, { color: "current", size: "sm" }), passkeyLocalization.addPasskey] })] })] }) }) }) }));
-}

package/dist/components/auth/passkey/delete-passkey-dialog.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuth, useAuthPlugin, useDeletePasskey } from "@better-auth-ui/react";
-import { Fingerprint } from "@gravity-ui/icons";
-import { AlertDialog, Button, Input, Label, Spinner, TextField } from "@heroui/react";
-import { passkeyPlugin } from "../../../lib/auth/passkey-plugin";
-export function DeletePasskeyDialog({ isOpen, onOpenChange, passkey }) {
-    const { authClient, localization } = useAuth();
-    const { localization: passkeyLocalization } = useAuthPlugin(passkeyPlugin);
-    const passkeyName = passkey.name || passkeyLocalization.passkey;
-    const { mutate: deletePasskey, isPending: isDeleting } = useDeletePasskey(authClient, {
-        onSuccess: () => onOpenChange(false)
-    });
-    return (_jsx(AlertDialog.Backdrop, { isOpen: isOpen, onOpenChange: onOpenChange, children: _jsx(AlertDialog.Container, { children: _jsxs(AlertDialog.Dialog, { children: [_jsx(AlertDialog.CloseTrigger, {}), _jsxs(AlertDialog.Header, { children: [_jsx(AlertDialog.Icon, { status: "danger", children: _jsx(Fingerprint, {}) }), _jsx(AlertDialog.Heading, { children: passkeyLocalization.deletePasskeyTitle })] }), _jsxs(AlertDialog.Body, { className: "flex flex-col gap-4 overflow-visible", children: [_jsx("p", { className: "text-muted text-sm", children: passkeyLocalization.deletePasskeyWarning }), _jsxs(TextField, { value: passkeyName, variant: "secondary", children: [_jsx(Label, { children: passkey.name || passkeyLocalization.passkey }), _jsx(Input, { readOnly: true })] })] }), _jsxs(AlertDialog.Footer, { children: [_jsx(Button, { slot: "close", variant: "tertiary", isDisabled: isDeleting, children: localization.settings.cancel }), _jsxs(Button, { variant: "danger", onPress: () => deletePasskey({ id: passkey.id }), isPending: isDeleting, children: [isDeleting && _jsx(Spinner, { color: "current", size: "sm" }), passkeyLocalization.deletePasskeyTitle] })] })] }) }) }));
-}

package/dist/components/auth/passkey/passkey-button.js

@@ -1,25 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { authMutationKeys } from "@better-auth-ui/core";
-import { useAuth, useAuthPlugin, useSignInPasskey } from "@better-auth-ui/react";
-import { Fingerprint } from "@gravity-ui/icons";
-import { Button, Spinner } from "@heroui/react";
-import { useIsMutating } from "@tanstack/react-query";
-import { passkeyPlugin } from "../../../lib/auth/passkey-plugin";
-export function PasskeyButton({ view }) {
-    const { authClient, localization, redirectTo, navigate } = useAuth();
-    const { localization: passkeyLocalization } = useAuthPlugin(passkeyPlugin);
-    const { mutate: signInPasskey, isPending: passkeyPending } = useSignInPasskey(authClient, {
-        onSuccess: () => navigate({ to: redirectTo })
-    });
-    const signInMutating = useIsMutating({
-        mutationKey: authMutationKeys.signIn.all
-    });
-    const signUpMutating = useIsMutating({
-        mutationKey: authMutationKeys.signUp.all
-    });
-    const isPending = signInMutating + signUpMutating > 0;
-    // Passkey sign-in isn't relevant on the sign-up flow.
-    if (view === "signUp")
-        return null;
-    return (_jsxs(Button, { className: "w-full", variant: "tertiary", isDisabled: isPending, isPending: passkeyPending, onPress: () => signInPasskey(), children: [passkeyPending ? _jsx(Spinner, { color: "current", size: "sm" }) : _jsx(Fingerprint, {}), localization.auth.continueWith.replace("{{provider}}", passkeyLocalization.passkey)] }));
-}

package/dist/components/auth/passkey/passkey-skeleton.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Skeleton } from "@heroui/react";
-export function PasskeySkeleton() {
-    return (_jsx("div", { className: "flex items-center justify-between", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Skeleton, { className: "size-10 rounded-xl" }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Skeleton, { className: "h-4 w-28 rounded-lg" }), _jsx(Skeleton, { className: "h-3 w-32 rounded-lg" })] })] }) }));
-}

package/dist/components/auth/passkey/passkey.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuth, useAuthPlugin } from "@better-auth-ui/react";
-import { Fingerprint, Xmark } from "@gravity-ui/icons";
-import { Button } from "@heroui/react";
-import { useState } from "react";
-import { passkeyPlugin } from "../../../lib/auth/passkey-plugin";
-import { DeletePasskeyDialog } from "./delete-passkey-dialog";
-export function Passkey({ passkey }) {
-    const { localization } = useAuth();
-    const { localization: passkeyLocalization } = useAuthPlugin(passkeyPlugin);
-    const [deleteOpen, setDeleteOpen] = useState(false);
-    const passkeyName = passkey.name || passkeyLocalization.passkey;
-    return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-surface-secondary", children: _jsx(Fingerprint, { className: "size-4.5" }) }), _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate text-sm font-medium leading-tight", children: passkeyName }), _jsx("span", { className: "text-xs text-muted", children: new Date(passkey.createdAt).toLocaleString(undefined, {
-                            dateStyle: "medium",
-                            timeStyle: "short"
-                        }) })] }), _jsxs(Button, { className: "ml-auto shrink-0", variant: "outline", size: "sm", onPress: () => setDeleteOpen(true), "aria-label": passkeyLocalization.deletePasskey.replace("{{name}}", passkeyName), children: [_jsx(Xmark, {}), localization.settings.delete] }), _jsx(DeletePasskeyDialog, { isOpen: deleteOpen, onOpenChange: setDeleteOpen, passkey: passkey })] }));
-}

package/dist/components/auth/passkey/passkeys-empty.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuthPlugin } from "@better-auth-ui/react";
-import { Fingerprint } from "@gravity-ui/icons";
-import { Button } from "@heroui/react";
-import { passkeyPlugin } from "../../../lib/auth/passkey-plugin";
-export function PasskeysEmpty({ onAddPress }) {
-    const { localization: passkeyLocalization } = useAuthPlugin(passkeyPlugin);
-    return (_jsxs("div", { className: "flex flex-col items-center justify-center gap-4", children: [_jsx("div", { className: "flex size-10 items-center justify-center rounded-xl bg-surface-secondary", children: _jsx(Fingerprint, { className: "size-4.5" }) }), _jsxs("div", { className: "flex flex-col items-center justify-center gap-1 text-center", children: [_jsx("p", { className: "text-sm font-semibold", children: passkeyLocalization.noPasskeys }), _jsx("p", { className: "text-muted text-xs", children: passkeyLocalization.passkeysDescription })] }), _jsx(Button, { size: "sm", onPress: onAddPress, children: passkeyLocalization.addPasskey })] }));
-}

package/dist/components/auth/passkey/passkeys.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuth, useAuthPlugin, useListPasskeys } from "@better-auth-ui/react";
-import { Button, Card, cn } from "@heroui/react";
-import { useState } from "react";
-import { passkeyPlugin } from "../../../lib/auth/passkey-plugin";
-import { AddPasskeyDialog } from "./add-passkey-dialog";
-import { Passkey } from "./passkey";
-import { PasskeySkeleton } from "./passkey-skeleton";
-import { PasskeysEmpty } from "./passkeys-empty";
-export function Passkeys({ className, variant, ...props }) {
-    const { authClient } = useAuth();
-    const { localization: passkeyLocalization } = useAuthPlugin(passkeyPlugin);
-    const { data: passkeys, isPending } = useListPasskeys(authClient);
-    const [addOpen, setAddOpen] = useState(false);
-    return (_jsxs("div", { className: cn("flex flex-col gap-3", className), children: [_jsxs("div", { className: "flex items-end justify-between gap-3", children: [_jsx("h2", { className: "text-sm font-semibold truncate", children: passkeyLocalization.passkeys }), _jsx(Button, { className: "shrink-0", size: "sm", isDisabled: isPending, onPress: () => setAddOpen(true), children: passkeyLocalization.addPasskey })] }), _jsx(Card, { variant: variant, ...props, children: _jsx(Card.Content, { children: isPending ? (_jsx(PasskeySkeleton, {})) : !passkeys?.length ? (_jsx(PasskeysEmpty, { onAddPress: () => setAddOpen(true) })) : (passkeys.map((passkey, index) => (_jsxs("div", { children: [index > 0 && (_jsx("div", { className: "border-b border-dashed -mx-4 my-4" })), _jsx(Passkey, { passkey: passkey })] }, passkey.id)))) }) }), _jsx(AddPasskeyDialog, { isOpen: addOpen, onOpenChange: setAddOpen })] }));
-}

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

@@ -1,29 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { authMutationKeys, getProviderName } from "@better-auth-ui/core";
-import { providerIcons, useAuth, useSignInSocial } from "@better-auth-ui/react";
-import { Button, Spinner } from "@heroui/react";
-import { useIsMutating } from "@tanstack/react-query";
-/**
- * Social provider sign-in button.
- *
- * @param provider - Provider to sign in with.
- * @param display - `"full"` (e.g. "Continue with Google"), `"name"` (just the provider name), or `"icon"` (icon only).
- */
-export function ProviderButton({ provider, display = "full", variant = "tertiary", ...props }) {
-    const { authClient, baseURL, localization, redirectTo } = useAuth();
-    const callbackURL = `${baseURL}${redirectTo}`;
-    const { mutate: signInSocial, isPending: signInSocialPending } = useSignInSocial(authClient);
-    const ProviderIcon = providerIcons[provider];
-    const signInMutating = useIsMutating({
-        mutationKey: authMutationKeys.signIn.all
-    });
-    const signUpMutating = useIsMutating({
-        mutationKey: authMutationKeys.signUp.all
-    });
-    const isPending = signInMutating + signUpMutating > 0;
-    return (_jsxs(Button, { variant: variant, isPending: isPending, onPress: () => signInSocial({ provider, callbackURL }), ...props, "aria-label": getProviderName(provider), children: [signInSocialPending ? (_jsx(Spinner, { color: "current", size: "sm" })) : (_jsx(ProviderIcon, {})), display === "full"
-                ? localization.auth.continueWith.replace("{{provider}}", getProviderName(provider))
-                : display === "name"
-                    ? getProviderName(provider)
-                    : null] }));
-}

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

@@ -1,29 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useAuth } from "@better-auth-ui/react";
-import { cn } from "@heroui/react";
-import { useMemo } from "react";
-import { ProviderButton } from "./provider-button";
-/**
- * Render social provider sign-in buttons. Each button owns its own sign-in
- * mutation and reads shared auth pending state from React Query.
- *
- * @param socialLayout - Preferred layout for the buttons; `"auto"` picks `"horizontal"` when there are four or more providers, otherwise `"vertical"`.
- * @returns The JSX element that renders the configured social provider buttons.
- */
-export function ProviderButtons({ socialLayout = "auto" }) {
-    const { socialProviders } = useAuth();
-    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) => (_jsx(ProviderButton, { provider: provider, display: resolvedSocialLayout === "vertical"
-                ? "full"
-                : resolvedSocialLayout === "grid"
-                    ? "name"
-                    : "icon", className: cn("w-full", resolvedSocialLayout === "horizontal" && "flex-1") }, provider))) }));
-}

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

@@ -1,57 +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, cn, Description, FieldError, Form, InputGroup, Label, Link, Spinner, TextField, toast } from "@heroui/react";
-import { useEffect, useState } from "react";
-/**
- * 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 { authClient, basePaths, emailAndPassword, localization, viewPaths, navigate } = useAuth();
-    const { mutate: resetPassword, isPending } = useResetPassword(authClient, {
-        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 (_jsxs(Card, { className: cn("w-full max-w-sm gap-4 md:p-6", className), variant: variant, ...props, children: [_jsx(Card.Header, { children: _jsx(Card.Title, { className: "text-xl font-semibold mb-1", children: localization.auth.resetPassword }) }), _jsx(Card.Content, { className: "gap-4", children: _jsxs(Form, { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_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, {})] }), 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, {})] })), _jsx("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.resetPassword] }) })] }) }), _jsx(Card.Footer, { className: "flex-col gap-3", children: _jsxs(Description, { className: "text-sm", children: [localization.auth.rememberYourPassword, " ", _jsx(Link, { href: `${basePaths.auth}/${viewPaths.auth.signIn}`, className: "text-accent no-underline hover:underline decoration-accent-hover", children: localization.auth.signIn })] }) })] }));
-}

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

@@ -1,22 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuth } from "@better-auth-ui/react";
-import { cn } from "@heroui/react";
-import { ChangeEmail } from "./change-email";
-import { UserProfile } from "./user-profile";
-/**
- * Renders the account settings layout.
- *
- * `UserProfile` always renders. `ChangeEmail` renders when password auth is
- * enabled or the `magicLink` plugin is registered. Plugin-contributed account
- * cards (e.g. `Appearance` from the theme plugin, multi-session accounts) are
- * rendered via the plugins array.
- *
- * @param className - Optional additional CSS class names for the outer container.
- * @param variant - Card variant forwarded to each account settings card.
- * @returns The account settings container as a JSX element.
- */
-export function AccountSettings({ className, variant, ...props }) {
-    const { emailAndPassword, plugins } = useAuth();
-    const hasMagicLink = plugins.some((plugin) => plugin.id === "magicLink");
-    return (_jsxs("div", { className: cn("flex w-full flex-col gap-4 md:gap-6", className), ...props, children: [_jsx(UserProfile, { variant: variant }), (emailAndPassword?.enabled || hasMagicLink) && (_jsx(ChangeEmail, { variant: variant })), plugins.flatMap((plugin) => plugin.accountCards?.map((Card, index) => (_jsx(Card, { variant: variant }, `${plugin.id}-${index.toString()}`))))] }));
-}

package/dist/components/auth/settings/account/change-avatar.js

@@ -1,54 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { fileToBase64 } from "@better-auth-ui/core";
-import { useAuth, useSession, useUpdateUser } from "@better-auth-ui/react";
-import { CloudArrowUpIn, TrashBin } from "@gravity-ui/icons";
-import { Button, cn, Dropdown, Label, Spinner, toast } from "@heroui/react";
-import { useRef, useState } from "react";
-import { UserAvatar } from "../../user/user-avatar";
-export function ChangeAvatar({ className }) {
-    const { authClient, localization, avatar } = useAuth();
-    const { data: session } = useSession(authClient);
-    const { mutate: updateUser, isPending: updatePending } = useUpdateUser(authClient);
-    const fileInputRef = useRef(null);
-    const [isUploading, setIsUploading] = useState(false);
-    const [isDeleting, setIsDeleting] = useState(false);
-    const isPending = updatePending || isUploading || isDeleting;
-    async function handleFileChange(e) {
-        const file = e.target.files?.[0];
-        if (!file)
-            return;
-        e.target.value = "";
-        setIsUploading(true);
-        try {
-            const resized = (await avatar.resize?.(file, avatar.size, avatar.extension)) || file;
-            const image = (await avatar.upload?.(resized)) || (await fileToBase64(resized));
-            updateUser({ image }, {
-                onSuccess: () => toast.success(localization.settings.avatarChangedSuccess)
-            });
-        }
-        catch (error) {
-            if (error instanceof Error) {
-                toast.danger(error.message);
-            }
-        }
-        setIsUploading(false);
-    }
-    async function handleDelete() {
-        const currentImage = session?.user.image;
-        updateUser({ image: null }, {
-            onSuccess: async () => {
-                if (currentImage) {
-                    setIsDeleting(true);
-                    try {
-                        await avatar.delete?.(currentImage);
-                    }
-                    finally {
-                        setIsDeleting(false);
-                    }
-                }
-                toast.success(localization.settings.avatarDeletedSuccess);
-            }
-        });
-    }
-    return (_jsxs("div", { className: cn("flex flex-col gap-1", className), children: [_jsx(Label, { isDisabled: !session, children: localization.settings.avatar }), _jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", className: "hidden", onChange: handleFileChange }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Button, { type: "button", isIconOnly: true, variant: "ghost", className: "p-0 h-auto w-auto rounded-full", isDisabled: !session || isPending, onPress: () => fileInputRef.current?.click(), children: _jsx(UserAvatar, { size: "lg", isPending: isPending }) }), _jsxs(Dropdown, { children: [_jsxs(Button, { isDisabled: !session || isPending, size: "sm", variant: "secondary", children: [isPending && _jsx(Spinner, { size: "sm" }), localization.settings.changeAvatar] }), _jsx(Dropdown.Popover, { className: "min-w-fit", children: _jsxs(Dropdown.Menu, { children: [_jsxs(Dropdown.Item, { textValue: localization.settings.uploadAvatar, onAction: () => fileInputRef.current?.click(), children: [_jsx(CloudArrowUpIn, { className: "text-muted" }), _jsx(Label, { children: localization.settings.uploadAvatar })] }), _jsxs(Dropdown.Item, { textValue: localization.settings.deleteAvatar, isDisabled: !session?.user.image, onAction: handleDelete, variant: "danger", children: [_jsx(TrashBin, { className: "text-danger" }), _jsx(Label, { children: localization.settings.deleteAvatar })] })] }) })] })] })] }));
-}