@thunderid/react 1.5.0 → 1.6.0

package/dist/cjs/components/admin/UserDetails/BaseUserDetails.cjs

@@ -0,0 +1,177 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_useTranslation = require('../../../hooks/useTranslation.cjs');
+const require_Spinner = require('../../primitives/Spinner/Spinner.cjs');
+const require_Button = require('../../primitives/Button/Button.cjs');
+const require_Alert = require('../../primitives/Alert/Alert.cjs');
+const require_TextField = require('../../primitives/TextField/TextField.cjs');
+const require_Avatar = require('../../primitives/Avatar/Avatar.cjs');
+const require_useAdminPartStyles = require('../shared/useAdminPartStyles.cjs');
+const require_AdminSection = require('../shared/AdminSection.cjs');
+const require_AdminParts = require('../shared/AdminParts.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/components/admin/UserDetails/BaseUserDetails.tsx
+const stringify = (value) => {
+	if (value === null || value === void 0) return "";
+	return typeof value === "object" ? JSON.stringify(value) : String(value);
+};
+/**
+* Shows a user's attributes, type, organization unit and groups. Holds no data of its own: pass the
+* user and handle deletion.
+*/
+const BaseUserDetails = ({ actions, children, className, error = null, groups = [], hiddenAttributes = ["password"], isDeleting = false, isLoading = false, isUpdating = false, onDelete, onUpdate, preferences, user }) => {
+	const { t } = require_useTranslation.default(preferences?.i18n);
+	const styles = require_useAdminPartStyles.default();
+	const [draft, setDraft] = (0, react.useState)(null);
+	if (children) {
+		const isWritable = Boolean(user) && !user?.isReadOnly;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className,
+			children: children({
+				attributes: Object.fromEntries(Object.entries(user?.attributes ?? {}).filter(([name]) => !hiddenAttributes.includes(name))),
+				displayName: user ? (0, __thunderid_browser.resolveManagedIdentityName)(user) : "",
+				error,
+				groups,
+				isDeleting,
+				isLoading,
+				isUpdating,
+				onDelete: isWritable ? onDelete : void 0,
+				onUpdate: isWritable ? onUpdate : void 0,
+				user
+			})
+		});
+	}
+	if (isLoading && !user) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AdminSection.default, {
+		block: "user-details",
+		className,
+		preferences,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: styles["muted"],
+			role: "status",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Spinner.default, { size: "small" }),
+				" ",
+				t("admin.common.loading")
+			]
+		})
+	});
+	if (!user) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AdminSection.default, {
+		block: "user-details",
+		className,
+		preferences,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.default, {
+			variant: "error",
+			role: "alert",
+			children: error ?? t("admin.common.errors.not_found")
+		})
+	});
+	const displayName = (0, __thunderid_browser.resolveManagedIdentityName)(user);
+	const attributes = Object.entries(user.attributes ?? {}).filter(([name]) => !hiddenAttributes.includes(name));
+	const editableAttributes = attributes.filter((entry) => typeof entry[1] === "string");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_AdminSection.default, {
+		block: "user-details",
+		className,
+		title: displayName,
+		description: t("admin.users.details.subtitle", { type: user.type }),
+		preferences,
+		actions: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [actions, onDelete && !user.isReadOnly && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AdminParts.ConfirmButton, {
+			confirmText: t("admin.users.details.delete.confirm", { name: displayName }),
+			isLoading: isDeleting,
+			onConfirm: onDelete,
+			children: t("admin.users.details.delete.action")
+		})] }),
+		children: [
+			error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.default, {
+				variant: "error",
+				role: "alert",
+				children: error
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: styles["row"],
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Avatar.Avatar, {
+					name: displayName,
+					size: 48
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: styles["muted"],
+					children: user.ouHandle ?? user.ouId
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AdminParts.Panel, {
+				title: t("admin.users.details.attributes"),
+				actions: onUpdate && !user.isReadOnly && !draft && editableAttributes.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
+					variant: "outline",
+					size: "small",
+					onClick: () => setDraft(Object.fromEntries(editableAttributes)),
+					children: t("admin.users.details.edit.action")
+				}) : void 0,
+				children: draft ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+					className: styles["row"],
+					style: {
+						alignItems: "stretch",
+						flexDirection: "column"
+					},
+					onSubmit: (event) => {
+						event.preventDefault();
+						onUpdate?.({
+							...user.attributes ?? {},
+							...draft
+						});
+						setDraft(null);
+					},
+					children: [Object.keys(draft).map((name) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TextField.default, {
+						name,
+						label: name,
+						"aria-label": name,
+						value: draft[name],
+						onChange: (event) => setDraft((previous) => ({
+							...previous,
+							[name]: event.target.value
+						}))
+					}, name)), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: styles["row"],
+						style: { justifyContent: "flex-end" },
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
+							type: "button",
+							variant: "text",
+							disabled: isUpdating,
+							onClick: () => setDraft(null),
+							children: t("admin.common.actions.cancel")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
+							type: "submit",
+							loading: isUpdating,
+							disabled: isUpdating,
+							children: t("admin.users.details.edit.save")
+						})]
+					})]
+				}) : attributes.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AdminParts.DetailList, { items: attributes.map(([name, value]) => ({
+					label: name,
+					value: stringify(value)
+				})) }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: styles["muted"],
+					children: t("admin.users.details.no_attributes")
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AdminParts.Panel, {
+				title: t("admin.users.details.groups"),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AdminParts.ChipList, {
+					label: t("admin.users.details.groups"),
+					emptyText: t("admin.users.details.no_groups"),
+					items: groups.map((group) => ({
+						id: group.id,
+						label: group.name
+					}))
+				})
+			})
+		]
+	});
+};
+var BaseUserDetails_default = BaseUserDetails;
+
+//#endregion
+exports.default = BaseUserDetails_default;
+//# sourceMappingURL=BaseUserDetails.cjs.map

