@kbach/react 0.3.15 → 0.3.17

package/dist/{chunk-OJE5MVCI.mjs → chunk-5GHUWO2A.mjs}

@@ -1536,7 +1536,7 @@ var RESOLVERS = {
   },
   // ── Grid (responsive column count: grid-1 … grid-12) ─────────────────────
   grid: ({ value }) => {
-    if (!value || !isWeb) return null;
+    if (!value || typeof document === "undefined") return null;
     const n = parseInt(value, 10);
     if (isNaN(n) || n < 1 || n > 12) return null;
     return { display: "grid", gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))` };
@@ -1800,6 +1800,12 @@ var RESOLVERS = {
 function resolveUtility(parsed, theme) {
   if (!parsed.value) {
     if (parsed.utility in PLUGIN_STANDALONE) return PLUGIN_STANDALONE[parsed.utility] ?? null;
+    if (parsed.utility === "grd" || parsed.utility === "grid") {
+      return typeof document !== "undefined" ? { display: "grid" } : null;
+    }
+    if (parsed.utility === "inline-grid") {
+      return typeof document !== "undefined" ? { display: "inline-grid" } : null;
+    }
     if (parsed.utility in STANDALONE) return STANDALONE[parsed.utility] ?? null;
   }
   const resolver = PLUGIN_RESOLVERS[parsed.utility] ?? RESOLVERS[parsed.utility];
@@ -2046,12 +2052,12 @@ function resolve(classString, theme, darkMode = "attribute") {
     const bucketKey = parsed.modifiers.length === 0 ? "base" : parsed.modifiers.join(":");
     if (!result[bucketKey]) result[bucketKey] = {};
     Object.assign(result[bucketKey], styles);
-    if (isWeb) {
+    if (typeof document !== "undefined") {
       injectQueue.push({ cls: parsed.original, bucketKey, styles });
     }
   }
   styleCache.set(cacheKey, result);
-  if (isWeb) {
+  if (typeof document !== "undefined") {
     for (const { cls, bucketKey, styles } of injectQueue) {
       injectClassRule(cls, bucketKey, styles, darkMode);
     }
@@ -2418,7 +2424,7 @@ var InteractiveWrapper = forwardRef(
     const computedStyle = useMemo(
       () => {
         const s = flatten(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused }, breakpoints);
-        if (isWeb) {
+        if (isWeb && typeof Component !== "string") {
           if (s.display === "grid" || s.display === "inline-grid") delete s.display;
           delete s.gridTemplateColumns;
           delete s.gridTemplateRows;

package/dist/{chunk-6FOS3PUK.mjs → chunk-L3IEKX5I.mjs}

@@ -8,7 +8,7 @@ import {
   resolve,
   useConditionalWidth,
   useGlobalDarkMode
-} from "./chunk-OJE5MVCI.mjs";
+} from "./chunk-5GHUWO2A.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs, Fragment } from "react/jsx-runtime";
@@ -32,7 +32,7 @@ var DarkWrapper = React.forwardRef(
     const width = useConditionalWidth(needsWidth);
     const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
     const computedStyle = flatten(resolvedStyle, isDark, {}, breakpoints);
-    if (isWeb) stripWebGridProps(computedStyle);
+    if (isWeb && typeof Component !== "string") stripWebGridProps(computedStyle);
     const finalStyle = styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
     const props = { ref, ...rest, style: finalStyle };
     return Array.isArray(children) ? React.createElement(Component, props, ...children) : React.createElement(Component, props, children);
@@ -151,7 +151,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
     }, key);
   }
   const computedStyle = flatten(resolved, false);
-  if (isWeb) {
+  if (isWeb && typeof actualType !== "string") {
     if (computedStyle.display === "grid" || computedStyle.display === "inline-grid") delete computedStyle.display;
     delete computedStyle.gridTemplateColumns;
     delete computedStyle.gridTemplateRows;

package/dist/index.js

@@ -1702,7 +1702,7 @@ var RESOLVERS = {
   },
   // ── Grid (responsive column count: grid-1 … grid-12) ─────────────────────
   grid: ({ value }) => {
-    if (!value || !isWeb) return null;
+    if (!value || typeof document === "undefined") return null;
     const n = parseInt(value, 10);
     if (isNaN(n) || n < 1 || n > 12) return null;
     return { display: "grid", gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))` };
