@better-auth-ui/heroui 1.6.8 → 1.6.9

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

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useAuthPlugin, useHasPermission, useListOrganizationInvitations } from "@better-auth-ui/react";
+import { ChevronUp, Funnel, Xmark } from "@gravity-ui/icons";
+import { Button, Chip, cn, Dropdown, Label, SearchField, Table } from "@heroui/react";
+import { useMemo, useState } from "react";
+import { organizationPlugin } from "../../../lib/auth/organization-plugin";
+import { InviteMemberDialog } from "./invite-member-dialog";
+import { OrganizationInvitationTableRow } from "./organization-invitation-row";
+import { OrganizationInvitationRowSkeleton } from "./organization-invitation-row-skeleton";
+import { OrganizationInvitationsEmpty } from "./organization-invitations-empty";
+/**
+ * Organization invitations table with invite control and per-row actions.
+ */
+export function OrganizationInvitations({ className, ...props }) {
+    const { authClient, localization } = useAuth();
+    const { localization: organizationLocalization, roles } = useAuthPlugin(organizationPlugin);
+    const { data: invitations, isPending: invitationsPending } = useListOrganizationInvitations(authClient);
+    const { isPending: invitationPermissionPending } = useHasPermission(authClient, {
+        permissions: { invitation: ["cancel"] }
+    });
+    const isPending = invitationsPending || invitationPermissionPending;
+    const [sortDescriptor, setSortDescriptor] = useState();
+    const [roleFilter, setRoleFilter] = useState("all");
+    const [statusFilter, setStatusFilter] = useState("all");
+    const [search, setSearch] = useState("");
+    const filteredInvitations = useMemo(() => {
+        return invitations?.filter((invitation) => (roleFilter === "all" || invitation.role === roleFilter) &&
+            (statusFilter === "all" || invitation.status === statusFilter) &&
+            invitation.email.toLowerCase().includes(search.toLowerCase()));
+    }, [search, invitations, roleFilter, statusFilter]);
+    const sortedInvitations = useMemo(() => {
+        if (!sortDescriptor)
+            return filteredInvitations;
+        if (!filteredInvitations)
+            return filteredInvitations;
+        return [...filteredInvitations].sort((a, b) => {
+            const col = sortDescriptor.column;
+            let cmp = 0;
+            if (col === "createdAt") {
+                cmp = new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
+            }
+            else {
+                cmp = String(a[col]).localeCompare(String(b[col]));
+            }
+            if (sortDescriptor.direction === "descending") {
+                cmp *= -1;
+            }
+            return cmp;
+        });
+    }, [sortDescriptor, filteredInvitations]);
+    const [inviteOpen, setInviteOpen] = useState(false);
+    return (_jsxs("div", { className: cn("flex flex-col gap-3", className), ...props, children: [_jsx("h3", { className: "truncate text-sm font-semibold", children: organizationLocalization.invitations }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(SearchField, { className: "min-w-0", "aria-label": organizationLocalization.search, value: search, onChange: setSearch, isDisabled: isPending, children: _jsxs(SearchField.Group, { children: [_jsx(SearchField.SearchIcon, {}), _jsx(SearchField.Input, { placeholder: organizationLocalization.search, className: "sm:w-[200px]" }), _jsx(SearchField.ClearButton, {})] }) }), _jsxs(Dropdown, { children: [_jsxs(Button, { size: "sm", variant: "secondary", isDisabled: isPending, children: [_jsx(Funnel, {}), organizationLocalization.role] }), _jsx(Dropdown.Popover, { children: _jsxs(Dropdown.Menu, { selectionMode: "single", selectedKeys: new Set([roleFilter]), onSelectionChange: (keys) => {
+                                                const key = [...keys][0];
+                                                setRoleFilter(key ?? "all");
+                                            }, children: [_jsxs(Dropdown.Item, { id: "all", textValue: organizationLocalization.all, children: [_jsx(Label, { children: organizationLocalization.all }), _jsx(Dropdown.ItemIndicator, {})] }), Object.entries(roles).map(([key, label]) => (_jsxs(Dropdown.Item, { id: key, textValue: label, children: [_jsx(Label, { children: label }), _jsx(Dropdown.ItemIndicator, {})] }, key)))] }) })] }), _jsxs(Dropdown, { children: [_jsxs(Button, { size: "sm", variant: "secondary", isDisabled: isPending, children: [_jsx(Funnel, {}), organizationLocalization.status] }), _jsx(Dropdown.Popover, { children: _jsxs(Dropdown.Menu, { selectionMode: "single", selectedKeys: new Set([statusFilter]), onSelectionChange: (keys) => {
+                                                const key = [...keys][0];
+                                                setStatusFilter(key ?? "all");
+                                            }, children: [_jsxs(Dropdown.Item, { id: "all", textValue: organizationLocalization.all, children: [_jsx(Label, { children: organizationLocalization.all }), _jsx(Dropdown.ItemIndicator, {})] }), ["pending", "accepted", "rejected", "canceled"].map((status) => (_jsxs(Dropdown.Item, { id: status, textValue: organizationLocalization[status] ?? status, children: [_jsx(Label, { children: organizationLocalization[status] ?? status }), _jsx(Dropdown.ItemIndicator, {})] }, status)))] }) })] })] }), (roleFilter !== "all" || statusFilter !== "all") && (_jsxs("div", { className: "flex flex-wrap gap-2", children: [roleFilter !== "all" && (_jsxs(Chip, { size: "sm", variant: "secondary", className: "w-fit", children: [_jsxs(Chip.Label, { children: [organizationLocalization.role, ":", " ", _jsx("span", { className: "capitalize", children: roles?.[roleFilter] ?? roleFilter })] }), _jsx("button", { type: "button", "aria-label": organizationLocalization.clear, className: "text-muted hover:text-foreground inline-flex cursor-pointer items-center", onClick: () => setRoleFilter("all"), children: _jsx(Xmark, { className: "size-3" }) })] })), statusFilter !== "all" && (_jsxs(Chip, { size: "sm", variant: "secondary", className: "w-fit", children: [_jsxs(Chip.Label, { children: [organizationLocalization.status, ":", " ", organizationLocalization[statusFilter] ?? statusFilter] }), _jsx("button", { type: "button", "aria-label": organizationLocalization.clear, className: "text-muted hover:text-foreground inline-flex cursor-pointer items-center", onClick: () => setStatusFilter("all"), children: _jsx(Xmark, { className: "size-3" }) })] }))] })), _jsx(Table, { children: _jsx(Table.ScrollContainer, { children: _jsxs(Table.Content, { "aria-label": organizationLocalization.invitations, sortDescriptor: sortDescriptor, onSortChange: (descriptor) => {
+                                    const shouldReset = sortDescriptor?.column === descriptor.column &&
+                                        descriptor.direction === "ascending";
+                                    setSortDescriptor(shouldReset ? undefined : descriptor);
+                                }, children: [_jsxs(Table.Header, { children: [_jsx(Table.Column, { allowsSorting: true, isRowHeader: true, id: "email", children: ({ sortDirection }) => (_jsx(SortableColumnHeader, { sortDirection: sortDirection, children: localization.auth.email })) }), _jsx(Table.Column, { allowsSorting: true, id: "createdAt", children: ({ sortDirection }) => (_jsx(SortableColumnHeader, { sortDirection: sortDirection, children: organizationLocalization.invitedAt })) }), _jsx(Table.Column, { allowsSorting: true, id: "role", children: ({ sortDirection }) => (_jsx(SortableColumnHeader, { sortDirection: sortDirection, children: organizationLocalization.role })) }), _jsx(Table.Column, { allowsSorting: true, id: "status", children: ({ sortDirection }) => (_jsx(SortableColumnHeader, { sortDirection: sortDirection, children: organizationLocalization.status })) }), _jsx(Table.Column, { className: "text-end", children: organizationLocalization.actions })] }), _jsx(Table.Body, { renderEmptyState: () => (_jsx(OrganizationInvitationsEmpty, { onInvitePress: () => setInviteOpen(true) })), children: isPending ? (_jsx(OrganizationInvitationRowSkeleton, {})) : (sortedInvitations?.map((invitation) => (_jsx(OrganizationInvitationTableRow, { invitation: invitation }, invitation.id)))) })] }) }) })] }), _jsx(InviteMemberDialog, { isOpen: inviteOpen, onOpenChange: setInviteOpen })] }));
+}
+function SortableColumnHeader({ children, sortDirection }) {
+    return (_jsxs("span", { className: "flex items-center justify-between", children: [children, !!sortDirection && (_jsx(ChevronUp, { className: cn("size-3 transform transition-transform duration-100 ease-out", sortDirection === "descending" ? "rotate-180" : "") }))] }));
+}

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