package/dist/cjs/components/admin/UserDetails/BaseUserDetails.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseUserDetails.cjs","names":["BaseUserDetails: FC<BaseUserDetailsProps>","useTranslation","styles: Record<string, string>","useAdminPartStyles","isWritable: boolean","AdminSection","Spinner","Alert","displayName: string","attributes: [string, unknown][]","editableAttributes: [string, string][]","ConfirmButton","Avatar","Panel","Button","TextField","DetailList","ChipList"],"sources":["../../../../../src/components/admin/UserDetails/BaseUserDetails.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {resolveManagedIdentityName, ManagedUser, MembershipGroup, Preferences} from '@thunderid/browser';\nimport {ChangeEvent, FC, ReactElement, ReactNode, useState} from 'react';\nimport useTranslation from '../../../hooks/useTranslation';\nimport Alert from '../../primitives/Alert/Alert';\nimport {Avatar} from '../../primitives/Avatar/Avatar';\nimport Button from '../../primitives/Button/Button';\nimport Spinner from '../../primitives/Spinner/Spinner';\nimport TextField from '../../primitives/TextField/TextField';\nimport {ChipList, ConfirmButton, DetailList, Panel} from '../shared/AdminParts';\nimport AdminSection from '../shared/AdminSection';\nimport useAdminPartStyles from '../shared/useAdminPartStyles';\n\n/**\n * What {@link BaseUserDetails} hands its `children` render function, so the user can be shown with any UI.\n */\nexport interface BaseUserDetailsRenderProps {\n  /**\n   * The user's attributes, without the hidden ones.\n   */\n  attributes: Record<string, unknown>;\n  /**\n   * The user's display name, or an empty string while there is no user.\n   */\n  displayName: string;\n  error: string | null;\n  groups: MembershipGroup[];\n  isDeleting: boolean;\n  isLoading: boolean;\n  isUpdating: boolean;\n  /**\n   * Deletes the user. Undefined when deletion is not allowed, including for read-only users.\n   */\n  onDelete?: () => void;\n  /**\n   * Saves the given attributes. Undefined when editing is not allowed, including for read-only users.\n   */\n  onUpdate?: (attributes: Record<string, unknown>) => void;\n  user?: ManagedUser;\n}\n\nexport interface BaseUserDetailsProps {\n  /**\n   * Controls rendered next to the user's name.\n   */\n  actions?: ReactNode;\n  /**\n   * Renders custom UI in place of the default view. Receives the user, their visible attributes and\n   * groups, the loading and error state, and the delete and update handlers.\n   */\n  children?: (props: BaseUserDetailsRenderProps) => ReactNode;\n  className?: string;\n  error?: string | null;\n  /**\n   * The groups the user belongs to.\n   */\n  groups?: MembershipGroup[];\n  /**\n   * Attribute names that are never shown, such as credentials.\n   * @default ['password']\n   */\n  hiddenAttributes?: string[];\n  isDeleting?: boolean;\n  isLoading?: boolean;\n  isUpdating?: boolean;\n  /**\n   * Deletes the user. The delete action is hidden when omitted.\n   */\n  onDelete?: () => void;\n  /**\n   * Saves edited attributes. Text attributes become editable only when set. Receives every\n   * attribute, edited or not.\n   */\n  onUpdate?: (attributes: Record<string, unknown>) => void;\n  preferences?: Preferences;\n  user?: ManagedUser;\n}\n\nconst stringify = (value: unknown): string => {\n  if (value === null || value === undefined) {\n    return '';\n  }\n\n  return typeof value === 'object' ? JSON.stringify(value) : String(value as string | number | boolean);\n};\n\n/**\n * Shows a user's attributes, type, organization unit and groups. Holds no data of its own: pass the\n * user and handle deletion.\n */\nconst BaseUserDetails: FC<BaseUserDetailsProps> = ({\n  actions,\n  children,\n  className,\n  error = null,\n  groups = [],\n  hiddenAttributes = ['password'],\n  isDeleting = false,\n  isLoading = false,\n  isUpdating = false,\n  onDelete,\n  onUpdate,\n  preferences,\n  user,\n}: BaseUserDetailsProps): ReactElement => {\n  const {t} = useTranslation(preferences?.i18n);\n  const styles: Record<string, string> = useAdminPartStyles();\n  const [draft, setDraft] = useState<Record<string, string> | null>(null);\n\n  if (children) {\n    const isWritable: boolean = Boolean(user) && !user?.isReadOnly;\n\n    return (\n      <div className={className}>\n        {children({\n          attributes: Object.fromEntries(\n            Object.entries(user?.attributes ?? {}).filter(\n              ([name]: [string, unknown]) => !hiddenAttributes.includes(name),\n            ),\n          ),\n          displayName: user ? resolveManagedIdentityName(user) : '',\n          error,\n          groups,\n          isDeleting,\n          isLoading,\n          isUpdating,\n          onDelete: isWritable ? onDelete : undefined,\n          onUpdate: isWritable ? onUpdate : undefined,\n          user,\n        })}\n      </div>\n    );\n  }\n\n  if (isLoading && !user) {\n    return (\n      <AdminSection block=\"user-details\" className={className} preferences={preferences}>\n        <span className={styles['muted']} role=\"status\">\n          <Spinner size=\"small\" /> {t('admin.common.loading')}\n        </span>\n      </AdminSection>\n    );\n  }\n\n  if (!user) {\n    return (\n      <AdminSection block=\"user-details\" className={className} preferences={preferences}>\n        <Alert variant=\"error\" role=\"alert\">\n          {error ?? t('admin.common.errors.not_found')}\n        </Alert>\n      </AdminSection>\n    );\n  }\n\n  const displayName: string = resolveManagedIdentityName(user);\n  const attributes: [string, unknown][] = Object.entries(user.attributes ?? {}).filter(\n    ([name]: [string, unknown]) => !hiddenAttributes.includes(name),\n  );\n  const editableAttributes: [string, string][] = attributes.filter(\n    (entry: [string, unknown]): entry is [string, string] => typeof entry[1] === 'string',\n  );\n\n  return (\n    <AdminSection\n      block=\"user-details\"\n      className={className}\n      title={displayName}\n      description={t('admin.users.details.subtitle', {type: user.type})}\n      preferences={preferences}\n      actions={\n        <>\n          {actions}\n          {onDelete && !user.isReadOnly && (\n            <ConfirmButton\n              confirmText={t('admin.users.details.delete.confirm', {name: displayName})}\n              isLoading={isDeleting}\n              onConfirm={onDelete}\n            >\n              {t('admin.users.details.delete.action')}\n            </ConfirmButton>\n          )}\n        </>\n      }\n    >\n      {error && (\n        <Alert variant=\"error\" role=\"alert\">\n          {error}\n        </Alert>\n      )}\n      <div className={styles['row']}>\n        <Avatar name={displayName} size={48} />\n        <span className={styles['muted']}>{user.ouHandle ?? user.ouId}</span>\n      </div>\n      <Panel\n        title={t('admin.users.details.attributes')}\n        actions={\n          onUpdate && !user.isReadOnly && !draft && editableAttributes.length > 0 ? (\n            <Button\n              variant=\"outline\"\n              size=\"small\"\n              onClick={(): void => setDraft(Object.fromEntries(editableAttributes))}\n            >\n              {t('admin.users.details.edit.action')}\n            </Button>\n          ) : undefined\n        }\n      >\n        {draft ? (\n          <form\n            className={styles['row']}\n            style={{alignItems: 'stretch', flexDirection: 'column'}}\n            onSubmit={(event): void => {\n              event.preventDefault();\n              onUpdate?.({...(user.attributes ?? {}), ...draft});\n              setDraft(null);\n            }}\n          >\n            {Object.keys(draft).map((name: string) => (\n              <TextField\n                key={name}\n                name={name}\n                label={name}\n                aria-label={name}\n                value={draft[name]}\n                onChange={(event: ChangeEvent<HTMLInputElement>): void =>\n                  setDraft((previous: Record<string, string> | null) => ({...previous, [name]: event.target.value}))\n                }\n              />\n            ))}\n            <div className={styles['row']} style={{justifyContent: 'flex-end'}}>\n              <Button type=\"button\" variant=\"text\" disabled={isUpdating} onClick={(): void => setDraft(null)}>\n                {t('admin.common.actions.cancel')}\n              </Button>\n              <Button type=\"submit\" loading={isUpdating} disabled={isUpdating}>\n                {t('admin.users.details.edit.save')}\n              </Button>\n            </div>\n          </form>\n        ) : attributes.length > 0 ? (\n          <DetailList\n            items={attributes.map(([name, value]: [string, unknown]) => ({label: name, value: stringify(value)}))}\n          />\n        ) : (\n          <span className={styles['muted']}>{t('admin.users.details.no_attributes')}</span>\n        )}\n      </Panel>\n      <Panel title={t('admin.users.details.groups')}>\n        <ChipList\n          label={t('admin.users.details.groups')}\n          emptyText={t('admin.users.details.no_groups')}\n          items={groups.map((group: MembershipGroup) => ({id: group.id, label: group.name}))}\n        />\n      </Panel>\n    </AdminSection>\n  );\n};\n\nexport default BaseUserDetails;\n"],"mappings":"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"}

package/dist/cjs/components/admin/UserDetails/UserDetails.cjs

@@ -0,0 +1,52 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_useTranslation = require('../../../hooks/useTranslation.cjs');
+const require_useGetUser = require('../../../hooks/management/users/useGetUser.cjs');
+const require_useUpdateUser = require('../../../hooks/management/users/useUpdateUser.cjs');
+const require_useDeleteUser = require('../../../hooks/management/users/useDeleteUser.cjs');
+const require_useGetUserGroups = require('../../../hooks/management/users/useGetUserGroups.cjs');
+const require_BaseUserDetails = require('./BaseUserDetails.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/components/admin/UserDetails/UserDetails.tsx
+/**
+* Shows a user and the groups they belong to, and optionally lets the signed-in user delete them.
+*
+* @example
+* ```tsx
+* <UserDetails userId={userId} deletable onDeleted={() => navigate('/users')} />
+* ```
+*/
+const UserDetails = ({ deletable = false, editable = false, onDeleted, preferences, userId,...rest }) => {
+	const { t } = require_useTranslation.default(preferences?.i18n);
+	const user = require_useGetUser.default(userId);
+	const groups = require_useGetUserGroups.default(userId, { limit: 100 });
+	const deletion = require_useDeleteUser.default({ onSuccess: onDeleted });
+	const update = require_useUpdateUser.default();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BaseUserDetails.default, {
+		user: user.data,
+		groups: groups.data?.groups,
+		isLoading: user.isLoading,
+		error: (0, __thunderid_browser.toManagementErrorMessage)(t, user.error, "admin.users.details.error") ?? (0, __thunderid_browser.toManagementErrorMessage)(t, deletion.error, "admin.users.details.delete.error") ?? (0, __thunderid_browser.toManagementErrorMessage)(t, update.error, "admin.users.details.edit.error"),
+		isDeleting: deletion.isLoading,
+		onDelete: deletable ? () => void deletion.mutate(userId) : void 0,
+		isUpdating: update.isLoading,
+		onUpdate: editable && user.data ? (attributes) => void update.mutate({
+			data: {
+				attributes,
+				ouId: user.data.ouId,
+				type: user.data.type
+			},
+			userId
+		}) : void 0,
+		preferences,
+		...rest
+	});
+};
+var UserDetails_default = UserDetails;
+
+//#endregion
+exports.default = UserDetails_default;
+//# sourceMappingURL=UserDetails.cjs.map

package/dist/cjs/components/admin/UserDetails/UserDetails.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserDetails.cjs","names":["UserDetails: FC<UserDetailsProps>","useTranslation","useGetUser","useGetUserGroups","useDeleteUser","useUpdateUser","BaseUserDetails"],"sources":["../../../../../src/components/admin/UserDetails/UserDetails.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {toManagementErrorMessage} from '@thunderid/browser';\nimport {FC, ReactElement} from 'react';\nimport BaseUserDetails, {BaseUserDetailsProps} from './BaseUserDetails';\nimport useDeleteUser from '../../../hooks/management/users/useDeleteUser';\nimport useGetUser from '../../../hooks/management/users/useGetUser';\nimport useGetUserGroups from '../../../hooks/management/users/useGetUserGroups';\nimport useUpdateUser from '../../../hooks/management/users/useUpdateUser';\nimport useTranslation from '../../../hooks/useTranslation';\n\nexport type UserDetailsProps = Omit<\n  BaseUserDetailsProps,\n  'error' | 'groups' | 'isDeleting' | 'isLoading' | 'isUpdating' | 'onDelete' | 'onUpdate' | 'user'\n> & {\n  /**\n   * Whether the user can be deleted from this view.\n   * @default false\n   */\n  deletable?: boolean;\n  /**\n   * Whether the user's text attributes can be edited from this view.\n   * @default false\n   */\n  editable?: boolean;\n  /**\n   * Called after the user has been deleted.\n   */\n  onDeleted?: () => void;\n  userId: string;\n};\n\n/**\n * Shows a user and the groups they belong to, and optionally lets the signed-in user delete them.\n *\n * @example\n * ```tsx\n * <UserDetails userId={userId} deletable onDeleted={() => navigate('/users')} />\n * ```\n */\nconst UserDetails: FC<UserDetailsProps> = ({\n  deletable = false,\n  editable = false,\n  onDeleted,\n  preferences,\n  userId,\n  ...rest\n}: UserDetailsProps): ReactElement => {\n  const {t} = useTranslation(preferences?.i18n);\n  const user = useGetUser(userId);\n  const groups = useGetUserGroups(userId, {limit: 100});\n  const deletion = useDeleteUser({onSuccess: onDeleted});\n  const update = useUpdateUser();\n\n  return (\n    <BaseUserDetails\n      user={user.data}\n      groups={groups.data?.groups}\n      isLoading={user.isLoading}\n      error={\n        toManagementErrorMessage(t, user.error, 'admin.users.details.error') ??\n        toManagementErrorMessage(t, deletion.error, 'admin.users.details.delete.error') ??\n        toManagementErrorMessage(t, update.error, 'admin.users.details.edit.error')\n      }\n      isDeleting={deletion.isLoading}\n      onDelete={deletable ? (): void => void deletion.mutate(userId) : undefined}\n      isUpdating={update.isLoading}\n      onUpdate={\n        editable && user.data\n          ? (attributes: Record<string, unknown>): void =>\n              void update.mutate({data: {attributes, ouId: user.data!.ouId, type: user.data!.type}, userId})\n          : undefined\n      }\n      preferences={preferences}\n      {...rest}\n    />\n  );\n};\n\nexport default UserDetails;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAyCA,MAAMA,eAAqC,EACzC,YAAY,OACZ,WAAW,OACX,WACA,aACA,OACA,GAAG,WACiC;CACpC,MAAM,EAAC,MAAKC,+BAAe,aAAa,KAAK;CAC7C,MAAM,OAAOC,2BAAW,OAAO;CAC/B,MAAM,SAASC,iCAAiB,QAAQ,EAAC,OAAO,KAAI,CAAC;CACrD,MAAM,WAAWC,8BAAc,EAAC,WAAW,WAAU,CAAC;CACtD,MAAM,SAASC,+BAAe;AAE9B,QACE,2CAACC;EACC,MAAM,KAAK;EACX,QAAQ,OAAO,MAAM;EACrB,WAAW,KAAK;EAChB,yDAC2B,GAAG,KAAK,OAAO,4BAA4B,sDAC3C,GAAG,SAAS,OAAO,mCAAmC,sDACtD,GAAG,OAAO,OAAO,iCAAiC;EAE7E,YAAY,SAAS;EACrB,UAAU,kBAAwB,KAAK,SAAS,OAAO,OAAO,GAAG;EACjE,YAAY,OAAO;EACnB,UACE,YAAY,KAAK,QACZ,eACC,KAAK,OAAO,OAAO;GAAC,MAAM;IAAC;IAAY,MAAM,KAAK,KAAM;IAAM,MAAM,KAAK,KAAM;IAAK;GAAE;GAAO,CAAC,GAChG;EAEO;EACb,GAAI;GACJ;;AAIN,0BAAe"}

package/dist/cjs/components/admin/UserList/BaseUserList.cjs

@@ -0,0 +1,120 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_useTranslation = require('../../../hooks/useTranslation.cjs');
+const require_Avatar = require('../../primitives/Avatar/Avatar.cjs');
+const require_DataTable = require('../../primitives/DataTable/DataTable.cjs');
+const require_AdminSearch = require('../shared/AdminSearch.cjs');
+const require_AdminSection = require('../shared/AdminSection.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/components/admin/UserList/BaseUserList.tsx
+/**
+* Lists users with their type and organization unit. Holds no data of its own: pass the page of
+* users and handle selection and pagination.
+*/
+const BaseUserList = ({ actions, children, className, description, error = null, isLoading = false, limit = 20, offset = 0, onPageChange, onSearch, onSelect, preferences, search = null, searchAttributes, selectedUserId, title, totalResults, users }) => {
+	const { t } = require_useTranslation.default(preferences?.i18n);
+	const columns = [
+		{
+			header: t("admin.users.list.columns.name"),
+			id: "name",
+			render: (user) => {
+				const name = (0, __thunderid_browser.resolveManagedIdentityName)(user);
+				const email = user.attributes?.["email"];
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					style: {
+						alignItems: "center",
+						display: "inline-flex",
+						gap: "0.75em"
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Avatar.Avatar, {
+						name,
+						size: 32
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						style: {
+							display: "inline-flex",
+							flexDirection: "column",
+							gap: "0.15em",
+							textAlign: "start"
+						},
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							style: { fontWeight: 500 },
+							children: name
+						}), typeof email === "string" && email.length > 0 && email !== name && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							style: {
+								fontSize: "0.85em",
+								opacity: .65
+							},
+							children: email
+						})]
+					})]
+				});
+			}
+		},
+		{
+			header: t("admin.users.list.columns.type"),
+			id: "type",
+			render: (user) => user.type
+		},
+		{
+			header: t("admin.common.columns.organization_unit"),
+			id: "ou",
+			render: (user) => user.ouHandle ?? user.ouId
+		}
+	];
+	if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className,
+		children: children({
+			columns,
+			error,
+			isLoading,
+			limit,
+			offset,
+			onPageChange,
+			onSelect,
+			onSearch,
+			rows: users,
+			search,
+			searchAttributes,
+			selectedRowId: selectedUserId,
+			totalResults: totalResults ?? users.length,
+			users
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_AdminSection.default, {
+		block: "user-list",
+		className,
+		title: title ?? t("admin.users.list.title"),
+		description,
+		actions,
+		preferences,
+		children: [onSearch && searchAttributes?.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AdminSearch.default, {
+			attributes: searchAttributes,
+			search,
+			onSearch
+		}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DataTable.default, {
+			caption: title?.length ? title : t("admin.users.list.title"),
+			columns,
+			rows: users,
+			getRowId: (user) => user.id,
+			isLoading,
+			error,
+			emptyText: search ? t("admin.common.search.no_results", { value: search.value }) : t("admin.users.list.empty"),
+			onRowClick: onSelect,
+			selectedRowId: selectedUserId,
+			pagination: onPageChange ? {
+				limit,
+				offset,
+				onChange: onPageChange,
+				total: totalResults ?? users.length
+			} : void 0
+		})]
+	});
+};
+var BaseUserList_default = BaseUserList;
+
+//#endregion
+exports.default = BaseUserList_default;
+//# sourceMappingURL=BaseUserList.cjs.map

