@kbach/react 0.6.39 → 0.6.41

package/dist/index.mjs

@@ -7,6 +7,7 @@ import {
   buildConfig,
   chain,
   clearCache,
+  composeNativeStyle,
   defaultColors,
   defaultTheme,
   disableRuntimeCSS,
@@ -15,7 +16,8 @@ import {
   getActiveBreakpoints,
   getConfig,
   getEffectiveIsWeb,
-  getImpliedRNStyle,
+  getGlobalScreens,
+  getImpliedRNClasses,
   getWebTag,
   hasInteractiveBuckets,
   hasResponsiveBuckets,
@@ -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-PTOTQ6A2.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,10 +234,13 @@ function ThemeProvider({
     return () => {
       _mountedProviderCount--;
       if (configOverride) _mountedConfigOverrideCount--;
+      if (_prevConfigOverrideRef.current !== void 0 && _mountedProviderCount === 0) {
+        resetConfig();
+      }
     };
   }, []);
   const [webWidth, setWebWidth] = useState(0);
-  const effectiveWidth = windowWidthProp ?? (isWeb ? webWidth : 0);
+  const effectiveWidth = getEffectiveIsWeb() ? webWidth : windowWidthProp ?? 0;
   const numericScreens = useMemo3(() => {
     const out = {};
     for (const [k, v] of Object.entries(resolvedConfig.theme.screens ?? {})) {
@@ -277,7 +284,7 @@ function ThemeProvider({
     getSystemScheme,
     getSystemSchemeServerSnapshot
   );
-  const systemScheme = isWeb ? webScheme : colorScheme === "dark" ? "dark" : "light";
+  const systemScheme = getEffectiveIsWeb() ? webScheme : colorScheme === "dark" ? "dark" : "light";
   const [mode, _setMode] = useState(defaultMode);
   useEffect(() => {
     if (disablePersistence) return;
@@ -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]);
@@ -398,23 +411,22 @@ function styled(Component, baseClasses = "") {
         if (!isWebPlatform) setFocused(false);
       }), [onBlur, isWebPlatform]);
       const combined = extraClasses ? `${baseClasses} ${extraClasses}` : baseClasses;
-      const resolved = useMemo4(() => resolve(combined, config.theme, config.darkMode), [combined, config.theme, config.darkMode]);
+      const firstPassResolved = useMemo4(() => resolve(combined, config.theme, config.darkMode), [combined, config.theme, config.darkMode]);
+      const webTag = isWebPlatform ? getWebTag(Component, rest) : null;
+      const impliedClasses = getImpliedRNClasses(webTag, firstPassResolved.base);
+      const finalClassStr = impliedClasses ? `${combined} ${impliedClasses}` : combined;
+      const resolved = useMemo4(() => resolve(finalClassStr, config.theme, config.darkMode), [finalClassStr, config.theme, config.darkMode]);
       const hasInteractive = useMemo4(() => hasInteractiveBuckets(resolved), [resolved]);
       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;
-      const finalStyle = isWebPlatform ? (() => {
-        const flatStyleProp = (Array.isArray(styleProp) ? Object.assign({}, ...styleProp) : styleProp) ?? void 0;
-        const compensation = getImpliedRNStyle(webTag, resolved.base);
-        if (!compensation) return flatStyleProp;
-        return flatStyleProp ? { ...compensation, ...flatStyleProp } : compensation;
-      })() : styleProp ? Array.isArray(styleProp) ? [computedStyle, ...styleProp] : [computedStyle, styleProp] : computedStyle;
+      const finalStyle = isWebPlatform ? (Array.isArray(styleProp) ? Object.assign({}, ...styleProp) : styleProp) ?? void 0 : composeNativeStyle(computedStyle, styleProp);
       const effectiveComponent = webTag ?? Component;
       const componentName2 = Component.displayName ?? Component.name ?? "";
       const effectiveRest = webTag && componentName2 ? transformToWebProps(componentName2, webTag, rest) : rest;
@@ -423,7 +435,7 @@ function styled(Component, baseClasses = "") {
         ...effectiveRest,
         style: finalStyle,
         // className lets injected CSS rules (group-hover:, before:, print:, etc.) match the element.
-        ...isWebPlatform && combined ? { className: normalizeClassString(combined) } : {},
+        ...isWebPlatform && finalClassStr ? { className: normalizeClassString(finalClassStr) } : {},
         // Only attach state-tracking handlers when interactive modifiers are present.
         // Always forward user-provided handlers to avoid silently swallowing them.
         // Gated on isNative, not isWeb: isWeb is false during SSR too (no `window` there),

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);
   }
@@ -348,18 +353,17 @@ function getWebTag(type, props) {
   _cache.set(obj, tag);
   return tag;
 }
-function getImpliedRNStyle(webTag, resolvedBase) {
+function getImpliedRNClasses(webTag, resolvedBase) {
   if (!webTag || !resolvedBase) return void 0;
-  const compensation = {};
-  if (resolvedBase.position === void 0) compensation.position = "relative";
+  const classes = [];
+  if (resolvedBase.position === void 0) classes.push("relative");
   const explicitDisplay = resolvedBase.display;
   const hasFlexItemProps = "flexGrow" in resolvedBase || "flexShrink" in resolvedBase || "flex" in resolvedBase || "gap" in resolvedBase || "columnGap" in resolvedBase || "rowGap" in resolvedBase;
   const willBeFlex = explicitDisplay === "flex" || explicitDisplay === void 0 && hasFlexItemProps;
-  if (willBeFlex) {
-    if (explicitDisplay === void 0) compensation.display = "flex";
-    if (resolvedBase.flexDirection === void 0) compensation.flexDirection = "column";
+  if (willBeFlex && (explicitDisplay === void 0 || resolvedBase.flexDirection === void 0)) {
+    classes.push("flex-col");
   }
-  return Object.keys(compensation).length > 0 ? compensation : void 0;
+  return classes.length > 0 ? classes.join(" ") : void 0;
 }
 var _rnOnlyProps = /* @__PURE__ */ new Set([
   // Interaction
@@ -403,8 +407,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 +535,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 +551,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,15 +645,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;
-  return Array.isArray(userStyle) ? [compensation, ...userStyle] : { ...compensation, ...userStyle };
-}
 function makeElement(isStaticChildren, type, props, key) {
   return (isStaticChildren ? import_jsx_runtime.jsxs : import_jsx_runtime.jsx)(type, props, key);
 }
@@ -666,7 +662,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
   }
   const classStr = classStrRaw;
   const config = (0, import_core6.getConfig)();
-  const expandedClassStr = classStr ? (0, import_core6.expandModeAwareColorClasses)(classStr, config.theme.colors) : classStr;
+  let expandedClassStr = classStr ? (0, import_core6.expandModeAwareColorClasses)(classStr, config.theme.colors) : classStr;
   if (!import_core6.isNative && (0, import_core6.isRuntimeCSSDisabled)() && expandedClassStr && !__kbachStyles) {
     const { style: userStyle2, ...passProps2 } = omitConsumed(workingProps);
     return makeElement(isStaticChildren, effectiveType, {
@@ -691,9 +687,13 @@ 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 resolved = !import_core6.isWeb && __kbachStyles != null ? __kbachStyles : expandedClassStr ? (0, import_core6.resolve)(expandedClassStr, config.theme, config.darkMode) : {};
-  const { style: rawUserStyle, ...passProps } = omitConsumed(workingProps);
-  const userStyle = withImpliedRNStyleIfNeeded(webTag, resolved.base, rawUserStyle);
+  let resolved = import_core6.isNative && __kbachStyles != null ? __kbachStyles : expandedClassStr ? (0, import_core6.resolve)(expandedClassStr, config.theme, config.darkMode) : {};
+  const impliedClasses = getImpliedRNClasses(webTag, resolved.base);
+  if (impliedClasses) {
+    expandedClassStr = expandedClassStr ? `${expandedClassStr} ${impliedClasses}` : impliedClasses;
+    resolved = (0, import_core6.resolve)(expandedClassStr, config.theme, config.darkMode);
+  }
+  const { style: userStyle, ...passProps } = omitConsumed(workingProps);
   const { interactive, modeOrResponsive } = bucketMods(resolved);
   if (interactive) {
     return (0, import_jsx_runtime.jsx)(InteractiveWrapper, {
@@ -719,7 +719,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-LM3OWOK2.mjs";
+import "./chunk-PTOTQ6A2.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);
   }
@@ -354,18 +359,17 @@ function getWebTag(type, props) {
   _cache.set(obj, tag);
   return tag;
 }
-function getImpliedRNStyle(webTag, resolvedBase) {
+function getImpliedRNClasses(webTag, resolvedBase) {
   if (!webTag || !resolvedBase) return void 0;
-  const compensation = {};
-  if (resolvedBase.position === void 0) compensation.position = "relative";
+  const classes = [];
+  if (resolvedBase.position === void 0) classes.push("relative");
   const explicitDisplay = resolvedBase.display;
   const hasFlexItemProps = "flexGrow" in resolvedBase || "flexShrink" in resolvedBase || "flex" in resolvedBase || "gap" in resolvedBase || "columnGap" in resolvedBase || "rowGap" in resolvedBase;
   const willBeFlex = explicitDisplay === "flex" || explicitDisplay === void 0 && hasFlexItemProps;
-  if (willBeFlex) {
-    if (explicitDisplay === void 0) compensation.display = "flex";
-    if (resolvedBase.flexDirection === void 0) compensation.flexDirection = "column";
+  if (willBeFlex && (explicitDisplay === void 0 || resolvedBase.flexDirection === void 0)) {
+    classes.push("flex-col");
   }
-  return Object.keys(compensation).length > 0 ? compensation : void 0;
+  return classes.length > 0 ? classes.join(" ") : void 0;
 }
 var _rnOnlyProps = /* @__PURE__ */ new Set([
   // Interaction
@@ -409,8 +413,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 +541,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 +557,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,15 +651,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;
-  return Array.isArray(userStyle) ? [compensation, ...userStyle] : { ...compensation, ...userStyle };
-}
 function makeElement(isStaticChildren, type, props, key) {
   return (isStaticChildren ? import_jsx_runtime.jsxs : import_jsx_runtime.jsx)(type, props, key);
 }
@@ -672,7 +668,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
   }
   const classStr = classStrRaw;
   const config = (0, import_core6.getConfig)();
-  const expandedClassStr = classStr ? (0, import_core6.expandModeAwareColorClasses)(classStr, config.theme.colors) : classStr;
+  let expandedClassStr = classStr ? (0, import_core6.expandModeAwareColorClasses)(classStr, config.theme.colors) : classStr;
   if (!import_core6.isNative && (0, import_core6.isRuntimeCSSDisabled)() && expandedClassStr && !__kbachStyles) {
     const { style: userStyle2, ...passProps2 } = omitConsumed(workingProps);
     return makeElement(isStaticChildren, effectiveType, {
@@ -697,9 +693,13 @@ 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 resolved = !import_core6.isWeb && __kbachStyles != null ? __kbachStyles : expandedClassStr ? (0, import_core6.resolve)(expandedClassStr, config.theme, config.darkMode) : {};
-  const { style: rawUserStyle, ...passProps } = omitConsumed(workingProps);
-  const userStyle = withImpliedRNStyleIfNeeded(webTag, resolved.base, rawUserStyle);
+  let resolved = import_core6.isNative && __kbachStyles != null ? __kbachStyles : expandedClassStr ? (0, import_core6.resolve)(expandedClassStr, config.theme, config.darkMode) : {};
+  const impliedClasses = getImpliedRNClasses(webTag, resolved.base);
+  if (impliedClasses) {
+    expandedClassStr = expandedClassStr ? `${expandedClassStr} ${impliedClasses}` : impliedClasses;
+    resolved = (0, import_core6.resolve)(expandedClassStr, config.theme, config.darkMode);
+  }
+  const { style: userStyle, ...passProps } = omitConsumed(workingProps);
   const { interactive, modeOrResponsive } = bucketMods(resolved);
   if (interactive) {
     return (0, import_jsx_runtime.jsx)(InteractiveWrapper, {
@@ -725,7 +725,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-LM3OWOK2.mjs";
 import {
   registerWebElement
-} from "./chunk-NE4LAJXK.mjs";
+} from "./chunk-PTOTQ6A2.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 };