@@ -0,0 +1,15 @@
+import { type AvatarProps } from "@heroui/react";
+import type { Organization } from "better-auth/client";
+import type { ReactNode } from "react";
+export type OrganizationLogoProps = {
+    className?: string;
+    fallback?: ReactNode;
+    isPending?: boolean;
+    organization?: Partial<Organization>;
+    size?: AvatarProps["size"];
+};
+/**
+ * Renders an organization logo image, initials fallback, or a briefcase icon;
+ * shows a circular skeleton while loading when `isPending` is set and `organization` is undefined.
+ */
+export declare function OrganizationLogo({ className, fallback, isPending, organization, size, style, ...props }: OrganizationLogoProps & AvatarProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Briefcase } from "@gravity-ui/icons";
+import { Avatar, cn, Skeleton } from "@heroui/react";
+/**
+ * Renders an organization logo image, initials fallback, or a briefcase icon;
+ * shows a circular skeleton while loading when `isPending` is set and `organization` is undefined.
+ */
+export function OrganizationLogo({ className, fallback, isPending, organization, size = "sm", style, ...props }) {
+    if (isPending && !organization) {
+        return (_jsx(Skeleton, { className: cn("rounded-full", size === "sm" ? "size-8" : size === "md" ? "size-10" : "size-12", className), style: style }));
+    }
+    const initials = organization?.name?.slice(0, 2).toUpperCase();
+    return (_jsxs(Avatar, { size: size, className: cn("rounded-full", className), style: style, ...props, children: [_jsx(Avatar.Image, { alt: organization?.name ?? "Organization", src: organization?.logo ?? undefined }), _jsx(Avatar.Fallback, { className: cn(size === "lg" ? "text-xl" : size === "md" ? "text-base" : "text-sm"), delayMs: organization?.logo ? 600 : undefined, children: fallback || initials || _jsx(Briefcase, { className: "size-4" }) })] }));
+}

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

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

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton, Table } from "@heroui/react";
+import { UserView } from "../user/user-view";
+/**
+ * Placeholder row matching {@link OrganizationMemberRow} while members load.
+ */
+export function OrganizationMemberRowSkeleton() {
+    return (_jsxs(Table.Row, { children: [_jsx(Table.Cell, { children: _jsx(UserView, { isPending: true }) }), _jsx(Table.Cell, { children: _jsx(Skeleton, { className: "h-4 w-18 rounded-lg" }) }), _jsx(Table.Cell, { className: "flex justify-end", children: _jsx(Skeleton, { className: "size-8 rounded-full" }) })] }));
+}

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

