@thunderid/react 1.5.0 → 1.6.0

package/dist/components/account/ChangeCredential/BaseChangeCredential.js

@@ -0,0 +1,183 @@
+import { cx } from "../../../styles/emotion.js";
+import useTheme_default from "../../../contexts/Theme/useTheme.js";
+import useTranslation_default from "../../../hooks/useTranslation.js";
+import Button_default from "../../primitives/Button/Button.js";
+import Typography_default from "../../primitives/Typography/Typography.js";
+import Alert_default from "../../primitives/Alert/Alert.js";
+import X_default from "../../primitives/Icons/X.js";
+import PasswordField_default from "../../primitives/PasswordField/PasswordField.js";
+import Check_default from "../../primitives/Icons/Check.js";
+import BaseChangeCredential_styles_default from "./BaseChangeCredential.styles.js";
+import { bem, evaluateChangePasswordForm, withVendorCSSClassPrefix } from "@thunderid/browser";
+import { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/account/ChangeCredential/BaseChangeCredential.tsx
+/**
+* Presentational change-credential form with just the two fields a first-time or
+* unverified credential change needs: new value and confirmation.
+*
+* Holds no context and performs no network calls: it renders the fields, evaluates the
+* policy for the checklist and the submit gate, and hands validated values to `onSubmit`.
+* Use {@link ChangeCredential} for the context-wired variant.
+*
+* @example
+* ```tsx
+* <BaseChangeCredential
+*   policy={{regex: '^.{12,}$'}}
+*   onSubmit={({newPassword}) => save(newPassword)}
+* />
+* ```
+*/
+const BaseChangeCredential = ({ cardLayout = false, className = "", credentialDisplayName = "Password", error = null, fieldErrors = {}, loading = false, onSubmit = void 0, policy = {}, preferences = void 0, showRequirements = true, success = false, title = void 0, unavailable = false }) => {
+	const { theme, colorScheme } = useTheme_default();
+	const styles = BaseChangeCredential_styles_default(theme, colorScheme);
+	const { t } = useTranslation_default(preferences?.i18n);
+	const labelParams = {
+		credential: credentialDisplayName,
+		credentialLower: credentialDisplayName.toLowerCase()
+	};
+	const resolvedTitle = title ?? t("user.change_password.heading", labelParams);
+	const [newPassword, setNewPassword] = useState("");
+	const [confirmPassword, setConfirmPassword] = useState("");
+	const [submitted, setSubmitted] = useState(false);
+	const [prevSuccess, setPrevSuccess] = useState(success);
+	if (success !== prevSuccess) {
+		setPrevSuccess(success);
+		if (success) {
+			setNewPassword("");
+			setConfirmPassword("");
+			setSubmitted(false);
+		}
+	}
+	const { confirmMatches, isValid, ruleResults } = useMemo(() => evaluateChangePasswordForm({
+		confirmPassword,
+		newPassword
+	}, policy), [
+		confirmPassword,
+		newPassword,
+		policy
+	]);
+	const interactionDisabled = loading || unavailable;
+	const canSubmit = !interactionDisabled && isValid;
+	const handleSubmit = (event) => {
+		event.preventDefault();
+		setSubmitted(true);
+		if (!canSubmit) return;
+		onSubmit?.({ newPassword });
+	};
+	const renderRequirement = (rule) => /* @__PURE__ */ jsxs("li", {
+		"data-passed": rule.passed,
+		className: cx(withVendorCSSClassPrefix(bem("change-credential", "requirement")), styles["requirement"], rule.passed ? styles["requirementPassed"] : styles["requirementPending"]),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: cx(withVendorCSSClassPrefix(bem("change-credential", "requirement-icon")), styles["requirementIcon"]),
+			children: rule.passed ? /* @__PURE__ */ jsx(Check_default, {
+				width: 14,
+				height: 14
+			}) : /* @__PURE__ */ jsx(X_default, {
+				width: 14,
+				height: 14
+			})
+		}), /* @__PURE__ */ jsx(Typography_default, {
+			variant: "body2",
+			component: "span",
+			children: t(rule.messageKey, rule.params)
+		})]
+	}, rule.key);
+	const confirmError = submitted && !confirmMatches ? t("user.change_password.mismatch.error", labelParams) : void 0;
+	const newPasswordError = fieldErrors["newPassword"];
+	const form = /* @__PURE__ */ jsxs("form", {
+		noValidate: true,
+		onSubmit: handleSubmit,
+		className: cx(withVendorCSSClassPrefix("change-credential"), styles["root"], cardLayout ? styles["card"] : "", className),
+		children: [
+			resolvedTitle && /* @__PURE__ */ jsx(Typography_default, {
+				variant: "h5",
+				className: cx(withVendorCSSClassPrefix(bem("change-credential", "heading")), styles["heading"]),
+				children: resolvedTitle
+			}),
+			error && /* @__PURE__ */ jsxs(Alert_default, {
+				variant: "error",
+				className: cx(withVendorCSSClassPrefix(bem("change-credential", "alert")), styles["alert"]),
+				children: [/* @__PURE__ */ jsx(Alert_default.Title, { children: t("errors.heading") || "Error" }), /* @__PURE__ */ jsx(Alert_default.Description, { children: error })]
+			}),
+			success && /* @__PURE__ */ jsx(Alert_default, {
+				variant: "success",
+				className: cx(withVendorCSSClassPrefix(bem("change-credential", "alert")), styles["alert"]),
+				children: /* @__PURE__ */ jsx(Alert_default.Description, { children: t("user.change_password.success", labelParams) })
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: cx(withVendorCSSClassPrefix(bem("change-credential", "fields")), styles["fields"]),
+				children: [
+					/* @__PURE__ */ jsx(PasswordField_default, {
+						name: "newPassword",
+						autoComplete: "new-password",
+						label: t("user.change_password.new.label", labelParams),
+						placeholder: t("user.change_password.new.placeholder", labelParams),
+						value: newPassword,
+						onChange: setNewPassword,
+						disabled: interactionDisabled,
+						error: newPasswordError,
+						required: true
+					}),
+					showRequirements && ruleResults.length > 0 && /* @__PURE__ */ jsxs("div", {
+						className: cx(withVendorCSSClassPrefix(bem("change-credential", "requirements"))),
+						children: [/* @__PURE__ */ jsx(Typography_default, {
+							variant: "body2",
+							component: "p",
+							className: cx(withVendorCSSClassPrefix(bem("change-credential", "requirements-heading")), styles["requirementsHeading"]),
+							children: t("user.change_password.requirements.heading", labelParams)
+						}), /* @__PURE__ */ jsx("ul", {
+							className: styles["requirements"],
+							children: ruleResults.map(renderRequirement)
+						})]
+					}),
+					/* @__PURE__ */ jsx(PasswordField_default, {
+						name: "confirmPassword",
+						autoComplete: "new-password",
+						label: t("user.change_password.confirm.label", labelParams),
+						placeholder: t("user.change_password.confirm.placeholder", labelParams),
+						value: confirmPassword,
+						onChange: setConfirmPassword,
+						disabled: interactionDisabled,
+						error: confirmError,
+						required: true
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: cx(withVendorCSSClassPrefix(bem("change-credential", "actions")), styles["actions"]),
+				children: /* @__PURE__ */ jsx(Button_default, {
+					type: "submit",
+					color: "primary",
+					variant: "solid",
+					loading,
+					disabled: !canSubmit,
+					children: t("user.change_password.submit", labelParams)
+				})
+			})
+		]
+	});
+	if (!unavailable) return form;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(withVendorCSSClassPrefix(bem("change-credential", "unavailable")), styles["unavailableRoot"], className),
+		children: [/* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			className: cx(withVendorCSSClassPrefix(bem("change-credential", "unavailable-content")), styles["unavailableContent"]),
+			children: form
+		}), /* @__PURE__ */ jsx("div", {
+			role: "status",
+			className: cx(withVendorCSSClassPrefix(bem("change-credential", "unavailable-overlay")), styles["unavailableOverlay"]),
+			children: /* @__PURE__ */ jsxs(Alert_default, {
+				variant: "warning",
+				className: cx(withVendorCSSClassPrefix(bem("change-credential", "alert")), styles["alert"]),
+				children: [/* @__PURE__ */ jsx(Alert_default.Title, { children: t("user.change_password.unavailable.heading", labelParams) }), /* @__PURE__ */ jsx(Alert_default.Description, { children: t("user.change_password.unavailable.description", labelParams) })]
+			})
+		})]
+	});
+};
+var BaseChangeCredential_default = BaseChangeCredential;
+
+//#endregion
+export { BaseChangeCredential_default as default };
+//# sourceMappingURL=BaseChangeCredential.js.map

