@kbach/react-native 1.0.0-beta.24 → 1.0.0-beta.26

package/dist/jsx-dev-runtime.web.mjs

@@ -1,10 +1,10 @@
-import "./chunk-TS2EEVOE.mjs";
+import "./chunk-LWD6JATB.mjs";
 import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-OS7EPBH5.mjs";
-import "./chunk-AG7ZQ2K4.mjs";
+} from "./chunk-GHQ7DWLO.mjs";
+import "./chunk-BEXNFWW6.mjs";
 
 // src/jsxRuntimeCore.ts
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/dist/jsx-runtime.js

@@ -720,6 +720,27 @@ function resolveNegatableLength(theme, parsed) {
   if (px === 0) return "0px";
   return `-${px}px`;
 }
+function fractionPercent(value) {
+  const slashIdx = value.indexOf("/");
+  if (slashIdx === -1) return null;
+  const numStr = value.slice(0, slashIdx);
+  const denStr = value.slice(slashIdx + 1);
+  const num = Number(numStr);
+  const den = Number(denStr);
+  if (!Number.isFinite(num) || !Number.isFinite(den) || numStr.trim() === "" || denStr.trim() === "") return null;
+  if (den === 0) return null;
+  const pct = num / den * 100;
+  const formatted = pct.toFixed(6);
+  const trimmed = formatted.replace(/0+$/, "").replace(/\.$/, "");
+  return `${trimmed}%`;
+}
+function resolveNegatableSize(theme, parsed) {
+  if (!parsed.isArbitrary && parsed.value !== null) {
+    const pct = fractionPercent(parsed.value);
+    if (pct !== null) return parsed.negative ? `-${pct}` : pct;
+  }
+  return resolveNegatableLength(theme, parsed);
+}
 function resolvePercent(parsed) {
   if (parsed.negative) return null;
   const value = parsed.value;
@@ -873,43 +894,44 @@ function resolve(parsed, theme) {
     case "shrink":
       return [decl("flex-shrink", parsed.value ?? "1")];
     // top/right/bottom/left/inset support real Tailwind's negative-value
-    // convention ("-top-4") — see resolveNegatableLength's own doc comment.
+    // convention ("-top-4") AND its percentage-fraction scale ("top-1/2",
+    // "-inset-1/3") — see resolveNegatableSize's own doc comment.
     case "top": {
-      const v = resolveNegatableLength(theme, parsed);
+      const v = resolveNegatableSize(theme, parsed);
       return v === null ? null : [decl("top", v)];
     }
     case "right": {
-      const v = resolveNegatableLength(theme, parsed);
+      const v = resolveNegatableSize(theme, parsed);
       return v === null ? null : [decl("right", v)];
     }
     case "bottom": {
-      const v = resolveNegatableLength(theme, parsed);
+      const v = resolveNegatableSize(theme, parsed);
       return v === null ? null : [decl("bottom", v)];
     }
     case "left": {
-      const v = resolveNegatableLength(theme, parsed);
+      const v = resolveNegatableSize(theme, parsed);
       return v === null ? null : [decl("left", v)];
     }
     case "inset": {
-      const v = resolveNegatableLength(theme, parsed);
+      const v = resolveNegatableSize(theme, parsed);
       return v === null ? null : [decl("inset", v)];
     }
     case "inset-x": {
-      const v = resolveNegatableLength(theme, parsed);
+      const v = resolveNegatableSize(theme, parsed);
       return v === null ? null : [decl("left", v), decl("right", v)];
     }
     case "inset-y": {
-      const v = resolveNegatableLength(theme, parsed);
+      const v = resolveNegatableSize(theme, parsed);
       return v === null ? null : [decl("top", v), decl("bottom", v)];
     }
     // Logical inset — just a different CSS property name, same reasoning
     // as Rust's layout.rs (no direction-tracking logic needed here).
     case "start": {
-      const v = resolveNegatableLength(theme, parsed);
+      const v = resolveNegatableSize(theme, parsed);
       return v === null ? null : [decl("inset-inline-start", v)];
     }
     case "end": {
-      const v = resolveNegatableLength(theme, parsed);
+      const v = resolveNegatableSize(theme, parsed);
       return v === null ? null : [decl("inset-inline-end", v)];
     }
     // "aspect-" is a registered VALUE_PREFIXES entry (parser.ts), so
@@ -1007,20 +1029,6 @@ function namedSize(key) {
       return null;
   }
 }
-function fractionPercent(value) {
-  const slashIdx = value.indexOf("/");
-  if (slashIdx === -1) return null;
-  const numStr = value.slice(0, slashIdx);
-  const denStr = value.slice(slashIdx + 1);
-  const num = Number(numStr);
-  const den = Number(denStr);
-  if (!Number.isFinite(num) || !Number.isFinite(den) || numStr.trim() === "" || denStr.trim() === "") return null;
-  if (den === 0) return null;
-  const pct = num / den * 100;
-  const formatted = pct.toFixed(6);
-  const trimmed = formatted.replace(/0+$/, "").replace(/\.$/, "");
-  return `${trimmed}%`;
-}
 function cssSizeKeyword(key) {
   switch (key) {
     case "min":
@@ -1921,16 +1929,33 @@ function resolveStyleJsWithWarnings(classString, theme, colorScheme, pressed, wi
 }
 
 // src/nativeBridge.ts
+var RESOLVE_STYLE_CACHE_MAX = 500;
+var resolveStyleCache = /* @__PURE__ */ new Map();
+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)();
+  if (themeJson !== cachedForThemeJson) {
+    resolveStyleCache.clear();
+    cachedForThemeJson = themeJson;
+  }
+  const cacheKey = `${classString}\0${pressed}\0${colorScheme}\0${width}`;
+  const cached = resolveStyleCache.get(cacheKey);
+  if (cached !== void 0) return { ...cached };
+  const style = resolveStyleUncached(classString, pressed, colorScheme, width, themeJson);
+  if (resolveStyleCache.size >= RESOLVE_STYLE_CACHE_MAX) resolveStyleCache.clear();
+  resolveStyleCache.set(cacheKey, style);
+  return { ...style };
+}
+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);
     warnIfDev(classString, warnings2);
     return style2;
   }
-  const json = KbachModule.resolveStyle(classString, (0, import_theme.getThemeJson)(), colorScheme, pressed, width);
+  const json = KbachModule.resolveStyle(classString, themeJson, colorScheme, pressed, width);
   const style = JSON.parse(json);
   const warnings = style.__kbachWarnings;
   if (warnings !== void 0) {