@thunderid/react 1.3.3 → 1.4.0

package/dist/components/primitives/TextField/TextField.js

@@ -7,14 +7,24 @@ import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/primitives/TextField/TextField.tsx
-const TextField = ({ label, error, required, className, disabled, helperText, startIcon, endIcon, onStartIconClick, onEndIconClick, type = "text", style = {},...rest }) => {
+/**
+* Makes an element with `role="button"` respond to Enter and Space, as a native button does.
+*/
+const activateOnKey = (activate) => (event) => {
+	if (event.key === "Enter" || event.key === " ") {
+		event.preventDefault();
+		activate();
+	}
+};
+const TextField = ({ label, error, required, className, disabled, helperText, startIcon, endAdornment, endIcon, endIconLabel = "End icon", onStartIconClick, onEndIconClick, type = "text", style = {},...rest }) => {
 	const { theme, colorScheme } = useTheme_default();
 	const hasError = !!error;
-	const styles = TextField_styles_default(theme, colorScheme, disabled ?? false, hasError, !!startIcon, !!endIcon);
+	const styles = TextField_styles_default(theme, colorScheme, disabled ?? false, hasError, !!startIcon, !!endIcon, !!endAdornment);
 	const inputClassName = cx(withVendorCSSClassPrefix(bem("text-field", "input")), styles["input"], hasError && styles["inputError"], disabled && styles["inputDisabled"]);
 	const containerClassName = cx(withVendorCSSClassPrefix(bem("text-field", "container")), styles["inputContainer"]);
 	const startIconClassName = cx(withVendorCSSClassPrefix(bem("text-field", "start-icon")), styles["startIcon"]);
 	const endIconClassName = cx(withVendorCSSClassPrefix(bem("text-field", "end-icon")), styles["endIcon"]);
+	const endAdornmentClassName = cx(withVendorCSSClassPrefix(bem("text-field", "end-adornment")), styles["endAdornment"]);
 	return /* @__PURE__ */ jsxs(FormControl_default, {
 		error,
 		helperText,
@@ -32,6 +42,7 @@ const TextField = ({ label, error, required, className, disabled, helperText, st
 					onClick: onStartIconClick,
 					role: onStartIconClick ? "button" : void 0,
 					tabIndex: onStartIconClick && !disabled ? 0 : void 0,
+					onKeyDown: onStartIconClick && !disabled ? activateOnKey(onStartIconClick) : void 0,
 					"aria-label": "Start icon",
 					children: startIcon
 				}),
@@ -48,8 +59,13 @@ const TextField = ({ label, error, required, className, disabled, helperText, st
 					onClick: onEndIconClick,
 					role: onEndIconClick ? "button" : void 0,
 					tabIndex: onEndIconClick && !disabled ? 0 : void 0,
-					"aria-label": "End icon",
+					onKeyDown: onEndIconClick && !disabled ? activateOnKey(onEndIconClick) : void 0,
+					"aria-label": endIconLabel,
 					children: endIcon
+				}),
+				endAdornment && /* @__PURE__ */ jsx("div", {
+					className: endAdornmentClassName,
+					children: endAdornment
 				})
 			]
 		})]