package/dist/components/account/ChangeCredential/BaseChangeCredential.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseChangeCredential.js","names":["BaseChangeCredential: FC<BaseChangeCredentialProps>","useTheme","styles: Record<string, string>","useStyles","useTranslation","labelParams: Record<string, string>","resolvedTitle: string","interactionDisabled: boolean","canSubmit: boolean","Check","X","Typography","confirmError: string | undefined","newPasswordError: string | undefined","form: ReactElement","AlertPrimitive","PasswordField","Button"],"sources":["../../../../src/components/account/ChangeCredential/BaseChangeCredential.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n  ChangePasswordFormEvaluation,\n  PasswordPolicy,\n  PasswordRuleResult,\n  Preferences,\n  bem,\n  evaluateChangePasswordForm,\n  withVendorCSSClassPrefix,\n} from '@thunderid/browser';\nimport {FC, FormEvent, ReactElement, useMemo, useState} from 'react';\nimport useStyles from './BaseChangeCredential.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport useTranslation from '../../../hooks/useTranslation';\nimport {cx} from '../../../styles/emotion';\nimport AlertPrimitive from '../../primitives/Alert/Alert';\nimport Button from '../../primitives/Button/Button';\nimport Check from '../../primitives/Icons/Check';\nimport X from '../../primitives/Icons/X';\nimport PasswordField from '../../primitives/PasswordField/PasswordField';\nimport Typography from '../../primitives/Typography/Typography';\n\n/**\n * The values collected by the form and handed to `onSubmit`.\n *\n * There is deliberately no current-value field here. The self-service credential write\n * endpoint does not verify the account's existing value today, so a field the server\n * ignores would only teach the user a false sense of security.\n */\nexport interface ChangePasswordValues {\n  /**\n   * The value to set.\n   */\n  newPassword: string;\n}\n\nexport interface BaseChangeCredentialProps {\n  /**\n   * Whether to wrap the form in a bordered card.\n   */\n  cardLayout?: boolean;\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n  /**\n   * The human-readable name of the credential, substituted into every default label,\n   * placeholder and message (for example \"Change {credential}\", \"New {credential}\").\n   * Defaults to `Password`. {@link ChangeCredential} resolves this from the attribute's own\n   * `displayName` in the user schema; set it directly here when using this presentational\n   * component without that context.\n   */\n  credentialDisplayName?: string;\n  /**\n   * A form-level error, typically a server failure that maps to no single field.\n   */\n  error?: string | null;\n  /**\n   * Server-supplied errors keyed by field name (`newPassword`).\n   */\n  fieldErrors?: Record<string, string>;\n  /**\n   * Whether a submission is in flight.\n   */\n  loading?: boolean;\n  /**\n   * Called with the collected values once client-side validation passes.\n   */\n  onSubmit?: (values: ChangePasswordValues) => void;\n  /**\n   * The rules the new value must satisfy. Defaults to no rules, in which case the checklist\n   * is empty and the only submit gate is a non-empty value; the caller is expected to source\n   * this from the user type schema (see {@link ChangeCredential}) or supply its own.\n   */\n  policy?: PasswordPolicy;\n  /**\n   * Component-level preference overrides, including i18n.\n   */\n  preferences?: Preferences;\n  /**\n   * Whether to render the live requirement checklist. Defaults to `true`.\n   */\n  showRequirements?: boolean;\n  /**\n   * Whether the last submission succeeded.\n   */\n  success?: boolean;\n  /**\n   * Overrides the default \"Change {credential}\" heading. Pass an empty string to omit the\n   * heading entirely, for example when an app's own surrounding layout (a card header, a\n   * dialog title) already names the credential and a second heading would be redundant.\n   * Defaults to the translated `user.change_password.heading` string.\n   */\n  title?: string;\n  /**\n   * Whether the account cannot have this credential changed at all, because the user type's\n   * schema defines no attribute of this name. The form is rendered inert behind an\n   * explanatory message rather than hidden, so an integrator who placed the component can see\n   * why it is not usable instead of finding an empty space.\n   */\n  unavailable?: boolean;\n}\n\n/**\n * Presentational change-credential form with just the two fields a first-time or\n * unverified credential change needs: new value and confirmation.\n *\n * Holds no context and performs no network calls: it renders the fields, evaluates the\n * policy for the checklist and the submit gate, and hands validated values to `onSubmit`.\n * Use {@link ChangeCredential} for the context-wired variant.\n *\n * @example\n * ```tsx\n * <BaseChangeCredential\n *   policy={{regex: '^.{12,}$'}}\n *   onSubmit={({newPassword}) => save(newPassword)}\n * />\n * ```\n */\nconst BaseChangeCredential: FC<BaseChangeCredentialProps> = ({\n  cardLayout = false,\n  className = '',\n  credentialDisplayName = 'Password',\n  error = null,\n  fieldErrors = {},\n  loading = false,\n  onSubmit = undefined,\n  policy = {},\n  preferences = undefined,\n  showRequirements = true,\n  success = false,\n  title = undefined,\n  unavailable = false,\n}: BaseChangeCredentialProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme);\n  const {t} = useTranslation(preferences?.i18n);\n\n  // Substituted into every default label, placeholder and message. A caller-supplied\n  // translation that carries no `{credential}`/`{credentialLower}` placeholder is unaffected.\n  const labelParams: Record<string, string> = {\n    credential: credentialDisplayName,\n    credentialLower: credentialDisplayName.toLowerCase(),\n  };\n\n  // `title` overrides the default heading; an explicit empty string omits it entirely.\n  const resolvedTitle: string = title ?? t('user.change_password.heading', labelParams);\n\n  const [newPassword, setNewPassword] = useState<string>('');\n  const [confirmPassword, setConfirmPassword] = useState<string>('');\n  const [submitted, setSubmitted] = useState<boolean>(false);\n\n  // Clear the entered values once the container reports the write succeeded, so a shared\n  // machine is not left with the new credential sitting in the form. Adjusting state during\n  // render (rather than in an effect) is React's documented way to reset on a prop change and\n  // avoids the extra commit an effect would cause.\n  const [prevSuccess, setPrevSuccess] = useState<boolean>(success);\n\n  if (success !== prevSuccess) {\n    setPrevSuccess(success);\n\n    if (success) {\n      setNewPassword('');\n      setConfirmPassword('');\n      setSubmitted(false);\n    }\n  }\n\n  const {confirmMatches, isValid, ruleResults}: ChangePasswordFormEvaluation = useMemo(\n    () => evaluateChangePasswordForm({confirmPassword, newPassword}, policy),\n    [confirmPassword, newPassword, policy],\n  );\n\n  // A schema with no attribute of this name makes every control pointless, so they are\n  // disabled outright rather than left focusable behind the overlay.\n  const interactionDisabled: boolean = loading || unavailable;\n  const canSubmit: boolean = !interactionDisabled && isValid;\n\n  const handleSubmit = (event: FormEvent<HTMLFormElement>): void => {\n    event.preventDefault();\n    setSubmitted(true);\n\n    if (!canSubmit) {\n      return;\n    }\n\n    onSubmit?.({newPassword});\n  };\n\n  const renderRequirement = (rule: PasswordRuleResult): ReactElement => (\n    <li\n      key={rule.key}\n      data-passed={rule.passed}\n      className={cx(\n        withVendorCSSClassPrefix(bem('change-credential', 'requirement')),\n        styles['requirement'],\n        rule.passed ? styles['requirementPassed'] : styles['requirementPending'],\n      )}\n    >\n      <span\n        className={cx(\n          withVendorCSSClassPrefix(bem('change-credential', 'requirement-icon')),\n          styles['requirementIcon'],\n        )}\n      >\n        {rule.passed ? <Check width={14} height={14} /> : <X width={14} height={14} />}\n      </span>\n      <Typography variant=\"body2\" component=\"span\">\n        {t(rule.messageKey, rule.params)}\n      </Typography>\n    </li>\n  );\n\n  // Only surface the local error once the user has attempted a submit, so the form does\n  // not flag fields the user has not finished filling in.\n  const confirmError: string | undefined =\n    submitted && !confirmMatches ? t('user.change_password.mismatch.error', labelParams) : undefined;\n  const newPasswordError: string | undefined = fieldErrors['newPassword'];\n\n  const form: ReactElement = (\n    <form\n      noValidate\n      onSubmit={handleSubmit}\n      className={cx(\n        withVendorCSSClassPrefix('change-credential'),\n        styles['root'],\n        cardLayout ? styles['card'] : '',\n        className,\n      )}\n    >\n      {resolvedTitle && (\n        <Typography\n          variant=\"h5\"\n          className={cx(withVendorCSSClassPrefix(bem('change-credential', 'heading')), styles['heading'])}\n        >\n          {resolvedTitle}\n        </Typography>\n      )}\n\n      {error && (\n        <AlertPrimitive\n          variant=\"error\"\n          className={cx(withVendorCSSClassPrefix(bem('change-credential', 'alert')), styles['alert'])}\n        >\n          <AlertPrimitive.Title>{t('errors.heading') || 'Error'}</AlertPrimitive.Title>\n          <AlertPrimitive.Description>{error}</AlertPrimitive.Description>\n        </AlertPrimitive>\n      )}\n\n      {success && (\n        <AlertPrimitive\n          variant=\"success\"\n          className={cx(withVendorCSSClassPrefix(bem('change-credential', 'alert')), styles['alert'])}\n        >\n          <AlertPrimitive.Description>{t('user.change_password.success', labelParams)}</AlertPrimitive.Description>\n        </AlertPrimitive>\n      )}\n\n      <div className={cx(withVendorCSSClassPrefix(bem('change-credential', 'fields')), styles['fields'])}>\n        <PasswordField\n          name=\"newPassword\"\n          autoComplete=\"new-password\"\n          label={t('user.change_password.new.label', labelParams)}\n          placeholder={t('user.change_password.new.placeholder', labelParams)}\n          value={newPassword}\n          onChange={setNewPassword}\n          disabled={interactionDisabled}\n          error={newPasswordError}\n          required\n        />\n\n        {showRequirements && ruleResults.length > 0 && (\n          <div className={cx(withVendorCSSClassPrefix(bem('change-credential', 'requirements')))}>\n            <Typography\n              variant=\"body2\"\n              component=\"p\"\n              className={cx(\n                withVendorCSSClassPrefix(bem('change-credential', 'requirements-heading')),\n                styles['requirementsHeading'],\n              )}\n            >\n              {t('user.change_password.requirements.heading', labelParams)}\n            </Typography>\n            <ul className={styles['requirements']}>{ruleResults.map(renderRequirement)}</ul>\n          </div>\n        )}\n\n        <PasswordField\n          name=\"confirmPassword\"\n          autoComplete=\"new-password\"\n          label={t('user.change_password.confirm.label', labelParams)}\n          placeholder={t('user.change_password.confirm.placeholder', labelParams)}\n          value={confirmPassword}\n          onChange={setConfirmPassword}\n          disabled={interactionDisabled}\n          error={confirmError}\n          required\n        />\n      </div>\n\n      <div className={cx(withVendorCSSClassPrefix(bem('change-credential', 'actions')), styles['actions'])}>\n        <Button type=\"submit\" color=\"primary\" variant=\"solid\" loading={loading} disabled={!canSubmit}>\n          {t('user.change_password.submit', labelParams)}\n        </Button>\n      </div>\n    </form>\n  );\n\n  if (!unavailable) {\n    return form;\n  }\n\n  return (\n    <div\n      className={cx(\n        withVendorCSSClassPrefix(bem('change-credential', 'unavailable')),\n        styles['unavailableRoot'],\n        className,\n      )}\n    >\n      <div\n        aria-hidden=\"true\"\n        className={cx(\n          withVendorCSSClassPrefix(bem('change-credential', 'unavailable-content')),\n          styles['unavailableContent'],\n        )}\n      >\n        {form}\n      </div>\n\n      <div\n        role=\"status\"\n        className={cx(\n          withVendorCSSClassPrefix(bem('change-credential', 'unavailable-overlay')),\n          styles['unavailableOverlay'],\n        )}\n      >\n        <AlertPrimitive\n          variant=\"warning\"\n          className={cx(withVendorCSSClassPrefix(bem('change-credential', 'alert')), styles['alert'])}\n        >\n          <AlertPrimitive.Title>{t('user.change_password.unavailable.heading', labelParams)}</AlertPrimitive.Title>\n          <AlertPrimitive.Description>\n            {t('user.change_password.unavailable.description', labelParams)}\n          </AlertPrimitive.Description>\n        </AlertPrimitive>\n      </div>\n    </div>\n  );\n};\n\nexport default BaseChangeCredential;\n"],"mappings":"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"}

