npm - @thunderid/react - Versions diffs - 1.5.0 → 1.7.0 - Mend

@thunderid/react 1.5.0 → 1.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1334) hide show

package/dist/components/common/LanguageSwitcher/LanguageSwitcher.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"LanguageSwitcher.js","names":["LanguageSwitcher: FC<LanguageSwitcherProps>","useFlowMeta","useTranslation","availableLanguageCodes: string[]","effectiveLanguageCodes: string[]","languages: LanguageOption[]","currentBase: string","displayLanguage: string","exactMatch: LanguageOption | undefined","BaseLanguageSwitcher"],"sources":["../../../../src/components/common/LanguageSwitcher/LanguageSwitcher.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {getBaseLanguage, normalizeLocaleTag, resolveLocaleDisplayName, resolveLocaleEmoji} from '@thunderid/browser';\nimport {FC, ReactElement, ReactNode, useEffect, useMemo} from 'react';\nimport BaseLanguageSwitcher, {LanguageOption, LanguageSwitcherRenderProps} from './BaseLanguageSwitcher';\nimport useFlowMeta from '../../../contexts/FlowMeta/useFlowMeta';\nimport useTranslation from '../../../hooks/useTranslation';\n\nexport type {LanguageOption, LanguageSwitcherRenderProps};\n\nexport interface LanguageSwitcherProps {\n /**\n * Render-props callback for fully custom UI.\n *\n * @example\n * ```tsx\n * <LanguageSwitcher>\n * {({languages, currentLanguage, onLanguageChange, isLoading}) => (\n * <select\n * value={currentLanguage}\n * disabled={isLoading}\n * onChange={e => onLanguageChange(e.target.value)}\n * >\n * {languages.map(l => (\n * <option key={l.code} value={l.code}>{l.emoji} {l.displayName}</option>\n * ))}\n * </select>\n * )}\n * </LanguageSwitcher>\n * ```\n */\n children?: (props: LanguageSwitcherRenderProps) => ReactNode;\n /** Additional CSS class for the root element (default UI only) */\n className?: string;\n}\n\n/**\n * A v2 LanguageSwitcher component that reads available languages from `FlowMetaContext`\n * and switches both the UI language (via `I18nContext`) and the flow metadata translations\n * (by re-fetching `GET /flow/meta` with the new language).\n *\n * Must be rendered inside a `FlowMetaProvider`.\n *\n * @example\n * ```tsx\n * // Default dropdown UI\n * <LanguageSwitcher />\n *\n * // Custom UI with render props\n * <LanguageSwitcher>\n * {({languages, currentLanguage, onLanguageChange}) => (\n * <div>\n * {languages.map(lang => (\n * <button\n * key={lang.code}\n * onClick={() => onLanguageChange(lang.code)}\n * style={{fontWeight: lang.code === currentLanguage ? 'bold' : 'normal'}}\n * >\n * {lang.emoji} {lang.displayName}\n * </button>\n * ))}\n * </div>\n * )}\n * </LanguageSwitcher>\n * ```\n */\nconst LanguageSwitcher: FC<LanguageSwitcherProps> = ({children, className}: LanguageSwitcherProps): ReactElement => {\n const {meta, switchLanguage, isLoading} = useFlowMeta();\n const {currentLanguage} = useTranslation();\n\n const availableLanguageCodes: string[] = meta?.i18n?.languages ?? [];\n // Only fall back to the detected browser language when the server returns no configured languages.\n // Do NOT inject currentLanguage unconditionally — a browser locale like \"en-GB\" must not appear\n // in the picker when the server only supports \"en-US\".\n const effectiveLanguageCodes: string[] = useMemo(\n () => (availableLanguageCodes.length > 0 ? availableLanguageCodes : [currentLanguage]),\n [availableLanguageCodes, currentLanguage],\n );\n\n const languages: LanguageOption[] = useMemo(\n () =>\n effectiveLanguageCodes.map((code: string) => ({\n code,\n // Resolve each label in its own locale so option names stay stable across UI language switches.\n displayName: resolveLocaleDisplayName(code, code) || code,\n emoji: resolveLocaleEmoji(code),\n })),\n [effectiveLanguageCodes],\n );\n\n // If the detected language isn't supported by the server, fall back to English (matched by base\n // language, e.g. browser \"en-US\" against server \"en\"), or the first available language if the\n // server doesn't offer English either.\n useEffect(() => {\n if (availableLanguageCodes.length === 0) {\n return;\n }\n const currentBase: string = getBaseLanguage(currentLanguage);\n const isSupported: boolean = availableLanguageCodes.some(\n (code: string): boolean => getBaseLanguage(code) === currentBase,\n );\n if (isSupported) {\n return;\n }\n const englishCode: string | undefined = availableLanguageCodes.find(\n (code: string): boolean => getBaseLanguage(code) === 'en',\n );\n switchLanguage(englishCode ?? availableLanguageCodes[0]);\n }, [availableLanguageCodes, currentLanguage, switchLanguage]);\n\n // Prefer an exact dialect match (e.g. \"en-IN\" against a supported \"en-IN\") over a base-language\n // one, so a specific regional variant isn't silently collapsed to \"en\" when it's actually offered.\n // Only fall back to a base-language match (e.g. \"en-US\" against a supported \"en\") when the exact\n // dialect isn't available, and to the raw code if neither is.\n const displayLanguage: string = useMemo(() => {\n const exactMatch: LanguageOption | undefined = languages.find(\n (option: LanguageOption): boolean => normalizeLocaleTag(option.code) === normalizeLocaleTag(currentLanguage),\n );\n if (exactMatch) {\n return exactMatch.code;\n }\n const baseMatch: LanguageOption | undefined = languages.find(\n (option: LanguageOption): boolean => getBaseLanguage(option.code) === getBaseLanguage(currentLanguage),\n );\n return baseMatch?.code ?? currentLanguage;\n }, [languages, currentLanguage]);\n\n const handleLanguageChange = (language: string): void => {\n if (language !== currentLanguage) {\n switchLanguage(language);\n }\n };\n\n return (\n <BaseLanguageSwitcher\n currentLanguage={displayLanguage}\n isLoading={isLoading}\n languages={languages}\n onLanguageChange={handleLanguageChange}\n className={className}\n >\n {children}\n </BaseLanguageSwitcher>\n );\n};\n\nexport default LanguageSwitcher;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmEA,MAAMA,oBAA+C,EAAC,UAAU,gBAAoD;CAClH,MAAM,EAAC,MAAM,gBAAgB,cAAaC,qBAAa;CACvD,MAAM,EAAC,oBAAmBC,wBAAgB;CAE1C,MAAMC,yBAAmC,MAAM,MAAM,aAAa,EAAE;CAIpE,MAAMC,yBAAmC,cAChC,uBAAuB,SAAS,IAAI,yBAAyB,CAAC,gBAAgB,EACrF,CAAC,wBAAwB,gBAAgB,CAC1C;CAED,MAAMC,YAA8B,cAEhC,uBAAuB,KAAK,UAAkB;EAC5C;EAEA,aAAa,yBAAyB,MAAM,KAAK,IAAI;EACrD,OAAO,mBAAmB,KAAK;EAChC,EAAE,EACL,CAAC,uBAAuB,CACzB;AAKD,iBAAgB;AACd,MAAI,uBAAuB,WAAW,EACpC;EAEF,MAAMC,cAAsB,gBAAgB,gBAAgB;AAI5D,MAH6B,uBAAuB,MACjD,SAA0B,gBAAgB,KAAK,KAAK,YACtD,CAEC;AAKF,iBAHwC,uBAAuB,MAC5D,SAA0B,gBAAgB,KAAK,KAAK,KACtD,IAC6B,uBAAuB,GAAG;IACvD;EAAC;EAAwB;EAAiB;EAAe,CAAC;CAM7D,MAAMC,kBAA0B,cAAc;EAC5C,MAAMC,aAAyC,UAAU,MACtD,WAAoC,mBAAmB,OAAO,KAAK,KAAK,mBAAmB,gBAAgB,CAC7G;AACD,MAAI,WACF,QAAO,WAAW;AAKpB,SAH8C,UAAU,MACrD,WAAoC,gBAAgB,OAAO,KAAK,KAAK,gBAAgB,gBAAgB,CACvG,EACiB,QAAQ;IACzB,CAAC,WAAW,gBAAgB,CAAC;CAEhC,MAAM,wBAAwB,aAA2B;AACvD,MAAI,aAAa,gBACf,gBAAe,SAAS;;AAI5B,QACE,oBAACC;EACC,iBAAiB;EACN;EACA;EACX,kBAAkB;EACP;EAEV;GACoB;;AAI3B,+BAAe"}

package/dist/components/primitives/AuthFlowSelect/AuthFlowSelect.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import useFetchAuthFlows_default from "../../../hooks/useFetchAuthFlows.js";
+import useFetchAuthFlows_default from "../../../hooks/auth/useFetchAuthFlows.js";
 import BaseAuthFlowSelect_default from "./BaseAuthFlowSelect.js";
 import { jsx } from "react/jsx-runtime";

package/dist/components/primitives/AuthFlowSelect/AuthFlowSelect.js.map CHANGED Viewed

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

