@better-auth-ui/heroui 1.6.8 → 1.6.9

package/dist/components/auth/multi-session/switch-account-submenu-item.d.ts

@@ -1,10 +1,11 @@
-import { Session, User } from 'better-auth';
+import type { Session, User } from "better-auth";
 type DeviceSession = {
     session: Session;
     user: User;
 };
 export type SwitchAccountSubmenuItemProps = {
     deviceSession: DeviceSession;
+    hideSubtitle?: boolean;
 };
 /**
  * Render a dropdown item for switching to a different authenticated session.
@@ -12,5 +13,5 @@ export type SwitchAccountSubmenuItemProps = {
  * @param deviceSession - The device session to display and switch to when pressed
  * @returns The switch account dropdown item as a JSX element
  */
-export declare function SwitchAccountSubmenuItem({ deviceSession }: SwitchAccountSubmenuItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function SwitchAccountSubmenuItem({ deviceSession, hideSubtitle }: SwitchAccountSubmenuItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/auth/multi-session/switch-account-submenu-item.js

@@ -1,20 +1,17 @@
-import { UserView as e } from "../user/user-view.js";
-import { useAuth as t, useSetActiveSession as n } from "@better-auth-ui/react";
-import { Dropdown as r, Spinner as i } from "@heroui/react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-//#region src/components/auth/multi-session/switch-account-submenu-item.tsx
-function s({ deviceSession: s }) {
-	let { authClient: c } = t(), { mutate: l, isPending: u } = n(c, { onSuccess: () => window.scrollTo({ top: 0 }) });
-	return /* @__PURE__ */ o(r.Item, {
-		className: "px-2",
-		isDisabled: u,
-		onPress: () => l({ sessionToken: s.session.token }),
-		children: [/* @__PURE__ */ a(e, { user: s.user }), u && /* @__PURE__ */ a(i, {
-			color: "current",
-			size: "sm",
-			className: "ml-auto"
-		})]
-	});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useSetActiveSession } from "@better-auth-ui/react";
+import { Dropdown, Spinner } from "@heroui/react";
+import { UserView } from "../user/user-view";
+/**
+ * Render a dropdown item for switching to a different authenticated session.
+ *
+ * @param deviceSession - The device session to display and switch to when pressed
+ * @returns The switch account dropdown item as a JSX element
+ */
+export function SwitchAccountSubmenuItem({ deviceSession, hideSubtitle }) {
+    const { authClient } = useAuth();
+    const { mutate: setActiveSession, isPending } = useSetActiveSession(authClient, {
+        onSuccess: () => window.scrollTo({ top: 0 })
+    });
+    return (_jsxs(Dropdown.Item, { className: "px-2", isDisabled: isPending, onPress: () => setActiveSession({ sessionToken: deviceSession.session.token }), children: [_jsx(UserView, { user: deviceSession.user, hideSubtitle: hideSubtitle }), isPending && _jsx(Spinner, { color: "current", size: "sm", className: "ml-auto" })] }));
 }
-//#endregion
-export { s as SwitchAccountSubmenuItem };

package/dist/components/auth/multi-session/switch-account-submenu.d.ts

@@ -1,5 +1,6 @@
 export type SwitchAccountSubmenuProps = {
     className?: string;
+    hideSubtitle?: boolean;
 };
 /**
  * Render a dropdown submenu for switching between multiple authenticated sessions.
@@ -10,4 +11,4 @@ export type SwitchAccountSubmenuProps = {
  * @param className - Optional additional CSS class names
  * @returns The switch account submenu as a JSX element
  */
-export declare function SwitchAccountSubmenu({ className }: SwitchAccountSubmenuProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function SwitchAccountSubmenu({ className, hideSubtitle }: SwitchAccountSubmenuProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/auth/multi-session/switch-account-submenu.js

@@ -1,24 +1,24 @@
-import { SwitchAccountSubmenuContent as e } from "./switch-account-submenu-content.js";
-import { multiSessionPlugin as t } from "../../../lib/auth/multi-session-plugin.js";
-import { useAuth as n, useAuthPlugin as r, useSession as i } from "@better-auth-ui/react";
-import { Persons as a } from "@gravity-ui/icons";
-import { Dropdown as o, Label as s } from "@heroui/react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-//#region src/components/auth/multi-session/switch-account-submenu.tsx
-function u({ className: u }) {
-	let { authClient: d } = n(), { data: f } = i(d), { localization: p } = r(t);
-	return f ? /* @__PURE__ */ l(o.SubmenuTrigger, { children: [/* @__PURE__ */ l(o.Item, {
-		className: u,
-		textValue: p.switchAccount,
-		children: [
-			/* @__PURE__ */ c(a, { className: "text-muted" }),
-			/* @__PURE__ */ c(s, { children: p.switchAccount }),
-			/* @__PURE__ */ c(o.SubmenuIndicator, {})
-		]
-	}), /* @__PURE__ */ c(o.Popover, {
-		className: "min-w-40 md:min-w-56 max-w-[48svw]",
-		children: /* @__PURE__ */ c(e, {})
-	})] }) : null;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useAuthPlugin, useSession } from "@better-auth-ui/react";
+import { ArrowRightArrowLeft } from "@gravity-ui/icons";
+import { Dropdown, Label } from "@heroui/react";
+import { multiSessionPlugin } from "../../../lib/auth/multi-session-plugin";
+import { SwitchAccountSubmenuContent } from "./switch-account-submenu-content";
+/**
+ * Render a dropdown submenu for switching between multiple authenticated sessions.
+ *
+ * This component renders as a submenu trigger that opens the switch account menu.
+ * It should be rendered inside a Dropdown.Menu.
+ *
+ * @param className - Optional additional CSS class names
+ * @returns The switch account submenu as a JSX element
+ */
+export function SwitchAccountSubmenu({ className, hideSubtitle }) {
+    const { authClient } = useAuth();
+    const { data: session } = useSession(authClient);
+    const { localization: multiSessionLocalization } = useAuthPlugin(multiSessionPlugin);
+    if (!session) {
+        return null;
+    }
+    return (_jsxs(Dropdown.SubmenuTrigger, { children: [_jsxs(Dropdown.Item, { className: className, textValue: multiSessionLocalization.switchAccount, children: [_jsx(ArrowRightArrowLeft, { className: "text-muted" }), _jsx(Label, { children: multiSessionLocalization.switchAccount }), _jsx(Dropdown.SubmenuIndicator, {})] }), _jsx(Dropdown.Popover, { className: "min-w-40 md:min-w-56 max-w-[48svw]", children: _jsx(SwitchAccountSubmenuContent, { hideSubtitle: hideSubtitle }) })] }));
 }
-//#endregion
-export { u as SwitchAccountSubmenu };

package/dist/components/auth/organization/change-organization-logo.d.ts

@@ -0,0 +1,4 @@
+export type ChangeOrganizationLogoProps = {
+    className?: string;
+};
+export declare function ChangeOrganizationLogo({ className }: ChangeOrganizationLogoProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/auth/organization/change-organization-logo.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fileToBase64 } from "@better-auth-ui/core";
+import { useActiveOrganization, useAuth, useAuthPlugin, useUpdateOrganization } 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 { organizationPlugin } from "../../../lib/auth/organization-plugin";
+import { OrganizationLogo } from "./organization-logo";
+export function ChangeOrganizationLogo({ className }) {
+    const { authClient } = useAuth();
+    const { logo, localization: organizationLocalization } = useAuthPlugin(organizationPlugin);
+    const { data: activeOrganization, isPending: activeOrganizationPending } = useActiveOrganization(authClient);
+    const { mutate: updateOrganization, isPending: updatePending } = useUpdateOrganization(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 || !activeOrganization)
+            return;
+        e.target.value = "";
+        setIsUploading(true);
+        try {
+            const resized = (await logo.resize?.(file, logo.size, logo.extension)) || file;
+            const image = (await logo.upload?.(resized)) || (await fileToBase64(resized));
+            updateOrganization({ data: { logo: image } }, {
+                onSuccess: () => toast.success(organizationLocalization.logoChangedSuccess),
+                onSettled: () => setIsUploading(false)
+            });
+        }
+        catch (error) {
+            setIsUploading(false);
+            if (error instanceof Error) {
+                toast.danger(error.message);
+            }
+        }
+    }
+    async function handleDelete() {
+        const currentLogo = activeOrganization?.logo;
+        updateOrganization({
+            data: { logo: "" }
+        }, {
+            onSuccess: async () => {
+                if (!currentLogo) {
+                    toast.success(organizationLocalization.logoDeletedSuccess);
+                    return;
+                }
+                setIsDeleting(true);
+                try {
+                    await logo.delete?.(currentLogo);
+                    toast.success(organizationLocalization.logoDeletedSuccess);
+                }
+                catch (error) {
+                    if (error instanceof Error) {
+                        toast.danger(error.message);
+                    }
+                }
+                finally {
+                    setIsDeleting(false);
+                }
+            }
+        });
+    }
+    if (!logo.enabled) {
+        return null;
+    }
+    return (_jsxs("div", { className: cn("flex flex-col gap-1", className), children: [_jsx(Label, { isDisabled: !activeOrganization, children: organizationLocalization.logo }), _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: !activeOrganization || isPending, onPress: () => fileInputRef.current?.click(), children: _jsx(OrganizationLogo, { size: "lg", isPending: activeOrganizationPending, organization: activeOrganization }) }), _jsxs(Dropdown, { children: [_jsxs(Button, { isDisabled: !activeOrganization || isPending, size: "sm", variant: "secondary", children: [isPending && _jsx(Spinner, { size: "sm" }), organizationLocalization.changeLogo] }), _jsx(Dropdown.Popover, { className: "min-w-fit", children: _jsxs(Dropdown.Menu, { children: [_jsxs(Dropdown.Item, { textValue: organizationLocalization.uploadLogo, onAction: () => fileInputRef.current?.click(), children: [_jsx(CloudArrowUpIn, { className: "text-muted" }), _jsx(Label, { children: organizationLocalization.uploadLogo })] }), _jsxs(Dropdown.Item, { textValue: organizationLocalization.deleteLogo, isDisabled: !activeOrganization?.logo, onAction: handleDelete, variant: "danger", children: [_jsx(TrashBin, { className: "text-danger" }), _jsx(Label, { children: organizationLocalization.deleteLogo })] })] }) })] })] })] }));
+}