package/dist/components/account/ChangeCredential/BaseChangeCredential.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseChangeCredential.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/account/ChangeCredential/BaseChangeCredential.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAGzC;;;;;GAKG;AACH,QAAA,MAAM,SAAS,GAAI,OAAO,KAAK,EAAE,aAAa,MAAM,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CA8G3E,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/account/ChangeCredential/BaseChangeCredential.styles.js

@@ -0,0 +1,108 @@
+import { css } from "../../../styles/emotion.js";
+
+//#region src/components/account/ChangeCredential/BaseChangeCredential.styles.ts
+/**
+* Creates styles for the BaseChangeCredential component
+* @param theme - The theme object containing design tokens
+* @param colorScheme - The current color scheme (used for memoization)
+* @returns Object containing CSS class names for component styling
+*/
+const useStyles = (theme, colorScheme) => {
+	const root = css`
+    display: flex;
+    flex-direction: column;
+    gap: calc(${theme.vars.spacing.unit} * 2);
+    width: 100%;
+  `;
+	const card = css`
+    padding: calc(${theme.vars.spacing.unit} * 3);
+    border: 1px solid ${theme.vars.colors.border};
+    border-radius: ${theme.vars.borderRadius.large};
+  `;
+	const heading = css`
+    margin: 0;
+  `;
+	const fields = css`
+    display: flex;
+    flex-direction: column;
+    gap: calc(${theme.vars.spacing.unit} * 2);
+  `;
+	const requirements = css`
+    display: flex;
+    flex-direction: column;
+    gap: calc(${theme.vars.spacing.unit} / 2);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  `;
+	const requirementsHeading = css`
+    margin: 0 0 calc(${theme.vars.spacing.unit} / 2) 0;
+    opacity: 0.8;
+  `;
+	const requirement = css`
+    display: flex;
+    align-items: center;
+    gap: ${theme.vars.spacing.unit};
+  `;
+	const requirementPassed = css`
+    color: ${theme.vars.colors.success.main};
+  `;
+	const requirementPending = css`
+    opacity: 0.7;
+  `;
+	const requirementIcon = css`
+    flex-shrink: 0;
+    width: 14px;
+    height: 14px;
+  `;
+	const alert = css`
+    width: 100%;
+  `;
+	const actions = css`
+    display: flex;
+    gap: ${theme.vars.spacing.unit};
+    align-items: center;
+    justify-content: flex-end;
+  `;
+	const unavailableRoot = css`
+    position: relative;
+    display: flex;
+    width: 100%;
+  `;
+	return {
+		actions,
+		alert,
+		card,
+		colorScheme,
+		fields,
+		heading,
+		requirement,
+		requirementIcon,
+		requirementPassed,
+		requirementPending,
+		requirements,
+		requirementsHeading,
+		root,
+		unavailableContent: css`
+    width: 100%;
+    filter: blur(3px);
+    opacity: 0.55;
+    pointer-events: none;
+    user-select: none;
+  `,
+		unavailableOverlay: css`
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: calc(${theme.vars.spacing.unit} * 2);
+  `,
+		unavailableRoot
+	};
+};
+var BaseChangeCredential_styles_default = useStyles;
+
+//#endregion
+export { BaseChangeCredential_styles_default as default };
+//# sourceMappingURL=BaseChangeCredential.styles.js.map

