@kbach/react 0.6.47 → 0.6.49

package/dist/{chunk-5HY7Z2PS.mjs → chunk-KRRGLJLA.mjs}

@@ -2868,7 +2868,16 @@ var BASE_RESET = [
   // plain text. Text-like inputs, textarea, and button don't have that problem
   // (their native chrome is just a skin around content utilities can fully
   // restyle), so they keep the blank-canvas treatment.
-  "input:not([type='checkbox']):not([type='radio']), textarea { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
+  // :where() wraps the :not() exclusions so they contribute ZERO specificity
+  // (unlike a bare `input:not([type='checkbox']):not([type='radio'])`, whose
+  // two :not([attr]) clauses each add a class-level specificity point — (0,2,1)
+  // total, MORE than any single utility class (0,1,0)). Without :where(), this
+  // reset's `color: inherit` always won the cascade over a text-* color
+  // utility applied directly to a <input>/<textarea> regardless of source
+  // order, since author rules only override on a tie or higher specificity —
+  // confirmed on a real app: a TextInput's own text color utility resolved
+  // and injected correctly, class and all, but silently never painted.
+  "input:where(:not([type='checkbox']):not([type='radio'])), textarea { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
   // Native checkbox/radio/range still get typography + spacing normalized, and
   // accent-color re-themes their native indicator to the current text color
   // instead of the browser/OS default blue, so they stay on-brand without
@@ -3837,6 +3846,16 @@ var _resizeModeMap = {
   "center": "none",
   "repeat": "none"
 };
+var PLACEHOLDER_RULE_ATTR = "data-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_ATTR}]::placeholder{color:var(--kbach-ph-color)}`;
+  document.head.appendChild(style);
+}
 function transformToWebProps(originalName, tag, props) {
   const out = {};
   const isPressable = _pressableNames.has(originalName);
@@ -3867,6 +3886,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();
+          out[PLACEHOLDER_RULE_ATTR] = "";
+          pendingStyle = { ...pendingStyle ?? {}, "--kbach-ph-color": v };
+        }
+        continue;
+      }
       if (k === "secureTextEntry") {
         if (v && !("type" in props)) out.type = "password";
         continue;

package/dist/{chunk-WW3NH5W2.mjs → chunk-LIUJPOTS.mjs}

@@ -26,7 +26,7 @@ import {
   transformToWebProps,
   useConditionalGlobalDarkMode,
   useConditionalWidth
-} from "./chunk-5HY7Z2PS.mjs";
+} from "./chunk-KRRGLJLA.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/dist/core/index.js