@@ -0,0 +1,9 @@
+import type { Member, Organization, User } from "better-auth/client";
+export type OrganizationMemberRowProps = {
+    member: Member & {
+        user: Partial<User>;
+    };
+    isOwner?: boolean;
+    organization: Organization;
+};
+export declare function OrganizationMemberRow({ member, isOwner, organization }: OrganizationMemberRowProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useAuthPlugin, useHasPermission, useSession, useUpdateMemberRole } from "@better-auth-ui/react";
+import { ArrowRightFromSquare, Pencil, TrashBin } from "@gravity-ui/icons";
+import { Button, Dropdown, Label, Spinner, Table, toast } from "@heroui/react";
+import { useState } from "react";
+import { organizationPlugin } from "../../../lib/auth/organization-plugin";
+import { UserView } from "../user/user-view";
+import { LeaveOrganizationDialog } from "./leave-organization-dialog";
+import { OrganizationMemberRowSkeleton } from "./organization-member-row-skeleton";
+import { RemoveMemberDialog } from "./remove-member-dialog";
+export function OrganizationMemberRow({ member, isOwner, organization }) {
+    const { authClient } = useAuth();
+    const { localization: organizationLocalization, roles } = useAuthPlugin(organizationPlugin);
+    const { data: session } = useSession(authClient);
+    const { data: hasUpdatePermission, isPending: updatePermissionPending } = useHasPermission(authClient, {
+        permissions: { member: ["update"] }
+    });
+    const { data: hasDeletePermission, isPending: deletePermissionPending } = useHasPermission(authClient, {
+        permissions: { member: ["delete"] }
+    });
+    const isPending = updatePermissionPending || deletePermissionPending;
+    const { mutate: updateMemberRole, isPending: isUpdatingRole } = useUpdateMemberRole(authClient, {
+        onSuccess: () => toast.success(organizationLocalization.memberRoleUpdated)
+    });
+    const roleLabel = roles?.[member.role] ?? member.role;
+    const assignableRoles = Object.entries(roles).filter(([key]) => isOwner || key !== "owner");
+    const isCurrentUser = session?.user.id === member.userId;
+    const [removeOpen, setRemoveOpen] = useState(false);
+    const [leaveOpen, setLeaveOpen] = useState(false);
+    if (isPending) {
+        return _jsx(OrganizationMemberRowSkeleton, {});
+    }
+    return (_jsxs(Table.Row, { children: [_jsx(Table.Cell, { children: _jsx(UserView, { user: member.user }) }), _jsx(Table.Cell, { children: roleLabel }), _jsxs(Table.Cell, { children: [_jsxs("div", { className: "flex items-center justify-end gap-1", children: [hasUpdatePermission?.success && (_jsxs(Dropdown, { children: [_jsx(Button, { isIconOnly: true, size: "sm", variant: "tertiary", isDisabled: isUpdatingRole, "aria-label": organizationLocalization.changeMemberRole, children: isUpdatingRole ? (_jsx(Spinner, { color: "current", size: "sm" })) : (_jsx(Pencil, {})) }), _jsx(Dropdown.Popover, { className: "min-w-fit", children: _jsx(Dropdown.Menu, { children: assignableRoles.map(([role, label]) => (_jsx(Dropdown.Item, { textValue: label, isDisabled: member.role === role, onAction: () => updateMemberRole({ memberId: member.id, role }), children: _jsx(Label, { children: label }) }, role))) }) })] })), isCurrentUser ? (_jsx(Button, { isIconOnly: true, size: "sm", variant: "danger-soft", "aria-label": organizationLocalization.leaveOrganization, onPress: () => setLeaveOpen(true), children: _jsx(ArrowRightFromSquare, {}) })) : (hasDeletePermission?.success && (_jsx(Button, { isIconOnly: true, size: "sm", variant: "danger-soft", "aria-label": organizationLocalization.removeMember, onPress: () => setRemoveOpen(true), children: _jsx(TrashBin, {}) })))] }), isCurrentUser && organization ? (_jsx(LeaveOrganizationDialog, { isOpen: leaveOpen, onOpenChange: setLeaveOpen, organization: organization })) : (hasDeletePermission?.success && (_jsx(RemoveMemberDialog, { isOpen: removeOpen, onOpenChange: setRemoveOpen, member: member })))] })] }));
+}

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

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

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

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useActiveOrganization, useAuth, useAuthPlugin, useHasPermission, useListOrganizationMembers, useSession } from "@better-auth-ui/react";
+import { ChevronUp, Funnel, Xmark } from "@gravity-ui/icons";
+import { Button, Chip, cn, Dropdown, Label, SearchField, Table } from "@heroui/react";
+import { useMemo, useState } from "react";
+import { organizationPlugin } from "../../../lib/auth/organization-plugin";
+import { InviteMemberDialog } from "./invite-member-dialog";
+import { OrganizationMemberRow } from "./organization-member-row";
+import { OrganizationMemberRowSkeleton } from "./organization-member-row-skeleton";
+/**
+ * Organization members table with title, invite control, and per-row actions.
+ */
+export function OrganizationMembers({ className, ...props }) {
+    const { authClient } = useAuth();
+    const { localization: organizationLocalization, roles } = useAuthPlugin(organizationPlugin);
+    const { data: session } = useSession(authClient);
+    const { data: activeOrganization, isPending: activeOrganizationPending } = useActiveOrganization(authClient);
+    const { data: membersData, isPending: membersPending } = useListOrganizationMembers(authClient);
+    const { isPending: updatePermissionPending } = useHasPermission(authClient, {
+        permissions: { member: ["update"] }
+    });
+    const { isPending: deletePermissionPending } = useHasPermission(authClient, {
+        permissions: { member: ["delete"] }
+    });
+    const isPending = activeOrganizationPending ||
+        membersPending ||
+        updatePermissionPending ||
+        deletePermissionPending;
+    const [sortDescriptor, setSortDescriptor] = useState();
+    const [roleFilter, setRoleFilter] = useState("all");
+    const [search, setSearch] = useState("");
+    const filteredMembers = useMemo(() => {
+        return membersData?.members.filter((member) => (roleFilter === "all" || member.role === roleFilter) &&
+            (member.user.name.toLowerCase().includes(search.toLowerCase()) ||
+                member.user.email.toLowerCase().includes(search.toLowerCase())));
+    }, [search, membersData?.members, roleFilter]);
+    const sortedMembers = useMemo(() => {
+        if (!sortDescriptor)
+            return filteredMembers;
+        if (!filteredMembers)
+            return filteredMembers;
+        return [...filteredMembers].sort((a, b) => {
+            const col = sortDescriptor.column;
+            const first = col === "user" ? a.user.name || a.user.email : String(a[col]);
+            const second = col === "user" ? b.user.name || b.user.email : String(b[col]);
+            let cmp = first.localeCompare(second);
+            if (sortDescriptor.direction === "descending") {
+                cmp *= -1;
+            }
+            return cmp;
+        });
+    }, [sortDescriptor, filteredMembers]);
+    const [inviteOpen, setInviteOpen] = useState(false);
+    const isOwner = membersData?.members.some((member) => member.role === "owner" && member.userId === session?.user.id);
+    return (_jsxs("div", { className: cn("flex flex-col gap-3", className), ...props, children: [_jsxs("div", { className: "flex items-end justify-between gap-3", children: [_jsx("h3", { className: "truncate text-sm font-semibold", children: organizationLocalization.members }), _jsx(Button, { className: "shrink-0", size: "sm", isDisabled: isPending, onPress: () => setInviteOpen(true), children: organizationLocalization.inviteMember })] }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(SearchField, { className: "min-w-0", "aria-label": organizationLocalization.search, value: search, onChange: setSearch, isDisabled: isPending, children: _jsxs(SearchField.Group, { children: [_jsx(SearchField.SearchIcon, {}), _jsx(SearchField.Input, { placeholder: organizationLocalization.search, className: "sm:w-[200px]" }), _jsx(SearchField.ClearButton, {})] }) }), _jsxs(Dropdown, { children: [_jsxs(Button, { size: "sm", variant: "secondary", isDisabled: isPending, children: [_jsx(Funnel, {}), organizationLocalization.role] }), _jsx(Dropdown.Popover, { children: _jsxs(Dropdown.Menu, { selectionMode: "single", selectedKeys: new Set([roleFilter]), onSelectionChange: (keys) => {
+                                                const key = [...keys][0];
+                                                setRoleFilter(key ?? "all");
+                                            }, children: [_jsxs(Dropdown.Item, { id: "all", textValue: organizationLocalization.all, children: [_jsx(Label, { children: organizationLocalization.all }), _jsx(Dropdown.ItemIndicator, {})] }), Object.entries(roles).map(([role, label]) => (_jsxs(Dropdown.Item, { id: role, textValue: label, children: [_jsx(Label, { children: label }), _jsx(Dropdown.ItemIndicator, {})] }, role)))] }) })] })] }), roleFilter !== "all" && (_jsxs(Chip, { size: "sm", variant: "secondary", className: "w-fit", children: [_jsxs(Chip.Label, { children: [organizationLocalization.role, ":", " ", _jsx("span", { className: "capitalize", children: roles?.[roleFilter] ?? roleFilter })] }), _jsx("button", { type: "button", "aria-label": organizationLocalization.clear, className: "text-muted hover:text-foreground inline-flex cursor-pointer items-center", onClick: () => setRoleFilter("all"), children: _jsx(Xmark, { className: "size-3" }) })] })), _jsx(Table, { children: _jsx(Table.ScrollContainer, { children: _jsxs(Table.Content, { "aria-label": organizationLocalization.members, sortDescriptor: sortDescriptor, onSortChange: (descriptor) => {
+                                    const shouldReset = sortDescriptor?.column === descriptor.column &&
+                                        descriptor.direction === "ascending";
+                                    setSortDescriptor(shouldReset ? undefined : descriptor);
+                                }, children: [_jsxs(Table.Header, { children: [_jsx(Table.Column, { allowsSorting: true, isRowHeader: true, id: "user", children: ({ sortDirection }) => (_jsx(SortableColumnHeader, { sortDirection: sortDirection, children: organizationLocalization.member })) }), _jsx(Table.Column, { allowsSorting: true, id: "role", children: ({ sortDirection }) => (_jsx(SortableColumnHeader, { sortDirection: sortDirection, children: organizationLocalization.role })) }), _jsx(Table.Column, { className: "text-end", children: organizationLocalization.actions })] }), _jsx(Table.Body, { children: isPending ? (_jsx(OrganizationMemberRowSkeleton, {})) : (!!activeOrganization &&
+                                            sortedMembers?.map((member) => (_jsx(OrganizationMemberRow, { member: member, isOwner: isOwner, organization: activeOrganization }, member.id)))) })] }) }) })] }), _jsx(InviteMemberDialog, { isOpen: inviteOpen, onOpenChange: setInviteOpen })] }));
+}
+function SortableColumnHeader({ children, sortDirection }) {
+    return (_jsxs("span", { className: "flex items-center justify-between", children: [children, !!sortDirection && (_jsx(ChevronUp, { className: cn("size-3 transform transition-transform duration-100 ease-out", sortDirection === "descending" ? "rotate-180" : "") }))] }));
+}

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

