@kbach/react-native 1.0.0-beta.23 → 1.0.0-beta.25

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

@@ -1,14 +1,14 @@
-import "./chunk-TS2EEVOE.mjs";
+import "./chunk-JENWPIJT.mjs";
 import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-OS7EPBH5.mjs";
-import "./chunk-AG7ZQ2K4.mjs";
+} from "./chunk-EBLZ3CJG.mjs";
+import "./chunk-TBDAJIR3.mjs";
 
 // src/jsxRuntimeCore.ts
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment2, useCallback, useState, useSyncExternalStore } from "react";
+import { Fragment as Fragment2, useCallback, useRef, useState, useSyncExternalStore } from "react";
 import { Pressable, useWindowDimensions } from "react-native";
 function createJsxDEV(jsx2, jsxs2) {
   return function jsxDEV2(type, props, key, isStaticChildren, source, self) {

package/dist/jsx-runtime.js

@@ -589,11 +589,18 @@ function ReactiveElement({
 }) {
   (0, import_react.useSyncExternalStore)(import_darkModeStore.subscribeGlobalDarkMode, import_darkModeStore.getGlobalDarkMode);
   (0, import_react.useSyncExternalStore)(import_dynamicTokens.subscribeDynamicTokens, import_dynamicTokens.getDynamicTokensVersion);
-  (0, import_react_native.useWindowDimensions)();
+  const windowSize = (0, import_react_native.useWindowDimensions)();
   const [measuredBasis, setMeasuredBasis] = (0, import_react.useState)(null);
+  const lastWindowSizeRef = (0, import_react.useRef)(windowSize);
+  if (lastWindowSizeRef.current.width !== windowSize.width || lastWindowSizeRef.current.height !== windowSize.height) {
+    lastWindowSizeRef.current = windowSize;
+    if (measuredBasis !== null) {
+      setMeasuredBasis(null);
+    }
+  }
   const measure = (0, import_react.useCallback)((e) => {
     const { width: w, height: h } = e.nativeEvent.layout;
-    setMeasuredBasis((prev) => prev && prev.width === w && prev.height === h ? prev : { width: w, height: h });
+    setMeasuredBasis((prev) => prev === null ? { width: w, height: h } : prev);
   }, []);
   const [isHovered, setIsHovered] = (0, import_react.useState)(false);
   const [isFocused, setIsFocused] = (0, import_react.useState)(false);
@@ -713,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;
@@ -866,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
@@ -1000,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":