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

package/README.md

@@ -30,9 +30,14 @@ Rebuild the Android app afterward so Gradle picks up the native module.
 Works out of the box — no prebuild, no dev client, nothing to configure.
 Expo Go can't load third-party native code, so this falls back to a pure-JS
 engine automatically. Covers layout, spacing, border/radius, plain colors,
-font-weight, text-transform/decoration, line-height, letter-spacing, and
-shadows. Doesn't cover grid, transforms, filters, gradients, or DOM-only
-typography — same scope native itself excludes.
+font-weight, text-transform/decoration, line-height, letter-spacing,
+shadows, and transforms (`translate-x`/`translate-y`, `scale`/`scale-x`/
+`scale-y`, `rotate`/`rotate-x`/`rotate-y`/`rotate-z`, `skew-x`/`skew-y`,
+`transform-none`, `backface-visible`/`backface-hidden`). Doesn't cover grid,
+filters, gradients, DOM-only typography, or the rest of the transform family
+(`translate-z`/`scale-z`, `perspective`/`perspective-origin`/`origin`,
+`transform-gpu`/`transform-cpu` — no RN equivalent for any of these) — same
+scope native itself excludes.
 
 ### Expo (dev client / prebuild)
 

package/dist/index.d.ts

@@ -7,7 +7,7 @@ import 'react';
 type StyleValue = string | number | {
     width: number;
     height: number;
-};
+} | Array<Record<string, string | number>>;
 interface StyleObject {
     [key: string]: StyleValue;
 }

package/dist/index.js

@@ -177,12 +177,19 @@ var VALUE_PREFIXES = [
   "justify-self-",
   "scale-x-",
   "scale-y-",
+  "scale-z-",
   "scale-",
+  "rotate-x-",
+  "rotate-y-",
+  "rotate-z-",
   "rotate-",
   "translate-x-",
   "translate-y-",
+  "translate-z-",
   "skew-x-",
   "skew-y-",
+  "perspective-origin-",
+  "perspective-",
   "origin-",
   "blur-",
   "brightness-",
@@ -1202,6 +1209,77 @@ function nativeShadowDeclarations(parsed) {
   ];
 }
 
