@kbach/react 0.4.0 → 0.4.2

package/dist/{chunk-QXJ6A5GS.mjs → chunk-HY6PU2XS.mjs}

@@ -2160,7 +2160,7 @@ function styleValueToCSS(styles) {
     } else {
       cssVal = String(val);
     }
-    const important = prop === "display" && (cssVal === "grid" || cssVal === "inline-grid") ? " !important" : "";
+    const important = prop === "display" && (cssVal === "grid" || cssVal === "inline-grid") || prop === "position" && (cssVal === "sticky" || cssVal === "fixed" || cssVal === "static") ? " !important" : "";
     return `${cssProp}: ${cssVal}${important}`;
   }).join("; ");
 }
@@ -2562,6 +2562,9 @@ var InteractiveWrapper = forwardRef(
           delete s.gridAutoFlow;
           delete s.gridAutoColumns;
           delete s.gridAutoRows;
+          if (s.position === "sticky" || s.position === "fixed" || s.position === "static") {
+            delete s.position;
+          }
         }
         return s;
       },

package/dist/{chunk-QVZTZMJ7.mjs → chunk-JFQ7QYQM.mjs}

@@ -8,7 +8,7 @@ import {
   resolve,
   useConditionalWidth,
   useGlobalDarkMode
-} from "./chunk-QXJ6A5GS.mjs";
+} from "./chunk-HY6PU2XS.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs, Fragment } from "react/jsx-runtime";
@@ -32,14 +32,14 @@ var DarkWrapper = React.forwardRef(
     const width = useConditionalWidth(needsWidth);
     const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
     const computedStyle = flatten(resolvedStyle, isDark, {}, breakpoints);
-    if (typeof Component !== "string") stripWebGridProps(computedStyle);
+    if (typeof Component !== "string") stripWebOnlyProps(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) {
+function stripWebOnlyProps(s) {
   if (s.display === "grid" || s.display === "inline-grid") delete s.display;
   delete s.gridTemplateColumns;
   delete s.gridTemplateRows;
@@ -49,6 +49,9 @@ function stripWebGridProps(s) {
   delete s.gridAutoFlow;
   delete s.gridAutoColumns;
   delete s.gridAutoRows;
+  if (s.position === "sticky" || s.position === "fixed" || s.position === "static") {
+    delete s.position;
+  }
 }
 
 // src/jsx-runtime.tsx
@@ -127,8 +130,10 @@ function processElement(type, rawProps, key, isStaticChildren) {
     return makeElement(isStaticChildren, type, rawProps, key);
   }
   const config = getConfig();
-  const isGrdOnWeb = typeof document !== "undefined" && classStr != null && /(?:^|\s)grd(?:\s|$)/.test(classStr);
-  const actualType = isGrdOnWeb ? "div" : type;
+  const isOnWeb = typeof document !== "undefined" && classStr != null;
+  const isGrdOnWeb = isOnWeb && /(?:^|\s)grd(?:\s|$)/.test(classStr);
+  const hasWebPosition = isOnWeb && /(?:^|\s)(?:[\w-]+:)*(?:fixed|sticky)(?:\s|$)/.test(classStr);
+  const actualType = isGrdOnWeb || hasWebPosition ? "div" : type;
   const resolved = __kbachStyles ?? (classStr ? resolve(classStr, config.theme, config.darkMode) : {});
   const { style: userStyle, ...passProps } = omitConsumed(rawProps);
   const { interactive, modeOrResponsive } = bucketMods(resolved);
@@ -161,6 +166,9 @@ function processElement(type, rawProps, key, isStaticChildren) {
     delete computedStyle.gridAutoFlow;
     delete computedStyle.gridAutoColumns;
     delete computedStyle.gridAutoRows;
+    if (computedStyle.position === "sticky" || computedStyle.position === "fixed" || computedStyle.position === "static") {
+      delete computedStyle.position;
+    }
   }
   const finalStyle = mergeStyle(computedStyle, userStyle);
   return makeElement(isStaticChildren, actualType, {

package/dist/index.js

@@ -2290,7 +2290,7 @@ function styleValueToCSS(styles) {
     } else {
       cssVal = String(val);
     }
-    const important = prop === "display" && (cssVal === "grid" || cssVal === "inline-grid") ? " !important" : "";
+    const important = prop === "display" && (cssVal === "grid" || cssVal === "inline-grid") || prop === "position" && (cssVal === "sticky" || cssVal === "fixed" || cssVal === "static") ? " !important" : "";
     return `${cssProp}: ${cssVal}${important}`;
   }).join("; ");
 }
@@ -3066,6 +3066,9 @@ var InteractiveWrapper = (0, import_react9.forwardRef)(
           delete s.gridAutoFlow;
           delete s.gridAutoColumns;
           delete s.gridAutoRows;
+          if (s.position === "sticky" || s.position === "fixed" || s.position === "static") {
+            delete s.position;
+          }
         }
         return s;
       },

package/dist/index.mjs

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

package/dist/jsx-dev-runtime.js

@@ -2181,7 +2181,7 @@ function styleValueToCSS(styles) {
     } else {
       cssVal = String(val);
     }
-    const important = prop === "display" && (cssVal === "grid" || cssVal === "inline-grid") ? " !important" : "";
+    const important = prop === "display" && (cssVal === "grid" || cssVal === "inline-grid") || prop === "position" && (cssVal === "sticky" || cssVal === "fixed" || cssVal === "static") ? " !important" : "";
     return `${cssProp}: ${cssVal}${important}`;
   }).join("; ");
 }
