@kbach/react 0.5.42 → 0.5.44

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

@@ -2351,6 +2351,10 @@ function parseClass(className) {
     const value = remaining.slice(bracketStart + 2, -1).replace(/_/g, " ");
     return { original: trimmed, modifiers, negative, important, utility, value, isArbitrary: true };
   }
+  if (remaining.startsWith("[") && remaining.endsWith("]")) {
+    const value = remaining.slice(1, -1).replace(/_/g, " ");
+    return { original: trimmed, modifiers, negative, important, utility: "", value, isArbitrary: true };
+  }
   if (getBuiltinStandaloneNames().has(remaining)) {
     return { original: trimmed, modifiers, negative, important, utility: remaining, value: "", isArbitrary: false };
   }
@@ -2545,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");
@@ -2553,6 +2564,7 @@ function getStyleEl() {
   return _styleEl;
 }
 function injectRule(rule) {
+  if (isRuntimeCSSDisabled()) return;
   if (_injectedRules.has(rule)) return;
   _injectedRules.set(rule, true);
   try {
@@ -2569,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") {
@@ -2916,7 +2928,7 @@ function buildConfig(userConfig) {
   for (const plugin of resolved.plugins) {
     plugin(pluginAPI);
   }
-  const rawSans = theme.fontFamily.sans;
+  const rawSans = theme.fontFamily?.sans;
   const sansFontValue = Array.isArray(rawSans) ? rawSans[0] : rawSans;
   setDefaultFontFamily(sansFontValue && sansFontValue !== "System" ? sansFontValue : void 0);
   injectGlobalStyles(resolved.theme);
@@ -2940,7 +2952,8 @@ function makePluginAPI(theme) {
     },
     addVariant(name, selectorOrDef) {
       const def = typeof selectorOrDef === "string" ? _selectorToModifierDef(selectorOrDef) : selectorOrDef;
-      customVariants[name] = typeof selectorOrDef === "string" ? selectorOrDef : name;
+      const selector = typeof selectorOrDef === "string" ? selectorOrDef : selectorOrDef.pseudo ?? selectorOrDef.mediaQuery ?? selectorOrDef.ancestorSelector ?? name;
+      customVariants[name] = selector;
       registerModifier(name, def);
     },
     theme(path, defaultValue) {
@@ -3017,6 +3030,8 @@ export {
   subscribeGlobalWidth,
   getActiveBreakpoints,
   getDefaultFontFamily,
+  disableRuntimeCSS,
+  isRuntimeCSSDisabled,
   generateClassCSS,
   resolve,
   flatten,

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

@@ -6,7 +6,7 @@ import {
   isNative,
   isWeb,
   subscribeGlobalWidth
-} from "./chunk-VCNP57PR.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-AAPA3CRV.mjs → chunk-MIBPTKXT.mjs}

@@ -4,7 +4,7 @@ import {
   hasResponsiveBuckets,
   useConditionalWidth,
   useGlobalDarkMode
-} from "./chunk-GOQNOKFN.mjs";
+} from "./chunk-BBI6IU22.mjs";
 import {
   flatten,
   getActiveBreakpoints,
@@ -14,9 +14,10 @@ import {
   getModeModifiers,
   getResponsiveModifiers,
   isNative,
+  isRuntimeCSSDisabled,
   normalizeClassString,
   resolve
-} from "./chunk-VCNP57PR.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,
@@ -2521,6 +2522,10 @@ function parseClass(className) {
     const value = remaining.slice(bracketStart + 2, -1).replace(/_/g, " ");
     return { original: trimmed, modifiers, negative, important, utility, value, isArbitrary: true };
   }
+  if (remaining.startsWith("[") && remaining.endsWith("]")) {
+    const value = remaining.slice(1, -1).replace(/_/g, " ");
+    return { original: trimmed, modifiers, negative, important, utility: "", value, isArbitrary: true };
+  }
   if (getBuiltinStandaloneNames().has(remaining)) {
     return { original: trimmed, modifiers, negative, important, utility: remaining, value: "", isArbitrary: false };
   }
@@ -2675,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");
@@ -2683,6 +2695,7 @@ function getStyleEl() {
   return _styleEl;
 }
 function injectRule(rule) {
+  if (isRuntimeCSSDisabled()) return;
   if (_injectedRules.has(rule)) return;
   _injectedRules.set(rule, true);
   try {
@@ -2699,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") {
@@ -3036,7 +3049,7 @@ function buildConfig(userConfig) {
   for (const plugin of resolved.plugins) {
     plugin(pluginAPI);
   }
-  const rawSans = theme.fontFamily.sans;
+  const rawSans = theme.fontFamily?.sans;
   const sansFontValue = Array.isArray(rawSans) ? rawSans[0] : rawSans;
   setDefaultFontFamily(sansFontValue && sansFontValue !== "System" ? sansFontValue : void 0);
   injectGlobalStyles(resolved.theme);
@@ -3060,7 +3073,8 @@ function makePluginAPI(theme) {
     },
     addVariant(name, selectorOrDef) {
       const def = typeof selectorOrDef === "string" ? _selectorToModifierDef(selectorOrDef) : selectorOrDef;
-      customVariants[name] = typeof selectorOrDef === "string" ? selectorOrDef : name;
+      const selector = typeof selectorOrDef === "string" ? selectorOrDef : selectorOrDef.pseudo ?? selectorOrDef.mediaQuery ?? selectorOrDef.ancestorSelector ?? name;
+      customVariants[name] = selector;
       registerModifier(name, def);
     },
     theme(path, defaultValue) {
@@ -3713,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,
@@ -3755,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-GOQNOKFN.mjs";
+} from "./chunk-BBI6IU22.mjs";
 import {
   __require,
   buildConfig,
   defaultColors,
   defaultTheme,
+  disableRuntimeCSS,
   flatten,
   getActiveBreakpoints,
   getConfig,
@@ -28,7 +29,7 @@ import {
   syncGlobalScreens,
   syncGlobalWidth,
   updateConfig
-} from "./chunk-VCNP57PR.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

@@ -2422,6 +2422,10 @@ function parseClass(className) {
     const value = remaining.slice(bracketStart + 2, -1).replace(/_/g, " ");
     return { original: trimmed, modifiers, negative, important, utility, value, isArbitrary: true };
   }
+  if (remaining.startsWith("[") && remaining.endsWith("]")) {
+    const value = remaining.slice(1, -1).replace(/_/g, " ");
+    return { original: trimmed, modifiers, negative, important, utility: "", value, isArbitrary: true };
+  }
   if (getBuiltinStandaloneNames().has(remaining)) {
     return { original: trimmed, modifiers, negative, important, utility: remaining, value: "", isArbitrary: false };
   }
@@ -2564,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");
@@ -2572,6 +2580,7 @@ function getStyleEl() {
   return _styleEl;
 }
 function injectRule(rule) {
+  if (isRuntimeCSSDisabled()) return;
   if (_injectedRules.has(rule)) return;
   _injectedRules.set(rule, true);
   try {
@@ -2588,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") {
@@ -2918,7 +2927,7 @@ function buildConfig(userConfig) {
   for (const plugin of resolved.plugins) {
     plugin(pluginAPI);
   }
-  const rawSans = theme.fontFamily.sans;
+  const rawSans = theme.fontFamily?.sans;
   const sansFontValue = Array.isArray(rawSans) ? rawSans[0] : rawSans;
   setDefaultFontFamily(sansFontValue && sansFontValue !== "System" ? sansFontValue : void 0);
   injectGlobalStyles(resolved.theme);
@@ -2942,7 +2951,8 @@ function makePluginAPI(theme) {
     },
     addVariant(name, selectorOrDef) {
       const def = typeof selectorOrDef === "string" ? _selectorToModifierDef(selectorOrDef) : selectorOrDef;
-      customVariants[name] = typeof selectorOrDef === "string" ? selectorOrDef : name;
+      const selector = typeof selectorOrDef === "string" ? selectorOrDef : selectorOrDef.pseudo ?? selectorOrDef.mediaQuery ?? selectorOrDef.ancestorSelector ?? name;
+      customVariants[name] = selector;
       registerModifier(name, def);
     },
     theme(path, defaultValue) {
@@ -3153,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,
@@ -3184,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);
   }
@@ -3269,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;
@@ -3325,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);
@@ -3336,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,
@@ -3350,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-AAPA3CRV.mjs";
-import "./chunk-GOQNOKFN.mjs";
-import "./chunk-VCNP57PR.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

@@ -2422,6 +2422,10 @@ function parseClass(className) {
     const value = remaining.slice(bracketStart + 2, -1).replace(/_/g, " ");
     return { original: trimmed, modifiers, negative, important, utility, value, isArbitrary: true };
   }
+  if (remaining.startsWith("[") && remaining.endsWith("]")) {
+    const value = remaining.slice(1, -1).replace(/_/g, " ");
+    return { original: trimmed, modifiers, negative, important, utility: "", value, isArbitrary: true };
+  }
   if (getBuiltinStandaloneNames().has(remaining)) {
     return { original: trimmed, modifiers, negative, important, utility: remaining, value: "", isArbitrary: false };
   }
@@ -2564,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");
@@ -2572,6 +2580,7 @@ function getStyleEl() {
   return _styleEl;
 }
 function injectRule(rule) {
+  if (isRuntimeCSSDisabled()) return;
   if (_injectedRules.has(rule)) return;
   _injectedRules.set(rule, true);
   try {
@@ -2588,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") {
@@ -2918,7 +2927,7 @@ function buildConfig(userConfig) {
   for (const plugin of resolved.plugins) {
     plugin(pluginAPI);
   }
-  const rawSans = theme.fontFamily.sans;
+  const rawSans = theme.fontFamily?.sans;
   const sansFontValue = Array.isArray(rawSans) ? rawSans[0] : rawSans;
   setDefaultFontFamily(sansFontValue && sansFontValue !== "System" ? sansFontValue : void 0);
   injectGlobalStyles(resolved.theme);
@@ -2942,7 +2951,8 @@ function makePluginAPI(theme) {
     },
     addVariant(name, selectorOrDef) {
       const def = typeof selectorOrDef === "string" ? _selectorToModifierDef(selectorOrDef) : selectorOrDef;
-      customVariants[name] = typeof selectorOrDef === "string" ? selectorOrDef : name;
+      const selector = typeof selectorOrDef === "string" ? selectorOrDef : selectorOrDef.pseudo ?? selectorOrDef.mediaQuery ?? selectorOrDef.ancestorSelector ?? name;
+      customVariants[name] = selector;
       registerModifier(name, def);
     },
     theme(path, defaultValue) {
@@ -3153,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,
@@ -3184,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);
   }
@@ -3272,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;
@@ -3328,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);
@@ -3339,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,
@@ -3353,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-AAPA3CRV.mjs";
-import "./chunk-GOQNOKFN.mjs";
-import "./chunk-VCNP57PR.mjs";
+} from "./chunk-MIBPTKXT.mjs";
+import "./chunk-BBI6IU22.mjs";
+import "./chunk-52N32L7A.mjs";
 export {
   Fragment,
   _invalidateDefaultFontCache,

package/dist/vite-plugin.js

@@ -2345,6 +2345,10 @@ function parseClass(className) {
     const value = remaining.slice(bracketStart + 2, -1).replace(/_/g, " ");
     return { original: trimmed, modifiers, negative, important, utility, value, isArbitrary: true };
   }
+  if (remaining.startsWith("[") && remaining.endsWith("]")) {
+    const value = remaining.slice(1, -1).replace(/_/g, " ");
+    return { original: trimmed, modifiers, negative, important, utility: "", value, isArbitrary: true };
+  }
   if (getBuiltinStandaloneNames().has(remaining)) {
     return { original: trimmed, modifiers, negative, important, utility: remaining, value: "", isArbitrary: false };
   }
@@ -2467,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");
@@ -2483,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") {
@@ -2742,7 +2750,7 @@ function buildConfig(userConfig) {
   for (const plugin of resolved.plugins) {
     plugin(pluginAPI);
   }
-  const rawSans = theme.fontFamily.sans;
+  const rawSans = theme.fontFamily?.sans;
   const sansFontValue = Array.isArray(rawSans) ? rawSans[0] : rawSans;
   setDefaultFontFamily(sansFontValue && sansFontValue !== "System" ? sansFontValue : void 0);
   injectGlobalStyles(resolved.theme);
@@ -2766,7 +2774,8 @@ function makePluginAPI(theme) {
     },
     addVariant(name, selectorOrDef) {
       const def = typeof selectorOrDef === "string" ? _selectorToModifierDef(selectorOrDef) : selectorOrDef;
-      customVariants[name] = typeof selectorOrDef === "string" ? selectorOrDef : name;
+      const selector = typeof selectorOrDef === "string" ? selectorOrDef : selectorOrDef.pseudo ?? selectorOrDef.mediaQuery ?? selectorOrDef.ancestorSelector ?? name;
+      customVariants[name] = selector;
       registerModifier(name, def);
     },
     theme(path, defaultValue) {
@@ -2822,9 +2831,9 @@ var GROUPS = [
   ["Effects", /^(shadow|opacity|blur|brightness|contrast|grayscale|transition|duration|ease|delay|animate|scale|rotate|translate|transform|cursor|pointer|select-)/]
 ];
 var GROUP_ORDER = ["Layout", "Sizing", "Spacing", "Typography", "Colors", "Borders", "Effects", "Utilities", "Dark Mode", "Responsive"];
-function classifyToken(token) {
+function classifyToken(token, responsiveRe) {
   if (/^dark:/.test(token)) return "Dark Mode";
-  if (/^(sm|md|lg|xl|2xl):/.test(token)) return "Responsive";
+  if (responsiveRe.test(token)) return "Responsive";
   const base = token.replace(/^(hover|focus|active|group-hover|peer-hover):/, "");
   for (const [label, re] of GROUPS) {
     if (re.test(base)) return label;
@@ -2849,7 +2858,7 @@ function buildColorVarMap(theme, usedCSS) {
   }
   return map;
 }
-function formatKbachCSS(tokenCSS, theme) {
+function formatKbachCSS(tokenCSS, theme, responsiveRe) {
   const allRaw = [...tokenCSS.values()].filter(Boolean).join("\n");
   const colorVars = buildColorVarMap(theme, allRaw);
   function applyVars(css) {
@@ -2860,7 +2869,7 @@ function formatKbachCSS(tokenCSS, theme) {
   const groups = new Map(GROUP_ORDER.map((g) => [g, []]));
   for (const [token, css] of tokenCSS) {
     if (!css) continue;
-    const label = classifyToken(token);
+    const label = classifyToken(token, responsiveRe);
     if (!groups.has(label)) groups.set(label, []);
     groups.get(label).push(applyVars(css));
   }
@@ -2889,16 +2898,50 @@ function buildThemeGlobal(theme) {
   const family = Array.isArray(ff.sans) ? ff.sans.join(", ") : ff.sans;
   return `body { font-family: ${family}; }`;
 }
-function findMainCSSFile(root) {
-  for (const c of [
-    (0, import_path.join)(root, "app", "app.css"),
-    (0, import_path.join)(root, "src", "index.css"),
-    (0, import_path.join)(root, "src", "app.css"),
-    (0, import_path.join)(root, "app", "index.css")
-  ]) {
-    if ((0, import_fs.existsSync)(c)) return c;
+var SKIP_DIRS = /* @__PURE__ */ new Set([
+  "node_modules",
+  "dist",
+  "build",
+  "out",
+  ".next",
+  ".nuxt",
+  ".output",
+  ".git",
+  ".svn",
+  ".cache",
+  "coverage",
+  "__pycache__"
+]);
+function findKbachCSS(root) {
+  const found = [];
+  function scan(dir, depth) {
+    if (depth > 10) return;
+    let entries;
+    try {
+      entries = (0, import_fs.readdirSync)(dir);
+    } catch {
+      return;
+    }
+    for (const entry of entries) {
+      if (entry.startsWith(".") || SKIP_DIRS.has(entry)) continue;
+      const full = (0, import_path.join)(dir, entry);
+      try {
+        const st = (0, import_fs.statSync)(full);
+        if (st.isDirectory()) scan(full, depth + 1);
+        else if (entry === "kbach.css") found.push(full);
+      } catch {
+      }
+    }
   }
-  return null;
+  scan(root, 0);
+  if (found.length === 0) return null;
+  found.sort((a, b) => a.split(/[\\/]/g).length - b.split(/[\\/]/g).length);
+  if (found.length > 1) {
+    console.warn(
+      "[kbach] Multiple kbach.css files found \u2014 only the shallowest will receive generated styles.\n        Remove duplicates to avoid confusion:\n" + found.map((f) => `          ${f}`).join("\n")
+    );
+  }
+  return found[0];
 }
 function writeKbachToFile(filePath, css) {
   let existing = "";
@@ -2914,7 +2957,9 @@ ${KBACH_END}`;
   const next = start !== -1 && end !== -1 ? existing.slice(0, start) + block + existing.slice(end + KBACH_END.length) : existing ? `${existing}
 
 ${block}` : block;
-  if (next !== existing) (0, import_fs.writeFileSync)(filePath, next, "utf-8");
+  if (next === existing) return false;
+  (0, import_fs.writeFileSync)(filePath, next, "utf-8");
+  return true;
 }
 function toNumericScreens(screens) {
   const out = {};
@@ -2928,11 +2973,21 @@ function extractClassStrings(code) {
   const simpleRe = /(?:className|kb)=["']([^"']+)["']/g;
   let m;
   while ((m = simpleRe.exec(code)) !== null) pushTokens(m[1], found);
-  const exprLiteralRe = /(?:className|kb)=\{["'`]([^"'`}]+)["'`]\}/g;
-  while ((m = exprLiteralRe.exec(code)) !== null) pushTokens(m[1], found);
-  const ternaryBlockRe = /(?:className|kb)=\{([^}]{1,500})\}/g;
-  while ((m = ternaryBlockRe.exec(code)) !== null) {
-    const block = m[1];
+  const jsxExprRe = /(?:className|kb)=\{/g;
+  while ((m = jsxExprRe.exec(code)) !== null) {
+    let depth = 1;
+    let i = m.index + m[0].length;
+    let block = "";
+    while (i < code.length && depth > 0) {
+      const ch = code[i];
+      if (ch === "{") depth++;
+      else if (ch === "}") {
+        if (--depth === 0) break;
+      }
+      block += ch;
+      i++;
+    }
+    jsxExprRe.lastIndex = i + 1;
     const innerStrings = block.match(/["'`]([^"'`]{1,300})["'`]/g) ?? [];
     for (const s of innerStrings) pushTokens(s.slice(1, -1), found);
   }
@@ -2955,23 +3010,31 @@ function pushTokens(str, into) {
   }
 }
 function scanDir(dir, onFile) {
+  let entries;
   try {
-    for (const entry of (0, import_fs.readdirSync)(dir)) {
-      if (entry.startsWith(".") || entry === "node_modules") continue;
-      const full = (0, import_path.join)(dir, entry);
-      try {
-        const st = (0, import_fs.statSync)(full);
-        if (st.isDirectory()) scanDir(full, onFile);
-        else if (/\.(tsx?|jsx?)$/.test(entry)) onFile(full, (0, import_fs.readFileSync)(full, "utf-8"));
-      } catch {
-      }
+    entries = (0, import_fs.readdirSync)(dir);
+  } catch (err) {
+    console.warn(`[kbach] Cannot read directory ${dir}:`, err.message);
+    return;
+  }
+  for (const entry of entries) {
+    if (entry.startsWith(".") || entry === "node_modules") continue;
+    const full = (0, import_path.join)(dir, entry);
+    try {
+      const st = (0, import_fs.statSync)(full);
+      if (st.isDirectory()) scanDir(full, onFile);
+      else if (/\.(tsx?|jsx?)$/.test(entry)) onFile(full, (0, import_fs.readFileSync)(full, "utf-8"));
+    } catch (err) {
+      console.warn(`[kbach] Cannot process ${full}:`, err.message);
     }
-  } catch {
   }
 }
 function kbach(userConfig) {
   const cfg = buildConfig(userConfig ?? {});
   const screens = toNumericScreens(cfg.theme.screens ?? {});
+  const screenKeys = Object.keys(cfg.theme.screens ?? {});
+  const responsivePattern = screenKeys.length ? screenKeys.map((k) => k.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|") : "sm|md|lg|xl|2xl";
+  const responsiveRe = new RegExp(`^(${responsivePattern}):`);
   let root = process.cwd();
   let mainCSSFile = null;
   const fileTokens = /* @__PURE__ */ new Map();
@@ -3005,7 +3068,7 @@ function kbach(userConfig) {
     }
   }
   function generateCSS() {
-    return formatKbachCSS(buildTokenCSSView(), cfg.theme);
+    return formatKbachCSS(buildTokenCSSView(), cfg.theme, responsiveRe);
   }
   return {
     name: "kbach",
@@ -3013,19 +3076,39 @@ 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 = findMainCSSFile(root);
+      mainCSSFile = findKbachCSS(root);
       initialScan();
       if (mainCSSFile) writeKbachToFile(mainCSSFile, generateCSS());
     },
-    handleHotUpdate({ file }) {
+    handleHotUpdate({ file, server }) {
       if (file.includes("node_modules") || !/\.(tsx?|jsx?)$/.test(file)) return;
       try {
         processFile(file, (0, import_fs.readFileSync)(file, "utf-8"));
       } catch {
         fileTokens.delete(normPath(file));
       }
-      if (mainCSSFile) writeKbachToFile(mainCSSFile, generateCSS());
+      const active = /* @__PURE__ */ new Set();
+      for (const tokens of fileTokens.values()) for (const t of tokens) active.add(t);
+      for (const tok of tokenCSS.keys()) {
+        if (!active.has(tok)) tokenCSS.delete(tok);
+      }
+      if (mainCSSFile) {
+        const changed = writeKbachToFile(mainCSSFile, generateCSS());
+        if (changed) server.watcher.emit("change", mainCSSFile);
+      }
     }
   };
 }

package/dist/vite-plugin.mjs

@@ -3,10 +3,10 @@ import {
   generateClassCSS,
   setCSSGenMode,
   splitClassTokens
-} from "./chunk-VCNP57PR.mjs";
+} from "./chunk-52N32L7A.mjs";
 
 // src/vite-plugin.ts
-import { readFileSync, writeFileSync, existsSync, readdirSync, statSync } from "fs";
+import { readFileSync, writeFileSync, readdirSync, statSync } from "fs";
 import { join } from "path";
 function normPath(p) {
   const fwd = p.replace(/\\/g, "/");
@@ -25,9 +25,9 @@ var GROUPS = [
   ["Effects", /^(shadow|opacity|blur|brightness|contrast|grayscale|transition|duration|ease|delay|animate|scale|rotate|translate|transform|cursor|pointer|select-)/]
 ];
 var GROUP_ORDER = ["Layout", "Sizing", "Spacing", "Typography", "Colors", "Borders", "Effects", "Utilities", "Dark Mode", "Responsive"];
-function classifyToken(token) {
+function classifyToken(token, responsiveRe) {
   if (/^dark:/.test(token)) return "Dark Mode";
-  if (/^(sm|md|lg|xl|2xl):/.test(token)) return "Responsive";
+  if (responsiveRe.test(token)) return "Responsive";
   const base = token.replace(/^(hover|focus|active|group-hover|peer-hover):/, "");
   for (const [label, re] of GROUPS) {
     if (re.test(base)) return label;
@@ -52,7 +52,7 @@ function buildColorVarMap(theme, usedCSS) {
   }
   return map;
 }
-function formatKbachCSS(tokenCSS, theme) {
+function formatKbachCSS(tokenCSS, theme, responsiveRe) {
   const allRaw = [...tokenCSS.values()].filter(Boolean).join("\n");
   const colorVars = buildColorVarMap(theme, allRaw);
   function applyVars(css) {
@@ -63,7 +63,7 @@ function formatKbachCSS(tokenCSS, theme) {
   const groups = new Map(GROUP_ORDER.map((g) => [g, []]));
   for (const [token, css] of tokenCSS) {
     if (!css) continue;
-    const label = classifyToken(token);
+    const label = classifyToken(token, responsiveRe);
     if (!groups.has(label)) groups.set(label, []);
     groups.get(label).push(applyVars(css));
   }
@@ -92,16 +92,50 @@ function buildThemeGlobal(theme) {
   const family = Array.isArray(ff.sans) ? ff.sans.join(", ") : ff.sans;
   return `body { font-family: ${family}; }`;
 }
-function findMainCSSFile(root) {
-  for (const c of [
-    join(root, "app", "app.css"),
-    join(root, "src", "index.css"),
-    join(root, "src", "app.css"),
-    join(root, "app", "index.css")
-  ]) {
-    if (existsSync(c)) return c;
-  }
-  return null;
+var SKIP_DIRS = /* @__PURE__ */ new Set([
+  "node_modules",
+  "dist",
+  "build",
+  "out",
+  ".next",
+  ".nuxt",
+  ".output",
+  ".git",
+  ".svn",
+  ".cache",
+  "coverage",
+  "__pycache__"
+]);
+function findKbachCSS(root) {
+  const found = [];
+  function scan(dir, depth) {
+    if (depth > 10) return;
+    let entries;
+    try {
+      entries = readdirSync(dir);
+    } catch {
+      return;
+    }
+    for (const entry of entries) {
+      if (entry.startsWith(".") || SKIP_DIRS.has(entry)) continue;
+      const full = join(dir, entry);
+      try {
+        const st = statSync(full);
+        if (st.isDirectory()) scan(full, depth + 1);
+        else if (entry === "kbach.css") found.push(full);
+      } catch {
+      }
+    }
+  }
+  scan(root, 0);
+  if (found.length === 0) return null;
+  found.sort((a, b) => a.split(/[\\/]/g).length - b.split(/[\\/]/g).length);
+  if (found.length > 1) {
+    console.warn(
+      "[kbach] Multiple kbach.css files found \u2014 only the shallowest will receive generated styles.\n        Remove duplicates to avoid confusion:\n" + found.map((f) => `          ${f}`).join("\n")
+    );
+  }
+  return found[0];
 }
 function writeKbachToFile(filePath, css) {
   let existing = "";
@@ -117,7 +151,9 @@ ${KBACH_END}`;
   const next = start !== -1 && end !== -1 ? existing.slice(0, start) + block + existing.slice(end + KBACH_END.length) : existing ? `${existing}
 
 ${block}` : block;
-  if (next !== existing) writeFileSync(filePath, next, "utf-8");
+  if (next === existing) return false;
+  writeFileSync(filePath, next, "utf-8");
+  return true;
 }
 function toNumericScreens(screens) {
   const out = {};
@@ -131,11 +167,21 @@ function extractClassStrings(code) {
   const simpleRe = /(?:className|kb)=["']([^"']+)["']/g;
   let m;
   while ((m = simpleRe.exec(code)) !== null) pushTokens(m[1], found);
-  const exprLiteralRe = /(?:className|kb)=\{["'`]([^"'`}]+)["'`]\}/g;
-  while ((m = exprLiteralRe.exec(code)) !== null) pushTokens(m[1], found);
-  const ternaryBlockRe = /(?:className|kb)=\{([^}]{1,500})\}/g;
-  while ((m = ternaryBlockRe.exec(code)) !== null) {
-    const block = m[1];
+  const jsxExprRe = /(?:className|kb)=\{/g;
+  while ((m = jsxExprRe.exec(code)) !== null) {
+    let depth = 1;
+    let i = m.index + m[0].length;
+    let block = "";
+    while (i < code.length && depth > 0) {
+      const ch = code[i];
+      if (ch === "{") depth++;
+      else if (ch === "}") {
+        if (--depth === 0) break;
+      }
+      block += ch;
+      i++;
+    }
+    jsxExprRe.lastIndex = i + 1;
     const innerStrings = block.match(/["'`]([^"'`]{1,300})["'`]/g) ?? [];
     for (const s of innerStrings) pushTokens(s.slice(1, -1), found);
   }
@@ -158,23 +204,31 @@ function pushTokens(str, into) {
   }
 }
 function scanDir(dir, onFile) {
+  let entries;
   try {
-    for (const entry of readdirSync(dir)) {
-      if (entry.startsWith(".") || entry === "node_modules") continue;
-      const full = join(dir, entry);
-      try {
-        const st = statSync(full);
-        if (st.isDirectory()) scanDir(full, onFile);
-        else if (/\.(tsx?|jsx?)$/.test(entry)) onFile(full, readFileSync(full, "utf-8"));
-      } catch {
-      }
+    entries = readdirSync(dir);
+  } catch (err) {
+    console.warn(`[kbach] Cannot read directory ${dir}:`, err.message);
+    return;
+  }
+  for (const entry of entries) {
+    if (entry.startsWith(".") || entry === "node_modules") continue;
+    const full = join(dir, entry);
+    try {
+      const st = statSync(full);
+      if (st.isDirectory()) scanDir(full, onFile);
+      else if (/\.(tsx?|jsx?)$/.test(entry)) onFile(full, readFileSync(full, "utf-8"));
+    } catch (err) {
+      console.warn(`[kbach] Cannot process ${full}:`, err.message);
     }
-  } catch {
   }
 }
 function kbach(userConfig) {
   const cfg = buildConfig(userConfig ?? {});
   const screens = toNumericScreens(cfg.theme.screens ?? {});
+  const screenKeys = Object.keys(cfg.theme.screens ?? {});
+  const responsivePattern = screenKeys.length ? screenKeys.map((k) => k.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|") : "sm|md|lg|xl|2xl";
+  const responsiveRe = new RegExp(`^(${responsivePattern}):`);
   let root = process.cwd();
   let mainCSSFile = null;
   const fileTokens = /* @__PURE__ */ new Map();
@@ -208,7 +262,7 @@ function kbach(userConfig) {
     }
   }
   function generateCSS() {
-    return formatKbachCSS(buildTokenCSSView(), cfg.theme);
+    return formatKbachCSS(buildTokenCSSView(), cfg.theme, responsiveRe);
   }
   return {
     name: "kbach",
@@ -216,19 +270,39 @@ 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 = findMainCSSFile(root);
+      mainCSSFile = findKbachCSS(root);
       initialScan();
       if (mainCSSFile) writeKbachToFile(mainCSSFile, generateCSS());
     },
-    handleHotUpdate({ file }) {
+    handleHotUpdate({ file, server }) {
       if (file.includes("node_modules") || !/\.(tsx?|jsx?)$/.test(file)) return;
       try {
         processFile(file, readFileSync(file, "utf-8"));
       } catch {
         fileTokens.delete(normPath(file));
       }
-      if (mainCSSFile) writeKbachToFile(mainCSSFile, generateCSS());
+      const active = /* @__PURE__ */ new Set();
+      for (const tokens of fileTokens.values()) for (const t of tokens) active.add(t);
+      for (const tok of tokenCSS.keys()) {
+        if (!active.has(tok)) tokenCSS.delete(tok);
+      }
+      if (mainCSSFile) {
+        const changed = writeKbachToFile(mainCSSFile, generateCSS());
+        if (changed) server.watcher.emit("change", mainCSSFile);
+      }
     }
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react",
-  "version": "0.5.42",
+  "version": "0.5.44",
   "description": "React / React Native components and hooks for the Kbach framework",
   "source": "./src/index.ts",
   "main": "./dist/index.js",
@@ -54,7 +54,7 @@
     "vitest": "^1.0.0"
   },
   "peerDependencies": {
-    "react": ">=17.0.0",
+    "react": ">=18.0.0",
     "react-native": ">=0.70.0",
     "vite": ">=4.0.0"
   },