InvitationManagerbeta

Lists sent invitations with their status and lets an admin invite someone new or delete an unused invitation.

01 Usage

Basic

The live preview runs against a mocked demo API (injected via the fetcher prop): sending and deleting invitations works on demo data. The snippet shows the production setup.

Invitations

<script lang="ts">
  import { InvitationManager } from '@urbicon-ui/auth';

  const roles = [
    { value: 'ADMIN', label: 'Admin' },
    { value: 'USER', label: 'User' }
  ];
</script>

<InvitationManager {roles} />

02 Accessibility

Every delete button names its invitation

Each row's button carries an aria-label that appends the invitee's email to the visible "Delete", so a reader can tell the rows apart without first navigating into them.

The email field omits autofill on purpose

The invite field carries no autoComplete hint. You are typing someone else's address, so offering the signed-in user's own email would be wrong every time.

Status is text inside a badge

Pending and registered invitations differ by the localized word in the Badge, not by colour alone. The role Select and the send-email Checkbox get their labels through their label props, so the whole form is navigable by label.

One error region for the form and the list

Sending and deleting share the always-mounted role="alert" region below the heading, so a failure from either path is announced without focus leaving where the user was working.

03 API Reference

9 props 1 required

Prop	Type	Default	Description
`roles` required	`RoleOption[]`	—	Available roles for the invitation menu.
`apiPath`	`string`	`'/api/invitations'`	API base path for the invitation endpoints.
`class`	`string`	—	Extra classes on the root element.
`csrf`	`CsrfClientOptions`	—	CSRF cookie/header names. Only needed when the server overrides the defaults via `config.csrf`. Mutating requests echo the token automatically.
`fetcher`	`typeof globalThis.fetch`	—	Custom fetch implementation for all API calls. Defaults to the global `fetch`. Useful for mock backends in demos/tests or custom retry/auth layers.
`preset`	`string`	—	Apply a named preset registered via `<BlocksProvider presets={{ InvitationManager: { … } }}>`. Resolves after the provider defaults and before this instance's own `slotClasses`, so a project-wide look lives in one place instead of being repeated at every usage site.
`slotClasses`	`Partial<Record<'root' \| 'title' \| 'form' \| 'list' \| 'item' \| 'empty' \| 'error' \| 'inviteLink', string>>`	—	Per-slot class overrides.
`t`	`PartialAuthLocale`	—	Locale overrides, deep-merged over the bundle registered for the active locale — English unless `registerAuthLocale` ran for it. Pass any subset, from a single string to a whole tree.
`unstyled`	`boolean`	—	Strip all default styling.

04 Types

Local type definitions used by this component.

6 types

Only referenced

Name	Kind	Category	Used by	Description
InvitationManagerProps	interface	props	0	—
PartialAuthLocale	type	helper	1	Consumer-facing locale input: any subset of `AuthLocale`. Components accept this as their `t` prop and deep-merge it over the bundle registered for the active locale — English unless `registerAuthLocale` ran for it — so overriding a single string never silently blanks the rest.
CsrfClientOptions	interface	helper	1	—
RoleOption	interface	helper	1	Role option for the InvitationManager menu.
DeepPartial	type	helper	0	Recursive partial: every branch and leaf becomes optional.
AuthLocale	interface	helper	0	The complete auth locale bundle. Every key is required: the bundles this package ships (`en`, `de`) satisfy the full shape, and consumer overrides enter as `PartialAuthLocale`, deep-merged by `mergeAuthLocale` over the bundle registered for the active locale — English unless `registerAuthLocale` ran for it — so component markup reads keys directly, without per-key `?? '…'` fallback literals. Placeholder convention: dynamic values use single-brace tokens (`{n}`, `{name}`, `{email}`) that the consuming component substitutes itself via `String.replace('{token}', value)`. There is deliberately no `{{…}}` runtime interpolator in this package. The key-based translator twin (`authT`/`at`) was removed, so `{{…}}` here would render verbatim.

05 Installation

Import

import { InvitationManager } from '@urbicon-ui/auth';

llm.txt