@better-auth-ui/heroui 1.6.8 → 1.6.9

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

@@ -0,0 +1,60 @@
+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.d.ts

@@ -0,0 +1,4 @@
+export type OrganizationsEmptyProps = {
+    onCreatePress: () => void;
+};
+export declare function OrganizationsEmpty({ onCreatePress }: OrganizationsEmptyProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,9 @@
+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.d.ts

@@ -0,0 +1,17 @@
+import { type CardProps } from "@heroui/react";
+import type { ComponentProps } from "react";
+export type OrganizationsSettingsProps = {
+    className?: string;
+    variant?: CardProps["variant"];
+};
+/**
+ * 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 declare function OrganizationsSettings({ className, variant, ...props }: OrganizationsSettingsProps & ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,17 @@
+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.d.ts

@@ -0,0 +1,10 @@
+import { type CardProps } from "@heroui/react";
+export type OrganizationsProps = {
+    variant?: CardProps["variant"];
+};
+/**
+ * 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 declare function Organizations({ variant }: OrganizationsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,21 @@
+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.d.ts

@@ -0,0 +1,9 @@
+import type { Member, User } from "better-auth/client";
+export type RemoveMemberDialogProps = {
+    isOpen: boolean;
+    onOpenChange: (open: boolean) => void;
+    member: Member & {
+        user: Partial<User>;
+    };
+};
+export declare function RemoveMemberDialog({ isOpen, onOpenChange, member }: RemoveMemberDialogProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,20 @@
+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.d.ts

@@ -0,0 +1,19 @@
+import { type InputProps, type TextFieldProps } from "@heroui/react";
+/** Props for the {@link SlugField} component. */
+export type SlugFieldProps = {
+    value: string;
+    onChange: (value: string) => void;
+    currentSlug?: string;
+    isDisabled?: boolean;
+    variant?: InputProps["variant"];
+};
+/**
+ * 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 declare function sanitizeSlug(value: string): string;
+/**
+ * Organization slug field with debounced availability checking.
+ */
+export declare function SlugField({ value, onChange, currentSlug, variant, ...props }: SlugFieldProps & TextFieldProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,38 @@
+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.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Placeholder row matching {@link UserInvitationRow} while invitations load.
+ */
+export declare function UserInvitationRowSkeleton(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,8 @@
+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.d.ts

@@ -0,0 +1,10 @@
+import type { Invitation } from "better-auth/client";
+export type UserInvitationRowProps = {
+    invitation: Invitation & {
+        organizationName?: string;
+    };
+};
+/**
+ * Single invitation row with accept/reject actions for the current user.
+ */
+export declare function UserInvitationRow({ invitation }: UserInvitationRowProps): import("react/jsx-runtime").JSX.Element;

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

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

@@ -0,0 +1,4 @@
+/**
+ * Empty state for `UserInvitations`
+ */
+export declare function UserInvitationsEmpty(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,12 @@
+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.d.ts

@@ -0,0 +1,10 @@
+import { type CardProps } from "@heroui/react";
+export type UserInvitationsProps = {
+    variant?: CardProps["variant"];
+};
+/**
+ * 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 declare function UserInvitations({ variant }: UserInvitationsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,18 @@
+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,65 +1,22 @@
-import { passkeyPlugin as e } from "../../../lib/auth/passkey-plugin.js";
-import { useAddPasskey as t, useAuth as n, useAuthPlugin as r } from "@better-auth-ui/react";
-import { Fingerprint as i } from "@gravity-ui/icons";
-import { AlertDialog as a, Button as o, FieldError as s, Form as c, Input as l, Label as u, Spinner as d, TextField as f } from "@heroui/react";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
-//#region src/components/auth/passkey/add-passkey-dialog.tsx
-function h({ isOpen: h, onOpenChange: g }) {
-	let { authClient: _, localization: v } = n(), { localization: y } = r(e), { mutate: b, isPending: x } = t(_), S = (e) => {
-		g(e);
-	};
-	return /* @__PURE__ */ p(a.Backdrop, {
-		isOpen: h,
-		onOpenChange: S,
-		children: /* @__PURE__ */ p(a.Container, { children: /* @__PURE__ */ p(a.Dialog, { children: /* @__PURE__ */ m(c, {
-			onSubmit: (e) => {
-				e.preventDefault();
-				let t = new FormData(e.target).get("name")?.trim();
-				b(t ? { name: t } : void 0, { onSuccess: () => S(!1) });
-			},
-			children: [
-				/* @__PURE__ */ p(a.CloseTrigger, {}),
-				/* @__PURE__ */ m(a.Header, { children: [/* @__PURE__ */ p(a.Icon, {
-					status: "default",
-					children: /* @__PURE__ */ p(i, {})
-				}), /* @__PURE__ */ p(a.Heading, { children: y.addPasskey })] }),
-				/* @__PURE__ */ m(a.Body, {
-					className: "overflow-visible",
-					children: [/* @__PURE__ */ p("p", {
-						className: "text-muted text-sm",
-						children: y.passkeysDescription
-					}), /* @__PURE__ */ m(f, {
-						className: "mt-4",
-						id: "name",
-						name: "name",
-						isDisabled: x,
-						children: [
-							/* @__PURE__ */ p(u, { children: y.name }),
-							/* @__PURE__ */ p(l, {
-								autoFocus: !0,
-								placeholder: v.settings.optional,
-								variant: "secondary"
-							}),
-							/* @__PURE__ */ p(s, {})
-						]
-					})]
-				}),
-				/* @__PURE__ */ m(a.Footer, { children: [/* @__PURE__ */ p(o, {
-					slot: "close",
-					variant: "tertiary",
-					isDisabled: x,
-					children: v.settings.cancel
-				}), /* @__PURE__ */ m(o, {
-					type: "submit",
-					isPending: x,
-					children: [x && /* @__PURE__ */ p(d, {
-						color: "current",
-						size: "sm"
-					}), y.addPasskey]
-				})] })
-			]
-		}) }) })
-	});
+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] })] })] }) }) }) }));
 }
