@kbach/react 0.6.40 → 0.6.41

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -10,7 +10,7 @@ import {
10
10
  getDefaultFontFamily,
11
11
  getEffectiveIsWeb,
12
12
  getGlobalScreens,
13
- getImpliedRNStyle,
13
+ getImpliedRNClasses,
14
14
  getInteractiveModifiers,
15
15
  getModeModifiers,
16
16
  getResponsiveModifiers,
@@ -18,7 +18,6 @@ import {
18
18
  hasResponsiveBuckets,
19
19
  isNative,
20
20
  isRuntimeCSSDisabled,
21
- isWeb,
22
21
  normalizeClassString,
23
22
  onConfigChange,
24
23
  resolve,
@@ -27,7 +26,7 @@ import {
27
26
  transformToWebProps,
28
27
  useConditionalGlobalDarkMode,
29
28
  useConditionalWidth
30
- } from "./chunk-LQH3CJ3G.mjs";
29
+ } from "./chunk-PTOTQ6A2.mjs";
31
30
 
32
31
  // src/jsx-runtime.tsx
33
32
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -108,11 +107,6 @@ function omitConsumed(props) {
108
107
  }
109
108
  return out;
110
109
  }
111
- function withImpliedRNStyleIfNeeded(webTag, resolvedBase, userStyle) {
112
- const compensation = getImpliedRNStyle(webTag, resolvedBase);
113
- if (!compensation) return userStyle;
114
- return Array.isArray(userStyle) ? [compensation, ...userStyle] : { ...compensation, ...userStyle };
115
- }
116
110
  function makeElement(isStaticChildren, type, props, key) {
117
111
  return (isStaticChildren ? _jsxs : _jsx)(type, props, key);
118
112
  }
@@ -130,7 +124,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
130
124
  }
131
125
  const classStr = classStrRaw;
132
126
  const config = getConfig();
