@thunderid/react 1.3.3 → 1.4.1

package/dist/cjs/components/primitives/Select/Select.cjs

@@ -4,42 +4,101 @@ const require_useTheme = require('../../../contexts/Theme/useTheme.cjs');
 const require_FormControl = require('../FormControl/FormControl.cjs');
 const require_InputLabel = require('../InputLabel/InputLabel.cjs');
 const require_Select_styles = require('./Select.styles.cjs');
+const require_useSelectMessages = require('./useSelectMessages.cjs');
 let __thunderid_browser = require("@thunderid/browser");
 __thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/components/primitives/Select/Select.tsx
-const Select = ({ label, error, className, required, disabled, helperText, placeholder, options, style = {},...rest }) => {
+const Select = ({ label, error, className, required, disabled, helperText, placeholder, options = void 0, emptyText = void 0, loading = false, onLoadMore = void 0, onChange = void 0, selectedOption = void 0, style = {},...rest }) => {
 	const { theme, colorScheme } = require_useTheme.default();
+	const messages = require_useSelectMessages.default();
 	const hasError = !!error;
+	const generatedId = (0, react.useId)();
+	const inputId = rest.id ?? generatedId;
+	const helperTextId = error || helperText ? `${inputId}-helper-text` : void 0;
+	const describedBy = [rest["aria-describedby"], helperTextId].filter(Boolean).join(" ") || void 0;
 	const styles = require_Select_styles.default(theme, colorScheme, disabled ?? false, hasError);
+	const items = (0, react.useMemo)(() => (0, __thunderid_browser.normalizeSelectOptions)(options), [options]);
+	const selectRef = (0, react.useRef)(null);
+	const chosenValueRef = (0, react.useRef)("");
+	(0, react.useEffect)(() => {
+		const current = selectRef.current?.value;
+		if (current !== void 0 && current !== __thunderid_browser.SelectConstants.LOAD_MORE_OPTION_VALUE) chosenValueRef.current = current;
+	});
+	const handleChange = (event) => {
+		if (event.target.value !== __thunderid_browser.SelectConstants.LOAD_MORE_OPTION_VALUE) {
+			chosenValueRef.current = event.target.value;
+			onChange?.(event);
+			return;
+		}
+		event.target.value = chosenValueRef.current;
+		onLoadMore?.();
+	};
 	const selectClassName = require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("select", "input")), styles["select"], hasError && styles["selectError"], disabled && styles["selectDisabled"]);
+	const showsSelectedOption = selectedOption !== void 0 && rest.value !== void 0 && String(rest.value) === selectedOption.value && !items.some((item) => item.value === selectedOption.value);
+	let statusText;
+	if (loading) statusText = items.length === 0 ? messages.loading : messages.loadingMore;
+	else if (items.length === 0 && !onLoadMore) statusText = emptyText;
+	const hasStatus = onLoadMore !== void 0 || emptyText !== void 0 || loading;
+	const showsLoadMore = onLoadMore !== void 0 && (items.length > 0 || !loading);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_FormControl.default, {
 		error,
 		helperText,
+		helperTextId,
 		className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("select")), className),
 		style,
-		children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InputLabel.default, {
-			required,
-			error: hasError,
-			children: label
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
-			className: selectClassName,
-			disabled,
-			"aria-invalid": hasError,
-			"aria-required": required,
-			...rest,
-			children: [placeholder && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-				value: "",
-				disabled: true,
-				children: placeholder
-			}), options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-				value: option.value,
-				className: styles["option"],
-				children: option.label
-			}, option.value))]
-		})]
+		children: [
+			label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InputLabel.default, {
+				htmlFor: inputId,
+				required,
+				error: hasError,
+				children: label
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+				className: selectClassName,
+				disabled,
+				"aria-invalid": hasError,
+				"aria-required": required,
+				"aria-busy": loading || void 0,
+				...rest,
+				id: inputId,
+				"aria-describedby": describedBy,
+				ref: selectRef,
+				onChange: onLoadMore ? handleChange : onChange,
+				children: [
+					placeholder && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+						value: "",
+						disabled: Boolean(required),
+						children: placeholder
+					}),
+					showsSelectedOption && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+						value: selectedOption?.value,
+						children: selectedOption?.label
+					}),
+					items.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+						value: option.value,
+						disabled: option.disabled,
+						className: styles["option"],
+						children: option.label
+					}, option.value)),
+					showsLoadMore && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+						value: __thunderid_browser.SelectConstants.LOAD_MORE_OPTION_VALUE,
+						disabled: loading,
+						className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("select", "load-more")), styles["option"], styles["loadMore"]),
+						children: loading ? messages.loadingMore : messages.loadMore
+					})
+				]
+			}),
+			hasStatus && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				role: "status",
+				className: styles["status"],
+				children: statusText
+			})
+		]
 	});
 };
 var Select_default = Select;

