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

package/dist/index.web.mjs

@@ -9,13 +9,13 @@ import {
   subscribeDynamicTokens,
   subscribeGlobalDarkMode,
   toggleGlobalDarkMode
-} from "./chunk-TS2EEVOE.mjs";
+} from "./chunk-JENWPIJT.mjs";
 import {
   defaultTheme,
   getTheme,
   resolveClassName,
   setTheme
-} from "./chunk-AG7ZQ2K4.mjs";
+} from "./chunk-TBDAJIR3.mjs";
 
 // src/config.ts
 function parseHexRgb(hex) {

package/dist/jsx-dev-runtime.js

@@ -729,6 +729,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;
@@ -882,43 +903,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
@@ -1016,20 +1038,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":