@kbach/react 0.5.34 → 0.5.36

package/dist/{chunk-LMCUZ3HI.mjs → chunk-AZJVYYAX.mjs}

@@ -3,15 +3,16 @@ import {
   InteractiveWrapper,
   useConditionalWidth,
   useGlobalDarkMode
-} from "./chunk-6AUSWRH2.mjs";
+} from "./chunk-D2LLZADB.mjs";
 import {
   flatten,
   getActiveBreakpoints,
   getConfig,
   getDefaultFontFamily,
   isWeb,
+  normalizeClassString,
   resolve
-} from "./chunk-T3SOZ6AO.mjs";
+} from "./chunk-QTZGBGGJ.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -214,7 +215,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
     return _jsx(InteractiveWrapper, {
       Component: actualType,
       resolvedStyle: resolved,
-      ...isWeb && classStr ? { className: classStr } : {},
+      ...isWeb && classStr ? { className: normalizeClassString(classStr) } : {},
       style: userStyle,
       ...passProps
     }, key);
@@ -223,7 +224,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
     return _jsx(DarkWrapper, {
       Component: actualType,
       resolvedStyle: resolved,
-      ...isWeb && classStr ? { className: classStr } : {},
+      ...isWeb && classStr ? { className: normalizeClassString(classStr) } : {},
       style: userStyle,
       ...passProps
     }, key);
@@ -235,7 +236,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
   return makeElement(isStaticChildren, actualType, {
     ...passProps,
     style: finalStyle,
-    ...isWeb && classStr ? { className: classStr } : {}
+    ...isWeb && classStr ? { className: normalizeClassString(classStr) } : {}
   }, key);
 }
 function jsx(type, props, key) {

package/dist/{chunk-6AUSWRH2.mjs → chunk-D2LLZADB.mjs}

@@ -4,7 +4,7 @@ import {
   getGlobalWidth,
   isWeb,
   subscribeGlobalWidth
-} from "./chunk-T3SOZ6AO.mjs";
+} from "./chunk-QTZGBGGJ.mjs";
 
 // src/core/darkModeStore.ts
 var KEY = "__kbach_dark_store__";

package/dist/{chunk-T3SOZ6AO.mjs → chunk-QTZGBGGJ.mjs}

