@kbach/react 0.6.46 → 0.6.48

package/dist/{chunk-FYVFEEFX.mjs → chunk-CFUH3CUD.mjs}

@@ -3106,6 +3106,27 @@ var CSS_UNITLESS = /* @__PURE__ */ new Set([
   "gridRowStart",
   "gridRowEnd"
 ]);
+var TEXT_ONLY_STYLE_KEYS = [
+  "color",
+  "fontSize",
+  "fontWeight",
+  "fontStyle",
+  "fontVariant",
+  "letterSpacing",
+  "lineHeight",
+  "textAlign",
+  "textAlignVertical",
+  "textDecorationLine",
+  "textDecorationColor",
+  "textDecorationStyle",
+  "textShadowColor",
+  "textShadowOffset",
+  "textShadowRadius",
+  "textTransform",
+  "writingDirection",
+  "includeFontPadding",
+  "verticalAlign"
+];
 var RN_SHORTHAND_EXPAND = {
   marginHorizontal: ["margin-left", "margin-right"],
   marginVertical: ["margin-top", "margin-bottom"],
@@ -3265,8 +3286,10 @@ function flatten(resolved, isDark, state = {}, breakpoints = /* @__PURE__ */ new
   }
   if (isNative) {
     const defaultFont = getDefaultFontFamily();
-    if (defaultFont && !("fontFamily" in result)) {
-      result.fontFamily = defaultFont;
+    const r = result;
+    const looksLikeText = TEXT_ONLY_STYLE_KEYS.some((k) => k in r);
+    if (defaultFont && looksLikeText && !("fontFamily" in r)) {
+      r.fontFamily = defaultFont;
     }
   }
   if (!isNative) {
@@ -3814,6 +3837,16 @@ var _resizeModeMap = {
   "center": "none",
   "repeat": "none"
 };
+var PLACEHOLDER_RULE_CLASS = "kbach-ph";
+var _placeholderRuleInjected = false;
+function ensurePlaceholderColorRuleInjected() {
+  if (_placeholderRuleInjected || typeof document === "undefined") return;
+  _placeholderRuleInjected = true;
+  const style = document.createElement("style");
+  style.setAttribute("data-kbach-placeholder", "");
+  style.textContent = `.${PLACEHOLDER_RULE_CLASS}::placeholder{color:var(--kbach-ph-color)}`;
+  document.head.appendChild(style);
+}
 function transformToWebProps(originalName, tag, props) {
   const out = {};
   const isPressable = _pressableNames.has(originalName);
@@ -3821,6 +3854,7 @@ function transformToWebProps(originalName, tag, props) {
   const isImage = originalName === "Image" || originalName === "ImageBackground";
   const isScrollable = originalName === "ScrollView" || originalName === "FlatList" || originalName === "SectionList";
   let pendingStyle = null;
+  let pendingClassName = null;
   for (const [k, v] of Object.entries(props)) {
     if (_rnOnlyProps.has(k)) continue;
     if (k === "onPress") {
@@ -3844,6 +3878,22 @@ function transformToWebProps(originalName, tag, props) {
         if (!("onChange" in props)) out.onChange = (e) => v(e.target.value);
         continue;
       }
+      if (k === "onSubmitEditing") {
+        if (!("onKeyDown" in props)) {
+          out.onKeyDown = (e) => {
+            if (e.key === "Enter") v();
+          };
+        }
+        continue;
+      }
+      if (k === "placeholderTextColor") {
+        if (v) {
+          ensurePlaceholderColorRuleInjected();
+          pendingClassName = PLACEHOLDER_RULE_CLASS;
+          pendingStyle = { ...pendingStyle ?? {}, "--kbach-ph-color": v };
+        }
+        continue;
+      }
       if (k === "secureTextEntry") {
         if (v && !("type" in props)) out.type = "password";
         continue;
@@ -3905,6 +3955,9 @@ function transformToWebProps(originalName, tag, props) {
   if (pendingStyle) {
     out.style = out.style ? { ...pendingStyle, ...out.style } : pendingStyle;
   }
+  if (pendingClassName) {
+    out.className = out.className ? `${out.className} ${pendingClassName}` : pendingClassName;
+  }
   if (isPressable && !out.role) out.role = "button";
   if (isImage && tag === "img" && out.alt == null) out.alt = "";
   return out;

package/dist/{chunk-4Y44K364.mjs → chunk-YI75WFHE.mjs}

@@ -26,7 +26,7 @@ import {
   transformToWebProps,
   useConditionalGlobalDarkMode,
   useConditionalWidth
-} from "./chunk-FYVFEEFX.mjs";
+} from "./chunk-CFUH3CUD.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -144,7 +144,9 @@ function processElement(type, rawProps, key, isStaticChildren) {
   if (!classStr && !__kbachStyles) {
     if (getEffectiveIsWeb()) return makeElement(isStaticChildren, effectiveType, omitConsumed(workingProps), key);
     const defaultFont = getCachedDefaultFont();
-    if (!defaultFont) return makeElement(isStaticChildren, effectiveType, workingProps, key);
+    if (!defaultFont || getWebTag(type) !== "span") {
+      return makeElement(isStaticChildren, effectiveType, workingProps, key);
+    }
     const { style: userStyle2, ...passProps2 } = omitConsumed(workingProps);
     const finalStyle2 = userStyle2 ? Array.isArray(userStyle2) ? { fontFamily: defaultFont, ...Object.assign({}, ...userStyle2) } : { fontFamily: defaultFont, ...userStyle2 } : { fontFamily: defaultFont };
     return makeElement(isStaticChildren, effectiveType, { ...passProps2, style: finalStyle2 }, key);

package/dist/core/index.js

@@ -3194,6 +3194,27 @@ var CSS_UNITLESS = /* @__PURE__ */ new Set([
   "gridRowStart",
   "gridRowEnd"
 ]);
+var TEXT_ONLY_STYLE_KEYS = [
+  "color",
+  "fontSize",
+  "fontWeight",
+  "fontStyle",
+  "fontVariant",
+  "letterSpacing",
+  "lineHeight",
+  "textAlign",
+  "textAlignVertical",
+  "textDecorationLine",
+  "textDecorationColor",
+  "textDecorationStyle",
+  "textShadowColor",
+  "textShadowOffset",
+  "textShadowRadius",
+  "textTransform",
+  "writingDirection",
+  "includeFontPadding",
+  "verticalAlign"
+];
 var RN_SHORTHAND_EXPAND = {
   marginHorizontal: ["margin-left", "margin-right"],
   marginVertical: ["margin-top", "margin-bottom"],
@@ -3363,8 +3384,10 @@ function flatten(resolved, isDark, state = {}, breakpoints = /* @__PURE__ */ new
   }
   if (isNative) {
     const defaultFont = getDefaultFontFamily();
-    if (defaultFont && !("fontFamily" in result)) {
-      result.fontFamily = defaultFont;
+    const r = result;
+    const looksLikeText = TEXT_ONLY_STYLE_KEYS.some((k) => k in r);
+    if (defaultFont && looksLikeText && !("fontFamily" in r)) {
+      r.fontFamily = defaultFont;
     }
   }
   if (!isNative) {

package/dist/index.js

@@ -716,6 +716,16 @@ var _resizeModeMap = {
   "center": "none",
   "repeat": "none"
 };
+var PLACEHOLDER_RULE_CLASS = "kbach-ph";
+var _placeholderRuleInjected = false;
+function ensurePlaceholderColorRuleInjected() {
+  if (_placeholderRuleInjected || typeof document === "undefined") return;
+  _placeholderRuleInjected = true;
+  const style = document.createElement("style");
+  style.setAttribute("data-kbach-placeholder", "");
+  style.textContent = `.${PLACEHOLDER_RULE_CLASS}::placeholder{color:var(--kbach-ph-color)}`;
+  document.head.appendChild(style);
+}
 function transformToWebProps(originalName, tag, props) {
   const out = {};
   const isPressable = _pressableNames.has(originalName);
@@ -723,6 +733,7 @@ function transformToWebProps(originalName, tag, props) {
   const isImage = originalName === "Image" || originalName === "ImageBackground";
   const isScrollable = originalName === "ScrollView" || originalName === "FlatList" || originalName === "SectionList";
   let pendingStyle = null;
+  let pendingClassName = null;
   for (const [k, v] of Object.entries(props)) {
     if (_rnOnlyProps.has(k)) continue;
     if (k === "onPress") {
@@ -746,6 +757,22 @@ function transformToWebProps(originalName, tag, props) {
         if (!("onChange" in props)) out.onChange = (e) => v(e.target.value);
         continue;
       }
+      if (k === "onSubmitEditing") {
+        if (!("onKeyDown" in props)) {
+          out.onKeyDown = (e) => {
+            if (e.key === "Enter") v();
+          };
+        }
+        continue;
+      }
+      if (k === "placeholderTextColor") {
+        if (v) {
+          ensurePlaceholderColorRuleInjected();
+          pendingClassName = PLACEHOLDER_RULE_CLASS;
+          pendingStyle = { ...pendingStyle ?? {}, "--kbach-ph-color": v };
+        }
+        continue;
+      }
       if (k === "secureTextEntry") {
         if (v && !("type" in props)) out.type = "password";
         continue;
@@ -807,6 +834,9 @@ function transformToWebProps(originalName, tag, props) {
   if (pendingStyle) {
     out.style = out.style ? { ...pendingStyle, ...out.style } : pendingStyle;
   }
+  if (pendingClassName) {
+    out.className = out.className ? `${out.className} ${pendingClassName}` : pendingClassName;
+  }
   if (isPressable && !out.role) out.role = "button";
   if (isImage && tag === "img" && out.alt == null) out.alt = "";
   return out;

package/dist/index.mjs

@@ -48,7 +48,7 @@ import {
   useGlobalDarkMode,
   useGlobalWidth,
   useSyncExternalStore
-} from "./chunk-FYVFEEFX.mjs";
+} from "./chunk-CFUH3CUD.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";

package/dist/jsx-dev-runtime.js

@@ -500,6 +500,16 @@ var _resizeModeMap = {
   "center": "none",
   "repeat": "none"
 };
+var PLACEHOLDER_RULE_CLASS = "kbach-ph";
+var _placeholderRuleInjected = false;
+function ensurePlaceholderColorRuleInjected() {
+  if (_placeholderRuleInjected || typeof document === "undefined") return;
+  _placeholderRuleInjected = true;
+  const style = document.createElement("style");
+  style.setAttribute("data-kbach-placeholder", "");
+  style.textContent = `.${PLACEHOLDER_RULE_CLASS}::placeholder{color:var(--kbach-ph-color)}`;
+  document.head.appendChild(style);
+}
 function transformToWebProps(originalName, tag, props) {
   const out = {};
   const isPressable = _pressableNames.has(originalName);
@@ -507,6 +517,7 @@ function transformToWebProps(originalName, tag, props) {
   const isImage = originalName === "Image" || originalName === "ImageBackground";
   const isScrollable = originalName === "ScrollView" || originalName === "FlatList" || originalName === "SectionList";
   let pendingStyle = null;
+  let pendingClassName = null;
   for (const [k, v] of Object.entries(props)) {
     if (_rnOnlyProps.has(k)) continue;
     if (k === "onPress") {
@@ -530,6 +541,22 @@ function transformToWebProps(originalName, tag, props) {
         if (!("onChange" in props)) out.onChange = (e) => v(e.target.value);
         continue;
       }
+      if (k === "onSubmitEditing") {
+        if (!("onKeyDown" in props)) {
+          out.onKeyDown = (e) => {
+            if (e.key === "Enter") v();
+          };
+        }
+        continue;
+      }
+      if (k === "placeholderTextColor") {
+        if (v) {
+          ensurePlaceholderColorRuleInjected();
+          pendingClassName = PLACEHOLDER_RULE_CLASS;
+          pendingStyle = { ...pendingStyle ?? {}, "--kbach-ph-color": v };
+        }
+        continue;
+      }
       if (k === "secureTextEntry") {
         if (v && !("type" in props)) out.type = "password";
         continue;
@@ -591,6 +618,9 @@ function transformToWebProps(originalName, tag, props) {
   if (pendingStyle) {
     out.style = out.style ? { ...pendingStyle, ...out.style } : pendingStyle;
   }
+  if (pendingClassName) {
+    out.className = out.className ? `${out.className} ${pendingClassName}` : pendingClassName;
+  }
   if (isPressable && !out.role) out.role = "button";
   if (isImage && tag === "img" && out.alt == null) out.alt = "";
   return out;
@@ -682,7 +712,9 @@ function processElement(type, rawProps, key, isStaticChildren) {
   if (!classStr && !__kbachStyles) {
     if ((0, import_core6.getEffectiveIsWeb)()) return makeElement(isStaticChildren, effectiveType, omitConsumed(workingProps), key);
     const defaultFont = getCachedDefaultFont();
-    if (!defaultFont) return makeElement(isStaticChildren, effectiveType, workingProps, key);
+    if (!defaultFont || getWebTag(type) !== "span") {
+      return makeElement(isStaticChildren, effectiveType, workingProps, key);
+    }
     const { style: userStyle2, ...passProps2 } = omitConsumed(workingProps);
     const finalStyle2 = userStyle2 ? Array.isArray(userStyle2) ? { fontFamily: defaultFont, ...Object.assign({}, ...userStyle2) } : { fontFamily: defaultFont, ...userStyle2 } : { fontFamily: defaultFont };
     return makeElement(isStaticChildren, effectiveType, { ...passProps2, style: finalStyle2 }, key);

package/dist/jsx-dev-runtime.mjs

@@ -3,8 +3,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-4Y44K364.mjs";
-import "./chunk-FYVFEEFX.mjs";
+} from "./chunk-YI75WFHE.mjs";
+import "./chunk-CFUH3CUD.mjs";
 
 // src/jsx-dev-runtime.tsx
 function jsxDEV(type, props, key, isStaticChildren, source, self) {

package/dist/jsx-runtime.js

@@ -506,6 +506,16 @@ var _resizeModeMap = {
   "center": "none",
   "repeat": "none"
 };
+var PLACEHOLDER_RULE_CLASS = "kbach-ph";
+var _placeholderRuleInjected = false;
+function ensurePlaceholderColorRuleInjected() {
+  if (_placeholderRuleInjected || typeof document === "undefined") return;
+  _placeholderRuleInjected = true;
+  const style = document.createElement("style");
+  style.setAttribute("data-kbach-placeholder", "");
+  style.textContent = `.${PLACEHOLDER_RULE_CLASS}::placeholder{color:var(--kbach-ph-color)}`;
+  document.head.appendChild(style);
+}
 function transformToWebProps(originalName, tag, props) {
   const out = {};
   const isPressable = _pressableNames.has(originalName);
@@ -513,6 +523,7 @@ function transformToWebProps(originalName, tag, props) {
   const isImage = originalName === "Image" || originalName === "ImageBackground";
   const isScrollable = originalName === "ScrollView" || originalName === "FlatList" || originalName === "SectionList";
   let pendingStyle = null;
+  let pendingClassName = null;
   for (const [k, v] of Object.entries(props)) {
     if (_rnOnlyProps.has(k)) continue;
     if (k === "onPress") {
@@ -536,6 +547,22 @@ function transformToWebProps(originalName, tag, props) {
         if (!("onChange" in props)) out.onChange = (e) => v(e.target.value);
         continue;
       }
+      if (k === "onSubmitEditing") {
+        if (!("onKeyDown" in props)) {
+          out.onKeyDown = (e) => {
+            if (e.key === "Enter") v();
+          };
+        }
+        continue;
+      }
+      if (k === "placeholderTextColor") {
+        if (v) {
+          ensurePlaceholderColorRuleInjected();
+          pendingClassName = PLACEHOLDER_RULE_CLASS;
+          pendingStyle = { ...pendingStyle ?? {}, "--kbach-ph-color": v };
+        }
+        continue;
+      }
       if (k === "secureTextEntry") {
         if (v && !("type" in props)) out.type = "password";
         continue;
@@ -597,6 +624,9 @@ function transformToWebProps(originalName, tag, props) {
   if (pendingStyle) {
     out.style = out.style ? { ...pendingStyle, ...out.style } : pendingStyle;
   }
+  if (pendingClassName) {
+    out.className = out.className ? `${out.className} ${pendingClassName}` : pendingClassName;
+  }
   if (isPressable && !out.role) out.role = "button";
   if (isImage && tag === "img" && out.alt == null) out.alt = "";
   return out;
@@ -688,7 +718,9 @@ function processElement(type, rawProps, key, isStaticChildren) {
   if (!classStr && !__kbachStyles) {
     if ((0, import_core6.getEffectiveIsWeb)()) return makeElement(isStaticChildren, effectiveType, omitConsumed(workingProps), key);
     const defaultFont = getCachedDefaultFont();
-    if (!defaultFont) return makeElement(isStaticChildren, effectiveType, workingProps, key);
+    if (!defaultFont || getWebTag(type) !== "span") {
+      return makeElement(isStaticChildren, effectiveType, workingProps, key);
+    }
     const { style: userStyle2, ...passProps2 } = omitConsumed(workingProps);
     const finalStyle2 = userStyle2 ? Array.isArray(userStyle2) ? { fontFamily: defaultFont, ...Object.assign({}, ...userStyle2) } : { fontFamily: defaultFont, ...userStyle2 } : { fontFamily: defaultFont };
     return makeElement(isStaticChildren, effectiveType, { ...passProps2, style: finalStyle2 }, key);

package/dist/jsx-runtime.mjs

@@ -4,10 +4,10 @@ import {
   _invalidateDefaultFontCache,
   jsx,
   jsxs
-} from "./chunk-4Y44K364.mjs";
+} from "./chunk-YI75WFHE.mjs";
 import {
   registerWebElement
-} from "./chunk-FYVFEEFX.mjs";
+} from "./chunk-CFUH3CUD.mjs";
 export {
   Fragment,
   _invalidateDefaultFontCache,

package/package.json

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