133
- const expandedClassStr = classStr ? expandModeAwareColorClasses(classStr, config.theme.colors) : classStr;
127
+ let expandedClassStr = classStr ? expandModeAwareColorClasses(classStr, config.theme.colors) : classStr;
134
128
  if (!isNative && isRuntimeCSSDisabled() && expandedClassStr && !__kbachStyles) {
135
129
  const { style: userStyle2, ...passProps2 } = omitConsumed(workingProps);
136
130
  return makeElement(isStaticChildren, effectiveType, {
@@ -155,9 +149,13 @@ function processElement(type, rawProps, key, isStaticChildren) {
155
149
  const finalStyle2 = userStyle2 ? Array.isArray(userStyle2) ? { fontFamily: defaultFont, ...Object.assign({}, ...userStyle2) } : { fontFamily: defaultFont, ...userStyle2 } : { fontFamily: defaultFont };
156
150
  return makeElement(isStaticChildren, effectiveType, { ...passProps2, style: finalStyle2 }, key);
157
151
  }
158
- const resolved = !isWeb && __kbachStyles != null ? __kbachStyles : expandedClassStr ? resolve(expandedClassStr, config.theme, config.darkMode) : {};
159
- const { style: rawUserStyle, ...passProps } = omitConsumed(workingProps);
160
- const userStyle = withImpliedRNStyleIfNeeded(webTag, resolved.base, rawUserStyle);
152
+ let resolved = isNative && __kbachStyles != null ? __kbachStyles : expandedClassStr ? resolve(expandedClassStr, config.theme, config.darkMode) : {};
153
+ const impliedClasses = getImpliedRNClasses(webTag, resolved.base);
154
+ if (impliedClasses) {
155
+ expandedClassStr = expandedClassStr ? `${expandedClassStr} ${impliedClasses}` : impliedClasses;
156
+ resolved = resolve(expandedClassStr, config.theme, config.darkMode);
157
+ }
158
+ const { style: userStyle, ...passProps } = omitConsumed(workingProps);
161
159
  const { interactive, modeOrResponsive } = bucketMods(resolved);
162
160
  if (interactive) {
163
161
  return _jsx(InteractiveWrapper, {
@@ -3662,18 +3662,17 @@ function getWebTag(type, props) {
3662
3662
  _cache.set(obj, tag);
3663
3663
  return tag;
3664
3664
  }
3665
- function getImpliedRNStyle(webTag, resolvedBase) {
3665
+ function getImpliedRNClasses(webTag, resolvedBase) {
3666
3666
  if (!webTag || !resolvedBase) return void 0;
3667
- const compensation = {};
3668
- if (resolvedBase.position === void 0) compensation.position = "relative";
3667
+ const classes = [];
3668
+ if (resolvedBase.position === void 0) classes.push("relative");
3669
3669
  const explicitDisplay = resolvedBase.display;
3670
3670
  const hasFlexItemProps = "flexGrow" in resolvedBase || "flexShrink" in resolvedBase || "flex" in resolvedBase || "gap" in resolvedBase || "columnGap" in resolvedBase || "rowGap" in resolvedBase;
3671
3671
  const willBeFlex = explicitDisplay === "flex" || explicitDisplay === void 0 && hasFlexItemProps;
3672
- if (willBeFlex) {
3673
- if (explicitDisplay === void 0) compensation.display = "flex";
3674
- if (resolvedBase.flexDirection === void 0) compensation.flexDirection = "column";
3672
+ if (willBeFlex && (explicitDisplay === void 0 || resolvedBase.flexDirection === void 0)) {
3673
+ classes.push("flex-col");
3675
3674
  }
3676
- return Object.keys(compensation).length > 0 ? compensation : void 0;
3675
+ return classes.length > 0 ? classes.join(" ") : void 0;
3677
3676
  }
3678
3677
  var _rnOnlyProps = /* @__PURE__ */ new Set([
3679
3678
  // Interaction
@@ -4119,7 +4118,7 @@ export {
4119
4118
  composeNativeStyle,
4120
4119
  registerWebElement,
4121
4120
  getWebTag,
4122
- getImpliedRNStyle,
4121
+ getImpliedRNClasses,
4123
4122
  transformToWebProps,
4124
4123
  InteractiveWrapper
4125
4124
  };
package/dist/index.js CHANGED
@@ -269,7 +269,7 @@ function ThemeProvider({
269
269
  };
270
270
  }, []);
271
271
  const [webWidth, setWebWidth] = (0, import_react5.useState)(0);
272
- const effectiveWidth = windowWidthProp ?? (import_core2.isWeb ? webWidth : 0);
272
+ const effectiveWidth = (0, import_core2.getEffectiveIsWeb)() ? webWidth : windowWidthProp ?? 0;
273
273
  const numericScreens = (0, import_react5.useMemo)(() => {
274
274
  const out = {};
275
275
  for (const [k, v] of Object.entries(resolvedConfig.theme.screens ?? {})) {
@@ -313,7 +313,7 @@ function ThemeProvider({
313
313
  getSystemScheme,
314
314
  getSystemSchemeServerSnapshot
315
315
  );
316
- const systemScheme = import_core2.isWeb ? webScheme : colorScheme === "dark" ? "dark" : "light";
316
+ const systemScheme = (0, import_core2.getEffectiveIsWeb)() ? webScheme : colorScheme === "dark" ? "dark" : "light";
317
317
  const [mode, _setMode] = (0, import_react5.useState)(defaultMode);
318
318
  (0, import_react5.useEffect)(() => {
319
319
  if (disablePersistence) return;
@@ -569,18 +569,17 @@ function getWebTag(type, props) {
569
569
  _cache.set(obj, tag);
570
570
  return tag;
571
571
  }
572
- function getImpliedRNStyle(webTag, resolvedBase) {
572
+ function getImpliedRNClasses(webTag, resolvedBase) {
573
573
  if (!webTag || !resolvedBase) return void 0;
574
- const compensation = {};
575
- if (resolvedBase.position === void 0) compensation.position = "relative";
574
+ const classes = [];
575
+ if (resolvedBase.position === void 0) classes.push("relative");
576
576
  const explicitDisplay = resolvedBase.display;
577
577
  const hasFlexItemProps = "flexGrow" in resolvedBase || "flexShrink" in resolvedBase || "flex" in resolvedBase || "gap" in resolvedBase || "columnGap" in resolvedBase || "rowGap" in resolvedBase;
578
578
  const willBeFlex = explicitDisplay === "flex" || explicitDisplay === void 0 && hasFlexItemProps;
579
- if (willBeFlex) {
580
- if (explicitDisplay === void 0) compensation.display = "flex";
581
- if (resolvedBase.flexDirection === void 0) compensation.flexDirection = "column";
579
+ if (willBeFlex && (explicitDisplay === void 0 || resolvedBase.flexDirection === void 0)) {
580
+ classes.push("flex-col");
582
581
  }
583
- return Object.keys(compensation).length > 0 ? compensation : void 0;
582
+ return classes.length > 0 ? classes.join(" ") : void 0;
584
583
  }
585
584
  var _rnOnlyProps = /* @__PURE__ */ new Set([
586
585
  // Interaction
@@ -871,7 +870,11 @@ function styled(Component, baseClasses = "") {
871
870
  if (!isWebPlatform) setFocused(false);
872
871
  }), [onBlur, isWebPlatform]);
873
872
  const combined = extraClasses ? `${baseClasses} ${extraClasses}` : baseClasses;
874
- const resolved = (0, import_react6.useMemo)(() => (0, import_core7.resolve)(combined, config.theme, config.darkMode), [combined, config.theme, config.darkMode]);
873
+ const firstPassResolved = (0, import_react6.useMemo)(() => (0, import_core7.resolve)(combined, config.theme, config.darkMode), [combined, config.theme, config.darkMode]);
874
+ const webTag = isWebPlatform ? getWebTag(Component, rest) : null;
875
+ const impliedClasses = getImpliedRNClasses(webTag, firstPassResolved.base);
876
+ const finalClassStr = impliedClasses ? `${combined} ${impliedClasses}` : combined;
877
+ const resolved = (0, import_react6.useMemo)(() => (0, import_core7.resolve)(finalClassStr, config.theme, config.darkMode), [finalClassStr, config.theme, config.darkMode]);
875
878
  const hasInteractive = (0, import_react6.useMemo)(() => hasInteractiveBuckets(resolved), [resolved]);
876
879
  const needsWidth = hasResponsiveBuckets(resolved);
877
880
  const width = useConditionalWidth(needsWidth && !isWebPlatform);
@@ -882,13 +885,7 @@ function styled(Component, baseClasses = "") {
882
885
  [resolved, isDark, pressed, hovered, focused, disabled, checked, width, screens]
883
886
  // eslint-disable-line react-hooks/exhaustive-deps
884
887
  );
885
- const webTag = isWebPlatform ? getWebTag(Component, rest) : null;
886
- const finalStyle = isWebPlatform ? (() => {
887
- const flatStyleProp = (Array.isArray(styleProp) ? Object.assign({}, ...styleProp) : styleProp) ?? void 0;
888
- const compensation = getImpliedRNStyle(webTag, resolved.base);
889
- if (!compensation) return flatStyleProp;
890
- return flatStyleProp ? { ...compensation, ...flatStyleProp } : compensation;
891
- })() : composeNativeStyle(computedStyle, styleProp);
888
+ const finalStyle = isWebPlatform ? (Array.isArray(styleProp) ? Object.assign({}, ...styleProp) : styleProp) ?? void 0 : composeNativeStyle(computedStyle, styleProp);
892
889
  const effectiveComponent = webTag ?? Component;
893
890
  const componentName2 = Component.displayName ?? Component.name ?? "";
894
891
  const effectiveRest = webTag && componentName2 ? transformToWebProps(componentName2, webTag, rest) : rest;
@@ -897,7 +894,7 @@ function styled(Component, baseClasses = "") {
897
894
  ...effectiveRest,
898
895
  style: finalStyle,
899
896
  // className lets injected CSS rules (group-hover:, before:, print:, etc.) match the element.
900
- ...isWebPlatform && combined ? { className: (0, import_core7.normalizeClassString)(combined) } : {},
897
+ ...isWebPlatform && finalClassStr ? { className: (0, import_core7.normalizeClassString)(finalClassStr) } : {},
901
898
  // Only attach state-tracking handlers when interactive modifiers are present.
902
899
  // Always forward user-provided handlers to avoid silently swallowing them.
903
900
  // Gated on isNative, not isWeb: isWeb is false during SSR too (no `window` there),
package/dist/index.mjs CHANGED
@@ -17,7 +17,7 @@ import {
17
17
  getConfig,
18
18
  getEffectiveIsWeb,
19
19
  getGlobalScreens,
20
- getImpliedRNStyle,
20
+ getImpliedRNClasses,
21
21
  getWebTag,
22
22
  hasInteractiveBuckets,
23
23
  hasResponsiveBuckets,
@@ -48,7 +48,7 @@ import {
48
48
  useGlobalDarkMode,
49
49
  useGlobalWidth,
50
50
  useSyncExternalStore
51
- } from "./chunk-LQH3CJ3G.mjs";
51
+ } from "./chunk-PTOTQ6A2.mjs";
52
52
 
53
53
  // src/context.tsx
54
54
  import { createContext, useContext } from "react";
@@ -240,7 +240,7 @@ function ThemeProvider({
240
240
  };
241
241
  }, []);
242
242
  const [webWidth, setWebWidth] = useState(0);
243
- const effectiveWidth = windowWidthProp ?? (isWeb ? webWidth : 0);
243
+ const effectiveWidth = getEffectiveIsWeb() ? webWidth : windowWidthProp ?? 0;
244
244
  const numericScreens = useMemo3(() => {
245
245
  const out = {};
246
246
  for (const [k, v] of Object.entries(resolvedConfig.theme.screens ?? {})) {
@@ -284,7 +284,7 @@ function ThemeProvider({
284
284
  getSystemScheme,
285
285
  getSystemSchemeServerSnapshot
286
286
  );
287
- const systemScheme = isWeb ? webScheme : colorScheme === "dark" ? "dark" : "light";
287
+ const systemScheme = getEffectiveIsWeb() ? webScheme : colorScheme === "dark" ? "dark" : "light";
288
288
  const [mode, _setMode] = useState(defaultMode);
289
289
  useEffect(() => {
290
290
  if (disablePersistence) return;
@@ -411,7 +411,11 @@ function styled(Component, baseClasses = "") {
411
411
  if (!isWebPlatform) setFocused(false);
412
412
  }), [onBlur, isWebPlatform]);
413
413
  const combined = extraClasses ? `${baseClasses} ${extraClasses}` : baseClasses;
414
- const resolved = useMemo4(() => resolve(combined, config.theme, config.darkMode), [combined, config.theme, config.darkMode]);
414
+ const firstPassResolved = useMemo4(() => resolve(combined, config.theme, config.darkMode), [combined, config.theme, config.darkMode]);
415
+ const webTag = isWebPlatform ? getWebTag(Component, rest) : null;
416
+ const impliedClasses = getImpliedRNClasses(webTag, firstPassResolved.base);
417
+ const finalClassStr = impliedClasses ? `${combined} ${impliedClasses}` : combined;
418
+ const resolved = useMemo4(() => resolve(finalClassStr, config.theme, config.darkMode), [finalClassStr, config.theme, config.darkMode]);
415
419
  const hasInteractive = useMemo4(() => hasInteractiveBuckets(resolved), [resolved]);
416
420
  const needsWidth = hasResponsiveBuckets(resolved);
417
421
  const width = useConditionalWidth(needsWidth && !isWebPlatform);
@@ -422,13 +426,7 @@ function styled(Component, baseClasses = "") {
422
426
  [resolved, isDark, pressed, hovered, focused, disabled, checked, width, screens]
423
427
  // eslint-disable-line react-hooks/exhaustive-deps
424
428
  );
425
- const webTag = isWebPlatform ? getWebTag(Component, rest) : null;
426
- const finalStyle = isWebPlatform ? (() => {
427
- const flatStyleProp = (Array.isArray(styleProp) ? Object.assign({}, ...styleProp) : styleProp) ?? void 0;
428
- const compensation = getImpliedRNStyle(webTag, resolved.base);
429
- if (!compensation) return flatStyleProp;
430
- return flatStyleProp ? { ...compensation, ...flatStyleProp } : compensation;
431
- })() : composeNativeStyle(computedStyle, styleProp);
429
+ const finalStyle = isWebPlatform ? (Array.isArray(styleProp) ? Object.assign({}, ...styleProp) : styleProp) ?? void 0 : composeNativeStyle(computedStyle, styleProp);
432
430
  const effectiveComponent = webTag ?? Component;
433
431
  const componentName2 = Component.displayName ?? Component.name ?? "";
434
432
  const effectiveRest = webTag && componentName2 ? transformToWebProps(componentName2, webTag, rest) : rest;
@@ -437,7 +435,7 @@ function styled(Component, baseClasses = "") {
437
435
  ...effectiveRest,
438
436
  style: finalStyle,
439
437
  // className lets injected CSS rules (group-hover:, before:, print:, etc.) match the element.
440
- ...isWebPlatform && combined ? { className: normalizeClassString(combined) } : {},
438
+ ...isWebPlatform && finalClassStr ? { className: normalizeClassString(finalClassStr) } : {},
441
439
  // Only attach state-tracking handlers when interactive modifiers are present.
442
440
  // Always forward user-provided handlers to avoid silently swallowing them.
443
441
  // Gated on isNative, not isWeb: isWeb is false during SSR too (no `window` there),
@@ -353,18 +353,17 @@ function getWebTag(type, props) {
353
353
  _cache.set(obj, tag);
354
354
  return tag;
355
355
  }
356
- function getImpliedRNStyle(webTag, resolvedBase) {
356
+ function getImpliedRNClasses(webTag, resolvedBase) {
357
357
  if (!webTag || !resolvedBase) return void 0;
358
- const compensation = {};
359
- if (resolvedBase.position === void 0) compensation.position = "relative";
358
+ const classes = [];
359
+ if (resolvedBase.position === void 0) classes.push("relative");
360
360
  const explicitDisplay = resolvedBase.display;
361
361
  const hasFlexItemProps = "flexGrow" in resolvedBase || "flexShrink" in resolvedBase || "flex" in resolvedBase || "gap" in resolvedBase || "columnGap" in resolvedBase || "rowGap" in resolvedBase;
362
362
  const willBeFlex = explicitDisplay === "flex" || explicitDisplay === void 0 && hasFlexItemProps;
363
- if (willBeFlex) {
364
- if (explicitDisplay === void 0) compensation.display = "flex";
365
- if (resolvedBase.flexDirection === void 0) compensation.flexDirection = "column";
363
+ if (willBeFlex && (explicitDisplay === void 0 || resolvedBase.flexDirection === void 0)) {
364
+ classes.push("flex-col");
366
365
  }
367
- return Object.keys(compensation).length > 0 ? compensation : void 0;
366
+ return classes.length > 0 ? classes.join(" ") : void 0;
368
367
  }
369
368
  var _rnOnlyProps = /* @__PURE__ */ new Set([
370
369
  // Interaction
@@ -646,11 +645,6 @@ function omitConsumed(props) {
646
645
  }
647
646
  return out;
648
647
  }
649
- function withImpliedRNStyleIfNeeded(webTag, resolvedBase, userStyle) {
650
- const compensation = getImpliedRNStyle(webTag, resolvedBase);
651
- if (!compensation) return userStyle;
652
- return Array.isArray(userStyle) ? [compensation, ...userStyle] : { ...compensation, ...userStyle };
653
- }
654
648
  function makeElement(isStaticChildren, type, props, key) {
655
649
  return (isStaticChildren ? import_jsx_runtime.jsxs : import_jsx_runtime.jsx)(type, props, key);
656
650
  }
@@ -668,7 +662,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
668
662
  }
669
663
  const classStr = classStrRaw;
670
664
  const config = (0, import_core6.getConfig)();
671
- const expandedClassStr = classStr ? (0, import_core6.expandModeAwareColorClasses)(classStr, config.theme.colors) : classStr;
665
+ let expandedClassStr = classStr ? (0, import_core6.expandModeAwareColorClasses)(classStr, config.theme.colors) : classStr;
672
666
  if (!import_core6.isNative && (0, import_core6.isRuntimeCSSDisabled)() && expandedClassStr && !__kbachStyles) {
673
667
  const { style: userStyle2, ...passProps2 } = omitConsumed(workingProps);
674
668
  return makeElement(isStaticChildren, effectiveType, {
@@ -693,9 +687,13 @@ function processElement(type, rawProps, key, isStaticChildren) {
693
687
  const finalStyle2 = userStyle2 ? Array.isArray(userStyle2) ? { fontFamily: defaultFont, ...Object.assign({}, ...userStyle2) } : { fontFamily: defaultFont, ...userStyle2 } : { fontFamily: defaultFont };
694
688
  return makeElement(isStaticChildren, effectiveType, { ...passProps2, style: finalStyle2 }, key);
695
689
  }
696
- const resolved = !import_core6.isWeb && __kbachStyles != null ? __kbachStyles : expandedClassStr ? (0, import_core6.resolve)(expandedClassStr, config.theme, config.darkMode) : {};
697
- const { style: rawUserStyle, ...passProps } = omitConsumed(workingProps);
698
- const userStyle = withImpliedRNStyleIfNeeded(webTag, resolved.base, rawUserStyle);
690
+ let resolved = import_core6.isNative && __kbachStyles != null ? __kbachStyles : expandedClassStr ? (0, import_core6.resolve)(expandedClassStr, config.theme, config.darkMode) : {};
691
+ const impliedClasses = getImpliedRNClasses(webTag, resolved.base);
692
+ if (impliedClasses) {
693
+ expandedClassStr = expandedClassStr ? `${expandedClassStr} ${impliedClasses}` : impliedClasses;
694
+ resolved = (0, import_core6.resolve)(expandedClassStr, config.theme, config.darkMode);
695
+ }
696
+ const { style: userStyle, ...passProps } = omitConsumed(workingProps);
699
697
  const { interactive, modeOrResponsive } = bucketMods(resolved);
700
698
  if (interactive) {
701
699
  return (0, import_jsx_runtime.jsx)(InteractiveWrapper, {
@@ -3,8 +3,8 @@ import {
3
3
  Fragment,
4
4
  jsx,
5
5
  jsxs
6
- } from "./chunk-ZFVHIT3V.mjs";
7
- import "./chunk-LQH3CJ3G.mjs";
6
+ } from "./chunk-LM3OWOK2.mjs";
7
+ import "./chunk-PTOTQ6A2.mjs";
8
8
 
9
9
  // src/jsx-dev-runtime.tsx
10
10
  function jsxDEV(type, props, key, isStaticChildren, source, self) {
@@ -359,18 +359,17 @@ function getWebTag(type, props) {
359
359
  _cache.set(obj, tag);
360
360
  return tag;
361
361
  }
362
- function getImpliedRNStyle(webTag, resolvedBase) {
362
+ function getImpliedRNClasses(webTag, resolvedBase) {
363
363
  if (!webTag || !resolvedBase) return void 0;
364
- const compensation = {};
365
- if (resolvedBase.position === void 0) compensation.position = "relative";
364
+ const classes = [];
365
+ if (resolvedBase.position === void 0) classes.push("relative");
366
366
  const explicitDisplay = resolvedBase.display;
367
367
  const hasFlexItemProps = "flexGrow" in resolvedBase || "flexShrink" in resolvedBase || "flex" in resolvedBase || "gap" in resolvedBase || "columnGap" in resolvedBase || "rowGap" in resolvedBase;
368
368
  const willBeFlex = explicitDisplay === "flex" || explicitDisplay === void 0 && hasFlexItemProps;
369
- if (willBeFlex) {
370
- if (explicitDisplay === void 0) compensation.display = "flex";
371
- if (resolvedBase.flexDirection === void 0) compensation.flexDirection = "column";
369
+ if (willBeFlex && (explicitDisplay === void 0 || resolvedBase.flexDirection === void 0)) {
370
+ classes.push("flex-col");
372
371
  }
373
- return Object.keys(compensation).length > 0 ? compensation : void 0;
372
+ return classes.length > 0 ? classes.join(" ") : void 0;
374
373
  }
375
374
  var _rnOnlyProps = /* @__PURE__ */ new Set([
376
375
  // Interaction
@@ -652,11 +651,6 @@ function omitConsumed(props) {
652
651
  }
653
652
  return out;
654
653
  }
655
- function withImpliedRNStyleIfNeeded(webTag, resolvedBase, userStyle) {
656
- const compensation = getImpliedRNStyle(webTag, resolvedBase);
657
- if (!compensation) return userStyle;
658
- return Array.isArray(userStyle) ? [compensation, ...userStyle] : { ...compensation, ...userStyle };
659
- }
660
654
  function makeElement(isStaticChildren, type, props, key) {
661
655
  return (isStaticChildren ? import_jsx_runtime.jsxs : import_jsx_runtime.jsx)(type, props, key);
662
656
  }
@@ -674,7 +668,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
674
668
  }
675
669
  const classStr = classStrRaw;
676
670
  const config = (0, import_core6.getConfig)();
677
- const expandedClassStr = classStr ? (0, import_core6.expandModeAwareColorClasses)(classStr, config.theme.colors) : classStr;
671
+ let expandedClassStr = classStr ? (0, import_core6.expandModeAwareColorClasses)(classStr, config.theme.colors) : classStr;
678
672
  if (!import_core6.isNative && (0, import_core6.isRuntimeCSSDisabled)() && expandedClassStr && !__kbachStyles) {
679
673
  const { style: userStyle2, ...passProps2 } = omitConsumed(workingProps);
680
674
  return makeElement(isStaticChildren, effectiveType, {
@@ -699,9 +693,13 @@ function processElement(type, rawProps, key, isStaticChildren) {
699
693
  const finalStyle2 = userStyle2 ? Array.isArray(userStyle2) ? { fontFamily: defaultFont, ...Object.assign({}, ...userStyle2) } : { fontFamily: defaultFont, ...userStyle2 } : { fontFamily: defaultFont };
700
694
  return makeElement(isStaticChildren, effectiveType, { ...passProps2, style: finalStyle2 }, key);
701
695
  }
702
- const resolved = !import_core6.isWeb && __kbachStyles != null ? __kbachStyles : expandedClassStr ? (0, import_core6.resolve)(expandedClassStr, config.theme, config.darkMode) : {};
703
- const { style: rawUserStyle, ...passProps } = omitConsumed(workingProps);
704
- const userStyle = withImpliedRNStyleIfNeeded(webTag, resolved.base, rawUserStyle);
696
+ let resolved = import_core6.isNative && __kbachStyles != null ? __kbachStyles : expandedClassStr ? (0, import_core6.resolve)(expandedClassStr, config.theme, config.darkMode) : {};
697
+ const impliedClasses = getImpliedRNClasses(webTag, resolved.base);
698
+ if (impliedClasses) {
699
+ expandedClassStr = expandedClassStr ? `${expandedClassStr} ${impliedClasses}` : impliedClasses;
700
+ resolved = (0, import_core6.resolve)(expandedClassStr, config.theme, config.darkMode);
701
+ }
702
+ const { style: userStyle, ...passProps } = omitConsumed(workingProps);
705
703
  const { interactive, modeOrResponsive } = bucketMods(resolved);
706
704
  if (interactive) {
707
705
  return (0, import_jsx_runtime.jsx)(InteractiveWrapper, {
@@ -4,10 +4,10 @@ import {
4
4
  _invalidateDefaultFontCache,
5
5
  jsx,
6
6
  jsxs
7
- } from "./chunk-ZFVHIT3V.mjs";
7
+ } from "./chunk-LM3OWOK2.mjs";
8
8
  import {
9
9
  registerWebElement
10
- } from "./chunk-LQH3CJ3G.mjs";
10
+ } from "./chunk-PTOTQ6A2.mjs";
11
11
  export {
12
12
  Fragment,
13
13
  _invalidateDefaultFontCache,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kbach/react",
3
- "version": "0.6.40",
3
+ "version": "0.6.41",
4
4
  "description": "React / React Native components and hooks for the Kbach framework",
5
5
  "license": "MIT",
6
6
  "repository": {