@kbach/react 0.3.7 → 0.3.9

package/dist/{chunk-VTAK5IRJ.mjs → chunk-HDKCXMOY.mjs}

@@ -8,7 +8,7 @@ import {
   resolve,
   useConditionalWidth,
   useGlobalDarkMode
-} from "./chunk-2D35ZED5.mjs";
+} from "./chunk-UG3UVDJA.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs, Fragment } from "react/jsx-runtime";
@@ -28,7 +28,7 @@ function hasResponsiveBuckets(resolved) {
 var DarkWrapper = React.forwardRef(
   function DarkWrapper2({ Component, resolvedStyle, style: styleProp, children, ...rest }, ref) {
     const isDark = useGlobalDarkMode();
-    const needsWidth = !isWeb && hasResponsiveBuckets(resolvedStyle);
+    const needsWidth = hasResponsiveBuckets(resolvedStyle);
     const width = useConditionalWidth(needsWidth);
     const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
     const computedStyle = flatten(resolvedStyle, isDark, {}, breakpoints);
@@ -115,6 +115,15 @@ function processElement(type, rawProps, key, isStaticChildren) {
     return makeElement(isStaticChildren, type, rawProps, key);
   }
   const config = getConfig();
+  if (isWeb && classStr) {
+    resolve(classStr, config.theme, config.darkMode);
+    const { style: userStyle2, ...passProps2 } = omitConsumed(rawProps);
+    return makeElement(isStaticChildren, type, {
+      ...passProps2,
+      className: classStr,
+      ...userStyle2 !== void 0 ? { style: userStyle2 } : {}
+    }, key);
+  }
   const resolved = __kbachStyles ?? (classStr ? resolve(classStr, config.theme, config.darkMode) : {});
   const { style: userStyle, ...passProps } = omitConsumed(rawProps);
   const { interactive, modeOrResponsive } = bucketMods(resolved);

package/dist/{chunk-2D35ZED5.mjs → chunk-UG3UVDJA.mjs}

@@ -2040,12 +2040,10 @@ function resolve(classString, theme, darkMode = "attribute") {
     }
   }
   styleCache.set(cacheKey, result);
-  if (isWeb && injectQueue.length > 0) {
-    Promise.resolve().then(() => {
-      for (const { cls, bucketKey, styles } of injectQueue) {
-        injectClassRule(cls, bucketKey, styles, darkMode);
-      }
-    });
+  if (isWeb) {
+    for (const { cls, bucketKey, styles } of injectQueue) {
+      injectClassRule(cls, bucketKey, styles, darkMode);
+    }
   }
   return result;
 }
@@ -2362,7 +2360,7 @@ var InteractiveWrapper = forwardRef(
     ...rest
   }, ref) {
     const isDark = useGlobalDarkMode();
-    const needsWidth = !isWeb && hasResponsiveBuckets(resolvedStyle);
+    const needsWidth = hasResponsiveBuckets(resolvedStyle);
     const width = useConditionalWidth(needsWidth);
     const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
     const [pressed, setPressed] = useState(false);

package/dist/index.js

@@ -2170,12 +2170,10 @@ function resolve(classString, theme, darkMode = "attribute") {
     }
   }
   styleCache.set(cacheKey, result);
-  if (isWeb && injectQueue.length > 0) {
-    Promise.resolve().then(() => {
-      for (const { cls, bucketKey, styles } of injectQueue) {
-        injectClassRule(cls, bucketKey, styles, darkMode);
-      }
-    });
+  if (isWeb) {
+    for (const { cls, bucketKey, styles } of injectQueue) {
+      injectClassRule(cls, bucketKey, styles, darkMode);
+    }
   }
   return result;
 }
@@ -2779,7 +2777,7 @@ function useConditionalWidth(active) {
 function useStyles(classString, state = {}) {
   const { isDark, config } = useTheme();
   const width = useGlobalWidth();
-  const breakpoints = isWeb ? EMPTY_BREAKPOINTS : getActiveBreakpoints(width);
+  const breakpoints = getActiveBreakpoints(width);
   const normalised = Array.isArray(classString) ? classString.join(" ") : classString;
   return (0, import_react7.useMemo)(() => {
     const resolved = resolve(normalised, config.theme, config.darkMode);
@@ -2866,7 +2864,7 @@ var InteractiveWrapper = (0, import_react9.forwardRef)(
     ...rest
   }, ref) {
     const isDark = useGlobalDarkMode();
-    const needsWidth = !isWeb && hasResponsiveBuckets(resolvedStyle);
+    const needsWidth = hasResponsiveBuckets(resolvedStyle);
     const width = useConditionalWidth(needsWidth);
     const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
     const [pressed, setPressed] = (0, import_react9.useState)(false);

package/dist/index.mjs

@@ -1,5 +1,4 @@
 import {
-  EMPTY_BREAKPOINTS,
   InteractiveWrapper,
   __require,
   buildConfig,
@@ -22,7 +21,7 @@ import {
   updateConfig,
   useGlobalDarkMode,
   useGlobalWidth
-} from "./chunk-2D35ZED5.mjs";
+} from "./chunk-UG3UVDJA.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";
@@ -445,7 +444,7 @@ import { useMemo as useMemo4 } from "react";
 function useStyles(classString, state = {}) {
   const { isDark, config } = useTheme();
   const width = useGlobalWidth();
-  const breakpoints = isWeb ? EMPTY_BREAKPOINTS : getActiveBreakpoints(width);
+  const breakpoints = getActiveBreakpoints(width);
   const normalised = Array.isArray(classString) ? classString.join(" ") : classString;
   return useMemo4(() => {
     const resolved = resolve(normalised, config.theme, config.darkMode);

package/dist/jsx-dev-runtime.js

@@ -2061,12 +2061,10 @@ function resolve(classString, theme, darkMode = "attribute") {
     }
   }
   styleCache.set(cacheKey, result);
-  if (isWeb && injectQueue.length > 0) {
-    Promise.resolve().then(() => {
-      for (const { cls, bucketKey, styles } of injectQueue) {
-        injectClassRule(cls, bucketKey, styles, darkMode);
-      }
-    });
+  if (isWeb) {
+    for (const { cls, bucketKey, styles } of injectQueue) {
+      injectClassRule(cls, bucketKey, styles, darkMode);
+    }
   }
   return result;
 }
@@ -2349,7 +2347,7 @@ var InteractiveWrapper = (0, import_react3.forwardRef)(
     ...rest
   }, ref) {
     const isDark = useGlobalDarkMode();
-    const needsWidth = !isWeb && hasResponsiveBuckets(resolvedStyle);
+    const needsWidth = hasResponsiveBuckets(resolvedStyle);
     const width = useConditionalWidth(needsWidth);
     const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
     const [pressed, setPressed] = (0, import_react3.useState)(false);
@@ -2400,7 +2398,7 @@ function hasResponsiveBuckets2(resolved) {
 var DarkWrapper = import_react4.default.forwardRef(
   function DarkWrapper2({ Component, resolvedStyle, style: styleProp, children, ...rest }, ref) {
     const isDark = useGlobalDarkMode();
-    const needsWidth = !isWeb && hasResponsiveBuckets2(resolvedStyle);
+    const needsWidth = hasResponsiveBuckets2(resolvedStyle);
     const width = useConditionalWidth(needsWidth);
     const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
     const computedStyle = flatten(resolvedStyle, isDark, {}, breakpoints);
@@ -2487,6 +2485,15 @@ function processElement(type, rawProps, key, isStaticChildren) {
     return makeElement(isStaticChildren, type, rawProps, key);
   }
   const config = getConfig();
+  if (isWeb && classStr) {
+    resolve(classStr, config.theme, config.darkMode);
+    const { style: userStyle2, ...passProps2 } = omitConsumed(rawProps);
+    return makeElement(isStaticChildren, type, {
+      ...passProps2,
+      className: classStr,
+      ...userStyle2 !== void 0 ? { style: userStyle2 } : {}
+    }, key);
+  }
   const resolved = __kbachStyles ?? (classStr ? resolve(classStr, config.theme, config.darkMode) : {});
   const { style: userStyle, ...passProps } = omitConsumed(rawProps);
   const { interactive, modeOrResponsive } = bucketMods(resolved);

package/dist/jsx-dev-runtime.mjs

@@ -2,8 +2,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-VTAK5IRJ.mjs";
-import "./chunk-2D35ZED5.mjs";
+} from "./chunk-HDKCXMOY.mjs";
+import "./chunk-UG3UVDJA.mjs";
 
 // src/jsx-dev-runtime.tsx
 function jsxDEV(type, props, key, isStaticChildren, _source, _self) {

package/dist/jsx-runtime.js

@@ -2060,12 +2060,10 @@ function resolve(classString, theme, darkMode = "attribute") {
     }
   }
   styleCache.set(cacheKey, result);
-  if (isWeb && injectQueue.length > 0) {
-    Promise.resolve().then(() => {
-      for (const { cls, bucketKey, styles } of injectQueue) {
-        injectClassRule(cls, bucketKey, styles, darkMode);
-      }
-    });
+  if (isWeb) {
+    for (const { cls, bucketKey, styles } of injectQueue) {
+      injectClassRule(cls, bucketKey, styles, darkMode);
+    }
   }
   return result;
 }
@@ -2348,7 +2346,7 @@ var InteractiveWrapper = (0, import_react3.forwardRef)(
     ...rest
   }, ref) {
     const isDark = useGlobalDarkMode();
-    const needsWidth = !isWeb && hasResponsiveBuckets(resolvedStyle);
+    const needsWidth = hasResponsiveBuckets(resolvedStyle);
     const width = useConditionalWidth(needsWidth);
     const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
     const [pressed, setPressed] = (0, import_react3.useState)(false);
@@ -2399,7 +2397,7 @@ function hasResponsiveBuckets2(resolved) {
 var DarkWrapper = import_react4.default.forwardRef(
   function DarkWrapper2({ Component, resolvedStyle, style: styleProp, children, ...rest }, ref) {
     const isDark = useGlobalDarkMode();
-    const needsWidth = !isWeb && hasResponsiveBuckets2(resolvedStyle);
+    const needsWidth = hasResponsiveBuckets2(resolvedStyle);
     const width = useConditionalWidth(needsWidth);
     const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
     const computedStyle = flatten(resolvedStyle, isDark, {}, breakpoints);
@@ -2486,6 +2484,15 @@ function processElement(type, rawProps, key, isStaticChildren) {
     return makeElement(isStaticChildren, type, rawProps, key);
   }
   const config = getConfig();
+  if (isWeb && classStr) {
+    resolve(classStr, config.theme, config.darkMode);
+    const { style: userStyle2, ...passProps2 } = omitConsumed(rawProps);
+    return makeElement(isStaticChildren, type, {
+      ...passProps2,
+      className: classStr,
+      ...userStyle2 !== void 0 ? { style: userStyle2 } : {}
+    }, key);
+  }
   const resolved = __kbachStyles ?? (classStr ? resolve(classStr, config.theme, config.darkMode) : {});
   const { style: userStyle, ...passProps } = omitConsumed(rawProps);
   const { interactive, modeOrResponsive } = bucketMods(resolved);

package/dist/jsx-runtime.mjs

@@ -2,8 +2,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-VTAK5IRJ.mjs";
-import "./chunk-2D35ZED5.mjs";
+} from "./chunk-HDKCXMOY.mjs";
+import "./chunk-UG3UVDJA.mjs";
 export {
   Fragment,
   jsx,

package/package.json

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