@@ -0,0 +1,10 @@
+import type { ComponentProps } from "react";
+/** Props for the {@link OrganizationPeople} component. */
+export type OrganizationPeopleProps = {
+    className?: string;
+};
+/**
+ * Organization people UI: members table (see {@link OrganizationMembers}), then org
+ * invitations.
+ */
+export declare function OrganizationPeople({ className, ...props }: OrganizationPeopleProps & ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@heroui/react";
+import { OrganizationInvitations } from "./organization-invitations";
+import { OrganizationMembers } from "./organization-members";
+/**
+ * Organization people UI: members table (see {@link OrganizationMembers}), then org
+ * invitations.
+ */
+export function OrganizationPeople({ className, ...props }) {
+    return (_jsxs("div", { className: cn("flex flex-col gap-4 md:gap-6", className), ...props, children: [_jsx(OrganizationMembers, {}), _jsx(OrganizationInvitations, {})] }));
+}

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

@@ -0,0 +1,9 @@
+import { type CardProps } from "@heroui/react";
+export type OrganizationProfileProps = {
+    className?: string;
+    variant?: CardProps["variant"];
+};
+/**
+ * Profile card for the active organization: logo (when enabled), display name, and slug.
+ */
+export declare function OrganizationProfile({ className, variant, ...props }: OrganizationProfileProps & Omit<CardProps, "children">): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useActiveOrganization, useAuth, useAuthPlugin, useUpdateOrganization } from "@better-auth-ui/react";
+import { Button, Card, cn, FieldError, Form, Input, Label, Skeleton, Spinner, TextField, toast } from "@heroui/react";
+import { useEffect, useState } from "react";
+import { organizationPlugin } from "../../../lib/auth/organization-plugin";
+import { ChangeOrganizationLogo } from "./change-organization-logo";
+import { SlugField } from "./slug-field";
+/**
+ * Profile card for the active organization: logo (when enabled), display name, and slug.
+ */
+export function OrganizationProfile({ className, variant, ...props }) {
+    const { authClient, localization } = useAuth();
+    const { localization: organizationLocalization } = useAuthPlugin(organizationPlugin);
+    const { data: activeOrganization } = useActiveOrganization(authClient);
+    const [slug, setSlug] = useState(activeOrganization?.slug ?? "");
+    useEffect(() => {
+        setSlug(activeOrganization?.slug ?? "");
+    }, [activeOrganization?.slug]);
+    const { mutate: commitOrganizationUpdate, isPending } = useUpdateOrganization(authClient, {
+        onSuccess: () => toast.success(organizationLocalization.organizationUpdatedSuccess)
+    });
+    function handleSubmit(e) {
+        e.preventDefault();
+        if (!activeOrganization)
+            return;
+        const formData = new FormData(e.currentTarget);
+        const name = formData.get("name");
+        commitOrganizationUpdate({
+            data: { name, slug }
+        });
+    }
+    const inputVariant = variant === "transparent" ? "primary" : "secondary";
+    return (_jsxs("div", { children: [_jsx("h2", { className: cn("mb-3 text-sm font-semibold"), children: organizationLocalization.organizationProfile }), _jsx(Card, { className: cn(className), variant: variant, ...props, children: _jsx(Card.Content, { children: _jsxs(Form, { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsx(ChangeOrganizationLogo, {}), _jsxs(TextField, { name: "name", defaultValue: activeOrganization?.name, isDisabled: isPending || !activeOrganization, children: [_jsx(Label, { children: organizationLocalization.name }), _jsx(Input, { className: cn(!activeOrganization && "hidden"), autoComplete: "organization", placeholder: organizationLocalization.namePlaceholder, variant: inputVariant }), !activeOrganization && (_jsx(Skeleton, { className: "h-10 w-full rounded-xl md:h-9" })), _jsx(FieldError, {})] }, `${activeOrganization?.id}-${activeOrganization?.name}-name`), activeOrganization ? (_jsx(SlugField, { value: slug, onChange: setSlug, currentSlug: activeOrganization.slug, isDisabled: isPending, variant: inputVariant })) : (_jsxs(TextField, { isDisabled: true, children: [_jsx(Label, { children: organizationLocalization.slug }), _jsx(Skeleton, { className: "h-10 w-full rounded-xl md:h-9" })] })), _jsxs(Button, { type: "submit", isPending: isPending, isDisabled: !activeOrganization, size: "sm", className: "mt-1", children: [isPending && _jsx(Spinner, { color: "current", size: "sm" }), localization.settings.saveChanges] })] }) }) })] }));
+}

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