package/dist/cjs/components/admin/UserList/BaseUserList.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseUserList.cjs","names":["BaseUserList: FC<BaseUserListProps>","useTranslation","columns: DataTableColumn<ManagedUser>[]","name: string","email: unknown","Avatar","AdminSection","AdminSearch","DataTable"],"sources":["../../../../../src/components/admin/UserList/BaseUserList.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {resolveManagedIdentityName, ManagedUser, Preferences, SelectOption} from '@thunderid/browser';\nimport {FC, ReactElement, ReactNode} from 'react';\nimport useTranslation from '../../../hooks/useTranslation';\nimport {Avatar} from '../../primitives/Avatar/Avatar';\nimport DataTable, {DataTableColumn} from '../../primitives/DataTable/DataTable';\nimport {AdminListRenderProps} from '../shared/AdminListRenderProps';\nimport AdminSearch, {AdminSearchValue} from '../shared/AdminSearch';\nimport AdminSection from '../shared/AdminSection';\n\n/**\n * What {@link BaseUserList} hands its `children` render function. `users` and `rows` are the same array.\n */\nexport type BaseUserListRenderProps = AdminListRenderProps<ManagedUser> & {users: ManagedUser[]};\n\nexport interface BaseUserListProps {\n  /**\n   * Controls rendered next to the title, such as a button that opens `UserCreate`.\n   */\n  actions?: ReactNode;\n  /**\n   * Renders custom UI in place of the default table, for example a third-party data grid. Receives\n   * the users, the default columns, the loading and error state, and the pagination and selection\n   * handlers.\n   */\n  children?: (props: BaseUserListRenderProps) => ReactNode;\n  className?: string;\n  description?: string;\n  error?: string | null;\n  isLoading?: boolean;\n  /**\n   * Page size.\n   * @default 20\n   */\n  limit?: number;\n  offset?: number;\n  /**\n   * Called with the offset of the page to show. Pagination is hidden when omitted.\n   */\n  onPageChange?: (offset: number) => void;\n  /**\n   * Applies a search on the server, or clears it with `null`. The search form shows only when this and\n   * `searchAttributes` are set.\n   */\n  onSearch?: (search: AdminSearchValue | null) => void;\n  /**\n   * Called when a user is chosen. Rows are selectable only when set.\n   */\n  onSelect?: (user: ManagedUser) => void;\n  preferences?: Preferences;\n  /**\n   * The search currently applied, if any. While set, an empty page says nothing matched.\n   */\n  search?: AdminSearchValue | null;\n  /**\n   * The user attributes that can be searched, with translated labels.\n   */\n  searchAttributes?: SelectOption[];\n  selectedUserId?: string;\n  /**\n   * Heading of the list. Pass an empty string to hide it.\n   */\n  title?: string;\n  totalResults?: number;\n  users: ManagedUser[];\n}\n\n/**\n * Lists users with their type and organization unit. Holds no data of its own: pass the page of\n * users and handle selection and pagination.\n */\nconst BaseUserList: FC<BaseUserListProps> = ({\n  actions,\n  children,\n  className,\n  description,\n  error = null,\n  isLoading = false,\n  limit = 20,\n  offset = 0,\n  onPageChange,\n  onSearch,\n  onSelect,\n  preferences,\n  search = null,\n  searchAttributes,\n  selectedUserId,\n  title,\n  totalResults,\n  users,\n}: BaseUserListProps): ReactElement => {\n  const {t} = useTranslation(preferences?.i18n);\n\n  const columns: DataTableColumn<ManagedUser>[] = [\n    {\n      header: t('admin.users.list.columns.name'),\n      id: 'name',\n      render: (user: ManagedUser): ReactNode => {\n        const name: string = resolveManagedIdentityName(user);\n        const email: unknown = user.attributes?.['email'];\n\n        return (\n          <span style={{alignItems: 'center', display: 'inline-flex', gap: '0.75em'}}>\n            <Avatar name={name} size={32} />\n            <span style={{display: 'inline-flex', flexDirection: 'column', gap: '0.15em', textAlign: 'start'}}>\n              <span style={{fontWeight: 500}}>{name}</span>\n              {typeof email === 'string' && email.length > 0 && email !== name && (\n                <span style={{fontSize: '0.85em', opacity: 0.65}}>{email}</span>\n              )}\n            </span>\n          </span>\n        );\n      },\n    },\n    {header: t('admin.users.list.columns.type'), id: 'type', render: (user: ManagedUser): ReactNode => user.type},\n    {\n      header: t('admin.common.columns.organization_unit'),\n      id: 'ou',\n      render: (user: ManagedUser): ReactNode => user.ouHandle ?? user.ouId,\n    },\n  ];\n\n  if (children) {\n    return (\n      <div className={className}>\n        {children({\n          columns,\n          error,\n          isLoading,\n          limit,\n          offset,\n          onPageChange,\n          onSelect,\n          onSearch,\n          rows: users,\n          search,\n          searchAttributes,\n          selectedRowId: selectedUserId,\n          totalResults: totalResults ?? users.length,\n          users,\n        })}\n      </div>\n    );\n  }\n\n  return (\n    <AdminSection\n      block=\"user-list\"\n      className={className}\n      title={title ?? t('admin.users.list.title')}\n      description={description}\n      actions={actions}\n      preferences={preferences}\n    >\n      {onSearch && searchAttributes?.length ? (\n        <AdminSearch attributes={searchAttributes} search={search} onSearch={onSearch} />\n      ) : null}\n      <DataTable\n        caption={title?.length ? title : t('admin.users.list.title')}\n        columns={columns}\n        rows={users}\n        getRowId={(user: ManagedUser): string => user.id}\n        isLoading={isLoading}\n        error={error}\n        emptyText={search ? t('admin.common.search.no_results', {value: search.value}) : t('admin.users.list.empty')}\n        onRowClick={onSelect}\n        selectedRowId={selectedUserId}\n        pagination={\n          onPageChange ? {limit, offset, onChange: onPageChange, total: totalResults ?? users.length} : undefined\n        }\n      />\n    </AdminSection>\n  );\n};\n\nexport default BaseUserList;\n"],"mappings":";;;;;;;;;;;;;;;;AAyEA,MAAMA,gBAAuC,EAC3C,SACA,UACA,WACA,aACA,QAAQ,MACR,YAAY,OACZ,QAAQ,IACR,SAAS,GACT,cACA,UACA,UACA,aACA,SAAS,MACT,kBACA,gBACA,OACA,cACA,YACqC;CACrC,MAAM,EAAC,MAAKC,+BAAe,aAAa,KAAK;CAE7C,MAAMC,UAA0C;EAC9C;GACE,QAAQ,EAAE,gCAAgC;GAC1C,IAAI;GACJ,SAAS,SAAiC;IACxC,MAAMC,2DAA0C,KAAK;IACrD,MAAMC,QAAiB,KAAK,aAAa;AAEzC,WACE,4CAAC;KAAK,OAAO;MAAC,YAAY;MAAU,SAAS;MAAe,KAAK;MAAS;gBACxE,2CAACC;MAAa;MAAM,MAAM;OAAM,EAChC,4CAAC;MAAK,OAAO;OAAC,SAAS;OAAe,eAAe;OAAU,KAAK;OAAU,WAAW;OAAQ;iBAC/F,2CAAC;OAAK,OAAO,EAAC,YAAY,KAAI;iBAAG;QAAY,EAC5C,OAAO,UAAU,YAAY,MAAM,SAAS,KAAK,UAAU,QAC1D,2CAAC;OAAK,OAAO;QAAC,UAAU;QAAU,SAAS;QAAK;iBAAG;QAAa;OAE7D;MACF;;GAGZ;EACD;GAAC,QAAQ,EAAE,gCAAgC;GAAE,IAAI;GAAQ,SAAS,SAAiC,KAAK;GAAK;EAC7G;GACE,QAAQ,EAAE,yCAAyC;GACnD,IAAI;GACJ,SAAS,SAAiC,KAAK,YAAY,KAAK;GACjE;EACF;AAED,KAAI,SACF,QACE,2CAAC;EAAe;YACb,SAAS;GACR;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,MAAM;GACN;GACA;GACA,eAAe;GACf,cAAc,gBAAgB,MAAM;GACpC;GACD,CAAC;GACE;AAIV,QACE,4CAACC;EACC,OAAM;EACK;EACX,OAAO,SAAS,EAAE,yBAAyB;EAC9B;EACJ;EACI;aAEZ,YAAY,kBAAkB,SAC7B,2CAACC;GAAY,YAAY;GAA0B;GAAkB;IAAY,GAC/E,MACJ,2CAACC;GACC,SAAS,OAAO,SAAS,QAAQ,EAAE,yBAAyB;GACnD;GACT,MAAM;GACN,WAAW,SAA8B,KAAK;GACnC;GACJ;GACP,WAAW,SAAS,EAAE,kCAAkC,EAAC,OAAO,OAAO,OAAM,CAAC,GAAG,EAAE,yBAAyB;GAC5G,YAAY;GACZ,eAAe;GACf,YACE,eAAe;IAAC;IAAO;IAAQ,UAAU;IAAc,OAAO,gBAAgB,MAAM;IAAO,GAAG;IAEhG;GACW;;AAInB,2BAAe"}