package/dist/components/primitives/Button/Button.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { ButtonHTMLAttributes, ReactNode, ForwardRefExoticComponent, RefAttributes } from 'react';
-export type ButtonColor = 'primary' | 'secondary' | 'tertiary' | string;
+export type ButtonColor = 'primary' | 'secondary' | 'tertiary' | 'error' | string;
 export type ButtonVariant = 'solid' | 'outline' | 'text' | 'icon';
 export type ButtonSize = 'small' | 'medium' | 'large';
 export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {

package/dist/components/primitives/Button/Button.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Button/Button.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,oBAAoB,EAAc,SAAS,EAAE,yBAAyB,EAAE,aAAa,EAAM,MAAM,OAAO,CAAC;AAMjH,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;~~AACxE~~,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAClE,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IACzF;;OAEG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC3B;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAYD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,QAAA,MAAM,MAAM,EAAE,yBAAyB,CAAC,WAAW,GAAG,aAAa,CAAC,iBAAiB,CAAC,CAuFrF,CAAC;AAIF,eAAe,MAAM,CAAC"}
1	+ {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Button/Button.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,oBAAoB,EAAc,SAAS,EAAE,yBAAyB,EAAE,aAAa,EAAM,MAAM,OAAO,CAAC;AAMjH,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,CAAC;AAClF,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAClE,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IACzF;;OAEG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC3B;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAYD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,QAAA,MAAM,MAAM,EAAE,yBAAyB,CAAC,WAAW,GAAG,aAAa,CAAC,iBAAiB,CAAC,CAuFrF,CAAC;AAIF,eAAe,MAAM,CAAC"}

package/dist/components/primitives/Button/Button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.js","names":["Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>","useTheme","styles: Record<string, string \| null>","useStyles","isIconVariant: boolean","spinnerWidth: string","Spinner"],"sources":["../../../../src/components/primitives/Button/Button.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {ButtonHTMLAttributes, forwardRef, ReactNode, ForwardRefExoticComponent, RefAttributes, Ref} from 'react';\nimport useStyles from './Button.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport Spinner, {SpinnerSize} from '../Spinner/Spinner';\n\nexport type ButtonColor = 'primary' \| 'secondary' \| 'tertiary' \| string;\nexport type ButtonVariant = 'solid' \| 'outline' \| 'text' \| 'icon';\nexport type ButtonSize = 'small' \| 'medium' \| 'large';\n\nexport interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {\n /*\n The button color that determines the color scheme\n /\n color?: ButtonColor;\n /\n Icon to display after the button text\n /\n endIcon?: ReactNode;\n /\n Whether the button should take the full width of its container\n /\n fullWidth?: boolean;\n /\n Whether the button is in a loading state\n /\n loading?: boolean;\n /\n The shape of the button: square or round\n /\n shape?: 'square' \| 'round';\n /\n The size of the button\n /\n size?: ButtonSize;\n /\n Icon to display before the button text\n /\n startIcon?: ReactNode;\n /\n The button variant that determines the visual style\n /\n variant?: ButtonVariant;\n}\n\nconst getSpinnerWidth = (sizeVal: ButtonSize, spacingUnit: string): string => {\n if (sizeVal === 'small') {\n return `calc(${spacingUnit} 1.5)`;\n }\n if (sizeVal === 'medium') {\n return `calc(${spacingUnit} * 2)`;\n }\n return `calc(${spacingUnit} * 2.5)`;\n};\n\n/*\n Button component with multiple variants and types.\n \n @example\n * ```tsx\n * // Primary solid button\n * <Button color=\"primary\" variant=\"solid\">\n * Click me\n * </Button>\n \n // Secondary outline button\n * <Button color=\"secondary\" variant=\"outline\" size=\"large\">\n * Cancel\n * </Button>\n \n // Text button with loading state\n * <Button color=\"tertiary\" variant=\"text\" loading>\n * Loading...\n * </Button>\n \n // Button with icons\n * <Button\n * color=\"primary\"\n * startIcon={<Icon />}\n * endIcon={<Arrow />}\n * >\n * Save and Continue\n * </Button>\n * ```\n */\nconst Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>> = forwardRef<\n HTMLButtonElement,\n ButtonProps\n>(\n (\n {\n color = 'primary',\n variant = 'solid',\n size = 'medium',\n fullWidth = false,\n loading = false,\n startIcon,\n endIcon,\n children,\n className,\n disabled,\n style,\n shape = 'square',\n ...rest\n }: ButtonProps,\n ref: Ref<HTMLButtonElement>,\n ) => {\n const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n const styles: Record<string, string \| null> = useStyles(\n theme,\n colorScheme,\n color,\n variant,\n size,\n fullWidth,\n disabled \|\| false,\n loading,\n shape,\n );\n\n const isIconVariant: boolean = variant === 'icon';\n\n const spinnerWidth: string = getSpinnerWidth(size, theme.vars.spacing.unit);\n\n return (\n <button\n ref={ref}\n style={style}\n className={cx(\n withVendorCSSClassPrefix(bem('button')),\n withVendorCSSClassPrefix(bem('button', variant)),\n withVendorCSSClassPrefix(bem('button', color)),\n withVendorCSSClassPrefix(bem('button', size)),\n withVendorCSSClassPrefix(bem('button', shape)),\n fullWidth ? withVendorCSSClassPrefix(bem('button', 'fullWidth')) : undefined,\n loading ? withVendorCSSClassPrefix(bem('button', 'loading')) : undefined,\n disabled \|\| loading ? withVendorCSSClassPrefix(bem('button', 'disabled')) : undefined,\n styles['button'],\n styles['size'],\n styles['variant'],\n styles['fullWidth'],\n styles['loading'],\n styles['shape'],\n className,\n )}\n disabled={disabled \|\| loading}\n {...rest}\n >\n {loading && (\n <span className={cx(withVendorCSSClassPrefix(bem('button', 'spinner')), styles['spinner'])}>\n <Spinner size={size as SpinnerSize} color=\"currentColor\" widthOverride={spinnerWidth} />\n </span>\n )}\n {!loading && isIconVariant && (\n <span className={cx(withVendorCSSClassPrefix(bem('button', 'icon')), styles['icon'])}>\n {children \|\| startIcon \|\| endIcon}\n </span>\n )}\n {!loading && !isIconVariant && startIcon && (\n <span className={cx(withVendorCSSClassPrefix(bem('button', 'start-icon')), styles['startIcon'])}>\n {startIcon}\n </span>\n )}\n {!isIconVariant && children && (\n <span className={cx(withVendorCSSClassPrefix(bem('button', 'content')), styles['content'])}>{children}</span>\n )}\n {!loading && !isIconVariant && endIcon && (\n <span className={cx(withVendorCSSClassPrefix(bem('button', 'end-icon')), styles['endIcon'])}>{endIcon}</span>\n )}\n </button>\n );\n },\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"mappings":";;;;;;;;;AAiDA,MAAM,mBAAmB,SAAqB,gBAAgC;AAC5E,KAAI,YAAY,QACd,QAAO,QAAQ,YAAY;AAE7B,KAAI,YAAY,SACd,QAAO,QAAQ,YAAY;AAE7B,QAAO,QAAQ,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiC7B,MAAMA,SAAoF,YAKtF,EACE,QAAQ,WACR,UAAU,SACV,OAAO,UACP,YAAY,OACZ,UAAU,OACV,WACA,SACA,UACA,WACA,UACA,OACA,QAAQ,SACR,GAAG,QAEL,QACG;CACH,MAAM,EAAC,OAAO,gBAA4CC,kBAAU;CACpE,MAAMC,SAAwCC,sBAC5C,OACA,aACA,OACA,SACA,MACA,WACA,YAAY,OACZ,SACA,MACD;CAED,MAAMC,gBAAyB,YAAY;CAE3C,MAAMC,eAAuB,gBAAgB,MAAM,MAAM,KAAK,QAAQ,KAAK;AAE3E,QACE,qBAAC;EACM;EACE;EACP,WAAW,GACT,yBAAyB,IAAI,SAAS,CAAC,EACvC,yBAAyB,IAAI,UAAU,QAAQ,CAAC,EAChD,yBAAyB,IAAI,UAAU,MAAM,CAAC,EAC9C,yBAAyB,IAAI,UAAU,KAAK,CAAC,EAC7C,yBAAyB,IAAI,UAAU,MAAM,CAAC,EAC9C,YAAY,yBAAyB,IAAI,UAAU,YAAY,CAAC,GAAG,QACnE,UAAU,yBAAyB,IAAI,UAAU,UAAU,CAAC,GAAG,QAC/D,YAAY,UAAU,yBAAyB,IAAI,UAAU,WAAW,CAAC,GAAG,QAC5E,OAAO,WACP,OAAO,SACP,OAAO,YACP,OAAO,cACP,OAAO,YACP,OAAO,UACP,UACD;EACD,UAAU,YAAY;EACtB,GAAI;;GAEH,WACC,oBAAC;IAAK,WAAW,GAAG,yBAAyB,IAAI,UAAU,UAAU,CAAC,EAAE,OAAO,WAAW;cACxF,oBAACC;KAAc;KAAqB,OAAM;KAAe,eAAe;MAAgB;KACnF;GAER,CAAC,WAAW,iBACX,oBAAC;IAAK,WAAW,GAAG,yBAAyB,IAAI,UAAU,OAAO,CAAC,EAAE,OAAO,QAAQ;cACjF,YAAY,aAAa;KACrB;GAER,CAAC,WAAW,CAAC,iBAAiB,aAC7B,oBAAC;IAAK,WAAW,GAAG,yBAAyB,IAAI,UAAU,aAAa,CAAC,EAAE,OAAO,aAAa;cAC5F;KACI;GAER,CAAC,iBAAiB,YACjB,oBAAC;IAAK,WAAW,GAAG,yBAAyB,IAAI,UAAU,UAAU,CAAC,EAAE,OAAO,WAAW;IAAG;KAAgB;GAE9G,CAAC,WAAW,CAAC,iBAAiB,WAC7B,oBAAC;IAAK,WAAW,GAAG,yBAAyB,IAAI,UAAU,WAAW,CAAC,EAAE,OAAO,WAAW;cAAG;KAAe;;GAExG;EAGd;AAED,OAAO,cAAc;AAErB,qBAAe"}
1	+ {"version":3,"file":"Button.js","names":["Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>","useTheme","styles: Record<string, string \| null>","useStyles","isIconVariant: boolean","spinnerWidth: string","Spinner"],"sources":["../../../../src/components/primitives/Button/Button.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {ButtonHTMLAttributes, forwardRef, ReactNode, ForwardRefExoticComponent, RefAttributes, Ref} from 'react';\nimport useStyles from './Button.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport Spinner, {SpinnerSize} from '../Spinner/Spinner';\n\nexport type ButtonColor = 'primary' \| 'secondary' \| 'tertiary' \| 'error' \| string;\nexport type ButtonVariant = 'solid' \| 'outline' \| 'text' \| 'icon';\nexport type ButtonSize = 'small' \| 'medium' \| 'large';\n\nexport interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {\n /*\n The button color that determines the color scheme\n /\n color?: ButtonColor;\n /\n Icon to display after the button text\n /\n endIcon?: ReactNode;\n /\n Whether the button should take the full width of its container\n /\n fullWidth?: boolean;\n /\n Whether the button is in a loading state\n /\n loading?: boolean;\n /\n The shape of the button: square or round\n /\n shape?: 'square' \| 'round';\n /\n The size of the button\n /\n size?: ButtonSize;\n /\n Icon to display before the button text\n /\n startIcon?: ReactNode;\n /\n The button variant that determines the visual style\n /\n variant?: ButtonVariant;\n}\n\nconst getSpinnerWidth = (sizeVal: ButtonSize, spacingUnit: string): string => {\n if (sizeVal === 'small') {\n return `calc(${spacingUnit} 1.5)`;\n }\n if (sizeVal === 'medium') {\n return `calc(${spacingUnit} * 2)`;\n }\n return `calc(${spacingUnit} * 2.5)`;\n};\n\n/*\n Button component with multiple variants and types.\n \n @example\n * ```tsx\n * // Primary solid button\n * <Button color=\"primary\" variant=\"solid\">\n * Click me\n * </Button>\n \n // Secondary outline button\n * <Button color=\"secondary\" variant=\"outline\" size=\"large\">\n * Cancel\n * </Button>\n \n // Text button with loading state\n * <Button color=\"tertiary\" variant=\"text\" loading>\n * Loading...\n * </Button>\n \n // Button with icons\n * <Button\n * color=\"primary\"\n * startIcon={<Icon />}\n * endIcon={<Arrow />}\n * >\n * Save and Continue\n * </Button>\n * ```\n */\nconst Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>> = forwardRef<\n HTMLButtonElement,\n ButtonProps\n>(\n (\n {\n color = 'primary',\n variant = 'solid',\n size = 'medium',\n fullWidth = false,\n loading = false,\n startIcon,\n endIcon,\n children,\n className,\n disabled,\n style,\n shape = 'square',\n ...rest\n }: ButtonProps,\n ref: Ref<HTMLButtonElement>,\n ) => {\n const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n const styles: Record<string, string \| null> = useStyles(\n theme,\n colorScheme,\n color,\n variant,\n size,\n fullWidth,\n disabled \|\| false,\n loading,\n shape,\n );\n\n const isIconVariant: boolean = variant === 'icon';\n\n const spinnerWidth: string = getSpinnerWidth(size, theme.vars.spacing.unit);\n\n return (\n <button\n ref={ref}\n style={style}\n className={cx(\n withVendorCSSClassPrefix(bem('button')),\n withVendorCSSClassPrefix(bem('button', variant)),\n withVendorCSSClassPrefix(bem('button', color)),\n withVendorCSSClassPrefix(bem('button', size)),\n withVendorCSSClassPrefix(bem('button', shape)),\n fullWidth ? withVendorCSSClassPrefix(bem('button', 'fullWidth')) : undefined,\n loading ? withVendorCSSClassPrefix(bem('button', 'loading')) : undefined,\n disabled \|\| loading ? withVendorCSSClassPrefix(bem('button', 'disabled')) : undefined,\n styles['button'],\n styles['size'],\n styles['variant'],\n styles['fullWidth'],\n styles['loading'],\n styles['shape'],\n className,\n )}\n disabled={disabled \|\| loading}\n {...rest}\n >\n {loading && (\n <span className={cx(withVendorCSSClassPrefix(bem('button', 'spinner')), styles['spinner'])}>\n <Spinner size={size as SpinnerSize} color=\"currentColor\" widthOverride={spinnerWidth} />\n </span>\n )}\n {!loading && isIconVariant && (\n <span className={cx(withVendorCSSClassPrefix(bem('button', 'icon')), styles['icon'])}>\n {children \|\| startIcon \|\| endIcon}\n </span>\n )}\n {!loading && !isIconVariant && startIcon && (\n <span className={cx(withVendorCSSClassPrefix(bem('button', 'start-icon')), styles['startIcon'])}>\n {startIcon}\n </span>\n )}\n {!isIconVariant && children && (\n <span className={cx(withVendorCSSClassPrefix(bem('button', 'content')), styles['content'])}>{children}</span>\n )}\n {!loading && !isIconVariant && endIcon && (\n <span className={cx(withVendorCSSClassPrefix(bem('button', 'end-icon')), styles['endIcon'])}>{endIcon}</span>\n )}\n </button>\n );\n },\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"mappings":";;;;;;;;;AAiDA,MAAM,mBAAmB,SAAqB,gBAAgC;AAC5E,KAAI,YAAY,QACd,QAAO,QAAQ,YAAY;AAE7B,KAAI,YAAY,SACd,QAAO,QAAQ,YAAY;AAE7B,QAAO,QAAQ,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiC7B,MAAMA,SAAoF,YAKtF,EACE,QAAQ,WACR,UAAU,SACV,OAAO,UACP,YAAY,OACZ,UAAU,OACV,WACA,SACA,UACA,WACA,UACA,OACA,QAAQ,SACR,GAAG,QAEL,QACG;CACH,MAAM,EAAC,OAAO,gBAA4CC,kBAAU;CACpE,MAAMC,SAAwCC,sBAC5C,OACA,aACA,OACA,SACA,MACA,WACA,YAAY,OACZ,SACA,MACD;CAED,MAAMC,gBAAyB,YAAY;CAE3C,MAAMC,eAAuB,gBAAgB,MAAM,MAAM,KAAK,QAAQ,KAAK;AAE3E,QACE,qBAAC;EACM;EACE;EACP,WAAW,GACT,yBAAyB,IAAI,SAAS,CAAC,EACvC,yBAAyB,IAAI,UAAU,QAAQ,CAAC,EAChD,yBAAyB,IAAI,UAAU,MAAM,CAAC,EAC9C,yBAAyB,IAAI,UAAU,KAAK,CAAC,EAC7C,yBAAyB,IAAI,UAAU,MAAM,CAAC,EAC9C,YAAY,yBAAyB,IAAI,UAAU,YAAY,CAAC,GAAG,QACnE,UAAU,yBAAyB,IAAI,UAAU,UAAU,CAAC,GAAG,QAC/D,YAAY,UAAU,yBAAyB,IAAI,UAAU,WAAW,CAAC,GAAG,QAC5E,OAAO,WACP,OAAO,SACP,OAAO,YACP,OAAO,cACP,OAAO,YACP,OAAO,UACP,UACD;EACD,UAAU,YAAY;EACtB,GAAI;;GAEH,WACC,oBAAC;IAAK,WAAW,GAAG,yBAAyB,IAAI,UAAU,UAAU,CAAC,EAAE,OAAO,WAAW;cACxF,oBAACC;KAAc;KAAqB,OAAM;KAAe,eAAe;MAAgB;KACnF;GAER,CAAC,WAAW,iBACX,oBAAC;IAAK,WAAW,GAAG,yBAAyB,IAAI,UAAU,OAAO,CAAC,EAAE,OAAO,QAAQ;cACjF,YAAY,aAAa;KACrB;GAER,CAAC,WAAW,CAAC,iBAAiB,aAC7B,oBAAC;IAAK,WAAW,GAAG,yBAAyB,IAAI,UAAU,aAAa,CAAC,EAAE,OAAO,aAAa;cAC5F;KACI;GAER,CAAC,iBAAiB,YACjB,oBAAC;IAAK,WAAW,GAAG,yBAAyB,IAAI,UAAU,UAAU,CAAC,EAAE,OAAO,WAAW;IAAG;KAAgB;GAE9G,CAAC,WAAW,CAAC,iBAAiB,WAC7B,oBAAC;IAAK,WAAW,GAAG,yBAAyB,IAAI,UAAU,WAAW,CAAC,EAAE,OAAO,WAAW;cAAG;KAAe;;GAExG;EAGd;AAED,OAAO,cAAc;AAErB,qBAAe"}

package/dist/components/primitives/Button/Button.styles.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Theme } from '@thunderid/browser';
-export type ButtonColor = 'primary' | 'secondary' | 'tertiary' | string;
+export type ButtonColor = 'primary' | 'secondary' | 'tertiary' | 'error' | string;
 export type ButtonVariant = 'solid' | 'outline' | 'text' | 'icon';
 export type ButtonSize = 'small' | 'medium' | 'large';
 /**

package/dist/components/primitives/Button/Button.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Button/Button.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAIzC,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;~~AACxE~~,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAClE,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,SAAS,GACb,OAAO,KAAK,EACZ,aAAa,MAAM,EACnB,OAAO,WAAW,EAClB,SAAS,aAAa,EACtB,MAAM,UAAU,EAChB,WAAW,OAAO,EAClB,UAAU,OAAO,EACjB,SAAS,OAAO,EAChB,QAAO,QAAQ,GAAG,OAAkB,KACnC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,~~CAoV~~+C,CAAC;AAE/E,eAAe,SAAS,CAAC"}
1	+ {"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Button/Button.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAIzC,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,CAAC;AAClF,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAClE,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,SAAS,GACb,OAAO,KAAK,EACZ,aAAa,MAAM,EACnB,OAAO,WAAW,EAClB,SAAS,aAAa,EACtB,MAAM,UAAU,EAChB,WAAW,OAAO,EAClB,UAAU,OAAO,EACjB,SAAS,OAAO,EAChB,QAAO,QAAQ,GAAG,OAAkB,KACnC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAgX+C,CAAC;AAE/E,eAAe,SAAS,CAAC"}

package/dist/components/primitives/Button/Button.styles.js CHANGED Viewed

@@ -292,6 +292,34 @@ const useStyles = (theme, colorScheme, color, variant, size, fullWidth, disabled
           color: ${theme.vars.colors.text.primary};
           outline: none;
         }
+      `,
+		"error-outline": css`
+        background-color: transparent;
+        color: ${theme.vars.colors.error.main};
+        border-color: ${theme.vars.colors.error.main};
+        &:hover:not(:disabled),
+        &:focus-visible:not(:disabled) {
+          background-color: ${theme.vars.colors.error.main};
+          color: ${theme.vars.colors.error.contrastText};
+        }
+      `,
+		"error-solid": css`
+        background-color: ${theme.vars.colors.error.main};
+        color: ${theme.vars.colors.error.contrastText};
+        border-color: ${theme.vars.colors.error.main};
+        &:hover:not(:disabled),
+        &:focus-visible:not(:disabled) {
+          opacity: 0.9;
+        }
+      `,
+		"error-text": css`
+        background-color: transparent;
+        color: ${theme.vars.colors.error.main};
+        border-color: transparent;
+        &:hover:not(:disabled),
+        &:focus-visible:not(:disabled) {
+          background-color: ${theme.vars.colors.action.hover};
+        }
       `
 	};
 	const spinnerStyles = css`

package/dist/components/primitives/Button/Button.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.styles.js","names":["iconSizeMap: Record<string, string>","iconDimension: string","baseButton: string","sizeStyles: Record<string, string>","variantStyles: Record<string, string>","spinnerStyles: string","iconStyles: string"],"sources":["../../../../src/components/primitives/Button/Button.styles.ts"],"sourcesContent":["// Copyright 2025 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\nexport type ButtonColor = 'primary' \| 'secondary' \| 'tertiary' \| string;\nexport type ButtonVariant = 'solid' \| 'outline' \| 'text' \| 'icon';\nexport type ButtonSize = 'small' \| 'medium' \| 'large';\n\n/*\n Creates styles for the Button 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 color - The button color\n * @param variant - The button variant\n * @param size - The button size\n * @param fullWidth - Whether the button should take full width\n * @param disabled - Whether the button is disabled\n * @param loading - Whether the button is in loading state\n * @returns Object containing CSS class names for component styling\n /\nconst useStyles = (\n theme: Theme,\n colorScheme: string,\n color: ButtonColor,\n variant: ButtonVariant,\n size: ButtonSize,\n fullWidth: boolean,\n disabled: boolean,\n loading: boolean,\n shape: 'square' \| 'round' = 'square',\n): Record<string, string \| null> =>\n useMemo(() => {\n const iconSizeMap: Record<string, string> = {\n large: `calc(${theme.vars.spacing.unit} 5)`,\n medium: `calc(${theme.vars.spacing.unit} * 4)`,\n small: `calc(${theme.vars.spacing.unit} * 3)`,\n };\n\n const iconDimension: string = iconSizeMap[size] \|\| iconSizeMap['medium'];\n\n const baseButton: string = css`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: calc(${theme.vars.spacing.unit} * 1);\n border-radius: ${shape === 'round'\n ? '50%'\n : theme.vars.components?.Button?.root?.borderRadius \|\| theme.vars.borderRadius.medium};\n font-weight: 500;\n cursor: ${disabled \|\| loading ? 'not-allowed' : 'pointer'};\n outline: none;\n text-decoration: none;\n white-space: nowrap;\n width: ${fullWidth ? '100%' : 'auto'};\n opacity: ${disabled \|\| loading ? 0.6 : 1};\n font-family: ${theme.vars.typography.fontFamily};\n border-width: 1px;\n border-style: solid;\n ${variant === 'icon'\n ? `\n padding: 0;\n min-width: unset;\n min-height: unset;\n width: ${iconDimension};\n height: ${iconDimension};\n justify-content: center;\n align-items: center;\n `\n : ''}\n `;\n\n const sizeStyles: Record<string, string> = {\n large: css`\n ${variant === 'icon'\n ? `font-size: ${theme.vars.typography.fontSizes.lg};`\n : `padding: calc(${theme.vars.spacing.unit} * 1.5) calc(${theme.vars.spacing.unit} * 3);\n font-size: ${theme.vars.typography.fontSizes.lg};\n min-height: calc(${theme.vars.spacing.unit} * 5);`}\n `,\n medium: css`\n ${variant === 'icon'\n ? `font-size: ${theme.vars.typography.fontSizes.md};`\n : `padding: calc(${theme.vars.spacing.unit} * 1) calc(${theme.vars.spacing.unit} * 2);\n font-size: ${theme.vars.typography.fontSizes.md};\n min-height: calc(${theme.vars.spacing.unit} * 4);`}\n `,\n small: css`\n ${variant === 'icon'\n ? `font-size: ${theme.vars.typography.fontSizes.sm};`\n : `padding: calc(${theme.vars.spacing.unit} * 0.5) calc(${theme.vars.spacing.unit} * 1);\n font-size: ${theme.vars.typography.fontSizes.sm};\n min-height: calc(${theme.vars.spacing.unit} * 3);`}\n `,\n };\n\n const variantStyles: Record<string, string> = {\n 'primary-icon': css`\n background-color: transparent;\n color: ${theme.vars.colors.primary.main};\n border-color: transparent;\n &:hover:not(:disabled) {\n border-color: transparent;\n background-color: ${theme.vars.colors.action.hover};\n color: ${theme.vars.colors.primary.dark};\n }\n &:active:not(:disabled) {\n border-color: transparent;\n background-color: ${theme.vars.colors.action.selected};\n color: ${theme.vars.colors.primary.dark};\n }\n &:focus:not(:disabled) {\n border-color: transparent;\n background-color: ${theme.vars.colors.action.focus};\n color: ${theme.vars.colors.primary.dark};\n outline: none;\n }\n `,\n 'primary-outline': css`\n background-color: transparent;\n color: ${theme.vars.colors.primary.main};\n border-color: ${theme.vars.colors.primary.main};\n &:hover:not(:disabled) {\n background-color: ${theme.vars.colors.primary.main};\n color: ${theme.vars.colors.primary.contrastText};\n }\n &:active:not(:disabled) {\n background-color: ${theme.vars.colors.primary.main};\n color: ${theme.vars.colors.primary.contrastText};\n opacity: 0.9;\n }\n &:focus:not(:disabled) {\n background-color: ${theme.vars.colors.primary.main};\n color: ${theme.vars.colors.primary.contrastText};\n opacity: 0.9;\n }\n `,\n 'primary-solid': css`\n background-color: ${theme.vars.colors.primary.main};\n color: ${theme.vars.colors.primary.contrastText};\n border-color: ${theme.vars.colors.primary.main};\n &:hover:not(:disabled) {\n background-color: ${theme.vars.colors.primary.main};\n opacity: 0.9;\n }\n &:active:not(:disabled) {\n background-color: ${theme.vars.colors.primary.main};\n opacity: 0.8;\n }\n &:focus:not(:disabled) {\n background-color: ${theme.vars.colors.primary.main};\n opacity: 0.8;\n }\n `,\n 'primary-text': css`\n background-color: transparent;\n color: ${theme.vars.colors.primary.main};\n border-color: transparent;\n &:hover:not(:disabled) {\n border-color: transparent;\n background-color: ${theme.vars.colors.action.hover};\n }\n &:active:not(:disabled) {\n border-color: transparent;\n background-color: ${theme.vars.colors.action.selected};\n }\n &:focus:not(:disabled) {\n border-color: transparent;\n background-color: ${theme.vars.colors.action.focus};\n outline: none;\n }\n `,\n 'secondary-icon': css`\n background-color: transparent;\n color: ${theme.vars.colors.secondary.main};\n border-color: transparent;\n &:hover:not(:disabled) {\n border-color: transparent;\n background-color: ${theme.vars.colors.action.hover};\n color: ${theme.vars.colors.secondary.dark};\n }\n &:active:not(:disabled) {\n border-color: transparent;\n background-color: ${theme.vars.colors.action.selected};\n color: ${theme.vars.colors.secondary.dark};\n }\n &:focus:not(:disabled) {\n border-color: transparent;\n background-color: ${theme.vars.colors.action.focus};\n color: ${theme.vars.colors.secondary.dark};\n outline: none;\n }\n `,\n 'secondary-outline': css`\n background-color: transparent;\n color: ${theme.vars.colors.secondary.main};\n border-color: ${theme.vars.colors.secondary.main};\n &:hover:not(:disabled) {\n background-color: ${theme.vars.colors.secondary.main};\n color: ${theme.vars.colors.secondary.contrastText};\n }\n &:active:not(:disabled) {\n background-color: ${theme.vars.colors.secondary.main};\n color: ${theme.vars.colors.secondary.contrastText};\n opacity: 0.9;\n }\n &:focus:not(:disabled) {\n background-color: ${theme.vars.colors.secondary.main};\n color: ${theme.vars.colors.secondary.contrastText};\n opacity: 0.9;\n }\n `,\n 'secondary-solid': css`\n background-color: ${theme.vars.colors.secondary.main};\n color: ${theme.vars.colors.secondary.contrastText};\n border-color: ${theme.vars.colors.secondary.main};\n &:hover:not(:disabled) {\n background-color: ${theme.vars.colors.secondary.main};\n opacity: 0.9;\n }\n &:active:not(:disabled) {\n background-color: ${theme.vars.colors.secondary.main};\n opacity: 0.8;\n }\n &:focus:not(:disabled) {\n background-color: ${theme.vars.colors.secondary.main};\n opacity: 0.8;\n }\n `,\n 'secondary-text': css`\n background-color: transparent;\n color: ${theme.vars.colors.secondary.main};\n border-color: transparent;\n &:hover:not(:disabled) {\n border-color: transparent;\n background-color: ${theme.vars.colors.action.hover};\n }\n &:active:not(:disabled) {\n border-color: transparent;\n background-color: ${theme.vars.colors.action.selected};\n }\n &:focus:not(:disabled) {\n border-color: transparent;\n background-color: ${theme.vars.colors.action.focus};\n outline: none;\n }\n `,\n 'tertiary-icon': css`\n background-color: transparent;\n color: ${theme.vars.colors.text.secondary};\n border-color: transparent;\n &:hover:not(:disabled) {\n border-color: transparent;\n background-color: ${theme.vars.colors.action.hover};\n color: ${theme.vars.colors.text.primary};\n }\n &:active:not(:disabled) {\n border-color: transparent;\n background-color: ${theme.vars.colors.action.selected};\n color: ${theme.vars.colors.text.primary};\n }\n &:focus:not(:disabled) {\n border-color: transparent;\n background-color: ${theme.vars.colors.action.focus};\n color: ${theme.vars.colors.text.primary};\n outline: none;\n }\n `,\n 'tertiary-outline': css`\n background-color: transparent;\n color: ${theme.vars.colors.text.secondary};\n border-color: ${theme.vars.colors.border};\n &:hover:not(:disabled) {\n background-color: ${theme.vars.colors.action.hover};\n border-color: ${theme.vars.colors.text.secondary};\n }\n &:active:not(:disabled) {\n background-color: ${theme.vars.colors.action.selected};\n border-color: ${theme.vars.colors.text.primary};\n }\n &:focus:not(:disabled) {\n background-color: ${theme.vars.colors.action.focus};\n border-color: ${theme.vars.colors.text.primary};\n }\n `,\n 'tertiary-solid': css`\n background-color: ${theme.vars.colors.text.secondary};\n color: ${theme.vars.colors.background.surface};\n border-color: ${theme.vars.colors.text.secondary};\n &:hover:not(:disabled) {\n background-color: ${theme.vars.colors.text.primary};\n color: ${theme.vars.colors.background.surface};\n }\n &:active:not(:disabled) {\n background-color: ${theme.vars.colors.text.primary};\n color: ${theme.vars.colors.background.surface};\n opacity: 0.9;\n }\n &:focus:not(:disabled) {\n background-color: ${theme.vars.colors.text.primary};\n color: ${theme.vars.colors.background.surface};\n opacity: 0.9;\n }\n `,\n 'tertiary-text': css`\n background-color: transparent;\n color: ${theme.vars.colors.text.secondary};\n border-color: transparent;\n &:hover:not(:disabled) {\n border-color: transparent;\n background-color: ${theme.vars.colors.action.hover};\n color: ${theme.vars.colors.text.primary};\n }\n &:active:not(:disabled) {\n border-color: transparent;\n background-color: ${theme.vars.colors.action.selected};\n color: ${theme.vars.colors.text.primary};\n }\n &:focus:not(:disabled) {\n border-color: transparent;\n background-color: ${theme.vars.colors.action.focus};\n color: ${theme.vars.colors.text.primary};\n outline: none;\n }\n `,\n };\n\n const spinnerStyles: string = css`\n display: flex;\n align-items: center;\n justify-content: center;\n `;\n\n const iconStyles: string = css`\n display: flex;\n align-items: center;\n justify-content: center;\n `;\n\n const contentStyles: string = css`\n display: flex;\n align-items: center;\n justify-content: center;\n `;\n\n return {\n button: baseButton,\n content: contentStyles,\n endIcon: iconStyles,\n fullWidth: fullWidth\n ? css`\n width: 100%;\n `\n : null,\n icon: iconStyles,\n loading: loading\n ? css`\n pointer-events: none;\n `\n : null,\n shape:\n shape === 'round'\n ? css`\n border-radius: 50%;\n `\n : null,\n size: sizeStyles[size],\n spinner: spinnerStyles,\n startIcon: iconStyles,\n variant: variantStyles[`${color}-${variant}`] \|\| variantStyles['primary-solid'],\n };\n }, [theme, colorScheme, color, variant, size, fullWidth, disabled, loading]);\n\nexport default useStyles;\n"],"mappings":"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"}
1	+ {"version":3,"file":"Button.styles.js","names":["iconSizeMap: Record<string, string>","iconDimension: string","baseButton: string","sizeStyles: Record<string, string>","variantStyles: Record<string, string>","spinnerStyles: string","iconStyles: string"],"sources":["../../../../src/components/primitives/Button/Button.styles.ts"],"sourcesContent":["// Copyright 2025 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\nexport type ButtonColor = 'primary' \| 'secondary' \| 'tertiary' \| 'error' \| string;\nexport type ButtonVariant = 'solid' \| 'outline' \| 'text' \| 'icon';\nexport type ButtonSize = 'small' \| 'medium' \| 'large';\n\n/*\n Creates styles for the Button 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 color - The button color\n * @param variant - The button variant\n * @param size - The button size\n * @param fullWidth - Whether the button should take full width\n * @param disabled - Whether the button is disabled\n * @param loading - Whether the button is in loading state\n * @returns Object containing CSS class names for component styling\n /\nconst useStyles = (\n theme: Theme,\n colorScheme: string,\n color: ButtonColor,\n variant: ButtonVariant,\n size: ButtonSize,\n fullWidth: boolean,\n disabled: boolean,\n loading: boolean,\n shape: 'square' \| 'round' = 'square',\n): Record<string, string \| null> =>\n useMemo(() => {\n const iconSizeMap: Record<string, string> = {\n large: `calc(${theme.vars.spacing.unit} 5)`,\n medium: `calc(${theme.vars.spacing.unit} * 4)`,\n small: `calc(${theme.vars.spacing.unit} * 3)`,\n };\n\n const iconDimension: string = iconSizeMap[size] \|\| iconSizeMap['medium'];\n\n const baseButton: string = css`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: calc(${theme.vars.spacing.unit} * 1);\n border-radius: ${shape === 'round'\n ? '50%'\n : theme.vars.components?.Button?.root?.borderRadius \|\| theme.vars.borderRadius.medium};\n font-weight: 500;\n cursor: ${disabled \|\| loading ? 'not-allowed' : 'pointer'};\n outline: none;\n text-decoration: none;\n white-space: nowrap;\n width: ${fullWidth ? '100%' : 'auto'};\n opacity: ${disabled \|\| loading ? 0.6 : 1};\n font-family: ${theme.vars.typography.fontFamily};\n border-width: 1px;\n border-style: solid;\n ${variant === 'icon'\n ? `\n padding: 0;\n min-width: unset;\n min-height: unset;\n width: ${iconDimension};\n height: ${iconDimension};\n justify-content: center;\n align-items: center;\n `\n : ''}\n `;\n\n const sizeStyles: Record<string, string> = {\n large: css`\n ${variant === 'icon'\n ? `font-size: ${theme.vars.typography.fontSizes.lg};`\n : `padding: calc(${theme.vars.spacing.unit} * 1.5) calc(${theme.vars.spacing.unit} * 3);\n font-size: ${theme.vars.typography.fontSizes.lg};\n min-height: calc(${theme.vars.spacing.unit} * 5);`}\n `,\n medium: css`\n ${variant === 'icon'\n ? `font-size: ${theme.vars.typography.fontSizes.md};`\n : `padding: calc(${theme.vars.spacing.unit} * 1) calc(${theme.vars.spacing.unit} * 2);\n font-size: ${theme.vars.typography.fontSizes.md};\n min-height: calc(${theme.vars.spacing.unit} * 4);`}\n `,\n small: css`\n ${variant === 'icon'\n ? `font-size: ${theme.vars.typography.fontSizes.sm};`\n : `padding: calc(${theme.vars.spacing.unit} * 0.5) calc(${theme.vars.spacing.unit} * 1);\n font-size: ${theme.vars.typography.fontSizes.sm};\n min-height: calc(${theme.vars.spacing.unit} * 3);`}\n `,\n };\n\n const variantStyles: Record<string, string> = {\n 'primary-icon': css`\n background-color: transparent;\n color: ${theme.vars.colors.primary.main};\n border-color: transparent;\n &:hover:not(:disabled) {\n border-color: transparent;\n background-color: ${theme.vars.colors.action.hover};\n color: ${theme.vars.colors.primary.dark};\n }\n &:active:not(:disabled) {\n border-color: transparent;\n background-color: ${theme.vars.colors.action.selected};\n color: ${theme.vars.colors.primary.dark};\n }\n &:focus:not(:disabled) {\n border-color: transparent;\n background-color: ${theme.vars.colors.action.focus};\n color: ${theme.vars.colors.primary.dark};\n outline: none;\n }\n `,\n 'primary-outline': css`\n background-color: transparent;\n color: ${theme.vars.colors.primary.main};\n border-color: ${theme.vars.colors.primary.main};\n &:hover:not(:disabled) {\n background-color: ${theme.vars.colors.primary.main};\n color: ${theme.vars.colors.primary.contrastText};\n }\n &:active:not(:disabled) {\n background-color: ${theme.vars.colors.primary.main};\n color: ${theme.vars.colors.primary.contrastText};\n opacity: 0.9;\n }\n &:focus:not(:disabled) {\n background-color: ${theme.vars.colors.primary.main};\n color: ${theme.vars.colors.primary.contrastText};\n opacity: 0.9;\n }\n `,\n 'primary-solid': css`\n background-color: ${theme.vars.colors.primary.main};\n color: ${theme.vars.colors.primary.contrastText};\n border-color: ${theme.vars.colors.primary.main};\n &:hover:not(:disabled) {\n background-color: ${theme.vars.colors.primary.main};\n opacity: 0.9;\n }\n &:active:not(:disabled) {\n background-color: ${theme.vars.colors.primary.main};\n opacity: 0.8;\n }\n &:focus:not(:disabled) {\n background-color: ${theme.vars.colors.primary.main};\n opacity: 0.8;\n }\n `,\n 'primary-text': css`\n background-color: transparent;\n color: ${theme.vars.colors.primary.main};\n border-color: transparent;\n &:hover:not(:disabled) {\n border-color: transparent;\n background-color: ${theme.vars.colors.action.hover};\n }\n &:active:not(:disabled) {\n border-color: transparent;\n background-color: ${theme.vars.colors.action.selected};\n }\n &:focus:not(:disabled) {\n border-color: transparent;\n background-color: ${theme.vars.colors.action.focus};\n outline: none;\n }\n `,\n 'secondary-icon': css`\n background-color: transparent;\n color: ${theme.vars.colors.secondary.main};\n border-color: transparent;\n &:hover:not(:disabled) {\n border-color: transparent;\n background-color: ${theme.vars.colors.action.hover};\n color: ${theme.vars.colors.secondary.dark};\n }\n &:active:not(:disabled) {\n border-color: transparent;\n background-color: ${theme.vars.colors.action.selected};\n color: ${theme.vars.colors.secondary.dark};\n }\n &:focus:not(:disabled) {\n border-color: transparent;\n background-color: ${theme.vars.colors.action.focus};\n color: ${theme.vars.colors.secondary.dark};\n outline: none;\n }\n `,\n 'secondary-outline': css`\n background-color: transparent;\n color: ${theme.vars.colors.secondary.main};\n border-color: ${theme.vars.colors.secondary.main};\n &:hover:not(:disabled) {\n background-color: ${theme.vars.colors.secondary.main};\n color: ${theme.vars.colors.secondary.contrastText};\n }\n &:active:not(:disabled) {\n background-color: ${theme.vars.colors.secondary.main};\n color: ${theme.vars.colors.secondary.contrastText};\n opacity: 0.9;\n }\n &:focus:not(:disabled) {\n background-color: ${theme.vars.colors.secondary.main};\n color: ${theme.vars.colors.secondary.contrastText};\n opacity: 0.9;\n }\n `,\n 'secondary-solid': css`\n background-color: ${theme.vars.colors.secondary.main};\n color: ${theme.vars.colors.secondary.contrastText};\n border-color: ${theme.vars.colors.secondary.main};\n &:hover:not(:disabled) {\n background-color: ${theme.vars.colors.secondary.main};\n opacity: 0.9;\n }\n &:active:not(:disabled) {\n background-color: ${theme.vars.colors.secondary.main};\n opacity: 0.8;\n }\n &:focus:not(:disabled) {\n background-color: ${theme.vars.colors.secondary.main};\n opacity: 0.8;\n }\n `,\n 'secondary-text': css`\n background-color: transparent;\n color: ${theme.vars.colors.secondary.main};\n border-color: transparent;\n &:hover:not(:disabled) {\n border-color: transparent;\n background-color: ${theme.vars.colors.action.hover};\n }\n &:active:not(:disabled) {\n border-color: transparent;\n background-color: ${theme.vars.colors.action.selected};\n }\n &:focus:not(:disabled) {\n border-color: transparent;\n background-color: ${theme.vars.colors.action.focus};\n outline: none;\n }\n `,\n 'tertiary-icon': css`\n background-color: transparent;\n color: ${theme.vars.colors.text.secondary};\n border-color: transparent;\n &:hover:not(:disabled) {\n border-color: transparent;\n background-color: ${theme.vars.colors.action.hover};\n color: ${theme.vars.colors.text.primary};\n }\n &:active:not(:disabled) {\n border-color: transparent;\n background-color: ${theme.vars.colors.action.selected};\n color: ${theme.vars.colors.text.primary};\n }\n &:focus:not(:disabled) {\n border-color: transparent;\n background-color: ${theme.vars.colors.action.focus};\n color: ${theme.vars.colors.text.primary};\n outline: none;\n }\n `,\n 'tertiary-outline': css`\n background-color: transparent;\n color: ${theme.vars.colors.text.secondary};\n border-color: ${theme.vars.colors.border};\n &:hover:not(:disabled) {\n background-color: ${theme.vars.colors.action.hover};\n border-color: ${theme.vars.colors.text.secondary};\n }\n &:active:not(:disabled) {\n background-color: ${theme.vars.colors.action.selected};\n border-color: ${theme.vars.colors.text.primary};\n }\n &:focus:not(:disabled) {\n background-color: ${theme.vars.colors.action.focus};\n border-color: ${theme.vars.colors.text.primary};\n }\n `,\n 'tertiary-solid': css`\n background-color: ${theme.vars.colors.text.secondary};\n color: ${theme.vars.colors.background.surface};\n border-color: ${theme.vars.colors.text.secondary};\n &:hover:not(:disabled) {\n background-color: ${theme.vars.colors.text.primary};\n color: ${theme.vars.colors.background.surface};\n }\n &:active:not(:disabled) {\n background-color: ${theme.vars.colors.text.primary};\n color: ${theme.vars.colors.background.surface};\n opacity: 0.9;\n }\n &:focus:not(:disabled) {\n background-color: ${theme.vars.colors.text.primary};\n color: ${theme.vars.colors.background.surface};\n opacity: 0.9;\n }\n `,\n 'tertiary-text': css`\n background-color: transparent;\n color: ${theme.vars.colors.text.secondary};\n border-color: transparent;\n &:hover:not(:disabled) {\n border-color: transparent;\n background-color: ${theme.vars.colors.action.hover};\n color: ${theme.vars.colors.text.primary};\n }\n &:active:not(:disabled) {\n border-color: transparent;\n background-color: ${theme.vars.colors.action.selected};\n color: ${theme.vars.colors.text.primary};\n }\n &:focus:not(:disabled) {\n border-color: transparent;\n background-color: ${theme.vars.colors.action.focus};\n color: ${theme.vars.colors.text.primary};\n outline: none;\n }\n `,\n 'error-outline': css`\n background-color: transparent;\n color: ${theme.vars.colors.error.main};\n border-color: ${theme.vars.colors.error.main};\n &:hover:not(:disabled),\n &:focus-visible:not(:disabled) {\n background-color: ${theme.vars.colors.error.main};\n color: ${theme.vars.colors.error.contrastText};\n }\n `,\n 'error-solid': css`\n background-color: ${theme.vars.colors.error.main};\n color: ${theme.vars.colors.error.contrastText};\n border-color: ${theme.vars.colors.error.main};\n &:hover:not(:disabled),\n &:focus-visible:not(:disabled) {\n opacity: 0.9;\n }\n `,\n 'error-text': css`\n background-color: transparent;\n color: ${theme.vars.colors.error.main};\n border-color: transparent;\n &:hover:not(:disabled),\n &:focus-visible:not(:disabled) {\n background-color: ${theme.vars.colors.action.hover};\n }\n `,\n };\n\n const spinnerStyles: string = css`\n display: flex;\n align-items: center;\n justify-content: center;\n `;\n\n const iconStyles: string = css`\n display: flex;\n align-items: center;\n justify-content: center;\n `;\n\n const contentStyles: string = css`\n display: flex;\n align-items: center;\n justify-content: center;\n `;\n\n return {\n button: baseButton,\n content: contentStyles,\n endIcon: iconStyles,\n fullWidth: fullWidth\n ? css`\n width: 100%;\n `\n : null,\n icon: iconStyles,\n loading: loading\n ? css`\n pointer-events: none;\n `\n : null,\n shape:\n shape === 'round'\n ? css`\n border-radius: 50%;\n `\n : null,\n size: sizeStyles[size],\n spinner: spinnerStyles,\n startIcon: iconStyles,\n variant: variantStyles[`${color}-${variant}`] \|\| variantStyles['primary-solid'],\n };\n }, [theme, colorScheme, color, variant, size, fullWidth, disabled, loading]);\n\nexport default useStyles;\n"],"mappings":"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"}

package/dist/components/primitives/DataTable/DataTable.d.ts ADDED Viewed

@@ -0,0 +1,53 @@
+import { ReactElement, ReactNode } from 'react';
+/**
+ * A column of a {@link DataTable}.
+ */
+export interface DataTableColumn<T> {
+    /**
+     * Header text, already translated.
+     */
+    header: string;
+    id: string;
+    render: (row: T) => ReactNode;
+}
+/**
+ * Offset based pagination state of a {@link DataTable}.
+ */
+export interface DataTablePagination {
+    limit: number;
+    offset: number;
+    /**
+     * Called with the offset of the page to show.
+     */
+    onChange: (offset: number) => void;
+    total: number;
+}
+export interface DataTableProps<T> {
+    /**
+     * Accessible name of the table, already translated.
+     */
+    caption: string;
+    className?: string;
+    columns: DataTableColumn<T>[];
+    /**
+     * Message shown when there are no rows, already translated.
+     */
+    emptyText: string;
+    error?: string | null;
+    getRowId: (row: T) => string;
+    isLoading?: boolean;
+    /**
+     * Makes rows selectable. The first cell becomes a button so the row can be chosen from the keyboard.
+     */
+    onRowClick?: (row: T) => void;
+    pagination?: DataTablePagination;
+    rows: T[];
+    selectedRowId?: string;
+}
+/**
+ * Lists management resources in an accessible table with optional row selection and offset based
+ * pagination.
+ */
+declare const DataTable: <T>({ caption, className, columns, emptyText, error, getRowId, isLoading, onRowClick, pagination, rows, selectedRowId, }: DataTableProps<T>) => ReactElement;
+export default DataTable;
+//# sourceMappingURL=DataTable.d.ts.map

package/dist/components/primitives/DataTable/DataTable.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/DataTable/DataTable.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,YAAY,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAS9C;;GAEG;AACH,MAAM,WAAW,eAAe,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,SAAS,CAAC;CAC/B;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9B;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;GAGG;AACH,QAAA,MAAM,SAAS,GAAI,CAAC,EAAG,sHAYpB,cAAc,CAAC,CAAC,CAAC,KAAG,YAgHtB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/primitives/DataTable/DataTable.js ADDED Viewed

@@ -0,0 +1,119 @@
+import { cx } from "../../../styles/emotion.js";
+import useTheme_default from "../../../contexts/Theme/useTheme.js";
+import useTranslation_default from "../../../hooks/useTranslation.js";
+import Spinner_default from "../Spinner/Spinner.js";
+import Button_default from "../Button/Button.js";
+import Alert_default from "../Alert/Alert.js";
+import DataTable_styles_default from "./DataTable.styles.js";
+import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/primitives/DataTable/DataTable.tsx
+/**
+* Lists management resources in an accessible table with optional row selection and offset based
+* pagination.
+*/
+const DataTable = ({ caption, className, columns, emptyText, error = null, getRowId, isLoading = false, onRowClick, pagination, rows, selectedRowId }) => {
+	const { theme, colorScheme } = useTheme_default();
+	const { t } = useTranslation_default();
+	const styles = DataTable_styles_default(theme, colorScheme);
+	const renderBody = () => {
+		if (isLoading) return /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs("td", {
+			className: styles["empty"],
+			colSpan: columns.length,
+			children: [/* @__PURE__ */ jsx(Spinner_default, { size: "small" }), /* @__PURE__ */ jsxs("span", {
+				className: withVendorCSSClassPrefix(bem("data-table", "loading")),
+				children: [" ", t("admin.common.loading")]
+			})]
+		}) });
+		if (rows.length === 0) return /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+			className: styles["empty"],
+			colSpan: columns.length,
+			children: emptyText
+		}) });
+		return rows.map((row) => {
+			const rowId = getRowId(row);
+			return /* @__PURE__ */ jsx("tr", {
+				className: cx(withVendorCSSClassPrefix(bem("data-table", "row")), styles["row"]),
+				"data-clickable": onRowClick ? "true" : void 0,
+				"data-selected": selectedRowId === rowId ? "true" : void 0,
+				onClick: onRowClick ? () => onRowClick(row) : void 0,
+				children: columns.map((column, index) => /* @__PURE__ */ jsx("td", {
+					className: styles["cell"],
+					children: index === 0 && onRowClick ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: styles["rowButton"],
+						"aria-pressed": selectedRowId === void 0 ? void 0 : selectedRowId === rowId,
+						onClick: (event) => {
+							event.stopPropagation();
+							onRowClick(row);
+						},
+						children: column.render(row)
+					}) : column.render(row)
+				}, column.id))
+			}, rowId);
+		});
+	};
+	const start = pagination ? Math.min(pagination.offset + 1, pagination.total) : 0;
+	const end = pagination ? Math.min(pagination.offset + rows.length, pagination.total) : 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(withVendorCSSClassPrefix(bem("data-table")), styles["root"], className),
+		children: [
+			error && /* @__PURE__ */ jsx(Alert_default, {
+				variant: "error",
+				role: "alert",
+				children: error
+			}),
+			/* @__PURE__ */ jsxs("table", {
+				className: styles["table"],
+				children: [
+					/* @__PURE__ */ jsx("caption", {
+						className: cx(withVendorCSSClassPrefix(bem("data-table", "caption")), styles["visuallyHidden"]),
+						children: caption
+					}),
+					/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((column) => /* @__PURE__ */ jsx("th", {
+						scope: "col",
+						className: styles["headerCell"],
+						children: column.header
+					}, column.id)) }) }),
+					/* @__PURE__ */ jsx("tbody", {
+						"aria-busy": isLoading,
+						children: renderBody()
+					})
+				]
+			}),
+			pagination && pagination.total > pagination.limit && /* @__PURE__ */ jsxs("nav", {
+				className: styles["footer"],
+				"aria-label": t("admin.common.pagination.label"),
+				children: [/* @__PURE__ */ jsx("span", {
+					"aria-live": "polite",
+					children: t("admin.common.pagination.range", {
+						end,
+						start,
+						total: pagination.total
+					})
+				}), /* @__PURE__ */ jsxs("div", {
+					className: styles["footerActions"],
+					children: [/* @__PURE__ */ jsx(Button_default, {
+						variant: "outline",
+						size: "small",
+						disabled: pagination.offset === 0 || isLoading,
+						onClick: () => pagination.onChange(Math.max(0, pagination.offset - pagination.limit)),
+						children: t("admin.common.pagination.previous")
+					}), /* @__PURE__ */ jsx(Button_default, {
+						variant: "outline",
+						size: "small",
+						disabled: pagination.offset + pagination.limit >= pagination.total || isLoading,
+						onClick: () => pagination.onChange(pagination.offset + pagination.limit),
+						children: t("admin.common.pagination.next")
+					})]
+				})]
+			})
+		]
+	});
+};
+var DataTable_default = DataTable;
+//#endregion
+export { DataTable_default as default };
+//# sourceMappingURL=DataTable.js.map

