@thunderid/react 1.8.0 → 1.9.1

package/dist/cjs/components/auth/flow/ConsentDetailText.styles.cjs

@@ -0,0 +1,83 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_emotion = require('../../../styles/emotion.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+
+//#region src/components/auth/flow/ConsentDetailText.styles.ts
+/**
+* Creates styles for the ConsentDetailToggle 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 useToggleStyles = (theme, colorScheme) => (0, react.useMemo)(() => ({ toggle: require_emotion.css({
+	background: "transparent",
+	border: "none",
+	borderRadius: "4px",
+	color: theme.vars.colors.primary.main,
+	cursor: "pointer",
+	font: "inherit",
+	fontSize: "0.8125rem",
+	padding: "2px 4px",
+	"&:hover": { textDecoration: "underline" },
+	"&:focus-visible": {
+		outline: `2px solid ${theme.vars.colors.primary.main}`,
+		outlineOffset: "1px"
+	}
+}) }), [theme, colorScheme]);
+/**
+* Creates styles for the ConsentDetailText component.
+* @param theme - The theme object containing design tokens
+* @param colorScheme - The current color scheme (used for memoization)
+* @param align - Alignment of the text
+* @param monospace - Whether the text is shown as a preformatted monospace block
+* @param maxLines - Number of lines the text is clamped to
+* @returns Object containing CSS class names for component styling
+*/
+const useStyles = (theme, colorScheme, align, monospace, maxLines) => (0, react.useMemo)(() => ({
+	clamp: require_emotion.css({
+		display: "-webkit-box",
+		overflow: "hidden",
+		WebkitBoxOrient: "vertical",
+		WebkitLineClamp: maxLines
+	}),
+	container: require_emotion.css({
+		alignItems: align === "right" ? "flex-end" : "flex-start",
+		display: "flex",
+		flexDirection: "column",
+		gap: "2px",
+		maxWidth: "100%",
+		minWidth: 0
+	}),
+	monospace: require_emotion.css({
+		background: theme.vars.colors.action.hover,
+		border: `1px solid ${theme.vars.colors.border}`,
+		borderRadius: "4px",
+		boxSizing: "border-box",
+		fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+		fontSize: "0.75rem",
+		padding: "6px 8px",
+		width: "100%"
+	}),
+	text: require_emotion.css({
+		lineHeight: 1.45,
+		margin: 0,
+		maxWidth: "100%",
+		overflowWrap: "anywhere",
+		textAlign: align,
+		whiteSpace: monospace ? "pre-wrap" : "normal",
+		wordBreak: "normal"
+	})
+}), [
+	theme,
+	colorScheme,
+	align,
+	monospace,
+	maxLines
+]);
+var ConsentDetailText_styles_default = useStyles;
+
+//#endregion
+exports.default = ConsentDetailText_styles_default;
+exports.useToggleStyles = useToggleStyles;
+//# sourceMappingURL=ConsentDetailText.styles.cjs.map

package/dist/cjs/components/auth/flow/ConsentDetailText.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConsentDetailText.styles.cjs","names":["css"],"sources":["../../../../../src/components/auth/flow/ConsentDetailText.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 styles for the ConsentDetailToggle 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 */\nexport const useToggleStyles = (theme: Theme, colorScheme: string): Record<string, string> =>\n  useMemo(\n    () => ({\n      toggle: css({\n        background: 'transparent',\n        border: 'none',\n        borderRadius: '4px',\n        color: theme.vars.colors.primary.main,\n        cursor: 'pointer',\n        font: 'inherit',\n        fontSize: '0.8125rem',\n        padding: '2px 4px',\n        '&:hover': {textDecoration: 'underline'},\n        '&:focus-visible': {outline: `2px solid ${theme.vars.colors.primary.main}`, outlineOffset: '1px'},\n      }),\n    }),\n    [theme, colorScheme],\n  );\n\n/**\n * Creates styles for the ConsentDetailText component.\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param align - Alignment of the text\n * @param monospace - Whether the text is shown as a preformatted monospace block\n * @param maxLines - Number of lines the text is clamped to\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  align: 'left' | 'right',\n  monospace: boolean,\n  maxLines: number,\n): Record<string, string> =>\n  useMemo(\n    () => ({\n      clamp: css({\n        display: '-webkit-box',\n        overflow: 'hidden',\n        WebkitBoxOrient: 'vertical',\n        WebkitLineClamp: maxLines,\n      }),\n      container: css({\n        alignItems: align === 'right' ? 'flex-end' : 'flex-start',\n        display: 'flex',\n        flexDirection: 'column',\n        gap: '2px',\n        maxWidth: '100%',\n        minWidth: 0,\n      }),\n      monospace: css({\n        background: theme.vars.colors.action.hover,\n        border: `1px solid ${theme.vars.colors.border}`,\n        borderRadius: '4px',\n        boxSizing: 'border-box',\n        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',\n        fontSize: '0.75rem',\n        padding: '6px 8px',\n        width: '100%',\n      }),\n      text: css({\n        lineHeight: 1.45,\n        margin: 0,\n        maxWidth: '100%',\n        overflowWrap: 'anywhere',\n        textAlign: align,\n        whiteSpace: monospace ? 'pre-wrap' : 'normal',\n        wordBreak: 'normal',\n      }),\n    }),\n    [theme, colorScheme, align, monospace, maxLines],\n  );\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;AAaA,MAAa,mBAAmB,OAAc,0CAEnC,EACL,QAAQA,oBAAI;CACV,YAAY;CACZ,QAAQ;CACR,cAAc;CACd,OAAO,MAAM,KAAK,OAAO,QAAQ;CACjC,QAAQ;CACR,MAAM;CACN,UAAU;CACV,SAAS;CACT,WAAW,EAAC,gBAAgB,aAAY;CACxC,mBAAmB;EAAC,SAAS,aAAa,MAAM,KAAK,OAAO,QAAQ;EAAQ,eAAe;EAAM;CAClG,CAAC,EACH,GACD,CAAC,OAAO,YAAY,CACrB;;;;;;;;;;AAWH,MAAM,aACJ,OACA,aACA,OACA,WACA,uCAGS;CACL,OAAOA,oBAAI;EACT,SAAS;EACT,UAAU;EACV,iBAAiB;EACjB,iBAAiB;EAClB,CAAC;CACF,WAAWA,oBAAI;EACb,YAAY,UAAU,UAAU,aAAa;EAC7C,SAAS;EACT,eAAe;EACf,KAAK;EACL,UAAU;EACV,UAAU;EACX,CAAC;CACF,WAAWA,oBAAI;EACb,YAAY,MAAM,KAAK,OAAO,OAAO;EACrC,QAAQ,aAAa,MAAM,KAAK,OAAO;EACvC,cAAc;EACd,WAAW;EACX,YAAY;EACZ,UAAU;EACV,SAAS;EACT,OAAO;EACR,CAAC;CACF,MAAMA,oBAAI;EACR,YAAY;EACZ,QAAQ;EACR,UAAU;EACV,cAAc;EACd,WAAW;EACX,YAAY,YAAY,aAAa;EACrC,WAAW;EACZ,CAAC;CACH,GACD;CAAC;CAAO;CAAa;CAAO;CAAW;CAAS,CACjD;AAEH,uCAAe"}

package/dist/cjs/components/auth/flow/FieldFactory.cjs

@@ -1,8 +1,8 @@
 const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_TextField = require('../../primitives/TextField/TextField.cjs');
 const require_Checkbox = require('../../primitives/Checkbox/Checkbox.cjs');
 const require_DatePicker = require('../../primitives/DatePicker/DatePicker.cjs');
 const require_OtpField = require('../../primitives/OtpField/OtpField.cjs');
-const require_TextField = require('../../primitives/TextField/TextField.cjs');
 const require_PasswordField = require('../../primitives/PasswordField/PasswordField.cjs');
 const require_Select = require('../../primitives/Select/Select.cjs');
 let __thunderid_browser = require("@thunderid/browser");

package/dist/cjs/components/auth/flow/resolveConsentText.cjs

@@ -0,0 +1,25 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+
+//#region src/components/auth/flow/resolveConsentText.ts
+/**
+* Resolves a consent screen string through the given translator, falling back to the SDK's default
+* bundle when there is no translator or it has no entry for the key.
+*
+* @param t - Translator, when the screen has one.
+* @param key - Translation key.
+* @param params - Values to substitute into the text.
+* @returns The resolved text.
+*/
+const resolveConsentText = (t, key, params) => {
+	const translated = t?.(key, params);
+	if (translated && translated !== key) return translated;
+	const fallback = (0, __thunderid_browser.getDefaultI18nBundles)()[__thunderid_browser.TranslationBundleConstants.FALLBACK_LOCALE]?.translations[key];
+	return (0, __thunderid_browser.substituteTranslationParams)(fallback ?? key, params);
+};
+var resolveConsentText_default = resolveConsentText;
+
+//#endregion
+exports.default = resolveConsentText_default;
+//# sourceMappingURL=resolveConsentText.cjs.map

package/dist/cjs/components/auth/flow/resolveConsentText.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveConsentText.cjs","names":["translated: string | undefined","fallback: string | undefined","TranslationBundleConstants"],"sources":["../../../../../src/components/auth/flow/resolveConsentText.ts"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n  getDefaultI18nBundles,\n  I18nBundle,\n  substituteTranslationParams,\n  TranslationBundleConstants,\n} from '@thunderid/browser';\nimport {UseTranslation} from '../../../hooks/useTranslation';\n\n/**\n * Resolves a consent screen string through the given translator, falling back to the SDK's default\n * bundle when there is no translator or it has no entry for the key.\n *\n * @param t - Translator, when the screen has one.\n * @param key - Translation key.\n * @param params - Values to substitute into the text.\n * @returns The resolved text.\n */\nconst resolveConsentText = (\n  t: UseTranslation['t'] | undefined,\n  key: string,\n  params?: Record<string, string | number>,\n): string => {\n  const translated: string | undefined = t?.(key, params);\n  if (translated && translated !== key) {\n    return translated;\n  }\n  const bundle: I18nBundle | undefined = getDefaultI18nBundles()[TranslationBundleConstants.FALLBACK_LOCALE];\n  const fallback: string | undefined = bundle?.translations[key as keyof I18nBundle['translations']];\n\n  return substituteTranslationParams(fallback ?? key, params);\n};\n\nexport default resolveConsentText;\n"],"mappings":";;;;;;;;;;;;;;AAoBA,MAAM,sBACJ,GACA,KACA,WACW;CACX,MAAMA,aAAiC,IAAI,KAAK,OAAO;AACvD,KAAI,cAAc,eAAe,IAC/B,QAAO;CAGT,MAAMC,2DADwD,CAACC,+CAA2B,kBAC7C,aAAa;AAE1D,6DAAmC,YAAY,KAAK,OAAO;;AAG7D,iCAAe"}

