@kbach/react 0.6.39 → 0.6.40

package/dist/index.mjs

@@ -7,6 +7,7 @@ import {
   buildConfig,
   chain,
   clearCache,
+  composeNativeStyle,
   defaultColors,
   defaultTheme,
   disableRuntimeCSS,
@@ -15,6 +16,7 @@ import {
   getActiveBreakpoints,
   getConfig,
   getEffectiveIsWeb,
+  getGlobalScreens,
   getImpliedRNStyle,
   getWebTag,
   hasInteractiveBuckets,
@@ -30,6 +32,7 @@ import {
   parseClasses,
   parseHexRgb,
   registerWebElement,
+  resetConfig,
   resolve,
   setGlobalDarkMode,
   setGlobalWidth,
@@ -45,7 +48,7 @@ import {
   useGlobalDarkMode,
   useGlobalWidth,
   useSyncExternalStore
-} from "./chunk-NE4LAJXK.mjs";
+} from "./chunk-LQH3CJ3G.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";
@@ -152,6 +155,7 @@ var _mountedProviderCount = 0;
 var _warnedMultipleProviders = false;
 var _mountedConfigOverrideCount = 0;
 var _warnedConfigOverride = false;
+var _warnedMediaModeToggle = false;
 function loadPersistedMode() {
   try {
     if (isWeb) return localStorage.getItem(STORAGE_KEY);
@@ -230,6 +234,9 @@ function ThemeProvider({
     return () => {
       _mountedProviderCount--;
       if (configOverride) _mountedConfigOverrideCount--;
+      if (_prevConfigOverrideRef.current !== void 0 && _mountedProviderCount === 0) {
+        resetConfig();
+      }
     };
   }, []);
   const [webWidth, setWebWidth] = useState(0);
@@ -296,9 +303,15 @@ function ThemeProvider({
     return () => window.removeEventListener("storage", onStorage);
   }, [disablePersistence]);
   const setMode = useCallback((next) => {
+    if (process.env.NODE_ENV !== "production" && isWeb && resolvedConfig.darkMode === "media" && !_warnedMediaModeToggle) {
+      _warnedMediaModeToggle = true;
+      kbachWarn(
+        'setMode()/toggle() was called while darkMode is "media" \u2014 the resolved mode/isDark from useTheme()/useIsDark() will update, but the actual CSS stays driven by prefers-color-scheme and will not change to match. Use darkMode: "attribute" or "class" if the app needs manual toggling.'
+      );
+    }
     _setMode(next);
     if (!disablePersistence) persistMode(next);
-  }, [disablePersistence]);
+  }, [disablePersistence, resolvedConfig.darkMode]);
   const toggle = useCallback(() => {
     setMode(mode === "dark" || mode === "system" && systemScheme === "dark" ? "light" : "dark");
   }, [mode, systemScheme, setMode]);
@@ -403,9 +416,10 @@ function styled(Component, baseClasses = "") {
       const needsWidth = hasResponsiveBuckets(resolved);
       const width = useConditionalWidth(needsWidth && !isWebPlatform);
       const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
+      const screens = getGlobalScreens();
       const computedStyle = useMemo4(
         () => isWebPlatform ? {} : flatten(resolved, isDark, { pressed, hover: hovered, focus: focused, disabled, checked }, breakpoints),
-        [resolved, isDark, pressed, hovered, focused, disabled, checked, width]
+        [resolved, isDark, pressed, hovered, focused, disabled, checked, width, screens]
         // eslint-disable-line react-hooks/exhaustive-deps
       );
       const webTag = isWebPlatform ? getWebTag(Component, rest) : null;
@@ -414,7 +428,7 @@ function styled(Component, baseClasses = "") {
         const compensation = getImpliedRNStyle(webTag, resolved.base);
         if (!compensation) return flatStyleProp;
         return flatStyleProp ? { ...compensation, ...flatStyleProp } : compensation;
-      })() : styleProp ? Array.isArray(styleProp) ? [computedStyle, ...styleProp] : [computedStyle, styleProp] : computedStyle;
+      })() : composeNativeStyle(computedStyle, styleProp);
       const effectiveComponent = webTag ?? Component;
       const componentName2 = Component.displayName ?? Component.name ?? "";
       const effectiveRest = webTag && componentName2 ? transformToWebProps(componentName2, webTag, rest) : rest;

