@kbach/react 0.6.31 → 0.6.33

package/dist/{chunk-MOWXWICC.mjs → chunk-4DFD4WX3.mjs}

@@ -9,6 +9,7 @@ import {
   getDefaultFontFamily,
   getEffectiveIsWeb,
   getGlobalScreens,
+  getImpliedRNStyle,
   getInteractiveModifiers,
   getModeModifiers,
   getResponsiveModifiers,
@@ -25,7 +26,7 @@ import {
   transformToWebProps,
   useConditionalGlobalDarkMode,
   useConditionalWidth
-} from "./chunk-OIJ6RP4F.mjs";
+} from "./chunk-QCBA2JJK.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -50,7 +51,7 @@ var DarkWrapper = React.forwardRef(
       return s;
     }, [resolvedStyle, isDark, width, screens, isNonStringComponent]);
     const skipComputedInline = isWebPlatform;
-    const finalStyle = skipComputedInline ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
+    const finalStyle = skipComputedInline ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? [computedStyle, ...styleProp] : [computedStyle, styleProp] : computedStyle;
     const props = { ref, ...rest, style: finalStyle };
     return Array.isArray(children) ? React.createElement(Component, props, ...children) : React.createElement(Component, props, children);
   }
@@ -108,19 +109,11 @@ function omitConsumed(props) {
 }
 function mergeStyle(computed, userStyle) {
   if (!userStyle) return computed;
-  if (Array.isArray(userStyle)) return Object.assign({}, computed, ...userStyle);
-  return { ...computed, ...userStyle };
+  return Array.isArray(userStyle) ? [computed, ...userStyle] : [computed, userStyle];
 }
-function withImpliedFlexIfNeeded(webTag, resolvedBase, userStyle) {
-  if (!webTag || !resolvedBase) return userStyle;
-  const explicitDisplay = resolvedBase.display;
-  const hasFlexItemProps = "flexGrow" in resolvedBase || "flexShrink" in resolvedBase || "flex" in resolvedBase;
-  const willBeFlex = explicitDisplay === "flex" || explicitDisplay === void 0 && hasFlexItemProps;
-  if (!willBeFlex) return userStyle;
-  const compensation = {};
-  if (explicitDisplay === void 0) compensation.display = "flex";
-  if (resolvedBase.flexDirection === void 0) compensation.flexDirection = "column";
-  if (Object.keys(compensation).length === 0) return 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) {
@@ -167,7 +160,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
   }
   const resolved = !isWeb && __kbachStyles != null ? __kbachStyles : expandedClassStr ? resolve(expandedClassStr, config.theme, config.darkMode) : {};
   const { style: rawUserStyle, ...passProps } = omitConsumed(workingProps);