package/dist/cjs/components/primitives/KeyValueInput/KeyValueInput.cjs

@@ -1,9 +1,9 @@
 const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
 const require_emotion = require('../../../styles/emotion.cjs');
 const require_useTheme = require('../../../contexts/Theme/useTheme.cjs');
+const require_TextField = require('../TextField/TextField.cjs');
 const require_Plus = require('../Icons/Plus.cjs');
 const require_X = require('../Icons/X.cjs');
-const require_TextField = require('../TextField/TextField.cjs');
 const require_KeyValueInput_styles = require('./KeyValueInput.styles.cjs');
 let __thunderid_browser = require("@thunderid/browser");
 __thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);

package/dist/cjs/components/primitives/MultiInput/MultiInput.cjs

@@ -3,9 +3,9 @@ const require_emotion = require('../../../styles/emotion.cjs');
 const require_useTheme = require('../../../contexts/Theme/useTheme.cjs');
 const require_FormControl = require('../FormControl/FormControl.cjs');
 const require_InputLabel = require('../InputLabel/InputLabel.cjs');
+const require_TextField = require('../TextField/TextField.cjs');
 const require_Checkbox = require('../Checkbox/Checkbox.cjs');
 const require_DatePicker = require('../DatePicker/DatePicker.cjs');
-const require_TextField = require('../TextField/TextField.cjs');
 const require_MultiInput_styles = require('./MultiInput.styles.cjs');
 let __thunderid_browser = require("@thunderid/browser");
 __thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);

