@kbach/react-native 1.0.0-beta.41 → 1.0.0-beta.42

package/dist/jsx-runtime.js

@@ -31,6 +31,76 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_react_native = require("react-native");
 var import_darkModeStore = require("./darkModeStore");
+var import_theme = require("./theme");
+
+// src/jsEngine/resolvers/color.ts
+function lookupHex(theme, key) {
+  const entry = theme.colors[key];
+  return typeof entry === "string" ? entry : null;
+}
+var MODE_AWARE_COLOR_PREFIXES = ["bg-", "text-", "border-"];
+function findModeAwareColor(base, theme) {
+  const important = base.startsWith("!") ? "!" : "";
+  const rest = important ? base.slice(1) : base;
+  for (const prefix of MODE_AWARE_COLOR_PREFIXES) {
+    if (!rest.startsWith(prefix)) continue;
+    const value = rest.slice(prefix.length);
+    const entry = theme.colors[value];
+    if (typeof entry === "object" && entry !== null) {
+      return { prefix: `${important}${prefix}`, light: entry.light, dark: entry.dark };
+    }
+  }
+  return null;
+}
+function substituteModeAwareColorToken(token, theme, colorScheme) {
+  const segments = token.split(":");
+  const base = segments.pop() ?? token;
+  const modifierPrefix = segments.length > 0 ? `${segments.join(":")}:` : "";
+  const found = findModeAwareColor(base, theme);
+  if (found === null) return token;
+  const hex = colorScheme === "dark" ? found.dark : found.light;
+  return `${modifierPrefix}${found.prefix}[${hex}]`;
+}
+function classStringUsesModeAwareColor(classString, theme) {
+  return classString.split(/\s+/).some((rawToken) => {
+    if (!rawToken) return false;
+    const segments = rawToken.split(":");
+    const base = segments.pop() ?? rawToken;
+    return findModeAwareColor(base, theme) !== null;
+  });
+}
+function hexToRgb(hex) {
+  const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m) return null;
+  let h = m[1];
+  if (h.length === 3) h = h.split("").map((c) => c + c).join("");
+  const n = parseInt(h, 16);
+  return [n >> 16 & 255, n >> 8 & 255, n & 255];
+}
+function splitOpacity(value) {
+  const slash = value.lastIndexOf("/");
+  if (slash === -1) return [value, null];
+  const opacityText = value.slice(slash + 1);
+  const n = Number(opacityText);
+  if (opacityText !== "" && Number.isInteger(n) && n >= 0 && n <= 100) {
+    return [value.slice(0, slash), n];
+  }
+  return [value, null];
+}
+function colorValue(theme, parsed) {
+  const value = parsed.value;
+  if (value === null) return null;
+  if (parsed.isArbitrary) return value;
+  const [name, opacity] = splitOpacity(value);
+  const hex = lookupHex(theme, name);
+  if (hex === null) return null;
+  if (opacity === null) return hex;
+  const rgb = hexToRgb(hex);
+  if (rgb === null) return hex;
+  return `rgba(${rgb.join(",")},${opacity / 100})`;
+}
+
+// src/jsxRuntimeCore.ts
 var import_dynamicTokens = require("./dynamicTokens");
 
 // src/jsEngine/calc.ts
@@ -774,6 +844,9 @@ var DARK_MODIFIER_RE = /(^|\s|:)dark:/;
 var BREAKPOINT_MODIFIER_RE = /(^|\s|:)(sm|md|lg|xl|2xl):|(^|\s|:)(min|max)-\[[^\]]*\]:/;
 var HOVER_MODIFIER_RE = /(^|\s|:)hover:/;
 var FOCUS_MODIFIER_RE = /(^|\s|:)focus:/;