-  const userStyle = withImpliedFlexIfNeeded(webTag, resolved.base, rawUserStyle);
+  const userStyle = withImpliedRNStyleIfNeeded(webTag, resolved.base, rawUserStyle);
   const { interactive, modeOrResponsive } = bucketMods(resolved);
   if (interactive) {
     return _jsx(InteractiveWrapper, {

package/dist/{chunk-OIJ6RP4F.mjs → chunk-QCBA2JJK.mjs}

@@ -3522,6 +3522,19 @@ function getWebTag(type, props) {
   _cache.set(obj, tag);
   return tag;
 }
+function getImpliedRNStyle(webTag, resolvedBase) {
+  if (!webTag || !resolvedBase) return void 0;
+  const compensation = {};
+  if (resolvedBase.position === void 0) compensation.position = "relative";
+  const explicitDisplay = resolvedBase.display;
+  const hasFlexItemProps = "flexGrow" in resolvedBase || "flexShrink" in resolvedBase || "flex" 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";
+  }
+  return Object.keys(compensation).length > 0 ? compensation : void 0;
+}
 var _rnOnlyProps = /* @__PURE__ */ new Set([
   // Interaction
   "onLongPress",
@@ -3873,7 +3886,7 @@ var InteractiveWrapper = forwardRef(
       [resolvedStyle, isDark, pressed, hovered, focused, width, disabled, checked, isNonStringComponent]
     );
     const skipComputedInline = isWebPlatform;
-    const finalStyle = skipComputedInline ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
+    const finalStyle = skipComputedInline ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? [computedStyle, ...styleProp] : [computedStyle, styleProp] : computedStyle;
     const componentProps = {
       ref,
       ...restForComponent,
@@ -3961,6 +3974,7 @@ export {
   stripWebOnlyProps,
   registerWebElement,
   getWebTag,
+  getImpliedRNStyle,
   transformToWebProps,
   InteractiveWrapper
 };

package/dist/index.js

@@ -544,6 +544,19 @@ function getWebTag(type, props) {
   _cache.set(obj, tag);
   return tag;
 }
+function getImpliedRNStyle(webTag, resolvedBase) {
+  if (!webTag || !resolvedBase) return void 0;
+  const compensation = {};
+  if (resolvedBase.position === void 0) compensation.position = "relative";
+  const explicitDisplay = resolvedBase.display;
+  const hasFlexItemProps = "flexGrow" in resolvedBase || "flexShrink" in resolvedBase || "flex" 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";
+  }
+  return Object.keys(compensation).length > 0 ? compensation : void 0;
+}
 var _rnOnlyProps = /* @__PURE__ */ new Set([
   // Interaction
   "onLongPress",
@@ -842,9 +855,13 @@ function styled(Component, baseClasses = "") {
         [resolved, isDark, pressed, hovered, focused, disabled, checked, width]
         // eslint-disable-line react-hooks/exhaustive-deps
       );
-      const extraStyle = Array.isArray(styleProp) ? Object.assign({}, ...styleProp) : styleProp;
-      const finalStyle = isWebPlatform ? extraStyle ?? void 0 : extraStyle ? { ...computedStyle, ...extraStyle } : computedStyle;
       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 effectiveComponent = webTag ?? Component;
       const componentName2 = Component.displayName ?? Component.name ?? "";
       const effectiveRest = webTag && componentName2 ? transformToWebProps(componentName2, webTag, rest) : rest;
@@ -1030,7 +1047,7 @@ var InteractiveWrapper = (0, import_react9.forwardRef)(
       [resolvedStyle, isDark, pressed, hovered, focused, width, disabled, checked, isNonStringComponent]
     );
     const skipComputedInline = isWebPlatform;
-    const finalStyle = skipComputedInline ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
+    const finalStyle = skipComputedInline ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? [computedStyle, ...styleProp] : [computedStyle, styleProp] : computedStyle;
     const componentProps = {
       ref,
       ...restForComponent,

package/dist/index.mjs

@@ -14,6 +14,7 @@ import {
   getActiveBreakpoints,
   getConfig,
   getEffectiveIsWeb,
+  getImpliedRNStyle,
   getWebTag,
   hasInteractiveBuckets,
   hasResponsiveBuckets,
@@ -43,7 +44,7 @@ import {
   useGlobalDarkMode,
   useGlobalWidth,
   useSyncExternalStore
-} from "./chunk-OIJ6RP4F.mjs";
+} from "./chunk-QCBA2JJK.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";
@@ -406,9 +407,13 @@ function styled(Component, baseClasses = "") {
         [resolved, isDark, pressed, hovered, focused, disabled, checked, width]
         // eslint-disable-line react-hooks/exhaustive-deps
       );
-      const extraStyle = Array.isArray(styleProp) ? Object.assign({}, ...styleProp) : styleProp;
-      const finalStyle = isWebPlatform ? extraStyle ?? void 0 : extraStyle ? { ...computedStyle, ...extraStyle } : computedStyle;
       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 effectiveComponent = webTag ?? Component;
       const componentName2 = Component.displayName ?? Component.name ?? "";
       const effectiveRest = webTag && componentName2 ? transformToWebProps(componentName2, webTag, rest) : rest;

package/dist/jsx-dev-runtime.js

@@ -234,7 +234,7 @@ var InteractiveWrapper = (0, import_react2.forwardRef)(
       [resolvedStyle, isDark, pressed, hovered, focused, width, disabled, checked, isNonStringComponent]
     );
     const skipComputedInline = isWebPlatform;
-    const finalStyle = skipComputedInline ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
+    const finalStyle = skipComputedInline ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? [computedStyle, ...styleProp] : [computedStyle, styleProp] : computedStyle;
     const componentProps = {
       ref,
       ...restForComponent,
@@ -291,7 +291,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) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
+    const finalStyle = skipComputedInline ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? [computedStyle, ...styleProp] : [computedStyle, styleProp] : computedStyle;
     const props = { ref, ...rest, style: finalStyle };
     return Array.isArray(children) ? import_react3.default.createElement(Component, props, ...children) : import_react3.default.createElement(Component, props, children);
   }
@@ -338,6 +338,19 @@ function getWebTag(type, props) {
   _cache.set(obj, tag);
   return tag;
 }
+function getImpliedRNStyle(webTag, resolvedBase) {
+  if (!webTag || !resolvedBase) return void 0;
+  const compensation = {};
+  if (resolvedBase.position === void 0) compensation.position = "relative";
+  const explicitDisplay = resolvedBase.display;
+  const hasFlexItemProps = "flexGrow" in resolvedBase || "flexShrink" in resolvedBase || "flex" 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";
+  }
+  return Object.keys(compensation).length > 0 ? compensation : void 0;
+}
 var _rnOnlyProps = /* @__PURE__ */ new Set([
   // Interaction
   "onLongPress",
@@ -619,19 +632,11 @@ function omitConsumed(props) {
 }
 function mergeStyle(computed, userStyle) {
   if (!userStyle) return computed;
-  if (Array.isArray(userStyle)) return Object.assign({}, computed, ...userStyle);
-  return { ...computed, ...userStyle };
+  return Array.isArray(userStyle) ? [computed, ...userStyle] : [computed, userStyle];
 }
-function withImpliedFlexIfNeeded(webTag, resolvedBase, userStyle) {
-  if (!webTag || !resolvedBase) return userStyle;
-  const explicitDisplay = resolvedBase.display;
-  const hasFlexItemProps = "flexGrow" in resolvedBase || "flexShrink" in resolvedBase || "flex" in resolvedBase;
-  const willBeFlex = explicitDisplay === "flex" || explicitDisplay === void 0 && hasFlexItemProps;
-  if (!willBeFlex) return userStyle;
-  const compensation = {};
-  if (explicitDisplay === void 0) compensation.display = "flex";
-  if (resolvedBase.flexDirection === void 0) compensation.flexDirection = "column";
-  if (Object.keys(compensation).length === 0) return 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) {
@@ -678,7 +683,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
   }
   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 = withImpliedFlexIfNeeded(webTag, resolved.base, rawUserStyle);
+  const userStyle = withImpliedRNStyleIfNeeded(webTag, resolved.base, rawUserStyle);
   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-MOWXWICC.mjs";
-import "./chunk-OIJ6RP4F.mjs";
+} from "./chunk-4DFD4WX3.mjs";
+import "./chunk-QCBA2JJK.mjs";
 
 // src/jsx-dev-runtime.tsx
 function jsxDEV(type, props, key, isStaticChildren, source, self) {

package/dist/jsx-runtime.js

@@ -235,7 +235,7 @@ var InteractiveWrapper = (0, import_react2.forwardRef)(
       [resolvedStyle, isDark, pressed, hovered, focused, width, disabled, checked, isNonStringComponent]
     );
     const skipComputedInline = isWebPlatform;
-    const finalStyle = skipComputedInline ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
+    const finalStyle = skipComputedInline ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? [computedStyle, ...styleProp] : [computedStyle, styleProp] : computedStyle;
     const componentProps = {
       ref,
       ...restForComponent,
@@ -292,7 +292,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) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
+    const finalStyle = skipComputedInline ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? [computedStyle, ...styleProp] : [computedStyle, styleProp] : computedStyle;
     const props = { ref, ...rest, style: finalStyle };
     return Array.isArray(children) ? import_react3.default.createElement(Component, props, ...children) : import_react3.default.createElement(Component, props, children);
   }
@@ -344,6 +344,19 @@ function getWebTag(type, props) {
   _cache.set(obj, tag);
   return tag;
 }
+function getImpliedRNStyle(webTag, resolvedBase) {
+  if (!webTag || !resolvedBase) return void 0;
+  const compensation = {};
+  if (resolvedBase.position === void 0) compensation.position = "relative";
+  const explicitDisplay = resolvedBase.display;
+  const hasFlexItemProps = "flexGrow" in resolvedBase || "flexShrink" in resolvedBase || "flex" 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";
+  }
+  return Object.keys(compensation).length > 0 ? compensation : void 0;
+}
 var _rnOnlyProps = /* @__PURE__ */ new Set([
   // Interaction
   "onLongPress",
@@ -625,19 +638,11 @@ function omitConsumed(props) {
 }
 function mergeStyle(computed, userStyle) {
   if (!userStyle) return computed;
-  if (Array.isArray(userStyle)) return Object.assign({}, computed, ...userStyle);
-  return { ...computed, ...userStyle };
+  return Array.isArray(userStyle) ? [computed, ...userStyle] : [computed, userStyle];
 }
-function withImpliedFlexIfNeeded(webTag, resolvedBase, userStyle) {
-  if (!webTag || !resolvedBase) return userStyle;
-  const explicitDisplay = resolvedBase.display;
-  const hasFlexItemProps = "flexGrow" in resolvedBase || "flexShrink" in resolvedBase || "flex" in resolvedBase;
-  const willBeFlex = explicitDisplay === "flex" || explicitDisplay === void 0 && hasFlexItemProps;
-  if (!willBeFlex) return userStyle;
-  const compensation = {};
-  if (explicitDisplay === void 0) compensation.display = "flex";
-  if (resolvedBase.flexDirection === void 0) compensation.flexDirection = "column";
-  if (Object.keys(compensation).length === 0) return 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) {
@@ -684,7 +689,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
   }
   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 = withImpliedFlexIfNeeded(webTag, resolved.base, rawUserStyle);
+  const userStyle = withImpliedRNStyleIfNeeded(webTag, resolved.base, rawUserStyle);
   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-MOWXWICC.mjs";
+} from "./chunk-4DFD4WX3.mjs";
 import {
   registerWebElement
-} from "./chunk-OIJ6RP4F.mjs";
+} from "./chunk-QCBA2JJK.mjs";
 export {
   Fragment,
   _invalidateDefaultFontCache,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react",
-  "version": "0.6.31",
+  "version": "0.6.33",
   "description": "React / React Native components and hooks for the Kbach framework",
   "repository": {
     "type": "git",