package/dist/cjs/components/primitives/PasswordField/PasswordField.cjs

@@ -1,10 +1,10 @@
 const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
 const require_emotion = require('../../../styles/emotion.cjs');
 const require_useTheme = require('../../../contexts/Theme/useTheme.cjs');
+const require_TextField = require('../TextField/TextField.cjs');
 const require_Eye = require('../Icons/Eye.cjs');
 const require_EyeOff = require('../Icons/EyeOff.cjs');
 const require_PasswordField_styles = require('./PasswordField.styles.cjs');
-const require_TextField = require('../TextField/TextField.cjs');
 let __thunderid_browser = require("@thunderid/browser");
 __thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
 let react = require("react");

package/dist/cjs/contexts/Theme/ThemeProvider.cjs

@@ -1,6 +1,7 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_FlowMetaContext = require('../FlowMeta/FlowMetaContext.cjs');
 const require_ThemeContext = require('./ThemeContext.cjs');
+const require_ThemeRootContext = require('./ThemeRootContext.cjs');
 const require_applyThemeToDOM = require('../../utils/applyThemeToDOM.cjs');
 const require_buildThemeConfigFromFlowMeta = require('../../utils/buildThemeConfigFromFlowMeta.cjs');
 const require_normalizeThemeConfig = require('../../utils/normalizeThemeConfig.cjs');