+function usesModeAwareColor(classStrRaw) {
+  return classStringUsesModeAwareColor(classStrRaw, (0, import_theme.getTheme)());
+}
 function ReactiveElement({
   hostType,
   hostRest,
@@ -865,7 +938,7 @@ function processElement(resolveStyle2, type, rawProps, key, isStaticChildren) {
   if (typeof classStrRaw !== "string") {
     return makeElement(isStaticChildren, type, rawProps, key);
   }
-  if (DARK_MODIFIER_RE.test(classStrRaw) || BREAKPOINT_MODIFIER_RE.test(classStrRaw) || HOVER_MODIFIER_RE.test(classStrRaw) || FOCUS_MODIFIER_RE.test(classStrRaw) || classStrRaw.includes("var(--") || PERCENT_RELATIVE_CALC_HINT_RE.test(classStrRaw)) {
+  if (DARK_MODIFIER_RE.test(classStrRaw) || BREAKPOINT_MODIFIER_RE.test(classStrRaw) || HOVER_MODIFIER_RE.test(classStrRaw) || FOCUS_MODIFIER_RE.test(classStrRaw) || classStrRaw.includes("var(--") || PERCENT_RELATIVE_CALC_HINT_RE.test(classStrRaw) || usesModeAwareColor(classStrRaw)) {
     return (0, import_jsx_runtime.jsx)(
       ReactiveElement,
       { hostType: type, hostRest: rest, classStrRaw, userStyle, resolveStyle: resolveStyle2, elementKey: key, isStaticChildren },
@@ -888,7 +961,7 @@ function createJsxFunctions(resolveStyle2) {
 
 // src/nativeBridge.ts
 var import_react_native2 = require("react-native");
-var import_theme = require("./theme");
+var import_theme2 = require("./theme");
 var import_darkModeStore2 = require("./darkModeStore");
 
 // src/jsEngine/shared.ts
@@ -1366,65 +1439,6 @@ function resolve2(parsed, theme) {
   }
 }
 
-// src/jsEngine/resolvers/color.ts
-function lookupHex(theme, key) {
-  const entry = theme.colors[key];
-  return typeof entry === "string" ? entry : null;
-}
-var MODE_AWARE_COLOR_PREFIXES = ["bg-", "text-", "border-"];
-function findModeAwareColor(base, theme) {
-  const important = base.startsWith("!") ? "!" : "";
-  const rest = important ? base.slice(1) : base;
-  for (const prefix of MODE_AWARE_COLOR_PREFIXES) {
-    if (!rest.startsWith(prefix)) continue;
-    const value = rest.slice(prefix.length);
-    const entry = theme.colors[value];
-    if (typeof entry === "object" && entry !== null) {
-      return { prefix: `${important}${prefix}`, light: entry.light, dark: entry.dark };
-    }
-  }
-  return null;
-}
-function substituteModeAwareColorToken(token, theme, colorScheme) {
-  const segments = token.split(":");
-  const base = segments.pop() ?? token;
-  const modifierPrefix = segments.length > 0 ? `${segments.join(":")}:` : "";
-  const found = findModeAwareColor(base, theme);
-  if (found === null) return token;
-  const hex = colorScheme === "dark" ? found.dark : found.light;
-  return `${modifierPrefix}${found.prefix}[${hex}]`;
-}
-function hexToRgb(hex) {
-  const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
-  if (!m) return null;
-  let h = m[1];
-  if (h.length === 3) h = h.split("").map((c) => c + c).join("");
-  const n = parseInt(h, 16);
-  return [n >> 16 & 255, n >> 8 & 255, n & 255];
-}
-function splitOpacity(value) {
-  const slash = value.lastIndexOf("/");
-  if (slash === -1) return [value, null];
-  const opacityText = value.slice(slash + 1);
-  const n = Number(opacityText);
-  if (opacityText !== "" && Number.isInteger(n) && n >= 0 && n <= 100) {
-    return [value.slice(0, slash), n];
-  }
-  return [value, null];
-}
-function colorValue(theme, parsed) {
-  const value = parsed.value;
-  if (value === null) return null;
-  if (parsed.isArbitrary) return value;
-  const [name, opacity] = splitOpacity(value);
-  const hex = lookupHex(theme, name);
-  if (hex === null) return null;
-  if (opacity === null) return hex;
-  const rgb = hexToRgb(hex);
-  if (rgb === null) return hex;
-  return `rgba(${rgb.join(",")},${opacity / 100})`;
-}
-
 // src/jsEngine/resolvers/border.ts
 function radiusSize(key) {
   switch (key) {
@@ -2207,7 +2221,7 @@ var cachedForThemeJson = null;
 function resolveStyle(classString, pressed = false) {
   const colorScheme = (0, import_darkModeStore2.getGlobalDarkMode)() ? "dark" : "light";
   const width = import_react_native2.Dimensions.get("window").width;
-  const themeJson = (0, import_theme.getThemeJson)();
+  const themeJson = (0, import_theme2.getThemeJson)();
   if (themeJson !== cachedForThemeJson) {
     resolveStyleCache.clear();
     cachedForThemeJson = themeJson;
@@ -2223,7 +2237,7 @@ function resolveStyle(classString, pressed = false) {
 function resolveStyleUncached(classString, pressed, colorScheme, width, themeJson) {
   const KbachModule = import_react_native2.TurboModuleRegistry.get("KbachModule");
   if (!KbachModule) {
-    const { style: style2, warnings: warnings2 } = resolveStyleJsWithWarnings(classString, (0, import_theme.getTheme)(), colorScheme, pressed, width);
+    const { style: style2, warnings: warnings2 } = resolveStyleJsWithWarnings(classString, (0, import_theme2.getTheme)(), colorScheme, pressed, width);
     warnIfDev(classString, warnings2);
     return style2;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react-native",
-  "version": "1.0.0-beta.41",
+  "version": "1.0.0-beta.42",
   "description": "Kbach's utility-class styling engine for React Native — the same class names as @kbach/react, resolved to a StyleSheet-ready style object via a Kotlin/JNI TurboModule (native), the same WASM engine @kbach/react uses (Expo Web / react-native-web), or a pure-JS fallback engine (Expo Go). Ships its own native Android module — one npm install, no separate native package. Beta. Native is Android-only (no iOS bridge yet); works with the React Native CLI, an Expo dev client, AND Expo Go (a reduced-coverage pure-JS fallback, since Expo Go can't load any custom native module).",
   "keywords": [
     "css",