@@ -2545,6 +2545,9 @@ var InteractiveWrapper = (0, import_react3.forwardRef)(
           delete s.gridAutoFlow;
           delete s.gridAutoColumns;
           delete s.gridAutoRows;
+          if (s.position === "sticky" || s.position === "fixed" || s.position === "static") {
+            delete s.position;
+          }
         }
         return s;
       },
@@ -2589,14 +2592,14 @@ var DarkWrapper = import_react4.default.forwardRef(
     const width = useConditionalWidth(needsWidth);
     const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
     const computedStyle = flatten(resolvedStyle, isDark, {}, breakpoints);
-    if (typeof Component !== "string") stripWebGridProps(computedStyle);
+    if (typeof Component !== "string") stripWebOnlyProps(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) {
+function stripWebOnlyProps(s) {
   if (s.display === "grid" || s.display === "inline-grid") delete s.display;
   delete s.gridTemplateColumns;
   delete s.gridTemplateRows;
@@ -2606,6 +2609,9 @@ function stripWebGridProps(s) {
   delete s.gridAutoFlow;
   delete s.gridAutoColumns;
   delete s.gridAutoRows;
+  if (s.position === "sticky" || s.position === "fixed" || s.position === "static") {
+    delete s.position;
+  }
 }
 
 // src/jsx-runtime.tsx
@@ -2684,8 +2690,10 @@ function processElement(type, rawProps, key, isStaticChildren) {
     return makeElement(isStaticChildren, type, rawProps, key);
   }
   const config = getConfig();
-  const isGrdOnWeb = typeof document !== "undefined" && classStr != null && /(?:^|\s)grd(?:\s|$)/.test(classStr);
-  const actualType = isGrdOnWeb ? "div" : type;
+  const isOnWeb = typeof document !== "undefined" && classStr != null;
+  const isGrdOnWeb = isOnWeb && /(?:^|\s)grd(?:\s|$)/.test(classStr);
+  const hasWebPosition = isOnWeb && /(?:^|\s)(?:[\w-]+:)*(?:fixed|sticky)(?:\s|$)/.test(classStr);
+  const actualType = isGrdOnWeb || hasWebPosition ? "div" : type;
   const resolved = __kbachStyles ?? (classStr ? resolve(classStr, config.theme, config.darkMode) : {});
   const { style: userStyle, ...passProps } = omitConsumed(rawProps);
   const { interactive, modeOrResponsive } = bucketMods(resolved);
@@ -2718,6 +2726,9 @@ function processElement(type, rawProps, key, isStaticChildren) {
     delete computedStyle.gridAutoFlow;
     delete computedStyle.gridAutoColumns;
     delete computedStyle.gridAutoRows;
+    if (computedStyle.position === "sticky" || computedStyle.position === "fixed" || computedStyle.position === "static") {
+      delete computedStyle.position;
+    }
   }
   const finalStyle = mergeStyle(computedStyle, userStyle);
   return makeElement(isStaticChildren, actualType, {

package/dist/jsx-dev-runtime.mjs

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

package/dist/jsx-runtime.js

@@ -2180,7 +2180,7 @@ function styleValueToCSS(styles) {
     } else {
       cssVal = String(val);
     }
-    const important = prop === "display" && (cssVal === "grid" || cssVal === "inline-grid") ? " !important" : "";
+    const important = prop === "display" && (cssVal === "grid" || cssVal === "inline-grid") || prop === "position" && (cssVal === "sticky" || cssVal === "fixed" || cssVal === "static") ? " !important" : "";
     return `${cssProp}: ${cssVal}${important}`;
   }).join("; ");
 }
@@ -2544,6 +2544,9 @@ var InteractiveWrapper = (0, import_react3.forwardRef)(
           delete s.gridAutoFlow;
           delete s.gridAutoColumns;
           delete s.gridAutoRows;
+          if (s.position === "sticky" || s.position === "fixed" || s.position === "static") {
+            delete s.position;
+          }
         }
         return s;
       },
@@ -2588,14 +2591,14 @@ var DarkWrapper = import_react4.default.forwardRef(
     const width = useConditionalWidth(needsWidth);
     const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
     const computedStyle = flatten(resolvedStyle, isDark, {}, breakpoints);
-    if (typeof Component !== "string") stripWebGridProps(computedStyle);
+    if (typeof Component !== "string") stripWebOnlyProps(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) {
+function stripWebOnlyProps(s) {
   if (s.display === "grid" || s.display === "inline-grid") delete s.display;
   delete s.gridTemplateColumns;
   delete s.gridTemplateRows;
@@ -2605,6 +2608,9 @@ function stripWebGridProps(s) {
   delete s.gridAutoFlow;
   delete s.gridAutoColumns;
   delete s.gridAutoRows;
+  if (s.position === "sticky" || s.position === "fixed" || s.position === "static") {
+    delete s.position;
+  }
 }
 
 // src/jsx-runtime.tsx
@@ -2683,8 +2689,10 @@ function processElement(type, rawProps, key, isStaticChildren) {
     return makeElement(isStaticChildren, type, rawProps, key);
   }
   const config = getConfig();
-  const isGrdOnWeb = typeof document !== "undefined" && classStr != null && /(?:^|\s)grd(?:\s|$)/.test(classStr);
-  const actualType = isGrdOnWeb ? "div" : type;
+  const isOnWeb = typeof document !== "undefined" && classStr != null;
+  const isGrdOnWeb = isOnWeb && /(?:^|\s)grd(?:\s|$)/.test(classStr);
+  const hasWebPosition = isOnWeb && /(?:^|\s)(?:[\w-]+:)*(?:fixed|sticky)(?:\s|$)/.test(classStr);
+  const actualType = isGrdOnWeb || hasWebPosition ? "div" : type;
   const resolved = __kbachStyles ?? (classStr ? resolve(classStr, config.theme, config.darkMode) : {});
   const { style: userStyle, ...passProps } = omitConsumed(rawProps);
   const { interactive, modeOrResponsive } = bucketMods(resolved);
@@ -2717,6 +2725,9 @@ function processElement(type, rawProps, key, isStaticChildren) {
     delete computedStyle.gridAutoFlow;
     delete computedStyle.gridAutoColumns;
     delete computedStyle.gridAutoRows;
+    if (computedStyle.position === "sticky" || computedStyle.position === "fixed" || computedStyle.position === "static") {
+      delete computedStyle.position;
+    }
   }
   const finalStyle = mergeStyle(computedStyle, userStyle);
   return makeElement(isStaticChildren, actualType, {

package/dist/jsx-runtime.mjs

@@ -2,8 +2,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-QVZTZMJ7.mjs";
-import "./chunk-QXJ6A5GS.mjs";
+} from "./chunk-JFQ7QYQM.mjs";
+import "./chunk-HY6PU2XS.mjs";
 export {
   Fragment,
   jsx,

package/package.json

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