@thunderid/react 1.5.0 → 1.7.0

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

@@ -0,0 +1,112 @@
+import useTranslation_default from "../../../hooks/useTranslation.js";
+import Button_default from "../../primitives/Button/Button.js";
+import useAdminPartStyles_default from "./useAdminPartStyles.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/admin/shared/AdminParts.tsx
+/**
+* Renders label and value pairs as a description list.
+*/
+const DetailList = ({ items }) => {
+	const styles = useAdminPartStyles_default();
+	return /* @__PURE__ */ jsx("dl", {
+		className: styles["detail"],
+		children: items.map((item) => /* @__PURE__ */ jsxs("div", {
+			style: { display: "contents" },
+			children: [/* @__PURE__ */ jsx("dt", {
+				className: styles["detailLabel"],
+				children: item.label
+			}), /* @__PURE__ */ 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 = useAdminPartStyles_default();
+	return /* @__PURE__ */ jsxs("section", {
+		className: styles["panel"],
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: styles["row"],
+			style: { justifyContent: "space-between" },
+			children: [/* @__PURE__ */ 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 = useAdminPartStyles_default();
+	if (items.length === 0) return /* @__PURE__ */ jsx("span", {
+		className: styles["muted"],
+		children: emptyText
+	});
+	return /* @__PURE__ */ jsx("ul", {
+		className: styles["chipList"],
+		"aria-label": label,
+		children: items.map((item) => /* @__PURE__ */ jsxs("li", {
+			className: styles["chip"],
+			children: [item.label, item.onRemove && /* @__PURE__ */ jsx(Button_default, {
+				variant: "icon",
+				size: "small",
+				"aria-label": item.removeLabel,
+				onClick: item.onRemove,
+				children: /* @__PURE__ */ 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 = useAdminPartStyles_default();
+	const { t } = useTranslation_default();
+	const [isConfirming, setIsConfirming] = useState(false);
+	if (!isConfirming) return /* @__PURE__ */ jsx(Button_default, {
+		variant: "outline",
+		color: "error",
+		disabled,
+		onClick: () => setIsConfirming(true),
+		children
+	});
+	return /* @__PURE__ */ jsxs("span", {
+		className: styles["confirm"],
+		role: "group",
+		"aria-label": confirmText,
+		children: [
+			/* @__PURE__ */ jsx("span", { children: confirmText }),
+			/* @__PURE__ */ jsx(Button_default, {
+				variant: "text",
+				size: "small",
+				disabled: isLoading,
+				onClick: () => setIsConfirming(false),
+				children: t("admin.common.actions.cancel")
+			}),
+			/* @__PURE__ */ jsx(Button_default, {
+				color: "error",
+				size: "small",
+				loading: isLoading,
+				disabled: isLoading,
+				onClick: onConfirm,
+				children: t("admin.common.actions.confirm")
+			})
+		]
+	});
+};
+
+//#endregion
+export { ChipList, ConfirmButton, DetailList, Panel };
+//# sourceMappingURL=AdminParts.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AdminParts.js","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,4BAAoB;AAE3D,QACE,oBAAC;EAAG,WAAW,OAAO;YACnB,MAAM,KAAK,SACV,qBAAC;GAAqB,OAAO,EAAC,SAAS,YAAW;cAChD,oBAAC;IAAG,WAAW,OAAO;cAAiB,KAAK;KAAW,EACvD,oBAAC;IAAG,WAAW,OAAO;cAAiB,KAAK;KAAW;KAF/C,KAAK,MAGT,CACN;GACC;;;;;AAaT,MAAaC,SAAyB,EAAC,SAAS,UAAU,YAAqC;CAC7F,MAAMF,SAAiCC,4BAAoB;AAE3D,QACE,qBAAC;EAAQ,WAAW,OAAO;aACzB,qBAAC;GAAI,WAAW,OAAO;GAAQ,OAAO,EAAC,gBAAgB,iBAAgB;cACrE,oBAAC;IAAG,WAAW,OAAO;cAAgB;KAAW,EAChD;IACG,EACL;GACO;;;;;AAmBd,MAAaE,YAA+B,EAAC,WAAW,OAAO,YAAwC;CACrG,MAAMH,SAAiCC,4BAAoB;AAE3D,KAAI,MAAM,WAAW,EACnB,QAAO,oBAAC;EAAK,WAAW,OAAO;YAAW;GAAiB;AAG7D,QACE,oBAAC;EAAG,WAAW,OAAO;EAAa,cAAY;YAC5C,MAAM,KAAK,SACV,qBAAC;GAAiB,WAAW,OAAO;cACjC,KAAK,OACL,KAAK,YACJ,oBAACG;IAAO,SAAQ;IAAO,MAAK;IAAQ,cAAY,KAAK;IAAa,SAAS,KAAK;cAC9E,oBAAC;KAAK,eAAY;eAAO;MAAQ;KAC1B;KALJ,KAAK,GAOT,CACL;GACC;;;;;AAqBT,MAAaC,iBAAyC,EACpD,UACA,aACA,WAAW,OACX,YAAY,OACZ,gBACsC;CACtC,MAAML,SAAiCC,4BAAoB;CAC3D,MAAM,EAAC,MAAKK,wBAAgB;CAC5B,MAAM,CAAC,cAAc,mBAAmB,SAAkB,MAAM;AAEhE,KAAI,CAAC,aACH,QACE,oBAACF;EAAO,SAAQ;EAAU,OAAM;EAAkB;EAAU,eAAqB,gBAAgB,KAAK;EACnG;GACM;AAIb,QACE,qBAAC;EAAK,WAAW,OAAO;EAAY,MAAK;EAAQ,cAAY;;GAC3D,oBAAC,oBAAM,cAAmB;GAC1B,oBAACA;IAAO,SAAQ;IAAO,MAAK;IAAQ,UAAU;IAAW,eAAqB,gBAAgB,MAAM;cACjG,EAAE,8BAA8B;KAC1B;GACT,oBAACA;IAAO,OAAM;IAAQ,MAAK;IAAQ,SAAS;IAAW,UAAU;IAAW,SAAS;cAClF,EAAE,+BAA+B;KAC3B;;GACJ"}

package/dist/components/admin/shared/AdminParts.styles.d.ts

@@ -0,0 +1,12 @@
+import { Theme } from '@thunderid/browser';
+/**
+ * Creates the styles for the detail list, chip list and inline confirmation used by the admin
+ * components.
+ *
+ * @param theme - The theme object containing design tokens.
+ * @param colorScheme - The current color scheme, used for memoization.
+ * @returns The CSS class names for each part.
+ */
+declare const useStyles: (theme: Theme, colorScheme: string) => Record<string, string>;
+export default useStyles;
+//# sourceMappingURL=AdminParts.styles.d.ts.map

package/dist/components/admin/shared/AdminParts.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdminParts.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/admin/shared/AdminParts.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAIzC;;;;;;;GAOG;AACH,QAAA,MAAM,SAAS,GAAI,OAAO,KAAK,EAAE,aAAa,MAAM,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAuElD,CAAC;AAE3B,eAAe,SAAS,CAAC"}

package/dist/components/admin/shared/AdminParts.styles.js

@@ -0,0 +1,87 @@
+import { css } from "../../../styles/emotion.js";
+import { useMemo } from "react";
+
+//#region src/components/admin/shared/AdminParts.styles.ts
+/**
+* Creates the styles for the detail list, chip list and inline confirmation used by the admin
+* components.
+*
+* @param theme - The theme object containing design tokens.
+* @param colorScheme - The current color scheme, used for memoization.
+* @returns The CSS class names for each part.
+*/
+const useStyles = (theme, colorScheme) => useMemo(() => {
+	const unit = theme.vars.spacing.unit;
+	return {
+		chip: css`
+        display: inline-flex;
+        align-items: center;
+        gap: calc(${unit} / 2);
+        padding: calc(${unit} / 2) ${unit};
+        border-radius: 999px;
+        border: 1px solid ${theme.vars.colors.border};
+        background: ${theme.vars.colors.background.surface};
+        font-size: ${theme.vars.typography.fontSizes.sm};
+        color: ${theme.vars.colors.text.primary};
+      `,
+		chipList: css`
+        display: flex;
+        flex-wrap: wrap;
+        gap: ${unit};
+        margin: 0;
+        padding: 0;
+        list-style: none;
+      `,
+		confirm: css`
+        display: inline-flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: ${unit};
+        font-size: ${theme.vars.typography.fontSizes.sm};
+      `,
+		detail: css`
+        display: grid;
+        grid-template-columns: fit-content(200px) minmax(0, 1fr);
+        gap: ${unit} calc(${unit} * 2);
+        margin: 0;
+        font-size: ${theme.vars.typography.fontSizes.sm};
+      `,
+		detailLabel: css`
+        color: ${theme.vars.colors.text.secondary};
+      `,
+		detailValue: css`
+        margin: 0;
+        color: ${theme.vars.colors.text.primary};
+        overflow-wrap: anywhere;
+      `,
+		muted: css`
+        color: ${theme.vars.colors.text.secondary};
+        font-size: ${theme.vars.typography.fontSizes.sm};
+      `,
+		panel: css`
+        display: flex;
+        flex-direction: column;
+        gap: calc(${unit} * 1.5);
+        padding: calc(${unit} * 2);
+        border: 1px solid ${theme.vars.colors.border};
+        border-radius: ${theme.vars.borderRadius.large};
+        background: ${theme.vars.colors.background.surface};
+      `,
+		panelTitle: css`
+        margin: 0;
+        font-size: ${theme.vars.typography.fontSizes.md};
+        font-weight: ${theme.vars.typography.fontWeights.semibold};
+      `,
+		row: css`
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: calc(${unit} * 1.5);
+      `
+	};
+}, [theme, colorScheme]);
+var AdminParts_styles_default = useStyles;
+
+//#endregion
+export { AdminParts_styles_default as default };
+//# sourceMappingURL=AdminParts.styles.js.map

package/dist/components/admin/shared/AdminParts.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdminParts.styles.js","names":["unit: string"],"sources":["../../../../src/components/admin/shared/AdminParts.styles.ts"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\nimport {css} from '../../../styles/emotion';\n\n/**\n * Creates the styles for the detail list, chip list and inline confirmation used by the admin\n * components.\n *\n * @param theme - The theme object containing design tokens.\n * @param colorScheme - The current color scheme, used for memoization.\n * @returns The CSS class names for each part.\n */\nconst useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>\n  useMemo(() => {\n    const unit: string = theme.vars.spacing.unit;\n\n    return {\n      chip: css`\n        display: inline-flex;\n        align-items: center;\n        gap: calc(${unit} / 2);\n        padding: calc(${unit} / 2) ${unit};\n        border-radius: 999px;\n        border: 1px solid ${theme.vars.colors.border};\n        background: ${theme.vars.colors.background.surface};\n        font-size: ${theme.vars.typography.fontSizes.sm};\n        color: ${theme.vars.colors.text.primary};\n      `,\n      chipList: css`\n        display: flex;\n        flex-wrap: wrap;\n        gap: ${unit};\n        margin: 0;\n        padding: 0;\n        list-style: none;\n      `,\n      confirm: css`\n        display: inline-flex;\n        flex-wrap: wrap;\n        align-items: center;\n        gap: ${unit};\n        font-size: ${theme.vars.typography.fontSizes.sm};\n      `,\n      detail: css`\n        display: grid;\n        grid-template-columns: fit-content(200px) minmax(0, 1fr);\n        gap: ${unit} calc(${unit} * 2);\n        margin: 0;\n        font-size: ${theme.vars.typography.fontSizes.sm};\n      `,\n      detailLabel: css`\n        color: ${theme.vars.colors.text.secondary};\n      `,\n      detailValue: css`\n        margin: 0;\n        color: ${theme.vars.colors.text.primary};\n        overflow-wrap: anywhere;\n      `,\n      muted: css`\n        color: ${theme.vars.colors.text.secondary};\n        font-size: ${theme.vars.typography.fontSizes.sm};\n      `,\n      panel: css`\n        display: flex;\n        flex-direction: column;\n        gap: calc(${unit} * 1.5);\n        padding: calc(${unit} * 2);\n        border: 1px solid ${theme.vars.colors.border};\n        border-radius: ${theme.vars.borderRadius.large};\n        background: ${theme.vars.colors.background.surface};\n      `,\n      panelTitle: css`\n        margin: 0;\n        font-size: ${theme.vars.typography.fontSizes.md};\n        font-weight: ${theme.vars.typography.fontWeights.semibold};\n      `,\n      row: css`\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        gap: calc(${unit} * 1.5);\n      `,\n    };\n  }, [theme, colorScheme]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;AAeA,MAAM,aAAa,OAAc,gBAC/B,cAAc;CACZ,MAAMA,OAAe,MAAM,KAAK,QAAQ;AAExC,QAAO;EACL,MAAM,GAAG;;;oBAGK,KAAK;wBACD,KAAK,QAAQ,KAAK;;4BAEd,MAAM,KAAK,OAAO,OAAO;sBAC/B,MAAM,KAAK,OAAO,WAAW,QAAQ;qBACtC,MAAM,KAAK,WAAW,UAAU,GAAG;iBACvC,MAAM,KAAK,OAAO,KAAK,QAAQ;;EAE1C,UAAU,GAAG;;;eAGJ,KAAK;;;;;EAKd,SAAS,GAAG;;;;eAIH,KAAK;qBACC,MAAM,KAAK,WAAW,UAAU,GAAG;;EAElD,QAAQ,GAAG;;;eAGF,KAAK,QAAQ,KAAK;;qBAEZ,MAAM,KAAK,WAAW,UAAU,GAAG;;EAElD,aAAa,GAAG;iBACL,MAAM,KAAK,OAAO,KAAK,UAAU;;EAE5C,aAAa,GAAG;;iBAEL,MAAM,KAAK,OAAO,KAAK,QAAQ;;;EAG1C,OAAO,GAAG;iBACC,MAAM,KAAK,OAAO,KAAK,UAAU;qBAC7B,MAAM,KAAK,WAAW,UAAU,GAAG;;EAElD,OAAO,GAAG;;;oBAGI,KAAK;wBACD,KAAK;4BACD,MAAM,KAAK,OAAO,OAAO;yBAC5B,MAAM,KAAK,aAAa,MAAM;sBACjC,MAAM,KAAK,OAAO,WAAW,QAAQ;;EAErD,YAAY,GAAG;;qBAEA,MAAM,KAAK,WAAW,UAAU,GAAG;uBACjC,MAAM,KAAK,WAAW,YAAY,SAAS;;EAE5D,KAAK,GAAG;;;;oBAIM,KAAK;;EAEpB;GACA,CAAC,OAAO,YAAY,CAAC;AAE1B,gCAAe"}

package/dist/components/admin/shared/AdminSearch.d.ts

@@ -0,0 +1,31 @@
+import { SelectOption } from '@thunderid/browser';
+import { ReactElement } from 'react';
+/**
+ * A search an admin list applies on the server: the attribute to match and the value it must equal.
+ */
+export interface AdminSearchValue {
+    attribute: string;
+    value: string;
+}
+export interface AdminSearchProps {
+    /**
+     * The attributes that can be searched, with translated labels. The attribute select is hidden when
+     * there is only one.
+     */
+    attributes: SelectOption[];
+    /**
+     * Called with the search to apply when the form is submitted, or `null` when it is cleared.
+     */
+    onSearch: (search: AdminSearchValue | null) => void;
+    /**
+     * The search currently applied.
+     */
+    search?: AdminSearchValue | null;
+}
+/**
+ * Searches an admin list by one attribute. The server matches the whole value, so the search runs when
+ * submitted rather than on every keystroke.
+ */
+declare const AdminSearch: ({ attributes, onSearch, search }: AdminSearchProps) => ReactElement;
+export default AdminSearch;
+//# sourceMappingURL=AdminSearch.d.ts.map

package/dist/components/admin/shared/AdminSearch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdminSearch.d.ts","sourceRoot":"","sources":["../../../../src/components/admin/shared/AdminSearch.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,YAAY,EAAC,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAyB,YAAY,EAAW,MAAM,OAAO,CAAC;AAOrE;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,UAAU,EAAE,YAAY,EAAE,CAAC;IAC3B;;OAEG;IACH,QAAQ,EAAE,CAAC,MAAM,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,CAAC;IACpD;;OAEG;IACH,MAAM,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;CAClC;AAED;;;GAGG;AACH,QAAA,MAAM,WAAW,GAAI,kCAAuC,gBAAgB,KAAG,YAiD9E,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/admin/shared/AdminSearch.js

@@ -0,0 +1,70 @@
+import useTranslation_default from "../../../hooks/useTranslation.js";
+import Button_default from "../../primitives/Button/Button.js";
+import TextField_default from "../../primitives/TextField/TextField.js";
+import Select_default from "../../primitives/Select/Select.js";
+import useAdminPartStyles_default from "./useAdminPartStyles.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/admin/shared/AdminSearch.tsx
+/**
+* Searches an admin list by one attribute. The server matches the whole value, so the search runs when
+* submitted rather than on every keystroke.
+*/
+const AdminSearch = ({ attributes, onSearch, search = null }) => {
+	const styles = useAdminPartStyles_default();
+	const { t } = useTranslation_default();
+	const [attribute, setAttribute] = useState(search?.attribute ?? attributes[0]?.value ?? "");
+	const [value, setValue] = useState(search?.value ?? "");
+	const label = attributes.find((option) => option.value === attribute)?.label ?? attribute;
+	const handleSubmit = (event) => {
+		event.preventDefault();
+		onSearch(value.trim() ? {
+			attribute,
+			value: value.trim()
+		} : null);
+	};
+	return /* @__PURE__ */ jsxs("form", {
+		className: styles["row"],
+		onSubmit: handleSubmit,
+		role: "search",
+		style: { alignItems: "flex-end" },
+		children: [
+			attributes.length > 1 && /* @__PURE__ */ jsx(Select_default, {
+				label: t("admin.common.search.attribute"),
+				name: "searchAttribute",
+				value: attribute,
+				options: attributes,
+				onChange: (event) => setAttribute(event.target.value)
+			}),
+			/* @__PURE__ */ jsx(TextField_default, {
+				name: "search",
+				type: "search",
+				label: attributes.length > 1 ? void 0 : label,
+				"aria-label": label,
+				placeholder: t("admin.common.search.placeholder", { attribute: label.toLowerCase() }),
+				value,
+				onChange: (event) => setValue(event.target.value)
+			}),
+			/* @__PURE__ */ jsx(Button_default, {
+				type: "submit",
+				variant: "outline",
+				children: t("admin.common.search.submit")
+			}),
+			search && /* @__PURE__ */ jsx(Button_default, {
+				type: "button",
+				variant: "text",
+				onClick: () => {
+					setValue("");
+					onSearch(null);
+				},
+				children: t("admin.common.search.clear")
+			})
+		]
+	});
+};
+var AdminSearch_default = AdminSearch;
+
+//#endregion
+export { AdminSearch_default as default };
+//# sourceMappingURL=AdminSearch.js.map

package/dist/components/admin/shared/AdminSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdminSearch.js","names":["styles: Record<string, string>","useAdminPartStyles","useTranslation","label: string","Select","TextField","Button"],"sources":["../../../../src/components/admin/shared/AdminSearch.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {SelectOption} from '@thunderid/browser';\nimport {ChangeEvent, FormEvent, ReactElement, useState} from 'react';\nimport useAdminPartStyles from './useAdminPartStyles';\nimport useTranslation from '../../../hooks/useTranslation';\nimport Button from '../../primitives/Button/Button';\nimport Select from '../../primitives/Select/Select';\nimport TextField from '../../primitives/TextField/TextField';\n\n/**\n * A search an admin list applies on the server: the attribute to match and the value it must equal.\n */\nexport interface AdminSearchValue {\n  attribute: string;\n  value: string;\n}\n\nexport interface AdminSearchProps {\n  /**\n   * The attributes that can be searched, with translated labels. The attribute select is hidden when\n   * there is only one.\n   */\n  attributes: SelectOption[];\n  /**\n   * Called with the search to apply when the form is submitted, or `null` when it is cleared.\n   */\n  onSearch: (search: AdminSearchValue | null) => void;\n  /**\n   * The search currently applied.\n   */\n  search?: AdminSearchValue | null;\n}\n\n/**\n * Searches an admin list by one attribute. The server matches the whole value, so the search runs when\n * submitted rather than on every keystroke.\n */\nconst AdminSearch = ({attributes, onSearch, search = null}: AdminSearchProps): ReactElement => {\n  const styles: Record<string, string> = useAdminPartStyles();\n  const {t} = useTranslation();\n  const [attribute, setAttribute] = useState<string>(search?.attribute ?? attributes[0]?.value ?? '');\n  const [value, setValue] = useState<string>(search?.value ?? '');\n  const label: string = attributes.find((option: SelectOption) => option.value === attribute)?.label ?? attribute;\n\n  const handleSubmit = (event: FormEvent<HTMLFormElement>): void => {\n    event.preventDefault();\n    onSearch(value.trim() ? {attribute, value: value.trim()} : null);\n  };\n\n  return (\n    <form className={styles['row']} onSubmit={handleSubmit} role=\"search\" style={{alignItems: 'flex-end'}}>\n      {attributes.length > 1 && (\n        <Select\n          label={t('admin.common.search.attribute')}\n          name=\"searchAttribute\"\n          value={attribute}\n          options={attributes}\n          onChange={(event: ChangeEvent<HTMLSelectElement>): void => setAttribute(event.target.value)}\n        />\n      )}\n      <TextField\n        name=\"search\"\n        type=\"search\"\n        label={attributes.length > 1 ? undefined : label}\n        aria-label={label}\n        placeholder={t('admin.common.search.placeholder', {attribute: label.toLowerCase()})}\n        value={value}\n        onChange={(event: ChangeEvent<HTMLInputElement>): void => setValue(event.target.value)}\n      />\n      <Button type=\"submit\" variant=\"outline\">\n        {t('admin.common.search.submit')}\n      </Button>\n      {search && (\n        <Button\n          type=\"button\"\n          variant=\"text\"\n          onClick={(): void => {\n            setValue('');\n            onSearch(null);\n          }}\n        >\n          {t('admin.common.search.clear')}\n        </Button>\n      )}\n    </form>\n  );\n};\n\nexport default AdminSearch;\n"],"mappings":";;;;;;;;;;;;;AAuCA,MAAM,eAAe,EAAC,YAAY,UAAU,SAAS,WAA0C;CAC7F,MAAMA,SAAiCC,4BAAoB;CAC3D,MAAM,EAAC,MAAKC,wBAAgB;CAC5B,MAAM,CAAC,WAAW,gBAAgB,SAAiB,QAAQ,aAAa,WAAW,IAAI,SAAS,GAAG;CACnG,MAAM,CAAC,OAAO,YAAY,SAAiB,QAAQ,SAAS,GAAG;CAC/D,MAAMC,QAAgB,WAAW,MAAM,WAAyB,OAAO,UAAU,UAAU,EAAE,SAAS;CAEtG,MAAM,gBAAgB,UAA4C;AAChE,QAAM,gBAAgB;AACtB,WAAS,MAAM,MAAM,GAAG;GAAC;GAAW,OAAO,MAAM,MAAM;GAAC,GAAG,KAAK;;AAGlE,QACE,qBAAC;EAAK,WAAW,OAAO;EAAQ,UAAU;EAAc,MAAK;EAAS,OAAO,EAAC,YAAY,YAAW;;GAClG,WAAW,SAAS,KACnB,oBAACC;IACC,OAAO,EAAE,gCAAgC;IACzC,MAAK;IACL,OAAO;IACP,SAAS;IACT,WAAW,UAAgD,aAAa,MAAM,OAAO,MAAM;KAC3F;GAEJ,oBAACC;IACC,MAAK;IACL,MAAK;IACL,OAAO,WAAW,SAAS,IAAI,SAAY;IAC3C,cAAY;IACZ,aAAa,EAAE,mCAAmC,EAAC,WAAW,MAAM,aAAa,EAAC,CAAC;IAC5E;IACP,WAAW,UAA+C,SAAS,MAAM,OAAO,MAAM;KACtF;GACF,oBAACC;IAAO,MAAK;IAAS,SAAQ;cAC3B,EAAE,6BAA6B;KACzB;GACR,UACC,oBAACA;IACC,MAAK;IACL,SAAQ;IACR,eAAqB;AACnB,cAAS,GAAG;AACZ,cAAS,KAAK;;cAGf,EAAE,4BAA4B;KACxB;;GAEN;;AAIX,0BAAe"}

package/dist/components/admin/shared/AdminSection.d.ts

@@ -0,0 +1,31 @@
+import { Preferences } from '@thunderid/browser';
+import { FC, ReactNode } from 'react';
+export interface AdminSectionProps {
+    /**
+     * Controls rendered next to the title, such as a create button.
+     */
+    actions?: ReactNode;
+    /**
+     * BEM block name of the component that renders the section, used for its CSS class.
+     */
+    block: string;
+    children?: ReactNode;
+    className?: string;
+    description?: string;
+    /**
+     * Heading level of the title.
+     * @default 2
+     */
+    headingLevel?: 2 | 3 | 4;
+    /**
+     * Component-level preferences, applied to this section and everything rendered inside it.
+     */
+    preferences?: Preferences;
+    title?: string;
+}
+/**
+ * Frames an admin component with a title, a description and actions.
+ */
+declare const AdminSection: FC<AdminSectionProps>;
+export default AdminSection;
+//# sourceMappingURL=AdminSection.d.ts.map

package/dist/components/admin/shared/AdminSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdminSection.d.ts","sourceRoot":"","sources":["../../../../src/components/admin/shared/AdminSection.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,WAAW,EAAgC,MAAM,oBAAoB,CAAC;AAC9E,OAAO,EAAC,EAAE,EAAgB,SAAS,EAAC,MAAM,OAAO,CAAC;AAMlD,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAkCvC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/admin/shared/AdminSection.js

@@ -0,0 +1,41 @@
+import { cx } from "../../../styles/emotion.js";
+import useTheme_default from "../../../contexts/Theme/useTheme.js";
+import ComponentPreferencesContext_default from "../../../contexts/I18n/ComponentPreferencesContext.js";
+import AdminSection_styles_default from "./AdminSection.styles.js";
+import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/admin/shared/AdminSection.tsx
+/**
+* Frames an admin component with a title, a description and actions.
+*/
+const AdminSection = ({ actions, block, children, className, description, headingLevel = 2, preferences, title }) => {
+	const { theme, colorScheme } = useTheme_default();
+	const styles = AdminSection_styles_default(theme, colorScheme);
+	const Heading = `h${headingLevel}`;
+	const content = /* @__PURE__ */ jsxs("section", {
+		className: cx(withVendorCSSClassPrefix(bem(block)), styles["root"], className),
+		children: [(Boolean(title) || Boolean(actions)) && /* @__PURE__ */ jsxs("div", {
+			className: cx(withVendorCSSClassPrefix(bem(block, "header")), styles["header"]),
+			children: [/* @__PURE__ */ jsxs("div", { children: [title && /* @__PURE__ */ jsx(Heading, {
+				className: styles["title"],
+				children: title
+			}), description && /* @__PURE__ */ jsx("p", {
+				className: styles["description"],
+				children: description
+			})] }), actions && /* @__PURE__ */ jsx("div", {
+				className: styles["actions"],
+				children: actions
+			})]
+		}), children]
+	});
+	return preferences ? /* @__PURE__ */ jsx(ComponentPreferencesContext_default.Provider, {
+		value: preferences,
+		children: content
+	}) : content;
+};
+var AdminSection_default = AdminSection;
+
+//#endregion
+export { AdminSection_default as default };
+//# sourceMappingURL=AdminSection.js.map

package/dist/components/admin/shared/AdminSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdminSection.js","names":["AdminSection: FC<AdminSectionProps>","useTheme","styles: Record<string, string>","useStyles","Heading: `h${typeof headingLevel}`","content: ReactElement","ComponentPreferencesContext"],"sources":["../../../../src/components/admin/shared/AdminSection.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Preferences, bem, withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {FC, ReactElement, ReactNode} from 'react';\nimport useStyles from './AdminSection.styles';\nimport ComponentPreferencesContext from '../../../contexts/I18n/ComponentPreferencesContext';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\n\nexport interface AdminSectionProps {\n  /**\n   * Controls rendered next to the title, such as a create button.\n   */\n  actions?: ReactNode;\n  /**\n   * BEM block name of the component that renders the section, used for its CSS class.\n   */\n  block: string;\n  children?: ReactNode;\n  className?: string;\n  description?: string;\n  /**\n   * Heading level of the title.\n   * @default 2\n   */\n  headingLevel?: 2 | 3 | 4;\n  /**\n   * Component-level preferences, applied to this section and everything rendered inside it.\n   */\n  preferences?: Preferences;\n  title?: string;\n}\n\n/**\n * Frames an admin component with a title, a description and actions.\n */\nconst AdminSection: FC<AdminSectionProps> = ({\n  actions,\n  block,\n  children,\n  className,\n  description,\n  headingLevel = 2,\n  preferences,\n  title,\n}: AdminSectionProps): ReactElement => {\n  const {theme, colorScheme} = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme);\n  const Heading: `h${typeof headingLevel}` = `h${headingLevel}`;\n\n  const content: ReactElement = (\n    <section className={cx(withVendorCSSClassPrefix(bem(block)), styles['root'], className)}>\n      {(Boolean(title) || Boolean(actions)) && (\n        <div className={cx(withVendorCSSClassPrefix(bem(block, 'header')), styles['header'])}>\n          <div>\n            {title && <Heading className={styles['title']}>{title}</Heading>}\n            {description && <p className={styles['description']}>{description}</p>}\n          </div>\n          {actions && <div className={styles['actions']}>{actions}</div>}\n        </div>\n      )}\n      {children}\n    </section>\n  );\n\n  return preferences ? (\n    <ComponentPreferencesContext.Provider value={preferences}>{content}</ComponentPreferencesContext.Provider>\n  ) : (\n    content\n  );\n};\n\nexport default AdminSection;\n"],"mappings":";;;;;;;;;;;AAqCA,MAAMA,gBAAuC,EAC3C,SACA,OACA,UACA,WACA,aACA,eAAe,GACf,aACA,YACqC;CACrC,MAAM,EAAC,OAAO,gBAAeC,kBAAU;CACvC,MAAMC,SAAiCC,4BAAU,OAAO,YAAY;CACpE,MAAMC,UAAqC,IAAI;CAE/C,MAAMC,UACJ,qBAAC;EAAQ,WAAW,GAAG,yBAAyB,IAAI,MAAM,CAAC,EAAE,OAAO,SAAS,UAAU;cACnF,QAAQ,MAAM,IAAI,QAAQ,QAAQ,KAClC,qBAAC;GAAI,WAAW,GAAG,yBAAyB,IAAI,OAAO,SAAS,CAAC,EAAE,OAAO,UAAU;cAClF,qBAAC,oBACE,SAAS,oBAAC;IAAQ,WAAW,OAAO;cAAW;KAAgB,EAC/D,eAAe,oBAAC;IAAE,WAAW,OAAO;cAAiB;KAAgB,IAClE,EACL,WAAW,oBAAC;IAAI,WAAW,OAAO;cAAa;KAAc;IAC1D,EAEP;GACO;AAGZ,QAAO,cACL,oBAACC,oCAA4B;EAAS,OAAO;YAAc;GAA+C,GAE1G;;AAIJ,2BAAe"}

package/dist/components/admin/shared/AdminSection.styles.d.ts

@@ -0,0 +1,11 @@
+import { Theme } from '@thunderid/browser';
+/**
+ * Creates the styles shared by the admin components: the section frame and the create forms.
+ *
+ * @param theme - The theme object containing design tokens.
+ * @param colorScheme - The current color scheme, used for memoization.
+ * @returns The CSS class names for each part.
+ */
+declare const useStyles: (theme: Theme, colorScheme: string) => Record<string, string>;
+export default useStyles;
+//# sourceMappingURL=AdminSection.styles.d.ts.map

package/dist/components/admin/shared/AdminSection.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdminSection.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/admin/shared/AdminSection.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAIzC;;;;;;GAMG;AACH,QAAA,MAAM,SAAS,GAAI,OAAO,KAAK,EAAE,aAAa,MAAM,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CA8ClD,CAAC;AAE3B,eAAe,SAAS,CAAC"}

package/dist/components/admin/shared/AdminSection.styles.js

@@ -0,0 +1,61 @@
+import { css } from "../../../styles/emotion.js";
+import { useMemo } from "react";
+
+//#region src/components/admin/shared/AdminSection.styles.ts
+/**
+* Creates the styles shared by the admin components: the section frame and the create forms.
+*
+* @param theme - The theme object containing design tokens.
+* @param colorScheme - The current color scheme, used for memoization.
+* @returns The CSS class names for each part.
+*/
+const useStyles = (theme, colorScheme) => useMemo(() => {
+	const unit = theme.vars.spacing.unit;
+	return {
+		actions: css`
+        display: flex;
+        flex-wrap: wrap;
+        gap: ${unit};
+      `,
+		description: css`
+        margin: calc(${unit} / 2) 0 0;
+        color: ${theme.vars.colors.text.secondary};
+        font-size: ${theme.vars.typography.fontSizes.sm};
+      `,
+		form: css`
+        display: flex;
+        flex-direction: column;
+        gap: calc(${unit} * 2);
+        max-width: 560px;
+      `,
+		formActions: css`
+        display: flex;
+        gap: ${unit};
+        justify-content: flex-end;
+      `,
+		header: css`
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-end;
+        justify-content: space-between;
+        gap: calc(${unit} * 1.5);
+      `,
+		root: css`
+        display: flex;
+        flex-direction: column;
+        gap: calc(${unit} * 2);
+        font-family: ${theme.vars.typography.fontFamily};
+        color: ${theme.vars.colors.text.primary};
+      `,
+		title: css`
+        margin: 0;
+        font-size: ${theme.vars.typography.fontSizes.xl};
+        font-weight: ${theme.vars.typography.fontWeights.normal};
+      `
+	};
+}, [theme, colorScheme]);
+var AdminSection_styles_default = useStyles;
+
+//#endregion
+export { AdminSection_styles_default as default };
+//# sourceMappingURL=AdminSection.styles.js.map

package/dist/components/admin/shared/AdminSection.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdminSection.styles.js","names":["unit: string"],"sources":["../../../../src/components/admin/shared/AdminSection.styles.ts"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\nimport {css} from '../../../styles/emotion';\n\n/**\n * Creates the styles shared by the admin components: the section frame and the create forms.\n *\n * @param theme - The theme object containing design tokens.\n * @param colorScheme - The current color scheme, used for memoization.\n * @returns The CSS class names for each part.\n */\nconst useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>\n  useMemo(() => {\n    const unit: string = theme.vars.spacing.unit;\n\n    return {\n      actions: css`\n        display: flex;\n        flex-wrap: wrap;\n        gap: ${unit};\n      `,\n      description: css`\n        margin: calc(${unit} / 2) 0 0;\n        color: ${theme.vars.colors.text.secondary};\n        font-size: ${theme.vars.typography.fontSizes.sm};\n      `,\n      form: css`\n        display: flex;\n        flex-direction: column;\n        gap: calc(${unit} * 2);\n        max-width: 560px;\n      `,\n      formActions: css`\n        display: flex;\n        gap: ${unit};\n        justify-content: flex-end;\n      `,\n      header: css`\n        display: flex;\n        flex-wrap: wrap;\n        align-items: flex-end;\n        justify-content: space-between;\n        gap: calc(${unit} * 1.5);\n      `,\n      root: css`\n        display: flex;\n        flex-direction: column;\n        gap: calc(${unit} * 2);\n        font-family: ${theme.vars.typography.fontFamily};\n        color: ${theme.vars.colors.text.primary};\n      `,\n      title: css`\n        margin: 0;\n        font-size: ${theme.vars.typography.fontSizes.xl};\n        font-weight: ${theme.vars.typography.fontWeights.normal};\n      `,\n    };\n  }, [theme, colorScheme]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;AAcA,MAAM,aAAa,OAAc,gBAC/B,cAAc;CACZ,MAAMA,OAAe,MAAM,KAAK,QAAQ;AAExC,QAAO;EACL,SAAS,GAAG;;;eAGH,KAAK;;EAEd,aAAa,GAAG;uBACC,KAAK;iBACX,MAAM,KAAK,OAAO,KAAK,UAAU;qBAC7B,MAAM,KAAK,WAAW,UAAU,GAAG;;EAElD,MAAM,GAAG;;;oBAGK,KAAK;;;EAGnB,aAAa,GAAG;;eAEP,KAAK;;;EAGd,QAAQ,GAAG;;;;;oBAKG,KAAK;;EAEnB,MAAM,GAAG;;;oBAGK,KAAK;uBACF,MAAM,KAAK,WAAW,WAAW;iBACvC,MAAM,KAAK,OAAO,KAAK,QAAQ;;EAE1C,OAAO,GAAG;;qBAEK,MAAM,KAAK,WAAW,UAAU,GAAG;uBACjC,MAAM,KAAK,WAAW,YAAY,OAAO;;EAE3D;GACA,CAAC,OAAO,YAAY,CAAC;AAE1B,kCAAe"}

package/dist/components/admin/shared/IdentityPicker.d.ts

@@ -0,0 +1,40 @@
+import { ReactElement } from 'react';
+/**
+ * An identity that can be picked, such as a user, agent or group.
+ */
+export interface IdentityCandidate {
+    id: string;
+    label: string;
+}
+export interface IdentityPickerProps<TType extends string> {
+    /**
+     * Label of the add button, already translated.
+     */
+    addLabel: string;
+    /**
+     * The identities to choose from, keyed by identity type.
+     */
+    candidates: Partial<Record<TType, IdentityCandidate[]>>;
+    /**
+     * Identifiers to leave out, such as current members.
+     */
+    excludedIds?: string[];
+    isSubmitting?: boolean;
+    onAdd: (identity: {
+        id: string;
+        type: TType;
+    }) => void;
+    /**
+     * The identity types to choose from, with translated labels.
+     */
+    types: {
+        label: string;
+        value: TType;
+    }[];
+}
+/**
+ * Picks one identity of a chosen type and adds it, for example as a group member or a role assignee.
+ */
+declare const IdentityPicker: <TType extends string>({ addLabel, candidates, excludedIds, isSubmitting, onAdd, types, }: IdentityPickerProps<TType>) => ReactElement;
+export default IdentityPicker;
+//# sourceMappingURL=IdentityPicker.d.ts.map

package/dist/components/admin/shared/IdentityPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IdentityPicker.d.ts","sourceRoot":"","sources":["../../../../src/components/admin/shared/IdentityPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAyB,YAAY,EAAW,MAAM,OAAO,CAAC;AAMrE;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB,CAAC,KAAK,SAAS,MAAM;IACvD;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,iBAAiB,EAAE,CAAC,CAAC,CAAC;IACxD;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,EAAE,CAAC,QAAQ,EAAE;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,KAAK,CAAA;KAAC,KAAK,IAAI,CAAC;IACrD;;OAEG;IACH,KAAK,EAAE;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,KAAK,CAAA;KAAC,EAAE,CAAC;CACxC;AAED;;GAEG;AACH,QAAA,MAAM,cAAc,GAAI,KAAK,SAAS,MAAM,EAAE,oEAO3C,mBAAmB,CAAC,KAAK,CAAC,KAAG,YA6C/B,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/admin/shared/IdentityPicker.js

@@ -0,0 +1,68 @@
+import useTranslation_default from "../../../hooks/useTranslation.js";
+import Button_default from "../../primitives/Button/Button.js";
+import Select_default from "../../primitives/Select/Select.js";
+import useAdminPartStyles_default from "./useAdminPartStyles.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/admin/shared/IdentityPicker.tsx
+/**
+* Picks one identity of a chosen type and adds it, for example as a group member or a role assignee.
+*/
+const IdentityPicker = ({ addLabel, candidates, excludedIds = [], isSubmitting = false, onAdd, types }) => {
+	const styles = useAdminPartStyles_default();
+	const { t } = useTranslation_default();
+	const [type, setType] = useState(types[0]?.value);
+	const [identityId, setIdentityId] = useState("");
+	const options = (candidates[type] ?? []).filter((candidate) => !excludedIds.includes(candidate.id)).map((candidate) => ({
+		label: candidate.label,
+		value: candidate.id
+	}));
+	const handleSubmit = (event) => {
+		event.preventDefault();
+		if (identityId) {
+			onAdd({
+				id: identityId,
+				type
+			});
+			setIdentityId("");
+		}
+	};
+	return /* @__PURE__ */ jsxs("form", {
+		className: styles["row"],
+		onSubmit: handleSubmit,
+		style: { alignItems: "flex-end" },
+		children: [
+			/* @__PURE__ */ jsx(Select_default, {
+				label: t("admin.common.fields.identity_type"),
+				name: "identityType",
+				value: type,
+				options: types,
+				onChange: (event) => {
+					setType(event.target.value);
+					setIdentityId("");
+				}
+			}),
+			/* @__PURE__ */ jsx(Select_default, {
+				label: t("admin.common.fields.identity"),
+				name: "identity",
+				value: identityId,
+				placeholder: t("admin.common.fields.identity_placeholder"),
+				emptyText: t("admin.common.fields.identity_empty"),
+				options,
+				onChange: (event) => setIdentityId(event.target.value)
+			}),
+			/* @__PURE__ */ jsx(Button_default, {
+				type: "submit",
+				loading: isSubmitting,
+				disabled: !identityId || isSubmitting,
+				children: addLabel
+			})
+		]
+	});
+};
+var IdentityPicker_default = IdentityPicker;
+
+//#endregion
+export { IdentityPicker_default as default };
+//# sourceMappingURL=IdentityPicker.js.map