package/dist/components/auth/organization/create-organization-dialog.d.ts

@@ -0,0 +1,13 @@
+/** Props for the {@link CreateOrganizationDialog} component. */
+export type CreateOrganizationDialogProps = {
+    isOpen: boolean;
+    onOpenChange: (open: boolean) => void;
+};
+/**
+ * Render a dialog for creating a new organization.
+ *
+ * @param isOpen - Whether the dialog is open
+ * @param onOpenChange - Callback for when the dialog open state changes
+ * @returns The create organization dialog as a JSX element
+ */
+export declare function CreateOrganizationDialog({ isOpen, onOpenChange }: CreateOrganizationDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/auth/organization/create-organization-dialog.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useAuthPlugin, useCreateOrganization } from "@better-auth-ui/react";
+import { Briefcase } from "@gravity-ui/icons";
+import { AlertDialog, Button, FieldError, Form, Input, Label, Spinner, TextField } from "@heroui/react";
+import { useEffect, useState } from "react";
+import { organizationPlugin } from "../../../lib/auth/organization-plugin";
+import { SlugField, sanitizeSlug } from "./slug-field";
+/**
+ * Render a dialog for creating a new organization.
+ *
+ * @param isOpen - Whether the dialog is open
+ * @param onOpenChange - Callback for when the dialog open state changes
+ * @returns The create organization dialog as a JSX element
+ */
+export function CreateOrganizationDialog({ isOpen, onOpenChange }) {
+    const { authClient, localization } = useAuth();
+    const { localization: organizationLocalization } = useAuthPlugin(organizationPlugin);
+    const [name, setName] = useState("");
+    const [slug, setSlug] = useState("");
+    const { mutate: createOrganization, isPending: isCreating } = useCreateOrganization(authClient, {
+        onSuccess: () => onOpenChange(false)
+    });
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        createOrganization({ name, slug });
+    };
+    useEffect(() => {
+        if (!isOpen) {
+            setSlug("");
+            setName("");
+        }
+    }, [isOpen]);
+    useEffect(() => {
+        setSlug(sanitizeSlug(name));
+    }, [name]);
+    return (_jsx(AlertDialog.Backdrop, { isOpen: isOpen, onOpenChange: onOpenChange, 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(Briefcase, {}) }), _jsx(AlertDialog.Heading, { children: organizationLocalization.createOrganization })] }), _jsxs(AlertDialog.Body, { className: "flex flex-col gap-4 overflow-visible", children: [_jsx("p", { className: "text-muted text-sm", children: organizationLocalization.organizationsDescription }), _jsxs(TextField, { id: "name", name: "name", isDisabled: isCreating, value: name, onChange: setName, children: [_jsx(Label, { children: organizationLocalization.name }), _jsx(Input, { required: true, autoFocus: true, placeholder: organizationLocalization.namePlaceholder, variant: "secondary" }), _jsx(FieldError, {})] }), _jsx(SlugField, { value: slug, onChange: setSlug, isDisabled: isCreating, variant: "secondary" })] }), _jsxs(AlertDialog.Footer, { children: [_jsx(Button, { slot: "close", variant: "tertiary", isDisabled: isCreating, children: localization.settings.cancel }), _jsxs(Button, { type: "submit", isPending: isCreating, children: [isCreating && _jsx(Spinner, { color: "current", size: "sm" }), organizationLocalization.createOrganization] })] })] }) }) }) }));
+}

