@kbach/react 0.6.29 → 0.6.31

package/dist/{chunk-S6AHQ5M6.mjs → chunk-MOWXWICC.mjs}

@@ -2,6 +2,7 @@
 import {
   EMPTY_BREAKPOINTS,
   InteractiveWrapper,
+  expandModeAwareColorClasses,
   flatten,
   getActiveBreakpoints,
   getConfig,
@@ -24,7 +25,7 @@ import {
   transformToWebProps,
   useConditionalGlobalDarkMode,
   useConditionalWidth
-} from "./chunk-TKBIGAR2.mjs";
+} from "./chunk-OIJ6RP4F.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -111,10 +112,16 @@ function mergeStyle(computed, userStyle) {
   return { ...computed, ...userStyle };
 }
 function withImpliedFlexIfNeeded(webTag, resolvedBase, userStyle) {
-  if (!webTag || !resolvedBase || resolvedBase.display !== void 0 || !("flexGrow" in resolvedBase || "flexShrink" in resolvedBase || "flex" in resolvedBase)) {
-    return userStyle;
-  }
-  return Array.isArray(userStyle) ? [{ display: "flex" }, ...userStyle] : { display: "flex", ...userStyle };
+  if (!webTag || !resolvedBase) return userStyle;
+  const explicitDisplay = resolvedBase.display;
+  const hasFlexItemProps = "flexGrow" in resolvedBase || "flexShrink" in resolvedBase || "flex" in resolvedBase;
+  const willBeFlex = explicitDisplay === "flex" || explicitDisplay === void 0 && hasFlexItemProps;
+  if (!willBeFlex) return userStyle;
+  const compensation = {};
+  if (explicitDisplay === void 0) compensation.display = "flex";
+  if (resolvedBase.flexDirection === void 0) compensation.flexDirection = "column";
+  if (Object.keys(compensation).length === 0) return userStyle;
+  return Array.isArray(userStyle) ? [compensation, ...userStyle] : { ...compensation, ...userStyle };
 }
 function makeElement(isStaticChildren, type, props, key) {
   return (isStaticChildren ? _jsxs : _jsx)(type, props, key);
@@ -132,11 +139,13 @@ function processElement(type, rawProps, key, isStaticChildren) {
     return makeElement(isStaticChildren, effectiveType, workingProps, key);
   }
   const classStr = classStrRaw;
-  if (!isNative && isRuntimeCSSDisabled() && classStr && !__kbachStyles) {
+  const config = getConfig();
+  const expandedClassStr = classStr ? expandModeAwareColorClasses(classStr, config.theme.colors) : classStr;
+  if (!isNative && isRuntimeCSSDisabled() && expandedClassStr && !__kbachStyles) {
     const { style: userStyle2, ...passProps2 } = omitConsumed(workingProps);
     return makeElement(isStaticChildren, effectiveType, {
       ...passProps2,
-      className: normalizeClassString(classStr),
+      className: normalizeClassString(expandedClassStr),
       ...userStyle2 !== void 0 ? { style: userStyle2 } : {}
     }, key);
   }
@@ -156,8 +165,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
     const finalStyle2 = userStyle2 ? Array.isArray(userStyle2) ? { fontFamily: defaultFont, ...Object.assign({}, ...userStyle2) } : { fontFamily: defaultFont, ...userStyle2 } : { fontFamily: defaultFont };
     return makeElement(isStaticChildren, effectiveType, { ...passProps2, style: finalStyle2 }, key);
   }
-  const config = getConfig();
-  const resolved = !isWeb && __kbachStyles != null ? __kbachStyles : classStr ? resolve(classStr, config.theme, config.darkMode) : {};
+  const resolved = !isWeb && __kbachStyles != null ? __kbachStyles : expandedClassStr ? resolve(expandedClassStr, config.theme, config.darkMode) : {};
   const { style: rawUserStyle, ...passProps } = omitConsumed(workingProps);
   const userStyle = withImpliedFlexIfNeeded(webTag, resolved.base, rawUserStyle);
   const { interactive, modeOrResponsive } = bucketMods(resolved);
@@ -165,7 +173,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
     return _jsx(InteractiveWrapper, {
       Component: effectiveType,
       resolvedStyle: resolved,
-      ...!isNative && classStr ? { className: normalizeClassString(classStr) } : {},
+      ...!isNative && expandedClassStr ? { className: normalizeClassString(expandedClassStr) } : {},
       style: userStyle,
       ...passProps
     }, key);
@@ -174,7 +182,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
     return _jsx(DarkWrapper, {
       Component: effectiveType,
       resolvedStyle: resolved,
-      ...!isNative && classStr ? { className: normalizeClassString(classStr) } : {},
+      ...!isNative && expandedClassStr ? { className: normalizeClassString(expandedClassStr) } : {},
       style: userStyle,
       ...passProps
     }, key);
@@ -192,7 +200,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
   return makeElement(isStaticChildren, effectiveType, {
     ...passProps,
     ...finalStyle !== void 0 ? { style: finalStyle } : {},
-    ...!isNative && classStr ? { className: normalizeClassString(classStr) } : {}
+    ...!isNative && expandedClassStr ? { className: normalizeClassString(expandedClassStr) } : {}
   }, key);
 }
 function jsx(type, props, key) {