package/dist/components/account/ChangeCredential/BaseChangeCredential.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseChangeCredential.styles.js","names":["root: string","card: string","heading: string","fields: string","requirements: string","requirementsHeading: string","requirement: string","requirementPassed: string","requirementPending: string","requirementIcon: string","alert: string","actions: string","unavailableRoot: string"],"sources":["../../../../src/components/account/ChangeCredential/BaseChangeCredential.styles.ts"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Theme} from '@thunderid/browser';\nimport {css} from '../../../styles/emotion';\n\n/**\n * Creates styles for the BaseChangeCredential component\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string): Record<string, string> => {\n  const root: string = css`\n    display: flex;\n    flex-direction: column;\n    gap: calc(${theme.vars.spacing.unit} * 2);\n    width: 100%;\n  `;\n\n  const card: string = css`\n    padding: calc(${theme.vars.spacing.unit} * 3);\n    border: 1px solid ${theme.vars.colors.border};\n    border-radius: ${theme.vars.borderRadius.large};\n  `;\n\n  const heading: string = css`\n    margin: 0;\n  `;\n\n  const fields: string = css`\n    display: flex;\n    flex-direction: column;\n    gap: calc(${theme.vars.spacing.unit} * 2);\n  `;\n\n  const requirements: string = css`\n    display: flex;\n    flex-direction: column;\n    gap: calc(${theme.vars.spacing.unit} / 2);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  `;\n\n  const requirementsHeading: string = css`\n    margin: 0 0 calc(${theme.vars.spacing.unit} / 2) 0;\n    opacity: 0.8;\n  `;\n\n  const requirement: string = css`\n    display: flex;\n    align-items: center;\n    gap: ${theme.vars.spacing.unit};\n  `;\n\n  const requirementPassed: string = css`\n    color: ${theme.vars.colors.success.main};\n  `;\n\n  const requirementPending: string = css`\n    opacity: 0.7;\n  `;\n\n  const requirementIcon: string = css`\n    flex-shrink: 0;\n    width: 14px;\n    height: 14px;\n  `;\n\n  const alert: string = css`\n    width: 100%;\n  `;\n\n  const actions: string = css`\n    display: flex;\n    gap: ${theme.vars.spacing.unit};\n    align-items: center;\n    justify-content: flex-end;\n  `;\n\n  const unavailableRoot: string = css`\n    position: relative;\n    display: flex;\n    width: 100%;\n  `;\n\n  const unavailableContent: string = css`\n    width: 100%;\n    filter: blur(3px);\n    opacity: 0.55;\n    pointer-events: none;\n    user-select: none;\n  `;\n\n  const unavailableOverlay: string = css`\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: calc(${theme.vars.spacing.unit} * 2);\n  `;\n\n  return {\n    actions,\n    alert,\n    card,\n    colorScheme,\n    fields,\n    heading,\n    requirement,\n    requirementIcon,\n    requirementPassed,\n    requirementPending,\n    requirements,\n    requirementsHeading,\n    root,\n    unavailableContent,\n    unavailableOverlay,\n    unavailableRoot,\n  };\n};\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;AAYA,MAAM,aAAa,OAAc,gBAAgD;CAC/E,MAAMA,OAAe,GAAG;;;gBAGV,MAAM,KAAK,QAAQ,KAAK;;;CAItC,MAAMC,OAAe,GAAG;oBACN,MAAM,KAAK,QAAQ,KAAK;wBACpB,MAAM,KAAK,OAAO,OAAO;qBAC5B,MAAM,KAAK,aAAa,MAAM;;CAGjD,MAAMC,UAAkB,GAAG;;;CAI3B,MAAMC,SAAiB,GAAG;;;gBAGZ,MAAM,KAAK,QAAQ,KAAK;;CAGtC,MAAMC,eAAuB,GAAG;;;gBAGlB,MAAM,KAAK,QAAQ,KAAK;;;;;CAMtC,MAAMC,sBAA8B,GAAG;uBAClB,MAAM,KAAK,QAAQ,KAAK;;;CAI7C,MAAMC,cAAsB,GAAG;;;WAGtB,MAAM,KAAK,QAAQ,KAAK;;CAGjC,MAAMC,oBAA4B,GAAG;aAC1B,MAAM,KAAK,OAAO,QAAQ,KAAK;;CAG1C,MAAMC,qBAA6B,GAAG;;;CAItC,MAAMC,kBAA0B,GAAG;;;;;CAMnC,MAAMC,QAAgB,GAAG;;;CAIzB,MAAMC,UAAkB,GAAG;;WAElB,MAAM,KAAK,QAAQ,KAAK;;;;CAKjC,MAAMC,kBAA0B,GAAG;;;;;AAuBnC,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,oBA/BiC,GAAG;;;;;;;EAgCpC,oBAxBiC,GAAG;;;;;;oBAMpB,MAAM,KAAK,QAAQ,KAAK;;EAmBxC;EACD;;AAGH,0CAAe"}