package/dist/cjs/components/primitives/Select/Select.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.cjs","names":["Select: FC<SelectProps>","useTheme","styles: Record<string, string>","useStyles","selectClassName: string","cx","FormControl","InputLabel"],"sources":["../../../../../src/components/primitives/Select/Select.tsx"],"sourcesContent":["// Copyright 2024 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {FC, SelectHTMLAttributes} from 'react';\nimport useStyles from './Select.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 SelectOption {\n  /**\n   * The text that will be displayed in the select\n   */\n  label: string;\n  /**\n   * The value that will be submitted with the form\n   */\n  value: string;\n}\n\nexport interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'className'> {\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n  /**\n   * Whether the field is disabled\n   */\n  disabled?: boolean;\n  /**\n   * Error message to display below the select\n   */\n  error?: string;\n  /**\n   * Helper text to display below the select\n   */\n  helperText?: string;\n  /**\n   * Label text to display above the select\n   */\n  label?: string;\n  /**\n   * The options to display in the select\n   */\n  options: SelectOption[];\n  /**\n   * Placeholder text for the default/empty option\n   */\n  placeholder?: string;\n  /**\n   * Whether the field is required\n   */\n  required?: boolean;\n}\n\nconst Select: FC<SelectProps> = ({\n  label,\n  error,\n  className,\n  required,\n  disabled,\n  helperText,\n  placeholder,\n  options,\n  style = {},\n  ...rest\n}: SelectProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const hasError = !!error;\n  const styles: Record<string, string> = useStyles(theme, colorScheme, disabled ?? false, hasError);\n\n  const selectClassName: string = cx(\n    withVendorCSSClassPrefix(bem('select', 'input')),\n    styles['select'],\n    hasError && styles['selectError'],\n    disabled && styles['selectDisabled'],\n  );\n\n  return (\n    <FormControl\n      error={error}\n      helperText={helperText}\n      className={cx(withVendorCSSClassPrefix(bem('select')), className)}\n      style={style}\n    >\n      {label && (\n        <InputLabel required={required} error={hasError}>\n          {label}\n        </InputLabel>\n      )}\n      <select\n        className={selectClassName}\n        disabled={disabled}\n        aria-invalid={hasError}\n        aria-required={required}\n        {...rest}\n      >\n        {placeholder && (\n          <option value=\"\" disabled>\n            {placeholder}\n          </option>\n        )}\n        {options.map((option: SelectOption) => (\n          <option key={option.value} value={option.value} className={styles['option']}>\n            {option.label}\n          </option>\n        ))}\n      </select>\n    </FormControl>\n  );\n};\n\nexport default Select;\n"],"mappings":";;;;;;;;;;;;AAyDA,MAAMA,UAA2B,EAC/B,OACA,OACA,WACA,UACA,UACA,YACA,aACA,SACA,QAAQ,EAAE,CACV,GAAG,WACc;CACjB,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAM,WAAW,CAAC,CAAC;CACnB,MAAMC,SAAiCC,8BAAU,OAAO,aAAa,YAAY,OAAO,SAAS;CAEjG,MAAMC,kBAA0BC,kGACD,UAAU,QAAQ,CAAC,EAChD,OAAO,WACP,YAAY,OAAO,gBACnB,YAAY,OAAO,kBACpB;AAED,QACE,4CAACC;EACQ;EACK;EACZ,WAAWD,kGAAgC,SAAS,CAAC,EAAE,UAAU;EAC1D;aAEN,SACC,2CAACE;GAAqB;GAAU,OAAO;aACpC;IACU,EAEf,4CAAC;GACC,WAAW;GACD;GACV,gBAAc;GACd,iBAAe;GACf,GAAI;cAEH,eACC,2CAAC;IAAO,OAAM;IAAG;cACd;KACM,EAEV,QAAQ,KAAK,WACZ,2CAAC;IAA0B,OAAO,OAAO;IAAO,WAAW,OAAO;cAC/D,OAAO;MADG,OAAO,MAEX,CACT;IACK;GACG;;AAIlB,qBAAe"}
+{"version":3,"file":"Select.cjs","names":["Select: FC<SelectProps>","useTheme","messages: SelectMessages","useSelectMessages","generatedId: string","inputId: string","helperTextId: string | undefined","describedBy: string | undefined","styles: Record<string, string>","useStyles","items: SelectOption[]","selectRef: RefObject<HTMLSelectElement | null>","chosenValueRef: RefObject<string>","current: string | undefined","SelectConstants","selectClassName: string","cx","showsSelectedOption: boolean","statusText: string | undefined","hasStatus: boolean","showsLoadMore: boolean","FormControl","InputLabel"],"sources":["../../../../../src/components/primitives/Select/Select.tsx"],"sourcesContent":["// Copyright 2024 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {bem, normalizeSelectOptions, SelectConstants, withVendorCSSClassPrefix} from '@thunderid/browser';\nimport type {SelectOption, SelectOptionInput} from '@thunderid/browser';\nimport {ChangeEvent, FC, RefObject, SelectHTMLAttributes, useEffect, useId, useMemo, useRef} from 'react';\nimport useStyles from './Select.styles';\nimport useSelectMessages, {SelectMessages} from './useSelectMessages';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\n\nexport type {SelectOption, SelectOptionInput};\n\nexport interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'className'> {\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n  /**\n   * Whether the field is disabled\n   */\n  disabled?: boolean;\n  /**\n   * Text shown below the select when it has no options, nothing is loading and there is nothing more to load\n   */\n  emptyText?: string;\n  /**\n   * Error message to display below the select\n   */\n  error?: string;\n  /**\n   * Helper text to display below the select\n   */\n  helperText?: string;\n  /**\n   * Label text to display above the select\n   */\n  label?: string;\n  /**\n   * Whether options are being fetched. The load more option waits, and a select with no options shows a loading message\n   */\n  loading?: boolean;\n  /**\n   * Called when the load more option, listed after the last one, is chosen. Choosing it does not change the selection.\n   * The option is listed only when this is set, so pass it only while more options may be available\n   */\n  onLoadMore?: () => void;\n  /**\n   * The options to display: strings, numbers, or `{label, value, disabled?}` objects\n   */\n  options?: readonly (SelectOptionInput | null | undefined)[] | null;\n  /**\n   * Placeholder text for the default/empty option. While the field is not required, choosing it clears the selection\n   */\n  placeholder?: string;\n  /**\n   * Whether the field is required\n   */\n  required?: boolean;\n  /**\n   * Label of the selected option while `value` is not among `options`, such as a value loaded from saved data\n   */\n  selectedOption?: SelectOption;\n}\n\nconst Select: FC<SelectProps> = ({\n  label,\n  error,\n  className,\n  required,\n  disabled,\n  helperText,\n  placeholder,\n  options = undefined,\n  emptyText = undefined,\n  loading = false,\n  onLoadMore = undefined,\n  onChange = undefined,\n  selectedOption = undefined,\n  style = {},\n  ...rest\n}: SelectProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const messages: SelectMessages = useSelectMessages();\n  const hasError = !!error;\n  const generatedId: string = useId();\n  const inputId: string = rest.id ?? generatedId;\n  const helperTextId: string | undefined = error || helperText ? `${inputId}-helper-text` : undefined;\n  const describedBy: string | undefined =\n    [rest['aria-describedby'], helperTextId].filter(Boolean).join(' ') || undefined;\n  const styles: Record<string, string> = useStyles(theme, colorScheme, disabled ?? false, hasError);\n  const items: SelectOption[] = useMemo(() => normalizeSelectOptions(options), [options]);\n  const selectRef: RefObject<HTMLSelectElement | null> = useRef<HTMLSelectElement>(null);\n  const chosenValueRef: RefObject<string> = useRef<string>('');\n\n  // The value to put back when the load more option is chosen, since choosing it is not a selection.\n  useEffect(() => {\n    const current: string | undefined = selectRef.current?.value;\n\n    if (current !== undefined && current !== SelectConstants.LOAD_MORE_OPTION_VALUE) {\n      chosenValueRef.current = current;\n    }\n  });\n\n  const handleChange = (event: ChangeEvent<HTMLSelectElement>): void => {\n    if (event.target.value !== SelectConstants.LOAD_MORE_OPTION_VALUE) {\n      chosenValueRef.current = event.target.value;\n      onChange?.(event);\n\n      return;\n    }\n\n    event.target.value = chosenValueRef.current;\n    onLoadMore?.();\n  };\n\n  const selectClassName: string = cx(\n    withVendorCSSClassPrefix(bem('select', 'input')),\n    styles['select'],\n    hasError && styles['selectError'],\n    disabled && styles['selectDisabled'],\n  );\n\n  const showsSelectedOption: boolean =\n    selectedOption !== undefined &&\n    rest.value !== undefined &&\n    String(rest.value) === selectedOption.value &&\n    !items.some((item: SelectOption) => item.value === selectedOption.value);\n\n  let statusText: string | undefined;\n\n  if (loading) {\n    statusText = items.length === 0 ? messages.loading : messages.loadingMore;\n  } else if (items.length === 0 && !onLoadMore) {\n    statusText = emptyText;\n  }\n\n  const hasStatus: boolean = onLoadMore !== undefined || emptyText !== undefined || loading;\n  const showsLoadMore: boolean = onLoadMore !== undefined && (items.length > 0 || !loading);\n\n  return (\n    <FormControl\n      error={error}\n      helperText={helperText}\n      helperTextId={helperTextId}\n      className={cx(withVendorCSSClassPrefix(bem('select')), className)}\n      style={style}\n    >\n      {label && (\n        <InputLabel htmlFor={inputId} required={required} error={hasError}>\n          {label}\n        </InputLabel>\n      )}\n      <select\n        className={selectClassName}\n        disabled={disabled}\n        aria-invalid={hasError}\n        aria-required={required}\n        aria-busy={loading || undefined}\n        {...rest}\n        id={inputId}\n        aria-describedby={describedBy}\n        ref={selectRef}\n        onChange={onLoadMore ? handleChange : onChange}\n      >\n        {placeholder && (\n          <option value=\"\" disabled={Boolean(required)}>\n            {placeholder}\n          </option>\n        )}\n        {showsSelectedOption && <option value={selectedOption?.value}>{selectedOption?.label}</option>}\n        {items.map((option: SelectOption) => (\n          <option key={option.value} value={option.value} disabled={option.disabled} className={styles['option']}>\n            {option.label}\n          </option>\n        ))}\n        {showsLoadMore && (\n          <option\n            value={SelectConstants.LOAD_MORE_OPTION_VALUE}\n            disabled={loading}\n            className={cx(withVendorCSSClassPrefix(bem('select', 'load-more')), styles['option'], styles['loadMore'])}\n          >\n            {loading ? messages.loadingMore : messages.loadMore}\n          </option>\n        )}\n      </select>\n      {hasStatus && (\n        <span role=\"status\" className={styles['status']}>\n          {statusText}\n        </span>\n      )}\n    </FormControl>\n  );\n};\n\nexport default Select;\n"],"mappings":";;;;;;;;;;;;;;;AAmEA,MAAMA,UAA2B,EAC/B,OACA,OACA,WACA,UACA,UACA,YACA,aACA,UAAU,QACV,YAAY,QACZ,UAAU,OACV,aAAa,QACb,WAAW,QACX,iBAAiB,QACjB,QAAQ,EAAE,CACV,GAAG,WACc;CACjB,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAMC,WAA2BC,mCAAmB;CACpD,MAAM,WAAW,CAAC,CAAC;CACnB,MAAMC,gCAA6B;CACnC,MAAMC,UAAkB,KAAK,MAAM;CACnC,MAAMC,eAAmC,SAAS,aAAa,GAAG,QAAQ,gBAAgB;CAC1F,MAAMC,cACJ,CAAC,KAAK,qBAAqB,aAAa,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,IAAI;CACxE,MAAMC,SAAiCC,8BAAU,OAAO,aAAa,YAAY,OAAO,SAAS;CACjG,MAAMC,iFAA6D,QAAQ,EAAE,CAAC,QAAQ,CAAC;CACvF,MAAMC,8BAA2E,KAAK;CACtF,MAAMC,mCAAmD,GAAG;AAG5D,4BAAgB;EACd,MAAMC,UAA8B,UAAU,SAAS;AAEvD,MAAI,YAAY,UAAa,YAAYC,oCAAgB,uBACvD,gBAAe,UAAU;GAE3B;CAEF,MAAM,gBAAgB,UAAgD;AACpE,MAAI,MAAM,OAAO,UAAUA,oCAAgB,wBAAwB;AACjE,kBAAe,UAAU,MAAM,OAAO;AACtC,cAAW,MAAM;AAEjB;;AAGF,QAAM,OAAO,QAAQ,eAAe;AACpC,gBAAc;;CAGhB,MAAMC,kBAA0BC,kGACD,UAAU,QAAQ,CAAC,EAChD,OAAO,WACP,YAAY,OAAO,gBACnB,YAAY,OAAO,kBACpB;CAED,MAAMC,sBACJ,mBAAmB,UACnB,KAAK,UAAU,UACf,OAAO,KAAK,MAAM,KAAK,eAAe,SACtC,CAAC,MAAM,MAAM,SAAuB,KAAK,UAAU,eAAe,MAAM;CAE1E,IAAIC;AAEJ,KAAI,QACF,cAAa,MAAM,WAAW,IAAI,SAAS,UAAU,SAAS;UACrD,MAAM,WAAW,KAAK,CAAC,WAChC,cAAa;CAGf,MAAMC,YAAqB,eAAe,UAAa,cAAc,UAAa;CAClF,MAAMC,gBAAyB,eAAe,WAAc,MAAM,SAAS,KAAK,CAAC;AAEjF,QACE,4CAACC;EACQ;EACK;EACE;EACd,WAAWL,kGAAgC,SAAS,CAAC,EAAE,UAAU;EAC1D;;GAEN,SACC,2CAACM;IAAW,SAAS;IAAmB;IAAU,OAAO;cACtD;KACU;GAEf,4CAAC;IACC,WAAW;IACD;IACV,gBAAc;IACd,iBAAe;IACf,aAAW,WAAW;IACtB,GAAI;IACJ,IAAI;IACJ,oBAAkB;IAClB,KAAK;IACL,UAAU,aAAa,eAAe;;KAErC,eACC,2CAAC;MAAO,OAAM;MAAG,UAAU,QAAQ,SAAS;gBACzC;OACM;KAEV,uBAAuB,2CAAC;MAAO,OAAO,gBAAgB;gBAAQ,gBAAgB;OAAe;KAC7F,MAAM,KAAK,WACV,2CAAC;MAA0B,OAAO,OAAO;MAAO,UAAU,OAAO;MAAU,WAAW,OAAO;gBAC1F,OAAO;QADG,OAAO,MAEX,CACT;KACD,iBACC,2CAAC;MACC,OAAOR,oCAAgB;MACvB,UAAU;MACV,WAAWE,kGAAgC,UAAU,YAAY,CAAC,EAAE,OAAO,WAAW,OAAO,YAAY;gBAExG,UAAU,SAAS,cAAc,SAAS;OACpC;;KAEJ;GACR,aACC,2CAAC;IAAK,MAAK;IAAS,WAAW,OAAO;cACnC;KACI;;GAEG;;AAIlB,qBAAe"}