-//#endregion
-export { h as AddPasskeyDialog };

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

@@ -1,47 +1,14 @@
-import { passkeyPlugin as e } from "../../../lib/auth/passkey-plugin.js";
-import { useAuth as t, useAuthPlugin as n, useDeletePasskey as r } from "@better-auth-ui/react";
-import { Fingerprint as i } from "@gravity-ui/icons";
-import { AlertDialog as a, Button as o, Input as s, Label as c, Spinner as l, TextField as u } from "@heroui/react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-//#region src/components/auth/passkey/delete-passkey-dialog.tsx
-function p({ isOpen: p, onOpenChange: m, passkey: h }) {
-	let { authClient: g, localization: _ } = t(), { localization: v } = n(e), y = h.name || v.passkey, { mutate: b, isPending: x } = r(g, { onSuccess: () => m(!1) });
-	return /* @__PURE__ */ d(a.Backdrop, {
-		isOpen: p,
-		onOpenChange: m,
-		children: /* @__PURE__ */ d(a.Container, { children: /* @__PURE__ */ f(a.Dialog, { children: [
-			/* @__PURE__ */ d(a.CloseTrigger, {}),
-			/* @__PURE__ */ f(a.Header, { children: [/* @__PURE__ */ d(a.Icon, {
-				status: "danger",
-				children: /* @__PURE__ */ d(i, {})
-			}), /* @__PURE__ */ d(a.Heading, { children: v.deletePasskeyTitle })] }),
-			/* @__PURE__ */ f(a.Body, {
-				className: "flex flex-col gap-4 overflow-visible",
-				children: [/* @__PURE__ */ d("p", {
-					className: "text-muted text-sm",
-					children: v.deletePasskeyWarning
-				}), /* @__PURE__ */ f(u, {
-					value: y,
-					variant: "secondary",
-					children: [/* @__PURE__ */ d(c, { children: h.name || v.passkey }), /* @__PURE__ */ d(s, { readOnly: !0 })]
-				})]
-			}),
-			/* @__PURE__ */ f(a.Footer, { children: [/* @__PURE__ */ d(o, {
-				slot: "close",
-				variant: "tertiary",
-				isDisabled: x,
-				children: _.settings.cancel
-			}), /* @__PURE__ */ f(o, {
-				variant: "danger",
-				onPress: () => b({ id: h.id }),
-				isPending: x,
-				children: [x && /* @__PURE__ */ d(l, {
-					color: "current",
-					size: "sm"
-				}), v.deletePasskeyTitle]
-			})] })
-		] }) })
-	});
+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] })] })] }) }) }));
 }