@@ -1966,6 +1966,12 @@ var RESOLVERS = {
 function resolveUtility(parsed, theme) {
   if (!parsed.value) {
     if (parsed.utility in PLUGIN_STANDALONE) return PLUGIN_STANDALONE[parsed.utility] ?? null;
+    if (parsed.utility === "grd" || parsed.utility === "grid") {
+      return typeof document !== "undefined" ? { display: "grid" } : null;
+    }
+    if (parsed.utility === "inline-grid") {
+      return typeof document !== "undefined" ? { display: "inline-grid" } : null;
+    }
     if (parsed.utility in STANDALONE) return STANDALONE[parsed.utility] ?? null;
   }
   const resolver = PLUGIN_RESOLVERS[parsed.utility] ?? RESOLVERS[parsed.utility];
@@ -2176,12 +2182,12 @@ function resolve(classString, theme, darkMode = "attribute") {
     const bucketKey = parsed.modifiers.length === 0 ? "base" : parsed.modifiers.join(":");
     if (!result[bucketKey]) result[bucketKey] = {};
     Object.assign(result[bucketKey], styles);
-    if (isWeb) {
+    if (typeof document !== "undefined") {
       injectQueue.push({ cls: parsed.original, bucketKey, styles });
     }
   }
   styleCache.set(cacheKey, result);
-  if (isWeb) {
+  if (typeof document !== "undefined") {
     for (const { cls, bucketKey, styles } of injectQueue) {
       injectClassRule(cls, bucketKey, styles, darkMode);
     }
@@ -2922,7 +2928,7 @@ var InteractiveWrapper = (0, import_react9.forwardRef)(
     const computedStyle = (0, import_react9.useMemo)(
       () => {
         const s = flatten(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused }, breakpoints);
-        if (isWeb) {
+        if (isWeb && typeof Component !== "string") {
           if (s.display === "grid" || s.display === "inline-grid") delete s.display;
           delete s.gridTemplateColumns;
           delete s.gridTemplateRows;

package/dist/index.mjs

@@ -21,7 +21,7 @@ import {
   updateConfig,
   useGlobalDarkMode,
   useGlobalWidth
-} from "./chunk-OJE5MVCI.mjs";
+} from "./chunk-5GHUWO2A.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";

package/dist/jsx-dev-runtime.js

@@ -1605,7 +1605,7 @@ var RESOLVERS = {
   },
   // ── Grid (responsive column count: grid-1 … grid-12) ─────────────────────
   grid: ({ value }) => {
-    if (!value || !isWeb) return null;
+    if (!value || typeof document === "undefined") return null;
     const n = parseInt(value, 10);
     if (isNaN(n) || n < 1 || n > 12) return null;
     return { display: "grid", gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))` };
@@ -1869,6 +1869,12 @@ var RESOLVERS = {
 function resolveUtility(parsed, theme) {
   if (!parsed.value) {
     if (parsed.utility in PLUGIN_STANDALONE) return PLUGIN_STANDALONE[parsed.utility] ?? null;
+    if (parsed.utility === "grd" || parsed.utility === "grid") {
+      return typeof document !== "undefined" ? { display: "grid" } : null;
+    }
+    if (parsed.utility === "inline-grid") {
+      return typeof document !== "undefined" ? { display: "inline-grid" } : null;
+    }
     if (parsed.utility in STANDALONE) return STANDALONE[parsed.utility] ?? null;
   }
   const resolver = PLUGIN_RESOLVERS[parsed.utility] ?? RESOLVERS[parsed.utility];
@@ -2067,12 +2073,12 @@ function resolve(classString, theme, darkMode = "attribute") {
     const bucketKey = parsed.modifiers.length === 0 ? "base" : parsed.modifiers.join(":");
     if (!result[bucketKey]) result[bucketKey] = {};
     Object.assign(result[bucketKey], styles);
-    if (isWeb) {
+    if (typeof document !== "undefined") {
       injectQueue.push({ cls: parsed.original, bucketKey, styles });
     }
   }
   styleCache.set(cacheKey, result);
-  if (isWeb) {
+  if (typeof document !== "undefined") {
     for (const { cls, bucketKey, styles } of injectQueue) {
       injectClassRule(cls, bucketKey, styles, darkMode);
     }
@@ -2401,7 +2407,7 @@ var InteractiveWrapper = (0, import_react3.forwardRef)(
     const computedStyle = (0, import_react3.useMemo)(
       () => {
         const s = flatten(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused }, breakpoints);
-        if (isWeb) {
+        if (isWeb && typeof Component !== "string") {
           if (s.display === "grid" || s.display === "inline-grid") delete s.display;
           delete s.gridTemplateColumns;
           delete s.gridTemplateRows;
@@ -2455,7 +2461,7 @@ var DarkWrapper = import_react4.default.forwardRef(
     const width = useConditionalWidth(needsWidth);
     const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
     const computedStyle = flatten(resolvedStyle, isDark, {}, breakpoints);
-    if (isWeb) stripWebGridProps(computedStyle);
+    if (isWeb && typeof Component !== "string") stripWebGridProps(computedStyle);
     const finalStyle = styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
     const props = { ref, ...rest, style: finalStyle };
     return Array.isArray(children) ? import_react4.default.createElement(Component, props, ...children) : import_react4.default.createElement(Component, props, children);
@@ -2574,7 +2580,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
     }, key);
   }
   const computedStyle = flatten(resolved, false);
-  if (isWeb) {
+  if (isWeb && typeof actualType !== "string") {
     if (computedStyle.display === "grid" || computedStyle.display === "inline-grid") delete computedStyle.display;
     delete computedStyle.gridTemplateColumns;
     delete computedStyle.gridTemplateRows;

package/dist/jsx-dev-runtime.mjs

@@ -2,8 +2,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-6FOS3PUK.mjs";
-import "./chunk-OJE5MVCI.mjs";
+} from "./chunk-L3IEKX5I.mjs";
+import "./chunk-5GHUWO2A.mjs";
 
 // src/jsx-dev-runtime.tsx
 function jsxDEV(type, props, key, isStaticChildren, _source, _self) {

package/dist/jsx-runtime.js

@@ -1604,7 +1604,7 @@ var RESOLVERS = {
   },
   // ── Grid (responsive column count: grid-1 … grid-12) ─────────────────────
   grid: ({ value }) => {
-    if (!value || !isWeb) return null;
+    if (!value || typeof document === "undefined") return null;
     const n = parseInt(value, 10);
     if (isNaN(n) || n < 1 || n > 12) return null;
     return { display: "grid", gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))` };
@@ -1868,6 +1868,12 @@ var RESOLVERS = {
 function resolveUtility(parsed, theme) {
   if (!parsed.value) {
     if (parsed.utility in PLUGIN_STANDALONE) return PLUGIN_STANDALONE[parsed.utility] ?? null;
+    if (parsed.utility === "grd" || parsed.utility === "grid") {
+      return typeof document !== "undefined" ? { display: "grid" } : null;
+    }
+    if (parsed.utility === "inline-grid") {
+      return typeof document !== "undefined" ? { display: "inline-grid" } : null;
+    }
     if (parsed.utility in STANDALONE) return STANDALONE[parsed.utility] ?? null;
   }
   const resolver = PLUGIN_RESOLVERS[parsed.utility] ?? RESOLVERS[parsed.utility];
@@ -2066,12 +2072,12 @@ function resolve(classString, theme, darkMode = "attribute") {
     const bucketKey = parsed.modifiers.length === 0 ? "base" : parsed.modifiers.join(":");
     if (!result[bucketKey]) result[bucketKey] = {};
     Object.assign(result[bucketKey], styles);
-    if (isWeb) {
+    if (typeof document !== "undefined") {
       injectQueue.push({ cls: parsed.original, bucketKey, styles });
     }
   }
   styleCache.set(cacheKey, result);
-  if (isWeb) {
+  if (typeof document !== "undefined") {
     for (const { cls, bucketKey, styles } of injectQueue) {
       injectClassRule(cls, bucketKey, styles, darkMode);
     }
@@ -2400,7 +2406,7 @@ var InteractiveWrapper = (0, import_react3.forwardRef)(
     const computedStyle = (0, import_react3.useMemo)(
       () => {
         const s = flatten(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused }, breakpoints);
-        if (isWeb) {
+        if (isWeb && typeof Component !== "string") {
           if (s.display === "grid" || s.display === "inline-grid") delete s.display;
           delete s.gridTemplateColumns;
           delete s.gridTemplateRows;
@@ -2454,7 +2460,7 @@ var DarkWrapper = import_react4.default.forwardRef(
     const width = useConditionalWidth(needsWidth);
     const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
     const computedStyle = flatten(resolvedStyle, isDark, {}, breakpoints);
-    if (isWeb) stripWebGridProps(computedStyle);
+    if (isWeb && typeof Component !== "string") stripWebGridProps(computedStyle);
     const finalStyle = styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
     const props = { ref, ...rest, style: finalStyle };
     return Array.isArray(children) ? import_react4.default.createElement(Component, props, ...children) : import_react4.default.createElement(Component, props, children);
@@ -2573,7 +2579,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
     }, key);
   }
   const computedStyle = flatten(resolved, false);
-  if (isWeb) {
+  if (isWeb && typeof actualType !== "string") {
     if (computedStyle.display === "grid" || computedStyle.display === "inline-grid") delete computedStyle.display;
     delete computedStyle.gridTemplateColumns;
     delete computedStyle.gridTemplateRows;

package/dist/jsx-runtime.mjs

@@ -2,8 +2,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-6FOS3PUK.mjs";
-import "./chunk-OJE5MVCI.mjs";
+} from "./chunk-L3IEKX5I.mjs";
+import "./chunk-5GHUWO2A.mjs";
 export {
   Fragment,
   jsx,

package/package.json

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