@@ -53,6 +54,11 @@ const ThemeProvider = ({ children, designTheme = void 0, mode, theme: themeOverr
 		return flowMetaTheme?.defaultColorScheme ?? "light";
 	};
 	const [colorScheme, setColorScheme] = (0, react.useState)(getInitialColorScheme);
+	const [seededMode, setSeededMode] = (0, react.useState)(mode);
+	if (mode !== seededMode) {
+		setSeededMode(mode);
+		if (mode !== void 0) setColorScheme(getInitialColorScheme());
+	}
 	(0, react.useEffect)(() => {
 		if (mode === void 0 && flowMetaTheme?.defaultColorScheme) setColorScheme(flowMetaTheme.defaultColorScheme);
 	}, [mode, flowMetaTheme?.defaultColorScheme]);
@@ -103,12 +109,33 @@ const ThemeProvider = ({ children, designTheme = void 0, mode, theme: themeOverr
 	]);
 	const theme = (0, react.useMemo)(() => (0, __thunderid_browser.createTheme)(finalThemeConfig, colorScheme === "dark"), [finalThemeConfig, colorScheme]);
 	const direction = flowMetaTheme?.direction ?? "ltr";
+	const parentRoot = (0, react.useContext)(require_ThemeRootContext.default);
+	const claims = (0, react.useRef)(0);
+	const applied = (0, react.useRef)(null);
+	const applyToRoot = (0, react.useCallback)(() => {
+		if (!applied.current || typeof document === "undefined") return;
+		require_applyThemeToDOM.default(applied.current.theme);
+		document.documentElement.dir = applied.current.direction;
+	}, []);
+	const root = (0, react.useMemo)(() => ({ claim: () => {
+		claims.current += 1;
+		return () => {
+			claims.current -= 1;
+			if (claims.current === 0) applyToRoot();
+		};
+	} }), [applyToRoot]);
+	(0, react.useEffect)(() => parentRoot?.claim(), [parentRoot]);
 	(0, react.useEffect)(() => {
-		require_applyThemeToDOM.default(theme);
-	}, [theme]);
-	(0, react.useEffect)(() => {
-		if (typeof document !== "undefined") document.documentElement.dir = direction;
-	}, [direction]);
+		applied.current = {
+			direction,
+			theme
+		};
+		if (claims.current === 0) applyToRoot();
+	}, [
+		applyToRoot,
+		direction,
+		theme
+	]);
 	const value = {
 		colorScheme,
 		direction,
@@ -117,7 +144,10 @@ const ThemeProvider = ({ children, designTheme = void 0, mode, theme: themeOverr
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ThemeContext.default.Provider, {
 		value,
-		children
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ThemeRootContext.default.Provider, {
+			value: root,
+			children
+		})
 	});
 };
 var ThemeProvider_default = ThemeProvider;