package/dist/components/auth/organization/delete-organization-dialog.d.ts

@@ -0,0 +1,7 @@
+import type { Organization } from "better-auth/client";
+export type DeleteOrganizationDialogProps = {
+    isOpen: boolean;
+    onOpenChange: (open: boolean) => void;
+    organization: Organization;
+};
+export declare function DeleteOrganizationDialog({ isOpen, onOpenChange, organization }: DeleteOrganizationDialogProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useAuthPlugin, useDeleteOrganization } from "@better-auth-ui/react";
+import { TriangleExclamation } from "@gravity-ui/icons";
+import { AlertDialog, Button, Card, Form, Spinner, toast } from "@heroui/react";
+import { organizationPlugin } from "../../../lib/auth/organization-plugin";
+import { OrganizationView } from "./organization-view";
+export function DeleteOrganizationDialog({ isOpen, onOpenChange, organization }) {
+    const { authClient, basePaths, localization, navigate } = useAuth();
+    const { localization: organizationLocalization, viewPaths: organizationPluginViewPaths } = useAuthPlugin(organizationPlugin);
+    const { mutate: deleteOrganization, isPending } = useDeleteOrganization(authClient, {
+        onSuccess: () => {
+            onOpenChange(false);
+            toast.success(organizationLocalization.organizationDeleted);
+            navigate({
+                to: `${basePaths.settings}/${organizationPluginViewPaths.settings.organizations}`,
+                replace: true
+            });
+        }
+    });
+    function handleSubmit(e) {
+        e.preventDefault();
+        deleteOrganization({ organizationId: organization.id });
+    }
+    return (_jsx(AlertDialog.Backdrop, { isOpen: isOpen, onOpenChange: onOpenChange, 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: "danger", children: _jsx(TriangleExclamation, {}) }), _jsx(AlertDialog.Heading, { children: organizationLocalization.deleteOrganization })] }), _jsxs(AlertDialog.Body, { className: "flex flex-col gap-4 overflow-visible", children: [_jsx("p", { className: "text-muted text-sm", children: organizationLocalization.deleteOrganizationDescription }), _jsx(Card, { variant: "secondary", children: _jsx(Card.Content, { children: _jsx(OrganizationView, { organization: organization, hideRole: true }) }) })] }), _jsxs(AlertDialog.Footer, { children: [_jsx(Button, { slot: "close", variant: "tertiary", isDisabled: isPending, children: localization.settings.cancel }), _jsxs(Button, { type: "submit", variant: "danger", isPending: isPending, children: [isPending && _jsx(Spinner, { color: "current", size: "sm" }), organizationLocalization.deleteOrganization] })] })] }) }) }) }));
+}