@@ -0,0 +1,8 @@
+import type { Organization } from "better-auth/client";
+export type OrganizationRowProps = {
+    organization: Organization;
+};
+/**
+ * Single organization row: logo and labels via {@link OrganizationView}, plus Manage.
+ */
+export declare function OrganizationRow({ organization }: OrganizationRowProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useAuthPlugin, useSetActiveOrganization } from "@better-auth-ui/react";
+import { Gear } from "@gravity-ui/icons";
+import { Button, Spinner } from "@heroui/react";
+import { organizationPlugin } from "../../../lib/auth/organization-plugin";
+import { OrganizationView } from "./organization-view";
+/**
+ * Single organization row: logo and labels via {@link OrganizationView}, plus Manage.
+ */
+export function OrganizationRow({ organization }) {
+    const { authClient, basePaths, navigate } = useAuth();
+    const { localization: organizationLocalization, viewPaths: organizationViewPaths, slug } = useAuthPlugin(organizationPlugin);
+    const { mutate: setActiveOrganization, isPending: setActivePending } = useSetActiveOrganization(authClient, {
+        onSuccess: () => {
+            navigate({
+                to: `${basePaths.organization}/${organizationViewPaths.organization.settings}`
+            });
+        }
+    });
+    function manageOrganization() {
+        if (slug !== undefined) {
+            navigate({
+                to: `${basePaths.organization}/${organization.slug}/${organizationViewPaths.organization.settings}`
+            });
+        }
+        else {
+            setActiveOrganization({ organizationId: organization.id });
+        }
+    }
+    return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(OrganizationView, { organization: organization }), _jsxs(Button, { className: "ml-auto shrink-0", variant: "outline", size: "sm", isPending: setActivePending, onPress: manageOrganization, "aria-label": organizationLocalization.manage, children: [setActivePending ? _jsx(Spinner, { color: "current", size: "sm" }) : _jsx(Gear, {}), organizationLocalization.manage] })] }));
+}

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