package/dist/components/account/ChangeCredential/ChangeCredential.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChangeCredential.d.ts","sourceRoot":"","sources":["../../../../src/components/account/ChangeCredential/ChangeCredential.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAC,EAAE,EAAoB,MAAM,OAAO,CAAC;AAC5C,OAA6B,EAAC,yBAAyB,EAAuB,MAAM,wBAAwB,CAAC;AAY7G,MAAM,WAAW,qBACf,SAAQ,IAAI,CACV,yBAAyB,EACzB,uBAAuB,GAAG,OAAO,GAAG,aAAa,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CACvF;IACD;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,QAAA,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CA8E/C,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/account/ChangeCredential/ChangeCredential.js

@@ -0,0 +1,119 @@
+import useThunderID_default from "../../../contexts/ThunderID/useThunderID.js";
+import useUser_default from "../../../contexts/User/useUser.js";
+import useTranslation_default from "../../../hooks/useTranslation.js";
+import BaseChangeCredential_default from "./BaseChangeCredential.js";
+import updateMeCredentials_default from "../../../api/account/updateMeCredentials.js";
+import { CredentialConstants, mapCredentialUpdateError, resolveChangeCredentialPolicy, resolveResourceEndpoint, supportsCredential } from "@thunderid/browser";
+import { useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/account/ChangeCredential/ChangeCredential.tsx
+/**
+* Title-cases a credential attribute name for use as a display-name fallback when the schema
+* declares no `displayName` for it, e.g. `pin` -> `Pin`.
+*/
+const defaultDisplayName = (attribute) => attribute.charAt(0).toUpperCase() + attribute.slice(1);
+/**
+* ChangeCredential lets the signed-in user set a new value for one of their own credentials.
+*
+* It collects only a new value and its confirmation. The self-service credential write path
+* does not verify the account's existing value today, so this component does not ask for one;
+* once server-side current-value verification ships, that field returns without a breaking
+* change to this component's public props.
+*
+* It reads the applicable rules from the user schema already resolved by the ThunderID
+* provider, so it adds no network request beyond the write itself, and posts to
+* `/users/me/update-credentials` with the access token attached by the SDK's HTTP client.
+*
+* Defaults to managing the `password` credential. To manage a different one (for example a
+* PIN declared on the user type schema), set `attribute`; render the component once per
+* credential to let a user manage several. Every default label, placeholder and message is
+* built from the attribute's own `displayName` in the schema (`GET /users/me/meta`), so it
+* always matches whatever an admin named the attribute there; when the schema carries no
+* `displayName` for it, it falls back to the attribute name title-cased (`pin` -> `Pin`).
+* Override individual strings via `preferences.i18n` for full control (including other
+* languages) if the schema-derived name isn't the right fit.
+*
+* @example
+* ```tsx
+* // Basic usage, manages the password
+* <ChangeCredential onSuccess={() => toast('Password updated')} />
+*
+* // With an explicit rule instead of the schema-derived policy
+* <ChangeCredential
+*   policy={{regex: '^.{12,}$'}}
+* />
+*
+* // Managing a different credential declared on the schema; labels use the schema's own
+* // displayName for it automatically
+* <ChangeCredential attribute="pin" />
+* ```
+*/
+const ChangeCredential = ({ attribute = CredentialConstants.PASSWORD, onSuccess = void 0, policy = void 0, preferences = void 0,...rest }) => {
+	const { baseUrl, endpoints, instanceId, preferences: contextPreferences } = useThunderID_default();
+	const { userSchema } = useUser_default();
+	const resolvedDisplayName = userSchema?.[attribute]?.displayName ?? defaultDisplayName(attribute);
+	const resolvedPreferences = useMemo(() => ({
+		...contextPreferences,
+		...preferences,
+		user: {
+			...contextPreferences?.user,
+			...preferences?.user
+		}
+	}), [contextPreferences, preferences]);
+	const { t } = useTranslation_default(resolvedPreferences?.i18n);
+	const [error, setError] = useState(null);
+	const [fieldErrors, setFieldErrors] = useState({});
+	const [loading, setLoading] = useState(false);
+	const [success, setSuccess] = useState(false);
+	const resolvedPolicy = useMemo(() => resolveChangeCredentialPolicy(userSchema, attribute, policy), [
+		userSchema,
+		attribute,
+		policy
+	]);
+	const handleSubmit = async ({ newPassword }) => {
+		setError(null);
+		setFieldErrors({});
+		setSuccess(false);
+		setLoading(true);
+		try {
+			await updateMeCredentials_default({
+				baseUrl,
+				instanceId,
+				payload: { [attribute]: newPassword },
+				url: resolveResourceEndpoint("usersMeCredentials", { endpoints })
+			});
+			setSuccess(true);
+			onSuccess?.();
+		} catch (caughtError) {
+			const { field, message, messageKey } = mapCredentialUpdateError(caughtError);
+			const text = message ?? t(messageKey, {
+				credential: resolvedDisplayName,
+				credentialLower: resolvedDisplayName.toLowerCase()
+			});
+			if (field) setFieldErrors({ [field]: text });
+			else setError(text);
+		} finally {
+			setLoading(false);
+		}
+	};
+	return /* @__PURE__ */ jsx(BaseChangeCredential_default, {
+		...rest,
+		credentialDisplayName: resolvedDisplayName,
+		error,
+		fieldErrors,
+		loading,
+		policy: resolvedPolicy,
+		preferences: resolvedPreferences,
+		success,
+		unavailable: !supportsCredential(userSchema, attribute),
+		onSubmit: (values) => {
+			handleSubmit(values);
+		}
+	});
+};
+var ChangeCredential_default = ChangeCredential;
+
+//#endregion
+export { ChangeCredential_default as default };
+//# sourceMappingURL=ChangeCredential.js.map

package/dist/components/account/ChangeCredential/ChangeCredential.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChangeCredential.js","names":["ChangeCredential: FC<ChangeCredentialProps>","useThunderID","useUser","resolvedDisplayName: string","useTranslation","resolvedPolicy: PasswordPolicy","updateMeCredentials","caughtError: unknown","text: string","BaseChangeCredential"],"sources":["../../../../src/components/account/ChangeCredential/ChangeCredential.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n  CredentialConstants,\n  CredentialUpdateErrorResult,\n  PasswordPolicy,\n  mapCredentialUpdateError,\n  resolveChangeCredentialPolicy,\n  resolveResourceEndpoint,\n  supportsCredential,\n} from '@thunderid/browser';\nimport {FC, useMemo, useState} from 'react';\nimport BaseChangeCredential, {BaseChangeCredentialProps, ChangePasswordValues} from './BaseChangeCredential';\nimport updateMeCredentials from '../../../api/account/updateMeCredentials';\nimport useThunderID from '../../../contexts/ThunderID/useThunderID';\nimport useUser from '../../../contexts/User/useUser';\nimport useTranslation from '../../../hooks/useTranslation';\n\n/**\n * Title-cases a credential attribute name for use as a display-name fallback when the schema\n * declares no `displayName` for it, e.g. `pin` -> `Pin`.\n */\nconst defaultDisplayName = (attribute: string): string => attribute.charAt(0).toUpperCase() + attribute.slice(1);\n\nexport interface ChangeCredentialProps\n  extends Omit<\n    BaseChangeCredentialProps,\n    'credentialDisplayName' | 'error' | 'fieldErrors' | 'loading' | 'onSubmit' | 'success'\n  > {\n  /**\n   * The credential attribute this instance manages, any attribute the user's entity type\n   * schema declares `credential: true` (for example `password` or `pin`). Defaults to\n   * `password`. Render the component once per credential to let a user manage more than one,\n   * for example `<ChangeCredential />` for the password and\n   * `<ChangeCredential attribute=\"pin\" />` for a PIN.\n   */\n  attribute?: string;\n  /**\n   * Called after the credential has been changed successfully.\n   */\n  onSuccess?: () => void;\n}\n\n/**\n * ChangeCredential lets the signed-in user set a new value for one of their own credentials.\n *\n * It collects only a new value and its confirmation. The self-service credential write path\n * does not verify the account's existing value today, so this component does not ask for one;\n * once server-side current-value verification ships, that field returns without a breaking\n * change to this component's public props.\n *\n * It reads the applicable rules from the user schema already resolved by the ThunderID\n * provider, so it adds no network request beyond the write itself, and posts to\n * `/users/me/update-credentials` with the access token attached by the SDK's HTTP client.\n *\n * Defaults to managing the `password` credential. To manage a different one (for example a\n * PIN declared on the user type schema), set `attribute`; render the component once per\n * credential to let a user manage several. Every default label, placeholder and message is\n * built from the attribute's own `displayName` in the schema (`GET /users/me/meta`), so it\n * always matches whatever an admin named the attribute there; when the schema carries no\n * `displayName` for it, it falls back to the attribute name title-cased (`pin` -> `Pin`).\n * Override individual strings via `preferences.i18n` for full control (including other\n * languages) if the schema-derived name isn't the right fit.\n *\n * @example\n * ```tsx\n * // Basic usage, manages the password\n * <ChangeCredential onSuccess={() => toast('Password updated')} />\n *\n * // With an explicit rule instead of the schema-derived policy\n * <ChangeCredential\n *   policy={{regex: '^.{12,}$'}}\n * />\n *\n * // Managing a different credential declared on the schema; labels use the schema's own\n * // displayName for it automatically\n * <ChangeCredential attribute=\"pin\" />\n * ```\n */\nconst ChangeCredential: FC<ChangeCredentialProps> = ({\n  attribute = CredentialConstants.PASSWORD,\n  onSuccess = undefined,\n  policy = undefined,\n  preferences = undefined,\n  ...rest\n}: ChangeCredentialProps) => {\n  const {baseUrl, endpoints, instanceId, preferences: contextPreferences} = useThunderID();\n  const {userSchema} = useUser();\n  const resolvedDisplayName: string = userSchema?.[attribute]?.displayName ?? defaultDisplayName(attribute);\n\n  const resolvedPreferences = useMemo(\n    () => ({\n      ...contextPreferences,\n      ...preferences,\n      user: {...contextPreferences?.user, ...preferences?.user},\n    }),\n    [contextPreferences, preferences],\n  );\n  const {t} = useTranslation(resolvedPreferences?.i18n);\n\n  const [error, setError] = useState<string | null>(null);\n  const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({});\n  const [loading, setLoading] = useState<boolean>(false);\n  const [success, setSuccess] = useState<boolean>(false);\n\n  const resolvedPolicy: PasswordPolicy = useMemo(\n    () => resolveChangeCredentialPolicy(userSchema, attribute, policy),\n    [userSchema, attribute, policy],\n  );\n\n  const handleSubmit = async ({newPassword}: ChangePasswordValues): Promise<void> => {\n    setError(null);\n    setFieldErrors({});\n    setSuccess(false);\n    setLoading(true);\n\n    try {\n      await updateMeCredentials({\n        baseUrl,\n        instanceId,\n        payload: {[attribute]: newPassword},\n        url: resolveResourceEndpoint('usersMeCredentials', {endpoints}),\n      });\n\n      setSuccess(true);\n      onSuccess?.();\n    } catch (caughtError: unknown) {\n      const {field, message, messageKey}: CredentialUpdateErrorResult = mapCredentialUpdateError(caughtError);\n      const text: string =\n        message ?? t(messageKey, {credential: resolvedDisplayName, credentialLower: resolvedDisplayName.toLowerCase()});\n\n      if (field) {\n        setFieldErrors({[field]: text});\n      } else {\n        setError(text);\n      }\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  return (\n    <BaseChangeCredential\n      {...rest}\n      credentialDisplayName={resolvedDisplayName}\n      error={error}\n      fieldErrors={fieldErrors}\n      loading={loading}\n      policy={resolvedPolicy}\n      preferences={resolvedPreferences}\n      success={success}\n      unavailable={!supportsCredential(userSchema, attribute)}\n      onSubmit={(values: ChangePasswordValues): void => {\n        void handleSubmit(values);\n      }}\n    />\n  );\n};\n\nexport default ChangeCredential;\n"],"mappings":";;;;;;;;;;;;;;AAuBA,MAAM,sBAAsB,cAA8B,UAAU,OAAO,EAAE,CAAC,aAAa,GAAG,UAAU,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDhH,MAAMA,oBAA+C,EACnD,YAAY,oBAAoB,UAChC,YAAY,QACZ,SAAS,QACT,cAAc,OACd,GAAG,WACwB;CAC3B,MAAM,EAAC,SAAS,WAAW,YAAY,aAAa,uBAAsBC,sBAAc;CACxF,MAAM,EAAC,eAAcC,iBAAS;CAC9B,MAAMC,sBAA8B,aAAa,YAAY,eAAe,mBAAmB,UAAU;CAEzG,MAAM,sBAAsB,eACnB;EACL,GAAG;EACH,GAAG;EACH,MAAM;GAAC,GAAG,oBAAoB;GAAM,GAAG,aAAa;GAAK;EAC1D,GACD,CAAC,oBAAoB,YAAY,CAClC;CACD,MAAM,EAAC,MAAKC,uBAAe,qBAAqB,KAAK;CAErD,MAAM,CAAC,OAAO,YAAY,SAAwB,KAAK;CACvD,MAAM,CAAC,aAAa,kBAAkB,SAAiC,EAAE,CAAC;CAC1E,MAAM,CAAC,SAAS,cAAc,SAAkB,MAAM;CACtD,MAAM,CAAC,SAAS,cAAc,SAAkB,MAAM;CAEtD,MAAMC,iBAAiC,cAC/B,8BAA8B,YAAY,WAAW,OAAO,EAClE;EAAC;EAAY;EAAW;EAAO,CAChC;CAED,MAAM,eAAe,OAAO,EAAC,kBAAsD;AACjF,WAAS,KAAK;AACd,iBAAe,EAAE,CAAC;AAClB,aAAW,MAAM;AACjB,aAAW,KAAK;AAEhB,MAAI;AACF,SAAMC,4BAAoB;IACxB;IACA;IACA,SAAS,GAAE,YAAY,aAAY;IACnC,KAAK,wBAAwB,sBAAsB,EAAC,WAAU,CAAC;IAChE,CAAC;AAEF,cAAW,KAAK;AAChB,gBAAa;WACNC,aAAsB;GAC7B,MAAM,EAAC,OAAO,SAAS,eAA2C,yBAAyB,YAAY;GACvG,MAAMC,OACJ,WAAW,EAAE,YAAY;IAAC,YAAY;IAAqB,iBAAiB,oBAAoB,aAAa;IAAC,CAAC;AAEjH,OAAI,MACF,gBAAe,GAAE,QAAQ,MAAK,CAAC;OAE/B,UAAS,KAAK;YAER;AACR,cAAW,MAAM;;;AAIrB,QACE,oBAACC;EACC,GAAI;EACJ,uBAAuB;EAChB;EACM;EACJ;EACT,QAAQ;EACR,aAAa;EACJ;EACT,aAAa,CAAC,mBAAmB,YAAY,UAAU;EACvD,WAAW,WAAuC;AAChD,GAAK,aAAa,OAAO;;GAE3B;;AAIN,+BAAe"}

package/dist/components/account/User/BaseUser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseUser.d.ts","sourceRoot":"","sources":["../../../../src/components/account/User/BaseUser.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,IAAI,IAAI,KAAK,EAAC,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAC,EAAE,EAAgB,SAAS,EAAC,MAAM,OAAO,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B;;;;OAIG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,KAAK,GAAG,IAAI,KAAK,SAAS,CAAC;IAE5C;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,IAAI,EAAE,KAAK,GAAG,IAAI,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAM/B,CAAC;AAIF,eAAe,QAAQ,CAAC"}

package/dist/components/account/User/BaseUser.js

@@ -0,0 +1,39 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+
+//#region src/components/account/User/BaseUser.tsx
+/**
+* Base User component that provides the core functionality for displaying user information.
+* This component takes a user object as a prop and uses render props to expose it.
+*
+* @remarks This is the base component that can be used in any context where you have
+* a user object available. For React applications, use the User component which
+* automatically retrieves the user from ThunderID context.
+*
+* @example
+* ```tsx
+* import { BaseUser } from '@thunderid/auth-react';
+*
+* const MyComponent = ({ user }) => {
+*   return (
+*     <BaseUser user={user} fallback={<p>No user data</p>}>
+*       {(user) => (
+*         <div>
+*           <h1>Welcome, {user.displayName}!</h1>
+*           <p>Email: {user.email}</p>
+*         </div>
+*       )}
+*     </BaseUser>
+*   );
+* }
+* ```
+*/
+const BaseUser = ({ user, children, fallback = null }) => {
+	if (!user) return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+	return /* @__PURE__ */ jsx(Fragment, { children: children(user) });
+};
+BaseUser.displayName = "BaseUser";
+var BaseUser_default = BaseUser;
+
+//#endregion
+export { BaseUser_default as default };
+//# sourceMappingURL=BaseUser.js.map

package/dist/components/account/User/BaseUser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseUser.js","names":["BaseUser: FC<BaseUserProps>"],"sources":["../../../../src/components/account/User/BaseUser.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {User as IUser} from '@thunderid/browser';\nimport {FC, ReactElement, ReactNode} from 'react';\n\n/**\n * Props for the BaseUser component.\n */\nexport interface BaseUserProps {\n  /**\n   * Render prop that takes the user object and returns a ReactNode.\n   * @param user - The authenticated user object from ThunderID.\n   * @returns A ReactNode to render.\n   */\n  children: (user: IUser | null) => ReactNode;\n\n  /**\n   * Optional element to render when no user is provided.\n   */\n  fallback?: ReactNode;\n\n  /**\n   * The user object to display. If not provided, the component will render the fallback.\n   */\n  user: IUser | null;\n}\n\n/**\n * Base User component that provides the core functionality for displaying user information.\n * This component takes a user object as a prop and uses render props to expose it.\n *\n * @remarks This is the base component that can be used in any context where you have\n * a user object available. For React applications, use the User component which\n * automatically retrieves the user from ThunderID context.\n *\n * @example\n * ```tsx\n * import { BaseUser } from '@thunderid/auth-react';\n *\n * const MyComponent = ({ user }) => {\n *   return (\n *     <BaseUser user={user} fallback={<p>No user data</p>}>\n *       {(user) => (\n *         <div>\n *           <h1>Welcome, {user.displayName}!</h1>\n *           <p>Email: {user.email}</p>\n *         </div>\n *       )}\n *     </BaseUser>\n *   );\n * }\n * ```\n */\nconst BaseUser: FC<BaseUserProps> = ({user, children, fallback = null}: BaseUserProps): ReactElement => {\n  if (!user) {\n    return <>{fallback}</>;\n  }\n\n  return <>{children(user)}</>;\n};\n\nBaseUser.displayName = 'BaseUser';\n\nexport default BaseUser;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA,MAAMA,YAA+B,EAAC,MAAM,UAAU,WAAW,WAAuC;AACtG,KAAI,CAAC,KACH,QAAO,0CAAG,WAAY;AAGxB,QAAO,0CAAG,SAAS,KAAK,GAAI;;AAG9B,SAAS,cAAc;AAEvB,uBAAe"}

package/dist/components/account/User/User.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"User.d.ts","sourceRoot":"","sources":["../../../../src/components/account/User/User.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,IAAI,IAAI,KAAK,EAAC,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAC,EAAE,EAAgB,SAAS,EAAC,MAAM,OAAO,CAAC;AAClD,OAAiB,EAAC,aAAa,EAAC,MAAM,YAAY,CAAC;AAGnD;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC;IAC5D;;;;OAIG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,KAAK,GAAG,IAAI,KAAK,SAAS,CAAC;IAE5C;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAQvB,CAAC;AAIF,eAAe,IAAI,CAAC"}

package/dist/components/account/User/User.js

@@ -0,0 +1,43 @@
+import useThunderID_default from "../../../contexts/ThunderID/useThunderID.js";
+import BaseUser_default from "./BaseUser.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/account/User/User.tsx
+/**
+* A component that uses render props to expose the authenticated user object.
+* This component automatically retrieves the user from ThunderID context.
+*
+* @remarks This component is only supported in browser based React applications (CSR).
+*
+* @example
+* ```tsx
+* import { IUser } from '@thunderid/auth-react';
+*
+* const App = () => {
+*   return (
+*     <User fallback={<p>Please sign in</p>}>
+*       {(user) => (
+*         <div>
+*           <h1>Welcome, {user.displayName}!</h1>
+*           <p>Email: {user.email}</p>
+*         </div>
+*       )}
+*     </User>
+*   );
+* }
+* ```
+*/
+const User = ({ children, fallback = null }) => {
+	const { user } = useThunderID_default();
+	return /* @__PURE__ */ jsx(BaseUser_default, {
+		user,
+		fallback,
+		children
+	});
+};
+User.displayName = "User";
+var User_default = User;
+
+//#endregion
+export { User_default as default };
+//# sourceMappingURL=User.js.map

package/dist/components/account/User/User.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"User.js","names":["User: FC<UserProps>","useThunderID","BaseUser"],"sources":["../../../../src/components/account/User/User.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {User as IUser} from '@thunderid/browser';\nimport {FC, ReactElement, ReactNode} from 'react';\nimport BaseUser, {BaseUserProps} from './BaseUser';\nimport useThunderID from '../../../contexts/ThunderID/useThunderID';\n\n/**\n * Props for the User component.\n * Extends BaseUserProps but makes the user prop optional since it will be obtained from useThunderID\n */\nexport interface UserProps extends Omit<BaseUserProps, 'user'> {\n  /**\n   * Render prop that takes the user object and returns a ReactNode.\n   * @param user - The authenticated user object from ThunderID.\n   * @returns A ReactNode to render.\n   */\n  children: (user: IUser | null) => ReactNode;\n\n  /**\n   * Optional element to render when no user is signed in.\n   */\n  fallback?: ReactNode;\n}\n\n/**\n * A component that uses render props to expose the authenticated user object.\n * This component automatically retrieves the user from ThunderID context.\n *\n * @remarks This component is only supported in browser based React applications (CSR).\n *\n * @example\n * ```tsx\n * import { IUser } from '@thunderid/auth-react';\n *\n * const App = () => {\n *   return (\n *     <User fallback={<p>Please sign in</p>}>\n *       {(user) => (\n *         <div>\n *           <h1>Welcome, {user.displayName}!</h1>\n *           <p>Email: {user.email}</p>\n *         </div>\n *       )}\n *     </User>\n *   );\n * }\n * ```\n */\nconst User: FC<UserProps> = ({children, fallback = null}: UserProps): ReactElement => {\n  const {user} = useThunderID();\n\n  return (\n    <BaseUser user={user} fallback={fallback}>\n      {children}\n    </BaseUser>\n  );\n};\n\nUser.displayName = 'User';\n\nexport default User;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,MAAMA,QAAuB,EAAC,UAAU,WAAW,WAAmC;CACpF,MAAM,EAAC,SAAQC,sBAAc;AAE7B,QACE,oBAACC;EAAe;EAAgB;EAC7B;GACQ;;AAIf,KAAK,cAAc;AAEnB,mBAAe"}

package/dist/components/account/UserAvatar/BaseUserAvatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseUserAvatar.d.ts","sourceRoot":"","sources":["../../../../src/components/account/UserAvatar/BaseUserAvatar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA0B,IAAI,EAAC,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAC,EAAE,EAAe,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,mBAAmB;IAClC;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;CACnB;AAwBD;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAa3C,CAAC;AAIF,eAAe,cAAc,CAAC"}