package/dist/cjs/components/admin/UserList/UserList.cjs

@@ -0,0 +1,59 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_useTranslation = require('../../../hooks/useTranslation.cjs');
+const require_useGetUsers = require('../../../hooks/management/users/useGetUsers.cjs');
+const require_BaseUserList = require('./BaseUserList.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/components/admin/UserList/UserList.tsx
+/**
+* Lists the users the signed-in user is allowed to see, a page at a time.
+*
+* @example
+* ```tsx
+* <UserList onSelect={(user) => setSelectedUserId(user.id)} />
+* ```
+*/
+const UserList = ({ filter, limit = 20, preferences, searchable = true, searchAttributes,...rest }) => {
+	const { t } = require_useTranslation.default(preferences?.i18n);
+	const [offset, setOffset] = (0, react.useState)(0);
+	const [search, setSearch] = (0, react.useState)(null);
+	const attributes = searchAttributes ?? [{
+		label: t("admin.users.list.search.username"),
+		value: "username"
+	}, {
+		label: t("admin.users.list.search.email"),
+		value: "email"
+	}];
+	const { data, error, isLoading } = require_useGetUsers.default({
+		filter: filter ?? (search ? (0, __thunderid_browser.toEqualityFilter)(search.attribute, search.value) : void 0),
+		limit,
+		offset
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BaseUserList.default, {
+		users: data?.users ?? [],
+		totalResults: data?.totalResults,
+		isLoading,
+		error: (0, __thunderid_browser.toManagementErrorMessage)(t, error, "admin.users.list.error"),
+		limit,
+		offset,
+		onPageChange: setOffset,
+		search,
+		searchAttributes: attributes,
+		onSearch: searchable && !filter ? (next) => {
+			setSearch(next);
+			setOffset(0);
+		} : void 0,
+		preferences,
+		...rest
+	});
+};
+var UserList_default = UserList;
+
+//#endregion
+exports.default = UserList_default;
+//# sourceMappingURL=UserList.cjs.map

package/dist/cjs/components/admin/UserList/UserList.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserList.cjs","names":["UserList: FC<UserListProps>","useTranslation","attributes: SelectOption[]","useGetUsers","BaseUserList"],"sources":["../../../../../src/components/admin/UserList/UserList.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {toEqualityFilter, toManagementErrorMessage, SelectOption} from '@thunderid/browser';\nimport {FC, ReactElement, useState} from 'react';\nimport BaseUserList, {BaseUserListProps} from './BaseUserList';\nimport {AdminSearchValue} from '../shared/AdminSearch';\nimport useGetUsers from '../../../hooks/management/users/useGetUsers';\nimport useTranslation from '../../../hooks/useTranslation';\n\nexport type UserListProps = Omit<\n  BaseUserListProps,\n  'error' | 'isLoading' | 'offset' | 'onPageChange' | 'onSearch' | 'search' | 'totalResults' | 'users'\n> & {\n  /**\n   * Server-side filter expression, for example `username eq \"ada\"`. Hides the search form, since the\n   * server takes one expression.\n   */\n  filter?: string;\n  /**\n   * Whether to show the search form. The server matches the whole value of the chosen attribute.\n   * @default true\n   */\n  searchable?: boolean;\n};\n\n/**\n * Lists the users the signed-in user is allowed to see, a page at a time.\n *\n * @example\n * ```tsx\n * <UserList onSelect={(user) => setSelectedUserId(user.id)} />\n * ```\n */\nconst UserList: FC<UserListProps> = ({\n  filter,\n  limit = 20,\n  preferences,\n  searchable = true,\n  searchAttributes,\n  ...rest\n}: UserListProps): ReactElement => {\n  const {t} = useTranslation(preferences?.i18n);\n  const [offset, setOffset] = useState<number>(0);\n  const [search, setSearch] = useState<AdminSearchValue | null>(null);\n  const attributes: SelectOption[] = searchAttributes ?? [\n    {label: t('admin.users.list.search.username'), value: 'username'},\n    {label: t('admin.users.list.search.email'), value: 'email'},\n  ];\n  const {data, error, isLoading} = useGetUsers({\n    filter: filter ?? (search ? toEqualityFilter(search.attribute, search.value) : undefined),\n    limit,\n    offset,\n  });\n\n  return (\n    <BaseUserList\n      users={data?.users ?? []}\n      totalResults={data?.totalResults}\n      isLoading={isLoading}\n      error={toManagementErrorMessage(t, error, 'admin.users.list.error')}\n      limit={limit}\n      offset={offset}\n      onPageChange={setOffset}\n      search={search}\n      searchAttributes={attributes}\n      onSearch={\n        searchable && !filter\n          ? (next: AdminSearchValue | null): void => {\n              setSearch(next);\n              setOffset(0);\n            }\n          : undefined\n      }\n      preferences={preferences}\n      {...rest}\n    />\n  );\n};\n\nexport default UserList;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAkCA,MAAMA,YAA+B,EACnC,QACA,QAAQ,IACR,aACA,aAAa,MACb,iBACA,GAAG,WAC8B;CACjC,MAAM,EAAC,MAAKC,+BAAe,aAAa,KAAK;CAC7C,MAAM,CAAC,QAAQ,iCAA8B,EAAE;CAC/C,MAAM,CAAC,QAAQ,iCAA+C,KAAK;CACnE,MAAMC,aAA6B,oBAAoB,CACrD;EAAC,OAAO,EAAE,mCAAmC;EAAE,OAAO;EAAW,EACjE;EAAC,OAAO,EAAE,gCAAgC;EAAE,OAAO;EAAQ,CAC5D;CACD,MAAM,EAAC,MAAM,OAAO,cAAaC,4BAAY;EAC3C,QAAQ,WAAW,mDAA0B,OAAO,WAAW,OAAO,MAAM,GAAG;EAC/E;EACA;EACD,CAAC;AAEF,QACE,2CAACC;EACC,OAAO,MAAM,SAAS,EAAE;EACxB,cAAc,MAAM;EACT;EACX,yDAAgC,GAAG,OAAO,yBAAyB;EAC5D;EACC;EACR,cAAc;EACN;EACR,kBAAkB;EAClB,UACE,cAAc,CAAC,UACV,SAAwC;AACvC,aAAU,KAAK;AACf,aAAU,EAAE;MAEd;EAEO;EACb,GAAI;GACJ;;AAIN,uBAAe"}

package/dist/cjs/components/admin/shared/AdminParts.cjs

@@ -0,0 +1,118 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_useTranslation = require('../../../hooks/useTranslation.cjs');
+const require_Button = require('../../primitives/Button/Button.cjs');
+const require_useAdminPartStyles = require('./useAdminPartStyles.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/components/admin/shared/AdminParts.tsx
+/**
+* Renders label and value pairs as a description list.
+*/
+const DetailList = ({ items }) => {
+	const styles = require_useAdminPartStyles.default();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dl", {
+		className: styles["detail"],
+		children: items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			style: { display: "contents" },
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", {
+				className: styles["detailLabel"],
+				children: item.label
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", {
+				className: styles["detailValue"],
+				children: item.value
+			})]
+		}, item.label))
+	});
+};
+/**
+* A bordered block with a heading, used to group parts of a details view.
+*/
+const Panel = ({ actions, children, title }) => {
+	const styles = require_useAdminPartStyles.default();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: styles["panel"],
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: styles["row"],
+			style: { justifyContent: "space-between" },
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+				className: styles["panelTitle"],
+				children: title
+			}), actions]
+		}), children]
+	});
+};
+/**
+* Renders a list of named items, each optionally removable.
+*/
+const ChipList = ({ emptyText, items, label }) => {
+	const styles = require_useAdminPartStyles.default();
+	if (items.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: styles["muted"],
+		children: emptyText
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+		className: styles["chipList"],
+		"aria-label": label,
+		children: items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+			className: styles["chip"],
+			children: [item.label, item.onRemove && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
+				variant: "icon",
+				size: "small",
+				"aria-label": item.removeLabel,
+				onClick: item.onRemove,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					"aria-hidden": "true",
+					children: "×"
+				})
+			})]
+		}, item.id))
+	});
+};
+/**
+* A destructive action that asks for confirmation inline before it runs.
+*/
+const ConfirmButton = ({ children, confirmText, disabled = false, isLoading = false, onConfirm }) => {
+	const styles = require_useAdminPartStyles.default();
+	const { t } = require_useTranslation.default();
+	const [isConfirming, setIsConfirming] = (0, react.useState)(false);
+	if (!isConfirming) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
+		variant: "outline",
+		color: "error",
+		disabled,
+		onClick: () => setIsConfirming(true),
+		children
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: styles["confirm"],
+		role: "group",
+		"aria-label": confirmText,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: confirmText }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
+				variant: "text",
+				size: "small",
+				disabled: isLoading,
+				onClick: () => setIsConfirming(false),
+				children: t("admin.common.actions.cancel")
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
+				color: "error",
+				size: "small",
+				loading: isLoading,
+				disabled: isLoading,
+				onClick: onConfirm,
+				children: t("admin.common.actions.confirm")
+			})
+		]
+	});
+};
+
+//#endregion
+exports.ChipList = ChipList;
+exports.ConfirmButton = ConfirmButton;
+exports.DetailList = DetailList;
+exports.Panel = Panel;
+//# sourceMappingURL=AdminParts.cjs.map

