@kbach/react 0.5.35 → 0.5.37

package/dist/{chunk-VRYE5CAE.mjs → chunk-36QDTNAQ.mjs}

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

package/dist/{chunk-YU55J6F6.mjs → chunk-J2I5YSC5.mjs}

@@ -1284,12 +1284,22 @@ function splitClassTokens(classString) {
   let depth = 0;
   for (let i = 0; i < classString.length; i++) {
     const ch = classString[i];
-    if (ch === "[") depth++;
-    else if (ch === "]") depth--;
-    if (/\s/.test(ch) && depth === 0) {
-      if (current) {
-        tokens.push(current);
-        current = "";
+    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;
@@ -1298,6 +1308,9 @@ function splitClassTokens(classString) {
   if (current) tokens.push(current);
   return tokens;
 }
+function normalizeClassString(classString) {
+  return splitClassTokens(classString).join(" ");
+}
 function parseClasses(classString) {
   const results = [];
   for (const token of splitClassTokens(classString)) {
@@ -3343,6 +3356,17 @@ function flatten(resolved, isDark, state = {}, breakpoints = /* @__PURE__ */ new
   if (_df && !("fontFamily" in result)) {
     result.fontFamily = _df;
   }
+  if (isWeb) {
+    const r = result;
+    for (const [rnProp, [p1, p2]] of Object.entries(RN_SHORTHAND_EXPAND)) {
+      const v = r[rnProp];
+      if (v !== void 0) {
+        r[p1] = v;
+        r[p2] = v;
+        delete r[rnProp];
+      }
+    }
+  }
   return result;
 }
 function matchesMods(mods, isDark, state, breakpoints) {
@@ -3579,6 +3603,7 @@ export {
   setCSSGenMode,
   parseClass,
   splitClassTokens,
+  normalizeClassString,
   parseClasses,
   syncGlobalWidth,
   syncGlobalScreens,

package/dist/{chunk-65BTN2UR.mjs → chunk-VZHNEDUW.mjs}

@@ -3,15 +3,16 @@ import {
   InteractiveWrapper,
   useConditionalWidth,
   useGlobalDarkMode
-} from "./chunk-VRYE5CAE.mjs";
+} from "./chunk-36QDTNAQ.mjs";
 import {
   flatten,
   getActiveBreakpoints,
   getConfig,
   getDefaultFontFamily,
   isWeb,
+  normalizeClassString,
   resolve
-} from "./chunk-YU55J6F6.mjs";
+} from "./chunk-J2I5YSC5.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/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,
@@ -1447,12 +1449,22 @@ function splitClassTokens(classString) {
   let depth = 0;
   for (let i = 0; i < classString.length; i++) {
     const ch = classString[i];
-    if (ch === "[") depth++;
-    else if (ch === "]") depth--;
-    if (/\s/.test(ch) && depth === 0) {
-      if (current) {
-        tokens.push(current);
-        current = "";
+    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;
@@ -1461,6 +1473,9 @@ function splitClassTokens(classString) {
   if (current) tokens.push(current);
   return tokens;
 }
+function normalizeClassString(classString) {
+  return splitClassTokens(classString).join(" ");
+}
 function parseClasses(classString) {
   const results = [];
   for (const token of splitClassTokens(classString)) {
@@ -3460,6 +3475,17 @@ function flatten(resolved, isDark, state = {}, breakpoints = /* @__PURE__ */ new
   if (_df && !("fontFamily" in result)) {
     result.fontFamily = _df;
   }
+  if (isWeb) {
+    const r = result;
+    for (const [rnProp, [p1, p2]] of Object.entries(RN_SHORTHAND_EXPAND)) {
+      const v = r[rnProp];
+      if (v !== void 0) {
+        r[p1] = v;
+        r[p2] = v;
+        delete r[rnProp];
+      }
+    }
+  }
   return result;
 }
 function matchesMods(mods, isDark, state, breakpoints) {
@@ -4118,7 +4144,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,
@@ -4325,9 +4351,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-VRYE5CAE.mjs";
+} from "./chunk-36QDTNAQ.mjs";
 import {
   __require,
   buildConfig,
@@ -17,15 +17,17 @@ import {
   getConfig,
   initConfig,
   isWeb,
+  normalizeClassString,
   onConfigChange,
   parseClass,
   parseClasses,
   resolve,
   setGlobalWidth,
+  splitClassTokens,
   syncGlobalScreens,
   syncGlobalWidth,
   updateConfig
-} from "./chunk-YU55J6F6.mjs";
+} from "./chunk-J2I5YSC5.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

@@ -1351,12 +1351,22 @@ function splitClassTokens(classString) {
   let depth = 0;
   for (let i = 0; i < classString.length; i++) {
     const ch = classString[i];
-    if (ch === "[") depth++;
-    else if (ch === "]") depth--;
-    if (/\s/.test(ch) && depth === 0) {
-      if (current) {
-        tokens.push(current);
-        current = "";
+    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;
@@ -1365,6 +1375,9 @@ function splitClassTokens(classString) {
   if (current) tokens.push(current);
   return tokens;
 }
+function normalizeClassString(classString) {
+  return splitClassTokens(classString).join(" ");
+}
 function parseClasses(classString) {
   const results = [];
   for (const token of splitClassTokens(classString)) {
@@ -3352,6 +3365,17 @@ function flatten(resolved, isDark, state = {}, breakpoints = /* @__PURE__ */ new
   if (_df && !("fontFamily" in result)) {
     result.fontFamily = _df;
   }
+  if (isWeb) {
+    const r = result;
+    for (const [rnProp, [p1, p2]] of Object.entries(RN_SHORTHAND_EXPAND)) {
+      const v = r[rnProp];
+      if (v !== void 0) {
+        r[p1] = v;
+        r[p2] = v;
+        delete r[rnProp];
+      }
+    }
+  }
   return result;
 }
 function matchesMods(mods, isDark, state, breakpoints) {
@@ -3941,7 +3965,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);
@@ -3950,7 +3974,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);
@@ -3962,7 +3986,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-65BTN2UR.mjs";
-import "./chunk-VRYE5CAE.mjs";
-import "./chunk-YU55J6F6.mjs";
+} from "./chunk-VZHNEDUW.mjs";
+import "./chunk-36QDTNAQ.mjs";
+import "./chunk-J2I5YSC5.mjs";
 
 // src/jsx-dev-runtime.tsx
 function jsxDEV(type, props, key, isStaticChildren, _source, _self) {

package/dist/jsx-runtime.js

@@ -1350,12 +1350,22 @@ function splitClassTokens(classString) {
   let depth = 0;
   for (let i = 0; i < classString.length; i++) {
     const ch = classString[i];
-    if (ch === "[") depth++;
-    else if (ch === "]") depth--;
-    if (/\s/.test(ch) && depth === 0) {
-      if (current) {
-        tokens.push(current);
-        current = "";
+    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;
@@ -1364,6 +1374,9 @@ function splitClassTokens(classString) {
   if (current) tokens.push(current);
   return tokens;
 }
+function normalizeClassString(classString) {
+  return splitClassTokens(classString).join(" ");
+}
 function parseClasses(classString) {
   const results = [];
   for (const token of splitClassTokens(classString)) {
@@ -3351,6 +3364,17 @@ function flatten(resolved, isDark, state = {}, breakpoints = /* @__PURE__ */ new
   if (_df && !("fontFamily" in result)) {
     result.fontFamily = _df;
   }
+  if (isWeb) {
+    const r = result;
+    for (const [rnProp, [p1, p2]] of Object.entries(RN_SHORTHAND_EXPAND)) {
+      const v = r[rnProp];
+      if (v !== void 0) {
+        r[p1] = v;
+        r[p2] = v;
+        delete r[rnProp];
+      }
+    }
+  }
   return result;
 }
 function matchesMods(mods, isDark, state, breakpoints) {
@@ -3940,7 +3964,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);
@@ -3949,7 +3973,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);
@@ -3961,7 +3985,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-65BTN2UR.mjs";
-import "./chunk-VRYE5CAE.mjs";
-import "./chunk-YU55J6F6.mjs";
+} from "./chunk-VZHNEDUW.mjs";
+import "./chunk-36QDTNAQ.mjs";
+import "./chunk-J2I5YSC5.mjs";
 export {
   Fragment,
   jsx,

package/dist/vite-plugin.js

@@ -2931,12 +2931,22 @@ function splitClassTokens(classString) {
   let depth = 0;
   for (let i = 0; i < classString.length; i++) {
     const ch = classString[i];
-    if (ch === "[") depth++;
-    else if (ch === "]") depth--;
-    if (/\s/.test(ch) && depth === 0) {
-      if (current) {
-        tokens.push(current);
-        current = "";
+    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;

package/dist/vite-plugin.mjs

@@ -3,7 +3,7 @@ import {
   generateClassCSS,
   setCSSGenMode,
   splitClassTokens
-} from "./chunk-YU55J6F6.mjs";
+} from "./chunk-J2I5YSC5.mjs";
 
 // src/vite-plugin.ts
 import { readFileSync, writeFileSync, existsSync, readdirSync, statSync } from "fs";

package/package.json

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