@kbach/react 0.6.32 → 0.6.33

package/dist/{chunk-JUGDQQQ4.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-E322MVGC.mjs";
+} from "./chunk-QCBA2JJK.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -110,16 +111,9 @@ function mergeStyle(computed, userStyle) {
   if (!userStyle) return computed;
   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) {
@@ -166,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-E322MVGC.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",
@@ -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,8 +855,13 @@ function styled(Component, baseClasses = "") {
         [resolved, isDark, pressed, hovered, focused, disabled, checked, width]
         // eslint-disable-line react-hooks/exhaustive-deps
       );
-      const finalStyle = isWebPlatform ? (Array.isArray(styleProp) ? Object.assign({}, ...styleProp) : styleProp) ?? void 0 : styleProp ? Array.isArray(styleProp) ? [computedStyle, ...styleProp] : [computedStyle, styleProp] : 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/index.mjs

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

@@ -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",
@@ -621,16 +634,9 @@ function mergeStyle(computed, userStyle) {
   if (!userStyle) return computed;
   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) {
@@ -677,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-JUGDQQQ4.mjs";
-import "./chunk-E322MVGC.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

@@ -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",
@@ -627,16 +640,9 @@ function mergeStyle(computed, userStyle) {
   if (!userStyle) return computed;
   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) {
@@ -683,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-JUGDQQQ4.mjs";
+} from "./chunk-4DFD4WX3.mjs";
 import {
   registerWebElement
-} from "./chunk-E322MVGC.mjs";
+} from "./chunk-QCBA2JJK.mjs";
 export {
   Fragment,
   _invalidateDefaultFontCache,

package/package.json

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