@kbach/react 0.3.11 → 0.3.13

package/dist/{chunk-PIVTTJGI.mjs → chunk-BBWDCPU6.mjs}

@@ -8,7 +8,7 @@ import {
   resolve,
   useConditionalWidth,
   useGlobalDarkMode
-} from "./chunk-SMSQ7JQV.mjs";
+} from "./chunk-XL3F5GRY.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs, Fragment } from "react/jsx-runtime";

package/dist/{chunk-SMSQ7JQV.mjs → chunk-XL3F5GRY.mjs}

@@ -1532,6 +1532,13 @@ var RESOLVERS = {
     const r = resolveRadius(value, borderRadius, isArbitrary);
     return r !== null ? { borderBottomRightRadius: r } : null;
   },
+  // ── Grid (responsive column count: grid-1 … grid-12) ─────────────────────
+  grid: ({ value }) => {
+    if (!value || !isWeb) 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))` };
+  },
   // ── Flex ───────────────────────────────────────────────────────────────────
   flex: ({ value, isArbitrary }, { flex }) => {
     if (!value) return { display: "flex" };
@@ -2017,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) {

package/dist/index.js

@@ -1698,6 +1698,13 @@ var RESOLVERS = {
     const r = resolveRadius(value, borderRadius, isArbitrary);
     return r !== null ? { borderBottomRightRadius: r } : null;
   },
+  // ── Grid (responsive column count: grid-1 … grid-12) ─────────────────────
+  grid: ({ value }) => {
+    if (!value || !isWeb) 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))` };
+  },
   // ── Flex ───────────────────────────────────────────────────────────────────
   flex: ({ value, isArbitrary }, { flex }) => {
     if (!value) return { display: "flex" };
@@ -2147,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) {

package/dist/index.mjs

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

package/dist/jsx-dev-runtime.js

@@ -1601,6 +1601,13 @@ var RESOLVERS = {
     const r = resolveRadius(value, borderRadius, isArbitrary);
     return r !== null ? { borderBottomRightRadius: r } : null;
   },
+  // ── Grid (responsive column count: grid-1 … grid-12) ─────────────────────
+  grid: ({ value }) => {
+    if (!value || !isWeb) 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))` };
+  },
   // ── Flex ───────────────────────────────────────────────────────────────────
   flex: ({ value, isArbitrary }, { flex }) => {
     if (!value) return { display: "flex" };
@@ -2038,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) {

package/dist/jsx-dev-runtime.mjs

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

package/dist/jsx-runtime.js

@@ -1600,6 +1600,13 @@ var RESOLVERS = {
     const r = resolveRadius(value, borderRadius, isArbitrary);
     return r !== null ? { borderBottomRightRadius: r } : null;
   },
+  // ── Grid (responsive column count: grid-1 … grid-12) ─────────────────────
+  grid: ({ value }) => {
+    if (!value || !isWeb) 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))` };
+  },
   // ── Flex ───────────────────────────────────────────────────────────────────
   flex: ({ value, isArbitrary }, { flex }) => {
     if (!value) return { display: "flex" };
@@ -2037,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) {

package/dist/jsx-runtime.mjs

@@ -2,8 +2,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-PIVTTJGI.mjs";
-import "./chunk-SMSQ7JQV.mjs";
+} from "./chunk-BBWDCPU6.mjs";
+import "./chunk-XL3F5GRY.mjs";
 export {
   Fragment,
   jsx,

package/package.json

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