package/dist/cjs/components/primitives/Select/Select.styles.cjs

@@ -65,8 +65,7 @@ const useStyles = (theme, colorScheme, disabled, hasError) => (0, react.useMemo)
       opacity: 0.6;
       cursor: not-allowed;
     `;
-	return {
-		option: require_emotion.css`
+	const option = require_emotion.css`
       padding: calc(${theme.vars.spacing.unit} / 2) ${theme.vars.spacing.unit};
       color: ${theme.vars.colors.text.primary};
       background-color: ${theme.vars.colors.background.surface};
@@ -79,10 +78,27 @@ const useStyles = (theme, colorScheme, disabled, hasError) => (0, react.useMemo)
         background-color: ${theme.vars.colors.primary.main};
         color: ${theme.vars.colors.primary.contrastText};
       }
+    `;
+	const status = require_emotion.css`
+      display: block;
+      margin-top: calc(${theme.vars.spacing.unit} / 2);
+      font-size: ${theme.vars.typography.fontSizes.sm};
+      color: ${theme.vars.colors.text.secondary};
+
+      &:empty {
+        display: none;
+      }
+    `;
+	return {
+		loadMore: require_emotion.css`
+      color: ${theme.vars.colors.primary.main};
+      font-weight: ${theme.vars.typography.fontWeights.medium};
     `,
+		option,
 		select,
 		selectDisabled,
-		selectError
+		selectError,
+		status
 	};
 }, [
 	theme,

package/dist/cjs/components/primitives/Select/Select.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.styles.cjs","names":["select: string","selectError: string","selectDisabled: string"],"sources":["../../../../../src/components/primitives/Select/Select.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 Select 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 * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string, disabled: boolean, hasError: boolean): Record<string, string> =>\n  useMemo(() => {\n    const dropdownArrowColor: string = theme.colors.text.secondary.replace('#', '');\n    const dropdownArrow = `data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23${dropdownArrowColor}%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E`;\n\n    const select: string = css`\n      width: 100%;\n      padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 1.5);\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      appearance: none;\n      background-image: url('${dropdownArrow}');\n      background-repeat: no-repeat;\n      background-position: right 0.7em top 50%;\n      background-size: 0.65em auto;\n      cursor: ${disabled ? 'not-allowed' : 'pointer'};\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\n    const selectError: 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 selectDisabled: string = css`\n      background-color: ${theme.vars.colors.background.disabled};\n      opacity: 0.6;\n      cursor: not-allowed;\n    `;\n\n    const option: string = css`\n      padding: calc(${theme.vars.spacing.unit} / 2) ${theme.vars.spacing.unit};\n      color: ${theme.vars.colors.text.primary};\n      background-color: ${theme.vars.colors.background.surface};\n\n      &:hover {\n        background-color: ${theme.vars.colors.action.hover};\n      }\n\n      &:checked {\n        background-color: ${theme.vars.colors.primary.main};\n        color: ${theme.vars.colors.primary.contrastText};\n      }\n    `;\n\n    return {\n      option,\n      select,\n      selectDisabled,\n      selectError,\n    };\n  }, [theme, colorScheme, disabled, hasError]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;AAeA,MAAM,aAAa,OAAc,aAAqB,UAAmB,sCACzD;CAEZ,MAAM,gBAAgB,yKADa,MAAM,OAAO,KAAK,UAAU,QAAQ,KAAK,GAAG,CACmI;CAElN,MAAMA,SAAiB,mBAAG;;iBAEb,MAAM,KAAK,QAAQ,KAAK,QAAQ,MAAM,KAAK,QAAQ,KAAK;0BAC/C,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;;;;;;+BAMnF,cAAc;;;;gBAI7B,WAAW,gBAAgB,UAAU;;;wBAG7B,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;;;CAI7F,MAAMC,cAAsB,mBAAG;sBACb,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,iBAAyB,mBAAG;0BACZ,MAAM,KAAK,OAAO,WAAW,SAAS;;;;AAoB5D,QAAO;EACL,QAhBqB,mBAAG;sBACR,MAAM,KAAK,QAAQ,KAAK,QAAQ,MAAM,KAAK,QAAQ,KAAK;eAC/D,MAAM,KAAK,OAAO,KAAK,QAAQ;0BACpB,MAAM,KAAK,OAAO,WAAW,QAAQ;;;4BAGnC,MAAM,KAAK,OAAO,OAAO,MAAM;;;;4BAI/B,MAAM,KAAK,OAAO,QAAQ,KAAK;iBAC1C,MAAM,KAAK,OAAO,QAAQ,aAAa;;;EAMlD;EACA;EACA;EACD;GACA;CAAC;CAAO;CAAa;CAAU;CAAS,CAAC;AAE9C,4BAAe"}
+{"version":3,"file":"Select.styles.cjs","names":["select: string","selectError: string","selectDisabled: string","option: string","status: string"],"sources":["../../../../../src/components/primitives/Select/Select.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 Select 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 * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string, disabled: boolean, hasError: boolean): Record<string, string> =>\n  useMemo(() => {\n    const dropdownArrowColor: string = theme.colors.text.secondary.replace('#', '');\n    const dropdownArrow = `data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23${dropdownArrowColor}%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E`;\n\n    const select: string = css`\n      width: 100%;\n      padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 1.5);\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      appearance: none;\n      background-image: url('${dropdownArrow}');\n      background-repeat: no-repeat;\n      background-position: right 0.7em top 50%;\n      background-size: 0.65em auto;\n      cursor: ${disabled ? 'not-allowed' : 'pointer'};\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\n    const selectError: 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 selectDisabled: string = css`\n      background-color: ${theme.vars.colors.background.disabled};\n      opacity: 0.6;\n      cursor: not-allowed;\n    `;\n\n    const option: string = css`\n      padding: calc(${theme.vars.spacing.unit} / 2) ${theme.vars.spacing.unit};\n      color: ${theme.vars.colors.text.primary};\n      background-color: ${theme.vars.colors.background.surface};\n\n      &:hover {\n        background-color: ${theme.vars.colors.action.hover};\n      }\n\n      &:checked {\n        background-color: ${theme.vars.colors.primary.main};\n        color: ${theme.vars.colors.primary.contrastText};\n      }\n    `;\n\n    const status: string = css`\n      display: block;\n      margin-top: calc(${theme.vars.spacing.unit} / 2);\n      font-size: ${theme.vars.typography.fontSizes.sm};\n      color: ${theme.vars.colors.text.secondary};\n\n      &:empty {\n        display: none;\n      }\n    `;\n\n    const loadMore: string = css`\n      color: ${theme.vars.colors.primary.main};\n      font-weight: ${theme.vars.typography.fontWeights.medium};\n    `;\n\n    return {\n      loadMore,\n      option,\n      select,\n      selectDisabled,\n      selectError,\n      status,\n    };\n  }, [theme, colorScheme, disabled, hasError]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;AAeA,MAAM,aAAa,OAAc,aAAqB,UAAmB,sCACzD;CAEZ,MAAM,gBAAgB,yKADa,MAAM,OAAO,KAAK,UAAU,QAAQ,KAAK,GAAG,CACmI;CAElN,MAAMA,SAAiB,mBAAG;;iBAEb,MAAM,KAAK,QAAQ,KAAK,QAAQ,MAAM,KAAK,QAAQ,KAAK;0BAC/C,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;;;;;;+BAMnF,cAAc;;;;gBAI7B,WAAW,gBAAgB,UAAU;;;wBAG7B,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;;;CAI7F,MAAMC,cAAsB,mBAAG;sBACb,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,iBAAyB,mBAAG;0BACZ,MAAM,KAAK,OAAO,WAAW,SAAS;;;;CAK5D,MAAMC,SAAiB,mBAAG;sBACR,MAAM,KAAK,QAAQ,KAAK,QAAQ,MAAM,KAAK,QAAQ,KAAK;eAC/D,MAAM,KAAK,OAAO,KAAK,QAAQ;0BACpB,MAAM,KAAK,OAAO,WAAW,QAAQ;;;4BAGnC,MAAM,KAAK,OAAO,OAAO,MAAM;;;;4BAI/B,MAAM,KAAK,OAAO,QAAQ,KAAK;iBAC1C,MAAM,KAAK,OAAO,QAAQ,aAAa;;;CAIpD,MAAMC,SAAiB,mBAAG;;yBAEL,MAAM,KAAK,QAAQ,KAAK;mBAC9B,MAAM,KAAK,WAAW,UAAU,GAAG;eACvC,MAAM,KAAK,OAAO,KAAK,UAAU;;;;;;AAY5C,QAAO;EACL,UANuB,mBAAG;eACjB,MAAM,KAAK,OAAO,QAAQ,KAAK;qBACzB,MAAM,KAAK,WAAW,YAAY,OAAO;;EAKxD;EACA;EACA;EACA;EACA;EACD;GACA;CAAC;CAAO;CAAa;CAAU;CAAS,CAAC;AAE9C,4BAAe"}

