@kbach/react 0.3.12 → 0.3.14

package/dist/{chunk-BAI72FG4.mjs → chunk-R22W555P.mjs}

@@ -8,7 +8,7 @@ import {
   resolve,
   useConditionalWidth,
   useGlobalDarkMode
-} from "./chunk-UGBTZ7VN.mjs";
+} from "./chunk-WPJY7X5I.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs, Fragment } from "react/jsx-runtime";
@@ -32,12 +32,24 @@ 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);
     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);
   }
 );
 DarkWrapper.displayName = "Kbach.DarkWrapper";
+function stripWebGridProps(s) {
+  if (s.display === "grid" || s.display === "inline-grid") delete s.display;
+  delete s.gridTemplateColumns;
+  delete s.gridTemplateRows;
+  delete s.gridColumn;
+  delete s.gridRow;
+  delete s.gridArea;
+  delete s.gridAutoFlow;
+  delete s.gridAutoColumns;
+  delete s.gridAutoRows;
+}
 
 // src/jsx-runtime.tsx
 var INTERACTIVE_MODS = /* @__PURE__ */ new Set([
@@ -137,6 +149,17 @@ function processElement(type, rawProps, key, isStaticChildren) {
     }, key);
   }
   const computedStyle = flatten(resolved, false);
+  if (isWeb) {
+    if (computedStyle.display === "grid" || computedStyle.display === "inline-grid") delete computedStyle.display;
+    delete computedStyle.gridTemplateColumns;
+    delete computedStyle.gridTemplateRows;
+    delete computedStyle.gridColumn;
+    delete computedStyle.gridRow;
+    delete computedStyle.gridArea;
+    delete computedStyle.gridAutoFlow;
+    delete computedStyle.gridAutoColumns;
+    delete computedStyle.gridAutoRows;
+  }
   const finalStyle = mergeStyle(computedStyle, userStyle);
   return makeElement(isStaticChildren, type, {
     ...passProps,

package/dist/{chunk-UGBTZ7VN.mjs → chunk-WPJY7X5I.mjs}

@@ -2024,7 +2024,8 @@ function styleValueToCSS(styles) {
     } else {
       cssVal = String(val);
     }
-    return `${cssProp}: ${cssVal}`;
+    const important = prop === "display" && (cssVal === "grid" || cssVal === "inline-grid") ? " !important" : "";
+    return `${cssProp}: ${cssVal}${important}`;
   }).join("; ");
 }
 function camelToKebab(str) {
@@ -2413,7 +2414,21 @@ var InteractiveWrapper = forwardRef(
     const handleFocus = useCallback(chain(onFocus, () => setFocused(true)), [onFocus]);
     const handleBlur = useCallback(chain(onBlur, () => setFocused(false)), [onBlur]);
     const computedStyle = useMemo(
-      () => flatten(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused }, breakpoints),
+      () => {
+        const s = flatten(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused }, breakpoints);
+        if (isWeb) {
+          if (s.display === "grid" || s.display === "inline-grid") delete s.display;
+          delete s.gridTemplateColumns;
+          delete s.gridTemplateRows;
+          delete s.gridColumn;
+          delete s.gridRow;
+          delete s.gridArea;
+          delete s.gridAutoFlow;
+          delete s.gridAutoColumns;
+          delete s.gridAutoRows;
+        }
+        return s;
+      },
       [resolvedStyle, isDark, pressed, hovered, focused, width]
       // eslint-disable-line react-hooks/exhaustive-deps
     );

package/dist/index.js

@@ -2154,7 +2154,8 @@ function styleValueToCSS(styles) {
     } else {
       cssVal = String(val);
     }