package/dist/jsx-dev-runtime.js

@@ -163,6 +163,10 @@ function stripWebOnlyProps(s) {
     delete s.position;
   }
 }
+function composeNativeStyle(computed, userStyle) {
+  if (!userStyle) return computed;
+  return Array.isArray(userStyle) ? [computed, ...userStyle] : [computed, userStyle];
+}
 
 // src/InteractiveWrapper.tsx
 var InteractiveWrapper = (0, import_react2.forwardRef)(
@@ -188,6 +192,7 @@ var InteractiveWrapper = (0, import_react2.forwardRef)(
     const needsWidth = hasResponsiveBuckets(resolvedStyle);
     const width = useConditionalWidth(needsWidth && !isWebPlatform);
     const breakpoints = needsWidth ? (0, import_core4.getActiveBreakpoints)(width) : EMPTY_BREAKPOINTS;
+    const screens = (0, import_core4.getGlobalScreens)();
     const [pressed, setPressed] = (0, import_react2.useState)(false);
     const [hovered, setHovered] = (0, import_react2.useState)(false);
     const [focused, setFocused] = (0, import_react2.useState)(false);
@@ -231,10 +236,10 @@ var InteractiveWrapper = (0, import_react2.forwardRef)(
         if (isNonStringComponent) stripWebOnlyProps(s);
         return s;
       },
-      [resolvedStyle, isDark, pressed, hovered, focused, width, disabled, checked, isNonStringComponent]
+      [resolvedStyle, isDark, pressed, hovered, focused, width, screens, disabled, checked, isNonStringComponent]
     );
     const skipComputedInline = isWebPlatform;
-    const finalStyle = skipComputedInline ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? [computedStyle, ...styleProp] : [computedStyle, styleProp] : computedStyle;
+    const finalStyle = skipComputedInline ? styleProp ?? void 0 : composeNativeStyle(computedStyle, styleProp);
     const componentProps = {
       ref,
       ...restForComponent,
@@ -291,7 +296,7 @@ var DarkWrapper = import_react3.default.forwardRef(
       return s;
     }, [resolvedStyle, isDark, width, screens, isNonStringComponent]);
     const skipComputedInline = isWebPlatform;
-    const finalStyle = skipComputedInline ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? [computedStyle, ...styleProp] : [computedStyle, styleProp] : computedStyle;
+    const finalStyle = skipComputedInline ? styleProp ?? void 0 : composeNativeStyle(computedStyle, styleProp);
     const props = { ref, ...rest, style: finalStyle };
     return Array.isArray(children) ? import_react3.default.createElement(Component, props, ...children) : import_react3.default.createElement(Component, props, children);
   }
