@kbach/react 0.3.14 → 0.3.16

package/dist/{chunk-R22W555P.mjs → chunk-7DGFJPDP.mjs}

@@ -8,7 +8,7 @@ import {
   resolve,
   useConditionalWidth,
   useGlobalDarkMode
-} from "./chunk-WPJY7X5I.mjs";
+} from "./chunk-PDPOXGSG.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);
@@ -127,12 +127,14 @@ function processElement(type, rawProps, key, isStaticChildren) {
     return makeElement(isStaticChildren, type, rawProps, key);
   }
   const config = getConfig();
+  const isGrdOnWeb = isWeb && classStr != null && /(?:^|\s)grd(?:\s|$)/.test(classStr);
+  const actualType = isGrdOnWeb ? "div" : type;
   const resolved = __kbachStyles ?? (classStr ? resolve(classStr, config.theme, config.darkMode) : {});
   const { style: userStyle, ...passProps } = omitConsumed(rawProps);
   const { interactive, modeOrResponsive } = bucketMods(resolved);
   if (interactive) {
     return _jsx(InteractiveWrapper, {
-      Component: type,
+      Component: actualType,
       resolvedStyle: resolved,
       ...isWeb && classStr ? { className: classStr } : {},
       style: userStyle,
@@ -141,7 +143,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
   }
   if (modeOrResponsive) {
     return _jsx(DarkWrapper, {
-      Component: type,
+      Component: actualType,
       resolvedStyle: resolved,
       ...isWeb && classStr ? { className: classStr } : {},
       style: userStyle,
@@ -149,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;
@@ -161,7 +163,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
     delete computedStyle.gridAutoRows;
   }
   const finalStyle = mergeStyle(computedStyle, userStyle);
-  return makeElement(isStaticChildren, type, {
+  return makeElement(isStaticChildren, actualType, {
     ...passProps,
     style: finalStyle,
     ...isWeb && classStr ? { className: classStr } : {}

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

@@ -829,6 +829,7 @@ var STANDALONE_UTILITIES = /* @__PURE__ */ new Set([
   "grid",
   "inline-flex",
   "inline-grid",
+  "grd",
   "hidden",
   "contents",
   "flow-root",
@@ -1142,6 +1143,7 @@ var STANDALONE = {
   "inline-block": isWeb ? { display: "inline-block" } : null,
   inline: isWeb ? { display: "inline" } : null,
   grid: isWeb ? { display: "grid" } : null,
+  grd: isWeb ? { display: "grid" } : null,
   "inline-flex": { display: isWeb ? "inline-flex" : "flex" },
   "inline-grid": isWeb ? { display: "inline-grid" } : null,
   hidden: { display: "none" },
@@ -2416,7 +2418,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/index.js

@@ -995,6 +995,7 @@ var STANDALONE_UTILITIES = /* @__PURE__ */ new Set([
   "grid",
   "inline-flex",
   "inline-grid",
+  "grd",
   "hidden",
   "contents",
   "flow-root",
@@ -1308,6 +1309,7 @@ var STANDALONE = {
   "inline-block": isWeb ? { display: "inline-block" } : null,
   inline: isWeb ? { display: "inline" } : null,
   grid: isWeb ? { display: "grid" } : null,
+  grd: isWeb ? { display: "grid" } : null,
   "inline-flex": { display: isWeb ? "inline-flex" : "flex" },
   "inline-grid": isWeb ? { display: "inline-grid" } : null,
   hidden: { display: "none" },
@@ -2920,7 +2922,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-WPJY7X5I.mjs";
+} from "./chunk-PDPOXGSG.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";

package/dist/jsx-dev-runtime.js

@@ -898,6 +898,7 @@ var STANDALONE_UTILITIES = /* @__PURE__ */ new Set([
   "grid",
   "inline-flex",
   "inline-grid",
+  "grd",
   "hidden",
   "contents",
   "flow-root",
@@ -1211,6 +1212,7 @@ var STANDALONE = {
   "inline-block": isWeb ? { display: "inline-block" } : null,
   inline: isWeb ? { display: "inline" } : null,
   grid: isWeb ? { display: "grid" } : null,
+  grd: isWeb ? { display: "grid" } : null,
   "inline-flex": { display: isWeb ? "inline-flex" : "flex" },
   "inline-grid": isWeb ? { display: "inline-grid" } : null,
   hidden: { display: "none" },
@@ -2399,7 +2401,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;
@@ -2453,7 +2455,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);
@@ -2548,12 +2550,14 @@ function processElement(type, rawProps, key, isStaticChildren) {
     return makeElement(isStaticChildren, type, rawProps, key);
   }
   const config = getConfig();
+  const isGrdOnWeb = isWeb && classStr != null && /(?:^|\s)grd(?:\s|$)/.test(classStr);
+  const actualType = isGrdOnWeb ? "div" : type;
   const resolved = __kbachStyles ?? (classStr ? resolve(classStr, config.theme, config.darkMode) : {});
   const { style: userStyle, ...passProps } = omitConsumed(rawProps);
   const { interactive, modeOrResponsive } = bucketMods(resolved);
   if (interactive) {
     return (0, import_jsx_runtime.jsx)(InteractiveWrapper, {
-      Component: type,
+      Component: actualType,
       resolvedStyle: resolved,
       ...isWeb && classStr ? { className: classStr } : {},
       style: userStyle,
@@ -2562,7 +2566,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
   }
   if (modeOrResponsive) {
     return (0, import_jsx_runtime.jsx)(DarkWrapper, {
-      Component: type,
+      Component: actualType,
       resolvedStyle: resolved,
       ...isWeb && classStr ? { className: classStr } : {},
       style: userStyle,
@@ -2570,7 +2574,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;
@@ -2582,7 +2586,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
     delete computedStyle.gridAutoRows;
   }
   const finalStyle = mergeStyle(computedStyle, userStyle);
-  return makeElement(isStaticChildren, type, {
+  return makeElement(isStaticChildren, actualType, {
     ...passProps,
     style: finalStyle,
     ...isWeb && classStr ? { className: classStr } : {}

package/dist/jsx-dev-runtime.mjs

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

package/dist/jsx-runtime.js

@@ -897,6 +897,7 @@ var STANDALONE_UTILITIES = /* @__PURE__ */ new Set([
   "grid",
   "inline-flex",
   "inline-grid",
+  "grd",
   "hidden",
   "contents",
   "flow-root",
@@ -1210,6 +1211,7 @@ var STANDALONE = {
   "inline-block": isWeb ? { display: "inline-block" } : null,
   inline: isWeb ? { display: "inline" } : null,
   grid: isWeb ? { display: "grid" } : null,
+  grd: isWeb ? { display: "grid" } : null,
   "inline-flex": { display: isWeb ? "inline-flex" : "flex" },
   "inline-grid": isWeb ? { display: "inline-grid" } : null,
   hidden: { display: "none" },
@@ -2398,7 +2400,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;
@@ -2452,7 +2454,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);
@@ -2547,12 +2549,14 @@ function processElement(type, rawProps, key, isStaticChildren) {
     return makeElement(isStaticChildren, type, rawProps, key);
   }
   const config = getConfig();
+  const isGrdOnWeb = isWeb && classStr != null && /(?:^|\s)grd(?:\s|$)/.test(classStr);
+  const actualType = isGrdOnWeb ? "div" : type;
   const resolved = __kbachStyles ?? (classStr ? resolve(classStr, config.theme, config.darkMode) : {});
   const { style: userStyle, ...passProps } = omitConsumed(rawProps);
   const { interactive, modeOrResponsive } = bucketMods(resolved);
   if (interactive) {
     return (0, import_jsx_runtime.jsx)(InteractiveWrapper, {
-      Component: type,
+      Component: actualType,
       resolvedStyle: resolved,
       ...isWeb && classStr ? { className: classStr } : {},
       style: userStyle,
@@ -2561,7 +2565,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
   }
   if (modeOrResponsive) {
     return (0, import_jsx_runtime.jsx)(DarkWrapper, {
-      Component: type,
+      Component: actualType,
       resolvedStyle: resolved,
       ...isWeb && classStr ? { className: classStr } : {},
       style: userStyle,
@@ -2569,7 +2573,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;
@@ -2581,7 +2585,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
     delete computedStyle.gridAutoRows;
   }
   const finalStyle = mergeStyle(computedStyle, userStyle);
-  return makeElement(isStaticChildren, type, {
+  return makeElement(isStaticChildren, actualType, {
     ...passProps,
     style: finalStyle,
     ...isWeb && classStr ? { className: classStr } : {}

package/dist/jsx-runtime.mjs

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

package/package.json

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