package/dist/cjs/components/admin/shared/AdminParts.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdminParts.cjs","names":["DetailList: FC<DetailListProps>","styles: Record<string, string>","useAdminPartStyles","Panel: FC<PanelProps>","ChipList: FC<ChipListProps>","Button","ConfirmButton: FC<ConfirmButtonProps>","useTranslation"],"sources":["../../../../../src/components/admin/shared/AdminParts.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {FC, ReactElement, ReactNode, useState} from 'react';\nimport useAdminPartStyles from './useAdminPartStyles';\nimport useTranslation from '../../../hooks/useTranslation';\nimport Button from '../../primitives/Button/Button';\n\n/**\n * One label and value pair of a {@link DetailList}.\n */\nexport interface DetailListItem {\n  label: string;\n  value: ReactNode;\n}\n\nexport interface DetailListProps {\n  items: DetailListItem[];\n}\n\n/**\n * Renders label and value pairs as a description list.\n */\nexport const DetailList: FC<DetailListProps> = ({items}: DetailListProps): ReactElement => {\n  const styles: Record<string, string> = useAdminPartStyles();\n\n  return (\n    <dl className={styles['detail']}>\n      {items.map((item: DetailListItem) => (\n        <div key={item.label} style={{display: 'contents'}}>\n          <dt className={styles['detailLabel']}>{item.label}</dt>\n          <dd className={styles['detailValue']}>{item.value}</dd>\n        </div>\n      ))}\n    </dl>\n  );\n};\n\nexport interface PanelProps {\n  actions?: ReactNode;\n  children?: ReactNode;\n  title: string;\n}\n\n/**\n * A bordered block with a heading, used to group parts of a details view.\n */\nexport const Panel: FC<PanelProps> = ({actions, children, title}: PanelProps): ReactElement => {\n  const styles: Record<string, string> = useAdminPartStyles();\n\n  return (\n    <section className={styles['panel']}>\n      <div className={styles['row']} style={{justifyContent: 'space-between'}}>\n        <h3 className={styles['panelTitle']}>{title}</h3>\n        {actions}\n      </div>\n      {children}\n    </section>\n  );\n};\n\nexport interface ChipListProps {\n  /**\n   * Accessible name of the list, already translated.\n   */\n  label: string;\n  /**\n   * Message shown when there are no items, already translated.\n   */\n  emptyText: string;\n  items: {id: string; label: string; onRemove?: () => void; removeLabel?: string}[];\n}\n\n/**\n * Renders a list of named items, each optionally removable.\n */\nexport const ChipList: FC<ChipListProps> = ({emptyText, items, label}: ChipListProps): ReactElement => {\n  const styles: Record<string, string> = useAdminPartStyles();\n\n  if (items.length === 0) {\n    return <span className={styles['muted']}>{emptyText}</span>;\n  }\n\n  return (\n    <ul className={styles['chipList']} aria-label={label}>\n      {items.map((item: ChipListProps['items'][number]) => (\n        <li key={item.id} className={styles['chip']}>\n          {item.label}\n          {item.onRemove && (\n            <Button variant=\"icon\" size=\"small\" aria-label={item.removeLabel} onClick={item.onRemove}>\n              <span aria-hidden=\"true\">×</span>\n            </Button>\n          )}\n        </li>\n      ))}\n    </ul>\n  );\n};\n\nexport interface ConfirmButtonProps {\n  /**\n   * Label of the button that starts the action, already translated.\n   */\n  children: ReactNode;\n  /**\n   * Question asked before the action runs, already translated.\n   */\n  confirmText: string;\n  disabled?: boolean;\n  isLoading?: boolean;\n  onConfirm: () => void;\n}\n\n/**\n * A destructive action that asks for confirmation inline before it runs.\n */\nexport const ConfirmButton: FC<ConfirmButtonProps> = ({\n  children,\n  confirmText,\n  disabled = false,\n  isLoading = false,\n  onConfirm,\n}: ConfirmButtonProps): ReactElement => {\n  const styles: Record<string, string> = useAdminPartStyles();\n  const {t} = useTranslation();\n  const [isConfirming, setIsConfirming] = useState<boolean>(false);\n\n  if (!isConfirming) {\n    return (\n      <Button variant=\"outline\" color=\"error\" disabled={disabled} onClick={(): void => setIsConfirming(true)}>\n        {children}\n      </Button>\n    );\n  }\n\n  return (\n    <span className={styles['confirm']} role=\"group\" aria-label={confirmText}>\n      <span>{confirmText}</span>\n      <Button variant=\"text\" size=\"small\" disabled={isLoading} onClick={(): void => setIsConfirming(false)}>\n        {t('admin.common.actions.cancel')}\n      </Button>\n      <Button color=\"error\" size=\"small\" loading={isLoading} disabled={isLoading} onClick={onConfirm}>\n        {t('admin.common.actions.confirm')}\n      </Button>\n    </span>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAuBA,MAAaA,cAAmC,EAAC,YAA0C;CACzF,MAAMC,SAAiCC,oCAAoB;AAE3D,QACE,2CAAC;EAAG,WAAW,OAAO;YACnB,MAAM,KAAK,SACV,4CAAC;GAAqB,OAAO,EAAC,SAAS,YAAW;cAChD,2CAAC;IAAG,WAAW,OAAO;cAAiB,KAAK;KAAW,EACvD,2CAAC;IAAG,WAAW,OAAO;cAAiB,KAAK;KAAW;KAF/C,KAAK,MAGT,CACN;GACC;;;;;AAaT,MAAaC,SAAyB,EAAC,SAAS,UAAU,YAAqC;CAC7F,MAAMF,SAAiCC,oCAAoB;AAE3D,QACE,4CAAC;EAAQ,WAAW,OAAO;aACzB,4CAAC;GAAI,WAAW,OAAO;GAAQ,OAAO,EAAC,gBAAgB,iBAAgB;cACrE,2CAAC;IAAG,WAAW,OAAO;cAAgB;KAAW,EAChD;IACG,EACL;GACO;;;;;AAmBd,MAAaE,YAA+B,EAAC,WAAW,OAAO,YAAwC;CACrG,MAAMH,SAAiCC,oCAAoB;AAE3D,KAAI,MAAM,WAAW,EACnB,QAAO,2CAAC;EAAK,WAAW,OAAO;YAAW;GAAiB;AAG7D,QACE,2CAAC;EAAG,WAAW,OAAO;EAAa,cAAY;YAC5C,MAAM,KAAK,SACV,4CAAC;GAAiB,WAAW,OAAO;cACjC,KAAK,OACL,KAAK,YACJ,2CAACG;IAAO,SAAQ;IAAO,MAAK;IAAQ,cAAY,KAAK;IAAa,SAAS,KAAK;cAC9E,2CAAC;KAAK,eAAY;eAAO;MAAQ;KAC1B;KALJ,KAAK,GAOT,CACL;GACC;;;;;AAqBT,MAAaC,iBAAyC,EACpD,UACA,aACA,WAAW,OACX,YAAY,OACZ,gBACsC;CACtC,MAAML,SAAiCC,oCAAoB;CAC3D,MAAM,EAAC,MAAKK,gCAAgB;CAC5B,MAAM,CAAC,cAAc,uCAAqC,MAAM;AAEhE,KAAI,CAAC,aACH,QACE,2CAACF;EAAO,SAAQ;EAAU,OAAM;EAAkB;EAAU,eAAqB,gBAAgB,KAAK;EACnG;GACM;AAIb,QACE,4CAAC;EAAK,WAAW,OAAO;EAAY,MAAK;EAAQ,cAAY;;GAC3D,2CAAC,oBAAM,cAAmB;GAC1B,2CAACA;IAAO,SAAQ;IAAO,MAAK;IAAQ,UAAU;IAAW,eAAqB,gBAAgB,MAAM;cACjG,EAAE,8BAA8B;KAC1B;GACT,2CAACA;IAAO,OAAM;IAAQ,MAAK;IAAQ,SAAS;IAAW,UAAU;IAAW,SAAS;cAClF,EAAE,+BAA+B;KAC3B;;GACJ"}