@kbach/react 0.5.43 → 0.5.45

package/dist/{chunk-IBAKFGFG.mjs → chunk-52N32L7A.mjs}

@@ -2549,6 +2549,13 @@ function getDefaultFontFamily() {
 }
 var _styleEl = null;
 var _injectedRules = new LRUCache(5e4);
+var _CSS_DISABLED_KEY = "__kbach_runtime_css_disabled__";
+function disableRuntimeCSS() {
+  globalThis[_CSS_DISABLED_KEY] = true;
+}
+function isRuntimeCSSDisabled() {
+  return !!globalThis[_CSS_DISABLED_KEY];
+}
 function getStyleEl() {
   if (_styleEl) return _styleEl;
   _styleEl = document.createElement("style");
@@ -2557,6 +2564,7 @@ function getStyleEl() {
   return _styleEl;
 }
 function injectRule(rule) {
+  if (isRuntimeCSSDisabled()) return;
   if (_injectedRules.has(rule)) return;
   _injectedRules.set(rule, true);
   try {
@@ -2573,7 +2581,7 @@ function getGlobalStyleEl() {
   return _globalStyleEl;
 }
 function injectGlobalStyles(theme) {
-  if (typeof document === "undefined") return;
+  if (typeof document === "undefined" || isRuntimeCSSDisabled()) return;
   const rules = [];
   const ff = theme.fontFamily;
   if (ff.sans && ff.sans !== "System") {
@@ -3022,6 +3030,8 @@ export {
   subscribeGlobalWidth,
   getActiveBreakpoints,
   getDefaultFontFamily,
+  disableRuntimeCSS,
+  isRuntimeCSSDisabled,
   generateClassCSS,
   resolve,
   flatten,

package/dist/{chunk-SX43SDOD.mjs → chunk-BBI6IU22.mjs}

@@ -6,7 +6,7 @@ import {
   isNative,
   isWeb,
   subscribeGlobalWidth
-} from "./chunk-IBAKFGFG.mjs";
+} from "./chunk-52N32L7A.mjs";
 
 // src/core/darkModeStore.ts
 var KEY = "__kbach_dark_store__";
@@ -198,7 +198,8 @@ var InteractiveWrapper = forwardRef(
       [resolvedStyle, isDark, pressed, hovered, focused, width]
       // eslint-disable-line react-hooks/exhaustive-deps
     );
-    const finalStyle = styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
+    const isWebHTMLElement = !isNative && typeof Component === "string";
+    const finalStyle = isWebHTMLElement ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
     const { children, ...restWithoutChildren } = rest;
     const componentProps = {
       ref,

package/dist/{chunk-4NTWFAHW.mjs → chunk-MIBPTKXT.mjs}

@@ -4,7 +4,7 @@ import {
   hasResponsiveBuckets,
   useConditionalWidth,
   useGlobalDarkMode
-} from "./chunk-SX43SDOD.mjs";
+} from "./chunk-BBI6IU22.mjs";
 import {
   flatten,
   getActiveBreakpoints,
@@ -14,9 +14,10 @@ import {
   getModeModifiers,
   getResponsiveModifiers,
   isNative,
+  isRuntimeCSSDisabled,
   normalizeClassString,
   resolve
-} from "./chunk-IBAKFGFG.mjs";
+} from "./chunk-52N32L7A.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -33,7 +34,8 @@ var DarkWrapper = React.forwardRef(
     const computedStyle = flatten(resolvedStyle, isDark, {}, breakpoints);
     stripInternalMarkers(computedStyle);
     if (typeof Component !== "string") stripWebOnlyProps(computedStyle);
-    const finalStyle = styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
+    const isWebHTMLElement = !isNative && typeof Component === "string";
+    const finalStyle = isWebHTMLElement ? styleProp ?? void 0 : 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);
   }
@@ -121,27 +123,6 @@ function mergeStyle(computed, userStyle) {
 function makeElement(isStaticChildren, type, props, key) {
   return (isStaticChildren ? _jsxs : _jsx)(type, props, key);
 }
-function hasGridStyles(resolved) {
-  for (const styles of Object.values(resolved)) {
-    if (!styles) continue;
-    if (styles.display === "grid" || styles.display === "inline-grid") return true;
-    if ("gridTemplateColumns" in styles || "gridTemplateRows" in styles) return true;
-    if ("gridColumn" in styles || "gridRow" in styles) return true;
-    if ("gridColumnStart" in styles || "gridColumnEnd" in styles) return true;
-    if ("gridRowStart" in styles || "gridRowEnd" in styles) return true;
-    if ("gridAutoFlow" in styles || "gridAutoColumns" in styles || "gridAutoRows" in styles) return true;
-    if ("placeItems" in styles || "placeContent" in styles || "justifyItems" in styles) return true;
-    if ("placeSelf" in styles || "justifySelf" in styles) return true;
-  }
-  return false;
-}
-function hasWebPositionStyles(resolved) {
-  for (const styles of Object.values(resolved)) {
-    if (!styles) continue;
-    if (styles.position === "sticky" || styles.position === "fixed" || styles.position === "static") return true;
-  }
-  return false;
-}
 function stripInternalMarkers2(s) {
   delete s.__divideX;
   delete s.__divideY;
@@ -177,6 +158,14 @@ function processElement(type, rawProps, key, isStaticChildren) {
   if (!rawProps) return _jsx(type, null, key);
   const { className, kb: kbProp, __kbachStyles, __kbachClasses } = rawProps;
   const classStr = className ?? kbProp ?? __kbachClasses;
+  if (!isNative && isRuntimeCSSDisabled() && classStr && !__kbachStyles) {
+    const { style: userStyle2, ...passProps2 } = omitConsumed(rawProps);
+    return makeElement(isStaticChildren, type, {
+      ...passProps2,
+      className: normalizeClassString(classStr),
+      ...userStyle2 !== void 0 ? { style: userStyle2 } : {}
+    }, key);
+  }
   if (!classStr && !__kbachStyles) {
     const defaultFont = getCachedDefaultFont();
     if (!defaultFont) return makeElement(isStaticChildren, type, rawProps, key);
@@ -188,12 +177,9 @@ function processElement(type, rawProps, key, isStaticChildren) {
   const resolved = __kbachStyles ?? (classStr ? resolve(classStr, config.theme, config.darkMode) : {});
   const { style: userStyle, ...passProps } = omitConsumed(rawProps);
   const { interactive, modeOrResponsive } = bucketMods(resolved);
-  const onWeb = typeof document !== "undefined";
-  const needsDiv = onWeb && (hasGridStyles(resolved) || hasWebPositionStyles(resolved));
-  const actualType = needsDiv ? "div" : type;
   if (interactive) {
     return _jsx(InteractiveWrapper, {
-      Component: actualType,
+      Component: type,
       resolvedStyle: resolved,
       ...!isNative && classStr ? { className: normalizeClassString(classStr) } : {},
       style: userStyle,
@@ -202,18 +188,24 @@ function processElement(type, rawProps, key, isStaticChildren) {
   }
   if (modeOrResponsive) {
     return _jsx(DarkWrapper, {
-      Component: actualType,
+      Component: type,
       resolvedStyle: resolved,
       ...!isNative && classStr ? { className: normalizeClassString(classStr) } : {},
       style: userStyle,
       ...passProps
     }, key);
   }
-  const computedStyle = flatten(resolved, false);
-  stripInternalMarkers2(computedStyle);
-  if (typeof actualType !== "string") stripWebOnlyInlineProps(computedStyle);
-  const finalStyle = mergeStyle(computedStyle, userStyle);
-  return makeElement(isStaticChildren, actualType, {
+  const isWebHTMLElement = !isNative && typeof type === "string";
+  let finalStyle;
+  if (!isWebHTMLElement) {
+    const computedStyle = flatten(resolved, false);
+    stripInternalMarkers2(computedStyle);
+    if (typeof type !== "string") stripWebOnlyInlineProps(computedStyle);
+    finalStyle = mergeStyle(computedStyle, userStyle);
+  } else {
+    finalStyle = userStyle ?? void 0;
+  }
+  return makeElement(isStaticChildren, type, {
     ...passProps,
     style: finalStyle,
     ...!isNative && classStr ? { className: normalizeClassString(classStr) } : {}

package/dist/index.d.mts

@@ -21,6 +21,7 @@ declare function normalizeClassString(classString: string): string;
 /** Parse a space-separated class string into individual ParsedClass objects. */
 declare function parseClasses(classString: string): ParsedClass[];
 
+declare function disableRuntimeCSS(): void;
 /**
  * Resolve a class string to a ResolvedStyle object.
  *
@@ -304,4 +305,4 @@ declare function kb(classString: string, isDark?: boolean): StyleValue | string;
  */
 declare function cx(...classes: Array<string | false | null | undefined>): string;
 
-export { type ColorScale, type ColorsAPI, FrameworkConfig, type InteractionState, InteractiveWrapper, type InteractiveWrapperProps, ParsedClass, ResolvedConfig, ResolvedStyle, StyleValue, type StyledProps, ThemeConfig, ThemeContext, type ThemeContextValue, ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, type ToggleVariant, buildConfig, cx, defaultColors, defaultTheme, flatten, getConfig, initConfig, kb, normalizeClassString, parseClass, parseClasses, resolve, splitClassTokens, styled, updateConfig, useBreakpoint, useColors, useGlobalDarkMode, useIsDark, useResolvedStyle, useResponsive, useStyles, useTheme, wrapColors };
+export { type ColorScale, type ColorsAPI, FrameworkConfig, type InteractionState, InteractiveWrapper, type InteractiveWrapperProps, ParsedClass, ResolvedConfig, ResolvedStyle, StyleValue, type StyledProps, ThemeConfig, ThemeContext, type ThemeContextValue, ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, type ToggleVariant, buildConfig, cx, defaultColors, defaultTheme, disableRuntimeCSS, flatten, getConfig, initConfig, kb, normalizeClassString, parseClass, parseClasses, resolve, splitClassTokens, styled, updateConfig, useBreakpoint, useColors, useGlobalDarkMode, useIsDark, useResolvedStyle, useResponsive, useStyles, useTheme, wrapColors };

package/dist/index.d.ts

@@ -21,6 +21,7 @@ declare function normalizeClassString(classString: string): string;
 /** Parse a space-separated class string into individual ParsedClass objects. */
 declare function parseClasses(classString: string): ParsedClass[];
 
+declare function disableRuntimeCSS(): void;
 /**
  * Resolve a class string to a ResolvedStyle object.
  *
@@ -304,4 +305,4 @@ declare function kb(classString: string, isDark?: boolean): StyleValue | string;
  */
 declare function cx(...classes: Array<string | false | null | undefined>): string;
 
-export { type ColorScale, type ColorsAPI, FrameworkConfig, type InteractionState, InteractiveWrapper, type InteractiveWrapperProps, ParsedClass, ResolvedConfig, ResolvedStyle, StyleValue, type StyledProps, ThemeConfig, ThemeContext, type ThemeContextValue, ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, type ToggleVariant, buildConfig, cx, defaultColors, defaultTheme, flatten, getConfig, initConfig, kb, normalizeClassString, parseClass, parseClasses, resolve, splitClassTokens, styled, updateConfig, useBreakpoint, useColors, useGlobalDarkMode, useIsDark, useResolvedStyle, useResponsive, useStyles, useTheme, wrapColors };
+export { type ColorScale, type ColorsAPI, FrameworkConfig, type InteractionState, InteractiveWrapper, type InteractiveWrapperProps, ParsedClass, ResolvedConfig, ResolvedStyle, StyleValue, type StyledProps, ThemeConfig, ThemeContext, type ThemeContextValue, ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, type ToggleVariant, buildConfig, cx, defaultColors, defaultTheme, disableRuntimeCSS, flatten, getConfig, initConfig, kb, normalizeClassString, parseClass, parseClasses, resolve, splitClassTokens, styled, updateConfig, useBreakpoint, useColors, useGlobalDarkMode, useIsDark, useResolvedStyle, useResponsive, useStyles, useTheme, wrapColors };

package/dist/index.js

@@ -38,6 +38,7 @@ __export(index_exports, {
   cx: () => cx,
   defaultColors: () => defaultColors,
   defaultTheme: () => defaultTheme,
+  disableRuntimeCSS: () => disableRuntimeCSS,
   flatten: () => flatten,
   getConfig: () => getConfig,
   initConfig: () => initConfig,
@@ -2679,6 +2680,13 @@ function getDefaultFontFamily() {
 }
 var _styleEl = null;
 var _injectedRules = new LRUCache(5e4);
+var _CSS_DISABLED_KEY = "__kbach_runtime_css_disabled__";
+function disableRuntimeCSS() {
+  globalThis[_CSS_DISABLED_KEY] = true;
+}
+function isRuntimeCSSDisabled() {
+  return !!globalThis[_CSS_DISABLED_KEY];
+}
 function getStyleEl() {
   if (_styleEl) return _styleEl;
   _styleEl = document.createElement("style");
@@ -2687,6 +2695,7 @@ function getStyleEl() {
   return _styleEl;
 }
 function injectRule(rule) {
+  if (isRuntimeCSSDisabled()) return;
   if (_injectedRules.has(rule)) return;
   _injectedRules.set(rule, true);
   try {
@@ -2703,7 +2712,7 @@ function getGlobalStyleEl() {
   return _globalStyleEl;
 }
 function injectGlobalStyles(theme) {
-  if (typeof document === "undefined") return;
+  if (typeof document === "undefined" || isRuntimeCSSDisabled()) return;
   const rules = [];
   const ff = theme.fontFamily;
   if (ff.sans && ff.sans !== "System") {
@@ -3718,7 +3727,8 @@ var InteractiveWrapper = (0, import_react10.forwardRef)(
       [resolvedStyle, isDark, pressed, hovered, focused, width]
       // eslint-disable-line react-hooks/exhaustive-deps
     );
-    const finalStyle = styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
+    const isWebHTMLElement = !isNative && typeof Component === "string";
+    const finalStyle = isWebHTMLElement ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
     const { children, ...restWithoutChildren } = rest;
     const componentProps = {
       ref,
@@ -3760,6 +3770,7 @@ function cx(...classes) {
   cx,
   defaultColors,
   defaultTheme,
+  disableRuntimeCSS,
   flatten,
   getConfig,
   initConfig,

package/dist/index.mjs

@@ -7,12 +7,13 @@ import {
   useConditionalWidth,
   useGlobalDarkMode,
   useGlobalWidth
-} from "./chunk-SX43SDOD.mjs";
+} from "./chunk-BBI6IU22.mjs";
 import {
   __require,
   buildConfig,
   defaultColors,
   defaultTheme,
+  disableRuntimeCSS,
   flatten,
   getActiveBreakpoints,
   getConfig,
@@ -28,7 +29,7 @@ import {
   syncGlobalScreens,
   syncGlobalWidth,
   updateConfig
-} from "./chunk-IBAKFGFG.mjs";
+} from "./chunk-52N32L7A.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";
@@ -557,6 +558,7 @@ export {
   cx,
   defaultColors,
   defaultTheme,
+  disableRuntimeCSS,
   flatten,
   getConfig,
   initConfig,

package/dist/jsx-dev-runtime.js

@@ -2568,6 +2568,10 @@ function getDefaultFontFamily() {
 }
 var _styleEl = null;
 var _injectedRules = new LRUCache(5e4);
+var _CSS_DISABLED_KEY = "__kbach_runtime_css_disabled__";
+function isRuntimeCSSDisabled() {
+  return !!globalThis[_CSS_DISABLED_KEY];
+}
 function getStyleEl() {
   if (_styleEl) return _styleEl;
   _styleEl = document.createElement("style");
@@ -2576,6 +2580,7 @@ function getStyleEl() {
   return _styleEl;
 }
 function injectRule(rule) {
+  if (isRuntimeCSSDisabled()) return;
   if (_injectedRules.has(rule)) return;
   _injectedRules.set(rule, true);
   try {
@@ -2592,7 +2597,7 @@ function getGlobalStyleEl() {
   return _globalStyleEl;
 }
 function injectGlobalStyles(theme) {
-  if (typeof document === "undefined") return;
+  if (typeof document === "undefined" || isRuntimeCSSDisabled()) return;
   const rules = [];
   const ff = theme.fontFamily;
   if (ff.sans && ff.sans !== "System") {
@@ -3158,7 +3163,8 @@ var InteractiveWrapper = (0, import_react3.forwardRef)(
       [resolvedStyle, isDark, pressed, hovered, focused, width]
       // eslint-disable-line react-hooks/exhaustive-deps
     );
-    const finalStyle = styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
+    const isWebHTMLElement = !isNative && typeof Component === "string";
+    const finalStyle = isWebHTMLElement ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
     const { children, ...restWithoutChildren } = rest;
     const componentProps = {
       ref,
@@ -3189,7 +3195,8 @@ var DarkWrapper = import_react4.default.forwardRef(
     const computedStyle = flatten(resolvedStyle, isDark, {}, breakpoints);
     stripInternalMarkers(computedStyle);
     if (typeof Component !== "string") stripWebOnlyProps(computedStyle);
-    const finalStyle = styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
+    const isWebHTMLElement = !isNative && typeof Component === "string";
+    const finalStyle = isWebHTMLElement ? styleProp ?? void 0 : 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);
   }
@@ -3274,27 +3281,6 @@ function mergeStyle(computed, userStyle) {
 function makeElement(isStaticChildren, type, props, key) {
   return (isStaticChildren ? import_jsx_runtime.jsxs : import_jsx_runtime.jsx)(type, props, key);
 }
-function hasGridStyles(resolved) {
-  for (const styles of Object.values(resolved)) {
-    if (!styles) continue;
-    if (styles.display === "grid" || styles.display === "inline-grid") return true;
-    if ("gridTemplateColumns" in styles || "gridTemplateRows" in styles) return true;
-    if ("gridColumn" in styles || "gridRow" in styles) return true;
-    if ("gridColumnStart" in styles || "gridColumnEnd" in styles) return true;
-    if ("gridRowStart" in styles || "gridRowEnd" in styles) return true;
-    if ("gridAutoFlow" in styles || "gridAutoColumns" in styles || "gridAutoRows" in styles) return true;
-    if ("placeItems" in styles || "placeContent" in styles || "justifyItems" in styles) return true;
-    if ("placeSelf" in styles || "justifySelf" in styles) return true;
-  }
-  return false;
-}
-function hasWebPositionStyles(resolved) {
-  for (const styles of Object.values(resolved)) {
-    if (!styles) continue;
-    if (styles.position === "sticky" || styles.position === "fixed" || styles.position === "static") return true;
-  }
-  return false;
-}
 function stripInternalMarkers2(s) {
   delete s.__divideX;
   delete s.__divideY;
@@ -3330,6 +3316,14 @@ function processElement(type, rawProps, key, isStaticChildren) {
   if (!rawProps) return (0, import_jsx_runtime.jsx)(type, null, key);
   const { className, kb: kbProp, __kbachStyles, __kbachClasses } = rawProps;
   const classStr = className ?? kbProp ?? __kbachClasses;
+  if (!isNative && isRuntimeCSSDisabled() && classStr && !__kbachStyles) {
+    const { style: userStyle2, ...passProps2 } = omitConsumed(rawProps);
+    return makeElement(isStaticChildren, type, {
+      ...passProps2,
+      className: normalizeClassString(classStr),
+      ...userStyle2 !== void 0 ? { style: userStyle2 } : {}
+    }, key);
+  }
   if (!classStr && !__kbachStyles) {
     const defaultFont = getCachedDefaultFont();
     if (!defaultFont) return makeElement(isStaticChildren, type, rawProps, key);
@@ -3341,12 +3335,9 @@ function processElement(type, rawProps, key, isStaticChildren) {
   const resolved = __kbachStyles ?? (classStr ? resolve(classStr, config.theme, config.darkMode) : {});
   const { style: userStyle, ...passProps } = omitConsumed(rawProps);
   const { interactive, modeOrResponsive } = bucketMods(resolved);
-  const onWeb = typeof document !== "undefined";
-  const needsDiv = onWeb && (hasGridStyles(resolved) || hasWebPositionStyles(resolved));
-  const actualType = needsDiv ? "div" : type;
   if (interactive) {
     return (0, import_jsx_runtime.jsx)(InteractiveWrapper, {
-      Component: actualType,
+      Component: type,
       resolvedStyle: resolved,
       ...!isNative && classStr ? { className: normalizeClassString(classStr) } : {},
       style: userStyle,
@@ -3355,18 +3346,24 @@ function processElement(type, rawProps, key, isStaticChildren) {
   }
   if (modeOrResponsive) {
     return (0, import_jsx_runtime.jsx)(DarkWrapper, {
-      Component: actualType,
+      Component: type,
       resolvedStyle: resolved,
       ...!isNative && classStr ? { className: normalizeClassString(classStr) } : {},
       style: userStyle,
       ...passProps
     }, key);
   }
-  const computedStyle = flatten(resolved, false);
-  stripInternalMarkers2(computedStyle);
-  if (typeof actualType !== "string") stripWebOnlyInlineProps(computedStyle);
-  const finalStyle = mergeStyle(computedStyle, userStyle);
-  return makeElement(isStaticChildren, actualType, {
+  const isWebHTMLElement = !isNative && typeof type === "string";
+  let finalStyle;
+  if (!isWebHTMLElement) {
+    const computedStyle = flatten(resolved, false);
+    stripInternalMarkers2(computedStyle);
+    if (typeof type !== "string") stripWebOnlyInlineProps(computedStyle);
+    finalStyle = mergeStyle(computedStyle, userStyle);
+  } else {
+    finalStyle = userStyle ?? void 0;
+  }
+  return makeElement(isStaticChildren, type, {
     ...passProps,
     style: finalStyle,
     ...!isNative && classStr ? { className: normalizeClassString(classStr) } : {}

package/dist/jsx-dev-runtime.mjs

@@ -2,9 +2,9 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-4NTWFAHW.mjs";
-import "./chunk-SX43SDOD.mjs";
-import "./chunk-IBAKFGFG.mjs";
+} from "./chunk-MIBPTKXT.mjs";
+import "./chunk-BBI6IU22.mjs";
+import "./chunk-52N32L7A.mjs";
 
 // src/jsx-dev-runtime.tsx
 function jsxDEV(type, props, key, isStaticChildren, source, self) {

package/dist/jsx-runtime.js

@@ -2568,6 +2568,10 @@ function getDefaultFontFamily() {
 }
 var _styleEl = null;
 var _injectedRules = new LRUCache(5e4);
+var _CSS_DISABLED_KEY = "__kbach_runtime_css_disabled__";
+function isRuntimeCSSDisabled() {
+  return !!globalThis[_CSS_DISABLED_KEY];
+}
 function getStyleEl() {
   if (_styleEl) return _styleEl;
   _styleEl = document.createElement("style");
@@ -2576,6 +2580,7 @@ function getStyleEl() {
   return _styleEl;
 }
 function injectRule(rule) {
+  if (isRuntimeCSSDisabled()) return;
   if (_injectedRules.has(rule)) return;
   _injectedRules.set(rule, true);
   try {
@@ -2592,7 +2597,7 @@ function getGlobalStyleEl() {
   return _globalStyleEl;
 }
 function injectGlobalStyles(theme) {
-  if (typeof document === "undefined") return;
+  if (typeof document === "undefined" || isRuntimeCSSDisabled()) return;
   const rules = [];
   const ff = theme.fontFamily;
   if (ff.sans && ff.sans !== "System") {
@@ -3158,7 +3163,8 @@ var InteractiveWrapper = (0, import_react3.forwardRef)(
       [resolvedStyle, isDark, pressed, hovered, focused, width]
       // eslint-disable-line react-hooks/exhaustive-deps
     );
-    const finalStyle = styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
+    const isWebHTMLElement = !isNative && typeof Component === "string";
+    const finalStyle = isWebHTMLElement ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
     const { children, ...restWithoutChildren } = rest;
     const componentProps = {
       ref,
@@ -3189,7 +3195,8 @@ var DarkWrapper = import_react4.default.forwardRef(
     const computedStyle = flatten(resolvedStyle, isDark, {}, breakpoints);
     stripInternalMarkers(computedStyle);
     if (typeof Component !== "string") stripWebOnlyProps(computedStyle);
-    const finalStyle = styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
+    const isWebHTMLElement = !isNative && typeof Component === "string";
+    const finalStyle = isWebHTMLElement ? styleProp ?? void 0 : 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);
   }
@@ -3277,27 +3284,6 @@ function mergeStyle(computed, userStyle) {
 function makeElement(isStaticChildren, type, props, key) {
   return (isStaticChildren ? import_jsx_runtime.jsxs : import_jsx_runtime.jsx)(type, props, key);
 }
-function hasGridStyles(resolved) {
-  for (const styles of Object.values(resolved)) {
-    if (!styles) continue;
-    if (styles.display === "grid" || styles.display === "inline-grid") return true;
-    if ("gridTemplateColumns" in styles || "gridTemplateRows" in styles) return true;
-    if ("gridColumn" in styles || "gridRow" in styles) return true;
-    if ("gridColumnStart" in styles || "gridColumnEnd" in styles) return true;
-    if ("gridRowStart" in styles || "gridRowEnd" in styles) return true;
-    if ("gridAutoFlow" in styles || "gridAutoColumns" in styles || "gridAutoRows" in styles) return true;
-    if ("placeItems" in styles || "placeContent" in styles || "justifyItems" in styles) return true;
-    if ("placeSelf" in styles || "justifySelf" in styles) return true;
-  }
-  return false;
-}
-function hasWebPositionStyles(resolved) {
-  for (const styles of Object.values(resolved)) {
-    if (!styles) continue;
-    if (styles.position === "sticky" || styles.position === "fixed" || styles.position === "static") return true;
-  }
-  return false;
-}
 function stripInternalMarkers2(s) {
   delete s.__divideX;
   delete s.__divideY;
@@ -3333,6 +3319,14 @@ function processElement(type, rawProps, key, isStaticChildren) {
   if (!rawProps) return (0, import_jsx_runtime.jsx)(type, null, key);
   const { className, kb: kbProp, __kbachStyles, __kbachClasses } = rawProps;
   const classStr = className ?? kbProp ?? __kbachClasses;
+  if (!isNative && isRuntimeCSSDisabled() && classStr && !__kbachStyles) {
+    const { style: userStyle2, ...passProps2 } = omitConsumed(rawProps);
+    return makeElement(isStaticChildren, type, {
+      ...passProps2,
+      className: normalizeClassString(classStr),
+      ...userStyle2 !== void 0 ? { style: userStyle2 } : {}
+    }, key);
+  }
   if (!classStr && !__kbachStyles) {
     const defaultFont = getCachedDefaultFont();
     if (!defaultFont) return makeElement(isStaticChildren, type, rawProps, key);
@@ -3344,12 +3338,9 @@ function processElement(type, rawProps, key, isStaticChildren) {
   const resolved = __kbachStyles ?? (classStr ? resolve(classStr, config.theme, config.darkMode) : {});
   const { style: userStyle, ...passProps } = omitConsumed(rawProps);
   const { interactive, modeOrResponsive } = bucketMods(resolved);
-  const onWeb = typeof document !== "undefined";
-  const needsDiv = onWeb && (hasGridStyles(resolved) || hasWebPositionStyles(resolved));
-  const actualType = needsDiv ? "div" : type;
   if (interactive) {
     return (0, import_jsx_runtime.jsx)(InteractiveWrapper, {
-      Component: actualType,
+      Component: type,
       resolvedStyle: resolved,
       ...!isNative && classStr ? { className: normalizeClassString(classStr) } : {},
       style: userStyle,
@@ -3358,18 +3349,24 @@ function processElement(type, rawProps, key, isStaticChildren) {
   }
   if (modeOrResponsive) {
     return (0, import_jsx_runtime.jsx)(DarkWrapper, {
-      Component: actualType,
+      Component: type,
       resolvedStyle: resolved,
       ...!isNative && classStr ? { className: normalizeClassString(classStr) } : {},
       style: userStyle,
       ...passProps
     }, key);
   }
-  const computedStyle = flatten(resolved, false);
-  stripInternalMarkers2(computedStyle);
-  if (typeof actualType !== "string") stripWebOnlyInlineProps(computedStyle);
-  const finalStyle = mergeStyle(computedStyle, userStyle);
-  return makeElement(isStaticChildren, actualType, {
+  const isWebHTMLElement = !isNative && typeof type === "string";
+  let finalStyle;
+  if (!isWebHTMLElement) {
+    const computedStyle = flatten(resolved, false);
+    stripInternalMarkers2(computedStyle);
+    if (typeof type !== "string") stripWebOnlyInlineProps(computedStyle);
+    finalStyle = mergeStyle(computedStyle, userStyle);
+  } else {
+    finalStyle = userStyle ?? void 0;
+  }
+  return makeElement(isStaticChildren, type, {
     ...passProps,
     style: finalStyle,
     ...!isNative && classStr ? { className: normalizeClassString(classStr) } : {}

package/dist/jsx-runtime.mjs

@@ -3,9 +3,9 @@ import {
   _invalidateDefaultFontCache,
   jsx,
   jsxs
-} from "./chunk-4NTWFAHW.mjs";
-import "./chunk-SX43SDOD.mjs";
-import "./chunk-IBAKFGFG.mjs";
+} from "./chunk-MIBPTKXT.mjs";
+import "./chunk-BBI6IU22.mjs";
+import "./chunk-52N32L7A.mjs";
 export {
   Fragment,
   _invalidateDefaultFontCache,

package/dist/vite-plugin.js

@@ -2471,6 +2471,10 @@ function setDefaultFontFamily(font) {
 }
 var _styleEl = null;
 var _injectedRules = new LRUCache(5e4);
+var _CSS_DISABLED_KEY = "__kbach_runtime_css_disabled__";
+function isRuntimeCSSDisabled() {
+  return !!globalThis[_CSS_DISABLED_KEY];
+}
 function getStyleEl() {
   if (_styleEl) return _styleEl;
   _styleEl = document.createElement("style");
@@ -2487,7 +2491,7 @@ function getGlobalStyleEl() {
   return _globalStyleEl;
 }
 function injectGlobalStyles(theme) {
-  if (typeof document === "undefined") return;
+  if (typeof document === "undefined" || isRuntimeCSSDisabled()) return;
   const rules = [];
   const ff = theme.fontFamily;
   if (ff.sans && ff.sans !== "System") {
@@ -2987,7 +2991,7 @@ function extractClassStrings(code) {
     const innerStrings = block.match(/["'`]([^"'`]{1,300})["'`]/g) ?? [];
     for (const s of innerStrings) pushTokens(s.slice(1, -1), found);
   }
-  const clsxRe = /(?:clsx|cn|classnames)\(([^)]{1,1000})\)/g;
+  const clsxRe = /(?:clsx|cn|classnames|cx)\(([^)]{1,1000})\)/g;
   while ((m = clsxRe.exec(code)) !== null) {
     const block = m[1];
     const innerStrings = block.match(/["'`]([^"'`]{1,300})["'`]/g) ?? [];
@@ -3072,6 +3076,18 @@ function kbach(userConfig) {
     configResolved(resolved) {
       root = resolved.root;
     },
+    // When any JS/TS file imports kbach.css, prepend a disableRuntimeCSS() call
+    // so styles come solely from the static stylesheet — no duplicate injection.
+    transform(code, id) {
+      if (!/\.(tsx?|jsx?|mjs?)$/.test(id)) return;
+      if (!/['"].*kbach\.css['"]/i.test(code)) return;
+      return {
+        code: `import { disableRuntimeCSS } from '@kbach/react';
+disableRuntimeCSS();
+${code}`,
+        map: null
+      };
+    },
     buildStart() {
       mainCSSFile = findKbachCSS(root);
       initialScan();

package/dist/vite-plugin.mjs

@@ -3,7 +3,7 @@ import {
   generateClassCSS,
   setCSSGenMode,
   splitClassTokens
-} from "./chunk-IBAKFGFG.mjs";
+} from "./chunk-52N32L7A.mjs";
 
 // src/vite-plugin.ts
 import { readFileSync, writeFileSync, readdirSync, statSync } from "fs";
@@ -185,7 +185,7 @@ function extractClassStrings(code) {
     const innerStrings = block.match(/["'`]([^"'`]{1,300})["'`]/g) ?? [];
     for (const s of innerStrings) pushTokens(s.slice(1, -1), found);
   }
-  const clsxRe = /(?:clsx|cn|classnames)\(([^)]{1,1000})\)/g;
+  const clsxRe = /(?:clsx|cn|classnames|cx)\(([^)]{1,1000})\)/g;
   while ((m = clsxRe.exec(code)) !== null) {
     const block = m[1];
     const innerStrings = block.match(/["'`]([^"'`]{1,300})["'`]/g) ?? [];
@@ -270,6 +270,18 @@ function kbach(userConfig) {
     configResolved(resolved) {
       root = resolved.root;
     },
+    // When any JS/TS file imports kbach.css, prepend a disableRuntimeCSS() call
+    // so styles come solely from the static stylesheet — no duplicate injection.
+    transform(code, id) {
+      if (!/\.(tsx?|jsx?|mjs?)$/.test(id)) return;
+      if (!/['"].*kbach\.css['"]/i.test(code)) return;
+      return {
+        code: `import { disableRuntimeCSS } from '@kbach/react';
+disableRuntimeCSS();
+${code}`,
+        map: null
+      };
+    },
     buildStart() {
       mainCSSFile = findKbachCSS(root);
       initialScan();

package/package.json

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