@@ -1249,7 +1249,7 @@ function parseClass(className) {
   const bracketStart = remaining.lastIndexOf("-[");
   if (bracketStart > 0 && remaining.endsWith("]")) {
     const utility = remaining.slice(0, bracketStart);
-    const value = remaining.slice(bracketStart + 2, -1);
+    const value = remaining.slice(bracketStart + 2, -1).replace(/_/g, " ");
     return { original: trimmed, modifiers, negative, important, utility, value, isArbitrary: true };
   }
   if (STANDALONE_UTILITIES.has(remaining)) {
@@ -1278,10 +1278,42 @@ function parseClass(className) {
   }
   return { original: trimmed, modifiers, negative, important, utility: remaining, value: "", isArbitrary: false };
 }
+function splitClassTokens(classString) {
+  const tokens = [];
+  let current = "";
+  let depth = 0;
+  for (let i = 0; i < classString.length; i++) {
+    const ch = classString[i];
+    if (ch === "[") {
+      depth++;
+      current += ch;
+      continue;
+    }
+    if (ch === "]") {
+      depth--;
+      current += ch;
+      continue;
+    }
+    if (/\s/.test(ch)) {
+      if (depth === 0) {
+        if (current) {
+          tokens.push(current);
+          current = "";
+        }
+      }
+    } else {
+      current += ch;
+    }
+  }
+  if (current) tokens.push(current);
+  return tokens;
+}
+function normalizeClassString(classString) {
+  return splitClassTokens(classString).join(" ");
+}
 function parseClasses(classString) {
   const results = [];
-  for (const token of classString.split(/\s+/)) {
-    if (!token) continue;
+  for (const token of splitClassTokens(classString)) {
     const parsed = parseClass(token);
     if (parsed) results.push(parsed);
   }
@@ -3559,6 +3591,8 @@ export {
   isWeb,
   setCSSGenMode,
   parseClass,
+  splitClassTokens,
+  normalizeClassString,
   parseClasses,
   syncGlobalWidth,
   syncGlobalScreens,

package/dist/index.d.mts

@@ -7,6 +7,19 @@ declare const defaultColors: ThemeColors;
 declare const defaultTheme: ThemeConfig;
 
 declare function parseClass(className: string): ParsedClass | null;
+/**
+ * Split a class string into tokens. Whitespace at bracket depth > 0 is STRIPPED
+ * (not just skipped as a delimiter) so that arbitrary values like rgb(41, 172, 15)
+ * become valid CSS class name tokens: bg-[rgb(41,172,15)].
+ * Spaces inside brackets are illegal in HTML class attributes and would cause the
+ * browser to split the class into multiple broken tokens.
+ */
+declare function splitClassTokens(classString: string): string[];
+/**
+ * Normalize a full class string so it is safe to use as an HTML className value.
+ * Strips spaces inside brackets: "bg-[rgb(41, 172, 15)] p-4" → "bg-[rgb(41,172,15)] p-4"
+ */
+declare function normalizeClassString(classString: string): string;
 /** Parse a space-separated class string into individual ParsedClass objects. */
 declare function parseClasses(classString: string): ParsedClass[];
 
@@ -301,4 +314,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, parseClass, parseClasses, resolve, 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, 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

@@ -7,6 +7,19 @@ declare const defaultColors: ThemeColors;
 declare const defaultTheme: ThemeConfig;
 
 declare function parseClass(className: string): ParsedClass | null;
+/**
+ * Split a class string into tokens. Whitespace at bracket depth > 0 is STRIPPED
+ * (not just skipped as a delimiter) so that arbitrary values like rgb(41, 172, 15)
+ * become valid CSS class name tokens: bg-[rgb(41,172,15)].
+ * Spaces inside brackets are illegal in HTML class attributes and would cause the
+ * browser to split the class into multiple broken tokens.
+ */
+declare function splitClassTokens(classString: string): string[];
+/**
+ * Normalize a full class string so it is safe to use as an HTML className value.
+ * Strips spaces inside brackets: "bg-[rgb(41, 172, 15)] p-4" → "bg-[rgb(41,172,15)] p-4"
+ */
+declare function normalizeClassString(classString: string): string;
 /** Parse a space-separated class string into individual ParsedClass objects. */
 declare function parseClasses(classString: string): ParsedClass[];
 
@@ -301,4 +314,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, parseClass, parseClasses, resolve, 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, flatten, getConfig, initConfig, kb, normalizeClassString, parseClass, parseClasses, resolve, splitClassTokens, styled, updateConfig, useBreakpoint, useColors, useGlobalDarkMode, useIsDark, useResolvedStyle, useResponsive, useStyles, useTheme, wrapColors };

package/dist/index.js

@@ -42,9 +42,11 @@ __export(index_exports, {
   getConfig: () => getConfig,
   initConfig: () => initConfig,
   kb: () => kb,
+  normalizeClassString: () => normalizeClassString,
   parseClass: () => parseClass,
   parseClasses: () => parseClasses,
   resolve: () => resolve,
+  splitClassTokens: () => splitClassTokens,
   styled: () => styled,
   updateConfig: () => updateConfig,
   useBreakpoint: () => useBreakpoint,
@@ -1412,7 +1414,7 @@ function parseClass(className) {
   const bracketStart = remaining.lastIndexOf("-[");
   if (bracketStart > 0 && remaining.endsWith("]")) {
     const utility = remaining.slice(0, bracketStart);
-    const value = remaining.slice(bracketStart + 2, -1);
+    const value = remaining.slice(bracketStart + 2, -1).replace(/_/g, " ");
     return { original: trimmed, modifiers, negative, important, utility, value, isArbitrary: true };
   }
   if (STANDALONE_UTILITIES.has(remaining)) {
@@ -1441,10 +1443,42 @@ function parseClass(className) {
   }
   return { original: trimmed, modifiers, negative, important, utility: remaining, value: "", isArbitrary: false };
 }
+function splitClassTokens(classString) {
+  const tokens = [];
+  let current = "";
+  let depth = 0;
+  for (let i = 0; i < classString.length; i++) {
+    const ch = classString[i];
+    if (ch === "[") {
+      depth++;
+      current += ch;
+      continue;
+    }
+    if (ch === "]") {
+      depth--;
+      current += ch;
+      continue;
+    }
+    if (/\s/.test(ch)) {
+      if (depth === 0) {
+        if (current) {
+          tokens.push(current);
+          current = "";
+        }
+      }
+    } else {
+      current += ch;
+    }
+  }
+  if (current) tokens.push(current);
+  return tokens;
+}
+function normalizeClassString(classString) {
+  return splitClassTokens(classString).join(" ");
+}
 function parseClasses(classString) {
   const results = [];
-  for (const token of classString.split(/\s+/)) {
-    if (!token) continue;
+  for (const token of splitClassTokens(classString)) {
     const parsed = parseClass(token);
     if (parsed) results.push(parsed);
   }
@@ -4099,7 +4133,7 @@ function styled(Component, baseClasses = "") {
         ...rest,
         style: finalStyle,
         // className lets injected CSS rules (group-hover:, before:, print:, etc.) match the element.
-        ...isWeb && combined ? { className: combined } : {},
+        ...isWeb && combined ? { className: normalizeClassString(combined) } : {},
         // onPressIn / onPressOut are React Native-only; on web use Pointer Events instead.
         ...isWeb ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
         onMouseEnter: handleMouseEnter,
@@ -4306,9 +4340,11 @@ function cx(...classes) {
   getConfig,
   initConfig,
   kb,
+  normalizeClassString,
   parseClass,
   parseClasses,
   resolve,
+  splitClassTokens,
   styled,
   updateConfig,
   useBreakpoint,

package/dist/index.mjs

@@ -6,7 +6,7 @@ import {
   useConditionalWidth,
   useGlobalDarkMode,
   useGlobalWidth
-} from "./chunk-6AUSWRH2.mjs";
+} from "./chunk-D2LLZADB.mjs";
 import {
   __require,
   buildConfig,
@@ -17,15 +17,17 @@ import {
   getConfig,
   initConfig,
   isWeb,
+  normalizeClassString,
   onConfigChange,
   parseClass,
   parseClasses,
   resolve,
   setGlobalWidth,
+  splitClassTokens,
   syncGlobalScreens,
   syncGlobalWidth,
   updateConfig
-} from "./chunk-T3SOZ6AO.mjs";
+} from "./chunk-QTZGBGGJ.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";
@@ -458,7 +460,7 @@ function styled(Component, baseClasses = "") {
         ...rest,
         style: finalStyle,
         // className lets injected CSS rules (group-hover:, before:, print:, etc.) match the element.
-        ...isWeb && combined ? { className: combined } : {},
+        ...isWeb && combined ? { className: normalizeClassString(combined) } : {},
         // onPressIn / onPressOut are React Native-only; on web use Pointer Events instead.
         ...isWeb ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
         onMouseEnter: handleMouseEnter,
@@ -541,9 +543,11 @@ export {
   getConfig,
   initConfig,
   kb,
+  normalizeClassString,
   parseClass,
   parseClasses,
   resolve,
+  splitClassTokens,
   styled,
   updateConfig,
   useBreakpoint,

package/dist/jsx-dev-runtime.js

@@ -1316,7 +1316,7 @@ function parseClass(className) {
   const bracketStart = remaining.lastIndexOf("-[");
   if (bracketStart > 0 && remaining.endsWith("]")) {
     const utility = remaining.slice(0, bracketStart);
-    const value = remaining.slice(bracketStart + 2, -1);
+    const value = remaining.slice(bracketStart + 2, -1).replace(/_/g, " ");
     return { original: trimmed, modifiers, negative, important, utility, value, isArbitrary: true };
   }
   if (STANDALONE_UTILITIES.has(remaining)) {
@@ -1345,10 +1345,42 @@ function parseClass(className) {
   }
   return { original: trimmed, modifiers, negative, important, utility: remaining, value: "", isArbitrary: false };
 }
+function splitClassTokens(classString) {
+  const tokens = [];
+  let current = "";
+  let depth = 0;
+  for (let i = 0; i < classString.length; i++) {
+    const ch = classString[i];
+    if (ch === "[") {
+      depth++;
+      current += ch;
+      continue;
+    }
+    if (ch === "]") {
+      depth--;
+      current += ch;
+      continue;
+    }
+    if (/\s/.test(ch)) {
+      if (depth === 0) {
+        if (current) {
+          tokens.push(current);
+          current = "";
+        }
+      }
+    } else {
+      current += ch;
+    }
+  }
+  if (current) tokens.push(current);
+  return tokens;
+}
+function normalizeClassString(classString) {
+  return splitClassTokens(classString).join(" ");
+}
 function parseClasses(classString) {
   const results = [];
-  for (const token of classString.split(/\s+/)) {
-    if (!token) continue;
+  for (const token of splitClassTokens(classString)) {
     const parsed = parseClass(token);
     if (parsed) results.push(parsed);
   }
@@ -3922,7 +3954,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
     return (0, import_jsx_runtime.jsx)(InteractiveWrapper, {
       Component: actualType,
       resolvedStyle: resolved,
-      ...isWeb && classStr ? { className: classStr } : {},
+      ...isWeb && classStr ? { className: normalizeClassString(classStr) } : {},
       style: userStyle,
       ...passProps
     }, key);
@@ -3931,7 +3963,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
     return (0, import_jsx_runtime.jsx)(DarkWrapper, {
       Component: actualType,
       resolvedStyle: resolved,
-      ...isWeb && classStr ? { className: classStr } : {},
+      ...isWeb && classStr ? { className: normalizeClassString(classStr) } : {},
       style: userStyle,
       ...passProps
     }, key);
@@ -3943,7 +3975,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
   return makeElement(isStaticChildren, actualType, {
     ...passProps,
     style: finalStyle,
-    ...isWeb && classStr ? { className: classStr } : {}
+    ...isWeb && classStr ? { className: normalizeClassString(classStr) } : {}
   }, key);
 }
 function jsx(type, props, key) {

package/dist/jsx-dev-runtime.mjs

@@ -2,9 +2,9 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-LMCUZ3HI.mjs";
-import "./chunk-6AUSWRH2.mjs";
-import "./chunk-T3SOZ6AO.mjs";
+} from "./chunk-AZJVYYAX.mjs";
+import "./chunk-D2LLZADB.mjs";
+import "./chunk-QTZGBGGJ.mjs";
 
 // src/jsx-dev-runtime.tsx
 function jsxDEV(type, props, key, isStaticChildren, _source, _self) {

package/dist/jsx-runtime.js

@@ -1315,7 +1315,7 @@ function parseClass(className) {
   const bracketStart = remaining.lastIndexOf("-[");
   if (bracketStart > 0 && remaining.endsWith("]")) {
     const utility = remaining.slice(0, bracketStart);
-    const value = remaining.slice(bracketStart + 2, -1);
+    const value = remaining.slice(bracketStart + 2, -1).replace(/_/g, " ");
     return { original: trimmed, modifiers, negative, important, utility, value, isArbitrary: true };
   }
   if (STANDALONE_UTILITIES.has(remaining)) {
@@ -1344,10 +1344,42 @@ function parseClass(className) {
   }
   return { original: trimmed, modifiers, negative, important, utility: remaining, value: "", isArbitrary: false };
 }
+function splitClassTokens(classString) {
+  const tokens = [];
+  let current = "";
+  let depth = 0;
+  for (let i = 0; i < classString.length; i++) {
+    const ch = classString[i];
+    if (ch === "[") {
+      depth++;
+      current += ch;
+      continue;
+    }
+    if (ch === "]") {
+      depth--;
+      current += ch;
+      continue;
+    }
+    if (/\s/.test(ch)) {
+      if (depth === 0) {
+        if (current) {
+          tokens.push(current);
+          current = "";
+        }
+      }
+    } else {
+      current += ch;
+    }
+  }
+  if (current) tokens.push(current);
+  return tokens;
+}
+function normalizeClassString(classString) {
+  return splitClassTokens(classString).join(" ");
+}
 function parseClasses(classString) {
   const results = [];
-  for (const token of classString.split(/\s+/)) {
-    if (!token) continue;
+  for (const token of splitClassTokens(classString)) {
     const parsed = parseClass(token);
     if (parsed) results.push(parsed);
   }
@@ -3921,7 +3953,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
     return (0, import_jsx_runtime.jsx)(InteractiveWrapper, {
       Component: actualType,
       resolvedStyle: resolved,
-      ...isWeb && classStr ? { className: classStr } : {},
+      ...isWeb && classStr ? { className: normalizeClassString(classStr) } : {},
       style: userStyle,
       ...passProps
     }, key);
@@ -3930,7 +3962,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
     return (0, import_jsx_runtime.jsx)(DarkWrapper, {
       Component: actualType,
       resolvedStyle: resolved,
-      ...isWeb && classStr ? { className: classStr } : {},
+      ...isWeb && classStr ? { className: normalizeClassString(classStr) } : {},
       style: userStyle,
       ...passProps
     }, key);
@@ -3942,7 +3974,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
   return makeElement(isStaticChildren, actualType, {
     ...passProps,
     style: finalStyle,
-    ...isWeb && classStr ? { className: classStr } : {}
+    ...isWeb && classStr ? { className: normalizeClassString(classStr) } : {}
   }, key);
 }
 function jsx(type, props, key) {

package/dist/jsx-runtime.mjs

@@ -2,9 +2,9 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-LMCUZ3HI.mjs";
-import "./chunk-6AUSWRH2.mjs";
-import "./chunk-T3SOZ6AO.mjs";
+} from "./chunk-AZJVYYAX.mjs";
+import "./chunk-D2LLZADB.mjs";
+import "./chunk-QTZGBGGJ.mjs";
 export {
   Fragment,
   jsx,

package/dist/vite-plugin.js

@@ -2896,7 +2896,7 @@ function parseClass(className) {
   const bracketStart = remaining.lastIndexOf("-[");
   if (bracketStart > 0 && remaining.endsWith("]")) {
     const utility = remaining.slice(0, bracketStart);
-    const value = remaining.slice(bracketStart + 2, -1);
+    const value = remaining.slice(bracketStart + 2, -1).replace(/_/g, " ");
     return { original: trimmed, modifiers, negative, important, utility, value, isArbitrary: true };
   }
   if (STANDALONE_UTILITIES.has(remaining)) {
@@ -2925,10 +2925,39 @@ function parseClass(className) {
   }
   return { original: trimmed, modifiers, negative, important, utility: remaining, value: "", isArbitrary: false };
 }
+function splitClassTokens(classString) {
+  const tokens = [];
+  let current = "";
+  let depth = 0;
+  for (let i = 0; i < classString.length; i++) {
+    const ch = classString[i];
+    if (ch === "[") {
+      depth++;
+      current += ch;
+      continue;
+    }
+    if (ch === "]") {
+      depth--;
+      current += ch;
+      continue;
+    }
+    if (/\s/.test(ch)) {
+      if (depth === 0) {
+        if (current) {
+          tokens.push(current);
+          current = "";
+        }
+      }
+    } else {
+      current += ch;
+    }
+  }
+  if (current) tokens.push(current);
+  return tokens;
+}
 function parseClasses(classString) {
   const results = [];
-  for (const token of classString.split(/\s+/)) {
-    if (!token) continue;
+  for (const token of splitClassTokens(classString)) {
     const parsed = parseClass(token);
     if (parsed) results.push(parsed);
   }
@@ -3509,7 +3538,7 @@ function kbach(userConfig) {
     for (const dir of ["src", "app", "pages", "components", "views", "layouts"]) {
       scanDir((0, import_path.join)(root, dir), (code) => {
         for (const cls of extractClassStrings(code))
-          for (const token of cls.split(/\s+/).filter(Boolean))
+          for (const token of splitClassTokens(cls))
             if (!tokenCSS.has(token)) {
               const css = generateClassCSS(token, cfg.theme, cfg.darkMode, screens);
               tokenCSS.set(token, css);

package/dist/vite-plugin.mjs

@@ -1,8 +1,9 @@
 import {
   buildConfig,
   generateClassCSS,
-  setCSSGenMode
-} from "./chunk-T3SOZ6AO.mjs";
+  setCSSGenMode,
+  splitClassTokens
+} from "./chunk-QTZGBGGJ.mjs";
 
 // src/vite-plugin.ts
 import { readFileSync, writeFileSync, existsSync, readdirSync, statSync } from "fs";
@@ -150,7 +151,7 @@ function kbach(userConfig) {
     for (const dir of ["src", "app", "pages", "components", "views", "layouts"]) {
       scanDir(join(root, dir), (code) => {
         for (const cls of extractClassStrings(code))
-          for (const token of cls.split(/\s+/).filter(Boolean))
+          for (const token of splitClassTokens(cls))
             if (!tokenCSS.has(token)) {
               const css = generateClassCSS(token, cfg.theme, cfg.darkMode, screens);
               tokenCSS.set(token, css);

package/package.json

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