package/dist/cjs/contexts/Theme/ThemeProvider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.cjs","names":["ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>>","themeOverride: RecursivePartial<ThemeConfig> | undefined","normalizeThemeConfig","flowMetaContext: FlowMetaContextValue | null","FlowMetaContext","flowMetaTheme: FlowMetaTheme | null","toggleTheme: () => void","finalThemeConfig: RecursivePartial<ThemeConfig> | undefined","metaConfig: RecursivePartial<ThemeConfig>","buildThemeConfigFromFlowMeta","theme: Theme","direction: 'ltr' | 'rtl'","value: any","ThemeContext"],"sources":["../../../../src/contexts/Theme/ThemeProvider.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n  createClassObserver,\n  createMediaQueryListener,\n  createTheme,\n  detectThemeMode,\n  FlowMetaTheme,\n  RecursivePartial,\n  Theme,\n  ThemeConfig,\n  ThemeMode,\n} from '@thunderid/browser';\nimport {FC, PropsWithChildren, ReactElement, useCallback, useContext, useEffect, useMemo, useState} from 'react';\nimport ThemeContext from './ThemeContext';\nimport applyThemeToDOM from '../../utils/applyThemeToDOM';\nimport buildThemeConfigFromFlowMeta from '../../utils/buildThemeConfigFromFlowMeta';\nimport normalizeThemeConfig from '../../utils/normalizeThemeConfig';\nimport FlowMetaContext, {FlowMetaContextValue} from '../FlowMeta/FlowMetaContext';\n\nexport interface ThemeProviderProps {\n  /**\n   * A Design theme to use instead of the one the server returns in flow meta, for example the theme an\n   * app configuration names. `theme` overrides are still applied on top.\n   */\n  designTheme?: FlowMetaTheme | null;\n  /**\n   * Initial color scheme override. Overrides the server default when provided.\n   */\n  mode?: ThemeMode;\n\n  /**\n   * Optional theme overrides merged on top of the server-side flow meta theme.\n   * User-supplied values take highest precedence.\n   */\n  theme?: RecursivePartial<ThemeConfig>;\n}\n\n/**\n * ThemeProvider is the v2 drop-in replacement for `ThemeProvider`.\n *\n * It reads the design theme from the nearest `FlowMetaContext` (provided by\n * `FlowMetaProvider`) and publishes a resolved `Theme` object through the\n * **same** `ThemeContext` that `useTheme` consumes.  This means all existing\n * components that call `useTheme` continue to work without any changes.\n *\n * The `defaultColorScheme` field returned by the server is used to seed the\n * active color scheme; the user can still toggle it locally via the\n * `toggleTheme` value exposed in the context.\n *\n * @example\n * ```tsx\n * <FlowMetaProvider config={{ baseUrl, type: FlowMetaType.App, id: appId }}>\n *   <ThemeProvider>\n *     <App />   {/* useTheme() works here as usual *\\/}\n *   </ThemeProvider>\n * </FlowMetaProvider>\n * ```\n *\n * @example\n * With user theme overrides (user values win over server values):\n * ```tsx\n * <ThemeProvider theme={{ colors: { primary: { main: '#ff0000' } } }}>\n *   <App />\n * </ThemeProvider>\n * ```\n */\nconst ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>> = ({\n  children,\n  designTheme = undefined,\n  mode,\n  theme: themeOverrideProp,\n}: PropsWithChildren<ThemeProviderProps>): ReactElement => {\n  const themeOverride: RecursivePartial<ThemeConfig> | undefined = normalizeThemeConfig(themeOverrideProp);\n  const flowMetaContext: FlowMetaContextValue | null = useContext(FlowMetaContext);\n\n  const flowMetaTheme: FlowMetaTheme | null = designTheme ?? flowMetaContext?.meta?.design?.theme ?? null;\n  const isLoading: boolean = flowMetaContext?.isLoading ?? false;\n  const error: Error | null = flowMetaContext?.error ?? null;\n\n  // Seed the color scheme: a fixed mode wins outright, 'system'/'class' detect it from the\n  // environment via the same shared utilities Vue's ThemeProvider uses, and no mode falls back\n  // to the server's default (unchanged pre-`mode` behavior).\n  const getInitialColorScheme = (): 'light' | 'dark' => {\n    if (mode === 'light' || mode === 'dark') return mode;\n    if (mode === 'system' || mode === 'class') return detectThemeMode(mode);\n    return flowMetaTheme?.defaultColorScheme ?? 'light';\n  };\n\n  const [colorScheme, setColorScheme] = useState<'light' | 'dark'>(getInitialColorScheme);\n\n  // When mode is unset, sync the color scheme with the server default once flow meta loads.\n  useEffect(() => {\n    if (mode === undefined && flowMetaTheme?.defaultColorScheme) {\n      setColorScheme(flowMetaTheme.defaultColorScheme);\n    }\n  }, [mode, flowMetaTheme?.defaultColorScheme]);\n\n  // Set up automatic detection listeners for 'system'/'class' modes.\n  useEffect(() => {\n    if (mode !== 'system' && mode !== 'class') return undefined;\n\n    const handleThemeChange = (isDark: boolean): void => {\n      setColorScheme(isDark ? 'dark' : 'light');\n    };\n\n    if (mode === 'class') {\n      if (typeof document === 'undefined') return undefined;\n      const observer = createClassObserver(document.documentElement, handleThemeChange);\n      return () => {\n        observer.disconnect();\n      };\n    }\n\n    const mediaQuery = createMediaQueryListener(handleThemeChange);\n    return () => {\n      mediaQuery?.disconnect();\n    };\n  }, [mode]);\n\n  const toggleTheme: () => void = useCallback(() => {\n    setColorScheme((prev: 'light' | 'dark') => (prev === 'light' ? 'dark' : 'light'));\n  }, []);\n\n  // Build the resolved ThemeConfig: flow meta base → user overrides on top.\n  const finalThemeConfig: RecursivePartial<ThemeConfig> | undefined = useMemo(() => {\n    if (!flowMetaTheme) {\n      return themeOverride;\n    }\n\n    const metaConfig: RecursivePartial<ThemeConfig> = buildThemeConfigFromFlowMeta(flowMetaTheme, colorScheme);\n\n    if (!themeOverride) {\n      return metaConfig;\n    }\n\n    return {\n      ...metaConfig,\n      ...themeOverride,\n      borderRadius: {\n        ...metaConfig.borderRadius,\n        ...themeOverride.borderRadius,\n      },\n      colors: {\n        ...metaConfig.colors,\n        ...themeOverride.colors,\n      },\n      ...(metaConfig.typography || themeOverride.typography\n        ? {\n            typography: {\n              ...(metaConfig as any).typography,\n              ...themeOverride.typography,\n            },\n          }\n        : {}),\n    };\n  }, [flowMetaTheme, colorScheme, themeOverride]);\n\n  const theme: Theme = useMemo(\n    () => createTheme(finalThemeConfig, colorScheme === 'dark'),\n    [finalThemeConfig, colorScheme],\n  );\n\n  const direction: 'ltr' | 'rtl' = flowMetaTheme?.direction ?? 'ltr';\n\n  // Apply CSS variables to the document root.\n  useEffect(() => {\n    applyThemeToDOM(theme);\n  }, [theme]);\n\n  // Apply text direction to the document root.\n  useEffect(() => {\n    if (typeof document !== 'undefined') {\n      document.documentElement.dir = direction;\n    }\n  }, [direction]);\n\n  const value: any = {\n    colorScheme,\n    direction,\n    theme,\n    toggleTheme,\n  };\n\n  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;\n};\n\nexport default ThemeProvider;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoEA,MAAMA,iBAA4D,EAChE,UACA,cAAc,QACd,MACA,OAAO,wBACkD;CACzD,MAAMC,gBAA2DC,qCAAqB,kBAAkB;CACxG,MAAMC,wCAA0DC,gCAAgB;CAEhF,MAAMC,gBAAsC,eAAe,iBAAiB,MAAM,QAAQ,SAAS;AACxE,kBAAiB;AAChB,kBAAiB;CAK7C,MAAM,8BAAgD;AACpD,MAAI,SAAS,WAAW,SAAS,OAAQ,QAAO;AAChD,MAAI,SAAS,YAAY,SAAS,QAAS,iDAAuB,KAAK;AACvE,SAAO,eAAe,sBAAsB;;CAG9C,MAAM,CAAC,aAAa,sCAA6C,sBAAsB;AAGvF,4BAAgB;AACd,MAAI,SAAS,UAAa,eAAe,mBACvC,gBAAe,cAAc,mBAAmB;IAEjD,CAAC,MAAM,eAAe,mBAAmB,CAAC;AAG7C,4BAAgB;AACd,MAAI,SAAS,YAAY,SAAS,QAAS,QAAO;EAElD,MAAM,qBAAqB,WAA0B;AACnD,kBAAe,SAAS,SAAS,QAAQ;;AAG3C,MAAI,SAAS,SAAS;AACpB,OAAI,OAAO,aAAa,YAAa,QAAO;GAC5C,MAAM,wDAA+B,SAAS,iBAAiB,kBAAkB;AACjF,gBAAa;AACX,aAAS,YAAY;;;EAIzB,MAAM,+DAAsC,kBAAkB;AAC9D,eAAa;AACX,eAAY,YAAY;;IAEzB,CAAC,KAAK,CAAC;CAEV,MAAMC,2CAA4C;AAChD,kBAAgB,SAA4B,SAAS,UAAU,SAAS,QAAS;IAChF,EAAE,CAAC;CAGN,MAAMC,4CAA4E;AAChF,MAAI,CAAC,cACH,QAAO;EAGT,MAAMC,aAA4CC,6CAA6B,eAAe,YAAY;AAE1G,MAAI,CAAC,cACH,QAAO;AAGT,SAAO;GACL,GAAG;GACH,GAAG;GACH,cAAc;IACZ,GAAG,WAAW;IACd,GAAG,cAAc;IAClB;GACD,QAAQ;IACN,GAAG,WAAW;IACd,GAAG,cAAc;IAClB;GACD,GAAI,WAAW,cAAc,cAAc,aACvC,EACE,YAAY;IACV,GAAI,WAAmB;IACvB,GAAG,cAAc;IAClB,EACF,GACD,EAAE;GACP;IACA;EAAC;EAAe;EAAa;EAAc,CAAC;CAE/C,MAAMC,sEACc,kBAAkB,gBAAgB,OAAO,EAC3D,CAAC,kBAAkB,YAAY,CAChC;CAED,MAAMC,YAA2B,eAAe,aAAa;AAG7D,4BAAgB;AACd,kCAAgB,MAAM;IACrB,CAAC,MAAM,CAAC;AAGX,4BAAgB;AACd,MAAI,OAAO,aAAa,YACtB,UAAS,gBAAgB,MAAM;IAEhC,CAAC,UAAU,CAAC;CAEf,MAAMC,QAAa;EACjB;EACA;EACA;EACA;EACD;AAED,QAAO,2CAACC,6BAAa;EAAgB;EAAQ;GAAiC;;AAGhF,4BAAe"}
+{"version":3,"file":"ThemeProvider.cjs","names":["ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>>","themeOverride: RecursivePartial<ThemeConfig> | undefined","normalizeThemeConfig","flowMetaContext: FlowMetaContextValue | null","FlowMetaContext","flowMetaTheme: FlowMetaTheme | null","toggleTheme: () => void","finalThemeConfig: RecursivePartial<ThemeConfig> | undefined","metaConfig: RecursivePartial<ThemeConfig>","buildThemeConfigFromFlowMeta","theme: Theme","direction: 'ltr' | 'rtl'","parentRoot: ThemeRootContextValue | null","ThemeRootContext","claims: MutableRefObject<number>","applied: MutableRefObject<{direction: 'ltr' | 'rtl'; theme: Theme} | null>","applyToRoot: () => void","root: ThemeRootContextValue","value: any","ThemeContext"],"sources":["../../../../src/contexts/Theme/ThemeProvider.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n  createClassObserver,\n  createMediaQueryListener,\n  createTheme,\n  detectThemeMode,\n  FlowMetaTheme,\n  RecursivePartial,\n  Theme,\n  ThemeConfig,\n  ThemeMode,\n} from '@thunderid/browser';\nimport {\n  FC,\n  MutableRefObject,\n  PropsWithChildren,\n  ReactElement,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport ThemeContext from './ThemeContext';\nimport ThemeRootContext, {ThemeRootContextValue} from './ThemeRootContext';\nimport applyThemeToDOM from '../../utils/applyThemeToDOM';\nimport buildThemeConfigFromFlowMeta from '../../utils/buildThemeConfigFromFlowMeta';\nimport normalizeThemeConfig from '../../utils/normalizeThemeConfig';\nimport FlowMetaContext, {FlowMetaContextValue} from '../FlowMeta/FlowMetaContext';\n\nexport interface ThemeProviderProps {\n  /**\n   * A Design theme to use instead of the one the server returns in flow meta, for example the theme an\n   * app configuration names. `theme` overrides are still applied on top.\n   */\n  designTheme?: FlowMetaTheme | null;\n  /**\n   * Color scheme override. Overrides the server default when provided, and the color scheme follows it\n   * when it changes.\n   */\n  mode?: ThemeMode;\n\n  /**\n   * Optional theme overrides merged on top of the server-side flow meta theme.\n   * User-supplied values take highest precedence.\n   */\n  theme?: RecursivePartial<ThemeConfig>;\n}\n\n/**\n * ThemeProvider is the v2 drop-in replacement for `ThemeProvider`.\n *\n * It reads the design theme from the nearest `FlowMetaContext` (provided by\n * `FlowMetaProvider`) and publishes a resolved `Theme` object through the\n * **same** `ThemeContext` that `useTheme` consumes.  This means all existing\n * components that call `useTheme` continue to work without any changes.\n *\n * The `defaultColorScheme` field returned by the server is used to seed the\n * active color scheme; the user can still toggle it locally via the\n * `toggleTheme` value exposed in the context.\n *\n * @example\n * ```tsx\n * <FlowMetaProvider config={{ baseUrl, type: FlowMetaType.App, id: appId }}>\n *   <ThemeProvider>\n *     <App />   {/* useTheme() works here as usual *\\/}\n *   </ThemeProvider>\n * </FlowMetaProvider>\n * ```\n *\n * @example\n * With user theme overrides (user values win over server values):\n * ```tsx\n * <ThemeProvider theme={{ colors: { primary: { main: '#ff0000' } } }}>\n *   <App />\n * </ThemeProvider>\n * ```\n */\nconst ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>> = ({\n  children,\n  designTheme = undefined,\n  mode,\n  theme: themeOverrideProp,\n}: PropsWithChildren<ThemeProviderProps>): ReactElement => {\n  const themeOverride: RecursivePartial<ThemeConfig> | undefined = normalizeThemeConfig(themeOverrideProp);\n  const flowMetaContext: FlowMetaContextValue | null = useContext(FlowMetaContext);\n\n  const flowMetaTheme: FlowMetaTheme | null = designTheme ?? flowMetaContext?.meta?.design?.theme ?? null;\n  const isLoading: boolean = flowMetaContext?.isLoading ?? false;\n  const error: Error | null = flowMetaContext?.error ?? null;\n\n  // Seed the color scheme: a fixed mode wins outright, 'system'/'class' detect it from the\n  // environment via the same shared utilities Vue's ThemeProvider uses, and no mode falls back\n  // to the server's default (unchanged pre-`mode` behavior).\n  const getInitialColorScheme = (): 'light' | 'dark' => {\n    if (mode === 'light' || mode === 'dark') return mode;\n    if (mode === 'system' || mode === 'class') return detectThemeMode(mode);\n    return flowMetaTheme?.defaultColorScheme ?? 'light';\n  };\n\n  const [colorScheme, setColorScheme] = useState<'light' | 'dark'>(getInitialColorScheme);\n\n  // Follow a change of mode after mount, such as a host app's own color scheme toggle.\n  const [seededMode, setSeededMode] = useState<ThemeMode | undefined>(mode);\n\n  if (mode !== seededMode) {\n    setSeededMode(mode);\n    if (mode !== undefined) {\n      setColorScheme(getInitialColorScheme());\n    }\n  }\n\n  // When mode is unset, sync the color scheme with the server default once flow meta loads.\n  useEffect(() => {\n    if (mode === undefined && flowMetaTheme?.defaultColorScheme) {\n      setColorScheme(flowMetaTheme.defaultColorScheme);\n    }\n  }, [mode, flowMetaTheme?.defaultColorScheme]);\n\n  // Set up automatic detection listeners for 'system'/'class' modes.\n  useEffect(() => {\n    if (mode !== 'system' && mode !== 'class') return undefined;\n\n    const handleThemeChange = (isDark: boolean): void => {\n      setColorScheme(isDark ? 'dark' : 'light');\n    };\n\n    if (mode === 'class') {\n      if (typeof document === 'undefined') return undefined;\n      const observer = createClassObserver(document.documentElement, handleThemeChange);\n      return () => {\n        observer.disconnect();\n      };\n    }\n\n    const mediaQuery = createMediaQueryListener(handleThemeChange);\n    return () => {\n      mediaQuery?.disconnect();\n    };\n  }, [mode]);\n\n  const toggleTheme: () => void = useCallback(() => {\n    setColorScheme((prev: 'light' | 'dark') => (prev === 'light' ? 'dark' : 'light'));\n  }, []);\n\n  // Build the resolved ThemeConfig: flow meta base → user overrides on top.\n  const finalThemeConfig: RecursivePartial<ThemeConfig> | undefined = useMemo(() => {\n    if (!flowMetaTheme) {\n      return themeOverride;\n    }\n\n    const metaConfig: RecursivePartial<ThemeConfig> = buildThemeConfigFromFlowMeta(flowMetaTheme, colorScheme);\n\n    if (!themeOverride) {\n      return metaConfig;\n    }\n\n    return {\n      ...metaConfig,\n      ...themeOverride,\n      borderRadius: {\n        ...metaConfig.borderRadius,\n        ...themeOverride.borderRadius,\n      },\n      colors: {\n        ...metaConfig.colors,\n        ...themeOverride.colors,\n      },\n      ...(metaConfig.typography || themeOverride.typography\n        ? {\n            typography: {\n              ...(metaConfig as any).typography,\n              ...themeOverride.typography,\n            },\n          }\n        : {}),\n    };\n  }, [flowMetaTheme, colorScheme, themeOverride]);\n\n  const theme: Theme = useMemo(\n    () => createTheme(finalThemeConfig, colorScheme === 'dark'),\n    [finalThemeConfig, colorScheme],\n  );\n\n  const direction: 'ltr' | 'rtl' = flowMetaTheme?.direction ?? 'ltr';\n\n  // The innermost ThemeProvider owns the document root: an outer one stops writing its CSS variables\n  // and text direction while a nested one is mounted, and writes them again once it unmounts.\n  const parentRoot: ThemeRootContextValue | null = useContext(ThemeRootContext);\n  const claims: MutableRefObject<number> = useRef<number>(0);\n  const applied: MutableRefObject<{direction: 'ltr' | 'rtl'; theme: Theme} | null> = useRef(null);\n\n  const applyToRoot: () => void = useCallback(() => {\n    if (!applied.current || typeof document === 'undefined') return;\n    applyThemeToDOM(applied.current.theme);\n    document.documentElement.dir = applied.current.direction;\n  }, []);\n\n  const root: ThemeRootContextValue = useMemo(\n    () => ({\n      claim: (): (() => void) => {\n        claims.current += 1;\n        return (): void => {\n          claims.current -= 1;\n          if (claims.current === 0) applyToRoot();\n        };\n      },\n    }),\n    [applyToRoot],\n  );\n\n  useEffect(() => parentRoot?.claim(), [parentRoot]);\n\n  useEffect(() => {\n    applied.current = {direction, theme};\n    if (claims.current === 0) applyToRoot();\n  }, [applyToRoot, direction, theme]);\n\n  const value: any = {\n    colorScheme,\n    direction,\n    theme,\n    toggleTheme,\n  };\n\n  return (\n    <ThemeContext.Provider value={value}>\n      <ThemeRootContext.Provider value={root}>{children}</ThemeRootContext.Provider>\n    </ThemeContext.Provider>\n  );\n};\n\nexport default ThemeProvider;\n"],"mappings":"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"}

package/dist/cjs/contexts/Theme/ThemeRootContext.cjs

@@ -0,0 +1,12 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+
+//#region src/contexts/Theme/ThemeRootContext.ts
+const ThemeRootContext = (0, react.createContext)(null);
+ThemeRootContext.displayName = "ThemeRootContext";
+var ThemeRootContext_default = ThemeRootContext;
+
+//#endregion
+exports.default = ThemeRootContext_default;
+//# sourceMappingURL=ThemeRootContext.cjs.map

package/dist/cjs/contexts/Theme/ThemeRootContext.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeRootContext.cjs","names":["ThemeRootContext: Context<ThemeRootContextValue | null>"],"sources":["../../../../src/contexts/Theme/ThemeRootContext.ts"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Context, createContext} from 'react';\n\nexport interface ThemeRootContextValue {\n  /**\n   * Hands the document root to a nested `ThemeProvider` until the returned release is called, so the\n   * innermost provider's CSS variables and text direction are the ones on the page.\n   */\n  claim: () => () => void;\n}\n\nconst ThemeRootContext: Context<ThemeRootContextValue | null> = createContext<ThemeRootContextValue | null>(null);\n\nThemeRootContext.displayName = 'ThemeRootContext';\n\nexport default ThemeRootContext;\n"],"mappings":";;;;;AAaA,MAAMA,4CAAsG,KAAK;AAEjH,iBAAiB,cAAc;AAE/B,+BAAe"}