-    return `${cssProp}: ${cssVal}`;
+    const important = prop === "display" && (cssVal === "grid" || cssVal === "inline-grid") ? " !important" : "";
+    return `${cssProp}: ${cssVal}${important}`;
   }).join("; ");
 }
 function camelToKebab(str) {
@@ -2917,7 +2918,21 @@ var InteractiveWrapper = (0, import_react9.forwardRef)(
     const handleFocus = (0, import_react9.useCallback)(chain(onFocus, () => setFocused(true)), [onFocus]);
     const handleBlur = (0, import_react9.useCallback)(chain(onBlur, () => setFocused(false)), [onBlur]);
     const computedStyle = (0, import_react9.useMemo)(
-      () => flatten(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused }, breakpoints),
+      () => {
+        const s = flatten(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused }, breakpoints);
+        if (isWeb) {
+          if (s.display === "grid" || s.display === "inline-grid") delete s.display;
+          delete s.gridTemplateColumns;
+          delete s.gridTemplateRows;
+          delete s.gridColumn;
+          delete s.gridRow;
+          delete s.gridArea;
+          delete s.gridAutoFlow;
+          delete s.gridAutoColumns;
+          delete s.gridAutoRows;
+        }
+        return s;
+      },
       [resolvedStyle, isDark, pressed, hovered, focused, width]
       // eslint-disable-line react-hooks/exhaustive-deps
     );

package/dist/index.mjs

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

package/dist/jsx-dev-runtime.js

@@ -2045,7 +2045,8 @@ function styleValueToCSS(styles) {
     } else {
       cssVal = String(val);
     }
-    return `${cssProp}: ${cssVal}`;
+    const important = prop === "display" && (cssVal === "grid" || cssVal === "inline-grid") ? " !important" : "";
+    return `${cssProp}: ${cssVal}${important}`;
   }).join("; ");
 }
 function camelToKebab(str) {
@@ -2396,7 +2397,21 @@ var InteractiveWrapper = (0, import_react3.forwardRef)(
     const handleFocus = (0, import_react3.useCallback)(chain(onFocus, () => setFocused(true)), [onFocus]);
     const handleBlur = (0, import_react3.useCallback)(chain(onBlur, () => setFocused(false)), [onBlur]);
     const computedStyle = (0, import_react3.useMemo)(
-      () => flatten(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused }, breakpoints),
+      () => {
+        const s = flatten(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused }, breakpoints);
+        if (isWeb) {
+          if (s.display === "grid" || s.display === "inline-grid") delete s.display;
+          delete s.gridTemplateColumns;
+          delete s.gridTemplateRows;
+          delete s.gridColumn;
+          delete s.gridRow;
+          delete s.gridArea;
+          delete s.gridAutoFlow;
+          delete s.gridAutoColumns;
+          delete s.gridAutoRows;
+        }
+        return s;
+      },
       [resolvedStyle, isDark, pressed, hovered, focused, width]
       // eslint-disable-line react-hooks/exhaustive-deps
     );
@@ -2438,12 +2453,24 @@ 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);
     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);
   }
 );
 DarkWrapper.displayName = "Kbach.DarkWrapper";
+function stripWebGridProps(s) {
+  if (s.display === "grid" || s.display === "inline-grid") delete s.display;
+  delete s.gridTemplateColumns;
+  delete s.gridTemplateRows;
+  delete s.gridColumn;
+  delete s.gridRow;
+  delete s.gridArea;
+  delete s.gridAutoFlow;
+  delete s.gridAutoColumns;
+  delete s.gridAutoRows;
+}
 
 // src/jsx-runtime.tsx
 var INTERACTIVE_MODS = /* @__PURE__ */ new Set([
@@ -2543,6 +2570,17 @@ function processElement(type, rawProps, key, isStaticChildren) {
     }, key);
   }
   const computedStyle = flatten(resolved, false);