package/dist/components/primitives/TextField/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","names":["TextField: FC<TextFieldProps>","useTheme","styles: Record<string, string>","useStyles","inputClassName: string","containerClassName: string","startIconClassName: string","endIconClassName: string","FormControl","InputLabel"],"sources":["../../../../src/components/primitives/TextField/TextField.tsx"],"sourcesContent":["// Copyright 2024 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {FC, InputHTMLAttributes, ReactNode} from 'react';\nimport useStyles from './TextField.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\n\nexport interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className'> {\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n  /**\n   * Whether the field is disabled\n   */\n  disabled?: boolean;\n  /**\n   * Icon to display at the end (right) of the input\n   */\n  endIcon?: ReactNode;\n  /**\n   * Error message to display below the input\n   */\n  error?: string;\n  /**\n   * Helper text to display below the input\n   */\n  helperText?: string;\n  /**\n   * Label text to display above the input\n   */\n  label?: string;\n  /**\n   * Click handler for the end icon\n   */\n  onEndIconClick?: () => void;\n  /**\n   * Click handler for the start icon\n   */\n  onStartIconClick?: () => void;\n  /**\n   * Whether the field is required\n   */\n  required?: boolean;\n  /**\n   * Icon to display at the start (left) of the input\n   */\n  startIcon?: ReactNode;\n}\n\nconst TextField: FC<TextFieldProps> = ({\n  label,\n  error,\n  required,\n  className,\n  disabled,\n  helperText,\n  startIcon,\n  endIcon,\n  onStartIconClick,\n  onEndIconClick,\n  type = 'text',\n  style = {},\n  ...rest\n}: TextFieldProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const hasError = !!error;\n  const hasStartIcon = !!startIcon;\n  const hasEndIcon = !!endIcon;\n  const styles: Record<string, string> = useStyles(\n    theme,\n    colorScheme,\n    disabled ?? false,\n    hasError,\n    hasStartIcon,\n    hasEndIcon,\n  );\n\n  const inputClassName: string = cx(\n    withVendorCSSClassPrefix(bem('text-field', 'input')),\n    styles['input'],\n    hasError && styles['inputError'],\n    disabled && styles['inputDisabled'],\n  );\n\n  const containerClassName: string = cx(\n    withVendorCSSClassPrefix(bem('text-field', 'container')),\n    styles['inputContainer'],\n  );\n\n  const startIconClassName: string = cx(withVendorCSSClassPrefix(bem('text-field', 'start-icon')), styles['startIcon']);\n\n  const endIconClassName: string = cx(withVendorCSSClassPrefix(bem('text-field', 'end-icon')), styles['endIcon']);\n\n  return (\n    <FormControl\n      error={error}\n      helperText={helperText}\n      className={cx(withVendorCSSClassPrefix(bem('text-field')), className)}\n      style={style}\n    >\n      {label && (\n        <InputLabel required={required} error={hasError}>\n          {label}\n        </InputLabel>\n      )}\n      <div className={containerClassName}>\n        {startIcon && (\n          <div\n            className={startIconClassName}\n            onClick={onStartIconClick}\n            role={onStartIconClick ? 'button' : undefined}\n            tabIndex={onStartIconClick && !disabled ? 0 : undefined}\n            aria-label=\"Start icon\"\n          >\n            {startIcon}\n          </div>\n        )}\n        <input\n          className={inputClassName}\n          type={type}\n          disabled={disabled}\n          aria-invalid={hasError}\n          aria-required={required}\n          {...rest}\n        />\n        {endIcon && (\n          <div\n            className={endIconClassName}\n            onClick={onEndIconClick}\n            role={onEndIconClick ? 'button' : undefined}\n            tabIndex={onEndIconClick && !disabled ? 0 : undefined}\n            aria-label=\"End icon\"\n          >\n            {endIcon}\n          </div>\n        )}\n      </div>\n    </FormControl>\n  );\n};\n\nexport default TextField;\n"],"mappings":";;;;;;;;;AAsDA,MAAMA,aAAiC,EACrC,OACA,OACA,UACA,WACA,UACA,YACA,WACA,SACA,kBACA,gBACA,OAAO,QACP,QAAQ,EAAE,CACV,GAAG,WACiB;CACpB,MAAM,EAAC,OAAO,gBAA4CC,kBAAU;CACpE,MAAM,WAAW,CAAC,CAAC;CAGnB,MAAMC,SAAiCC,yBACrC,OACA,aACA,YAAY,OACZ,UANmB,CAAC,CAAC,WACJ,CAAC,CAAC,QAQpB;CAED,MAAMC,iBAAyB,GAC7B,yBAAyB,IAAI,cAAc,QAAQ,CAAC,EACpD,OAAO,UACP,YAAY,OAAO,eACnB,YAAY,OAAO,iBACpB;CAED,MAAMC,qBAA6B,GACjC,yBAAyB,IAAI,cAAc,YAAY,CAAC,EACxD,OAAO,kBACR;CAED,MAAMC,qBAA6B,GAAG,yBAAyB,IAAI,cAAc,aAAa,CAAC,EAAE,OAAO,aAAa;CAErH,MAAMC,mBAA2B,GAAG,yBAAyB,IAAI,cAAc,WAAW,CAAC,EAAE,OAAO,WAAW;AAE/G,QACE,qBAACC;EACQ;EACK;EACZ,WAAW,GAAG,yBAAyB,IAAI,aAAa,CAAC,EAAE,UAAU;EAC9D;aAEN,SACC,oBAACC;GAAqB;GAAU,OAAO;aACpC;IACU,EAEf,qBAAC;GAAI,WAAW;;IACb,aACC,oBAAC;KACC,WAAW;KACX,SAAS;KACT,MAAM,mBAAmB,WAAW;KACpC,UAAU,oBAAoB,CAAC,WAAW,IAAI;KAC9C,cAAW;eAEV;MACG;IAER,oBAAC;KACC,WAAW;KACL;KACI;KACV,gBAAc;KACd,iBAAe;KACf,GAAI;MACJ;IACD,WACC,oBAAC;KACC,WAAW;KACX,SAAS;KACT,MAAM,iBAAiB,WAAW;KAClC,UAAU,kBAAkB,CAAC,WAAW,IAAI;KAC5C,cAAW;eAEV;MACG;;IAEJ;GACM;;AAIlB,wBAAe"}
+{"version":3,"file":"TextField.js","names":["TextField: FC<TextFieldProps>","useTheme","styles: Record<string, string>","useStyles","inputClassName: string","containerClassName: string","startIconClassName: string","endIconClassName: string","endAdornmentClassName: string","FormControl","InputLabel"],"sources":["../../../../src/components/primitives/TextField/TextField.tsx"],"sourcesContent":["// Copyright 2024 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {FC, InputHTMLAttributes, KeyboardEvent, ReactNode} from 'react';\nimport useStyles from './TextField.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\n\nexport interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className'> {\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n  /**\n   * Whether the field is disabled\n   */\n  disabled?: boolean;\n  /**\n   * Extra content shown inside the field, at its end after the end icon, such as an action button\n   */\n  endAdornment?: ReactNode;\n  /**\n   * Icon to display at the end (right) of the input\n   */\n  endIcon?: ReactNode;\n  /**\n   * Accessible name of the end icon when it is a button, that is when `onEndIconClick` is set\n   */\n  endIconLabel?: string;\n  /**\n   * Error message to display below the input\n   */\n  error?: string;\n  /**\n   * Helper text to display below the input\n   */\n  helperText?: string;\n  /**\n   * Label text to display above the input\n   */\n  label?: string;\n  /**\n   * Click handler for the end icon\n   */\n  onEndIconClick?: () => void;\n  /**\n   * Click handler for the start icon\n   */\n  onStartIconClick?: () => void;\n  /**\n   * Whether the field is required\n   */\n  required?: boolean;\n  /**\n   * Icon to display at the start (left) of the input\n   */\n  startIcon?: ReactNode;\n}\n\n/**\n * Makes an element with `role=\"button\"` respond to Enter and Space, as a native button does.\n */\nconst activateOnKey =\n  (activate: () => void) =>\n  (event: KeyboardEvent<HTMLDivElement>): void => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      activate();\n    }\n  };\n\nconst TextField: FC<TextFieldProps> = ({\n  label,\n  error,\n  required,\n  className,\n  disabled,\n  helperText,\n  startIcon,\n  endAdornment,\n  endIcon,\n  endIconLabel = 'End icon',\n  onStartIconClick,\n  onEndIconClick,\n  type = 'text',\n  style = {},\n  ...rest\n}: TextFieldProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const hasError = !!error;\n  const hasStartIcon = !!startIcon;\n  const hasEndIcon = !!endIcon;\n  const hasEndAdornment = !!endAdornment;\n  const styles: Record<string, string> = useStyles(\n    theme,\n    colorScheme,\n    disabled ?? false,\n    hasError,\n    hasStartIcon,\n    hasEndIcon,\n    hasEndAdornment,\n  );\n\n  const inputClassName: string = cx(\n    withVendorCSSClassPrefix(bem('text-field', 'input')),\n    styles['input'],\n    hasError && styles['inputError'],\n    disabled && styles['inputDisabled'],\n  );\n\n  const containerClassName: string = cx(\n    withVendorCSSClassPrefix(bem('text-field', 'container')),\n    styles['inputContainer'],\n  );\n\n  const startIconClassName: string = cx(withVendorCSSClassPrefix(bem('text-field', 'start-icon')), styles['startIcon']);\n\n  const endIconClassName: string = cx(withVendorCSSClassPrefix(bem('text-field', 'end-icon')), styles['endIcon']);\n\n  const endAdornmentClassName: string = cx(\n    withVendorCSSClassPrefix(bem('text-field', 'end-adornment')),\n    styles['endAdornment'],\n  );\n\n  return (\n    <FormControl\n      error={error}\n      helperText={helperText}\n      className={cx(withVendorCSSClassPrefix(bem('text-field')), className)}\n      style={style}\n    >\n      {label && (\n        <InputLabel required={required} error={hasError}>\n          {label}\n        </InputLabel>\n      )}\n      <div className={containerClassName}>\n        {startIcon && (\n          <div\n            className={startIconClassName}\n            onClick={onStartIconClick}\n            role={onStartIconClick ? 'button' : undefined}\n            tabIndex={onStartIconClick && !disabled ? 0 : undefined}\n            onKeyDown={onStartIconClick && !disabled ? activateOnKey(onStartIconClick) : undefined}\n            aria-label=\"Start icon\"\n          >\n            {startIcon}\n          </div>\n        )}\n        <input\n          className={inputClassName}\n          type={type}\n          disabled={disabled}\n          aria-invalid={hasError}\n          aria-required={required}\n          {...rest}\n        />\n        {endIcon && (\n          <div\n            className={endIconClassName}\n            onClick={onEndIconClick}\n            role={onEndIconClick ? 'button' : undefined}\n            tabIndex={onEndIconClick && !disabled ? 0 : undefined}\n            onKeyDown={onEndIconClick && !disabled ? activateOnKey(onEndIconClick) : undefined}\n            aria-label={endIconLabel}\n          >\n            {endIcon}\n          </div>\n        )}\n        {endAdornment && <div className={endAdornmentClassName}>{endAdornment}</div>}\n      </div>\n    </FormControl>\n  );\n};\n\nexport default TextField;\n"],"mappings":";;;;;;;;;;;;AAiEA,MAAM,iBACH,cACA,UAA+C;AAC9C,KAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,QAAM,gBAAgB;AACtB,YAAU;;;AAIhB,MAAMA,aAAiC,EACrC,OACA,OACA,UACA,WACA,UACA,YACA,WACA,cACA,SACA,eAAe,YACf,kBACA,gBACA,OAAO,QACP,QAAQ,EAAE,CACV,GAAG,WACiB;CACpB,MAAM,EAAC,OAAO,gBAA4CC,kBAAU;CACpE,MAAM,WAAW,CAAC,CAAC;CAInB,MAAMC,SAAiCC,yBACrC,OACA,aACA,YAAY,OACZ,UAPmB,CAAC,CAAC,WACJ,CAAC,CAAC,SACG,CAAC,CAAC,aASzB;CAED,MAAMC,iBAAyB,GAC7B,yBAAyB,IAAI,cAAc,QAAQ,CAAC,EACpD,OAAO,UACP,YAAY,OAAO,eACnB,YAAY,OAAO,iBACpB;CAED,MAAMC,qBAA6B,GACjC,yBAAyB,IAAI,cAAc,YAAY,CAAC,EACxD,OAAO,kBACR;CAED,MAAMC,qBAA6B,GAAG,yBAAyB,IAAI,cAAc,aAAa,CAAC,EAAE,OAAO,aAAa;CAErH,MAAMC,mBAA2B,GAAG,yBAAyB,IAAI,cAAc,WAAW,CAAC,EAAE,OAAO,WAAW;CAE/G,MAAMC,wBAAgC,GACpC,yBAAyB,IAAI,cAAc,gBAAgB,CAAC,EAC5D,OAAO,gBACR;AAED,QACE,qBAACC;EACQ;EACK;EACZ,WAAW,GAAG,yBAAyB,IAAI,aAAa,CAAC,EAAE,UAAU;EAC9D;aAEN,SACC,oBAACC;GAAqB;GAAU,OAAO;aACpC;IACU,EAEf,qBAAC;GAAI,WAAW;;IACb,aACC,oBAAC;KACC,WAAW;KACX,SAAS;KACT,MAAM,mBAAmB,WAAW;KACpC,UAAU,oBAAoB,CAAC,WAAW,IAAI;KAC9C,WAAW,oBAAoB,CAAC,WAAW,cAAc,iBAAiB,GAAG;KAC7E,cAAW;eAEV;MACG;IAER,oBAAC;KACC,WAAW;KACL;KACI;KACV,gBAAc;KACd,iBAAe;KACf,GAAI;MACJ;IACD,WACC,oBAAC;KACC,WAAW;KACX,SAAS;KACT,MAAM,iBAAiB,WAAW;KAClC,UAAU,kBAAkB,CAAC,WAAW,IAAI;KAC5C,WAAW,kBAAkB,CAAC,WAAW,cAAc,eAAe,GAAG;KACzE,cAAY;eAEX;MACG;IAEP,gBAAgB,oBAAC;KAAI,WAAW;eAAwB;MAAmB;;IACxE;GACM;;AAIlB,wBAAe"}

package/dist/components/primitives/TextField/TextField.styles.d.ts

@@ -7,8 +7,9 @@ import { Theme } from '@thunderid/browser';
  * @param hasError - Whether the component has an error
  * @param hasStartIcon - Whether the component has a start icon
  * @param hasEndIcon - Whether the component has an end icon
+ * @param hasEndAdornment - Whether the component has extra content before the end icon
  * @returns Object containing CSS class names for component styling
  */