package/dist/components/auth/organization/delete-organization-skeleton.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Placeholder matching {@link DeleteOrganization} while the delete permission resolves.
+ */
+export declare function DeleteOrganizationSkeleton(): import("react/jsx-runtime").JSX.Element;

package/dist/components/auth/organization/delete-organization-skeleton.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton } from "@heroui/react";
+/**
+ * Placeholder matching {@link DeleteOrganization} while the delete permission resolves.
+ */
+export function DeleteOrganizationSkeleton() {
+    return (_jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Skeleton, { className: "h-3.5 w-40 rounded-lg" }), _jsx(Skeleton, { className: "h-3 w-64 rounded-lg" })] }), _jsx(Skeleton, { className: "h-8 w-36 shrink-0 rounded-full" })] }));
+}

package/dist/components/auth/organization/delete-organization.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Danger-zone row to delete the active organization. Hidden for members without
+ * the `organization:delete` permission.
+ */
+export declare function DeleteOrganization(): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useActiveOrganization, useAuth, useAuthPlugin, useHasPermission } from "@better-auth-ui/react";
+import { AlertDialog, Button } from "@heroui/react";
+import { useState } from "react";
+import { organizationPlugin } from "../../../lib/auth/organization-plugin";
+import { DeleteOrganizationDialog } from "./delete-organization-dialog";
+import { DeleteOrganizationSkeleton } from "./delete-organization-skeleton";
+/**
+ * Danger-zone row to delete the active organization. Hidden for members without
+ * the `organization:delete` permission.
+ */
+export function DeleteOrganization() {
+    const { authClient } = useAuth();
+    const { localization: organizationLocalization } = useAuthPlugin(organizationPlugin);
+    const { data: activeOrganization } = useActiveOrganization(authClient);
+    const { data: permission, isPending: permissionPending } = useHasPermission(authClient, {
+        permissions: { organization: ["delete"] }
+    });
+    const [confirmOpen, setConfirmOpen] = useState(false);
+    if (permissionPending) {
+        return _jsx(DeleteOrganizationSkeleton, {});
+    }
+    if (!permission?.success) {
+        return null;
+    }
+    return (_jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium leading-tight", children: organizationLocalization.deleteOrganization }), _jsx("p", { className: "text-muted mt-0.5 text-xs", children: organizationLocalization.deleteOrganizationDescription })] }), _jsxs(AlertDialog, { children: [_jsx(Button, { isDisabled: !activeOrganization, size: "sm", variant: "danger-soft", onPress: () => setConfirmOpen(true), children: organizationLocalization.deleteOrganization }), activeOrganization && (_jsx(DeleteOrganizationDialog, { isOpen: confirmOpen, onOpenChange: setConfirmOpen, organization: activeOrganization }))] })] }));
+}

package/dist/components/auth/organization/invite-member-dialog.d.ts

@@ -0,0 +1,13 @@
+/** Props for the {@link InviteMemberDialog} component. */
+export type InviteMemberDialogProps = {
+    isOpen: boolean;
+    onOpenChange: (open: boolean) => void;
+};
+/**
+ * Render a dialog for inviting a member to the organization.
+ *
+ * @param isOpen - Whether the dialog is open
+ * @param onOpenChange - Callback for when the dialog open state changes
+ * @returns The invite member dialog as a JSX element
+ */
+export declare function InviteMemberDialog({ isOpen, onOpenChange }: InviteMemberDialogProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useAuthPlugin, useInviteMember } from "@better-auth-ui/react";
+import { PersonPlus } from "@gravity-ui/icons";
+import { AlertDialog, Button, FieldError, Form, Input, Label, ListBox, Select, Spinner, TextField, toast } from "@heroui/react";
+import { useEffect, useState } from "react";
+import { organizationPlugin } from "../../../lib/auth/organization-plugin";
+const pickDefaultRole = (keys) => keys.includes("member") ? "member" : (keys.at(-1) ?? "");
+/**
+ * Render a dialog for inviting a member to the organization.
+ *
+ * @param isOpen - Whether the dialog is open
+ * @param onOpenChange - Callback for when the dialog open state changes
+ * @returns The invite member dialog as a JSX element
+ */
+export function InviteMemberDialog({ isOpen, onOpenChange }) {
+    const { authClient, localization } = useAuth();
+    const { localization: organizationLocalization, roles } = useAuthPlugin(organizationPlugin);
+    const [role, setRole] = useState(() => pickDefaultRole(Object.keys(roles)));
+    useEffect(() => {
+        setRole((current) => {
+            const keys = Object.keys(roles);
+            return keys.includes(current) ? current : pickDefaultRole(keys);
+        });
+    }, [roles]);
+    const { mutate: inviteMember, isPending: isInviting } = useInviteMember(authClient, {
+        onSuccess: () => {
+            onOpenChange(false);
+            toast.success(organizationLocalization.inviteMemberSuccess);
+        }
+    });
+    const isRoleValid = Object.keys(roles).includes(role);
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        if (!isRoleValid)
+            return;
+        const formData = new FormData(e.target);
+        const email = formData.get("email");
+        inviteMember({
+            email: email.trim(),
+            role: role
+        });
+    };
+    return (_jsx(AlertDialog.Backdrop, { isOpen: isOpen, onOpenChange: onOpenChange, 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(PersonPlus, {}) }), _jsx(AlertDialog.Heading, { children: organizationLocalization.inviteMember })] }), _jsxs(AlertDialog.Body, { className: "flex flex-col gap-4 overflow-visible", children: [_jsx("p", { className: "text-muted text-sm", children: organizationLocalization.inviteMemberDescription }), _jsxs(TextField, { id: "email", name: "email", type: "email", isDisabled: isInviting, children: [_jsx(Label, { children: localization.auth.email }), _jsx(Input, { autoFocus: true, placeholder: localization.auth.email, variant: "secondary", required: true }), _jsx(FieldError, {})] }), _jsxs(Select, { name: "role", value: role, onChange: (value) => {
+                                        if (typeof value === "string")
+                                            setRole(value);
+                                    }, isDisabled: isInviting, variant: "secondary", fullWidth: true, children: [_jsx(Label, { children: organizationLocalization.role }), _jsxs(Select.Trigger, { children: [_jsx(Select.Value, {}), _jsx(Select.Indicator, {})] }), _jsx(Select.Popover, { children: _jsx(ListBox, { children: Object.entries(roles).map(([key, label]) => (_jsxs(ListBox.Item, { id: key, textValue: label, children: [label, _jsx(ListBox.ItemIndicator, {})] }, key))) }) }), _jsx(FieldError, {})] })] }), _jsxs(AlertDialog.Footer, { children: [_jsx(Button, { slot: "close", variant: "tertiary", isDisabled: isInviting, children: localization.settings.cancel }), _jsxs(Button, { type: "submit", isPending: isInviting, isDisabled: !isRoleValid, children: [isInviting && _jsx(Spinner, { color: "current", size: "sm" }), organizationLocalization.inviteMember] })] })] }) }) }) }));
+}