+  if (isWeb) {
+    if (computedStyle.display === "grid" || computedStyle.display === "inline-grid") delete computedStyle.display;
+    delete computedStyle.gridTemplateColumns;
+    delete computedStyle.gridTemplateRows;
+    delete computedStyle.gridColumn;
+    delete computedStyle.gridRow;
+    delete computedStyle.gridArea;
+    delete computedStyle.gridAutoFlow;
+    delete computedStyle.gridAutoColumns;
+    delete computedStyle.gridAutoRows;
+  }
   const finalStyle = mergeStyle(computedStyle, userStyle);
   return makeElement(isStaticChildren, type, {
     ...passProps,

package/dist/jsx-dev-runtime.mjs

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

package/dist/jsx-runtime.js

@@ -2044,7 +2044,8 @@ function styleValueToCSS(styles) {
     } else {
       cssVal = String(val);
     }
-    return `${cssProp}: ${cssVal}`;
+    const important = prop === "display" && (cssVal === "grid" || cssVal === "inline-grid") ? " !important" : "";
+    return `${cssProp}: ${cssVal}${important}`;
   }).join("; ");
 }
 function camelToKebab(str) {
@@ -2395,7 +2396,21 @@ var InteractiveWrapper = (0, import_react3.forwardRef)(
     const handleFocus = (0, import_react3.useCallback)(chain(onFocus, () => setFocused(true)), [onFocus]);
     const handleBlur = (0, import_react3.useCallback)(chain(onBlur, () => setFocused(false)), [onBlur]);
     const computedStyle = (0, import_react3.useMemo)(
-      () => flatten(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused }, breakpoints),
+      () => {
+        const s = flatten(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused }, breakpoints);
+        if (isWeb) {
+          if (s.display === "grid" || s.display === "inline-grid") delete s.display;
+          delete s.gridTemplateColumns;
+          delete s.gridTemplateRows;
+          delete s.gridColumn;
+          delete s.gridRow;
+          delete s.gridArea;
+          delete s.gridAutoFlow;
+          delete s.gridAutoColumns;
+          delete s.gridAutoRows;
+        }
+        return s;
+      },
       [resolvedStyle, isDark, pressed, hovered, focused, width]
       // eslint-disable-line react-hooks/exhaustive-deps
     );
@@ -2437,12 +2452,24 @@ 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);
     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);
   }
 );
 DarkWrapper.displayName = "Kbach.DarkWrapper";
+function stripWebGridProps(s) {
+  if (s.display === "grid" || s.display === "inline-grid") delete s.display;
+  delete s.gridTemplateColumns;
+  delete s.gridTemplateRows;
+  delete s.gridColumn;
+  delete s.gridRow;
+  delete s.gridArea;
+  delete s.gridAutoFlow;
+  delete s.gridAutoColumns;
+  delete s.gridAutoRows;
+}
 
 // src/jsx-runtime.tsx
 var INTERACTIVE_MODS = /* @__PURE__ */ new Set([
@@ -2542,6 +2569,17 @@ function processElement(type, rawProps, key, isStaticChildren) {
     }, key);
   }
   const computedStyle = flatten(resolved, false);
+  if (isWeb) {
+    if (computedStyle.display === "grid" || computedStyle.display === "inline-grid") delete computedStyle.display;
+    delete computedStyle.gridTemplateColumns;
+    delete computedStyle.gridTemplateRows;
+    delete computedStyle.gridColumn;
+    delete computedStyle.gridRow;
+    delete computedStyle.gridArea;
+    delete computedStyle.gridAutoFlow;
+    delete computedStyle.gridAutoColumns;
+    delete computedStyle.gridAutoRows;
+  }
   const finalStyle = mergeStyle(computedStyle, userStyle);
   return makeElement(isStaticChildren, type, {
     ...passProps,

package/dist/jsx-runtime.mjs

@@ -2,8 +2,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-BAI72FG4.mjs";
-import "./chunk-UGBTZ7VN.mjs";
+} from "./chunk-R22W555P.mjs";
+import "./chunk-WPJY7X5I.mjs";
 export {
   Fragment,
   jsx,

package/package.json

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