-declare const useStyles: (theme: Theme, colorScheme: string, disabled: boolean, hasError: boolean, hasStartIcon: boolean, hasEndIcon: boolean) => Record<string, string>;
+declare const useStyles: (theme: Theme, colorScheme: string, disabled: boolean, hasError: boolean, hasStartIcon: boolean, hasEndIcon: boolean, hasEndAdornment?: boolean) => Record<string, string>;
 export default useStyles;
 //# sourceMappingURL=TextField.styles.d.ts.map

package/dist/components/primitives/TextField/TextField.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/TextField/TextField.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAIzC;;;;;;;;;GASG;AACH,QAAA,MAAM,SAAS,GACb,OAAO,KAAK,EACZ,aAAa,MAAM,EACnB,UAAU,OAAO,EACjB,UAAU,OAAO,EACjB,cAAc,OAAO,EACrB,YAAY,OAAO,KAClB,MAAM,CAAC,MAAM,EAAE,MAAM,CAoHgD,CAAC;AAEzE,eAAe,SAAS,CAAC"}
+{"version":3,"file":"TextField.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/TextField/TextField.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAIzC;;;;;;;;;;GAUG;AACH,QAAA,MAAM,SAAS,GACb,OAAO,KAAK,EACZ,aAAa,MAAM,EACnB,UAAU,OAAO,EACjB,UAAU,OAAO,EACjB,cAAc,OAAO,EACrB,YAAY,OAAO,EACnB,yBAAuB,KACtB,MAAM,CAAC,MAAM,EAAE,MAAM,CAkIiE,CAAC;AAE1F,eAAe,SAAS,CAAC"}

package/dist/components/primitives/TextField/TextField.styles.js

@@ -10,11 +10,14 @@ import { useMemo } from "react";
 * @param hasError - Whether the component has an error
 * @param hasStartIcon - Whether the component has a start icon
 * @param hasEndIcon - Whether the component has an end icon
+* @param hasEndAdornment - Whether the component has extra content before the end icon
 * @returns Object containing CSS class names for component styling
 */