package/dist/components/primitives/DataTable/DataTable.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"DataTable.js","names":["useTheme","useTranslation","styles: Record<string, string>","useStyles","Spinner","rowId: string","start: number","end: number","Alert","Button"],"sources":["../../../../src/components/primitives/DataTable/DataTable.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {bem, withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {ReactElement, ReactNode} from 'react';\nimport useStyles from './DataTable.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport useTranslation from '../../../hooks/useTranslation';\nimport {cx} from '../../../styles/emotion';\nimport Alert from '../Alert/Alert';\nimport Button from '../Button/Button';\nimport Spinner from '../Spinner/Spinner';\n\n/**\n * A column of a {@link DataTable}.\n */\nexport interface DataTableColumn<T> {\n /**\n * Header text, already translated.\n */\n header: string;\n id: string;\n render: (row: T) => ReactNode;\n}\n\n/**\n * Offset based pagination state of a {@link DataTable}.\n */\nexport interface DataTablePagination {\n limit: number;\n offset: number;\n /**\n * Called with the offset of the page to show.\n */\n onChange: (offset: number) => void;\n total: number;\n}\n\nexport interface DataTableProps<T> {\n /**\n * Accessible name of the table, already translated.\n */\n caption: string;\n className?: string;\n columns: DataTableColumn<T>[];\n /**\n * Message shown when there are no rows, already translated.\n */\n emptyText: string;\n error?: string | null;\n getRowId: (row: T) => string;\n isLoading?: boolean;\n /**\n * Makes rows selectable. The first cell becomes a button so the row can be chosen from the keyboard.\n */\n onRowClick?: (row: T) => void;\n pagination?: DataTablePagination;\n rows: T[];\n selectedRowId?: string;\n}\n\n/**\n * Lists management resources in an accessible table with optional row selection and offset based\n * pagination.\n */\nconst DataTable = <T,>({\n caption,\n className,\n columns,\n emptyText,\n error = null,\n getRowId,\n isLoading = false,\n onRowClick,\n pagination,\n rows,\n selectedRowId,\n}: DataTableProps<T>): ReactElement => {\n const {theme, colorScheme} = useTheme();\n const {t} = useTranslation();\n const styles: Record<string, string> = useStyles(theme, colorScheme);\n\n const renderBody = (): ReactNode => {\n if (isLoading) {\n return (\n <tr>\n <td className={styles['empty']} colSpan={columns.length}>\n <Spinner size=\"small\" />\n <span className={withVendorCSSClassPrefix(bem('data-table', 'loading'))}> {t('admin.common.loading')}</span>\n </td>\n </tr>\n );\n }\n\n if (rows.length === 0) {\n return (\n <tr>\n <td className={styles['empty']} colSpan={columns.length}>\n {emptyText}\n </td>\n </tr>\n );\n }\n\n return rows.map((row: T) => {\n const rowId: string = getRowId(row);\n\n return (\n <tr\n key={rowId}\n className={cx(withVendorCSSClassPrefix(bem('data-table', 'row')), styles['row'])}\n data-clickable={onRowClick ? 'true' : undefined}\n data-selected={selectedRowId === rowId ? 'true' : undefined}\n onClick={onRowClick ? (): void => onRowClick(row) : undefined}\n >\n {columns.map((column: DataTableColumn<T>, index: number) => (\n <td key={column.id} className={styles['cell']}>\n {index === 0 && onRowClick ? (\n <button\n type=\"button\"\n className={styles['rowButton']}\n aria-pressed={selectedRowId === undefined ? undefined : selectedRowId === rowId}\n onClick={(event): void => {\n event.stopPropagation();\n onRowClick(row);\n }}\n >\n {column.render(row)}\n </button>\n ) : (\n column.render(row)\n )}\n </td>\n ))}\n </tr>\n );\n });\n };\n\n const start: number = pagination ? Math.min(pagination.offset + 1, pagination.total) : 0;\n const end: number = pagination ? Math.min(pagination.offset + rows.length, pagination.total) : 0;\n\n return (\n <div className={cx(withVendorCSSClassPrefix(bem('data-table')), styles['root'], className)}>\n {error && (\n <Alert variant=\"error\" role=\"alert\">\n {error}\n </Alert>\n )}\n <table className={styles['table']}>\n <caption className={cx(withVendorCSSClassPrefix(bem('data-table', 'caption')), styles['visuallyHidden'])}>\n {caption}\n </caption>\n <thead>\n <tr>\n {columns.map((column: DataTableColumn<T>) => (\n <th key={column.id} scope=\"col\" className={styles['headerCell']}>\n {column.header}\n </th>\n ))}\n </tr>\n </thead>\n <tbody aria-busy={isLoading}>{renderBody()}</tbody>\n </table>\n {pagination && pagination.total > pagination.limit && (\n <nav className={styles['footer']} aria-label={t('admin.common.pagination.label')}>\n <span aria-live=\"polite\">{t('admin.common.pagination.range', {end, start, total: pagination.total})}</span>\n <div className={styles['footerActions']}>\n <Button\n variant=\"outline\"\n size=\"small\"\n disabled={pagination.offset === 0 || isLoading}\n onClick={(): void => pagination.onChange(Math.max(0, pagination.offset - pagination.limit))}\n >\n {t('admin.common.pagination.previous')}\n </Button>\n <Button\n variant=\"outline\"\n size=\"small\"\n disabled={pagination.offset + pagination.limit >= pagination.total || isLoading}\n onClick={(): void => pagination.onChange(pagination.offset + pagination.limit)}\n >\n {t('admin.common.pagination.next')}\n </Button>\n </div>\n </nav>\n )}\n </div>\n );\n};\n\nexport default DataTable;\n"],"mappings":"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"}