package/dist/components/auth/organization/leave-organization-dialog.d.ts

@@ -0,0 +1,7 @@
+import type { Organization } from "better-auth/client";
+export type LeaveOrganizationDialogProps = {
+    isOpen: boolean;
+    onOpenChange: (open: boolean) => void;
+    organization: Organization;
+};
+export declare function LeaveOrganizationDialog({ isOpen, onOpenChange, organization }: LeaveOrganizationDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/auth/organization/leave-organization-dialog.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useAuthPlugin, useLeaveOrganization } from "@better-auth-ui/react";
+import { ArrowRightFromSquare } from "@gravity-ui/icons";
+import { AlertDialog, Button, Card, Spinner, toast } from "@heroui/react";
+import { organizationPlugin } from "../../../lib/auth/organization-plugin";
+import { OrganizationView } from "./organization-view";
+export function LeaveOrganizationDialog({ isOpen, onOpenChange, organization }) {
+    const { authClient, basePaths, localization, navigate } = useAuth();
+    const { localization: organizationLocalization, viewPaths: organizationPluginViewPaths } = useAuthPlugin(organizationPlugin);
+    const { mutate: leaveOrganization, isPending } = useLeaveOrganization(authClient, {
+        onSuccess: () => {
+            onOpenChange(false);
+            toast.success(organizationLocalization.leftOrganization);
+            navigate({
+                to: `${basePaths.settings}/${organizationPluginViewPaths.settings.organizations}`,
+                replace: true
+            });
+        }
+    });
+    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(ArrowRightFromSquare, {}) }), _jsx(AlertDialog.Heading, { children: organizationLocalization.leaveOrganization })] }), _jsxs(AlertDialog.Body, { className: "flex flex-col gap-4 overflow-visible", children: [_jsx("p", { className: "text-muted text-sm", children: organizationLocalization.leaveOrganizationDescription }), _jsx(Card, { variant: "secondary", children: _jsx(Card.Content, { children: _jsx(OrganizationView, { organization: organization, hideRole: true }) }) })] }), _jsxs(AlertDialog.Footer, { children: [_jsx(Button, { slot: "close", variant: "tertiary", isDisabled: isPending, children: localization.settings.cancel }), _jsxs(Button, { variant: "danger", isPending: isPending, onPress: () => leaveOrganization({ organizationId: organization.id }), children: [isPending && _jsx(Spinner, { color: "current", size: "sm" }), organizationLocalization.leaveOrganization] })] })] }) }) }));
+}