-const useStyles = (theme, colorScheme, disabled, hasError, hasStartIcon, hasEndIcon) => useMemo(() => {
+const useStyles = (theme, colorScheme, disabled, hasError, hasStartIcon, hasEndIcon, hasEndAdornment = false) => useMemo(() => {
 	const inlineStartPadding = hasStartIcon ? `calc(${theme.vars.spacing.unit} * 5)` : `calc(${theme.vars.spacing.unit} * 1.5)`;
-	const inlineEndPadding = hasEndIcon ? `calc(${theme.vars.spacing.unit} * 5)` : `calc(${theme.vars.spacing.unit} * 1.5)`;
+	let inlineEndPadding = `calc(${theme.vars.spacing.unit} * 1.5)`;
+	if (hasEndIcon && hasEndAdornment) inlineEndPadding = `calc(${theme.vars.spacing.unit} * 8)`;
+	else if (hasEndIcon || hasEndAdornment) inlineEndPadding = `calc(${theme.vars.spacing.unit} * 5)`;
 	const inputContainer = css`
       position: relative;
       display: flex;
@@ -102,11 +105,20 @@ const useStyles = (theme, colorScheme, disabled, hasError, hasStartIcon, hasEndI
       ${icon};
       inset-inline-start: ${theme.vars.spacing.unit};
     `;
-	return {
-		endIcon: css`
+	const endIcon = css`
       ${icon};
+      inset-inline-end: calc(${theme.vars.spacing.unit} * ${hasEndAdornment ? 4.5 : 1});
+    `;
+	return {
+		endAdornment: css`
+      position: absolute;
+      display: flex;
+      align-items: center;
+      top: 50%;
+      transform: translateY(-50%);
       inset-inline-end: ${theme.vars.spacing.unit};
     `,
+		endIcon,
 		icon,
 		input,
 		inputContainer,
@@ -120,7 +132,8 @@ const useStyles = (theme, colorScheme, disabled, hasError, hasStartIcon, hasEndI
 	disabled,
 	hasError,
 	hasStartIcon,
-	hasEndIcon
+	hasEndIcon,
+	hasEndAdornment
 ]);
 var TextField_styles_default = useStyles;
 

package/dist/components/primitives/TextField/TextField.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.styles.js","names":["inlineStartPadding: string","inlineEndPadding: string","inputContainer: string","input: string","inputError: string","inputDisabled: string","icon: string","startIcon: string"],"sources":["../../../../src/components/primitives/TextField/TextField.styles.ts"],"sourcesContent":["// Copyright 2024 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 styles for the TextField component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param disabled - Whether the component is disabled\n * @param hasError - Whether the component has an error\n * @param hasStartIcon - Whether the component has a start icon\n * @param hasEndIcon - Whether the component has an end icon\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  disabled: boolean,\n  hasError: boolean,\n  hasStartIcon: boolean,\n  hasEndIcon: boolean,\n): Record<string, string> =>\n  useMemo(() => {\n    const inlineStartPadding: string = hasStartIcon\n      ? `calc(${theme.vars.spacing.unit} * 5)`\n      : `calc(${theme.vars.spacing.unit} * 1.5)`;\n    const inlineEndPadding: string = hasEndIcon\n      ? `calc(${theme.vars.spacing.unit} * 5)`\n      : `calc(${theme.vars.spacing.unit} * 1.5)`;\n\n    const inputContainer: string = css`\n      position: relative;\n      display: flex;\n      align-items: center;\n    `;\n\n    const input: string = css`\n      width: 100%;\n      padding-block: ${theme.vars.spacing.unit};\n      padding-inline-start: ${inlineStartPadding};\n      padding-inline-end: ${inlineEndPadding};\n      border: 1px solid ${hasError ? theme.vars.colors.error.main : theme.vars.colors.border};\n      border-radius: ${theme.vars.components?.Field?.root?.borderRadius || theme.vars.borderRadius.medium};\n      font-size: ${theme.vars.typography.fontSizes.md};\n      font-family: ${theme.vars.typography.fontFamily};\n      color: ${theme.vars.colors.text.primary};\n      background-color: ${disabled ? theme.vars.colors.background.disabled : theme.vars.colors.background.surface};\n      outline: none;\n      transition:\n        border-color 0.2s ease,\n        box-shadow 0.2s ease;\n\n      &:focus {\n        border-color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.primary.main};\n        box-shadow: 0 0 0 2px ${hasError ? `${theme.vars.colors.error.main}20` : `${theme.vars.colors.primary.main}20`};\n      }\n\n      &:disabled {\n        opacity: 0.6;\n        cursor: not-allowed;\n      }\n\n      &:hover:not(:disabled) {\n        border-color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.primary.main};\n      }\n\n      &::placeholder {\n        color: ${theme.vars.colors.text.secondary};\n        opacity: 0.7;\n      }\n    `;\n\n    const inputError: string = css`\n      border-color: ${theme.vars.colors.error.main};\n\n      &:focus {\n        border-color: ${theme.vars.colors.error.main};\n        box-shadow: 0 0 0 2px ${theme.vars.colors.error.main}20;\n      }\n\n      &:hover:not(:disabled) {\n        border-color: ${theme.vars.colors.error.main};\n      }\n    `;\n\n    const inputDisabled: string = css`\n      background-color: ${theme.vars.colors.background.disabled};\n      opacity: 0.6;\n      cursor: not-allowed;\n    `;\n\n    const icon: string = css`\n      position: absolute;\n      background: none;\n      border: none;\n      cursor: ${disabled ? 'not-allowed' : 'pointer'};\n      padding: calc(${theme.vars.spacing.unit} / 2);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: ${theme.vars.colors.text.secondary};\n      opacity: ${disabled ? 0.5 : 1};\n      top: 50%;\n      transform: translateY(-50%);\n      transition:\n        color 0.2s ease,\n        opacity 0.2s ease;\n\n      &:hover:not(:disabled) {\n        color: ${theme.vars.colors.text.primary};\n      }\n\n      &:focus {\n        outline: 2px solid ${theme.vars.colors.primary.main};\n        outline-offset: 2px;\n      }\n    `;\n\n    const startIcon: string = css`\n      ${icon};\n      inset-inline-start: ${theme.vars.spacing.unit};\n    `;\n\n    const endIcon: string = css`\n      ${icon};\n      inset-inline-end: ${theme.vars.spacing.unit};\n    `;\n\n    return {\n      endIcon,\n      icon,\n      input,\n      inputContainer,\n      inputDisabled,\n      inputError,\n      startIcon,\n    };\n  }, [theme, colorScheme, disabled, hasError, hasStartIcon, hasEndIcon]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAM,aACJ,OACA,aACA,UACA,UACA,cACA,eAEA,cAAc;CACZ,MAAMA,qBAA6B,eAC/B,QAAQ,MAAM,KAAK,QAAQ,KAAK,SAChC,QAAQ,MAAM,KAAK,QAAQ,KAAK;CACpC,MAAMC,mBAA2B,aAC7B,QAAQ,MAAM,KAAK,QAAQ,KAAK,SAChC,QAAQ,MAAM,KAAK,QAAQ,KAAK;CAEpC,MAAMC,iBAAyB,GAAG;;;;;CAMlC,MAAMC,QAAgB,GAAG;;uBAEN,MAAM,KAAK,QAAQ,KAAK;8BACjB,mBAAmB;4BACrB,iBAAiB;0BACnB,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,OAAO;uBACtE,MAAM,KAAK,YAAY,OAAO,MAAM,gBAAgB,MAAM,KAAK,aAAa,OAAO;mBACvF,MAAM,KAAK,WAAW,UAAU,GAAG;qBACjC,MAAM,KAAK,WAAW,WAAW;eACvC,MAAM,KAAK,OAAO,KAAK,QAAQ;0BACpB,WAAW,MAAM,KAAK,OAAO,WAAW,WAAW,MAAM,KAAK,OAAO,WAAW,QAAQ;;;;;;;wBAO1F,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,QAAQ,KAAK;gCACjE,WAAW,GAAG,MAAM,KAAK,OAAO,MAAM,KAAK,MAAM,GAAG,MAAM,KAAK,OAAO,QAAQ,KAAK,IAAI;;;;;;;;;wBAS/F,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;iBAIhF,MAAM,KAAK,OAAO,KAAK,UAAU;;;;CAK9C,MAAMC,aAAqB,GAAG;sBACZ,MAAM,KAAK,OAAO,MAAM,KAAK;;;wBAG3B,MAAM,KAAK,OAAO,MAAM,KAAK;gCACrB,MAAM,KAAK,OAAO,MAAM,KAAK;;;;wBAIrC,MAAM,KAAK,OAAO,MAAM,KAAK;;;CAIjD,MAAMC,gBAAwB,GAAG;0BACX,MAAM,KAAK,OAAO,WAAW,SAAS;;;;CAK5D,MAAMC,OAAe,GAAG;;;;gBAIZ,WAAW,gBAAgB,UAAU;sBAC/B,MAAM,KAAK,QAAQ,KAAK;;;;eAI/B,MAAM,KAAK,OAAO,KAAK,UAAU;iBAC/B,WAAW,KAAM,EAAE;;;;;;;;iBAQnB,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;6BAInB,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;CAKxD,MAAMC,YAAoB,GAAG;QACzB,KAAK;4BACe,MAAM,KAAK,QAAQ,KAAK;;AAQhD,QAAO;EACL,SANsB,GAAG;QACvB,KAAK;0BACa,MAAM,KAAK,QAAQ,KAAK;;EAK5C;EACA;EACA;EACA;EACA;EACA;EACD;GACA;CAAC;CAAO;CAAa;CAAU;CAAU;CAAc;CAAW,CAAC;AAExE,+BAAe"}
+{"version":3,"file":"TextField.styles.js","names":["inlineStartPadding: string","inputContainer: string","input: string","inputError: string","inputDisabled: string","icon: string","startIcon: string","endIcon: string"],"sources":["../../../../src/components/primitives/TextField/TextField.styles.ts"],"sourcesContent":["// Copyright 2024 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 styles for the TextField component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param disabled - Whether the component is disabled\n * @param hasError - Whether the component has an error\n * @param hasStartIcon - Whether the component has a start icon\n * @param hasEndIcon - Whether the component has an end icon\n * @param hasEndAdornment - Whether the component has extra content before the end icon\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  disabled: boolean,\n  hasError: boolean,\n  hasStartIcon: boolean,\n  hasEndIcon: boolean,\n  hasEndAdornment = false,\n): Record<string, string> =>\n  useMemo(() => {\n    const inlineStartPadding: string = hasStartIcon\n      ? `calc(${theme.vars.spacing.unit} * 5)`\n      : `calc(${theme.vars.spacing.unit} * 1.5)`;\n    let inlineEndPadding = `calc(${theme.vars.spacing.unit} * 1.5)`;\n\n    if (hasEndIcon && hasEndAdornment) {\n      inlineEndPadding = `calc(${theme.vars.spacing.unit} * 8)`;\n    } else if (hasEndIcon || hasEndAdornment) {\n      inlineEndPadding = `calc(${theme.vars.spacing.unit} * 5)`;\n    }\n\n    const inputContainer: string = css`\n      position: relative;\n      display: flex;\n      align-items: center;\n    `;\n\n    const input: string = css`\n      width: 100%;\n      padding-block: ${theme.vars.spacing.unit};\n      padding-inline-start: ${inlineStartPadding};\n      padding-inline-end: ${inlineEndPadding};\n      border: 1px solid ${hasError ? theme.vars.colors.error.main : theme.vars.colors.border};\n      border-radius: ${theme.vars.components?.Field?.root?.borderRadius || theme.vars.borderRadius.medium};\n      font-size: ${theme.vars.typography.fontSizes.md};\n      font-family: ${theme.vars.typography.fontFamily};\n      color: ${theme.vars.colors.text.primary};\n      background-color: ${disabled ? theme.vars.colors.background.disabled : theme.vars.colors.background.surface};\n      outline: none;\n      transition:\n        border-color 0.2s ease,\n        box-shadow 0.2s ease;\n\n      &:focus {\n        border-color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.primary.main};\n        box-shadow: 0 0 0 2px ${hasError ? `${theme.vars.colors.error.main}20` : `${theme.vars.colors.primary.main}20`};\n      }\n\n      &:disabled {\n        opacity: 0.6;\n        cursor: not-allowed;\n      }\n\n      &:hover:not(:disabled) {\n        border-color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.primary.main};\n      }\n\n      &::placeholder {\n        color: ${theme.vars.colors.text.secondary};\n        opacity: 0.7;\n      }\n    `;\n\n    const inputError: string = css`\n      border-color: ${theme.vars.colors.error.main};\n\n      &:focus {\n        border-color: ${theme.vars.colors.error.main};\n        box-shadow: 0 0 0 2px ${theme.vars.colors.error.main}20;\n      }\n\n      &:hover:not(:disabled) {\n        border-color: ${theme.vars.colors.error.main};\n      }\n    `;\n\n    const inputDisabled: string = css`\n      background-color: ${theme.vars.colors.background.disabled};\n      opacity: 0.6;\n      cursor: not-allowed;\n    `;\n\n    const icon: string = css`\n      position: absolute;\n      background: none;\n      border: none;\n      cursor: ${disabled ? 'not-allowed' : 'pointer'};\n      padding: calc(${theme.vars.spacing.unit} / 2);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: ${theme.vars.colors.text.secondary};\n      opacity: ${disabled ? 0.5 : 1};\n      top: 50%;\n      transform: translateY(-50%);\n      transition:\n        color 0.2s ease,\n        opacity 0.2s ease;\n\n      &:hover:not(:disabled) {\n        color: ${theme.vars.colors.text.primary};\n      }\n\n      &:focus {\n        outline: 2px solid ${theme.vars.colors.primary.main};\n        outline-offset: 2px;\n      }\n    `;\n\n    const startIcon: string = css`\n      ${icon};\n      inset-inline-start: ${theme.vars.spacing.unit};\n    `;\n\n    const endIcon: string = css`\n      ${icon};\n      inset-inline-end: calc(${theme.vars.spacing.unit} * ${hasEndAdornment ? 4.5 : 1});\n    `;\n\n    const endAdornment: string = css`\n      position: absolute;\n      display: flex;\n      align-items: center;\n      top: 50%;\n      transform: translateY(-50%);\n      inset-inline-end: ${theme.vars.spacing.unit};\n    `;\n\n    return {\n      endAdornment,\n      endIcon,\n      icon,\n      input,\n      inputContainer,\n      inputDisabled,\n      inputError,\n      startIcon,\n    };\n  }, [theme, colorScheme, disabled, hasError, hasStartIcon, hasEndIcon, hasEndAdornment]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAM,aACJ,OACA,aACA,UACA,UACA,cACA,YACA,kBAAkB,UAElB,cAAc;CACZ,MAAMA,qBAA6B,eAC/B,QAAQ,MAAM,KAAK,QAAQ,KAAK,SAChC,QAAQ,MAAM,KAAK,QAAQ,KAAK;CACpC,IAAI,mBAAmB,QAAQ,MAAM,KAAK,QAAQ,KAAK;AAEvD,KAAI,cAAc,gBAChB,oBAAmB,QAAQ,MAAM,KAAK,QAAQ,KAAK;UAC1C,cAAc,gBACvB,oBAAmB,QAAQ,MAAM,KAAK,QAAQ,KAAK;CAGrD,MAAMC,iBAAyB,GAAG;;;;;CAMlC,MAAMC,QAAgB,GAAG;;uBAEN,MAAM,KAAK,QAAQ,KAAK;8BACjB,mBAAmB;4BACrB,iBAAiB;0BACnB,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,OAAO;uBACtE,MAAM,KAAK,YAAY,OAAO,MAAM,gBAAgB,MAAM,KAAK,aAAa,OAAO;mBACvF,MAAM,KAAK,WAAW,UAAU,GAAG;qBACjC,MAAM,KAAK,WAAW,WAAW;eACvC,MAAM,KAAK,OAAO,KAAK,QAAQ;0BACpB,WAAW,MAAM,KAAK,OAAO,WAAW,WAAW,MAAM,KAAK,OAAO,WAAW,QAAQ;;;;;;;wBAO1F,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,QAAQ,KAAK;gCACjE,WAAW,GAAG,MAAM,KAAK,OAAO,MAAM,KAAK,MAAM,GAAG,MAAM,KAAK,OAAO,QAAQ,KAAK,IAAI;;;;;;;;;wBAS/F,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;iBAIhF,MAAM,KAAK,OAAO,KAAK,UAAU;;;;CAK9C,MAAMC,aAAqB,GAAG;sBACZ,MAAM,KAAK,OAAO,MAAM,KAAK;;;wBAG3B,MAAM,KAAK,OAAO,MAAM,KAAK;gCACrB,MAAM,KAAK,OAAO,MAAM,KAAK;;;;wBAIrC,MAAM,KAAK,OAAO,MAAM,KAAK;;;CAIjD,MAAMC,gBAAwB,GAAG;0BACX,MAAM,KAAK,OAAO,WAAW,SAAS;;;;CAK5D,MAAMC,OAAe,GAAG;;;;gBAIZ,WAAW,gBAAgB,UAAU;sBAC/B,MAAM,KAAK,QAAQ,KAAK;;;;eAI/B,MAAM,KAAK,OAAO,KAAK,UAAU;iBAC/B,WAAW,KAAM,EAAE;;;;;;;;iBAQnB,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;6BAInB,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;CAKxD,MAAMC,YAAoB,GAAG;QACzB,KAAK;4BACe,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,UAAkB,GAAG;QACvB,KAAK;+BACkB,MAAM,KAAK,QAAQ,KAAK,KAAK,kBAAkB,MAAM,EAAE;;AAYlF,QAAO;EACL,cAV2B,GAAG;;;;;;0BAMV,MAAM,KAAK,QAAQ,KAAK;;EAK5C;EACA;EACA;EACA;EACA;EACA;EACA;EACD;GACA;CAAC;CAAO;CAAa;CAAU;CAAU;CAAc;CAAY;CAAgB,CAAC;AAEzF,+BAAe"}

package/dist/components/primitives/UserSelect/BaseUserSelect.d.ts

@@ -0,0 +1,15 @@
+import type { FetchUsers, UserSelectOptionMapping } from '@thunderid/browser';
+import { FC } from 'react';
+import { ResourceSelectProps } from '../Select/ResourceSelect';
+export interface BaseUserSelectProps extends Omit<ResourceSelectProps, 'bemBlock' | 'defaults' | 'fallbackMessages' | 'fetchPage' | 'mapping' | 'messageKey' | 'resource' | 'type'> {
+    fetchUsers?: FetchUsers;
+    mapping?: UserSelectOptionMapping;
+}
+/**
+ * Single-user picker: a `Select` that loads from the given `fetchUsers`, submitting the user's ID and
+ * labelling each user from `display`, `username`, or `email` unless `mapping` says otherwise.
+ * Building block for {@link UserSelect}; for a custom data source use `Select` with `useInfiniteOptions`.
+ */
+declare const BaseUserSelect: FC<BaseUserSelectProps>;
+export default BaseUserSelect;
+//# sourceMappingURL=BaseUserSelect.d.ts.map

package/dist/components/primitives/UserSelect/BaseUserSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseUserSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/UserSelect/BaseUserSelect.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,UAAU,EAAwB,uBAAuB,EAAC,MAAM,oBAAoB,CAAC;AAClG,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AACzB,OAAuB,EAAC,mBAAmB,EAAC,MAAM,0BAA0B,CAAC;AAE7E,MAAM,WAAW,mBACf,SAAQ,IAAI,CACV,mBAAmB,EACnB,UAAU,GAAG,UAAU,GAAG,kBAAkB,GAAG,WAAW,GAAG,SAAS,GAAG,YAAY,GAAG,UAAU,GAAG,MAAM,CAC5G;IACD,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,OAAO,CAAC,EAAE,uBAAuB,CAAC;CACnC;AAID;;;;GAIG;AACH,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAY3C,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/primitives/UserSelect/BaseUserSelect.js

@@ -0,0 +1,30 @@
+import ResourceSelect_default from "../Select/ResourceSelect.js";
+import { EmbeddedFlowComponentType, UserSelectConstants } from "@thunderid/browser";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/primitives/UserSelect/BaseUserSelect.tsx
+const USER_DEFAULTS = { labelAttributes: UserSelectConstants.LABEL_ATTRIBUTES };
+/**
+* Single-user picker: a `Select` that loads from the given `fetchUsers`, submitting the user's ID and
+* labelling each user from `display`, `username`, or `email` unless `mapping` says otherwise.
+* Building block for {@link UserSelect}; for a custom data source use `Select` with `useInfiniteOptions`.
+*/
+const BaseUserSelect = ({ fetchUsers, mapping,...rest }) => /* @__PURE__ */ jsx(ResourceSelect_default, {
+	...rest,
+	bemBlock: "user-select",
+	defaults: USER_DEFAULTS,
+	fallbackMessages: {
+		ariaLabel: "Select a user",
+		empty: "No users found."
+	},
+	fetchPage: fetchUsers,
+	mapping,
+	messageKey: "user_select",
+	resource: "users",
+	type: EmbeddedFlowComponentType.UserSelect
+});
+var BaseUserSelect_default = BaseUserSelect;
+
+//#endregion
+export { BaseUserSelect_default as default };
+//# sourceMappingURL=BaseUserSelect.js.map

package/dist/components/primitives/UserSelect/BaseUserSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseUserSelect.js","names":["USER_DEFAULTS: SelectOptionDefaults","BaseUserSelect: FC<BaseUserSelectProps>","ResourceSelect"],"sources":["../../../../src/components/primitives/UserSelect/BaseUserSelect.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {EmbeddedFlowComponentType, UserSelectConstants} from '@thunderid/browser';\nimport type {FetchUsers, SelectOptionDefaults, UserSelectOptionMapping} from '@thunderid/browser';\nimport {FC} from 'react';\nimport ResourceSelect, {ResourceSelectProps} from '../Select/ResourceSelect';\n\nexport interface BaseUserSelectProps\n  extends Omit<\n    ResourceSelectProps,\n    'bemBlock' | 'defaults' | 'fallbackMessages' | 'fetchPage' | 'mapping' | 'messageKey' | 'resource' | 'type'\n  > {\n  fetchUsers?: FetchUsers;\n  mapping?: UserSelectOptionMapping;\n}\n\nconst USER_DEFAULTS: SelectOptionDefaults = {labelAttributes: UserSelectConstants.LABEL_ATTRIBUTES};\n\n/**\n * Single-user picker: a `Select` that loads from the given `fetchUsers`, submitting the user's ID and\n * labelling each user from `display`, `username`, or `email` unless `mapping` says otherwise.\n * Building block for {@link UserSelect}; for a custom data source use `Select` with `useInfiniteOptions`.\n */\nconst BaseUserSelect: FC<BaseUserSelectProps> = ({fetchUsers, mapping, ...rest}: BaseUserSelectProps) => (\n  <ResourceSelect\n    {...rest}\n    bemBlock=\"user-select\"\n    defaults={USER_DEFAULTS}\n    fallbackMessages={{ariaLabel: 'Select a user', empty: 'No users found.'}}\n    fetchPage={fetchUsers}\n    mapping={mapping}\n    messageKey=\"user_select\"\n    resource=\"users\"\n    type={EmbeddedFlowComponentType.UserSelect}\n  />\n);\n\nexport default BaseUserSelect;\n"],"mappings":";;;;;AAiBA,MAAMA,gBAAsC,EAAC,iBAAiB,oBAAoB,kBAAiB;;;;;;AAOnG,MAAMC,kBAA2C,EAAC,YAAY,QAAS,GAAG,WACxE,oBAACC;CACC,GAAI;CACJ,UAAS;CACT,UAAU;CACV,kBAAkB;EAAC,WAAW;EAAiB,OAAO;EAAkB;CACxE,WAAW;CACF;CACT,YAAW;CACX,UAAS;CACT,MAAM,0BAA0B;EAChC;AAGJ,6BAAe"}

package/dist/components/primitives/UserSelect/UserSelect.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { BaseUserSelectProps } from './BaseUserSelect';
+export type UserSelectProps = Omit<BaseUserSelectProps, 'fetchUsers'>;
+/**
+ * Single-user picker for signed-in screens. It loads the user directory itself with the signed-in
+ * user's access token and submits the chosen user's ID, so it takes no data source. For any other
+ * data source use {@link Select} with {@link useInfiniteOptions}.
+ */
+declare const UserSelect: FC<UserSelectProps>;
+export default UserSelect;
+//# sourceMappingURL=UserSelect.d.ts.map

package/dist/components/primitives/UserSelect/UserSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/UserSelect/UserSelect.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AACzB,OAAuB,EAAC,mBAAmB,EAAC,MAAM,kBAAkB,CAAC;AAGrE,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,mBAAmB,EAAE,YAAY,CAAC,CAAC;AAEtE;;;;GAIG;AACH,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAEnC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/primitives/UserSelect/UserSelect.js

@@ -0,0 +1,19 @@
+import useFetchUsers_default from "../../../hooks/useFetchUsers.js";
+import BaseUserSelect_default from "./BaseUserSelect.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/primitives/UserSelect/UserSelect.tsx
+/**
+* Single-user picker for signed-in screens. It loads the user directory itself with the signed-in
+* user's access token and submits the chosen user's ID, so it takes no data source. For any other
+* data source use {@link Select} with {@link useInfiniteOptions}.
+*/
+const UserSelect = (props) => /* @__PURE__ */ jsx(BaseUserSelect_default, {
+	...props,
+	fetchUsers: useFetchUsers_default()
+});
+var UserSelect_default = UserSelect;
+
+//#endregion
+export { UserSelect_default as default };
+//# sourceMappingURL=UserSelect.js.map

package/dist/components/primitives/UserSelect/UserSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserSelect.js","names":["UserSelect: FC<UserSelectProps>","BaseUserSelect","useFetchUsers"],"sources":["../../../../src/components/primitives/UserSelect/UserSelect.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {FC} from 'react';\nimport BaseUserSelect, {BaseUserSelectProps} from './BaseUserSelect';\nimport useFetchUsers from '../../../hooks/useFetchUsers';\n\nexport type UserSelectProps = Omit<BaseUserSelectProps, 'fetchUsers'>;\n\n/**\n * Single-user picker for signed-in screens. It loads the user directory itself with the signed-in\n * user's access token and submits the chosen user's ID, so it takes no data source. For any other\n * data source use {@link Select} with {@link useInfiniteOptions}.\n */\nconst UserSelect: FC<UserSelectProps> = (props: UserSelectProps) => (\n  <BaseUserSelect {...props} fetchUsers={useFetchUsers()} />\n);\n\nexport default UserSelect;\n"],"mappings":";;;;;;;;;;AAcA,MAAMA,cAAmC,UACvC,oBAACC;CAAe,GAAI;CAAO,YAAYC,uBAAe;EAAI;AAG5D,yBAAe"}

package/dist/components/primitives/UserTypeSelect/BaseUserTypeSelect.d.ts

@@ -0,0 +1,14 @@
+import type { FetchUserTypes } from '@thunderid/browser';
+import { FC } from 'react';
+import { ResourceSelectProps } from '../Select/ResourceSelect';
+export interface BaseUserTypeSelectProps extends Omit<ResourceSelectProps, 'bemBlock' | 'defaults' | 'fallbackMessages' | 'fetchPage' | 'mapping' | 'messageKey' | 'resource' | 'type'> {
+    fetchUserTypes?: FetchUserTypes;
+}
+/**
+ * User-type picker: a `Select` that loads from the given `fetchUserTypes`, showing and submitting
+ * each user type's handle. Building block for {@link UserTypeSelect}; for a custom data source use
+ * `Select` with `useInfiniteOptions`.
+ */
+declare const BaseUserTypeSelect: FC<BaseUserTypeSelectProps>;
+export default BaseUserTypeSelect;
+//# sourceMappingURL=BaseUserTypeSelect.d.ts.map

package/dist/components/primitives/UserTypeSelect/BaseUserTypeSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseUserTypeSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/UserTypeSelect/BaseUserTypeSelect.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AACzB,OAAuB,EAAC,mBAAmB,EAAC,MAAM,0BAA0B,CAAC;AAE7E,MAAM,WAAW,uBACf,SAAQ,IAAI,CACV,mBAAmB,EACnB,UAAU,GAAG,UAAU,GAAG,kBAAkB,GAAG,WAAW,GAAG,SAAS,GAAG,YAAY,GAAG,UAAU,GAAG,MAAM,CAC5G;IACD,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC;AAED;;;;GAIG;AACH,QAAA,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAcnD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/components/primitives/UserTypeSelect/BaseUserTypeSelect.js

@@ -0,0 +1,28 @@
+import ResourceSelect_default from "../Select/ResourceSelect.js";
+import { EmbeddedFlowComponentType, UserTypeSelectConstants } from "@thunderid/browser";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/primitives/UserTypeSelect/BaseUserTypeSelect.tsx
+/**
+* User-type picker: a `Select` that loads from the given `fetchUserTypes`, showing and submitting
+* each user type's handle. Building block for {@link UserTypeSelect}; for a custom data source use
+* `Select` with `useInfiniteOptions`.
+*/
+const BaseUserTypeSelect = ({ fetchUserTypes,...rest }) => /* @__PURE__ */ jsx(ResourceSelect_default, {
+	...rest,
+	bemBlock: "user-type-select",
+	fallbackMessages: {
+		ariaLabel: "Select a user type",
+		empty: "No user types found."
+	},
+	fetchPage: fetchUserTypes,
+	mapping: UserTypeSelectConstants.MAPPING,
+	messageKey: "user_type_select",
+	resource: "user types",
+	type: EmbeddedFlowComponentType.UserTypeSelect
+});
+var BaseUserTypeSelect_default = BaseUserTypeSelect;
+
+//#endregion
+export { BaseUserTypeSelect_default as default };
+//# sourceMappingURL=BaseUserTypeSelect.js.map

package/dist/components/primitives/UserTypeSelect/BaseUserTypeSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseUserTypeSelect.js","names":["BaseUserTypeSelect: FC<BaseUserTypeSelectProps>","ResourceSelect"],"sources":["../../../../src/components/primitives/UserTypeSelect/BaseUserTypeSelect.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {EmbeddedFlowComponentType, UserTypeSelectConstants} from '@thunderid/browser';\nimport type {FetchUserTypes} from '@thunderid/browser';\nimport {FC} from 'react';\nimport ResourceSelect, {ResourceSelectProps} from '../Select/ResourceSelect';\n\nexport interface BaseUserTypeSelectProps\n  extends Omit<\n    ResourceSelectProps,\n    'bemBlock' | 'defaults' | 'fallbackMessages' | 'fetchPage' | 'mapping' | 'messageKey' | 'resource' | 'type'\n  > {\n  fetchUserTypes?: FetchUserTypes;\n}\n\n/**\n * User-type picker: a `Select` that loads from the given `fetchUserTypes`, showing and submitting\n * each user type's handle. Building block for {@link UserTypeSelect}; for a custom data source use\n * `Select` with `useInfiniteOptions`.\n */\nconst BaseUserTypeSelect: FC<BaseUserTypeSelectProps> = ({fetchUserTypes, ...rest}: BaseUserTypeSelectProps) => (\n  <ResourceSelect\n    {...rest}\n    bemBlock=\"user-type-select\"\n    fallbackMessages={{\n      ariaLabel: 'Select a user type',\n      empty: 'No user types found.',\n    }}\n    fetchPage={fetchUserTypes}\n    mapping={UserTypeSelectConstants.MAPPING}\n    messageKey=\"user_type_select\"\n    resource=\"user types\"\n    type={EmbeddedFlowComponentType.UserTypeSelect}\n  />\n);\n\nexport default BaseUserTypeSelect;\n"],"mappings":";;;;;;;;;;AAqBA,MAAMA,sBAAmD,EAAC,eAAgB,GAAG,WAC3E,oBAACC;CACC,GAAI;CACJ,UAAS;CACT,kBAAkB;EAChB,WAAW;EACX,OAAO;EACR;CACD,WAAW;CACX,SAAS,wBAAwB;CACjC,YAAW;CACX,UAAS;CACT,MAAM,0BAA0B;EAChC;AAGJ,iCAAe"}

package/dist/components/primitives/UserTypeSelect/UserTypeSelect.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { BaseUserTypeSelectProps } from './BaseUserTypeSelect';
+export type UserTypeSelectProps = Omit<BaseUserTypeSelectProps, 'fetchUserTypes'>;
+/**
+ * User-type picker for signed-in screens. It loads the user types itself with the signed-in user's
+ * access token and submits the chosen type's handle, so it takes no data source. For any other data
+ * source use `Select` with `useInfiniteOptions`.
+ */
+declare const UserTypeSelect: FC<UserTypeSelectProps>;
+export default UserTypeSelect;
+//# sourceMappingURL=UserTypeSelect.d.ts.map

package/dist/components/primitives/UserTypeSelect/UserTypeSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserTypeSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/UserTypeSelect/UserTypeSelect.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AACzB,OAA2B,EAAC,uBAAuB,EAAC,MAAM,sBAAsB,CAAC;AAGjF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,uBAAuB,EAAE,gBAAgB,CAAC,CAAC;AAElF;;;;GAIG;AACH,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAE3C,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/primitives/UserTypeSelect/UserTypeSelect.js

@@ -0,0 +1,19 @@
+import useFetchUserTypes_default from "../../../hooks/useFetchUserTypes.js";
+import BaseUserTypeSelect_default from "./BaseUserTypeSelect.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/primitives/UserTypeSelect/UserTypeSelect.tsx
+/**
+* User-type picker for signed-in screens. It loads the user types itself with the signed-in user's
+* access token and submits the chosen type's handle, so it takes no data source. For any other data
+* source use `Select` with `useInfiniteOptions`.
+*/
+const UserTypeSelect = (props) => /* @__PURE__ */ jsx(BaseUserTypeSelect_default, {
+	...props,
+	fetchUserTypes: useFetchUserTypes_default()
+});
+var UserTypeSelect_default = UserTypeSelect;
+
+//#endregion
+export { UserTypeSelect_default as default };
+//# sourceMappingURL=UserTypeSelect.js.map

package/dist/components/primitives/UserTypeSelect/UserTypeSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserTypeSelect.js","names":["UserTypeSelect: FC<UserTypeSelectProps>","BaseUserTypeSelect","useFetchUserTypes"],"sources":["../../../../src/components/primitives/UserTypeSelect/UserTypeSelect.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {FC} from 'react';\nimport BaseUserTypeSelect, {BaseUserTypeSelectProps} from './BaseUserTypeSelect';\nimport useFetchUserTypes from '../../../hooks/useFetchUserTypes';\n\nexport type UserTypeSelectProps = Omit<BaseUserTypeSelectProps, 'fetchUserTypes'>;\n\n/**\n * User-type picker for signed-in screens. It loads the user types itself with the signed-in user's\n * access token and submits the chosen type's handle, so it takes no data source. For any other data\n * source use `Select` with `useInfiniteOptions`.\n */\nconst UserTypeSelect: FC<UserTypeSelectProps> = (props: UserTypeSelectProps) => (\n  <BaseUserTypeSelect {...props} fetchUserTypes={useFetchUserTypes()} />\n);\n\nexport default UserTypeSelect;\n"],"mappings":";;;;;;;;;;AAcA,MAAMA,kBAA2C,UAC/C,oBAACC;CAAmB,GAAI;CAAO,gBAAgBC,2BAAmB;EAAI;AAGxE,6BAAe"}

package/dist/hooks/useFetchAuthFlows.d.ts

@@ -0,0 +1,9 @@
+import type { FetchAuthFlows } from '@thunderid/browser';
+/**
+ * A `FetchAuthFlows` backed by the flow list, restricted to authentication flows and authenticated with
+ * the signed-in user's access token. Its identity is stable across renders, since a picker resets its
+ * loaded pages when the loader changes.
+ */
+declare const useFetchAuthFlows: () => FetchAuthFlows;
+export default useFetchAuthFlows;
+//# sourceMappingURL=useFetchAuthFlows.d.ts.map

package/dist/hooks/useFetchAuthFlows.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFetchAuthFlows.d.ts","sourceRoot":"","sources":["../../src/hooks/useFetchAuthFlows.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,cAAc,EAAgC,MAAM,oBAAoB,CAAC;AAKtF;;;;GAIG;AACH,QAAA,MAAM,iBAAiB,QAAO,cAoB7B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/hooks/useFetchAuthFlows.js

@@ -0,0 +1,33 @@
+import useManagementEndpoint_default from "./useManagementEndpoint.js";
+import { useResolvedFetcher } from "./useResourceQuery.js";
+import { AuthFlowSelectConstants, SelectConstants, getFlows, toAuthFlowSelectPage } from "@thunderid/browser";
+import { useCallback } from "react";
+
+//#region src/hooks/useFetchAuthFlows.ts
+/**
+* A `FetchAuthFlows` backed by the flow list, restricted to authentication flows and authenticated with
+* the signed-in user's access token. Its identity is stable across renders, since a picker resets its
+* loaded pages when the loader changes.
+*/
+const useFetchAuthFlows = () => {
+	const { baseUrl, url } = useManagementEndpoint_default("flows");
+	const fetcher = useResolvedFetcher();
+	return useCallback(async ({ limit, offset, signal }) => toAuthFlowSelectPage(await getFlows({
+		baseUrl,
+		fetcher,
+		flowType: AuthFlowSelectConstants.FLOW_TYPE,
+		limit: Math.min(limit, SelectConstants.MAX_PAGE_SIZE),
+		offset,
+		signal,
+		url
+	}), offset), [
+		baseUrl,
+		fetcher,
+		url
+	]);
+};
+var useFetchAuthFlows_default = useFetchAuthFlows;
+
+//#endregion
+export { useFetchAuthFlows_default as default };
+//# sourceMappingURL=useFetchAuthFlows.js.map

package/dist/hooks/useFetchAuthFlows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFetchAuthFlows.js","names":["useManagementEndpoint","fetcher: ReturnType<typeof useResolvedFetcher>"],"sources":["../../src/hooks/useFetchAuthFlows.ts"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {AuthFlowSelectConstants, getFlows, SelectConstants, toAuthFlowSelectPage} from '@thunderid/browser';\nimport type {FetchAuthFlows, SelectPage, SelectPageRequest} from '@thunderid/browser';\nimport {useCallback} from 'react';\nimport useManagementEndpoint, {ManagementEndpoint} from './useManagementEndpoint';\nimport {useResolvedFetcher} from './useResourceQuery';\n\n/**\n * A `FetchAuthFlows` backed by the flow list, restricted to authentication flows and authenticated with\n * the signed-in user's access token. Its identity is stable across renders, since a picker resets its\n * loaded pages when the loader changes.\n */\nconst useFetchAuthFlows = (): FetchAuthFlows => {\n  const {baseUrl, url}: ManagementEndpoint = useManagementEndpoint('flows');\n  const fetcher: ReturnType<typeof useResolvedFetcher> = useResolvedFetcher();\n\n  return useCallback(\n    async ({limit, offset, signal}: SelectPageRequest): Promise<SelectPage> =>\n      toAuthFlowSelectPage(\n        await getFlows({\n          baseUrl,\n          fetcher,\n          flowType: AuthFlowSelectConstants.FLOW_TYPE,\n          limit: Math.min(limit, SelectConstants.MAX_PAGE_SIZE),\n          offset,\n          signal,\n          url,\n        }),\n        offset,\n      ),\n    [baseUrl, fetcher, url],\n  );\n};\n\nexport default useFetchAuthFlows;\n"],"mappings":";;;;;;;;;;;AAcA,MAAM,0BAA0C;CAC9C,MAAM,EAAC,SAAS,QAA2BA,8BAAsB,QAAQ;CACzE,MAAMC,UAAiD,oBAAoB;AAE3E,QAAO,YACL,OAAO,EAAC,OAAO,QAAQ,aACrB,qBACE,MAAM,SAAS;EACb;EACA;EACA,UAAU,wBAAwB;EAClC,OAAO,KAAK,IAAI,OAAO,gBAAgB,cAAc;EACrD;EACA;EACA;EACD,CAAC,EACF,OACD,EACH;EAAC;EAAS;EAAS;EAAI,CACxB;;AAGH,gCAAe"}

package/dist/hooks/useFetchUserTypes.d.ts

@@ -0,0 +1,8 @@
+import type { FetchUserTypes } from '@thunderid/browser';
+/**
+ * A `FetchUserTypes` backed by the user type list, authenticated with the signed-in user's access token.
+ * Its identity is stable across renders, since a picker resets its loaded pages when the loader changes.
+ */
+declare const useFetchUserTypes: () => FetchUserTypes;
+export default useFetchUserTypes;
+//# sourceMappingURL=useFetchUserTypes.d.ts.map

package/dist/hooks/useFetchUserTypes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFetchUserTypes.d.ts","sourceRoot":"","sources":["../../src/hooks/useFetchUserTypes.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,cAAc,EAAgC,MAAM,oBAAoB,CAAC;AAKtF;;;GAGG;AACH,QAAA,MAAM,iBAAiB,QAAO,cAmB7B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/hooks/useFetchUserTypes.js

@@ -0,0 +1,31 @@
+import useManagementEndpoint_default from "./useManagementEndpoint.js";
+import { useResolvedFetcher } from "./useResourceQuery.js";
+import { SelectConstants, getUserTypes, toUserTypeSelectPage } from "@thunderid/browser";
+import { useCallback } from "react";
+
+//#region src/hooks/useFetchUserTypes.ts
+/**
+* A `FetchUserTypes` backed by the user type list, authenticated with the signed-in user's access token.
+* Its identity is stable across renders, since a picker resets its loaded pages when the loader changes.
+*/
+const useFetchUserTypes = () => {
+	const { baseUrl, url } = useManagementEndpoint_default("userTypes");
+	const fetcher = useResolvedFetcher();
+	return useCallback(async ({ limit, offset, signal }) => toUserTypeSelectPage(await getUserTypes({
+		baseUrl,
+		fetcher,
+		limit: Math.min(limit, SelectConstants.MAX_PAGE_SIZE),
+		offset,
+		signal,
+		url
+	}), offset), [
+		baseUrl,
+		fetcher,
+		url
+	]);
+};
+var useFetchUserTypes_default = useFetchUserTypes;
+
+//#endregion
+export { useFetchUserTypes_default as default };
+//# sourceMappingURL=useFetchUserTypes.js.map

package/dist/hooks/useFetchUserTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFetchUserTypes.js","names":["useManagementEndpoint","fetcher: ReturnType<typeof useResolvedFetcher>"],"sources":["../../src/hooks/useFetchUserTypes.ts"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {getUserTypes, SelectConstants, toUserTypeSelectPage} from '@thunderid/browser';\nimport type {FetchUserTypes, SelectPage, SelectPageRequest} from '@thunderid/browser';\nimport {useCallback} from 'react';\nimport useManagementEndpoint, {ManagementEndpoint} from './useManagementEndpoint';\nimport {useResolvedFetcher} from './useResourceQuery';\n\n/**\n * A `FetchUserTypes` backed by the user type list, authenticated with the signed-in user's access token.\n * Its identity is stable across renders, since a picker resets its loaded pages when the loader changes.\n */\nconst useFetchUserTypes = (): FetchUserTypes => {\n  const {baseUrl, url}: ManagementEndpoint = useManagementEndpoint('userTypes');\n  const fetcher: ReturnType<typeof useResolvedFetcher> = useResolvedFetcher();\n\n  return useCallback(\n    async ({limit, offset, signal}: SelectPageRequest): Promise<SelectPage> =>\n      toUserTypeSelectPage(\n        await getUserTypes({\n          baseUrl,\n          fetcher,\n          limit: Math.min(limit, SelectConstants.MAX_PAGE_SIZE),\n          offset,\n          signal,\n          url,\n        }),\n        offset,\n      ),\n    [baseUrl, fetcher, url],\n  );\n};\n\nexport default useFetchUserTypes;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,0BAA0C;CAC9C,MAAM,EAAC,SAAS,QAA2BA,8BAAsB,YAAY;CAC7E,MAAMC,UAAiD,oBAAoB;AAE3E,QAAO,YACL,OAAO,EAAC,OAAO,QAAQ,aACrB,qBACE,MAAM,aAAa;EACjB;EACA;EACA,OAAO,KAAK,IAAI,OAAO,gBAAgB,cAAc;EACrD;EACA;EACA;EACD,CAAC,EACF,OACD,EACH;EAAC;EAAS;EAAS;EAAI,CACxB;;AAGH,gCAAe"}

package/dist/hooks/useFetchUsers.d.ts

@@ -0,0 +1,8 @@
+import type { FetchUsers } from '@thunderid/browser';
+/**
+ * A `FetchUsers` backed by the user directory, authenticated with the signed-in user's access token.
+ * Its identity is stable across renders, since a picker resets its loaded pages when the loader changes.
+ */
+declare const useFetchUsers: () => FetchUsers;
+export default useFetchUsers;
+//# sourceMappingURL=useFetchUsers.d.ts.map

package/dist/hooks/useFetchUsers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFetchUsers.d.ts","sourceRoot":"","sources":["../../src/hooks/useFetchUsers.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,UAAU,EAAgC,MAAM,oBAAoB,CAAC;AAKlF;;;GAGG;AACH,QAAA,MAAM,aAAa,QAAO,UASzB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/hooks/useFetchUsers.js

@@ -0,0 +1,32 @@
+import useManagementEndpoint_default from "./useManagementEndpoint.js";
+import { useResolvedFetcher } from "./useResourceQuery.js";
+import { getUsers, toUserSelectPage } from "@thunderid/browser";
+import { useCallback } from "react";
+
+//#region src/hooks/useFetchUsers.ts
+/**
+* A `FetchUsers` backed by the user directory, authenticated with the signed-in user's access token.
+* Its identity is stable across renders, since a picker resets its loaded pages when the loader changes.
+*/
+const useFetchUsers = () => {
+	const { baseUrl, url } = useManagementEndpoint_default("users");
+	const fetcher = useResolvedFetcher();
+	return useCallback(async ({ filter, limit, offset, signal }) => toUserSelectPage(await getUsers({
+		baseUrl,
+		fetcher,
+		filter,
+		limit,
+		offset,
+		signal,
+		url
+	}), offset), [
+		baseUrl,
+		fetcher,
+		url
+	]);
+};
+var useFetchUsers_default = useFetchUsers;
+
+//#endregion
+export { useFetchUsers_default as default };
+//# sourceMappingURL=useFetchUsers.js.map

package/dist/hooks/useFetchUsers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFetchUsers.js","names":["useManagementEndpoint","fetcher: ReturnType<typeof useResolvedFetcher>"],"sources":["../../src/hooks/useFetchUsers.ts"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {getUsers, toUserSelectPage} from '@thunderid/browser';\nimport type {FetchUsers, SelectPage, SelectPageRequest} from '@thunderid/browser';\nimport {useCallback} from 'react';\nimport useManagementEndpoint, {ManagementEndpoint} from './useManagementEndpoint';\nimport {useResolvedFetcher} from './useResourceQuery';\n\n/**\n * A `FetchUsers` backed by the user directory, authenticated with the signed-in user's access token.\n * Its identity is stable across renders, since a picker resets its loaded pages when the loader changes.\n */\nconst useFetchUsers = (): FetchUsers => {\n  const {baseUrl, url}: ManagementEndpoint = useManagementEndpoint('users');\n  const fetcher: ReturnType<typeof useResolvedFetcher> = useResolvedFetcher();\n\n  return useCallback(\n    async ({filter, limit, offset, signal}: SelectPageRequest): Promise<SelectPage> =>\n      toUserSelectPage(await getUsers({baseUrl, fetcher, filter, limit, offset, signal, url}), offset),\n    [baseUrl, fetcher, url],\n  );\n};\n\nexport default useFetchUsers;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,sBAAkC;CACtC,MAAM,EAAC,SAAS,QAA2BA,8BAAsB,QAAQ;CACzE,MAAMC,UAAiD,oBAAoB;AAE3E,QAAO,YACL,OAAO,EAAC,QAAQ,OAAO,QAAQ,aAC7B,iBAAiB,MAAM,SAAS;EAAC;EAAS;EAAS;EAAQ;EAAO;EAAQ;EAAQ;EAAI,CAAC,EAAE,OAAO,EAClG;EAAC;EAAS;EAAS;EAAI,CACxB;;AAGH,4BAAe"}

package/dist/hooks/useInfiniteOptions.d.ts

@@ -0,0 +1,31 @@
+import type { SelectOption, SelectOptionInput, SelectOptionsBatch, SelectOptionsLoadContext } from '@thunderid/browser';
+export type InfiniteOptionsLoadContext<TCursor = unknown> = SelectOptionsLoadContext<TCursor>;
+export type InfiniteOptionsBatch<TCursor = unknown> = SelectOptionsBatch<TCursor>;
+export interface UseInfiniteOptionsArgs<TCursor = unknown> {
+    /** Options shown before anything is loaded, and again after {@link UseInfiniteOptionsResult.reset}. */
+    initialOptions?: SelectOptionInput[];
+    /** Loads the next batch. Returning nothing counts as an empty batch. */
+    load: (context: InfiniteOptionsLoadContext<TCursor>) => Promise<InfiniteOptionsBatch<TCursor> | null | undefined>;
+    /** Called with the error of every failed load. A failed load never changes the options. */
+    onError?: (error: Error) => void;
+}
+export interface UseInfiniteOptionsResult {
+    /** The error of the last load, cleared by the next successful one. */
+    error: Error | null;
+    /** Whether more batches may be available. */
+    hasMore: boolean;
+    loading: boolean;
+    /** Pass to `Select` while `hasMore` is true, so its load more option is listed only while there is more to load. Its identity is stable across renders. */
+    onLoadMore: () => void;
+    options: SelectOption[];
+    /** Back to `initialOptions`; reloads right away if loading had already started. */
+    reset: () => void;
+}
+/**
+ * Keeps the option list of a `Select` that loads more options when the user asks for them. It owns the cursor,
+ * appends each batch without duplicates, and stops at the end of the data. Nothing is rendered, so it works with
+ * any list component.
+ */
+declare const useInfiniteOptions: <TCursor = unknown>({ initialOptions, load, onError, }: UseInfiniteOptionsArgs<TCursor>) => UseInfiniteOptionsResult;
+export default useInfiniteOptions;
+//# sourceMappingURL=useInfiniteOptions.d.ts.map

package/dist/hooks/useInfiniteOptions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInfiniteOptions.d.ts","sourceRoot":"","sources":["../../src/hooks/useInfiniteOptions.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAEV,YAAY,EACZ,iBAAiB,EACjB,kBAAkB,EAClB,wBAAwB,EACzB,MAAM,oBAAoB,CAAC;AAQ5B,MAAM,MAAM,0BAA0B,CAAC,OAAO,GAAG,OAAO,IAAI,wBAAwB,CAAC,OAAO,CAAC,CAAC;AAE9F,MAAM,MAAM,oBAAoB,CAAC,OAAO,GAAG,OAAO,IAAI,kBAAkB,CAAC,OAAO,CAAC,CAAC;AAElF,MAAM,WAAW,sBAAsB,CAAC,OAAO,GAAG,OAAO;IACvD,uGAAuG;IACvG,cAAc,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACrC,wEAAwE;IACxE,IAAI,EAAE,CAAC,OAAO,EAAE,0BAA0B,CAAC,OAAO,CAAC,KAAK,OAAO,CAAC,oBAAoB,CAAC,OAAO,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IAClH,2FAA2F;IAC3F,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAED,MAAM,WAAW,wBAAwB;IACvC,sEAAsE;IACtE,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,6CAA6C;IAC7C,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,2JAA2J;IAC3J,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,mFAAmF;IACnF,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED;;;;GAIG;AACH,QAAA,MAAM,kBAAkB,GAAI,OAAO,GAAG,OAAO,EAAE,oCAI5C,sBAAsB,CAAC,OAAO,CAAC,KAAG,wBAgIpC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}