@kbach/react 0.6.23 → 0.6.25

package/dist/{chunk-YUX2JPTM.mjs → chunk-RUI5EQDF.mjs}

@@ -24,7 +24,7 @@ import {
   transformToWebProps,
   useConditionalGlobalDarkMode,
   useConditionalWidth
-} from "./chunk-GJSZUC6Q.mjs";
+} from "./chunk-XISB5W3A.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/dist/{chunk-GJSZUC6Q.mjs → chunk-XISB5W3A.mjs}

@@ -2686,7 +2686,7 @@ var RESPONSIVE_KEY = "__kbach_responsive__";
 function getStore() {
   const g = globalThis;
   if (!g[RESPONSIVE_KEY]) {
-    g[RESPONSIVE_KEY] = { width: 0, screens: {}, listeners: /* @__PURE__ */ new Set() };
+    g[RESPONSIVE_KEY] = { width: 0, notifiedWidth: 0, screens: {}, listeners: /* @__PURE__ */ new Set() };
   }
   return g[RESPONSIVE_KEY];
 }
@@ -2701,8 +2701,9 @@ function getGlobalScreens() {
 }
 function setGlobalWidth(width) {
   const store = getStore();
-  if (store.width === width) return;
   store.width = width;
+  if (store.notifiedWidth === width) return;
+  store.notifiedWidth = width;
   for (const l of store.listeners) l();
 }
 function getGlobalWidth() {
@@ -3273,7 +3274,7 @@ var KEY = "__kbach_dark_store__";
 function getStore2() {
   const g = globalThis;
   if (!g[KEY]) {
-    g[KEY] = { isDark: false, subscribers: /* @__PURE__ */ new Set() };
+    g[KEY] = { isDark: false, notifiedIsDark: false, subscribers: /* @__PURE__ */ new Set() };
   }
   return g[KEY];
 }
@@ -3282,8 +3283,9 @@ function syncGlobalDarkMode(isDark) {
 }
 function setGlobalDarkMode(isDark) {
   const store = getStore2();
-  if (store.isDark === isDark) return;
   store.isDark = isDark;
+  if (store.notifiedIsDark === isDark) return;
+  store.notifiedIsDark = isDark;
   for (const sub of store.subscribers) sub();
 }
 function getGlobalDarkMode() {

package/dist/index.js

@@ -2765,7 +2765,7 @@ var RESPONSIVE_KEY = "__kbach_responsive__";
 function getStore() {
   const g = globalThis;
   if (!g[RESPONSIVE_KEY]) {
-    g[RESPONSIVE_KEY] = { width: 0, screens: {}, listeners: /* @__PURE__ */ new Set() };
+    g[RESPONSIVE_KEY] = { width: 0, notifiedWidth: 0, screens: {}, listeners: /* @__PURE__ */ new Set() };
   }
   return g[RESPONSIVE_KEY];
 }
@@ -2780,8 +2780,9 @@ function getGlobalScreens() {
 }
 function setGlobalWidth(width) {
   const store = getStore();
-  if (store.width === width) return;
   store.width = width;
+  if (store.notifiedWidth === width) return;
+  store.notifiedWidth = width;
   for (const l of store.listeners) l();
 }
 function getGlobalWidth() {
@@ -3352,7 +3353,7 @@ var KEY = "__kbach_dark_store__";
 function getStore2() {
   const g = globalThis;
   if (!g[KEY]) {
-    g[KEY] = { isDark: false, subscribers: /* @__PURE__ */ new Set() };
+    g[KEY] = { isDark: false, notifiedIsDark: false, subscribers: /* @__PURE__ */ new Set() };
   }
   return g[KEY];
 }
@@ -3361,8 +3362,9 @@ function syncGlobalDarkMode(isDark) {
 }
 function setGlobalDarkMode(isDark) {
   const store = getStore2();
-  if (store.isDark === isDark) return;
   store.isDark = isDark;
+  if (store.notifiedIsDark === isDark) return;
+  store.notifiedIsDark = isDark;
   for (const sub of store.subscribers) sub();
 }
 function getGlobalDarkMode() {
@@ -3444,6 +3446,7 @@ var useSyncExternalStore = import_react3.default.useSyncExternalStore ?? functio
 
 // src/ThemeProvider.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+var useIsomorphicLayoutEffect = isWeb || isNative ? import_react4.useLayoutEffect : import_react4.useEffect;
 var STORAGE_KEY = "kbach-theme";
 var _mountedProviderCount = 0;
 var _warnedMultipleProviders = false;
@@ -3583,7 +3586,7 @@ function ThemeProvider({
   const resolvedMode = mode === "system" ? systemScheme : mode;
   const isDark = resolvedMode === "dark";
   syncGlobalDarkMode(isDark);
-  (0, import_react4.useEffect)(() => {
+  useIsomorphicLayoutEffect(() => {
     applyWebTheme(resolvedMode, resolvedConfig.darkMode);
     setGlobalDarkMode(isDark);
   }, [isDark, resolvedMode, resolvedConfig.darkMode]);

package/dist/index.mjs

@@ -42,7 +42,7 @@ import {
   useGlobalDarkMode,
   useGlobalWidth,
   useSyncExternalStore
-} from "./chunk-GJSZUC6Q.mjs";
+} from "./chunk-XISB5W3A.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";
@@ -122,11 +122,13 @@ function useColors() {
 import {
   useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo as useMemo2,
   useRef,
   useState
 } from "react";
 import { jsx } from "react/jsx-runtime";
+var useIsomorphicLayoutEffect = isWeb || isNative ? useLayoutEffect : useEffect;
 var STORAGE_KEY = "kbach-theme";
 var _mountedProviderCount = 0;
 var _warnedMultipleProviders = false;
@@ -266,7 +268,7 @@ function ThemeProvider({
   const resolvedMode = mode === "system" ? systemScheme : mode;
   const isDark = resolvedMode === "dark";
   syncGlobalDarkMode(isDark);
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     applyWebTheme(resolvedMode, resolvedConfig.darkMode);
     setGlobalDarkMode(isDark);
   }, [isDark, resolvedMode, resolvedConfig.darkMode]);

package/dist/jsx-dev-runtime.js

@@ -2723,7 +2723,7 @@ var RESPONSIVE_KEY = "__kbach_responsive__";
 function getStore() {
   const g = globalThis;
   if (!g[RESPONSIVE_KEY]) {
-    g[RESPONSIVE_KEY] = { width: 0, screens: {}, listeners: /* @__PURE__ */ new Set() };
+    g[RESPONSIVE_KEY] = { width: 0, notifiedWidth: 0, screens: {}, listeners: /* @__PURE__ */ new Set() };
   }
   return g[RESPONSIVE_KEY];
 }
@@ -3270,7 +3270,7 @@ var KEY = "__kbach_dark_store__";
 function getStore2() {
   const g = globalThis;
   if (!g[KEY]) {
-    g[KEY] = { isDark: false, subscribers: /* @__PURE__ */ new Set() };
+    g[KEY] = { isDark: false, notifiedIsDark: false, subscribers: /* @__PURE__ */ new Set() };
   }
   return g[KEY];
 }

package/dist/jsx-dev-runtime.mjs

@@ -3,8 +3,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-YUX2JPTM.mjs";
-import "./chunk-GJSZUC6Q.mjs";
+} from "./chunk-RUI5EQDF.mjs";
+import "./chunk-XISB5W3A.mjs";
 
 // src/jsx-dev-runtime.tsx
 function jsxDEV(type, props, key, isStaticChildren, source, self) {

package/dist/jsx-runtime.js

@@ -2724,7 +2724,7 @@ var RESPONSIVE_KEY = "__kbach_responsive__";
 function getStore() {
   const g = globalThis;
   if (!g[RESPONSIVE_KEY]) {
-    g[RESPONSIVE_KEY] = { width: 0, screens: {}, listeners: /* @__PURE__ */ new Set() };
+    g[RESPONSIVE_KEY] = { width: 0, notifiedWidth: 0, screens: {}, listeners: /* @__PURE__ */ new Set() };
   }
   return g[RESPONSIVE_KEY];
 }
@@ -3271,7 +3271,7 @@ var KEY = "__kbach_dark_store__";
 function getStore2() {
   const g = globalThis;
   if (!g[KEY]) {
-    g[KEY] = { isDark: false, subscribers: /* @__PURE__ */ new Set() };
+    g[KEY] = { isDark: false, notifiedIsDark: false, subscribers: /* @__PURE__ */ new Set() };
   }
   return g[KEY];
 }

package/dist/jsx-runtime.mjs

@@ -4,10 +4,10 @@ import {
   _invalidateDefaultFontCache,
   jsx,
   jsxs
-} from "./chunk-YUX2JPTM.mjs";
+} from "./chunk-RUI5EQDF.mjs";
 import {
   registerWebElement
-} from "./chunk-GJSZUC6Q.mjs";
+} from "./chunk-XISB5W3A.mjs";
 export {
   Fragment,
   _invalidateDefaultFontCache,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react",
-  "version": "0.6.23",
+  "version": "0.6.25",
   "description": "React / React Native components and hooks for the Kbach framework",
   "source": "./src/index.ts",
   "main": "./dist/index.js",