@@ -2956,7 +2956,16 @@ var BASE_RESET = [
   // plain text. Text-like inputs, textarea, and button don't have that problem
   // (their native chrome is just a skin around content utilities can fully
   // restyle), so they keep the blank-canvas treatment.
-  "input:not([type='checkbox']):not([type='radio']), textarea { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
+  // :where() wraps the :not() exclusions so they contribute ZERO specificity
+  // (unlike a bare `input:not([type='checkbox']):not([type='radio'])`, whose
+  // two :not([attr]) clauses each add a class-level specificity point — (0,2,1)
+  // total, MORE than any single utility class (0,1,0)). Without :where(), this
+  // reset's `color: inherit` always won the cascade over a text-* color
+  // utility applied directly to a <input>/<textarea> regardless of source
+  // order, since author rules only override on a tie or higher specificity —
+  // confirmed on a real app: a TextInput's own text color utility resolved
+  // and injected correctly, class and all, but silently never painted.
+  "input:where(:not([type='checkbox']):not([type='radio'])), textarea { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
   // Native checkbox/radio/range still get typography + spacing normalized, and
   // accent-color re-themes their native indicator to the current text color
   // instead of the browser/OS default blue, so they stay on-brand without

package/dist/index.js

@@ -716,6 +716,16 @@ var _resizeModeMap = {
   "center": "none",
   "repeat": "none"
 };
+var PLACEHOLDER_RULE_ATTR = "data-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_ATTR}]::placeholder{color:var(--kbach-ph-color)}`;
+  document.head.appendChild(style);
+}
 function transformToWebProps(originalName, tag, props) {
   const out = {};
   const isPressable = _pressableNames.has(originalName);
@@ -746,6 +756,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();
+          out[PLACEHOLDER_RULE_ATTR] = "";
+          pendingStyle = { ...pendingStyle ?? {}, "--kbach-ph-color": v };
+        }
+        continue;
+      }
       if (k === "secureTextEntry") {
         if (v && !("type" in props)) out.type = "password";
         continue;

package/dist/index.mjs

@@ -48,7 +48,7 @@ import {
   useGlobalDarkMode,
   useGlobalWidth,
   useSyncExternalStore
-} from "./chunk-5HY7Z2PS.mjs";
+} from "./chunk-KRRGLJLA.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_ATTR = "data-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_ATTR}]::placeholder{color:var(--kbach-ph-color)}`;
+  document.head.appendChild(style);
+}
 function transformToWebProps(originalName, tag, props) {
   const out = {};
   const isPressable = _pressableNames.has(originalName);
@@ -530,6 +540,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();
+          out[PLACEHOLDER_RULE_ATTR] = "";
+          pendingStyle = { ...pendingStyle ?? {}, "--kbach-ph-color": v };
+        }
+        continue;
+      }
       if (k === "secureTextEntry") {
         if (v && !("type" in props)) out.type = "password";
         continue;

package/dist/jsx-dev-runtime.mjs

@@ -3,8 +3,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-WW3NH5W2.mjs";
-import "./chunk-5HY7Z2PS.mjs";
+} from "./chunk-LIUJPOTS.mjs";
+import "./chunk-KRRGLJLA.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_ATTR = "data-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_ATTR}]::placeholder{color:var(--kbach-ph-color)}`;
+  document.head.appendChild(style);
+}
 function transformToWebProps(originalName, tag, props) {
   const out = {};
   const isPressable = _pressableNames.has(originalName);
@@ -536,6 +546,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();
+          out[PLACEHOLDER_RULE_ATTR] = "";
+          pendingStyle = { ...pendingStyle ?? {}, "--kbach-ph-color": v };
+        }
+        continue;
+      }
       if (k === "secureTextEntry") {
         if (v && !("type" in props)) out.type = "password";
         continue;

package/dist/jsx-runtime.mjs

@@ -4,10 +4,10 @@ import {
   _invalidateDefaultFontCache,
   jsx,
   jsxs
-} from "./chunk-WW3NH5W2.mjs";
+} from "./chunk-LIUJPOTS.mjs";
 import {
   registerWebElement
-} from "./chunk-5HY7Z2PS.mjs";
+} from "./chunk-KRRGLJLA.mjs";
 export {
   Fragment,
   _invalidateDefaultFontCache,

package/dist/vite-plugin.js

@@ -78,7 +78,16 @@ var BASE_RESET = [
   // plain text. Text-like inputs, textarea, and button don't have that problem
   // (their native chrome is just a skin around content utilities can fully
   // restyle), so they keep the blank-canvas treatment.
-  "input:not([type='checkbox']):not([type='radio']), textarea { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
+  // :where() wraps the :not() exclusions so they contribute ZERO specificity
+  // (unlike a bare `input:not([type='checkbox']):not([type='radio'])`, whose
+  // two :not([attr]) clauses each add a class-level specificity point — (0,2,1)
+  // total, MORE than any single utility class (0,1,0)). Without :where(), this
+  // reset's `color: inherit` always won the cascade over a text-* color
+  // utility applied directly to a <input>/<textarea> regardless of source
+  // order, since author rules only override on a tie or higher specificity —
+  // confirmed on a real app: a TextInput's own text color utility resolved
+  // and injected correctly, class and all, but silently never painted.
+  "input:where(:not([type='checkbox']):not([type='radio'])), textarea { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
   // Native checkbox/radio/range still get typography + spacing normalized, and
   // accent-color re-themes their native indicator to the current text color
   // instead of the browser/OS default blue, so they stay on-brand without

package/dist/vite-plugin.mjs

@@ -43,7 +43,16 @@ var BASE_RESET = [
   // plain text. Text-like inputs, textarea, and button don't have that problem
   // (their native chrome is just a skin around content utilities can fully
   // restyle), so they keep the blank-canvas treatment.
-  "input:not([type='checkbox']):not([type='radio']), textarea { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
+  // :where() wraps the :not() exclusions so they contribute ZERO specificity
+  // (unlike a bare `input:not([type='checkbox']):not([type='radio'])`, whose
+  // two :not([attr]) clauses each add a class-level specificity point — (0,2,1)
+  // total, MORE than any single utility class (0,1,0)). Without :where(), this
+  // reset's `color: inherit` always won the cascade over a text-* color
+  // utility applied directly to a <input>/<textarea> regardless of source
+  // order, since author rules only override on a tie or higher specificity —
+  // confirmed on a real app: a TextInput's own text color utility resolved
+  // and injected correctly, class and all, but silently never painted.
+  "input:where(:not([type='checkbox']):not([type='radio'])), textarea { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
   // Native checkbox/radio/range still get typography + spacing normalized, and
   // accent-color re-themes their native indicator to the current text color
   // instead of the browser/OS default blue, so they stay on-brand without

package/package.json

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