package/dist/cjs/components/primitives/Select/useSelectMessages.cjs

@@ -0,0 +1,21 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_I18nContext = require('../../../contexts/I18n/I18nContext.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+
+//#region src/components/primitives/Select/useSelectMessages.ts
+/**
+* The wording of `Select`: the active translations when there is an I18n provider, English otherwise, so `Select`
+* works without a provider.
+*/
+const useSelectMessages = () => {
+	const i18n = (0, react.useContext)(require_I18nContext.default);
+	return (0, react.useMemo)(() => (0, __thunderid_browser.getSelectMessages)(i18n ? (key) => i18n.t(key) : void 0), [i18n]);
+};
+var useSelectMessages_default = useSelectMessages;
+
+//#endregion
+exports.default = useSelectMessages_default;
+//# sourceMappingURL=useSelectMessages.cjs.map

package/dist/cjs/components/primitives/Select/useSelectMessages.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectMessages.cjs","names":["i18n: ContextType<typeof I18nContext>","I18nContext"],"sources":["../../../../../src/components/primitives/Select/useSelectMessages.ts"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {getSelectMessages} from '@thunderid/browser';\nimport type {SelectMessages} from '@thunderid/browser';\nimport {ContextType, useContext, useMemo} from 'react';\nimport I18nContext from '../../../contexts/I18n/I18nContext';\n\nexport type {SelectMessages};\n\n/**\n * The wording of `Select`: the active translations when there is an I18n provider, English otherwise, so `Select`\n * works without a provider.\n */\nconst useSelectMessages = (): SelectMessages => {\n  const i18n: ContextType<typeof I18nContext> = useContext(I18nContext);\n\n  return useMemo((): SelectMessages => getSelectMessages(i18n ? (key: string) => i18n.t(key) : undefined), [i18n]);\n};\n\nexport default useSelectMessages;\n"],"mappings":";;;;;;;;;;;;AAcA,MAAM,0BAA0C;CAC9C,MAAMA,6BAAmDC,4BAAY;AAErE,4EAAuD,QAAQ,QAAgB,KAAK,EAAE,IAAI,GAAG,OAAU,EAAE,CAAC,KAAK,CAAC;;AAGlH,gCAAe"}

