@kbach/react-native 1.0.0-beta.46 → 1.0.0-beta.48

package/dist/{chunk-UFSVFF3V.mjs → chunk-SC3L5I7H.mjs}

@@ -1,6 +1,6 @@
 import {
   resolveClassName
-} from "./chunk-DKZM4NUU.mjs";
+} from "./chunk-3KLOVONL.mjs";
 
 // src/jsxRuntimeCoreWeb.ts
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/dist/{chunk-KT6TQLWI.mjs → chunk-XOH25F3E.mjs}

@@ -1,6 +1,6 @@
 import {
   getTheme
-} from "./chunk-DKZM4NUU.mjs";
+} from "./chunk-3KLOVONL.mjs";
 
 // src/darkModeStore.ts
 import { Appearance } from "react-native";

package/dist/dynamicTokens.d.ts

@@ -24,7 +24,24 @@
  * one of those re-renders, so the resolved style stays correct regardless
  * — the redundant re-render is a cheap, accepted trade-off, not a bug.
  */
-/** `name` is the bare token name, WITHOUT the leading `--` (matching how `getDynamicToken`/`var(--name)` substitution both address it). */
+/**
+ * `name` is the bare token name, WITHOUT the leading `--` (matching how
+ * `getDynamicToken`/`var(--name)` substitution both address it).
+ *
+ * `notify()` below is synchronous and immediately re-renders every
+ * already-mounted `ReactiveElement` subscribed via `useSyncExternalStore`
+ * (jsxRuntimeCore.ts) — safe when called from a component's own render
+ * body (React explicitly allows a component updating external state during
+ * its OWN render), a real hazard called from anywhere else with no fixed
+ * point in the render lifecycle: module-top-level code in particular runs
+ * whenever Metro's inline-requires first evaluates that module, which can
+ * land in the middle of React rendering a completely unrelated component
+ * elsewhere in the tree — the "Cannot update a component while rendering a
+ * different component" class of bug. Reported from a QA pass. Call it
+ * synchronously from your app's ROOT component's render (before any
+ * consumer has mounted), guarded so it only fires once — see this
+ * package's own AGENTS.md section 8 for the full Bad/Good example.
+ */
 declare function setDynamicToken(name: string, value: string): void;
 declare function getDynamicToken(name: string): string | undefined;
 declare function deleteDynamicToken(name: string): void;

package/dist/index.js

@@ -1739,6 +1739,12 @@ function isPlainPercentage(value) {
   if (digits.startsWith("-")) digits = digits.slice(1);
   return digits.length > 0 && /^[0-9.]+$/.test(digits);
 }
+function sanitizeForWarning(value) {
+  const MAX_CHARS = 60;
+  const escaped = value.replace(/"/g, "'").replace(/[\n\r]/g, " ");
+  if (escaped.length <= MAX_CHARS) return escaped;
+  return `${escaped.slice(0, MAX_CHARS)}\u2026`;
+}
 function rnStyleValue(property, value) {
   if (property === "aspect-ratio") {
     if (value.trim() === "auto") return { value: null, warning: null };
@@ -1779,7 +1785,8 @@ function rnStyleValue(property, value) {
   if (reduced !== null) {
     return { value: reduced, warning: null };
   }
-  const warning = `[Kbach] "${value}" isn't a valid native value for "${property}" \u2014 dropped.
+  const sanitizedValue = sanitizeForWarning(value);
+  const warning = `[Kbach] "${sanitizedValue}" isn't a valid native value for "${property}" \u2014 dropped.
 calc()/min()/max()/clamp() only resolve on native when every operand is a constant px/rem length (no %, vw, vh, var(), or other viewport/CSS-variable units \u2014 those need real layout/DOM, which doesn't exist on native at paint time).
 Fix: use a plain px/rem calc, a fraction utility (e.g. w-1/2), or resolve this value in JS instead.`;
   return { value: null, warning };
@@ -1887,14 +1894,28 @@ function resolveStyleUncached(classString, pressed, colorScheme, width, themeJso
   }
   return style;
 }
+var WARNED_MESSAGES_MAX = 500;
 var warnedMessages = /* @__PURE__ */ new Set();
+var QUOTED_TOKEN_RE = /"([^"]*)"/;
+function highlightToken(classString, warning) {
+  const match = QUOTED_TOKEN_RE.exec(warning);
+  if (match === null) return classString;
+  const quoted = match[1].replace(/\s+/g, "");
+  if (quoted === "") return classString;
+  const parts = classString.split(/(\s+)/);
+  const idx = parts.findIndex((part) => part.replace(/\s+/g, "").includes(quoted));
+  if (idx === -1) return classString;
+  parts[idx] = `\xBB${parts[idx]}\xAB`;
+  return parts.join("");
+}
 function warnIfDev(classString, warnings) {
   if (warnings.length === 0) return;
   if (typeof __DEV__ !== "undefined" && !__DEV__) return;
   for (const warning of warnings) {
     const message = `${warning}
-From className: "${classString}"`;
+From className: "${highlightToken(classString, warning)}"`;
     if (warnedMessages.has(message)) continue;
+    if (warnedMessages.size >= WARNED_MESSAGES_MAX) warnedMessages.clear();
     warnedMessages.add(message);
     console.warn(message);
   }