@kbach/react-native 1.0.0-beta.24 → 1.0.0-beta.26

package/dist/{chunk-OS7EPBH5.mjs → chunk-GHQ7DWLO.mjs}

@@ -1,6 +1,6 @@
 import {
   resolveClassName
-} from "./chunk-AG7ZQ2K4.mjs";
+} from "./chunk-BEXNFWW6.mjs";
 
 // src/jsxRuntimeCoreWeb.ts
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/dist/{chunk-TS2EEVOE.mjs → chunk-LWD6JATB.mjs}

@@ -1,6 +1,6 @@
 import {
   getTheme
-} from "./chunk-AG7ZQ2K4.mjs";
+} from "./chunk-BEXNFWW6.mjs";
 
 // src/darkModeStore.ts
 import { Appearance } from "react-native";
@@ -35,6 +35,9 @@ var subscription = Appearance.addChangeListener(({ colorScheme }) => {
 function notify() {
   for (const listener of listeners) listener();
 }
+function resyncDomWithActiveTheme() {
+  applyToDom(isDark);
+}
 function getGlobalDarkMode() {
   return isDark;
 }
@@ -94,6 +97,7 @@ function subscribeDynamicTokens(listener) {
 }
 
 export {
+  resyncDomWithActiveTheme,
   getGlobalDarkMode,
   getGlobalThemeMode,
   setGlobalThemeMode,

package/dist/darkModeStore.d.ts

@@ -34,6 +34,21 @@
  *    browser DOM where it's needed.
  */
 type ThemeMode = 'light' | 'dark' | 'system';
+/**
+ * Re-applies the CURRENT `isDark` value to the DOM (Expo Web only — a
+ * genuine no-op on real native, same as `applyToDom` itself) under whatever
+ * `getTheme().darkMode` strategy is active right now, with no change to
+ * `mode`/`isDark` themselves, so it deliberately does NOT `notify()`.
+ * Mirrors @kbach/react's identical `resyncDomWithActiveTheme` — see that
+ * one's own doc comment for the full race it fixes: this module's initial
+ * `applyToDom(isDark)` call (above) runs at IMPORT time against whichever
+ * `darkMode` strategy `defaultTheme` had at that moment, which on Expo Web
+ * is BEFORE an app's own `applyKbachConfig({darkMode: 'attribute'})` call
+ * (in config.ts) has had a chance to switch it — without this, that config
+ * call would silently never get its `dark:` classes to apply on initial
+ * load, even though `useTheme().isDark` already reads correctly.
+ */
+declare function resyncDomWithActiveTheme(): void;
 declare function getGlobalDarkMode(): boolean;
 declare function getGlobalThemeMode(): ThemeMode;
 /** Explicit user choice — takes priority over any later `<ThemeProvider defaultMode>` seed (see `seedDefaultMode` below). Not persisted; see this module's own doc comment. */
@@ -55,4 +70,4 @@ declare function _resetForTests(): void;
 /** Exported for tests only — removes the Appearance change subscription so a test's mock doesn't leak into the next one. */
 declare function _unsubscribeForTests(): void;
 
-export { type ThemeMode, _resetForTests, _unsubscribeForTests, getGlobalDarkMode, getGlobalThemeMode, seedDefaultMode, setGlobalThemeMode, subscribeGlobalDarkMode, toggleGlobalDarkMode };
+export { type ThemeMode, _resetForTests, _unsubscribeForTests, getGlobalDarkMode, getGlobalThemeMode, resyncDomWithActiveTheme, seedDefaultMode, setGlobalThemeMode, subscribeGlobalDarkMode, toggleGlobalDarkMode };

package/dist/darkModeStore.js

@@ -24,6 +24,7 @@ __export(darkModeStore_exports, {
   _unsubscribeForTests: () => _unsubscribeForTests,
   getGlobalDarkMode: () => getGlobalDarkMode,
   getGlobalThemeMode: () => getGlobalThemeMode,
+  resyncDomWithActiveTheme: () => resyncDomWithActiveTheme,
   seedDefaultMode: () => seedDefaultMode,
   setGlobalThemeMode: () => setGlobalThemeMode,
   subscribeGlobalDarkMode: () => subscribeGlobalDarkMode,
@@ -63,6 +64,9 @@ var subscription = import_react_native.Appearance.addChangeListener(({ colorSche
 function notify() {
   for (const listener of listeners) listener();
 }
+function resyncDomWithActiveTheme() {
+  applyToDom(isDark);
+}
 function getGlobalDarkMode() {
   return isDark;
 }
@@ -105,6 +109,7 @@ function _unsubscribeForTests() {
   _unsubscribeForTests,
   getGlobalDarkMode,
   getGlobalThemeMode,
+  resyncDomWithActiveTheme,
   seedDefaultMode,
   setGlobalThemeMode,
   subscribeGlobalDarkMode,

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { ColorEntry, ContainerConfig, ThemeConfig, defaultTheme, getTheme, setTheme } from './theme';
-export { C as ColorScale, a as ColorsAPI, K as KbachConfig, T as ThemeProvider, b as ThemeProviderProps, c as ThemeState, d as ThemeStorageAdapter, e as applyKbachConfig, r as resolveKbachConfig, u as useColors, f as useDynamicToken, g as useTheme } from './useDynamicToken-DAHQob1u.js';
+export { C as ColorScale, a as ColorsAPI, K as KbachConfig, T as ThemeProvider, b as ThemeProviderProps, c as ThemeState, d as ThemeStorageAdapter, e as applyKbachConfig, r as resolveKbachConfig, u as useColors, f as useDynamicToken, g as useTheme } from './useDynamicToken-C8T9r6Cl.js';
 export { ThemeMode, getGlobalDarkMode, getGlobalThemeMode, setGlobalThemeMode, subscribeGlobalDarkMode, toggleGlobalDarkMode } from './darkModeStore';
 export { deleteDynamicToken, getDynamicToken, setDynamicToken, subscribeDynamicTokens } from './dynamicTokens';
 import 'react';
@@ -11,89 +11,6 @@ type StyleValue = string | number | {
 interface StyleObject {
     [key: string]: StyleValue;
 }
-/**
- * Calls the Rust engine via the KbachModule TurboModule (see
- * apps/native-sandbox/android/.../KbachModule.kt and
- * packages/core-engine/src/resolve_style.rs) and returns a plain style
- * object ready for RN's `style` prop. Synchronous — no async init step,
- * unlike the web/WASM path, since JSI-backed TurboModule methods are
- * available as soon as the module is loaded.
- *
- * Reads `getGlobalDarkMode()` (darkModeStore.ts) fresh on every call (no
- * caching) so `dark:` resolves correctly whenever this runs. That store —
- * not a direct `Appearance.getColorScheme()` read, which this function
- * used prior to `<ThemeProvider>` support — is what makes an explicit
- * `setGlobalThemeMode('dark')`/`toggle()` override actually affect
- * rendering; the store itself falls back to tracking `Appearance` live
- * whenever the mode is `'system'` (its own default), so nothing regresses
- * for apps that never touch the override API at all. This function itself
- * has no subscription of its own, so nothing re-renders just because the
- * store's value changed — call `useTheme()` (its `isDark`) somewhere in
- * the tree for that, NOT React Native's own `useColorScheme()`, which only
- * reflects the raw OS setting and would miss an explicit override entirely.
- *
- * Phase 11 originally shipped with live in-place theme switching unverified
- * (a `uiMode` toggle triggered a re-render but `Appearance.getColorScheme()`
- * kept returning a stale value). Root-caused in Phase 12 while debugging an
- * unrelated `active:` failure: `apps/native-sandbox` has its own separate
- * `node_modules/react-native` (excluded from the npm workspace since Phase
- * 5), while `packages/react-native` resolved `react-native` hierarchically
- * up to a *different* copy at the repo root — two physical module
- * instances, so a `useColorScheme()` subscription and an
- * `Appearance.getColorScheme()` read were silently talking to two separate
- * copies of the Appearance module. Fixed by forcing a single instance via
- * `resolver.resolveRequest` in apps/native-sandbox/metro.config.js; live
- * theme switching (and `active:`, the bug that surfaced this) both verified
- * working after the fix — see Phase 12. Still relevant here: darkModeStore.ts
- * itself calls `Appearance.addChangeListener`, so the same dual-instance
- * failure mode would silently break the 'system' fallback path too if that
- * metro.config.js fix ever regressed.
- *
- * `pressed` gates the `active:` modifier — unlike `colorScheme`, there's no
- * system-level getter for "is this element currently pressed"; only RN's
- * `Pressable` ever knows this, so it's passed in directly by the caller
- * (jsx-runtime, from Pressable's own style-function callback) rather than
- * queried here. Defaults to `false` for every other element type.
- *
- * `width` gates `sm:`/`md:`/`lg:`/`xl:`/`2xl:` against the active theme's
- * `screens` scale (resolve_style.rs's `native_modifier_state`) — read fresh
- * from `Dimensions.get('window').width` on every call, the same "no
- * caching, no store" choice `colorScheme`/`pressed` already make, and for
- * the same reason: unlike dark mode there's no explicit-override concept to
- * preserve here (nobody manually overrides their screen width), so a plain
- * synchronous read is enough — no need for the subscribable store
- * darkModeStore.ts is for. As with `colorScheme`, this function has no
- * subscription of its own, so rotating/resizing the window doesn't
- * re-render anything by itself — call RN's own `useWindowDimensions()`
- * somewhere in the tree for that (same role `useColorScheme()` plays for
- * `dark:` in apps/native-sandbox/App.tsx).
- *
- * Falls back to `./jsEngine` (a pure-JS, no-WASM/no-native reimplementation
- * of this same resolution logic — see that directory's own doc comments)
- * when `KbachModule` isn't registered at all — Expo Go, which can never
- * load ANY custom native module (not even Expo's own Modules API), so the
- * TurboModule this file otherwise depends on simply doesn't exist there.
- * `TurboModuleRegistry.get` (not `.getEnforcing`, which throws) is what
- * makes this detectable at all — `get` returns `null`/`undefined` instead.
- * A real dev-client/CLI build always has the module registered, so this
- * fallback only ever activates in Expo Go itself; everywhere else behaves
- * exactly as before. The JS engine covers a strict subset of what the
- * native/WASM engines resolve (see jsEngine/resolveUtilityNative.ts) — an
- * intentional, documented parity gap, not a bug.
- *
- * An arbitrary value that couldn't be resolved to something RN's style
- * system can actually use (an unreduced percentage/viewport-relative
- * `calc()`, a raw `var(...)`, ...) is dropped from the returned style —
- * never passed through as an invalid string — and surfaced via
- * `console.warn` here (dev builds only, mirroring RN's own convention for
- * this kind of non-fatal correctness warning) rather than failing
- * silently. The native/JNI path embeds these under a `"__kbachWarnings"`
- * key in the same JSON `resolve_style_json` already returns (see that
- * function's own doc comment for why — reusing the one JSON round-trip
- * rather than adding a second FFI call); the jsEngine fallback returns
- * them directly via `resolveStyleJsWithWarnings`. Both paths converge here
- * so call sites never need to know which engine actually resolved anything.
- */
 declare function resolveStyle(classString: string, pressed?: boolean): StyleObject;
 
 export { type StyleObject, resolveStyle };

package/dist/index.js

@@ -25,17 +25,17 @@ __export(src_exports, {
   defaultTheme: () => import_theme4.defaultTheme,
   deleteDynamicToken: () => import_dynamicTokens2.deleteDynamicToken,
   getDynamicToken: () => import_dynamicTokens2.getDynamicToken,
-  getGlobalDarkMode: () => import_darkModeStore4.getGlobalDarkMode,
-  getGlobalThemeMode: () => import_darkModeStore4.getGlobalThemeMode,
+  getGlobalDarkMode: () => import_darkModeStore5.getGlobalDarkMode,
+  getGlobalThemeMode: () => import_darkModeStore5.getGlobalThemeMode,
   getTheme: () => import_theme4.getTheme,
   resolveKbachConfig: () => resolveKbachConfig,
   resolveStyle: () => resolveStyle,
   setDynamicToken: () => import_dynamicTokens2.setDynamicToken,
-  setGlobalThemeMode: () => import_darkModeStore4.setGlobalThemeMode,
+  setGlobalThemeMode: () => import_darkModeStore5.setGlobalThemeMode,
   setTheme: () => import_theme4.setTheme,
   subscribeDynamicTokens: () => import_dynamicTokens2.subscribeDynamicTokens,
-  subscribeGlobalDarkMode: () => import_darkModeStore4.subscribeGlobalDarkMode,
-  toggleGlobalDarkMode: () => import_darkModeStore4.toggleGlobalDarkMode,
+  subscribeGlobalDarkMode: () => import_darkModeStore5.subscribeGlobalDarkMode,
+  toggleGlobalDarkMode: () => import_darkModeStore5.toggleGlobalDarkMode,
   useColors: () => useColors,
   useDynamicToken: () => useDynamicToken,
   useTheme: () => useTheme
@@ -341,6 +341,27 @@ function resolveNegatableLength(theme, parsed) {
   if (px === 0) return "0px";
   return `-${px}px`;
 }
+function fractionPercent(value) {
+  const slashIdx = value.indexOf("/");
+  if (slashIdx === -1) return null;
+  const numStr = value.slice(0, slashIdx);
+  const denStr = value.slice(slashIdx + 1);
+  const num = Number(numStr);
+  const den = Number(denStr);
+  if (!Number.isFinite(num) || !Number.isFinite(den) || numStr.trim() === "" || denStr.trim() === "") return null;
+  if (den === 0) return null;
+  const pct = num / den * 100;
+  const formatted = pct.toFixed(6);
+  const trimmed = formatted.replace(/0+$/, "").replace(/\.$/, "");
+  return `${trimmed}%`;
+}
+function resolveNegatableSize(theme, parsed) {
+  if (!parsed.isArbitrary && parsed.value !== null) {
+    const pct = fractionPercent(parsed.value);
+    if (pct !== null) return parsed.negative ? `-${pct}` : pct;
+  }
+  return resolveNegatableLength(theme, parsed);
+}
 function resolvePercent(parsed) {
   if (parsed.negative) return null;
   const value = parsed.value;
@@ -494,43 +515,44 @@ function resolve(parsed, theme) {
     case "shrink":
       return [decl("flex-shrink", parsed.value ?? "1")];
     // top/right/bottom/left/inset support real Tailwind's negative-value
-    // convention ("-top-4") — see resolveNegatableLength's own doc comment.
+    // convention ("-top-4") AND its percentage-fraction scale ("top-1/2",
+    // "-inset-1/3") — see resolveNegatableSize's own doc comment.
     case "top": {
-      const v = resolveNegatableLength(theme, parsed);
+      const v = resolveNegatableSize(theme, parsed);
       return v === null ? null : [decl("top", v)];
     }
     case "right": {
-      const v = resolveNegatableLength(theme, parsed);
+      const v = resolveNegatableSize(theme, parsed);
       return v === null ? null : [decl("right", v)];
     }
     case "bottom": {
-      const v = resolveNegatableLength(theme, parsed);
+      const v = resolveNegatableSize(theme, parsed);
       return v === null ? null : [decl("bottom", v)];
     }
     case "left": {
-      const v = resolveNegatableLength(theme, parsed);
+      const v = resolveNegatableSize(theme, parsed);
       return v === null ? null : [decl("left", v)];
     }
     case "inset": {
-      const v = resolveNegatableLength(theme, parsed);
+      const v = resolveNegatableSize(theme, parsed);
       return v === null ? null : [decl("inset", v)];
     }
     case "inset-x": {
-      const v = resolveNegatableLength(theme, parsed);
+      const v = resolveNegatableSize(theme, parsed);
       return v === null ? null : [decl("left", v), decl("right", v)];
     }
     case "inset-y": {
-      const v = resolveNegatableLength(theme, parsed);
+      const v = resolveNegatableSize(theme, parsed);
       return v === null ? null : [decl("top", v), decl("bottom", v)];
     }
     // Logical inset — just a different CSS property name, same reasoning
     // as Rust's layout.rs (no direction-tracking logic needed here).
     case "start": {
-      const v = resolveNegatableLength(theme, parsed);
+      const v = resolveNegatableSize(theme, parsed);
       return v === null ? null : [decl("inset-inline-start", v)];
     }
     case "end": {
-      const v = resolveNegatableLength(theme, parsed);
+      const v = resolveNegatableSize(theme, parsed);
       return v === null ? null : [decl("inset-inline-end", v)];
     }
     // "aspect-" is a registered VALUE_PREFIXES entry (parser.ts), so
@@ -628,20 +650,6 @@ function namedSize(key) {
       return null;
   }
 }
-function fractionPercent(value) {
-  const slashIdx = value.indexOf("/");
-  if (slashIdx === -1) return null;
-  const numStr = value.slice(0, slashIdx);
-  const denStr = value.slice(slashIdx + 1);
-  const num = Number(numStr);
-  const den = Number(denStr);
-  if (!Number.isFinite(num) || !Number.isFinite(den) || numStr.trim() === "" || denStr.trim() === "") return null;
-  if (den === 0) return null;
-  const pct = num / den * 100;
-  const formatted = pct.toFixed(6);
-  const trimmed = formatted.replace(/0+$/, "").replace(/\.$/, "");
-  return `${trimmed}%`;
-}
 function cssSizeKeyword(key) {
   switch (key) {
     case "min":
@@ -1689,16 +1697,33 @@ function resolveStyleJsWithWarnings(classString, theme, colorScheme, pressed, wi
 }
 
 // src/nativeBridge.ts
+var RESOLVE_STYLE_CACHE_MAX = 500;
+var resolveStyleCache = /* @__PURE__ */ new Map();
+var cachedForThemeJson = null;
 function resolveStyle(classString, pressed = false) {
   const colorScheme = (0, import_darkModeStore.getGlobalDarkMode)() ? "dark" : "light";
   const width = import_react_native.Dimensions.get("window").width;
+  const themeJson = (0, import_theme.getThemeJson)();
+  if (themeJson !== cachedForThemeJson) {
+    resolveStyleCache.clear();
+    cachedForThemeJson = themeJson;
+  }
+  const cacheKey = `${classString}\0${pressed}\0${colorScheme}\0${width}`;
+  const cached = resolveStyleCache.get(cacheKey);
+  if (cached !== void 0) return { ...cached };
+  const style = resolveStyleUncached(classString, pressed, colorScheme, width, themeJson);
+  if (resolveStyleCache.size >= RESOLVE_STYLE_CACHE_MAX) resolveStyleCache.clear();
+  resolveStyleCache.set(cacheKey, style);
+  return { ...style };
+}
+function resolveStyleUncached(classString, pressed, colorScheme, width, themeJson) {
   const KbachModule = import_react_native.TurboModuleRegistry.get("KbachModule");
   if (!KbachModule) {
     const { style: style2, warnings: warnings2 } = resolveStyleJsWithWarnings(classString, (0, import_theme.getTheme)(), colorScheme, pressed, width);
     warnIfDev(classString, warnings2);
     return style2;
   }
-  const json = KbachModule.resolveStyle(classString, (0, import_theme.getThemeJson)(), colorScheme, pressed, width);
+  const json = KbachModule.resolveStyle(classString, themeJson, colorScheme, pressed, width);
   const style = JSON.parse(json);
   const warnings = style.__kbachWarnings;
   if (warnings !== void 0) {
@@ -1721,6 +1746,7 @@ function warnIfDev(classString, warnings) {
 
 // src/config.ts
 var import_theme2 = require("./theme");
+var import_darkModeStore2 = require("./darkModeStore");
 function parseHexRgb(hex) {
   const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
   if (!m) return null;
@@ -1780,24 +1806,25 @@ function resolveKbachConfig(config) {
 function applyKbachConfig(config) {
   const theme = resolveKbachConfig(config);
   (0, import_theme2.setTheme)(theme);
+  (0, import_darkModeStore2.resyncDomWithActiveTheme)();
   return theme;
 }
 
 // src/useTheme.ts
 var import_react = require("react");
-var import_darkModeStore2 = require("./darkModeStore");
+var import_darkModeStore3 = require("./darkModeStore");
 function useTheme() {
-  const isDark = (0, import_react.useSyncExternalStore)(import_darkModeStore2.subscribeGlobalDarkMode, import_darkModeStore2.getGlobalDarkMode);
-  const mode = (0, import_react.useSyncExternalStore)(import_darkModeStore2.subscribeGlobalDarkMode, import_darkModeStore2.getGlobalThemeMode);
+  const isDark = (0, import_react.useSyncExternalStore)(import_darkModeStore3.subscribeGlobalDarkMode, import_darkModeStore3.getGlobalDarkMode);
+  const mode = (0, import_react.useSyncExternalStore)(import_darkModeStore3.subscribeGlobalDarkMode, import_darkModeStore3.getGlobalThemeMode);
   return (0, import_react.useMemo)(
-    () => ({ mode, isDark, setMode: import_darkModeStore2.setGlobalThemeMode, toggle: import_darkModeStore2.toggleGlobalDarkMode }),
+    () => ({ mode, isDark, setMode: import_darkModeStore3.setGlobalThemeMode, toggle: import_darkModeStore3.toggleGlobalDarkMode }),
     [mode, isDark]
   );
 }
 
 // src/ThemeProvider.tsx
 var import_react2 = require("react");
-var import_darkModeStore3 = require("./darkModeStore");
+var import_darkModeStore4 = require("./darkModeStore");
 var import_jsx_runtime = require("react/jsx-runtime");
 var PERSIST_STORAGE_KEY = "kbach-theme";
 function isThemeMode(value) {
@@ -1823,16 +1850,16 @@ function ThemeProvider({ children, defaultMode = "system", persist = false }) {
     if (seeded.current) return;
     seeded.current = true;
     if (!persist) {
-      (0, import_darkModeStore3.seedDefaultMode)(defaultMode);
+      (0, import_darkModeStore4.seedDefaultMode)(defaultMode);
       return;
     }
     let cancelled = false;
     persist.getItem(PERSIST_STORAGE_KEY).then((stored) => {
       if (cancelled) return;
-      if (isThemeMode(stored)) (0, import_darkModeStore3.seedDefaultMode)(stored);
-      else (0, import_darkModeStore3.seedDefaultMode)(defaultMode);
+      if (isThemeMode(stored)) (0, import_darkModeStore4.seedDefaultMode)(stored);
+      else (0, import_darkModeStore4.seedDefaultMode)(defaultMode);
     }).catch(() => {
-      if (!cancelled) (0, import_darkModeStore3.seedDefaultMode)(defaultMode);
+      if (!cancelled) (0, import_darkModeStore4.seedDefaultMode)(defaultMode);
     });
     return () => {
       cancelled = true;
@@ -1840,8 +1867,8 @@ function ThemeProvider({ children, defaultMode = "system", persist = false }) {
   }, []);
   (0, import_react2.useEffect)(() => {
     if (!persist) return;
-    return (0, import_darkModeStore3.subscribeGlobalDarkMode)(() => {
-      persist.setItem(PERSIST_STORAGE_KEY, (0, import_darkModeStore3.getGlobalThemeMode)()).catch(() => {
+    return (0, import_darkModeStore4.subscribeGlobalDarkMode)(() => {
+      persist.setItem(PERSIST_STORAGE_KEY, (0, import_darkModeStore4.getGlobalThemeMode)()).catch(() => {
       });
     });
   }, [persist]);
@@ -1849,9 +1876,10 @@ function ThemeProvider({ children, defaultMode = "system", persist = false }) {
 }
 
 // src/index.ts
-var import_darkModeStore4 = require("./darkModeStore");
+var import_darkModeStore5 = require("./darkModeStore");
 
 // src/useColors.ts
+var import_react3 = require("react");
 var import_theme3 = require("./theme");
 function parseHexRgb2(hex) {
   const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
@@ -1913,17 +1941,18 @@ function makeColorsProxy(theme, isDark) {
 }
 function useColors() {
   const { isDark } = useTheme();
-  return makeColorsProxy((0, import_theme3.getTheme)(), isDark);
+  const theme = (0, import_theme3.getTheme)();
+  return (0, import_react3.useMemo)(() => makeColorsProxy(theme, isDark), [theme, isDark]);
 }
 
 // src/index.ts
 var import_dynamicTokens2 = require("./dynamicTokens");
 
 // src/useDynamicToken.ts
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_dynamicTokens = require("./dynamicTokens");
 function useDynamicToken(name) {
-  return (0, import_react3.useSyncExternalStore)(import_dynamicTokens.subscribeDynamicTokens, () => (0, import_dynamicTokens.getDynamicToken)(name));
+  return (0, import_react4.useSyncExternalStore)(import_dynamicTokens.subscribeDynamicTokens, () => (0, import_dynamicTokens.getDynamicToken)(name));
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.web.d.ts

@@ -1,5 +1,5 @@
 export { ColorEntry, ContainerConfig, ThemeConfig, defaultTheme, getTheme, setTheme } from './theme';
-export { C as ColorScale, a as ColorsAPI, K as KbachConfig, T as ThemeProvider, b as ThemeProviderProps, c as ThemeState, e as applyKbachConfig, r as resolveKbachConfig, u as useColors, f as useDynamicToken, g as useTheme } from './useDynamicToken-DAHQob1u.js';
+export { C as ColorScale, a as ColorsAPI, K as KbachConfig, T as ThemeProvider, b as ThemeProviderProps, c as ThemeState, e as applyKbachConfig, r as resolveKbachConfig, u as useColors, f as useDynamicToken, g as useTheme } from './useDynamicToken-C8T9r6Cl.js';
 export { ThemeMode, getGlobalDarkMode, getGlobalThemeMode, setGlobalThemeMode, subscribeGlobalDarkMode, toggleGlobalDarkMode } from './darkModeStore';
 export { deleteDynamicToken, getDynamicToken, setDynamicToken, subscribeDynamicTokens } from './dynamicTokens';
 import 'react';