-//#endregion
-export { p as DeletePasskeyDialog };

package/dist/components/auth/passkey/passkey-button.d.ts

@@ -1,4 +1,4 @@
-import { AuthView } from '@better-auth-ui/core';
+import { type AuthView } from "@better-auth-ui/core";
 export type PasskeyButtonProps = {
     /** @remarks `AuthView` */
     view?: AuthView;

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

@@ -1,24 +1,25 @@
-import { passkeyPlugin as e } from "../../../lib/auth/passkey-plugin.js";
-import { authMutationKeys as t } from "@better-auth-ui/core";
-import { useAuth as n, useAuthPlugin as r, useSignInPasskey as i } from "@better-auth-ui/react";
-import { Fingerprint as a } from "@gravity-ui/icons";
-import { Button as o, Spinner as s } from "@heroui/react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { useIsMutating as u } from "@tanstack/react-query";
-//#region src/components/auth/passkey/passkey-button.tsx
-function d({ view: d }) {
-	let { authClient: f, localization: p, redirectTo: m, navigate: h } = n(), { localization: g } = r(e), { mutate: _, isPending: v } = i(f, { onSuccess: () => h({ to: m }) }), y = u({ mutationKey: t.signIn.all }) + u({ mutationKey: t.signUp.all }) > 0;
-	return d === "signUp" ? null : /* @__PURE__ */ l(o, {
-		className: "w-full",
-		variant: "tertiary",
-		isDisabled: y,
-		isPending: v,
-		onPress: () => _(),
-		children: [v ? /* @__PURE__ */ c(s, {
-			color: "current",
-			size: "sm"
-		}) : /* @__PURE__ */ c(a, {}), p.auth.continueWith.replace("{{provider}}", g.passkey)]
-	});
+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)] }));
 }
-//#endregion
-export { d as PasskeyButton };

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

@@ -1,17 +1,5 @@
-import { Skeleton as e } from "@heroui/react";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-//#region src/components/auth/passkey/passkey-skeleton.tsx
-function r() {
-	return /* @__PURE__ */ t("div", {
-		className: "flex items-center justify-between",
-		children: /* @__PURE__ */ n("div", {
-			className: "flex items-center gap-3",
-			children: [/* @__PURE__ */ t(e, { className: "size-10 rounded-xl" }), /* @__PURE__ */ n("div", {
-				className: "flex flex-col gap-1",
-				children: [/* @__PURE__ */ t(e, { className: "h-4 w-28 rounded-lg" }), /* @__PURE__ */ t(e, { className: "h-3 w-32 rounded-lg" })]
-			})]
-		})
-	});
+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" })] })] }) }));
 }
-//#endregion
-export { r as PasskeySkeleton };

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

@@ -1,4 +1,4 @@
-import { ListedPasskey } from './delete-passkey-dialog';
+import { type ListedPasskey } from "./delete-passkey-dialog";
 export type PasskeyProps = {
     passkey: ListedPasskey;
 };