@kbach/react 0.6.40 → 0.6.43

package/dist/{chunk-LQH3CJ3G.mjs → chunk-35JCNDLF.mjs}

@@ -3481,9 +3481,9 @@ function onConfigChange(listener) {
   return () => configStore.listeners.delete(listener);
 }
 function updateConfig(userConfig) {
+  clearCache();
   configStore.resolved = buildConfig(userConfig);
   configStore._src = userConfig;
-  clearCache();
   for (const listener of configStore.listeners) {
     listener(configStore.resolved);
   }
@@ -3662,18 +3662,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
@@ -4119,7 +4118,7 @@ export {
   composeNativeStyle,
   registerWebElement,
   getWebTag,
-  getImpliedRNStyle,
+  getImpliedRNClasses,
   transformToWebProps,
   InteractiveWrapper
 };

package/dist/{chunk-ZFVHIT3V.mjs → chunk-SKXO5XEY.mjs}

@@ -10,7 +10,7 @@ import {
   getDefaultFontFamily,
   getEffectiveIsWeb,
   getGlobalScreens,
-  getImpliedRNStyle,
+  getImpliedRNClasses,
   getInteractiveModifiers,
   getModeModifiers,
   getResponsiveModifiers,
@@ -18,7 +18,6 @@ import {
   hasResponsiveBuckets,
   isNative,
   isRuntimeCSSDisabled,
-  isWeb,
   normalizeClassString,
   onConfigChange,
   resolve,
@@ -27,7 +26,7 @@ import {
   transformToWebProps,
   useConditionalGlobalDarkMode,
   useConditionalWidth
-} from "./chunk-LQH3CJ3G.mjs";
+} from "./chunk-35JCNDLF.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -108,11 +107,6 @@ function omitConsumed(props) {
   }
   return out;
 }
-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 ? _jsxs : _jsx)(type, props, key);
 }
@@ -130,7 +124,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
   }
   const classStr = classStrRaw;
   const config = getConfig();