package/dist/components/primitives/DataTable/DataTable.styles.d.ts ADDED Viewed

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

package/dist/components/primitives/DataTable/DataTable.styles.d.ts.map ADDED Viewed

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

package/dist/components/primitives/DataTable/DataTable.styles.js ADDED Viewed

@@ -0,0 +1,103 @@
+import { css } from "../../../styles/emotion.js";
+import { useMemo } from "react";
+//#region src/components/primitives/DataTable/DataTable.styles.ts
+/**
+* Creates the styles for the DataTable primitive.
+*
+* @param theme - The theme object containing design tokens.
+* @param colorScheme - The current color scheme, used for memoization.
+* @returns The CSS class names for each part of the table.
+*/
+const useStyles = (theme, colorScheme) => useMemo(() => {
+	const unit = theme.vars.spacing.unit;
+	return {
+		cell: css`
+        padding: calc(${unit} * 1.5) calc(${unit} * 2);
+        text-align: start;
+        vertical-align: middle;
+        color: ${theme.vars.colors.text.primary};
+        border-top: 1px solid ${theme.vars.colors.border};
+      `,
+		empty: css`
+        padding: calc(${unit} * 4) calc(${unit} * 2);
+        text-align: center;
+        color: ${theme.vars.colors.text.secondary};
+      `,
+		footer: css`
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: space-between;
+        gap: ${unit};
+        padding: calc(${unit} * 1.5) calc(${unit} * 2);
+        border-top: 1px solid ${theme.vars.colors.border};
+        color: ${theme.vars.colors.text.secondary};
+        font-size: ${theme.vars.typography.fontSizes.sm};
+      `,
+		footerActions: css`
+        display: flex;
+        gap: ${unit};
+      `,
+		headerCell: css`
+        padding: calc(${unit} * 1.5) calc(${unit} * 2);
+        text-align: start;
+        font-size: ${theme.vars.typography.fontSizes.sm};
+        font-weight: ${theme.vars.typography.fontWeights.medium};
+        color: ${theme.vars.colors.text.secondary};
+        white-space: nowrap;
+      `,
+		root: css`
+        width: 100%;
+        overflow-x: auto;
+        background: ${theme.vars.colors.background.surface};
+        border: 1px solid ${theme.vars.colors.border};
+        border-radius: ${theme.vars.borderRadius.large};
+        font-family: ${theme.vars.typography.fontFamily};
+        font-size: ${theme.vars.typography.fontSizes.sm};
+      `,
+		row: css`
+        &[data-clickable='true'] {
+          cursor: pointer;
+        }
+        &[data-clickable='true']:hover,
+        &[data-selected='true'] {
+          background: ${theme.vars.colors.action.hover};
+        }
+      `,
+		rowButton: css`
+        all: unset;
+        cursor: pointer;
+        font-weight: ${theme.vars.typography.fontWeights.medium};
+        color: ${theme.vars.colors.text.primary};
+        &:focus-visible {
+          outline: 2px solid ${theme.vars.colors.primary.main};
+          outline-offset: 2px;
+          border-radius: ${theme.vars.borderRadius.small};
+        }
+      `,
+		table: css`
+        width: 100%;
+        min-width: 560px;
+        border-collapse: collapse;
+      `,
+		visuallyHidden: css`
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+      `
+	};
+}, [theme, colorScheme]);
+var DataTable_styles_default = useStyles;
+//#endregion
+export { DataTable_styles_default as default };
+//# sourceMappingURL=DataTable.styles.js.map