@@ -0,0 +1,12 @@
+import { type CardProps } from "@heroui/react";
+import type { ComponentProps } from "react";
+/** Props for the {@link OrganizationSettings} component. */
+export type OrganizationSettingsProps = {
+    className?: string;
+    variant?: CardProps["variant"];
+};
+/**
+ * Organization settings UI: profile card, plugin-contributed cards
+ * (`organizationCards`), then danger zone.
+ */
+export declare function OrganizationSettings({ className, variant, ...props }: OrganizationSettingsProps & ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth } from "@better-auth-ui/react";
+import { cn } from "@heroui/react";
+import { OrganizationDangerZone } from "./organization-danger-zone";
+import { OrganizationProfile } from "./organization-profile";
+/**
+ * Organization settings UI: profile card, plugin-contributed cards
+ * (`organizationCards`), then danger zone.
+ */
+export function OrganizationSettings({ className, variant, ...props }) {
+    const { plugins } = useAuth();
+    return (_jsxs("div", { className: cn("flex flex-col gap-4 md:gap-6", className), ...props, children: [_jsx(OrganizationProfile, { variant: variant }), plugins.flatMap((plugin) => plugin.organizationCards?.map((Card, index) => (_jsx(Card, { variant: variant }, `${plugin.id}-${index.toString()}`)))), _jsx(OrganizationDangerZone, { variant: variant })] }));
+}

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