-  const expandedClassStr = classStr ? expandModeAwareColorClasses(classStr, config.theme.colors) : classStr;
+  let expandedClassStr = classStr ? expandModeAwareColorClasses(classStr, config.theme.colors) : classStr;
   if (!isNative && isRuntimeCSSDisabled() && expandedClassStr && !__kbachStyles) {
     const { style: userStyle2, ...passProps2 } = omitConsumed(workingProps);
     return makeElement(isStaticChildren, effectiveType, {
@@ -155,9 +149,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 = !isWeb && __kbachStyles != null ? __kbachStyles : expandedClassStr ? resolve(expandedClassStr, config.theme, config.darkMode) : {};
-  const { style: rawUserStyle, ...passProps } = omitConsumed(workingProps);
-  const userStyle = withImpliedRNStyleIfNeeded(webTag, resolved.base, rawUserStyle);
+  let resolved = isNative && __kbachStyles != null ? __kbachStyles : expandedClassStr ? resolve(expandedClassStr, config.theme, config.darkMode) : {};
+  const impliedClasses = getImpliedRNClasses(webTag, resolved.base);
+  if (impliedClasses) {
+    expandedClassStr = expandedClassStr ? `${expandedClassStr} ${impliedClasses}` : impliedClasses;
+    resolved = resolve(expandedClassStr, config.theme, config.darkMode);
+  }
+  const { style: userStyle, ...passProps } = omitConsumed(workingProps);
   const { interactive, modeOrResponsive } = bucketMods(resolved);
   if (interactive) {
     return _jsx(InteractiveWrapper, {

package/dist/core/index.js

@@ -3579,9 +3579,9 @@ function onConfigChange(listener) {
   return () => configStore.listeners.delete(listener);
 }
 function updateConfig(userConfig) {
+  clearCache();
   configStore.resolved = buildConfig(userConfig);
   configStore._src = userConfig;
-  clearCache();
   for (const listener of configStore.listeners) {
     listener(configStore.resolved);
   }

package/dist/index.js

@@ -269,7 +269,7 @@ function ThemeProvider({
     };
   }, []);
   const [webWidth, setWebWidth] = (0, import_react5.useState)(0);
-  const effectiveWidth = windowWidthProp ?? (import_core2.isWeb ? webWidth : 0);
+  const effectiveWidth = (0, import_core2.getEffectiveIsWeb)() ? webWidth : windowWidthProp ?? 0;
   const numericScreens = (0, import_react5.useMemo)(() => {
     const out = {};
     for (const [k, v] of Object.entries(resolvedConfig.theme.screens ?? {})) {
@@ -313,7 +313,7 @@ function ThemeProvider({
     getSystemScheme,
     getSystemSchemeServerSnapshot
   );
-  const systemScheme = import_core2.isWeb ? webScheme : colorScheme === "dark" ? "dark" : "light";
+  const systemScheme = (0, import_core2.getEffectiveIsWeb)() ? webScheme : colorScheme === "dark" ? "dark" : "light";
   const [mode, _setMode] = (0, import_react5.useState)(defaultMode);
   (0, import_react5.useEffect)(() => {
     if (disablePersistence) return;
@@ -569,18 +569,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
@@ -871,7 +870,11 @@ function styled(Component, baseClasses = "") {
         if (!isWebPlatform) setFocused(false);
       }), [onBlur, isWebPlatform]);
       const combined = extraClasses ? `${baseClasses} ${extraClasses}` : baseClasses;
-      const resolved = (0, import_react6.useMemo)(() => (0, import_core7.resolve)(combined, config.theme, config.darkMode), [combined, config.theme, config.darkMode]);
+      const firstPassResolved = (0, import_react6.useMemo)(() => (0, import_core7.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 = (0, import_react6.useMemo)(() => (0, import_core7.resolve)(finalClassStr, config.theme, config.darkMode), [finalClassStr, config.theme, config.darkMode]);
       const hasInteractive = (0, import_react6.useMemo)(() => hasInteractiveBuckets(resolved), [resolved]);
       const needsWidth = hasResponsiveBuckets(resolved);
       const width = useConditionalWidth(needsWidth && !isWebPlatform);
@@ -882,13 +885,7 @@ function styled(Component, baseClasses = "") {
         [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;
-      })() : composeNativeStyle(computedStyle, styleProp);
+      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;
@@ -897,7 +894,7 @@ function styled(Component, baseClasses = "") {
         ...effectiveRest,
         style: finalStyle,
         // className lets injected CSS rules (group-hover:, before:, print:, etc.) match the element.
-        ...isWebPlatform && combined ? { className: (0, import_core7.normalizeClassString)(combined) } : {},
+        ...isWebPlatform && finalClassStr ? { className: (0, import_core7.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/index.mjs

@@ -17,7 +17,7 @@ import {
   getConfig,
   getEffectiveIsWeb,
   getGlobalScreens,
-  getImpliedRNStyle,
+  getImpliedRNClasses,
   getWebTag,
   hasInteractiveBuckets,
   hasResponsiveBuckets,
@@ -48,7 +48,7 @@ import {
   useGlobalDarkMode,
   useGlobalWidth,
   useSyncExternalStore
-} from "./chunk-LQH3CJ3G.mjs";
+} from "./chunk-35JCNDLF.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";
@@ -240,7 +240,7 @@ function ThemeProvider({
     };
   }, []);
   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 ?? {})) {
@@ -284,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;
@@ -411,7 +411,11 @@ 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);
@@ -422,13 +426,7 @@ function styled(Component, baseClasses = "") {
         [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;
-      })() : composeNativeStyle(computedStyle, styleProp);
+      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;
@@ -437,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

@@ -353,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
@@ -646,11 +645,6 @@ function omitConsumed(props) {
   }
   return out;
 }
-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);
 }
@@ -668,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, {
@@ -693,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, {

package/dist/jsx-dev-runtime.mjs

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

package/dist/jsx-runtime.js

@@ -359,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
@@ -652,11 +651,6 @@ function omitConsumed(props) {
   }
   return out;
 }
-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);
 }
@@ -674,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, {
@@ -699,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, {

package/dist/jsx-runtime.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react",
-  "version": "0.6.40",
+  "version": "0.6.43",
   "description": "React / React Native components and hooks for the Kbach framework",
   "license": "MIT",
   "repository": {