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

package/dist/index.web.mjs

@@ -10,13 +10,13 @@ import {
   subscribeDynamicTokens,
   subscribeGlobalDarkMode,
   toggleGlobalDarkMode
-} from "./chunk-YYCSHELO.mjs";
+} from "./chunk-45OSRKPS.mjs";
 import {
   defaultTheme,
   getTheme,
   resolveClassName,
   setTheme
-} from "./chunk-A3PV4XGK.mjs";
+} from "./chunk-BTIGG7K2.mjs";
 
 // src/config.ts
 function parseHexRgb(hex) {

package/dist/jsx-dev-runtime.js

@@ -30,6 +30,82 @@ 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 [name, opacity] = splitOpacity(rest.slice(prefix.length));
+    const entry = theme.colors[name];
+    if (typeof entry === "object" && entry !== null) {
+      return { prefix: `${important}${prefix}`, opacity, light: entry.light, dark: entry.dark };
+    }
+  }
+  return null;
+}
+function applyOpacityToHex(hex, opacity) {
+  if (opacity === null) return hex;
+  const rgb = hexToRgb(hex);
+  if (rgb === null) return hex;
+  return `rgba(${rgb.join(",")},${opacity / 100})`;
+}
+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}[${applyOpacityToHex(hex, found.opacity)}]`;
+}
+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
@@ -773,6 +849,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,
@@ -864,7 +943,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 },
@@ -897,7 +976,7 @@ function createJsxDEV(jsx2, jsxs2) {
 
 // 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
@@ -1375,65 +1454,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) {
@@ -2216,7 +2236,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;
@@ -2232,7 +2252,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;
   }