package/dist/components/primitives/DataTable/DataTable.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"DataTable.styles.js","names":["unit: string"],"sources":["../../../../src/components/primitives/DataTable/DataTable.styles.ts"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\nimport {css} from '../../../styles/emotion';\n\n/**\n * Creates the styles for the DataTable primitive.\n *\n * @param theme - The theme object containing design tokens.\n * @param colorScheme - The current color scheme, used for memoization.\n * @returns The CSS class names for each part of the table.\n */\nconst useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>\n useMemo(() => {\n const unit: string = theme.vars.spacing.unit;\n\n return {\n cell: css`\n padding: calc(${unit} * 1.5) calc(${unit} * 2);\n text-align: start;\n vertical-align: middle;\n color: ${theme.vars.colors.text.primary};\n border-top: 1px solid ${theme.vars.colors.border};\n `,\n empty: css`\n padding: calc(${unit} * 4) calc(${unit} * 2);\n text-align: center;\n color: ${theme.vars.colors.text.secondary};\n `,\n footer: css`\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: ${unit};\n padding: calc(${unit} * 1.5) calc(${unit} * 2);\n border-top: 1px solid ${theme.vars.colors.border};\n color: ${theme.vars.colors.text.secondary};\n font-size: ${theme.vars.typography.fontSizes.sm};\n `,\n footerActions: css`\n display: flex;\n gap: ${unit};\n `,\n headerCell: css`\n padding: calc(${unit} * 1.5) calc(${unit} * 2);\n text-align: start;\n font-size: ${theme.vars.typography.fontSizes.sm};\n font-weight: ${theme.vars.typography.fontWeights.medium};\n color: ${theme.vars.colors.text.secondary};\n white-space: nowrap;\n `,\n root: css`\n width: 100%;\n overflow-x: auto;\n background: ${theme.vars.colors.background.surface};\n border: 1px solid ${theme.vars.colors.border};\n border-radius: ${theme.vars.borderRadius.large};\n font-family: ${theme.vars.typography.fontFamily};\n font-size: ${theme.vars.typography.fontSizes.sm};\n `,\n row: css`\n &[data-clickable='true'] {\n cursor: pointer;\n }\n\n &[data-clickable='true']:hover,\n &[data-selected='true'] {\n background: ${theme.vars.colors.action.hover};\n }\n `,\n rowButton: css`\n all: unset;\n cursor: pointer;\n font-weight: ${theme.vars.typography.fontWeights.medium};\n color: ${theme.vars.colors.text.primary};\n\n &:focus-visible {\n outline: 2px solid ${theme.vars.colors.primary.main};\n outline-offset: 2px;\n border-radius: ${theme.vars.borderRadius.small};\n }\n `,\n table: css`\n width: 100%;\n min-width: 560px;\n border-collapse: collapse;\n `,\n visuallyHidden: css`\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n `,\n };\n }, [theme, colorScheme]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;AAcA,MAAM,aAAa,OAAc,gBAC/B,cAAc;CACZ,MAAMA,OAAe,MAAM,KAAK,QAAQ;AAExC,QAAO;EACL,MAAM,GAAG;wBACS,KAAK,eAAe,KAAK;;;iBAGhC,MAAM,KAAK,OAAO,KAAK,QAAQ;gCAChB,MAAM,KAAK,OAAO,OAAO;;EAEnD,OAAO,GAAG;wBACQ,KAAK,aAAa,KAAK;;iBAE9B,MAAM,KAAK,OAAO,KAAK,UAAU;;EAE5C,QAAQ,GAAG;;;;;eAKF,KAAK;wBACI,KAAK,eAAe,KAAK;gCACjB,MAAM,KAAK,OAAO,OAAO;iBACxC,MAAM,KAAK,OAAO,KAAK,UAAU;qBAC7B,MAAM,KAAK,WAAW,UAAU,GAAG;;EAElD,eAAe,GAAG;;eAET,KAAK;;EAEd,YAAY,GAAG;wBACG,KAAK,eAAe,KAAK;;qBAE5B,MAAM,KAAK,WAAW,UAAU,GAAG;uBACjC,MAAM,KAAK,WAAW,YAAY,OAAO;iBAC/C,MAAM,KAAK,OAAO,KAAK,UAAU;;;EAG5C,MAAM,GAAG;;;sBAGO,MAAM,KAAK,OAAO,WAAW,QAAQ;4BAC/B,MAAM,KAAK,OAAO,OAAO;yBAC5B,MAAM,KAAK,aAAa,MAAM;uBAChC,MAAM,KAAK,WAAW,WAAW;qBACnC,MAAM,KAAK,WAAW,UAAU,GAAG;;EAElD,KAAK,GAAG;;;;;;;wBAOU,MAAM,KAAK,OAAO,OAAO,MAAM;;;EAGjD,WAAW,GAAG;;;uBAGG,MAAM,KAAK,WAAW,YAAY,OAAO;iBAC/C,MAAM,KAAK,OAAO,KAAK,QAAQ;;;+BAGjB,MAAM,KAAK,OAAO,QAAQ,KAAK;;2BAEnC,MAAM,KAAK,aAAa,MAAM;;;EAGnD,OAAO,GAAG;;;;;EAKV,gBAAgB,GAAG;;;;;;;;;;;EAWpB;GACA,CAAC,OAAO,YAAY,CAAC;AAE1B,+BAAe"}

package/dist/components/primitives/Select/ResourceSelect.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { cx } from "../../../styles/emotion.js";
 import useTranslation_default from "../../../hooks/useTranslation.js";
-import useInfiniteOptions_default from "../../../hooks/useInfiniteOptions.js";
+import useInfiniteOptions_default from "../../../hooks/management/useInfiniteOptions.js";
 import Select_default from "./Select.js";
 import { SelectConstants, bem, createResourceOptionsLoader, resolvePageSize, withVendorCSSClassPrefix } from "@thunderid/browser";
 import { useEffect, useMemo, useRef } from "react";

package/dist/components/primitives/Select/ResourceSelect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ResourceSelect.js","names":["NO_PAGES: FetchSelectPage","ResourceSelect: FC<ResourceSelectProps>","useTranslation","effectivePageSize: number","load: ResourceOptionsLoader","useInfiniteOptions","previousLoad: ResourceOptionsLoader \| null","accessibleName: string","Select"],"sources":["../../../../src/components/primitives/Select/ResourceSelect.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n bem,\n createResourceOptionsLoader,\n SelectConstants,\n resolvePageSize,\n withVendorCSSClassPrefix,\n} from '@thunderid/browser';\nimport type {\n EmbeddedFlowComponent,\n EmbeddedFlowComponentType,\n FetchSelectPage,\n ResourceOptionsLoader,\n SelectOptionDefaults,\n SelectOptionMapping,\n} from '@thunderid/browser';\nimport {FC, useEffect, useMemo, useRef} from 'react';\nimport Select, {SelectProps} from './Select';\nimport useInfiniteOptions from '../../../hooks/useInfiniteOptions';\nimport useTranslation from '../../../hooks/useTranslation';\nimport {cx} from '../../../styles/emotion';\n\nexport interface ResourceSelectProps extends Omit<SelectProps, 'loading' \| 'onError' \| 'onLoadMore' \| 'options'> {\n /** Block name for the picker's CSS class, e.g. `user-select`. /\n bemBlock: string;\n /* The flow component the page function is called for. Defaults to one built from `type`. /\n component?: EmbeddedFlowComponent;\n defaults?: SelectOptionDefaults;\n /* Wording used when the translations for the keys under `messageKey` are empty. /\n fallbackMessages: {ariaLabel: string; empty: string};\n /* Loads one page of the resource. Nothing is requested while this is unset. /\n fetchPage?: FetchSelectPage;\n filter?: string;\n mapping?: SelectOptionMapping;\n /* Translation key group under `elements.fields`, e.g. `user_select`. /\n messageKey: string;\n /* Called with the error of every failed load. The list itself shows no error. /\n onError?: (error: Error) => void;\n /* Options per request. Defaults to 30 and is capped at 100. /\n pageSize?: number;\n /* What is loaded, in the words of the failure log, e.g. `users`. /\n resource: string;\n /* The flow component type this picker stands for. /\n type: EmbeddedFlowComponentType;\n}\n\nconst NO_PAGES: FetchSelectPage = () => Promise.resolve({nextOffset: null, options: []});\n\n/\n The part the `USER_SELECT`, `AUTH_FLOW_SELECT` and `USER_TYPE_SELECT` pickers share: a {@link Select} that loads\n * one resource page by page. The list restarts when the page function, filter or page size changes.\n */\nconst ResourceSelect: FC<ResourceSelectProps> = ({\n 'aria-label': ariaLabel,\n bemBlock,\n className,\n component,\n defaults,\n emptyText,\n fallbackMessages,\n fetchPage,\n filter,\n id,\n label,\n mapping,\n messageKey,\n name,\n onError,\n pageSize = SelectConstants.DEFAULT_PAGE_SIZE,\n placeholder,\n resource,\n type,\n ...rest\n}: ResourceSelectProps) => {\n const {t} = useTranslation();\n const effectivePageSize: number = resolvePageSize(pageSize);\n\n const live = useRef({component, defaults, mapping});\n\n useEffect(() => {\n live.current = {component, defaults, mapping};\n });\n\n // Only the page function, filter and page size restart the list. Mapping, defaults and component are read when\n // a page loads, so a parent that passes a new object on every render does not reload it.\n const load: ResourceOptionsLoader = useMemo(\n () =>\n createResourceOptionsLoader({\n get component(): EmbeddedFlowComponent {\n return live.current.component ?? ({id: id ?? name ?? bemBlock, type} as EmbeddedFlowComponent);\n },\n get defaults(): SelectOptionDefaults \| undefined {\n return live.current.defaults;\n },\n fetchPage: fetchPage ?? NO_PAGES,\n filter,\n get mapping(): SelectOptionMapping \| undefined {\n return live.current.mapping;\n },\n pageSize: effectivePageSize,\n resource,\n }),\n [bemBlock, effectivePageSize, fetchPage, filter, id, name, resource, type],\n );\n const {hasMore, loading, onLoadMore, options, reset} = useInfiniteOptions({load, onError});\n\n const previousLoadRef = useRef<ResourceOptionsLoader \| null>(null);\n\n // The first batch is requested when the picker renders. A different page function, filter or page size starts\n // the list again from the beginning.\n useEffect(() => {\n const previousLoad: ResourceOptionsLoader \| null = previousLoadRef.current;\n\n previousLoadRef.current = load;\n\n if (previousLoad !== null && previousLoad !== load) {\n reset();\n }\n\n if (fetchPage) {\n onLoadMore();\n }\n }, [fetchPage, load, onLoadMore, reset]);\n\n // The first of these that is not empty names the select. An empty string is not a name, which is why this is not a\n // chain of `??`.\n const accessibleName: string =\n [ariaLabel, label, placeholder, t(`elements.fields.${messageKey}.aria_label`)].find((text) => Boolean(text)) ??\n fallbackMessages.ariaLabel;\n\n return (\n <Select\n {...rest}\n aria-label={accessibleName}\n className={cx(withVendorCSSClassPrefix(bem(bemBlock)), className)}\n emptyText={emptyText ?? (t(`elements.fields.${messageKey}.empty`) \|\| fallbackMessages.empty)}\n id={id}\n label={label}\n loading={loading}\n name={name}\n onLoadMore={fetchPage && hasMore ? onLoadMore : undefined}\n options={options}\n placeholder={placeholder}\n />\n );\n};\n\nexport default ResourceSelect;\n"],"mappings":";;;;;;;;;AAgDA,MAAMA,iBAAkC,QAAQ,QAAQ;CAAC,YAAY;CAAM,SAAS,EAAE;CAAC,CAAC;;;;;AAMxF,MAAMC,kBAA2C,EAC/C,cAAc,WACd,UACA,WACA,WACA,UACA,WACA,kBACA,WACA,QACA,IACA,OACA,SACA,YACA,MACA,SACA,WAAW,gBAAgB,mBAC3B,aACA,UACA,KACA,GAAG,WACsB;CACzB,MAAM,EAAC,MAAKC,wBAAgB;CAC5B,MAAMC,oBAA4B,gBAAgB,SAAS;CAE3D,MAAM,OAAO,OAAO;EAAC;EAAW;EAAU;EAAQ,CAAC;AAEnD,iBAAgB;AACd,OAAK,UAAU;GAAC;GAAW;GAAU;GAAQ;GAC7C;CAIF,MAAMC,OAA8B,cAEhC,4BAA4B;EAC1B,IAAI,YAAmC;AACrC,UAAO,KAAK,QAAQ,aAAc;IAAC,IAAI,MAAM,QAAQ;IAAU;IAAK;;EAEtE,IAAI,WAA6C;AAC/C,UAAO,KAAK,QAAQ;;EAEtB,WAAW,aAAa;EACxB;EACA,IAAI,UAA2C;AAC7C,UAAO,KAAK,QAAQ;;EAEtB,UAAU;EACV;EACD,CAAC,EACJ;EAAC;EAAU;EAAmB;EAAW;EAAQ;EAAI;EAAM;EAAU;EAAK,CAC3E;CACD,MAAM,EAAC,SAAS,SAAS,YAAY,SAAS,UAASC,2BAAmB;EAAC;EAAM;EAAQ,CAAC;CAE1F,MAAM,kBAAkB,OAAqC,KAAK;AAIlE,iBAAgB;EACd,MAAMC,eAA6C,gBAAgB;AAEnE,kBAAgB,UAAU;AAE1B,MAAI,iBAAiB,QAAQ,iBAAiB,KAC5C,QAAO;AAGT,MAAI,UACF,aAAY;IAEb;EAAC;EAAW;EAAM;EAAY;EAAM,CAAC;CAIxC,MAAMC,iBACJ;EAAC;EAAW;EAAO;EAAa,EAAE,mBAAmB,WAAW,aAAa;EAAC,CAAC,MAAM,SAAS,QAAQ,KAAK,CAAC,IAC5G,iBAAiB;AAEnB,QACE,oBAACC;EACC,GAAI;EACJ,cAAY;EACZ,WAAW,GAAG,yBAAyB,IAAI,SAAS,CAAC,EAAE,UAAU;EACjE,WAAW,cAAc,EAAE,mBAAmB,WAAW,QAAQ,IAAI,iBAAiB;EAClF;EACG;EACE;EACH;EACN,YAAY,aAAa,UAAU,aAAa;EACvC;EACI;GACb;;AAIN,6BAAe"}
1	+ {"version":3,"file":"ResourceSelect.js","names":["NO_PAGES: FetchSelectPage","ResourceSelect: FC<ResourceSelectProps>","useTranslation","effectivePageSize: number","load: ResourceOptionsLoader","useInfiniteOptions","previousLoad: ResourceOptionsLoader \| null","accessibleName: string","Select"],"sources":["../../../../src/components/primitives/Select/ResourceSelect.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n bem,\n createResourceOptionsLoader,\n SelectConstants,\n resolvePageSize,\n withVendorCSSClassPrefix,\n} from '@thunderid/browser';\nimport type {\n EmbeddedFlowComponent,\n EmbeddedFlowComponentType,\n FetchSelectPage,\n ResourceOptionsLoader,\n SelectOptionDefaults,\n SelectOptionMapping,\n} from '@thunderid/browser';\nimport {FC, useEffect, useMemo, useRef} from 'react';\nimport Select, {SelectProps} from './Select';\nimport useInfiniteOptions from '../../../hooks/management/useInfiniteOptions';\nimport useTranslation from '../../../hooks/useTranslation';\nimport {cx} from '../../../styles/emotion';\n\nexport interface ResourceSelectProps extends Omit<SelectProps, 'loading' \| 'onError' \| 'onLoadMore' \| 'options'> {\n /** Block name for the picker's CSS class, e.g. `user-select`. /\n bemBlock: string;\n /* The flow component the page function is called for. Defaults to one built from `type`. /\n component?: EmbeddedFlowComponent;\n defaults?: SelectOptionDefaults;\n /* Wording used when the translations for the keys under `messageKey` are empty. /\n fallbackMessages: {ariaLabel: string; empty: string};\n /* Loads one page of the resource. Nothing is requested while this is unset. /\n fetchPage?: FetchSelectPage;\n filter?: string;\n mapping?: SelectOptionMapping;\n /* Translation key group under `elements.fields`, e.g. `user_select`. /\n messageKey: string;\n /* Called with the error of every failed load. The list itself shows no error. /\n onError?: (error: Error) => void;\n /* Options per request. Defaults to 30 and is capped at 100. /\n pageSize?: number;\n /* What is loaded, in the words of the failure log, e.g. `users`. /\n resource: string;\n /* The flow component type this picker stands for. /\n type: EmbeddedFlowComponentType;\n}\n\nconst NO_PAGES: FetchSelectPage = () => Promise.resolve({nextOffset: null, options: []});\n\n/\n The part the `USER_SELECT`, `AUTH_FLOW_SELECT` and `USER_TYPE_SELECT` pickers share: a {@link Select} that loads\n * one resource page by page. The list restarts when the page function, filter or page size changes.\n */\nconst ResourceSelect: FC<ResourceSelectProps> = ({\n 'aria-label': ariaLabel,\n bemBlock,\n className,\n component,\n defaults,\n emptyText,\n fallbackMessages,\n fetchPage,\n filter,\n id,\n label,\n mapping,\n messageKey,\n name,\n onError,\n pageSize = SelectConstants.DEFAULT_PAGE_SIZE,\n placeholder,\n resource,\n type,\n ...rest\n}: ResourceSelectProps) => {\n const {t} = useTranslation();\n const effectivePageSize: number = resolvePageSize(pageSize);\n\n const live = useRef({component, defaults, mapping});\n\n useEffect(() => {\n live.current = {component, defaults, mapping};\n });\n\n // Only the page function, filter and page size restart the list. Mapping, defaults and component are read when\n // a page loads, so a parent that passes a new object on every render does not reload it.\n const load: ResourceOptionsLoader = useMemo(\n () =>\n createResourceOptionsLoader({\n get component(): EmbeddedFlowComponent {\n return live.current.component ?? ({id: id ?? name ?? bemBlock, type} as EmbeddedFlowComponent);\n },\n get defaults(): SelectOptionDefaults \| undefined {\n return live.current.defaults;\n },\n fetchPage: fetchPage ?? NO_PAGES,\n filter,\n get mapping(): SelectOptionMapping \| undefined {\n return live.current.mapping;\n },\n pageSize: effectivePageSize,\n resource,\n }),\n [bemBlock, effectivePageSize, fetchPage, filter, id, name, resource, type],\n );\n const {hasMore, loading, onLoadMore, options, reset} = useInfiniteOptions({load, onError});\n\n const previousLoadRef = useRef<ResourceOptionsLoader \| null>(null);\n\n // The first batch is requested when the picker renders. A different page function, filter or page size starts\n // the list again from the beginning.\n useEffect(() => {\n const previousLoad: ResourceOptionsLoader \| null = previousLoadRef.current;\n\n previousLoadRef.current = load;\n\n if (previousLoad !== null && previousLoad !== load) {\n reset();\n }\n\n if (fetchPage) {\n onLoadMore();\n }\n }, [fetchPage, load, onLoadMore, reset]);\n\n // The first of these that is not empty names the select. An empty string is not a name, which is why this is not a\n // chain of `??`.\n const accessibleName: string =\n [ariaLabel, label, placeholder, t(`elements.fields.${messageKey}.aria_label`)].find((text) => Boolean(text)) ??\n fallbackMessages.ariaLabel;\n\n return (\n <Select\n {...rest}\n aria-label={accessibleName}\n className={cx(withVendorCSSClassPrefix(bem(bemBlock)), className)}\n emptyText={emptyText ?? (t(`elements.fields.${messageKey}.empty`) \|\| fallbackMessages.empty)}\n id={id}\n label={label}\n loading={loading}\n name={name}\n onLoadMore={fetchPage && hasMore ? onLoadMore : undefined}\n options={options}\n placeholder={placeholder}\n />\n );\n};\n\nexport default ResourceSelect;\n"],"mappings":";;;;;;;;;AAgDA,MAAMA,iBAAkC,QAAQ,QAAQ;CAAC,YAAY;CAAM,SAAS,EAAE;CAAC,CAAC;;;;;AAMxF,MAAMC,kBAA2C,EAC/C,cAAc,WACd,UACA,WACA,WACA,UACA,WACA,kBACA,WACA,QACA,IACA,OACA,SACA,YACA,MACA,SACA,WAAW,gBAAgB,mBAC3B,aACA,UACA,KACA,GAAG,WACsB;CACzB,MAAM,EAAC,MAAKC,wBAAgB;CAC5B,MAAMC,oBAA4B,gBAAgB,SAAS;CAE3D,MAAM,OAAO,OAAO;EAAC;EAAW;EAAU;EAAQ,CAAC;AAEnD,iBAAgB;AACd,OAAK,UAAU;GAAC;GAAW;GAAU;GAAQ;GAC7C;CAIF,MAAMC,OAA8B,cAEhC,4BAA4B;EAC1B,IAAI,YAAmC;AACrC,UAAO,KAAK,QAAQ,aAAc;IAAC,IAAI,MAAM,QAAQ;IAAU;IAAK;;EAEtE,IAAI,WAA6C;AAC/C,UAAO,KAAK,QAAQ;;EAEtB,WAAW,aAAa;EACxB;EACA,IAAI,UAA2C;AAC7C,UAAO,KAAK,QAAQ;;EAEtB,UAAU;EACV;EACD,CAAC,EACJ;EAAC;EAAU;EAAmB;EAAW;EAAQ;EAAI;EAAM;EAAU;EAAK,CAC3E;CACD,MAAM,EAAC,SAAS,SAAS,YAAY,SAAS,UAASC,2BAAmB;EAAC;EAAM;EAAQ,CAAC;CAE1F,MAAM,kBAAkB,OAAqC,KAAK;AAIlE,iBAAgB;EACd,MAAMC,eAA6C,gBAAgB;AAEnE,kBAAgB,UAAU;AAE1B,MAAI,iBAAiB,QAAQ,iBAAiB,KAC5C,QAAO;AAGT,MAAI,UACF,aAAY;IAEb;EAAC;EAAW;EAAM;EAAY;EAAM,CAAC;CAIxC,MAAMC,iBACJ;EAAC;EAAW;EAAO;EAAa,EAAE,mBAAmB,WAAW,aAAa;EAAC,CAAC,MAAM,SAAS,QAAQ,KAAK,CAAC,IAC5G,iBAAiB;AAEnB,QACE,oBAACC;EACC,GAAI;EACJ,cAAY;EACZ,WAAW,GAAG,yBAAyB,IAAI,SAAS,CAAC,EAAE,UAAU;EACjE,WAAW,cAAc,EAAE,mBAAmB,WAAW,QAAQ,IAAI,iBAAiB;EAClF;EACG;EACE;EACH;EACN,YAAY,aAAa,UAAU,aAAa;EACvC;EACI;GACb;;AAIN,6BAAe"}