@kbach/react 0.6.24 → 0.6.26

package/dist/index.mjs

@@ -42,7 +42,7 @@ import {
   useGlobalDarkMode,
   useGlobalWidth,
   useSyncExternalStore
-} from "./chunk-GJSZUC6Q.mjs";
+} from "./chunk-AKX6I7WP.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";
@@ -118,12 +118,22 @@ function useColors() {
   return useMemo(() => wrapColors(config.theme.colors), [config.theme.colors]);
 }
 
+// src/useSpacing.ts
+import { useMemo as useMemo2 } from "react";
+function wrapSpacing(rawSpacing) {
+  return rawSpacing;
+}
+function useSpacing() {
+  const { config } = useTheme();
+  return useMemo2(() => wrapSpacing(config.theme.spacing), [config.theme.spacing]);
+}
+
 // src/ThemeProvider.tsx
 import {
   useCallback,
   useEffect,
   useLayoutEffect,
-  useMemo as useMemo2,
+  useMemo as useMemo3,
   useRef,
   useState
 } from "react";
@@ -132,6 +142,8 @@ var useIsomorphicLayoutEffect = isWeb || isNative ? useLayoutEffect : useEffect;
 var STORAGE_KEY = "kbach-theme";
 var _mountedProviderCount = 0;
 var _warnedMultipleProviders = false;