package/dist/cjs/components/primitives/TextField/TextField.cjs

@@ -6,24 +6,42 @@ const require_InputLabel = require('../InputLabel/InputLabel.cjs');
 const require_TextField_styles = require('./TextField.styles.cjs');
 let __thunderid_browser = require("@thunderid/browser");
 __thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/components/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 } = require_useTheme.default();
+	const generatedId = (0, react.useId)();
+	const inputId = rest.id ?? generatedId;
+	const helperTextId = error || helperText ? `${inputId}-helper-text` : void 0;
+	const describedBy = [rest["aria-describedby"], helperTextId].filter(Boolean).join(" ") || void 0;
 	const hasError = !!error;
-	const styles = require_TextField_styles.default(theme, colorScheme, disabled ?? false, hasError, !!startIcon, !!endIcon);
+	const styles = require_TextField_styles.default(theme, colorScheme, disabled ?? false, hasError, !!startIcon, !!endIcon, !!endAdornment);
 	const inputClassName = require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("text-field", "input")), styles["input"], hasError && styles["inputError"], disabled && styles["inputDisabled"]);
 	const containerClassName = require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("text-field", "container")), styles["inputContainer"]);
 	const startIconClassName = require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("text-field", "start-icon")), styles["startIcon"]);
 	const endIconClassName = require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("text-field", "end-icon")), styles["endIcon"]);
+	const endAdornmentClassName = require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("text-field", "end-adornment")), styles["endAdornment"]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_FormControl.default, {
 		error,
 		helperText,
+		helperTextId,
 		className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("text-field")), className),
 		style,
 		children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InputLabel.default, {
+			htmlFor: inputId,
 			required,
 			error: hasError,
 			children: label
@@ -35,6 +53,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
 				}),
@@ -44,15 +63,22 @@ const TextField = ({ label, error, required, className, disabled, helperText, st
 					disabled,
 					"aria-invalid": hasError,
 					"aria-required": required,
-					...rest
+					...rest,
+					id: inputId,
+					"aria-describedby": describedBy
 				}),
 				endIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: endIconClassName,
 					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__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: endAdornmentClassName,
+					children: endAdornment
 				})
 			]
 		})]

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