@@ -0,0 +1,20 @@
+import { type ButtonProps, type DropdownPopoverProps } from "@heroui/react";
+import type { Organization } from "better-auth/client";
+import { type ReactNode } from "react";
+/** Props for the {@link OrganizationSwitcher} component. */
+export type OrganizationSwitcherProps = {
+    className?: string;
+    placement?: DropdownPopoverProps["placement"];
+    variant?: ButtonProps["variant"];
+    trigger?: ReactNode;
+    hideCreate?: boolean;
+    hidePersonal?: boolean;
+    hideSettings?: boolean;
+    hideSlug?: boolean;
+    setActive?: (organization: Organization | null) => void;
+};
+/**
+ * Renders an organizations dropdown with a trigger button,
+ * header summary, and a menu of organizations to switch to.
+ */
+export declare function OrganizationSwitcher({ className, hideCreate, hidePersonal, hideSettings, hideSlug, setActive, placement, variant, size, trigger, ...props }: OrganizationSwitcherProps & ButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useActiveOrganization, useAuth, useAuthPlugin, useListOrganizations, useSession, useSetActiveOrganization } from "@better-auth-ui/react";
+import { ChevronsExpandVertical, CirclePlus, Gear } from "@gravity-ui/icons";
+import { Button, cn, Dropdown, Label, Link } from "@heroui/react";
+import { buttonVariants } from "@heroui/styles";
+import { useState } from "react";
+import { organizationPlugin } from "../../../lib/auth/organization-plugin";
+import { UserView } from "../user/user-view";
+import { CreateOrganizationDialog } from "./create-organization-dialog";
+import { OrganizationView } from "./organization-view";
+/**
+ * Renders an organizations dropdown with a trigger button,
+ * header summary, and a menu of organizations to switch to.
+ */
+export function OrganizationSwitcher({ className, hideCreate, hidePersonal, hideSettings, hideSlug = true, setActive, placement, variant = "ghost", size = "md", trigger, ...props }) {
+    const { authClient, navigate, basePaths, localization, viewPaths } = useAuth();
+    const { data: session, isPending: sessionPending } = useSession(authClient);
+    const { localization: organizationLocalization, viewPaths: organizationViewPaths, slug } = useAuthPlugin(organizationPlugin);
+    const { data: activeOrganization, isPending: activeOrganizationPending } = useActiveOrganization(authClient);
+    const { data: organizations, isPending: organizationsPending } = useListOrganizations(authClient);
+    const { mutate: setActiveOrganization } = useSetActiveOrganization(authClient);
+    const isPending = sessionPending ||
+        (!!session && (organizationsPending || activeOrganizationPending));
+    const [createOpen, setCreateOpen] = useState(false);
+    const [dropdownOpen, setDropdownOpen] = useState(false);
+    function handleSetActive(organization) {
+        if (setActive) {
+            setActive(organization);
+        }
+        else if (slug !== undefined) {
+            navigate({
+                to: organization
+                    ? `${basePaths.organization}/${organization.slug}/${organizationViewPaths.organization.settings}`
+                    : `${basePaths.settings}/${viewPaths.settings.account}`
+            });
+        }
+        else {
+            setActiveOrganization({ organizationId: organization?.id ?? null });
+        }
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs(Dropdown, { isOpen: dropdownOpen, onOpenChange: setDropdownOpen, children: [trigger ? (_jsx(Dropdown.Trigger, { children: trigger })) : (_jsxs(Button, { variant: variant, className: cn("h-auto px-2 py-2 text-left", className), isDisabled: !session || isPending, "aria-label": organizationLocalization.organization, ...props, children: [isPending ? (_jsx(OrganizationView, { size: size, isPending: true, hideRole: true, hideSlug: hideSlug })) : activeOrganization ? (_jsx(OrganizationView, { size: size, hideRole: true, hideSlug: hideSlug })) : session && !hidePersonal ? (_jsx(UserView, { size: size, hideSubtitle: hideSlug })) : (_jsx(OrganizationView, { size: size, hideRole: true, hideSlug: hideSlug, organization: {
+                                    name: organizationLocalization.organization
+                                } })), _jsx(ChevronsExpandVertical, { className: "size-3 shrink-0 text-muted" })] })), _jsxs(Dropdown.Popover, { placement: placement, className: "max-w-svw", children: [activeOrganization ? (_jsxs("div", { className: "flex items-center justify-between gap-4 px-4 pt-3", children: [_jsx(OrganizationView, { hideRole: true, hideSlug: hideSlug, organization: activeOrganization }), !hideSettings && (_jsxs(Link, { href: slug
+                                            ? `${basePaths.organization}/${slug}/${organizationViewPaths.organization.settings}`
+                                            : `${basePaths.organization}/${organizationViewPaths.organization.settings}`, className: cn(buttonVariants({ variant: "outline", size: "sm" }), "shrink-0 gap-2"), onPress: () => setDropdownOpen(false), children: [_jsx(Gear, { className: "text-muted" }), organizationLocalization.manage] }))] })) : !isPending && session?.user && !hidePersonal ? (_jsxs("div", { className: "flex items-center justify-between gap-4 px-4 pt-3", children: [_jsx(UserView, { hideSubtitle: hideSlug }), !hideSettings && (_jsxs(Link, { href: `${basePaths.settings}/${viewPaths.settings.account}`, className: cn(buttonVariants({ variant: "outline", size: "sm" }), "shrink-0 gap-2"), onPress: () => setDropdownOpen(false), children: [_jsx(Gear, { className: "text-muted" }), localization.settings.settings] }))] })) : null, _jsxs(Dropdown.Menu, { children: [!!activeOrganization && !hidePersonal && (_jsx(Dropdown.Item, { textValue: organizationLocalization.personalAccount, onPress: () => handleSetActive(null), children: _jsx(UserView, { hideSubtitle: hideSlug }) })), organizations
+                                        ?.filter((organization) => organization.id !== activeOrganization?.id)
+                                        ?.map((organization) => (_jsx(Dropdown.Item, { textValue: organization.name, onPress: () => handleSetActive(organization), children: _jsx(OrganizationView, { hideRole: true, hideSlug: hideSlug, organization: organization }) }, organization.id))), !hideCreate && (_jsxs(Dropdown.Item, { textValue: organizationLocalization.createOrganization, onPress: () => setCreateOpen(true), children: [_jsx(CirclePlus, { className: "text-muted" }), _jsx(Label, { children: organizationLocalization.createOrganization })] }))] })] })] }), _jsx(CreateOrganizationDialog, { isOpen: createOpen, onOpenChange: setCreateOpen })] }));
+}

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