package/dist/components/auth/organization/leave-organization.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Danger-zone row to leave the active organization.
+ */
+export declare function LeaveOrganization(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useActiveOrganization, useAuth, useAuthPlugin } from "@better-auth-ui/react";
+import { AlertDialog, Button } from "@heroui/react";
+import { useState } from "react";
+import { organizationPlugin } from "../../../lib/auth/organization-plugin";
+import { LeaveOrganizationDialog } from "./leave-organization-dialog";
+/**
+ * Danger-zone row to leave the active organization.
+ */
+export function LeaveOrganization() {
+    const { authClient } = useAuth();
+    const { localization: organizationLocalization } = useAuthPlugin(organizationPlugin);
+    const { data: activeOrganization } = useActiveOrganization(authClient);
+    const [confirmOpen, setConfirmOpen] = useState(false);
+    return (_jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium leading-tight", children: organizationLocalization.leaveOrganization }), _jsx("p", { className: "text-muted mt-0.5 text-xs", children: organizationLocalization.leaveOrganizationDescription })] }), _jsxs(AlertDialog, { children: [_jsx(Button, { isDisabled: !activeOrganization, size: "sm", variant: "danger-soft", onPress: () => setConfirmOpen(true), children: organizationLocalization.leaveOrganization }), activeOrganization && (_jsx(LeaveOrganizationDialog, { isOpen: confirmOpen, onOpenChange: setConfirmOpen, organization: activeOrganization }))] })] }));
+}

package/dist/components/auth/organization/organization-danger-zone.d.ts

@@ -0,0 +1,16 @@
+import { type CardProps } from "@heroui/react";
+import type { ComponentProps } from "react";
+export type OrganizationDangerZoneProps = {
+    className?: string;
+    variant?: CardProps["variant"];
+};
+/**
+ * Danger zone heading with {@link LeaveOrganization} and {@link DeleteOrganization}
+ * for the active organization in a single card.
+ *
+ * Resolves the `organization:delete` permission before rendering anything to
+ * avoid flashing {@link LeaveOrganization} (and a stray separator) before the
+ * delete row appears or disappears. Inner {@link DeleteOrganization} also
+ * self-gates so it stays safe to use standalone.
+ */
+export declare function OrganizationDangerZone({ className, variant, ...props }: OrganizationDangerZoneProps & ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;

package/dist/components/auth/organization/organization-danger-zone.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useHasPermission } from "@better-auth-ui/react";
+import { Card, cn } from "@heroui/react";
+import { DeleteOrganization } from "./delete-organization";
+import { DeleteOrganizationSkeleton } from "./delete-organization-skeleton";
+import { LeaveOrganization } from "./leave-organization";
+/**
+ * Danger zone heading with {@link LeaveOrganization} and {@link DeleteOrganization}
+ * for the active organization in a single card.
+ *
+ * Resolves the `organization:delete` permission before rendering anything to
+ * avoid flashing {@link LeaveOrganization} (and a stray separator) before the
+ * delete row appears or disappears. Inner {@link DeleteOrganization} also
+ * self-gates so it stays safe to use standalone.
+ */
+export function OrganizationDangerZone({ className, variant, ...props }) {
+    const { authClient, localization } = useAuth();
+    const { data: deletePermission, isPending: deletePermissionPending } = useHasPermission(authClient, {
+        permissions: { organization: ["delete"] }
+    });
+    const canDelete = !!deletePermission?.success;
+    return (_jsxs("div", { className: cn("flex w-full flex-col", className), ...props, children: [_jsx("h2", { className: cn("mb-3 text-sm font-semibold text-danger"), children: localization.settings.dangerZone }), _jsx(Card, { variant: variant, children: _jsx(Card.Content, { className: "gap-0", children: deletePermissionPending ? (_jsx(DeleteOrganizationSkeleton, {})) : (_jsxs(_Fragment, { children: [_jsx(LeaveOrganization, {}), canDelete && (_jsxs(_Fragment, { children: [_jsx("div", { className: "border-b border-dashed -mx-4 my-4" }), _jsx(DeleteOrganization, {})] }))] })) }) })] }));
+}

package/dist/components/auth/organization/organization-invitation-row-skeleton.d.ts

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

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton, Table } from "@heroui/react";
+/**
+ * Placeholder row matching {@link OrganizationInvitationTableRow} while
+ * invitations load.
+ */
+export function OrganizationInvitationRowSkeleton() {
+    return (_jsxs(Table.Row, { children: [_jsx(Table.Cell, { children: _jsx(Skeleton, { className: "h-4 w-48 rounded-lg" }) }), _jsx(Table.Cell, { children: _jsx(Skeleton, { className: "h-4 w-36 rounded-lg" }) }), _jsx(Table.Cell, { children: _jsx(Skeleton, { className: "h-4 w-16 rounded-lg" }) }), _jsx(Table.Cell, { children: _jsx(Skeleton, { className: "h-4 w-14 rounded-full" }) }), _jsx(Table.Cell, {})] }));
+}