@@ -1 +1 @@
-{"version":3,"file":"TextField.cjs","names":["TextField: FC<TextFieldProps>","useTheme","styles: Record<string, string>","useStyles","inputClassName: string","cx","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,0BAAU;CACpE,MAAM,WAAW,CAAC,CAAC;CAGnB,MAAMC,SAAiCC,iCACrC,OACA,aACA,YAAY,OACZ,UANmB,CAAC,CAAC,WACJ,CAAC,CAAC,QAQpB;CAED,MAAMC,iBAAyBC,kGACA,cAAc,QAAQ,CAAC,EACpD,OAAO,UACP,YAAY,OAAO,eACnB,YAAY,OAAO,iBACpB;CAED,MAAMC,qBAA6BD,kGACJ,cAAc,YAAY,CAAC,EACxD,OAAO,kBACR;CAED,MAAME,qBAA6BF,kGAAgC,cAAc,aAAa,CAAC,EAAE,OAAO,aAAa;CAErH,MAAMG,mBAA2BH,kGAAgC,cAAc,WAAW,CAAC,EAAE,OAAO,WAAW;AAE/G,QACE,4CAACI;EACQ;EACK;EACZ,WAAWJ,kGAAgC,aAAa,CAAC,EAAE,UAAU;EAC9D;aAEN,SACC,2CAACK;GAAqB;GAAU,OAAO;aACpC;IACU,EAEf,4CAAC;GAAI,WAAW;;IACb,aACC,2CAAC;KACC,WAAW;KACX,SAAS;KACT,MAAM,mBAAmB,WAAW;KACpC,UAAU,oBAAoB,CAAC,WAAW,IAAI;KAC9C,cAAW;eAEV;MACG;IAER,2CAAC;KACC,WAAW;KACL;KACI;KACV,gBAAc;KACd,iBAAe;KACf,GAAI;MACJ;IACD,WACC,2CAAC;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.cjs","names":["TextField: FC<TextFieldProps>","useTheme","generatedId: string","inputId: string","helperTextId: string | undefined","describedBy: string | undefined","styles: Record<string, string>","useStyles","inputClassName: string","cx","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, useId} 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 generatedId: string = useId();\n  const inputId: string = rest.id ?? generatedId;\n  const helperTextId: string | undefined = error || helperText ? `${inputId}-helper-text` : undefined;\n  const describedBy: string | undefined =\n    [rest['aria-describedby'], helperTextId].filter(Boolean).join(' ') || undefined;\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      helperTextId={helperTextId}\n      className={cx(withVendorCSSClassPrefix(bem('text-field')), className)}\n      style={style}\n    >\n      {label && (\n        <InputLabel htmlFor={inputId} 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          id={inputId}\n          aria-describedby={describedBy}\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,0BAAU;CACpE,MAAMC,gCAA6B;CACnC,MAAMC,UAAkB,KAAK,MAAM;CACnC,MAAMC,eAAmC,SAAS,aAAa,GAAG,QAAQ,gBAAgB;CAC1F,MAAMC,cACJ,CAAC,KAAK,qBAAqB,aAAa,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,IAAI;CACxE,MAAM,WAAW,CAAC,CAAC;CAInB,MAAMC,SAAiCC,iCACrC,OACA,aACA,YAAY,OACZ,UAPmB,CAAC,CAAC,WACJ,CAAC,CAAC,SACG,CAAC,CAAC,aASzB;CAED,MAAMC,iBAAyBC,kGACA,cAAc,QAAQ,CAAC,EACpD,OAAO,UACP,YAAY,OAAO,eACnB,YAAY,OAAO,iBACpB;CAED,MAAMC,qBAA6BD,kGACJ,cAAc,YAAY,CAAC,EACxD,OAAO,kBACR;CAED,MAAME,qBAA6BF,kGAAgC,cAAc,aAAa,CAAC,EAAE,OAAO,aAAa;CAErH,MAAMG,mBAA2BH,kGAAgC,cAAc,WAAW,CAAC,EAAE,OAAO,WAAW;CAE/G,MAAMI,wBAAgCJ,kGACP,cAAc,gBAAgB,CAAC,EAC5D,OAAO,gBACR;AAED,QACE,4CAACK;EACQ;EACK;EACE;EACd,WAAWL,kGAAgC,aAAa,CAAC,EAAE,UAAU;EAC9D;aAEN,SACC,2CAACM;GAAW,SAAS;GAAmB;GAAU,OAAO;aACtD;IACU,EAEf,4CAAC;GAAI,WAAW;;IACb,aACC,2CAAC;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,2CAAC;KACC,WAAW;KACL;KACI;KACV,gBAAc;KACd,iBAAe;KACf,GAAI;KACJ,IAAI;KACJ,oBAAkB;MAClB;IACD,WACC,2CAAC;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,2CAAC;KAAI,WAAW;eAAwB;MAAmB;;IACxE;GACM;;AAIlB,wBAAe"}

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

@@ -12,11 +12,14 @@ react = require_rolldown_runtime.__toESM(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) => (0, react.useMemo)(() => {
+const useStyles = (theme, colorScheme, disabled, hasError, hasStartIcon, hasEndIcon, hasEndAdornment = false) => (0, react.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 = require_emotion.css`
       position: relative;
       display: flex;
@@ -104,11 +107,20 @@ const useStyles = (theme, colorScheme, disabled, hasError, hasStartIcon, hasEndI
       ${icon};
       inset-inline-start: ${theme.vars.spacing.unit};
     `;
-	return {
-		endIcon: require_emotion.css`
+	const endIcon = require_emotion.css`
       ${icon};
+      inset-inline-end: calc(${theme.vars.spacing.unit} * ${hasEndAdornment ? 4.5 : 1});
+    `;
+	return {
+		endAdornment: require_emotion.css`
+      position: absolute;
+      display: flex;
+      align-items: center;
+      top: 50%;
+      transform: translateY(-50%);
       inset-inline-end: ${theme.vars.spacing.unit};
     `,
+		endIcon,
 		icon,
 		input,
 		inputContainer,
@@ -122,7 +134,8 @@ const useStyles = (theme, colorScheme, disabled, hasError, hasStartIcon, hasEndI
 	disabled,
 	hasError,
 	hasStartIcon,
-	hasEndIcon
+	hasEndIcon,
+	hasEndAdornment
 ]);
 var TextField_styles_default = useStyles;
 

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

@@ -1 +1 @@
-{"version":3,"file":"TextField.styles.cjs","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,wCAEc;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,mBAAG;;;;;CAMlC,MAAMC,QAAgB,mBAAG;;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,mBAAG;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,mBAAG;0BACX,MAAM,KAAK,OAAO,WAAW,SAAS;;;;CAK5D,MAAMC,OAAe,mBAAG;;;;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,mBAAG;QACzB,KAAK;4BACe,MAAM,KAAK,QAAQ,KAAK;;AAQhD,QAAO;EACL,SANsB,mBAAG;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.cjs","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,mCAEJ;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,mBAAG;;;;;CAMlC,MAAMC,QAAgB,mBAAG;;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,mBAAG;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,mBAAG;0BACX,MAAM,KAAK,OAAO,WAAW,SAAS;;;;CAK5D,MAAMC,OAAe,mBAAG;;;;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,mBAAG;QACzB,KAAK;4BACe,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,UAAkB,mBAAG;QACvB,KAAK;+BACkB,MAAM,KAAK,QAAQ,KAAK,KAAK,kBAAkB,MAAM,EAAE;;AAYlF,QAAO;EACL,cAV2B,mBAAG;;;;;;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/cjs/components/primitives/Toggle/Toggle.cjs

@@ -6,6 +6,8 @@ const require_FormControl = require('../FormControl/FormControl.cjs');
 const require_InputLabel = require('../InputLabel/InputLabel.cjs');
 let __thunderid_browser = require("@thunderid/browser");
 __thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
@@ -23,10 +25,15 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 const Toggle = ({ label, error, className, required, helperText, style = {},...rest }) => {
 	const { theme, colorScheme } = require_useTheme.default();
 	const hasError = !!error;
+	const generatedId = (0, react.useId)();
+	const inputId = rest.id ?? generatedId;
+	const helperTextId = error || helperText ? `${inputId}-helper-text` : void 0;
+	const describedBy = [rest["aria-describedby"], helperTextId].filter(Boolean).join(" ") || void 0;
 	const styles = require_Toggle_styles.default(theme, colorScheme, hasError, !!required);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FormControl.default, {
 		error,
 		helperText,
+		helperTextId,
 		className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("toggle")), className),
 		helperTextMarginLeft: `calc(${theme.vars.spacing.unit} * 5.5)`,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
@@ -39,7 +46,9 @@ const Toggle = ({ label, error, className, required, helperText, style = {},...r
 					className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("toggle", "input")), styles["input"]),
 					"aria-invalid": hasError,
 					"aria-required": required,
-					...rest
+					...rest,
+					id: inputId,
+					"aria-describedby": describedBy
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("toggle", "track")), styles["track"]),

package/dist/cjs/components/primitives/Toggle/Toggle.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.cjs","names":["Toggle: FC<ToggleProps>","useTheme","styles: Record<string, string>","useStyles","FormControl","cx","InputLabel"],"sources":["../../../../../src/components/primitives/Toggle/Toggle.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {FC, InputHTMLAttributes} from 'react';\nimport useStyles from './Toggle.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\n\n/**\n * Props for the Toggle component.\n */\nexport interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'type'> {\n  className?: string;\n  error?: string;\n  helperText?: string;\n  label?: string;\n  required?: boolean;\n}\n\n/**\n * A Toggle component that represents a boolean input. It is built on top of a hidden checkbox input\n * and styled to look like a switch.\n *\n * The component is wrapped in a FormControl to display error messages and helper text.\n * The label is associated with the input for accessibility.\n *\n * @param props - Props for the Toggle component\n * @returns A JSX element representing the Toggle\n */\nconst Toggle: FC<ToggleProps> = ({label, error, className, required, helperText, style = {}, ...rest}: ToggleProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const hasError = !!error;\n  const styles: Record<string, string> = useStyles(theme, colorScheme, hasError, !!required);\n\n  return (\n    <FormControl\n      error={error}\n      helperText={helperText}\n      className={cx(withVendorCSSClassPrefix(bem('toggle')), className)}\n      helperTextMarginLeft={`calc(${theme.vars.spacing.unit} * 5.5)`}\n    >\n      <label style={style} className={cx(withVendorCSSClassPrefix(bem('toggle', 'container')), styles['container'])}>\n        <input\n          type=\"checkbox\"\n          role=\"switch\"\n          className={cx(withVendorCSSClassPrefix(bem('toggle', 'input')), styles['input'])}\n          aria-invalid={hasError}\n          aria-required={required}\n          {...rest}\n        />\n        <div className={cx(withVendorCSSClassPrefix(bem('toggle', 'track')), styles['track'])}>\n          <span className={cx(withVendorCSSClassPrefix(bem('toggle', 'thumb')), styles['thumb'])} />\n        </div>\n        {label && (\n          <InputLabel\n            required={required}\n            error={hasError}\n            variant=\"inline\"\n            className={cx(withVendorCSSClassPrefix(bem('toggle', 'label')), styles['label'], styles['errorLabel'], {\n              [withVendorCSSClassPrefix(bem('toggle', 'label', 'error'))]: hasError,\n            })}\n          >\n            {label}\n          </InputLabel>\n        )}\n      </label>\n    </FormControl>\n  );\n};\n\nexport default Toggle;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAgCA,MAAMA,UAA2B,EAAC,OAAO,OAAO,WAAW,UAAU,YAAY,QAAQ,EAAE,CAAE,GAAG,WAAuB;CACrH,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAM,WAAW,CAAC,CAAC;CACnB,MAAMC,SAAiCC,8BAAU,OAAO,aAAa,UAAU,CAAC,CAAC,SAAS;AAE1F,QACE,2CAACC;EACQ;EACK;EACZ,WAAWC,kGAAgC,SAAS,CAAC,EAAE,UAAU;EACjE,sBAAsB,QAAQ,MAAM,KAAK,QAAQ,KAAK;YAEtD,4CAAC;GAAa;GAAO,WAAWA,kGAAgC,UAAU,YAAY,CAAC,EAAE,OAAO,aAAa;;IAC3G,2CAAC;KACC,MAAK;KACL,MAAK;KACL,WAAWA,kGAAgC,UAAU,QAAQ,CAAC,EAAE,OAAO,SAAS;KAChF,gBAAc;KACd,iBAAe;KACf,GAAI;MACJ;IACF,2CAAC;KAAI,WAAWA,kGAAgC,UAAU,QAAQ,CAAC,EAAE,OAAO,SAAS;eACnF,2CAAC,UAAK,WAAWA,kGAAgC,UAAU,QAAQ,CAAC,EAAE,OAAO,SAAS,GAAI;MACtF;IACL,SACC,2CAACC;KACW;KACV,OAAO;KACP,SAAQ;KACR,WAAWD,kGAAgC,UAAU,QAAQ,CAAC,EAAE,OAAO,UAAU,OAAO,eAAe,kFACvE,UAAU,SAAS,QAAQ,CAAC,GAAG,UAC9D,CAAC;eAED;MACU;;IAET;GACI;;AAIlB,qBAAe"}
+{"version":3,"file":"Toggle.cjs","names":["Toggle: FC<ToggleProps>","useTheme","generatedId: string","inputId: string","helperTextId: string | undefined","describedBy: string | undefined","styles: Record<string, string>","useStyles","FormControl","cx","InputLabel"],"sources":["../../../../../src/components/primitives/Toggle/Toggle.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {FC, InputHTMLAttributes, useId} from 'react';\nimport useStyles from './Toggle.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\n\n/**\n * Props for the Toggle component.\n */\nexport interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'type'> {\n  className?: string;\n  error?: string;\n  helperText?: string;\n  label?: string;\n  required?: boolean;\n}\n\n/**\n * A Toggle component that represents a boolean input. It is built on top of a hidden checkbox input\n * and styled to look like a switch.\n *\n * The component is wrapped in a FormControl to display error messages and helper text.\n * The label is associated with the input for accessibility.\n *\n * @param props - Props for the Toggle component\n * @returns A JSX element representing the Toggle\n */\nconst Toggle: FC<ToggleProps> = ({label, error, className, required, helperText, style = {}, ...rest}: ToggleProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const hasError = !!error;\n  const generatedId: string = useId();\n  const inputId: string = rest.id ?? generatedId;\n  const helperTextId: string | undefined = error || helperText ? `${inputId}-helper-text` : undefined;\n  const describedBy: string | undefined =\n    [rest['aria-describedby'], helperTextId].filter(Boolean).join(' ') || undefined;\n  const styles: Record<string, string> = useStyles(theme, colorScheme, hasError, !!required);\n\n  return (\n    <FormControl\n      error={error}\n      helperText={helperText}\n      helperTextId={helperTextId}\n      className={cx(withVendorCSSClassPrefix(bem('toggle')), className)}\n      helperTextMarginLeft={`calc(${theme.vars.spacing.unit} * 5.5)`}\n    >\n      <label style={style} className={cx(withVendorCSSClassPrefix(bem('toggle', 'container')), styles['container'])}>\n        <input\n          type=\"checkbox\"\n          role=\"switch\"\n          className={cx(withVendorCSSClassPrefix(bem('toggle', 'input')), styles['input'])}\n          aria-invalid={hasError}\n          aria-required={required}\n          {...rest}\n          id={inputId}\n          aria-describedby={describedBy}\n        />\n        <div className={cx(withVendorCSSClassPrefix(bem('toggle', 'track')), styles['track'])}>\n          <span className={cx(withVendorCSSClassPrefix(bem('toggle', 'thumb')), styles['thumb'])} />\n        </div>\n        {label && (\n          <InputLabel\n            required={required}\n            error={hasError}\n            variant=\"inline\"\n            className={cx(withVendorCSSClassPrefix(bem('toggle', 'label')), styles['label'], styles['errorLabel'], {\n              [withVendorCSSClassPrefix(bem('toggle', 'label', 'error'))]: hasError,\n            })}\n          >\n            {label}\n          </InputLabel>\n        )}\n      </label>\n    </FormControl>\n  );\n};\n\nexport default Toggle;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgCA,MAAMA,UAA2B,EAAC,OAAO,OAAO,WAAW,UAAU,YAAY,QAAQ,EAAE,CAAE,GAAG,WAAuB;CACrH,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAM,WAAW,CAAC,CAAC;CACnB,MAAMC,gCAA6B;CACnC,MAAMC,UAAkB,KAAK,MAAM;CACnC,MAAMC,eAAmC,SAAS,aAAa,GAAG,QAAQ,gBAAgB;CAC1F,MAAMC,cACJ,CAAC,KAAK,qBAAqB,aAAa,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,IAAI;CACxE,MAAMC,SAAiCC,8BAAU,OAAO,aAAa,UAAU,CAAC,CAAC,SAAS;AAE1F,QACE,2CAACC;EACQ;EACK;EACE;EACd,WAAWC,kGAAgC,SAAS,CAAC,EAAE,UAAU;EACjE,sBAAsB,QAAQ,MAAM,KAAK,QAAQ,KAAK;YAEtD,4CAAC;GAAa;GAAO,WAAWA,kGAAgC,UAAU,YAAY,CAAC,EAAE,OAAO,aAAa;;IAC3G,2CAAC;KACC,MAAK;KACL,MAAK;KACL,WAAWA,kGAAgC,UAAU,QAAQ,CAAC,EAAE,OAAO,SAAS;KAChF,gBAAc;KACd,iBAAe;KACf,GAAI;KACJ,IAAI;KACJ,oBAAkB;MAClB;IACF,2CAAC;KAAI,WAAWA,kGAAgC,UAAU,QAAQ,CAAC,EAAE,OAAO,SAAS;eACnF,2CAAC,UAAK,WAAWA,kGAAgC,UAAU,QAAQ,CAAC,EAAE,OAAO,SAAS,GAAI;MACtF;IACL,SACC,2CAACC;KACW;KACV,OAAO;KACP,SAAQ;KACR,WAAWD,kGAAgC,UAAU,QAAQ,CAAC,EAAE,OAAO,UAAU,OAAO,eAAe,kFACvE,UAAU,SAAS,QAAQ,CAAC,GAAG,UAC9D,CAAC;eAED;MACU;;IAET;GACI;;AAIlB,qBAAe"}

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

@@ -0,0 +1,33 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_ResourceSelect = require('../Select/ResourceSelect.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/components/primitives/UserSelect/BaseUserSelect.tsx
+const USER_DEFAULTS = { labelAttributes: __thunderid_browser.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__ */ (0, react_jsx_runtime.jsx)(require_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: __thunderid_browser.EmbeddedFlowComponentType.UserSelect
+});
+var BaseUserSelect_default = BaseUserSelect;
+
+//#endregion
+exports.default = BaseUserSelect_default;
+//# sourceMappingURL=BaseUserSelect.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseUserSelect.cjs","names":["USER_DEFAULTS: SelectOptionDefaults","UserSelectConstants","BaseUserSelect: FC<BaseUserSelectProps>","ResourceSelect","EmbeddedFlowComponentType"],"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,iBAAiBC,wCAAoB,kBAAiB;;;;;;AAOnG,MAAMC,kBAA2C,EAAC,YAAY,QAAS,GAAG,WACxE,2CAACC;CACC,GAAI;CACJ,UAAS;CACT,UAAU;CACV,kBAAkB;EAAC,WAAW;EAAiB,OAAO;EAAkB;CACxE,WAAW;CACF;CACT,YAAW;CACX,UAAS;CACT,MAAMC,8CAA0B;EAChC;AAGJ,6BAAe"}

package/dist/cjs/components/primitives/UserSelect/UserSelect.cjs

@@ -0,0 +1,21 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_useFetchUsers = require('../../../hooks/useFetchUsers.cjs');
+const require_BaseUserSelect = require('./BaseUserSelect.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(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__ */ (0, react_jsx_runtime.jsx)(require_BaseUserSelect.default, {
+	...props,
+	fetchUsers: require_useFetchUsers.default()
+});
+var UserSelect_default = UserSelect;
+
+//#endregion
+exports.default = UserSelect_default;
+//# sourceMappingURL=UserSelect.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UserSelect.cjs","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,2CAACC;CAAe,GAAI;CAAO,YAAYC,+BAAe;EAAI;AAG5D,yBAAe"}