@kbach/react-native 1.0.0-beta.53 → 1.0.0-beta.54

package/dist/{chunk-3JQAZNJK.mjs → chunk-NPDSBCXR.mjs}

@@ -1,6 +1,6 @@
 import {
   getTheme
-} from "./chunk-P75PP2QR.mjs";
+} from "./chunk-MLBH2JYH.mjs";
 
 // src/darkModeStore.ts
 import { Appearance } from "react-native";

package/dist/{chunk-TC6VSV44.mjs → chunk-NXRSUBSY.mjs}

@@ -1,6 +1,6 @@
 import {
   resolveClassName
-} from "./chunk-P75PP2QR.mjs";
+} from "./chunk-MLBH2JYH.mjs";
 
 // src/jsxRuntimeCoreWeb.ts
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/dist/index.js

@@ -202,11 +202,15 @@ var VALUE_PREFIXES = [
   "rotate-y-",
   "rotate-z-",
   "rotate-",
+  // Bare 'translate-'/'skew-' (both axes) after their per-axis forms, same
+  // longer-before-shorter rule as resolvers/parser.rs.
   "translate-x-",
   "translate-y-",
   "translate-z-",
+  "translate-",
   "skew-x-",
   "skew-y-",
+  "skew-",
   "perspective-origin-",
   "perspective-",
   "origin-",
@@ -394,6 +398,7 @@ function decl(property, value) {
 function spacingPx(theme, value) {
   const fromTable = theme.spacing[value];
   if (fromTable !== void 0) return fromTable;
+  if (value === "px") return 1;
   const n = Number(value);
   return Number.isFinite(n) && value.trim() !== "" ? n * 4 : void 0;
 }
@@ -436,6 +441,7 @@ function fractionPercent(value) {
 }
 function resolveNegatableSize(theme, parsed) {
   if (!parsed.isArbitrary && parsed.value !== null) {
+    if (parsed.negative && parsed.value === "full") return "-100%";
     const pct = fractionPercent(parsed.value);
     if (pct !== null) return parsed.negative ? `-${pct}` : pct;
   }
@@ -694,7 +700,7 @@ function resolveFlex(parsed, web) {
     case "shrink-0":
       return [decl("flex-shrink", "0")];
     default:
-      return null;
+      return /^\d+$/.test(value) ? [decl("flex", value)] : null;
   }
 }
 
@@ -938,8 +944,11 @@ function radiusSize(key) {
   switch (key) {
     case "none":
       return "0px";
-    case "sm":
+    // Tailwind v4.3's radius scale: `sm` is 0.25rem (v3's 0.125rem is `xs`).
+    case "xs":
       return "0.125rem";
+    case "sm":
+      return "0.25rem";
     case "md":
       return "0.375rem";
     case "lg":
@@ -950,12 +959,19 @@ function radiusSize(key) {
       return "1rem";
     case "3xl":
       return "1.5rem";
+    case "4xl":
+      return "2rem";
     case "full":
       return "9999px";
     default:
       return null;
   }
 }
+function borderWidthPx(parsed) {
+  if (parsed.negative || parsed.isArbitrary || parsed.value === null) return null;
+  const n = Number(parsed.value);
+  return Number.isFinite(n) && n >= 0 && parsed.value.trim() !== "" ? `${n}px` : null;
+}
 function borderSideProperty(side) {
   switch (side) {
     case "t":
@@ -978,6 +994,15 @@ function borderValue(theme, parsed) {
     if (side !== null) {
       return [decl(`${side}-width`, "1px"), decl(`${side}-style`, "solid")];
     }
+    const pair = value === "x" ? ["border-left", "border-right"] : value === "y" ? ["border-top", "border-bottom"] : null;
+    if (pair !== null) {
+      return [
+        decl(`${pair[0]}-width`, "1px"),
+        decl(`${pair[1]}-width`, "1px"),
+        decl(`${pair[0]}-style`, "solid"),
+        decl(`${pair[1]}-style`, "solid")
+      ];
+    }
     if (value === "collapse") return [decl("border-collapse", "collapse")];
     if (value === "separate") return [decl("border-collapse", "separate")];
   }
@@ -987,7 +1012,7 @@ function borderValue(theme, parsed) {
     return color2 === null ? null : [decl("border-color", color2)];
   }
   if (Number.isFinite(Number(value)) && value.trim() !== "") {
-    const v = resolveLength(theme, parsed);
+    const v = borderWidthPx(parsed);
     return v === null ? null : [decl("border-width", v)];
   }
   if (value === "solid" || value === "dashed" || value === "dotted" || value === "double" || value === "hidden" || value === "none") {
@@ -1005,7 +1030,7 @@ function borderSideValue(theme, parsed, sideProperty) {
     return color2 === null ? null : [decl(`${sideProperty}-color`, color2)];
   }
   if (Number.isFinite(Number(value)) && value.trim() !== "") {
-    const v = resolveLength(theme, parsed);
+    const v = borderWidthPx(parsed);
     return v === null ? null : [decl(`${sideProperty}-width`, v)];
   }
   if (value === "solid" || value === "dashed" || value === "dotted" || value === "double" || value === "hidden" || value === "none") {
@@ -1023,7 +1048,7 @@ function borderAxisValue(theme, parsed, sideA, sideB) {
     return color2 === null ? null : [decl(`${sideA}-color`, color2), decl(`${sideB}-color`, color2)];
   }
   if (Number.isFinite(Number(value)) && value.trim() !== "") {
-    const v = resolveLength(theme, parsed);
+    const v = borderWidthPx(parsed);
     return v === null ? null : [decl(`${sideA}-width`, v), decl(`${sideB}-width`, v)];
   }
   if (value === "solid" || value === "dashed" || value === "dotted" || value === "double" || value === "hidden" || value === "none") {
@@ -1070,20 +1095,7 @@ function resolveRadiusSide(theme, parsed, side) {
 }
 var OUTLINE_STYLES = ["solid", "dashed", "dotted", "double"];
 function outlineWidthValue(key) {
-  switch (key) {
-    case "0":
-      return "0px";
-    case "1":
-      return "1px";
-    case "2":
-      return "2px";
-    case "4":
-      return "4px";
-    case "8":
-      return "8px";
-    default:
-      return null;
-  }
+  return /^\d+$/.test(key) ? `${Number(key)}px` : null;
 }
 function outlineValue(theme, parsed) {
   const value = parsed.value;
@@ -1106,48 +1118,6 @@ function outlineOffsetValue(parsed) {
   const w = outlineWidthValue(value);
   return w === null ? null : [decl("outline-offset", w)];
 }
-var RING_BOX_SHADOW = "var(--kb-ring-inset,) 0 0 0 var(--kb-ring-offset-width, 0px) var(--kb-ring-offset-color, #fff), var(--kb-ring-inset,) 0 0 0 calc(var(--kb-ring-width, 0px) + var(--kb-ring-offset-width, 0px)) var(--kb-ring-color, rgba(59,130,246,0.5))";
-function ringWidth(key) {
-  switch (key) {
-    case "0":
-      return "0px";
-    case "1":
-      return "1px";
-    case "2":
-      return "2px";
-    case "4":
-      return "4px";
-    case "8":
-      return "8px";
-    default:
-      return null;
-  }
-}
-function ringValue(theme, parsed) {
-  const value = parsed.value;
-  if (value === null) return null;
-  if (value === "inset") {
-    return [decl("--kb-ring-inset", "inset"), decl("box-shadow", RING_BOX_SHADOW)];
-  }
-  if (!parsed.isArbitrary) {
-    const w = ringWidth(value);
-    if (w !== null) return [decl("--kb-ring-width", w), decl("box-shadow", RING_BOX_SHADOW)];
-  }
-  const color = colorValue(theme, parsed);
-  if (color === null) return null;
-  return [decl("--kb-ring-color", color), decl("box-shadow", RING_BOX_SHADOW)];
-}
-function ringOffsetValue(theme, parsed) {
-  const value = parsed.value;
-  if (value === null) return null;
-  if (!parsed.isArbitrary) {
-    const w = ringWidth(value);
-    if (w !== null) return [decl("--kb-ring-offset-width", w), decl("box-shadow", RING_BOX_SHADOW)];
-  }
-  const color = colorValue(theme, parsed);
-  if (color === null) return null;
-  return [decl("--kb-ring-offset-color", color), decl("box-shadow", RING_BOX_SHADOW)];
-}
 var RADIUS_SIDES = /* @__PURE__ */ new Set(["t", "r", "b", "l", "tl", "tr", "br", "bl"]);
 function resolve3(parsed, theme) {
   switch (parsed.utility) {
@@ -1176,14 +1146,19 @@ function resolve3(parsed, theme) {
       const v = resolveLength(theme, parsed);
       return v === null ? null : [decl("border-radius", v)];
     }
+    // Rings are web-only (a var()-composed CSS box-shadow React Native can't
+    // parse) — same as resolvers/mod.rs's native dispatcher.
     case "ring":
-      if (parsed.value === null) return [decl("--kb-ring-width", "3px"), decl("box-shadow", RING_BOX_SHADOW)];
-      return ringValue(theme, parsed);
     case "ring-offset":
-      return ringOffsetValue(theme, parsed);
+      return null;
+    // Outlines: the same final native style the Rust engine produces once
+    // its var()-based web declarations are filtered out (resolve_style.rs):
+    // bare `outline` is a 1px width, `outline-none` is outline-style: none,
+    // `outline-hidden` keeps only its offset (RN has no `outline` shorthand).
     case "outline":
-      if (parsed.value === null) return [decl("outline-style", "solid")];
-      if (parsed.value === "none") return [decl("outline", "none")];
+      if (parsed.value === null) return [decl("outline-width", "1px")];
+      if (parsed.value === "none") return [decl("outline-style", "none")];
+      if (!parsed.isArbitrary && parsed.value === "hidden") return [decl("outline-offset", "2px")];
       return outlineValue(theme, parsed);
     case "outline-offset":
       return outlineOffsetValue(parsed);
@@ -1229,26 +1204,10 @@ function textSize(key) {
   }
 }
 function lineHeightSize(key) {
-  switch (key) {
-    case "3":
-      return "0.75rem";
-    case "4":
-      return "1rem";
-    case "5":
-      return "1.25rem";
-    case "6":
-      return "1.5rem";
-    case "7":
-      return "1.75rem";
-    case "8":
-      return "2rem";
-    case "9":
-      return "2.25rem";
-    case "10":
-      return "2.5rem";
-    default:
-      return null;
-  }
+  if (key === "px") return "1px";
+  if (key.trim() === "") return null;
+  const n = Number(key);
+  return Number.isFinite(n) && n >= 0 ? `${n * 0.25}rem` : null;
 }
 function textAlign(key) {
   switch (key) {
@@ -1312,8 +1271,14 @@ function fontFamilyValue(theme, key) {
 // src/jsEngine/resolvers/effects.ts
 function nativeShadowValue(key) {
   switch (key) {
-    case "sm":
+    // Tailwind v4.3's scale, like effects.rs: `sm` is the default shadow,
+    // v3's `sm` is `xs`.
+    case "2xs":
+      return { offsetY: 1, radius: 0, opacity: 0.05, elevation: 1 };
+    case "xs":
       return { offsetY: 1, radius: 2, opacity: 0.05, elevation: 1 };
+    case "sm":
+      return { offsetY: 1, radius: 3, opacity: 0.1, elevation: 2 };
     case "DEFAULT":
       return { offsetY: 1, radius: 3, opacity: 0.1, elevation: 2 };
     case "md":
@@ -1363,6 +1328,16 @@ function resolveNative(parsed, theme) {
   switch (parsed.utility) {
     case "transform-none":
       return [decl("transform-op-none", "1")];
+    // Both axes at once (`translate-4`, `-skew-3`); mirrors transform.rs.
+    case "translate": {
+      if (!parsed.isArbitrary && parsed.value === "none") return [decl("transform-op-translate-x", "0"), decl("transform-op-translate-y", "0")];
+      const v = resolveNegatableSize(theme, parsed);
+      return v === null ? null : [decl("transform-op-translate-x", v), decl("transform-op-translate-y", v)];
+    }
+    case "skew": {
+      const deg = angle(parsed);
+      return deg === null ? null : [decl("transform-op-skew-x", deg), decl("transform-op-skew-y", deg)];
+    }
     case "backface-visible":
       return [decl("backface-visibility", "visible")];
     case "backface-hidden":
@@ -1376,6 +1351,7 @@ function resolveNative(parsed, theme) {
       return v === null ? null : [decl("transform-op-translate-y", v)];
     }
     case "scale": {
+      if (!parsed.isArbitrary && parsed.value === "none") return [decl("transform-op-scale-x", "1"), decl("transform-op-scale-y", "1")];
       const n = scaleFactor(parsed);
       return n === null ? null : [decl("transform-op-scale-x", `${n}`), decl("transform-op-scale-y", `${n}`)];
     }
@@ -1388,6 +1364,7 @@ function resolveNative(parsed, theme) {
       return n === null ? null : [decl("transform-op-scale-y", `${n}`)];
     }
     case "rotate": {
+      if (!parsed.isArbitrary && parsed.value === "none") return [decl("transform-op-rotate", "0deg")];
       const deg = angle(parsed);
       return deg === null ? null : [decl("transform-op-rotate", deg)];
     }
@@ -1832,6 +1809,9 @@ function resolveStyleJsWithWarnings(classString, theme, colorScheme, pressed, wi
       if (d.property.startsWith("__")) {
         continue;
       }
+      if (d.property.startsWith("--") || d.value.includes("var(") || d.property === "outline" || d.property === "object-position" || d.property === "container-type") {
+        continue;
+      }
       if (d.property === "shadow-offset-x" || d.property === "shadow-offset-y") {
         if (spec < (keySpecificity.get("shadowOffset") ?? 0)) continue;
         const n = Number(d.value);