@kbach/react 0.3.19 → 0.4.1

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

@@ -728,6 +728,18 @@ var UTILITY_PREFIXES = [
   "bg-opacity",
   "text-opacity",
   "border-opacity",
+  // Grid placement (longer prefixes before shorter ones)
+  "col-span",
+  "col-start",
+  "col-end",
+  "row-span",
+  "row-start",
+  "row-end",
+  "grid-cols",
+  "grid-rows",
+  "grid-flow",
+  "auto-cols",
+  "auto-rows",
   // Single-word prefixes last
   "appearance-none",
   "outline-none",
@@ -1534,13 +1546,125 @@ var RESOLVERS = {
     const r = resolveRadius(value, borderRadius, isArbitrary);
     return r !== null ? { borderBottomRightRadius: r } : null;
   },
-  // ── Grid (responsive column count: grid-1 … grid-12) ─────────────────────
-  grid: ({ value }) => {
+  // ── Grid (responsive column count: grid-1 … grid-12, or arbitrary) ───────
+  grid: ({ value, isArbitrary }) => {
     if (!value) return null;
+    if (isArbitrary) return { display: "grid", gridTemplateColumns: value };
     const n = parseInt(value, 10);
     if (isNaN(n) || n < 1 || n > 12) return null;
     return { display: "grid", gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))` };
   },
+  // ── Grid template columns/rows (Tailwind-style aliases, web-only) ──────────
+  "grid-cols": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (!value) return null;
+    if (isArbitrary) return { display: "grid", gridTemplateColumns: value };
+    if (value === "none") return { display: "grid", gridTemplateColumns: "none" };
+    const n = parseInt(value, 10);
+    if (isNaN(n) || n < 1 || n > 12) return null;
+    return { display: "grid", gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))` };
+  },
+  "grid-rows": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (!value) return null;
+    if (isArbitrary) return { gridTemplateRows: value };
+    if (value === "none") return { gridTemplateRows: "none" };
+    const n = parseInt(value, 10);
+    if (isNaN(n) || n < 1) return null;
+    return { gridTemplateRows: `repeat(${n}, minmax(0, 1fr))` };
+  },
+  // ── Grid auto flow (web-only) ─────────────────────────────────────────────
+  "grid-flow": ({ value }) => {
+    if (!isWeb) return null;
+    const flows = {
+      row: "row",
+      col: "column",
+      dense: "dense",
+      "row-dense": "row dense",
+      "col-dense": "column dense"
+    };
+    const flow = flows[value];
+    return flow ? { gridAutoFlow: flow } : null;
+  },
+  // ── Grid auto sizing (web-only) ───────────────────────────────────────────
+  "auto-cols": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (isArbitrary) return { gridAutoColumns: value };
+    const presets = {
+      auto: "auto",
+      min: "min-content",
+      max: "max-content",
+      fr: "minmax(0, 1fr)"
+    };
+    const v = presets[value];
+    return v ? { gridAutoColumns: v } : null;
+  },
+  "auto-rows": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (isArbitrary) return { gridAutoRows: value };
+    const presets = {
+      auto: "auto",
+      min: "min-content",
+      max: "max-content",
+      fr: "minmax(0, 1fr)"
+    };
+    const v = presets[value];
+    return v ? { gridAutoRows: v } : null;
+  },
+  // ── Grid column placement (web-only) ──────────────────────────────────────
+  "col-span": ({ value }) => {
+    if (!isWeb) return null;
+    if (value === "full") return { gridColumn: "1 / -1" };
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { gridColumn: `span ${n} / span ${n}` };
+  },
+  "col-start": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (value === "auto") return { gridColumnStart: "auto" };
+    if (isArbitrary) return { gridColumnStart: value };
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { gridColumnStart: n };
+  },
+  "col-end": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (value === "auto") return { gridColumnEnd: "auto" };
+    if (isArbitrary) return { gridColumnEnd: value };
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { gridColumnEnd: n };
+  },
+  col: ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (!value || value === "auto") return { gridColumn: "auto" };
+    if (isArbitrary) return { gridColumn: value };
+    return null;
+  },
+  // ── Grid row placement (web-only) ─────────────────────────────────────────
+  "row-span": ({ value }) => {
+    if (!isWeb) return null;
+    if (value === "full") return { gridRow: "1 / -1" };
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { gridRow: `span ${n} / span ${n}` };
+  },
+  "row-start": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (value === "auto") return { gridRowStart: "auto" };
+    if (isArbitrary) return { gridRowStart: value };
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { gridRowStart: n };
+  },
+  "row-end": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (value === "auto") return { gridRowEnd: "auto" };
+    if (isArbitrary) return { gridRowEnd: value };
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { gridRowEnd: n };
+  },
+  row: ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (!value || value === "auto") return { gridRow: "auto" };
+    if (isArbitrary) return { gridRow: value };
+    return null;
+  },
   // ── Flex ───────────────────────────────────────────────────────────────────
   flex: ({ value, isArbitrary }, { flex }) => {
     if (!value) return { display: "flex" };
@@ -2019,7 +2143,11 @@ var CSS_UNITLESS = /* @__PURE__ */ new Set([
   "zIndex",
   "aspectRatio",
   "columnCount",
-  "lineHeight"
+  "lineHeight",
+  "gridColumnStart",
+  "gridColumnEnd",
+  "gridRowStart",
+  "gridRowEnd"
 ]);
 function styleValueToCSS(styles) {
   return Object.entries(styles).filter(
@@ -2032,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("; ");
 }
@@ -2434,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-NM6ISARQ.mjs → chunk-V5WMKNJC.mjs}

@@ -8,7 +8,7 @@ import {
   resolve,
   useConditionalWidth,
   useGlobalDarkMode
-} from "./chunk-AW3HK2B4.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
@@ -161,6 +164,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

@@ -894,6 +894,18 @@ var UTILITY_PREFIXES = [
   "bg-opacity",
   "text-opacity",
   "border-opacity",
+  // Grid placement (longer prefixes before shorter ones)
+  "col-span",
+  "col-start",
+  "col-end",
+  "row-span",
+  "row-start",
+  "row-end",
+  "grid-cols",
+  "grid-rows",
+  "grid-flow",
+  "auto-cols",
+  "auto-rows",
   // Single-word prefixes last
   "appearance-none",
   "outline-none",
@@ -1700,13 +1712,125 @@ var RESOLVERS = {
     const r = resolveRadius(value, borderRadius, isArbitrary);
     return r !== null ? { borderBottomRightRadius: r } : null;
   },
-  // ── Grid (responsive column count: grid-1 … grid-12) ─────────────────────
-  grid: ({ value }) => {
+  // ── Grid (responsive column count: grid-1 … grid-12, or arbitrary) ───────
+  grid: ({ value, isArbitrary }) => {
     if (!value) return null;
+    if (isArbitrary) return { display: "grid", gridTemplateColumns: value };
     const n = parseInt(value, 10);
     if (isNaN(n) || n < 1 || n > 12) return null;
     return { display: "grid", gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))` };
   },
+  // ── Grid template columns/rows (Tailwind-style aliases, web-only) ──────────
+  "grid-cols": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (!value) return null;
+    if (isArbitrary) return { display: "grid", gridTemplateColumns: value };
+    if (value === "none") return { display: "grid", gridTemplateColumns: "none" };
+    const n = parseInt(value, 10);
+    if (isNaN(n) || n < 1 || n > 12) return null;
+    return { display: "grid", gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))` };
+  },
+  "grid-rows": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (!value) return null;
+    if (isArbitrary) return { gridTemplateRows: value };
+    if (value === "none") return { gridTemplateRows: "none" };
+    const n = parseInt(value, 10);
+    if (isNaN(n) || n < 1) return null;
+    return { gridTemplateRows: `repeat(${n}, minmax(0, 1fr))` };
+  },
+  // ── Grid auto flow (web-only) ─────────────────────────────────────────────
+  "grid-flow": ({ value }) => {
+    if (!isWeb) return null;
+    const flows = {
+      row: "row",
+      col: "column",
+      dense: "dense",
+      "row-dense": "row dense",
+      "col-dense": "column dense"
+    };
+    const flow = flows[value];
+    return flow ? { gridAutoFlow: flow } : null;
+  },
+  // ── Grid auto sizing (web-only) ───────────────────────────────────────────
+  "auto-cols": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (isArbitrary) return { gridAutoColumns: value };
+    const presets = {
+      auto: "auto",
+      min: "min-content",
+      max: "max-content",
+      fr: "minmax(0, 1fr)"
+    };
+    const v = presets[value];
+    return v ? { gridAutoColumns: v } : null;
+  },
+  "auto-rows": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (isArbitrary) return { gridAutoRows: value };
+    const presets = {
+      auto: "auto",
+      min: "min-content",
+      max: "max-content",
+      fr: "minmax(0, 1fr)"
+    };
+    const v = presets[value];
+    return v ? { gridAutoRows: v } : null;
+  },
+  // ── Grid column placement (web-only) ──────────────────────────────────────
+  "col-span": ({ value }) => {
+    if (!isWeb) return null;
+    if (value === "full") return { gridColumn: "1 / -1" };
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { gridColumn: `span ${n} / span ${n}` };
+  },
+  "col-start": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (value === "auto") return { gridColumnStart: "auto" };
+    if (isArbitrary) return { gridColumnStart: value };
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { gridColumnStart: n };
+  },
+  "col-end": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (value === "auto") return { gridColumnEnd: "auto" };
+    if (isArbitrary) return { gridColumnEnd: value };
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { gridColumnEnd: n };
+  },
+  col: ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (!value || value === "auto") return { gridColumn: "auto" };
+    if (isArbitrary) return { gridColumn: value };
+    return null;
+  },
+  // ── Grid row placement (web-only) ─────────────────────────────────────────
+  "row-span": ({ value }) => {
+    if (!isWeb) return null;
+    if (value === "full") return { gridRow: "1 / -1" };
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { gridRow: `span ${n} / span ${n}` };
+  },
+  "row-start": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (value === "auto") return { gridRowStart: "auto" };
+    if (isArbitrary) return { gridRowStart: value };
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { gridRowStart: n };
+  },
+  "row-end": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (value === "auto") return { gridRowEnd: "auto" };
+    if (isArbitrary) return { gridRowEnd: value };
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { gridRowEnd: n };
+  },
+  row: ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (!value || value === "auto") return { gridRow: "auto" };
+    if (isArbitrary) return { gridRow: value };
+    return null;
+  },
   // ── Flex ───────────────────────────────────────────────────────────────────
   flex: ({ value, isArbitrary }, { flex }) => {
     if (!value) return { display: "flex" };
@@ -2149,7 +2273,11 @@ var CSS_UNITLESS = /* @__PURE__ */ new Set([
   "zIndex",
   "aspectRatio",
   "columnCount",
-  "lineHeight"
+  "lineHeight",
+  "gridColumnStart",
+  "gridColumnEnd",
+  "gridRowStart",
+  "gridRowEnd"
 ]);
 function styleValueToCSS(styles) {
   return Object.entries(styles).filter(
@@ -2162,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("; ");
 }
@@ -2938,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-AW3HK2B4.mjs";
+} from "./chunk-HY6PU2XS.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";

package/dist/jsx-dev-runtime.js

@@ -797,6 +797,18 @@ var UTILITY_PREFIXES = [
   "bg-opacity",
   "text-opacity",
   "border-opacity",
+  // Grid placement (longer prefixes before shorter ones)
+  "col-span",
+  "col-start",
+  "col-end",
+  "row-span",
+  "row-start",
+  "row-end",
+  "grid-cols",
+  "grid-rows",
+  "grid-flow",
+  "auto-cols",
+  "auto-rows",
   // Single-word prefixes last
   "appearance-none",
   "outline-none",
@@ -1603,13 +1615,125 @@ var RESOLVERS = {
     const r = resolveRadius(value, borderRadius, isArbitrary);
     return r !== null ? { borderBottomRightRadius: r } : null;
   },
-  // ── Grid (responsive column count: grid-1 … grid-12) ─────────────────────
-  grid: ({ value }) => {
+  // ── Grid (responsive column count: grid-1 … grid-12, or arbitrary) ───────
+  grid: ({ value, isArbitrary }) => {
     if (!value) return null;
+    if (isArbitrary) return { display: "grid", gridTemplateColumns: value };
     const n = parseInt(value, 10);
     if (isNaN(n) || n < 1 || n > 12) return null;
     return { display: "grid", gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))` };
   },
+  // ── Grid template columns/rows (Tailwind-style aliases, web-only) ──────────
+  "grid-cols": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (!value) return null;
+    if (isArbitrary) return { display: "grid", gridTemplateColumns: value };
+    if (value === "none") return { display: "grid", gridTemplateColumns: "none" };
+    const n = parseInt(value, 10);
+    if (isNaN(n) || n < 1 || n > 12) return null;
+    return { display: "grid", gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))` };
+  },
+  "grid-rows": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (!value) return null;
+    if (isArbitrary) return { gridTemplateRows: value };
+    if (value === "none") return { gridTemplateRows: "none" };
+    const n = parseInt(value, 10);
+    if (isNaN(n) || n < 1) return null;
+    return { gridTemplateRows: `repeat(${n}, minmax(0, 1fr))` };
+  },
+  // ── Grid auto flow (web-only) ─────────────────────────────────────────────
+  "grid-flow": ({ value }) => {
+    if (!isWeb) return null;
+    const flows = {
+      row: "row",
+      col: "column",
+      dense: "dense",
+      "row-dense": "row dense",
+      "col-dense": "column dense"
+    };
+    const flow = flows[value];
+    return flow ? { gridAutoFlow: flow } : null;
+  },
+  // ── Grid auto sizing (web-only) ───────────────────────────────────────────
+  "auto-cols": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (isArbitrary) return { gridAutoColumns: value };
+    const presets = {
+      auto: "auto",
+      min: "min-content",
+      max: "max-content",
+      fr: "minmax(0, 1fr)"
+    };
+    const v = presets[value];
+    return v ? { gridAutoColumns: v } : null;
+  },
+  "auto-rows": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (isArbitrary) return { gridAutoRows: value };
+    const presets = {
+      auto: "auto",
+      min: "min-content",
+      max: "max-content",
+      fr: "minmax(0, 1fr)"
+    };
+    const v = presets[value];
+    return v ? { gridAutoRows: v } : null;
+  },
+  // ── Grid column placement (web-only) ──────────────────────────────────────
+  "col-span": ({ value }) => {
+    if (!isWeb) return null;
+    if (value === "full") return { gridColumn: "1 / -1" };
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { gridColumn: `span ${n} / span ${n}` };
+  },
+  "col-start": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (value === "auto") return { gridColumnStart: "auto" };
+    if (isArbitrary) return { gridColumnStart: value };
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { gridColumnStart: n };
+  },
+  "col-end": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (value === "auto") return { gridColumnEnd: "auto" };
+    if (isArbitrary) return { gridColumnEnd: value };
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { gridColumnEnd: n };
+  },
+  col: ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (!value || value === "auto") return { gridColumn: "auto" };
+    if (isArbitrary) return { gridColumn: value };
+    return null;
+  },
+  // ── Grid row placement (web-only) ─────────────────────────────────────────
+  "row-span": ({ value }) => {
+    if (!isWeb) return null;
+    if (value === "full") return { gridRow: "1 / -1" };
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { gridRow: `span ${n} / span ${n}` };
+  },
+  "row-start": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (value === "auto") return { gridRowStart: "auto" };
+    if (isArbitrary) return { gridRowStart: value };
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { gridRowStart: n };
+  },
+  "row-end": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (value === "auto") return { gridRowEnd: "auto" };
+    if (isArbitrary) return { gridRowEnd: value };
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { gridRowEnd: n };
+  },
+  row: ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (!value || value === "auto") return { gridRow: "auto" };
+    if (isArbitrary) return { gridRow: value };
+    return null;
+  },
   // ── Flex ───────────────────────────────────────────────────────────────────
   flex: ({ value, isArbitrary }, { flex }) => {
     if (!value) return { display: "flex" };
@@ -2040,7 +2164,11 @@ var CSS_UNITLESS = /* @__PURE__ */ new Set([
   "zIndex",
   "aspectRatio",
   "columnCount",
-  "lineHeight"
+  "lineHeight",
+  "gridColumnStart",
+  "gridColumnEnd",
+  "gridRowStart",
+  "gridRowEnd"
 ]);
 function styleValueToCSS(styles) {
   return Object.entries(styles).filter(
@@ -2053,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("; ");
 }
@@ -2417,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;
       },
@@ -2461,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;
@@ -2478,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
@@ -2590,6 +2724,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-NM6ISARQ.mjs";
-import "./chunk-AW3HK2B4.mjs";
+} from "./chunk-V5WMKNJC.mjs";
+import "./chunk-HY6PU2XS.mjs";
 
 // src/jsx-dev-runtime.tsx
 function jsxDEV(type, props, key, isStaticChildren, _source, _self) {

package/dist/jsx-runtime.js

@@ -796,6 +796,18 @@ var UTILITY_PREFIXES = [
   "bg-opacity",
   "text-opacity",
   "border-opacity",
+  // Grid placement (longer prefixes before shorter ones)
+  "col-span",
+  "col-start",
+  "col-end",
+  "row-span",
+  "row-start",
+  "row-end",
+  "grid-cols",
+  "grid-rows",
+  "grid-flow",
+  "auto-cols",
+  "auto-rows",
   // Single-word prefixes last
   "appearance-none",
   "outline-none",
@@ -1602,13 +1614,125 @@ var RESOLVERS = {
     const r = resolveRadius(value, borderRadius, isArbitrary);
     return r !== null ? { borderBottomRightRadius: r } : null;
   },
-  // ── Grid (responsive column count: grid-1 … grid-12) ─────────────────────
-  grid: ({ value }) => {
+  // ── Grid (responsive column count: grid-1 … grid-12, or arbitrary) ───────
+  grid: ({ value, isArbitrary }) => {
     if (!value) return null;
+    if (isArbitrary) return { display: "grid", gridTemplateColumns: value };
     const n = parseInt(value, 10);
     if (isNaN(n) || n < 1 || n > 12) return null;
     return { display: "grid", gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))` };
   },
+  // ── Grid template columns/rows (Tailwind-style aliases, web-only) ──────────
+  "grid-cols": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (!value) return null;
+    if (isArbitrary) return { display: "grid", gridTemplateColumns: value };
+    if (value === "none") return { display: "grid", gridTemplateColumns: "none" };
+    const n = parseInt(value, 10);
+    if (isNaN(n) || n < 1 || n > 12) return null;
+    return { display: "grid", gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))` };
+  },
+  "grid-rows": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (!value) return null;
+    if (isArbitrary) return { gridTemplateRows: value };
+    if (value === "none") return { gridTemplateRows: "none" };
+    const n = parseInt(value, 10);
+    if (isNaN(n) || n < 1) return null;
+    return { gridTemplateRows: `repeat(${n}, minmax(0, 1fr))` };
+  },
+  // ── Grid auto flow (web-only) ─────────────────────────────────────────────
+  "grid-flow": ({ value }) => {
+    if (!isWeb) return null;
+    const flows = {
+      row: "row",
+      col: "column",
+      dense: "dense",
+      "row-dense": "row dense",
+      "col-dense": "column dense"
+    };
+    const flow = flows[value];
+    return flow ? { gridAutoFlow: flow } : null;
+  },
+  // ── Grid auto sizing (web-only) ───────────────────────────────────────────
+  "auto-cols": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (isArbitrary) return { gridAutoColumns: value };
+    const presets = {
+      auto: "auto",
+      min: "min-content",
+      max: "max-content",
+      fr: "minmax(0, 1fr)"
+    };
+    const v = presets[value];
+    return v ? { gridAutoColumns: v } : null;
+  },
+  "auto-rows": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (isArbitrary) return { gridAutoRows: value };
+    const presets = {
+      auto: "auto",
+      min: "min-content",
+      max: "max-content",
+      fr: "minmax(0, 1fr)"
+    };
+    const v = presets[value];
+    return v ? { gridAutoRows: v } : null;
+  },
+  // ── Grid column placement (web-only) ──────────────────────────────────────
+  "col-span": ({ value }) => {
+    if (!isWeb) return null;
+    if (value === "full") return { gridColumn: "1 / -1" };
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { gridColumn: `span ${n} / span ${n}` };
+  },
+  "col-start": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (value === "auto") return { gridColumnStart: "auto" };
+    if (isArbitrary) return { gridColumnStart: value };
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { gridColumnStart: n };
+  },
+  "col-end": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (value === "auto") return { gridColumnEnd: "auto" };
+    if (isArbitrary) return { gridColumnEnd: value };
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { gridColumnEnd: n };
+  },
+  col: ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (!value || value === "auto") return { gridColumn: "auto" };
+    if (isArbitrary) return { gridColumn: value };
+    return null;
+  },
+  // ── Grid row placement (web-only) ─────────────────────────────────────────
+  "row-span": ({ value }) => {
+    if (!isWeb) return null;
+    if (value === "full") return { gridRow: "1 / -1" };
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { gridRow: `span ${n} / span ${n}` };
+  },
+  "row-start": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (value === "auto") return { gridRowStart: "auto" };
+    if (isArbitrary) return { gridRowStart: value };
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { gridRowStart: n };
+  },
+  "row-end": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (value === "auto") return { gridRowEnd: "auto" };
+    if (isArbitrary) return { gridRowEnd: value };
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { gridRowEnd: n };
+  },
+  row: ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (!value || value === "auto") return { gridRow: "auto" };
+    if (isArbitrary) return { gridRow: value };
+    return null;
+  },
   // ── Flex ───────────────────────────────────────────────────────────────────
   flex: ({ value, isArbitrary }, { flex }) => {
     if (!value) return { display: "flex" };
@@ -2039,7 +2163,11 @@ var CSS_UNITLESS = /* @__PURE__ */ new Set([
   "zIndex",
   "aspectRatio",
   "columnCount",
-  "lineHeight"
+  "lineHeight",
+  "gridColumnStart",
+  "gridColumnEnd",
+  "gridRowStart",
+  "gridRowEnd"
 ]);
 function styleValueToCSS(styles) {
   return Object.entries(styles).filter(
@@ -2052,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("; ");
 }
@@ -2416,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;
       },
@@ -2460,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;
@@ -2477,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
@@ -2589,6 +2723,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-NM6ISARQ.mjs";
-import "./chunk-AW3HK2B4.mjs";
+} from "./chunk-V5WMKNJC.mjs";
+import "./chunk-HY6PU2XS.mjs";
 export {
   Fragment,
   jsx,

package/package.json

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