package/dist/components/auth/organization/organization-invitation-row.d.ts

@@ -0,0 +1,5 @@
+import type { Invitation } from "better-auth/client";
+export type OrganizationInvitationTableRowProps = {
+    invitation: Invitation;
+};
+export declare function OrganizationInvitationTableRow({ invitation }: OrganizationInvitationTableRowProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useAuthPlugin, useCancelInvitation, useHasPermission } from "@better-auth-ui/react";
+import { Xmark } from "@gravity-ui/icons";
+import { Button, Chip, Spinner, Table } from "@heroui/react";
+import { organizationPlugin } from "../../../lib/auth/organization-plugin";
+import { OrganizationInvitationRowSkeleton } from "./organization-invitation-row-skeleton";
+export function OrganizationInvitationTableRow({ invitation }) {
+    const { authClient } = useAuth();
+    const { localization: organizationLocalization, roles } = useAuthPlugin(organizationPlugin);
+    const { data: cancelInvitationPermission, isPending: cancelPermissionPending } = useHasPermission(authClient, {
+        permissions: { invitation: ["cancel"] }
+    });
+    const { mutate: cancelInvitation, isPending: cancelPending } = useCancelInvitation(authClient);
+    const roleLabel = roles?.[invitation.role] ?? invitation.role;
+    const statusLabel = organizationLocalization[invitation.status] ?? invitation.status;
+    const statusColor = invitation.status === "pending"
+        ? "warning"
+        : invitation.status === "accepted"
+            ? "success"
+            : invitation.status === "rejected"
+                ? "danger"
+                : "default";
+    if (cancelPermissionPending) {
+        return _jsx(OrganizationInvitationRowSkeleton, {});
+    }
+    return (_jsxs(Table.Row, { children: [_jsx(Table.Cell, { className: "font-medium text-sm", children: invitation.email }), _jsx(Table.Cell, { className: "text-muted text-xs tabular-nums whitespace-nowrap", children: new Date(invitation.createdAt).toLocaleString(undefined, {
+                    dateStyle: "short",
+                    timeStyle: "short"
+                }) }), _jsx(Table.Cell, { className: "text-sm", children: roleLabel }), _jsx(Table.Cell, { className: "text-sm", children: _jsx(Chip, { color: statusColor, size: "sm", variant: "soft", children: statusLabel }) }), _jsx(Table.Cell, { className: "text-end", children: cancelInvitationPermission?.success &&
+                    invitation.status === "pending" && (_jsx(Button, { isIconOnly: true, size: "sm", variant: "danger-soft", isPending: cancelPending, onPress: () => cancelInvitation({ invitationId: invitation.id }), "aria-label": organizationLocalization.cancelInvitation, children: cancelPending ? (_jsx(Spinner, { color: "current", size: "sm" })) : (_jsx(Xmark, {})) })) })] }));
+}