@@ -403,8 +408,9 @@ var _rnOnlyProps = /* @__PURE__ */ new Set([
   "lineBreakStrategyIOS",
   // TextInput
   "multiline",
-  "resizeMode",
-  // handled separately
+  // NOTE: 'resizeMode' (Image's prop, not TextInput's) deliberately does NOT
+  // go here — it's handled below in the isImage branch (mapped to CSS
+  // object-fit). Blacklisting it here would make that branch unreachable.
   "blurOnSubmit",
   "clearButtonMode",
   "clearTextOnFocus",
@@ -530,7 +536,7 @@ function transformToWebProps(originalName, tag, props) {
         continue;
       }
       if (k === "keyboardType") {
-        if (!("type" in props) && !("secureTextEntry" in props)) {
+        if (!("type" in props) && !props.secureTextEntry) {
           const mapped = _keyboardTypeMap[v];
           if (mapped) out.type = mapped;
         }
@@ -546,7 +552,7 @@ function transformToWebProps(originalName, tag, props) {
       }
     }
     if (isScrollable && k === "horizontal") {
-      if (v) pendingStyle = { display: "flex", flexDirection: "row", overflowX: "auto" };
+      if (v) pendingStyle = { ...pendingStyle ?? {}, display: "flex", flexDirection: "row", overflowX: "auto" };
       continue;
     }
     if (k === "pointerEvents") {
@@ -640,10 +646,6 @@ function omitConsumed(props) {
   }
   return out;
 }
-function mergeStyle(computed, userStyle) {
-  if (!userStyle) return computed;
-  return Array.isArray(userStyle) ? [computed, ...userStyle] : [computed, userStyle];
-}
 function withImpliedRNStyleIfNeeded(webTag, resolvedBase, userStyle) {
   const compensation = getImpliedRNStyle(webTag, resolvedBase);
   if (!compensation) return userStyle;
@@ -719,7 +721,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
     const computedStyle = (0, import_core6.flatten)(resolved, false);
     stripInternalMarkers(computedStyle);
     if (typeof effectiveType !== "string") stripWebOnlyProps(computedStyle);
-    finalStyle = mergeStyle(computedStyle, userStyle);
+    finalStyle = composeNativeStyle(computedStyle, userStyle);
   } else {
     finalStyle = userStyle ?? void 0;
   }

package/dist/jsx-dev-runtime.mjs

@@ -3,8 +3,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-Z4ZOGRZG.mjs";
-import "./chunk-NE4LAJXK.mjs";
+} from "./chunk-ZFVHIT3V.mjs";
+import "./chunk-LQH3CJ3G.mjs";
 
 // src/jsx-dev-runtime.tsx
 function jsxDEV(type, props, key, isStaticChildren, source, self) {

package/dist/jsx-runtime.js

@@ -164,6 +164,10 @@ function stripWebOnlyProps(s) {
     delete s.position;
   }
 }
+function composeNativeStyle(computed, userStyle) {
+  if (!userStyle) return computed;
+  return Array.isArray(userStyle) ? [computed, ...userStyle] : [computed, userStyle];
+}
 
 // src/InteractiveWrapper.tsx
 var InteractiveWrapper = (0, import_react2.forwardRef)(
@@ -189,6 +193,7 @@ var InteractiveWrapper = (0, import_react2.forwardRef)(
     const needsWidth = hasResponsiveBuckets(resolvedStyle);
     const width = useConditionalWidth(needsWidth && !isWebPlatform);
     const breakpoints = needsWidth ? (0, import_core4.getActiveBreakpoints)(width) : EMPTY_BREAKPOINTS;
+    const screens = (0, import_core4.getGlobalScreens)();
     const [pressed, setPressed] = (0, import_react2.useState)(false);
     const [hovered, setHovered] = (0, import_react2.useState)(false);
     const [focused, setFocused] = (0, import_react2.useState)(false);
@@ -232,10 +237,10 @@ var InteractiveWrapper = (0, import_react2.forwardRef)(
         if (isNonStringComponent) stripWebOnlyProps(s);
         return s;
       },
-      [resolvedStyle, isDark, pressed, hovered, focused, width, disabled, checked, isNonStringComponent]
+      [resolvedStyle, isDark, pressed, hovered, focused, width, screens, disabled, checked, isNonStringComponent]
     );
     const skipComputedInline = isWebPlatform;
-    const finalStyle = skipComputedInline ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? [computedStyle, ...styleProp] : [computedStyle, styleProp] : computedStyle;
+    const finalStyle = skipComputedInline ? styleProp ?? void 0 : composeNativeStyle(computedStyle, styleProp);
     const componentProps = {
       ref,
       ...restForComponent,
@@ -292,7 +297,7 @@ var DarkWrapper = import_react3.default.forwardRef(
       return s;
     }, [resolvedStyle, isDark, width, screens, isNonStringComponent]);
     const skipComputedInline = isWebPlatform;
-    const finalStyle = skipComputedInline ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? [computedStyle, ...styleProp] : [computedStyle, styleProp] : computedStyle;
+    const finalStyle = skipComputedInline ? styleProp ?? void 0 : composeNativeStyle(computedStyle, styleProp);
     const props = { ref, ...rest, style: finalStyle };
     return Array.isArray(children) ? import_react3.default.createElement(Component, props, ...children) : import_react3.default.createElement(Component, props, children);
   }
@@ -409,8 +414,9 @@ var _rnOnlyProps = /* @__PURE__ */ new Set([
   "lineBreakStrategyIOS",
   // TextInput
   "multiline",
-  "resizeMode",
-  // handled separately
+  // NOTE: 'resizeMode' (Image's prop, not TextInput's) deliberately does NOT
+  // go here — it's handled below in the isImage branch (mapped to CSS
+  // object-fit). Blacklisting it here would make that branch unreachable.
   "blurOnSubmit",
   "clearButtonMode",
   "clearTextOnFocus",
@@ -536,7 +542,7 @@ function transformToWebProps(originalName, tag, props) {
         continue;
       }
       if (k === "keyboardType") {
-        if (!("type" in props) && !("secureTextEntry" in props)) {
+        if (!("type" in props) && !props.secureTextEntry) {
           const mapped = _keyboardTypeMap[v];
           if (mapped) out.type = mapped;
         }
@@ -552,7 +558,7 @@ function transformToWebProps(originalName, tag, props) {
       }
     }
     if (isScrollable && k === "horizontal") {
-      if (v) pendingStyle = { display: "flex", flexDirection: "row", overflowX: "auto" };
+      if (v) pendingStyle = { ...pendingStyle ?? {}, display: "flex", flexDirection: "row", overflowX: "auto" };
       continue;
     }
     if (k === "pointerEvents") {
@@ -646,10 +652,6 @@ function omitConsumed(props) {
   }
   return out;
 }
-function mergeStyle(computed, userStyle) {
-  if (!userStyle) return computed;
-  return Array.isArray(userStyle) ? [computed, ...userStyle] : [computed, userStyle];
-}
 function withImpliedRNStyleIfNeeded(webTag, resolvedBase, userStyle) {
   const compensation = getImpliedRNStyle(webTag, resolvedBase);
   if (!compensation) return userStyle;
@@ -725,7 +727,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
     const computedStyle = (0, import_core6.flatten)(resolved, false);
     stripInternalMarkers(computedStyle);
     if (typeof effectiveType !== "string") stripWebOnlyProps(computedStyle);
-    finalStyle = mergeStyle(computedStyle, userStyle);
+    finalStyle = composeNativeStyle(computedStyle, userStyle);
   } else {
     finalStyle = userStyle ?? void 0;
   }

package/dist/jsx-runtime.mjs

@@ -4,10 +4,10 @@ import {
   _invalidateDefaultFontCache,
   jsx,
   jsxs
-} from "./chunk-Z4ZOGRZG.mjs";
+} from "./chunk-ZFVHIT3V.mjs";
 import {
   registerWebElement
-} from "./chunk-NE4LAJXK.mjs";
+} from "./chunk-LQH3CJ3G.mjs";
 export {
   Fragment,
   _invalidateDefaultFontCache,

package/dist/vite-plugin.d.mts

@@ -11,6 +11,22 @@ import { Plugin } from 'vite';
  * Plugin authors can register custom modifiers via registerModifier().
  */
 interface ModifierDef {
+    /**
+     * Cascade priority for CSS rule ORDER — NOT specificity. Two rules that
+     * differ only by modifier (e.g. `.hover\:bg-blue-6:hover` and
+     * `.focus\:bg-red-6:focus`) have equal CSS specificity, so when both
+     * conditions are true at once (hovering AND focused), the winner is
+     * whichever rule appears LATER in the stylesheet — CSS's normal same-
+     * specificity tiebreak. Without a fixed priority, "later" would depend on
+     * encounter order (whichever class the app happens to render/scan first),
+     * making the winner effectively random and inconsistent across reloads/
+     * builds. `order` fixes that: rules are emitted/injected sorted by this
+     * value (ascending — higher wins ties), regardless of source order, so
+     * e.g. `disabled:` always beats `hover:` on the same element no matter
+     * which one was written first in the className or rendered first in the
+     * app. Omit for the default (0). See getModifierOrder() below.
+     */
+    order?: number;
     /** CSS pseudo-class or pseudo-element appended to the selector (e.g. ':hover', '::before') */
     pseudo?: string;
     /** Ancestor selector prefix INCLUDING trailing space (e.g. '.group:hover ', '.peer:focus ~ ') */
@@ -128,6 +144,7 @@ interface FrameworkConfig {
     content?: string[];
 }
 
+declare function formatKbachCSS(tokenCSS: Map<string, string>, theme: ThemeConfig, responsiveRe: RegExp): string;
 interface KbachPluginOptions {
     framework?: FrameworkConfig;
     /** Directories to scan for class strings (relative to Vite root). Defaults to common source dirs. */
@@ -135,4 +152,4 @@ interface KbachPluginOptions {
 }
 declare function kbach(userConfigOrOptions?: FrameworkConfig | KbachPluginOptions): Plugin;
 
-export { type KbachPluginOptions, kbach };
+export { type KbachPluginOptions, formatKbachCSS, kbach };

package/dist/vite-plugin.d.ts

@@ -11,6 +11,22 @@ import { Plugin } from 'vite';
  * Plugin authors can register custom modifiers via registerModifier().
  */
 interface ModifierDef {
+    /**
+     * Cascade priority for CSS rule ORDER — NOT specificity. Two rules that
+     * differ only by modifier (e.g. `.hover\:bg-blue-6:hover` and
+     * `.focus\:bg-red-6:focus`) have equal CSS specificity, so when both
+     * conditions are true at once (hovering AND focused), the winner is
+     * whichever rule appears LATER in the stylesheet — CSS's normal same-
+     * specificity tiebreak. Without a fixed priority, "later" would depend on
+     * encounter order (whichever class the app happens to render/scan first),
+     * making the winner effectively random and inconsistent across reloads/
+     * builds. `order` fixes that: rules are emitted/injected sorted by this
+     * value (ascending — higher wins ties), regardless of source order, so
+     * e.g. `disabled:` always beats `hover:` on the same element no matter
+     * which one was written first in the className or rendered first in the
+     * app. Omit for the default (0). See getModifierOrder() below.
+     */
+    order?: number;
     /** CSS pseudo-class or pseudo-element appended to the selector (e.g. ':hover', '::before') */
     pseudo?: string;
     /** Ancestor selector prefix INCLUDING trailing space (e.g. '.group:hover ', '.peer:focus ~ ') */
@@ -128,6 +144,7 @@ interface FrameworkConfig {
     content?: string[];
 }
 
+declare function formatKbachCSS(tokenCSS: Map<string, string>, theme: ThemeConfig, responsiveRe: RegExp): string;
 interface KbachPluginOptions {
     framework?: FrameworkConfig;
     /** Directories to scan for class strings (relative to Vite root). Defaults to common source dirs. */
@@ -135,4 +152,4 @@ interface KbachPluginOptions {
 }
 declare function kbach(userConfigOrOptions?: FrameworkConfig | KbachPluginOptions): Plugin;
 
-export { type KbachPluginOptions, kbach };
+export { type KbachPluginOptions, formatKbachCSS, kbach };