@kbach/react 0.6.30 → 0.6.32

package/dist/{chunk-FF4AZQIQ.mjs → chunk-JUGDQQQ4.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-E322MVGC.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -49,7 +50,7 @@ var DarkWrapper = React.forwardRef(
       return s;
     }, [resolvedStyle, isDark, width, screens, isNonStringComponent]);
     const skipComputedInline = isWebPlatform;
-    const finalStyle = skipComputedInline ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
+    const finalStyle = skipComputedInline ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? [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);
   }
@@ -107,8 +108,7 @@ function omitConsumed(props) {
 }
 function mergeStyle(computed, userStyle) {
   if (!userStyle) return computed;
-  if (Array.isArray(userStyle)) return Object.assign({}, computed, ...userStyle);
-  return { ...computed, ...userStyle };
+  return Array.isArray(userStyle) ? [computed, ...userStyle] : [computed, userStyle];
 }
 function withImpliedFlexIfNeeded(webTag, resolvedBase, userStyle) {
   if (!webTag || !resolvedBase) return userStyle;
@@ -138,11 +138,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);
   }
@@ -162,8 +164,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);
@@ -171,7 +172,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);
@@ -180,7 +181,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);
@@ -198,7 +199,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) {

package/dist/core/index.d.ts

@@ -86,8 +86,17 @@ interface ResolvedStyle {
     /** Styles keyed by modifier or modifier combo, e.g. 'dark', 'hover', 'dark:hover' */
     [modifierKey: string]: StyleValue | undefined;
 }
-type ColorShades = Record<string, string>;
-type ThemeColors = Record<string, string | ColorShades>;
+/**
+ * A color value is either a plain string (hex/rgb/alias-to-another-color-name)
+ * or a mode-aware pair — resolved to `light` or `dark` per the active theme
+ * mode wherever it's actually used (className resolution, useColors()).
+ */
+type ColorValue = string | {
+    light: string;
+    dark: string;
+};
+type ColorShades = Record<string, ColorValue>;
+type ThemeColors = Record<string, ColorValue | ColorShades>;
 type ThemeSpacing = Record<string, number | string>;
 interface ThemeConfig {
     colors: ThemeColors;
@@ -163,6 +172,34 @@ interface ResolvedConfig {
     plugins: Array<(api: PluginAPI) => void>;
 }
 
+/**
+ * True for a mode-aware color pair (`{ light, dark }`), as opposed to a plain
+ * hex/rgb/alias string. Shared by config.ts (alias-chain resolution),
+ * resolvers/color.ts (direct lookups), and modeAwareColors.ts (className
+ * expansion) so all three agree on exactly one definition. Real shade keys
+ * are always numeric strings ('1'–'12'), so this can never collide with one.
+ */
+declare function isModeAwareColor(v: unknown): v is {
+    light: string;
+    dark: string;
+};
+
+/**
+ * Expand every class referencing a mode-aware color (a kbach.config.js color
+ * value shaped `{ light, dark }`) into an explicit base + dark: pair BEFORE
+ * normal parsing — e.g. `bg-surface` becomes `bg-[#ffffff] dark:bg-[#111827]`.
+ * `bg-surface/50` becomes `bg-[#ffffff]/50 dark:bg-[#111827]/50` (the arbitrary-
+ * color-plus-opacity composition already resolveColor() already supports).
+ *
+ * Runs once, upfront, purely as a string rewrite — everything downstream
+ * (CSS generation, native bucketing/flatten(), the existing dark: reactivity
+ * machinery: DarkWrapper, bucketMods()) then handles the result exactly like
+ * a hand-written dark: pair, with zero further changes needed anywhere else.
+ * That also means resolve()'s cache (keyed on the ORIGINAL, unexpanded string
+ * — see resolver.ts) stays correct without any changes to its cache key.
+ */
+declare function expandModeAwareColorClasses(classString: string, colors: ThemeColors): string;
+
 declare const defaultColors: {
     transparent: string;
     current: string;
@@ -1271,4 +1308,4 @@ declare function subscribeGlobalWidth(listener: WidthListener): () => void;
  */
 declare function getActiveBreakpoints(width?: number, screens?: Record<string, number>): Set<string>;
 
-export { BASE_RESET, type ColorShades, type DarkMode, type DefaultColorName, type DefaultSpacingKey, type FrameworkConfig, LRUCache, type ParsedClass, type Platform, type PluginAPI, RESET_STYLE_ID, type ResolvedConfig, type ResolvedStyle, type StyleValue, type ThemeColors, type ThemeConfig, type ThemeMode, type ThemeSpacing, buildConfig, clearCache, clearPluginModifiers, customVariants, defaultColors, defaultTheme, disableRuntimeCSS, escapeCSSSelector, flatten, generateClassCSS, getActiveBreakpoints, getAllModifierNames, getBuiltinStandaloneNames, getBuiltinUtilityPrefixes, getConfig, getDefaultFontFamily, getEffectiveIsWeb, getGlobalDarkMode, getGlobalScreens, getGlobalWidth, getInteractiveModifiers, getModeModifiers, getModifier, getResponsiveModifiers, initConfig, isKnownModifier, isKnownUtility, isNative, isRuntimeCSSDisabled, isWeb, kbachWarn, matchModifier, normalizeClassString, onConfigChange, parseClass, parseClasses, parseHexRgb, registerModifier, resetConfig, resolve, resolveColor, resolveSizing, resolveSpacing, resolveUtility, setDefaultFontFamily, setGlobalDarkMode, setGlobalWidth, setResolveTarget, splitClassTokens, subscribeGlobalDarkMode, subscribeGlobalWidth, syncGlobalDarkMode, syncGlobalScreens, syncGlobalWidth, toNativeValue, updateConfig };
+export { BASE_RESET, type ColorShades, type ColorValue, type DarkMode, type DefaultColorName, type DefaultSpacingKey, type FrameworkConfig, LRUCache, type ParsedClass, type Platform, type PluginAPI, RESET_STYLE_ID, type ResolvedConfig, type ResolvedStyle, type StyleValue, type ThemeColors, type ThemeConfig, type ThemeMode, type ThemeSpacing, buildConfig, clearCache, clearPluginModifiers, customVariants, defaultColors, defaultTheme, disableRuntimeCSS, escapeCSSSelector, expandModeAwareColorClasses, flatten, generateClassCSS, getActiveBreakpoints, getAllModifierNames, getBuiltinStandaloneNames, getBuiltinUtilityPrefixes, getConfig, getDefaultFontFamily, getEffectiveIsWeb, getGlobalDarkMode, getGlobalScreens, getGlobalWidth, getInteractiveModifiers, getModeModifiers, getModifier, getResponsiveModifiers, initConfig, isKnownModifier, isKnownUtility, isModeAwareColor, isNative, isRuntimeCSSDisabled, isWeb, kbachWarn, matchModifier, normalizeClassString, onConfigChange, parseClass, parseClasses, parseHexRgb, registerModifier, resetConfig, resolve, resolveColor, resolveSizing, resolveSpacing, resolveUtility, setDefaultFontFamily, setGlobalDarkMode, setGlobalWidth, setResolveTarget, splitClassTokens, subscribeGlobalDarkMode, subscribeGlobalWidth, syncGlobalDarkMode, syncGlobalScreens, syncGlobalWidth, toNativeValue, updateConfig };