+var _mountedConfigOverrideCount = 0;
+var _warnedConfigOverride = false;
 function loadPersistedMode() {
   try {
     if (isWeb) return localStorage.getItem(STORAGE_KEY);
@@ -183,21 +195,38 @@ function ThemeProvider({
   const [resolvedConfig, setResolvedConfig] = useState(
     () => configOverride ? buildConfig(configOverride) : getConfig()
   );
+  const _prevConfigOverrideRef = useRef(void 0);
+  if (configOverride && _prevConfigOverrideRef.current !== configOverride) {
+    _prevConfigOverrideRef.current = configOverride;
+    updateConfig(configOverride);
+    const fresh = getConfig();
+    if (fresh !== resolvedConfig) setResolvedConfig(fresh);
+  }
   useEffect(() => {
     _mountedProviderCount++;
-    if (process.env.NODE_ENV !== "production" && _mountedProviderCount > 1 && !_warnedMultipleProviders) {
-      _warnedMultipleProviders = true;
-      kbachWarn(
-        "Multiple <ThemeProvider> instances are mounted at once. Dark mode and responsive width are shared through one global store, so whichever provider rendered most recently wins for every consumer \u2014 nested or per-section theming is not isolated between providers."
-      );
+    if (configOverride) _mountedConfigOverrideCount++;
+    if (process.env.NODE_ENV !== "production") {
+      if (_mountedProviderCount > 1 && !_warnedMultipleProviders) {
+        _warnedMultipleProviders = true;
+        kbachWarn(
+          "Multiple <ThemeProvider> instances are mounted at once. Dark mode and responsive width are shared through one global store, so whichever provider rendered most recently wins for every consumer \u2014 nested or per-section theming is not isolated between providers."
+        );
+      }
+      if (_mountedConfigOverrideCount > 1 && !_warnedConfigOverride) {
+        _warnedConfigOverride = true;
+        kbachWarn(
+          "Multiple <ThemeProvider config={...}> overrides are mounted at once. The resolved config is shared through the same global store as dark mode/width (see the multiple-providers warning), so per-tree config overrides are not actually isolated between providers \u2014 plain className/kb elements with no hover:/dark:/sm: modifier resolve against whichever override last committed, not necessarily their nearest ancestor <ThemeProvider>."
+        );
+      }
     }
     return () => {
       _mountedProviderCount--;
+      if (configOverride) _mountedConfigOverrideCount--;
     };
   }, []);
   const [webWidth, setWebWidth] = useState(0);
   const effectiveWidth = windowWidthProp ?? (isWeb ? webWidth : 0);
-  const numericScreens = useMemo2(() => {
+  const numericScreens = useMemo3(() => {
     const out = {};
     for (const [k, v] of Object.entries(resolvedConfig.theme.screens ?? {})) {
       out[k] = typeof v === "number" ? v : parseInt(String(v), 10);
@@ -272,11 +301,6 @@ function ThemeProvider({
     applyWebTheme(resolvedMode, resolvedConfig.darkMode);
     setGlobalDarkMode(isDark);
   }, [isDark, resolvedMode, resolvedConfig.darkMode]);
-  useEffect(() => {
-    if (!configOverride) return;
-    updateConfig(configOverride);
-    setResolvedConfig(getConfig());
-  }, [configOverride]);
   useEffect(() => {
     if (configOverride) return;
     let mounted = true;
@@ -288,7 +312,7 @@ function ThemeProvider({
       unsub();
     };
   }, [configOverride]);
-  const contextValue = useMemo2(
+  const contextValue = useMemo3(
     () => ({ mode, resolvedMode, isDark, setMode, toggle, config: resolvedConfig }),
     [mode, resolvedMode, isDark, setMode, toggle, resolvedConfig]
   );
@@ -307,7 +331,7 @@ import React2, {
   forwardRef,
   useState as useState2,
   useCallback as useCallback2,
-  useMemo as useMemo3
+  useMemo as useMemo4
 } from "react";
 function styled(Component, baseClasses = "") {
   const Styled = forwardRef(
@@ -366,12 +390,12 @@ function styled(Component, baseClasses = "") {
         if (!isWebPlatform) setFocused(false);
       }), [onBlur, isWebPlatform]);
       const combined = extraClasses ? `${baseClasses} ${extraClasses}` : baseClasses;
-      const resolved = useMemo3(() => resolve(combined, config.theme, config.darkMode), [combined, config.theme, config.darkMode]);
-      const hasInteractive = useMemo3(() => hasInteractiveBuckets(resolved), [resolved]);
+      const resolved = useMemo4(() => resolve(combined, config.theme, config.darkMode), [combined, config.theme, config.darkMode]);
+      const hasInteractive = useMemo4(() => hasInteractiveBuckets(resolved), [resolved]);
       const needsWidth = hasResponsiveBuckets(resolved);
       const width = useConditionalWidth(needsWidth && !isWebPlatform);
       const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
-      const computedStyle = useMemo3(
+      const computedStyle = useMemo4(
         () => isWebPlatform ? {} : flatten(resolved, isDark, { pressed, hover: hovered, focus: focused, disabled, checked }, breakpoints),
         [resolved, isDark, pressed, hovered, focused, disabled, checked, width]
         // eslint-disable-line react-hooks/exhaustive-deps
@@ -426,12 +450,12 @@ function styled(Component, baseClasses = "") {
 }
 
 // src/useStyles.ts
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo5 } from "react";
 function useStyles(classString, state = {}) {
   const { isDark, config } = useTheme();
   const width = useGlobalWidth();
   const normalised = Array.isArray(classString) ? classString.join(" ") : classString;
-  return useMemo4(() => {
+  return useMemo5(() => {
     const resolved = resolve(normalised, config.theme, config.darkMode);
     const breakpoints = getActiveBreakpoints(width);
     return flatten(resolved, isDark, state, breakpoints);
@@ -440,39 +464,54 @@ function useStyles(classString, state = {}) {
 function useResolvedStyle(classString) {
   const { config } = useTheme();
   const normalised = Array.isArray(classString) ? classString.join(" ") : classString;
-  return useMemo4(
+  return useMemo5(
     () => resolve(normalised, config.theme, config.darkMode),
     [normalised, config]
   );
 }
 
 // src/useBreakpoint.ts
-import { useMemo as useMemo5 } from "react";
+import { useMemo as useMemo6 } from "react";
+function toNumericScreens(screens) {
+  const out = {};
+  for (const [name, v] of Object.entries(screens)) {
+    const n = typeof v === "number" ? v : parseInt(String(v), 10);
+    if (!Number.isNaN(n)) out[name] = n;
+  }
+  return out;
+}
 function useBreakpoint() {
   const { config } = useTheme();
   const width = useGlobalWidth();
   const screens = config.theme.screens;
-  const sorted = useMemo5(
-    () => Object.entries(screens).map(([name, v]) => [name, typeof v === "number" ? v : parseInt(String(v), 10)]).filter(([, minW]) => !Number.isNaN(minW)).sort(([, a], [, b]) => b - a),
-    [screens]
-  );
-  for (const [name, minW] of sorted) {
-    if (width >= minW) return name;
-  }
-  return "xs";
+  const numericScreens = useMemo6(() => toNumericScreens(screens), [screens]);
+  return useMemo6(() => {
+    const active = getActiveBreakpoints(width, numericScreens);
+    let best = null;
+    let bestMinW = -Infinity;
+    for (const name of active) {
+      const minW = numericScreens[name];
+      if (minW > bestMinW) {
+        bestMinW = minW;
+        best = name;
+      }
+    }
+    return best ?? "xs";
+  }, [numericScreens, width]);
 }
 function useResponsive() {
   const { config } = useTheme();
   const width = useGlobalWidth();
   const screens = config.theme.screens;
-  return useMemo5(() => {
+  const numericScreens = useMemo6(() => toNumericScreens(screens), [screens]);
+  return useMemo6(() => {
+    const active = getActiveBreakpoints(width, numericScreens);
     const result = {};
-    for (const [name, v] of Object.entries(screens)) {
-      const minW = typeof v === "number" ? v : parseInt(String(v), 10);
-      if (!Number.isNaN(minW)) result[name] = width >= minW;
+    for (const name of Object.keys(numericScreens)) {
+      result[name] = active.has(name);
     }
     return result;
-  }, [screens, width]);
+  }, [numericScreens, width]);
 }
 
 // src/kb.ts
@@ -517,7 +556,9 @@ export {
   useIsDark,
   useResolvedStyle,
   useResponsive,
+  useSpacing,
   useStyles,
   useTheme,
-  wrapColors
+  wrapColors,
+  wrapSpacing
 };