package/dist/components/auth/organization/organization-invitations-empty.d.ts

@@ -0,0 +1,8 @@
+export type OrganizationInvitationsEmptyProps = {
+    onInvitePress: () => void;
+};
+/**
+ * Empty state for {@link OrganizationInvitations} — mirrors `ApiKeysEmpty`
+ * (icon, title, description) with an "Invite member" call to action.
+ */
+export declare function OrganizationInvitationsEmpty({ onInvitePress }: OrganizationInvitationsEmptyProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,13 @@
+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 { Button, EmptyState } from "@heroui/react";
+import { organizationPlugin } from "../../../lib/auth/organization-plugin";
+/**
+ * Empty state for {@link OrganizationInvitations} — mirrors `ApiKeysEmpty`
+ * (icon, title, description) with an "Invite member" call to action.
+ */
+export function OrganizationInvitationsEmpty({ onInvitePress }) {
+    const { localization: organizationLocalization } = useAuthPlugin(organizationPlugin);
+    return (_jsxs(EmptyState, { className: "flex flex-col items-center gap-4 text-center p-4", children: [_jsx(PaperPlane, { className: "size-6 text-muted" }), _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.organizationInvitationsEmptyDescription })] }), _jsx(Button, { size: "sm", onPress: onInvitePress, children: organizationLocalization.inviteMember })] }));
+}

package/dist/components/auth/organization/organization-invitations.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentProps } from "react";
+/** Props for the {@link OrganizationInvitations} component. */
+export type OrganizationInvitationsProps = {
+    className?: string;
+};
+/**
+ * Organization invitations table with invite control and per-row actions.
+ */
+export declare function OrganizationInvitations({ className, ...props }: OrganizationInvitationsProps & ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;