@better-auth-ui/heroui 1.6.7 → 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.d.ts

@@ -0,0 +1,5 @@
+export type AddPasskeyDialogProps = {
+    isOpen: boolean;
+    onOpenChange: (open: boolean) => void;
+};
+export declare function AddPasskeyDialog({ isOpen, onOpenChange }: AddPasskeyDialogProps): import("react/jsx-runtime").JSX.Element;

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

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

@@ -0,0 +1,11 @@
+export type ListedPasskey = {
+    id: string;
+    name?: string | null;
+    createdAt: Date;
+};
+export type DeletePasskeyDialogProps = {
+    isOpen: boolean;
+    onOpenChange: (open: boolean) => void;
+    passkey: ListedPasskey;
+};
+export declare function DeletePasskeyDialog({ isOpen, onOpenChange, passkey }: DeletePasskeyDialogProps): import("react/jsx-runtime").JSX.Element;

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

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

@@ -0,0 +1 @@
+export declare function PasskeySkeleton(): import("react/jsx-runtime").JSX.Element;

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

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

@@ -1,8 +1,5 @@
+import { type ListedPasskey } from "./delete-passkey-dialog";
 export type PasskeyProps = {
-    passkey: {
-        id: string;
-        name?: string | null;
-        createdAt: Date;
-    };
+    passkey: ListedPasskey;
 };
 export declare function Passkey({ passkey }: PasskeyProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,45 +1,17 @@
-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, Xmark 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";
-//#region src/components/auth/passkey/passkey.tsx
-function u({ passkey: u }) {
-	let { authClient: d, localization: f } = t(), { localization: p } = n(e), { mutate: m, isPending: h } = r(d), g = u.name || p.passkey;
-	return /* @__PURE__ */ l("div", {
-		className: "flex items-center gap-3",
-		children: [
-			/* @__PURE__ */ c("div", {
-				className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-surface-secondary",
-				children: /* @__PURE__ */ c(i, { className: "size-4.5" })
-			}),
-			/* @__PURE__ */ l("div", {
-				className: "flex flex-col min-w-0",
-				children: [/* @__PURE__ */ c("span", {
-					className: "text-sm font-medium leading-tight",
-					children: g
-				}), /* @__PURE__ */ c("span", {
-					className: "text-xs text-muted",
-					children: new Date(u.createdAt).toLocaleString(void 0, {
-						dateStyle: "medium",
-						timeStyle: "short"
-					})
-				})]
-			}),
-			/* @__PURE__ */ l(o, {
-				className: "ml-auto shrink-0",
-				variant: "outline",
-				size: "sm",
-				isPending: h,
-				onPress: () => m({ id: u.id }),
-				"aria-label": p.deletePasskey.replace("{{name}}", g),
-				children: [h ? /* @__PURE__ */ c(s, {
-					color: "current",
-					size: "sm"
-				}) : /* @__PURE__ */ c(a, {}), f.settings.delete]
-			})
-		]
-	});
+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 })] }));
 }
-//#endregion
-export { u as Passkey };

package/dist/components/auth/passkey/passkeys-empty.d.ts

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

package/dist/components/auth/passkey/passkeys-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 { 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.d.ts

@@ -1,4 +1,4 @@
-import { CardProps } from '@heroui/react';
+import { type CardProps } from "@heroui/react";
 export type PasskeysProps = {
     className?: string;
     variant?: CardProps["variant"];