@@ -0,0 +1,6 @@
+import type { ComponentProps } from "react";
+import type { OrganizationViewProps } from "./organization-view";
+/**
+ * Placeholder matching {@link OrganizationView} while organization data loads.
+ */
+export declare function OrganizationViewSkeleton({ className, hideSlug, size, ...props }: OrganizationViewProps & ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, Skeleton } from "@heroui/react";
+import { OrganizationLogo } from "./organization-logo";
+/**
+ * Placeholder matching {@link OrganizationView} while organization data loads.
+ */
+export function OrganizationViewSkeleton({ className, hideSlug, size = "md", ...props }) {
+    return (_jsxs("div", { className: cn("flex min-w-0 items-center gap-2", className), ...props, children: [_jsx(OrganizationLogo, { isPending: true, className: size === "sm" ? "size-5" : undefined, size: size === "lg" ? "md" : "sm" }), _jsxs("div", { className: "flex flex-col min-w-0 gap-1", children: [_jsx(Skeleton, { className: "h-3.5 w-20 rounded-lg" }), !hideSlug && (_jsx(Skeleton, { className: "h-3 w-28 rounded-lg mt-[0.5px] mb-0.5" }))] })] }));
+}

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

@@ -0,0 +1,15 @@
+import { type AvatarProps } from "@heroui/react";
+import type { Organization } from "better-auth/client";
+import type { ComponentProps } from "react";
+export type OrganizationViewProps = {
+    className?: string;
+    isPending?: boolean;
+    size?: AvatarProps["size"];
+    hideRole?: boolean;
+    hideSlug?: boolean;
+    organization?: Partial<Organization>;
+};
+/**
+ * Compact organization row: logo, primary name, secondary slug — analogous to {@link UserView}.
+ */
+export declare function OrganizationView({ className, isPending, size, hideSlug, hideRole, organization, ...props }: OrganizationViewProps & ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,17 @@
+import type { OrganizationView } from "@better-auth-ui/core/plugins";
+import { type CardProps } from "@heroui/react";
+import { type ComponentProps } from "react";
+export type OrganizationProps = {
+    className?: string;
+    hideNav?: boolean;
+    path?: string;
+    variant?: CardProps["variant"];
+    /** @remarks `OrganizationView` */
+    view?: OrganizationView;
+};
+/**
+ * Organization management shell: tabs for profile / danger zone and for
+ * people (members / invitations). Path segments come from
+ * `useAuthPlugin(organizationPlugin).viewPaths.organization`.
+ */
+export declare function Organization({ className, hideNav, path, variant, view, ...props }: OrganizationProps & ComponentProps<"div">): import("react/jsx-runtime").JSX.Element | null;