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

package/dist/index.js

@@ -341,6 +341,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;
@@ -494,43 +515,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
@@ -628,20 +650,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":