+// src/jsEngine/resolvers/transform.ts
+function scaleFactor(parsed) {
+  if (parsed.value === null) return null;
+  const n = Number(parsed.value);
+  if (!Number.isFinite(n)) return null;
+  return parsed.isArbitrary ? n : n / 100;
+}
+function angle(parsed) {
+  if (parsed.value === null) return null;
+  if (parsed.isArbitrary) return parsed.value;
+  const n = Number(parsed.value);
+  if (!Number.isFinite(n)) return null;
+  return `${parsed.negative ? -n : n}deg`;
+}
+function resolveNative(parsed, theme) {
+  switch (parsed.utility) {
+    case "transform-none":
+      return [decl("transform-op-none", "1")];
+    case "backface-visible":
+      return [decl("backface-visibility", "visible")];
+    case "backface-hidden":
+      return [decl("backface-visibility", "hidden")];
+    case "translate-x": {
+      const v = resolveNegatableLength(theme, parsed);
+      return v === null ? null : [decl("transform-op-translate-x", v)];
+    }
+    case "translate-y": {
+      const v = resolveNegatableLength(theme, parsed);
+      return v === null ? null : [decl("transform-op-translate-y", v)];
+    }
+    case "scale": {
+      const n = scaleFactor(parsed);
+      return n === null ? null : [decl("transform-op-scale-x", `${n}`), decl("transform-op-scale-y", `${n}`)];
+    }
+    case "scale-x": {
+      const n = scaleFactor(parsed);
+      return n === null ? null : [decl("transform-op-scale-x", `${n}`)];
+    }
+    case "scale-y": {
+      const n = scaleFactor(parsed);
+      return n === null ? null : [decl("transform-op-scale-y", `${n}`)];
+    }
+    case "rotate": {
+      const deg = angle(parsed);
+      return deg === null ? null : [decl("transform-op-rotate", deg)];
+    }
+    case "rotate-x": {
+      const deg = angle(parsed);
+      return deg === null ? null : [decl("transform-op-rotate-x", deg)];
+    }
+    case "rotate-y": {
+      const deg = angle(parsed);
+      return deg === null ? null : [decl("transform-op-rotate-y", deg)];
+    }
+    case "rotate-z": {
+      const deg = angle(parsed);
+      return deg === null ? null : [decl("transform-op-rotate-z", deg)];
+    }
+    case "skew-x": {
+      const deg = angle(parsed);
+      return deg === null ? null : [decl("transform-op-skew-x", deg)];
+    }
+    case "skew-y": {
+      const deg = angle(parsed);
+      return deg === null ? null : [decl("transform-op-skew-y", deg)];
+    }
+    default:
+      return null;
+  }
+}
+
 // src/jsEngine/resolveUtilityNative.ts
 function firstFontName(stack) {
   const first = stack.split(",")[0] ?? stack;
@@ -1283,7 +1361,7 @@ function resolveOpacityNative(parsed) {
   return v === null ? null : [decl("opacity", v)];
 }
 function resolveUtilityNative(parsed, theme) {
-  return resolveFlex(parsed, false) ?? resolve(parsed, theme) ?? resolve2(parsed, theme) ?? resolve3(parsed, theme) ?? resolveColorNative(parsed, theme) ?? resolveLeadingTrackingNative(parsed) ?? resolveTypographyNative(parsed, theme) ?? resolveOpacityNative(parsed) ?? nativeShadowDeclarations(parsed);
+  return resolveFlex(parsed, false) ?? resolve(parsed, theme) ?? resolve2(parsed, theme) ?? resolve3(parsed, theme) ?? resolveColorNative(parsed, theme) ?? resolveLeadingTrackingNative(parsed) ?? resolveTypographyNative(parsed, theme) ?? resolveOpacityNative(parsed) ?? nativeShadowDeclarations(parsed) ?? resolveNative(parsed, theme);
 }
 
 // src/jsEngine/calc.ts
@@ -1501,8 +1579,32 @@ var NUMERIC_LENGTH_PROPS = /* @__PURE__ */ new Set([
   "border-bottom-right-radius",
   "border-bottom-left-radius",
   "outline-width",
-  "outline-offset"
+  "outline-offset",
+  // The transform ops whose RN value is a plain JS number — translate takes
+  // a length (px/percentage, same as top/left/etc. above) and scale takes a
+  // bare decimal factor (parsed by the same "raw value" fallback branch
+  // below). transform-op-rotate*/transform-op-skew* stay OUT of this set on
+  // purpose, since RN wants those as literal "45deg"-shaped strings, not
+  // numbers. See the transform-ops accumulator below for how these markers
+  // get collected into the final array.
+  "transform-op-translate-x",
+  "transform-op-translate-y",
+  "transform-op-scale-x",
+  "transform-op-scale-y"
 ]);
+var TRANSFORM_OP_KEYS = /* @__PURE__ */ new Map([
+  ["transform-op-translate-x", "translateX"],
+  ["transform-op-translate-y", "translateY"],
+  ["transform-op-rotate", "rotate"],
+  ["transform-op-rotate-x", "rotateX"],
+  ["transform-op-rotate-y", "rotateY"],
+  ["transform-op-rotate-z", "rotateZ"],
+  ["transform-op-skew-x", "skewX"],
+  ["transform-op-skew-y", "skewY"],
+  ["transform-op-scale-x", "scaleX"],
+  ["transform-op-scale-y", "scaleY"]
+]);
+var TRANSFORM_OP_ORDER = ["translateX", "translateY", "rotate", "rotateX", "rotateY", "rotateZ", "skewX", "skewY", "scaleX", "scaleY"];
 function isPlainPercentage(value) {
   if (!value.endsWith("%")) return false;
   let digits = value.slice(0, -1);
@@ -1539,6 +1641,7 @@ function resolveStyleJsWithWarnings(classString, theme, colorScheme, pressed, wi
   const style = {};
   const warnings = [];
   let shadowOffset = null;
+  const transformOps = /* @__PURE__ */ new Map();
   for (const token of classString.split(/\s+/).filter(Boolean)) {
     const parsed = parseClass(token);
     const allModifiersHold = parsed.modifiers.every(
@@ -1558,6 +1661,17 @@ function resolveStyleJsWithWarnings(classString, theme, colorScheme, pressed, wi
         shadowOffset[d.property === "shadow-offset-x" ? "width" : "height"] = n;
         continue;
       }
+      if (d.property === "transform-op-none") {
+        transformOps.clear();
+        continue;
+      }
+      const opKey = TRANSFORM_OP_KEYS.get(d.property);
+      if (opKey !== void 0) {
+        const { value: value2, warning: warning2 } = rnStyleValue(d.property, d.value);
+        if (warning2 !== null) warnings.push(warning2);
+        if (value2 !== null) transformOps.set(opKey, value2);
+        continue;
+      }
       const { value, warning } = rnStyleValue(d.property, d.value);
       if (warning !== null) warnings.push(warning);
       if (value !== null) style[kebabToCamel(d.property)] = value;
@@ -1566,6 +1680,11 @@ function resolveStyleJsWithWarnings(classString, theme, colorScheme, pressed, wi
   if (shadowOffset !== null) {
     style.shadowOffset = { width: shadowOffset.width ?? 0, height: shadowOffset.height ?? 0 };
   }
+  if (transformOps.size > 0) {
+    style.transform = TRANSFORM_OP_ORDER.filter((key) => transformOps.has(key)).map((key) => ({
+      [key]: transformOps.get(key)
+    }));
+  }
   return { style, warnings };
 }
 

package/dist/jsx-dev-runtime.js

@@ -375,12 +375,19 @@ var VALUE_PREFIXES = [
   "justify-self-",
   "scale-x-",
   "scale-y-",
+  "scale-z-",
   "scale-",
+  "rotate-x-",
+  "rotate-y-",
+  "rotate-z-",
   "rotate-",
   "translate-x-",
   "translate-y-",
+  "translate-z-",
   "skew-x-",
   "skew-y-",
+  "perspective-origin-",
+  "perspective-",
   "origin-",
   "blur-",
   "brightness-",
@@ -581,11 +588,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);
@@ -1583,6 +1597,77 @@ function nativeShadowDeclarations(parsed) {
   ];
 }
 
+// src/jsEngine/resolvers/transform.ts
+function scaleFactor(parsed) {
+  if (parsed.value === null) return null;
+  const n = Number(parsed.value);
+  if (!Number.isFinite(n)) return null;
+  return parsed.isArbitrary ? n : n / 100;
+}
+function angle(parsed) {
+  if (parsed.value === null) return null;
+  if (parsed.isArbitrary) return parsed.value;
+  const n = Number(parsed.value);
+  if (!Number.isFinite(n)) return null;
+  return `${parsed.negative ? -n : n}deg`;
+}
+function resolveNative(parsed, theme) {
+  switch (parsed.utility) {
+    case "transform-none":
+      return [decl("transform-op-none", "1")];
+    case "backface-visible":
+      return [decl("backface-visibility", "visible")];
+    case "backface-hidden":
+      return [decl("backface-visibility", "hidden")];
+    case "translate-x": {
+      const v = resolveNegatableLength(theme, parsed);
+      return v === null ? null : [decl("transform-op-translate-x", v)];
+    }
+    case "translate-y": {
+      const v = resolveNegatableLength(theme, parsed);
+      return v === null ? null : [decl("transform-op-translate-y", v)];
+    }
+    case "scale": {
+      const n = scaleFactor(parsed);
+      return n === null ? null : [decl("transform-op-scale-x", `${n}`), decl("transform-op-scale-y", `${n}`)];
+    }
+    case "scale-x": {
+      const n = scaleFactor(parsed);
+      return n === null ? null : [decl("transform-op-scale-x", `${n}`)];
+    }
+    case "scale-y": {
+      const n = scaleFactor(parsed);
+      return n === null ? null : [decl("transform-op-scale-y", `${n}`)];
+    }
+    case "rotate": {
+      const deg = angle(parsed);
+      return deg === null ? null : [decl("transform-op-rotate", deg)];
+    }
+    case "rotate-x": {
+      const deg = angle(parsed);
+      return deg === null ? null : [decl("transform-op-rotate-x", deg)];
+    }
+    case "rotate-y": {
+      const deg = angle(parsed);
+      return deg === null ? null : [decl("transform-op-rotate-y", deg)];
+    }
+    case "rotate-z": {
+      const deg = angle(parsed);
+      return deg === null ? null : [decl("transform-op-rotate-z", deg)];
+    }
+    case "skew-x": {
+      const deg = angle(parsed);
+      return deg === null ? null : [decl("transform-op-skew-x", deg)];
+    }
+    case "skew-y": {
+      const deg = angle(parsed);
+      return deg === null ? null : [decl("transform-op-skew-y", deg)];
+    }
+    default:
+      return null;
+  }
+}
+
 // src/jsEngine/resolveUtilityNative.ts
 function firstFontName(stack) {
   const first = stack.split(",")[0] ?? stack;
@@ -1664,7 +1749,7 @@ function resolveOpacityNative(parsed) {
   return v === null ? null : [decl("opacity", v)];
 }
 function resolveUtilityNative(parsed, theme) {
-  return resolveFlex(parsed, false) ?? resolve(parsed, theme) ?? resolve2(parsed, theme) ?? resolve3(parsed, theme) ?? resolveColorNative(parsed, theme) ?? resolveLeadingTrackingNative(parsed) ?? resolveTypographyNative(parsed, theme) ?? resolveOpacityNative(parsed) ?? nativeShadowDeclarations(parsed);
+  return resolveFlex(parsed, false) ?? resolve(parsed, theme) ?? resolve2(parsed, theme) ?? resolve3(parsed, theme) ?? resolveColorNative(parsed, theme) ?? resolveLeadingTrackingNative(parsed) ?? resolveTypographyNative(parsed, theme) ?? resolveOpacityNative(parsed) ?? nativeShadowDeclarations(parsed) ?? resolveNative(parsed, theme);
 }
 
 // src/jsEngine/resolveStyle.ts
@@ -1735,8 +1820,32 @@ var NUMERIC_LENGTH_PROPS = /* @__PURE__ */ new Set([
   "border-bottom-right-radius",
   "border-bottom-left-radius",
   "outline-width",
-  "outline-offset"
+  "outline-offset",
+  // The transform ops whose RN value is a plain JS number — translate takes
+  // a length (px/percentage, same as top/left/etc. above) and scale takes a
+  // bare decimal factor (parsed by the same "raw value" fallback branch
+  // below). transform-op-rotate*/transform-op-skew* stay OUT of this set on
+  // purpose, since RN wants those as literal "45deg"-shaped strings, not
+  // numbers. See the transform-ops accumulator below for how these markers
+  // get collected into the final array.
+  "transform-op-translate-x",
+  "transform-op-translate-y",
+  "transform-op-scale-x",
+  "transform-op-scale-y"
 ]);
+var TRANSFORM_OP_KEYS = /* @__PURE__ */ new Map([
+  ["transform-op-translate-x", "translateX"],
+  ["transform-op-translate-y", "translateY"],
+  ["transform-op-rotate", "rotate"],
+  ["transform-op-rotate-x", "rotateX"],
+  ["transform-op-rotate-y", "rotateY"],
+  ["transform-op-rotate-z", "rotateZ"],
+  ["transform-op-skew-x", "skewX"],
+  ["transform-op-skew-y", "skewY"],
+  ["transform-op-scale-x", "scaleX"],
+  ["transform-op-scale-y", "scaleY"]
+]);
+var TRANSFORM_OP_ORDER = ["translateX", "translateY", "rotate", "rotateX", "rotateY", "rotateZ", "skewX", "skewY", "scaleX", "scaleY"];
 function isPlainPercentage(value) {
   if (!value.endsWith("%")) return false;
   let digits = value.slice(0, -1);
@@ -1773,6 +1882,7 @@ function resolveStyleJsWithWarnings(classString, theme, colorScheme, pressed, wi
   const style = {};
   const warnings = [];
   let shadowOffset = null;
+  const transformOps = /* @__PURE__ */ new Map();
   for (const token of classString.split(/\s+/).filter(Boolean)) {
     const parsed = parseClass(token);
     const allModifiersHold = parsed.modifiers.every(
@@ -1792,6 +1902,17 @@ function resolveStyleJsWithWarnings(classString, theme, colorScheme, pressed, wi
         shadowOffset[d.property === "shadow-offset-x" ? "width" : "height"] = n;
         continue;
       }
+      if (d.property === "transform-op-none") {
+        transformOps.clear();
+        continue;
+      }
+      const opKey = TRANSFORM_OP_KEYS.get(d.property);
+      if (opKey !== void 0) {
+        const { value: value2, warning: warning2 } = rnStyleValue(d.property, d.value);
+        if (warning2 !== null) warnings.push(warning2);
+        if (value2 !== null) transformOps.set(opKey, value2);
+        continue;
+      }
       const { value, warning } = rnStyleValue(d.property, d.value);
       if (warning !== null) warnings.push(warning);
       if (value !== null) style[kebabToCamel(d.property)] = value;
@@ -1800,6 +1921,11 @@ function resolveStyleJsWithWarnings(classString, theme, colorScheme, pressed, wi
   if (shadowOffset !== null) {
     style.shadowOffset = { width: shadowOffset.width ?? 0, height: shadowOffset.height ?? 0 };
   }
+  if (transformOps.size > 0) {
+    style.transform = TRANSFORM_OP_ORDER.filter((key) => transformOps.has(key)).map((key) => ({
+      [key]: transformOps.get(key)
+    }));
+  }
   return { style, warnings };
 }
 

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

@@ -8,7 +8,7 @@ import "./chunk-AG7ZQ2K4.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

@@ -376,12 +376,19 @@ var VALUE_PREFIXES = [
   "justify-self-",
   "scale-x-",
   "scale-y-",
+  "scale-z-",
   "scale-",
+  "rotate-x-",
+  "rotate-y-",
+  "rotate-z-",
   "rotate-",
   "translate-x-",
   "translate-y-",
+  "translate-z-",
   "skew-x-",
   "skew-y-",
+  "perspective-origin-",
+  "perspective-",
   "origin-",
   "blur-",
   "brightness-",
@@ -582,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);
@@ -1574,6 +1588,77 @@ function nativeShadowDeclarations(parsed) {
   ];
 }
 
+// src/jsEngine/resolvers/transform.ts
+function scaleFactor(parsed) {
+  if (parsed.value === null) return null;
+  const n = Number(parsed.value);
+  if (!Number.isFinite(n)) return null;
+  return parsed.isArbitrary ? n : n / 100;
+}
+function angle(parsed) {
+  if (parsed.value === null) return null;
+  if (parsed.isArbitrary) return parsed.value;
+  const n = Number(parsed.value);
+  if (!Number.isFinite(n)) return null;
+  return `${parsed.negative ? -n : n}deg`;
+}
+function resolveNative(parsed, theme) {
+  switch (parsed.utility) {
+    case "transform-none":
+      return [decl("transform-op-none", "1")];
+    case "backface-visible":
+      return [decl("backface-visibility", "visible")];
+    case "backface-hidden":
+      return [decl("backface-visibility", "hidden")];
+    case "translate-x": {
+      const v = resolveNegatableLength(theme, parsed);
+      return v === null ? null : [decl("transform-op-translate-x", v)];
+    }
+    case "translate-y": {
+      const v = resolveNegatableLength(theme, parsed);
+      return v === null ? null : [decl("transform-op-translate-y", v)];
+    }
+    case "scale": {
+      const n = scaleFactor(parsed);
+      return n === null ? null : [decl("transform-op-scale-x", `${n}`), decl("transform-op-scale-y", `${n}`)];
+    }
+    case "scale-x": {
+      const n = scaleFactor(parsed);
+      return n === null ? null : [decl("transform-op-scale-x", `${n}`)];
+    }
+    case "scale-y": {
+      const n = scaleFactor(parsed);
+      return n === null ? null : [decl("transform-op-scale-y", `${n}`)];
+    }
+    case "rotate": {
+      const deg = angle(parsed);
+      return deg === null ? null : [decl("transform-op-rotate", deg)];
+    }
+    case "rotate-x": {
+      const deg = angle(parsed);
+      return deg === null ? null : [decl("transform-op-rotate-x", deg)];
+    }
+    case "rotate-y": {
+      const deg = angle(parsed);
+      return deg === null ? null : [decl("transform-op-rotate-y", deg)];
+    }
+    case "rotate-z": {
+      const deg = angle(parsed);
+      return deg === null ? null : [decl("transform-op-rotate-z", deg)];
+    }
+    case "skew-x": {
+      const deg = angle(parsed);
+      return deg === null ? null : [decl("transform-op-skew-x", deg)];
+    }
+    case "skew-y": {
+      const deg = angle(parsed);
+      return deg === null ? null : [decl("transform-op-skew-y", deg)];
+    }
+    default:
+      return null;
+  }
+}
+
 // src/jsEngine/resolveUtilityNative.ts
 function firstFontName(stack) {
   const first = stack.split(",")[0] ?? stack;
@@ -1655,7 +1740,7 @@ function resolveOpacityNative(parsed) {
   return v === null ? null : [decl("opacity", v)];
 }
 function resolveUtilityNative(parsed, theme) {
-  return resolveFlex(parsed, false) ?? resolve(parsed, theme) ?? resolve2(parsed, theme) ?? resolve3(parsed, theme) ?? resolveColorNative(parsed, theme) ?? resolveLeadingTrackingNative(parsed) ?? resolveTypographyNative(parsed, theme) ?? resolveOpacityNative(parsed) ?? nativeShadowDeclarations(parsed);
+  return resolveFlex(parsed, false) ?? resolve(parsed, theme) ?? resolve2(parsed, theme) ?? resolve3(parsed, theme) ?? resolveColorNative(parsed, theme) ?? resolveLeadingTrackingNative(parsed) ?? resolveTypographyNative(parsed, theme) ?? resolveOpacityNative(parsed) ?? nativeShadowDeclarations(parsed) ?? resolveNative(parsed, theme);
 }
 
 // src/jsEngine/resolveStyle.ts
@@ -1726,8 +1811,32 @@ var NUMERIC_LENGTH_PROPS = /* @__PURE__ */ new Set([
   "border-bottom-right-radius",
   "border-bottom-left-radius",
   "outline-width",
-  "outline-offset"
+  "outline-offset",
+  // The transform ops whose RN value is a plain JS number — translate takes
+  // a length (px/percentage, same as top/left/etc. above) and scale takes a
+  // bare decimal factor (parsed by the same "raw value" fallback branch
+  // below). transform-op-rotate*/transform-op-skew* stay OUT of this set on
+  // purpose, since RN wants those as literal "45deg"-shaped strings, not
+  // numbers. See the transform-ops accumulator below for how these markers
+  // get collected into the final array.
+  "transform-op-translate-x",
+  "transform-op-translate-y",
+  "transform-op-scale-x",
+  "transform-op-scale-y"
 ]);
+var TRANSFORM_OP_KEYS = /* @__PURE__ */ new Map([
+  ["transform-op-translate-x", "translateX"],
+  ["transform-op-translate-y", "translateY"],
+  ["transform-op-rotate", "rotate"],
+  ["transform-op-rotate-x", "rotateX"],
+  ["transform-op-rotate-y", "rotateY"],
+  ["transform-op-rotate-z", "rotateZ"],
+  ["transform-op-skew-x", "skewX"],
+  ["transform-op-skew-y", "skewY"],
+  ["transform-op-scale-x", "scaleX"],
+  ["transform-op-scale-y", "scaleY"]
+]);
+var TRANSFORM_OP_ORDER = ["translateX", "translateY", "rotate", "rotateX", "rotateY", "rotateZ", "skewX", "skewY", "scaleX", "scaleY"];
 function isPlainPercentage(value) {
   if (!value.endsWith("%")) return false;
   let digits = value.slice(0, -1);
@@ -1764,6 +1873,7 @@ function resolveStyleJsWithWarnings(classString, theme, colorScheme, pressed, wi
   const style = {};
   const warnings = [];
   let shadowOffset = null;
+  const transformOps = /* @__PURE__ */ new Map();
   for (const token of classString.split(/\s+/).filter(Boolean)) {
     const parsed = parseClass(token);
     const allModifiersHold = parsed.modifiers.every(
@@ -1783,6 +1893,17 @@ function resolveStyleJsWithWarnings(classString, theme, colorScheme, pressed, wi
         shadowOffset[d.property === "shadow-offset-x" ? "width" : "height"] = n;
         continue;
       }
+      if (d.property === "transform-op-none") {
+        transformOps.clear();
+        continue;
+      }
+      const opKey = TRANSFORM_OP_KEYS.get(d.property);
+      if (opKey !== void 0) {
+        const { value: value2, warning: warning2 } = rnStyleValue(d.property, d.value);
+        if (warning2 !== null) warnings.push(warning2);
+        if (value2 !== null) transformOps.set(opKey, value2);
+        continue;
+      }
       const { value, warning } = rnStyleValue(d.property, d.value);
       if (warning !== null) warnings.push(warning);
       if (value !== null) style[kebabToCamel(d.property)] = value;
@@ -1791,6 +1912,11 @@ function resolveStyleJsWithWarnings(classString, theme, colorScheme, pressed, wi
   if (shadowOffset !== null) {
     style.shadowOffset = { width: shadowOffset.width ?? 0, height: shadowOffset.height ?? 0 };
   }
+  if (transformOps.size > 0) {
+    style.transform = TRANSFORM_OP_ORDER.filter((key) => transformOps.has(key)).map((key) => ({
+      [key]: transformOps.get(key)
+    }));
+  }
   return { style, warnings };
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react-native",
-  "version": "1.0.0-beta.22",
+  "version": "1.0.0-beta.24",
   "description": "Kbach's utility-class styling engine for React Native — the same class names as @kbach/react, resolved to a StyleSheet-ready style object via a Kotlin/JNI TurboModule (native), the same WASM engine @kbach/react uses (Expo Web / react-native-web), or a pure-JS fallback engine (Expo Go). Ships its own native Android module — one npm install, no separate native package. Beta. Native is Android-only (no iOS bridge yet); works with the React Native CLI, an Expo dev client, AND Expo Go (a reduced-coverage pure-JS fallback, since Expo Go can't load any custom native module).",
   "keywords": [
     "css",