@kbach/react-native 1.0.0-beta.19 → 1.0.0-beta.20

package/README.md

@@ -184,14 +184,36 @@ constant `px`/`rem` length (or a bare number). This works because native has
 no CSS engine to evaluate a real `calc()` string at paint time, so the only
 way to support it at all is to compute the answer ourselves.
 
-A **percentage- or viewport-relative** expression (`calc(50%-0.5rem)`,
-`calc(10vw+8px)`) can't be reduced this way — it genuinely needs the
-parent's actual layout size, which doesn't exist until paint time on
-native. These already work fine on web (real CSS); on native the
-declaration is dropped and a `console.warn` explains why (dev builds only),
-rather than silently shipping an invalid value into the style object. Use a
-fraction utility (`w-1/2`) for relative sizing on native instead — see
-`resolvers/spacing.rs`'s `fraction_percent` — or resolve the value in JS.
+A **viewport-relative** expression (`calc(10vw+8px)`) can't be reduced this
+way — no such unit exists on native at all. It already works fine on web
+(real CSS); on native the declaration is dropped and a `console.warn`
+explains why (dev builds only).
+
+**Percentage-relative width/height** (`calc(100%-3rem)`, `calc(50%+16px)`)
+IS supported, differently: since native has no way to know "100% of what"
+ahead of time, this measures the element's own real layout instead —
+
+```tsx
+<View className="w-[calc(100%_-_3rem)]" />
+```
+
+Renders once at a plain `100%` (a real RN percentage, resolved correctly by
+RN's own layout engine against the parent) purely to trigger a layout
+event, then immediately corrects to the actual computed number once
+measured — a genuine one-frame measure-then-snap, not instant math like the
+constant-only case above, and it keeps re-measuring on every layout (screen
+rotation, parent resize, ...) rather than freezing after the first value.
+Scoped to exactly one percentage term plus one constant term on `width`/
+`height` only — `calc(50%-50%)`, other properties, or anything with `*`/`/`
+falls through to the same drop-and-warn behavior as before.
+
+**Arbitrary values can't contain literal spaces** — this is a pre-existing
+rule (real Tailwind has the same one), not specific to `calc()`: a space
+inside `[...]` is indistinguishable from the whitespace that separates
+class tokens in the first place, so `w-[calc(100% - 3rem)]` silently splits
+into three broken tokens before `calc()` is ever even recognized. Write
+`w-[calc(100%_-_3rem)]` (underscores) instead — this is exactly what the
+unknown-class warning below is for: it'll tell you when this happens.
 
 ## Unknown-class warnings (typo detection)
 

package/dist/jsx-dev-runtime.js

@@ -32,6 +32,182 @@ var import_react_native = require("react-native");
 var import_darkModeStore = require("./darkModeStore");
 var import_dynamicTokens = require("./dynamicTokens");
 var import_theme = require("./theme");
+
+// src/jsEngine/calc.ts
+function reduceConstantMath(raw) {
+  const trimmed = raw.trim();
+  const calc = stripCall(trimmed, "calc");
+  if (calc !== null) {
+    return new Evaluator(calc).parseExprToEnd();
+  }
+  const clamp = stripCall(trimmed, "clamp");
+  if (clamp !== null) {
+    const args = splitTopLevelCommas(clamp);
+    if (args.length !== 3) return null;
+    const [min2, preferred, max2] = args.map((a) => new Evaluator(a).parseExprToEnd());
+    if (min2 === null || preferred === null || max2 === null) return null;
+    return Math.max(min2, Math.min(preferred, max2));
+  }
+  const min = stripCall(trimmed, "min");
+  if (min !== null) {
+    const values = splitTopLevelCommas(min).map((a) => new Evaluator(a).parseExprToEnd());
+    return values.some((v) => v === null) ? null : Math.min(...values);
+  }
+  const max = stripCall(trimmed, "max");
+  if (max !== null) {
+    const values = splitTopLevelCommas(max).map((a) => new Evaluator(a).parseExprToEnd());
+    return values.some((v) => v === null) ? null : Math.max(...values);
+  }
+  return null;
+}
+function stripCall(raw, name) {
+  if (!raw.startsWith(name)) return null;
+  const afterName = raw.slice(name.length).trimStart();
+  if (!afterName.startsWith("(") || !afterName.endsWith(")")) return null;
+  return afterName.slice(1, -1);
+}
+function splitTopLevelCommas(s) {
+  const parts = [];
+  let depth = 0;
+  let start = 0;
+  for (let i = 0; i < s.length; i++) {
+    const ch = s[i];
+    if (ch === "(") depth++;
+    else if (ch === ")") depth--;
+    else if (ch === "," && depth === 0) {
+      parts.push(s.slice(start, i).trim());
+      start = i + 1;
+    }
+  }
+  parts.push(s.slice(start).trim());
+  return parts;
+}
+var Evaluator = class {
+  constructor(s) {
+    this.pos = 0;
+    this.s = s;
+  }
+  parseExprToEnd() {
+    const value = this.expr();
+    if (value === null) return null;
+    this.skipWs();
+    return this.pos === this.s.length ? value : null;
+  }
+  skipWs() {
+    while (this.pos < this.s.length && /\s/.test(this.s[this.pos])) this.pos++;
+  }
+  peek() {
+    this.skipWs();
+    return this.s[this.pos];
+  }
+  expr() {
+    let value = this.term();
+    if (value === null) return null;
+    for (; ; ) {
+      const ch = this.peek();
+      if (ch === "+") {
+        this.pos++;
+        const rhs = this.term();
+        if (rhs === null) return null;
+        value += rhs;
+      } else if (ch === "-") {
+        this.pos++;
+        const rhs = this.term();
+        if (rhs === null) return null;
+        value -= rhs;
+      } else {
+        return value;
+      }
+    }
+  }
+  term() {
+    let value = this.factor();
+    if (value === null) return null;
+    for (; ; ) {
+      const ch = this.peek();
+      if (ch === "*") {
+        this.pos++;
+        const rhs = this.factor();
+        if (rhs === null) return null;
+        value *= rhs;
+      } else if (ch === "/") {
+        this.pos++;
+        const divisor = this.factor();
+        if (divisor === null || divisor === 0) return null;
+        value /= divisor;
+      } else {
+        return value;
+      }
+    }
+  }
+  factor() {
+    const ch = this.peek();
+    if (ch === void 0) return null;
+    if (ch === "(") {
+      this.pos++;
+      const value = this.expr();
+      if (value === null || this.peek() !== ")") return null;
+      this.pos++;
+      return value;
+    }
+    if (ch === "-") {
+      this.pos++;
+      const value = this.factor();
+      return value === null ? null : -value;
+    }
+    return this.numberWithUnit();
+  }
+  numberWithUnit() {
+    this.skipWs();
+    const start = this.pos;
+    while (this.pos < this.s.length && (/[0-9]/.test(this.s[this.pos]) || this.s[this.pos] === ".")) this.pos++;
+    if (this.pos === start) return null;
+    const n = Number(this.s.slice(start, this.pos));
+    if (!Number.isFinite(n)) return null;
+    const unitStart = this.pos;
+    while (this.pos < this.s.length && /[a-zA-Z]/.test(this.s[this.pos])) this.pos++;
+    const unit = this.s.slice(unitStart, this.pos);
+    switch (unit) {
+      case "":
+        return n;
+      case "px":
+        return n;
+      case "rem":
+        return n * 16;
+      default:
+        return null;
+    }
+  }
+};
+
+// src/layoutCalc.ts
+var PERCENT_CALC_TOKEN_RE = /^(w|h)-\[calc\(([^)]+)\)\]$/;
+function parsePercentRelativeCalc(token) {
+  const m = PERCENT_CALC_TOKEN_RE.exec(token);
+  if (!m) return null;
+  const property = m[1] === "w" ? "width" : "height";
+  const inner = m[2].replace(/_/g, " ").trim();
+  let mm = /^(-?[\d.]+)%\s*([+-])\s*(.+)$/.exec(inner);
+  if (mm) {
+    const percentCoefficient = Number(mm[1]);
+    const magnitude = reduceConstantMath(`calc(${mm[3].trim()})`);
+    if (!Number.isFinite(percentCoefficient) || magnitude === null) return null;
+    return { property, percentCoefficient, constantPx: mm[2] === "+" ? magnitude : -magnitude };
+  }
+  mm = /^(.+?)\s*([+-])\s*(-?[\d.]+)%$/.exec(inner);
+  if (mm) {
+    const constantPx = reduceConstantMath(`calc(${mm[1].trim()})`);
+    const percentMagnitude = Number(mm[3]);
+    if (constantPx === null || !Number.isFinite(percentMagnitude)) return null;
+    return { property, percentCoefficient: mm[2] === "+" ? percentMagnitude : -percentMagnitude, constantPx };
+  }
+  return null;
+}
+function resolvePercentRelativeCalc(basisPx, calc) {
+  return basisPx * calc.percentCoefficient / 100 + calc.constantPx;
+}
+
+// src/jsxRuntimeCore.ts
 var DYNAMIC_TOKEN_MATCH_RE = /var\(--([a-zA-Z0-9-]+)\)/g;
 function substituteDynamicTokens(classStrRaw) {
   if (!classStrRaw.includes("var(--")) return classStrRaw;
@@ -40,11 +216,27 @@ function substituteDynamicTokens(classStrRaw) {
     return value ?? whole;
   });
 }
+var PERCENT_RELATIVE_CALC_HINT_RE = /[wh]-\[calc\([^)]*%[^)]*\)\]/;
+function extractPercentRelativeCalcs(classStrRaw) {
+  const found = [];
+  for (const token of classStrRaw.split(/\s+/)) {
+    const parsed = parsePercentRelativeCalc(token);
+    if (parsed) found.push(parsed);
+  }
+  return found;
+}
+function stripPercentRelativeCalcTokens(classStrRaw) {
+  return classStrRaw.split(/\s+/).filter((token) => token && parsePercentRelativeCalc(token) === null).join(" ");
+}
 function makeElement(isStaticChildren, type, props, key) {
   return (isStaticChildren ? import_jsx_runtime.jsxs : import_jsx_runtime.jsx)(type, props, key);
 }
-function resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, pressed) {
-  const resolved = resolveStyle2(substituteDynamicTokens(classStrRaw), pressed);
+function resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, pressed, layoutOverrides) {
+  const cleaned = stripPercentRelativeCalcTokens(substituteDynamicTokens(classStrRaw));
+  const resolved = resolveStyle2(cleaned, pressed);
+  if (layoutOverrides) {
+    Object.assign(resolved, layoutOverrides);
+  }
   if (userStyle === void 0) {
     return resolved;
   }
@@ -75,6 +267,14 @@ function dynamicTokenKeySuffix(classStrRaw) {
   const values = matches.map((m) => (0, import_dynamicTokens.getDynamicToken)(m.slice("var(--".length, -1)) ?? "");
   return `:kb-dt-${values.join("|")}`;
 }
+function percentCalcKeySuffix(percentCalcs, measuredBasis) {
+  if (percentCalcs.length === 0) return "";
+  const values = percentCalcs.map((calc) => {
+    const basis = measuredBasis?.[calc.property];
+    return basis === void 0 ? "pending" : resolvePercentRelativeCalc(basis, calc);
+  });
+  return `:kb-pc-${values.join("|")}`;
+}
 function ReactiveElement({
   hostType,
   hostRest,
@@ -87,10 +287,33 @@ function ReactiveElement({
   (0, import_react.useSyncExternalStore)(import_darkModeStore.subscribeGlobalDarkMode, import_darkModeStore.getGlobalDarkMode);
   (0, import_react.useSyncExternalStore)(import_dynamicTokens.subscribeDynamicTokens, import_dynamicTokens.getDynamicTokensVersion);
   const { width } = (0, import_react_native.useWindowDimensions)();
-  const finalStyle = hostType === import_react_native.Pressable ? (state) => resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, state.pressed) : resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, false);
-  const suffix = darkModeKeySuffix(classStrRaw) + breakpointKeySuffix(classStrRaw, width) + dynamicTokenKeySuffix(classStrRaw);
+  const [measuredBasis, setMeasuredBasis] = (0, import_react.useState)(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 });
+  }, []);
+  const percentCalcs = extractPercentRelativeCalcs(classStrRaw);
+  let layoutOverrides;
+  let hostRestWithLayout = hostRest;
+  if (percentCalcs.length > 0) {
+    layoutOverrides = {};
+    for (const calc of percentCalcs) {
+      const basis = measuredBasis?.[calc.property];
+      layoutOverrides[calc.property] = basis === void 0 ? "100%" : resolvePercentRelativeCalc(basis, calc);
+    }
+    const userOnLayout = hostRest.onLayout;
+    hostRestWithLayout = {
+      ...hostRest,
+      onLayout: userOnLayout ? (e) => {
+        measure(e);
+        userOnLayout(e);
+      } : measure
+    };
+  }
+  const finalStyle = hostType === import_react_native.Pressable ? (state) => resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, state.pressed, layoutOverrides) : resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, false, layoutOverrides);
+  const suffix = darkModeKeySuffix(classStrRaw) + breakpointKeySuffix(classStrRaw, width) + dynamicTokenKeySuffix(classStrRaw) + percentCalcKeySuffix(percentCalcs, measuredBasis);
   const finalKey = suffix ? `${elementKey ?? ""}${suffix}` : elementKey;
-  return makeElement(isStaticChildren, hostType, { ...hostRest, style: finalStyle }, finalKey);
+  return makeElement(isStaticChildren, hostType, { ...hostRestWithLayout, style: finalStyle }, finalKey);
 }
 function processElement(resolveStyle2, type, rawProps, key, isStaticChildren) {
   if (type === null || typeof type === "symbol" || !rawProps) {
@@ -100,7 +323,7 @@ function processElement(resolveStyle2, type, rawProps, key, isStaticChildren) {
   if (typeof classStrRaw !== "string") {
     return makeElement(isStaticChildren, type, rawProps, key);
   }
-  if (DARK_MODIFIER_RE.test(classStrRaw) || BREAKPOINT_MODIFIER_RE.test(classStrRaw) || classStrRaw.includes("var(--")) {
+  if (DARK_MODIFIER_RE.test(classStrRaw) || BREAKPOINT_MODIFIER_RE.test(classStrRaw) || classStrRaw.includes("var(--") || PERCENT_RELATIVE_CALC_HINT_RE.test(classStrRaw)) {
     return (0, import_jsx_runtime.jsx)(
       ReactiveElement,
       { hostType: type, hostRest: rest, classStrRaw, userStyle, resolveStyle: resolveStyle2, elementKey: key, isStaticChildren },
@@ -1231,153 +1454,6 @@ function resolveUtilityNative(parsed, theme) {
   return resolveFlex(parsed, false) ?? resolve(parsed, theme) ?? resolve2(parsed, theme) ?? resolve3(parsed, theme) ?? resolveColorNative(parsed, theme) ?? resolveLeadingTrackingNative(parsed) ?? resolveTypographyNative(parsed) ?? nativeShadowDeclarations(parsed);
 }
 
-// src/jsEngine/calc.ts
-function reduceConstantMath(raw) {
-  const trimmed = raw.trim();
-  const calc = stripCall(trimmed, "calc");
-  if (calc !== null) {
-    return new Evaluator(calc).parseExprToEnd();
-  }
-  const clamp = stripCall(trimmed, "clamp");
-  if (clamp !== null) {
-    const args = splitTopLevelCommas(clamp);
-    if (args.length !== 3) return null;
-    const [min2, preferred, max2] = args.map((a) => new Evaluator(a).parseExprToEnd());
-    if (min2 === null || preferred === null || max2 === null) return null;
-    return Math.max(min2, Math.min(preferred, max2));
-  }
-  const min = stripCall(trimmed, "min");
-  if (min !== null) {
-    const values = splitTopLevelCommas(min).map((a) => new Evaluator(a).parseExprToEnd());
-    return values.some((v) => v === null) ? null : Math.min(...values);
-  }
-  const max = stripCall(trimmed, "max");
-  if (max !== null) {
-    const values = splitTopLevelCommas(max).map((a) => new Evaluator(a).parseExprToEnd());
-    return values.some((v) => v === null) ? null : Math.max(...values);
-  }
-  return null;
-}
-function stripCall(raw, name) {
-  if (!raw.startsWith(name)) return null;
-  const afterName = raw.slice(name.length).trimStart();
-  if (!afterName.startsWith("(") || !afterName.endsWith(")")) return null;
-  return afterName.slice(1, -1);
-}
-function splitTopLevelCommas(s) {
-  const parts = [];
-  let depth = 0;
-  let start = 0;
-  for (let i = 0; i < s.length; i++) {
-    const ch = s[i];
-    if (ch === "(") depth++;
-    else if (ch === ")") depth--;
-    else if (ch === "," && depth === 0) {
-      parts.push(s.slice(start, i).trim());
-      start = i + 1;
-    }
-  }
-  parts.push(s.slice(start).trim());
-  return parts;
-}
-var Evaluator = class {
-  constructor(s) {
-    this.pos = 0;
-    this.s = s;
-  }
-  parseExprToEnd() {
-    const value = this.expr();
-    if (value === null) return null;
-    this.skipWs();
-    return this.pos === this.s.length ? value : null;
-  }
-  skipWs() {
-    while (this.pos < this.s.length && /\s/.test(this.s[this.pos])) this.pos++;
-  }
-  peek() {
-    this.skipWs();
-    return this.s[this.pos];
-  }
-  expr() {
-    let value = this.term();
-    if (value === null) return null;
-    for (; ; ) {
-      const ch = this.peek();
-      if (ch === "+") {
-        this.pos++;
-        const rhs = this.term();
-        if (rhs === null) return null;
-        value += rhs;
-      } else if (ch === "-") {
-        this.pos++;
-        const rhs = this.term();
-        if (rhs === null) return null;
-        value -= rhs;
-      } else {
-        return value;
-      }
-    }
-  }
-  term() {
-    let value = this.factor();
-    if (value === null) return null;
-    for (; ; ) {
-      const ch = this.peek();
-      if (ch === "*") {
-        this.pos++;
-        const rhs = this.factor();
-        if (rhs === null) return null;
-        value *= rhs;
-      } else if (ch === "/") {
-        this.pos++;
-        const divisor = this.factor();
-        if (divisor === null || divisor === 0) return null;
-        value /= divisor;
-      } else {
-        return value;
-      }
-    }
-  }
-  factor() {
-    const ch = this.peek();
-    if (ch === void 0) return null;
-    if (ch === "(") {
-      this.pos++;
-      const value = this.expr();
-      if (value === null || this.peek() !== ")") return null;
-      this.pos++;
-      return value;
-    }
-    if (ch === "-") {
-      this.pos++;
-      const value = this.factor();
-      return value === null ? null : -value;
-    }
-    return this.numberWithUnit();
-  }
-  numberWithUnit() {
-    this.skipWs();
-    const start = this.pos;
-    while (this.pos < this.s.length && (/[0-9]/.test(this.s[this.pos]) || this.s[this.pos] === ".")) this.pos++;
-    if (this.pos === start) return null;
-    const n = Number(this.s.slice(start, this.pos));
-    if (!Number.isFinite(n)) return null;
-    const unitStart = this.pos;
-    while (this.pos < this.s.length && /[a-zA-Z]/.test(this.s[this.pos])) this.pos++;
-    const unit = this.s.slice(unitStart, this.pos);
-    switch (unit) {
-      case "":
-        return n;
-      case "px":
-        return n;
-      case "rem":
-        return n * 16;
-      default:
-        return null;
-    }
-  }
-};
-
 // src/jsEngine/resolveStyle.ts
 var RESPONSIVE_BREAKPOINTS = /* @__PURE__ */ new Set(["sm", "md", "lg", "xl", "2xl"]);
 function nativeModifierState(modifier, theme, colorScheme, pressed, width) {

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

@@ -8,7 +8,7 @@ import "./chunk-OGFB3OXS.mjs";
 
 // src/jsxRuntimeCore.ts
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment2, useSyncExternalStore } from "react";
+import { Fragment as Fragment2, useCallback, 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

@@ -33,6 +33,182 @@ var import_react_native = require("react-native");
 var import_darkModeStore = require("./darkModeStore");
 var import_dynamicTokens = require("./dynamicTokens");
 var import_theme = require("./theme");
+
+// src/jsEngine/calc.ts
+function reduceConstantMath(raw) {
+  const trimmed = raw.trim();
+  const calc = stripCall(trimmed, "calc");
+  if (calc !== null) {
+    return new Evaluator(calc).parseExprToEnd();
+  }
+  const clamp = stripCall(trimmed, "clamp");
+  if (clamp !== null) {
+    const args = splitTopLevelCommas(clamp);
+    if (args.length !== 3) return null;
+    const [min2, preferred, max2] = args.map((a) => new Evaluator(a).parseExprToEnd());
+    if (min2 === null || preferred === null || max2 === null) return null;
+    return Math.max(min2, Math.min(preferred, max2));
+  }
+  const min = stripCall(trimmed, "min");
+  if (min !== null) {
+    const values = splitTopLevelCommas(min).map((a) => new Evaluator(a).parseExprToEnd());
+    return values.some((v) => v === null) ? null : Math.min(...values);
+  }
+  const max = stripCall(trimmed, "max");
+  if (max !== null) {
+    const values = splitTopLevelCommas(max).map((a) => new Evaluator(a).parseExprToEnd());
+    return values.some((v) => v === null) ? null : Math.max(...values);
+  }
+  return null;
+}
+function stripCall(raw, name) {
+  if (!raw.startsWith(name)) return null;
+  const afterName = raw.slice(name.length).trimStart();
+  if (!afterName.startsWith("(") || !afterName.endsWith(")")) return null;
+  return afterName.slice(1, -1);
+}
+function splitTopLevelCommas(s) {
+  const parts = [];
+  let depth = 0;
+  let start = 0;
+  for (let i = 0; i < s.length; i++) {
+    const ch = s[i];
+    if (ch === "(") depth++;
+    else if (ch === ")") depth--;
+    else if (ch === "," && depth === 0) {
+      parts.push(s.slice(start, i).trim());
+      start = i + 1;
+    }
+  }
+  parts.push(s.slice(start).trim());
+  return parts;
+}
+var Evaluator = class {
+  constructor(s) {
+    this.pos = 0;
+    this.s = s;
+  }
+  parseExprToEnd() {
+    const value = this.expr();
+    if (value === null) return null;
+    this.skipWs();
+    return this.pos === this.s.length ? value : null;
+  }
+  skipWs() {
+    while (this.pos < this.s.length && /\s/.test(this.s[this.pos])) this.pos++;
+  }
+  peek() {
+    this.skipWs();
+    return this.s[this.pos];
+  }
+  expr() {
+    let value = this.term();
+    if (value === null) return null;
+    for (; ; ) {
+      const ch = this.peek();
+      if (ch === "+") {
+        this.pos++;
+        const rhs = this.term();
+        if (rhs === null) return null;
+        value += rhs;
+      } else if (ch === "-") {
+        this.pos++;
+        const rhs = this.term();
+        if (rhs === null) return null;
+        value -= rhs;
+      } else {
+        return value;
+      }
+    }
+  }
+  term() {
+    let value = this.factor();
+    if (value === null) return null;
+    for (; ; ) {
+      const ch = this.peek();
+      if (ch === "*") {
+        this.pos++;
+        const rhs = this.factor();
+        if (rhs === null) return null;
+        value *= rhs;
+      } else if (ch === "/") {
+        this.pos++;
+        const divisor = this.factor();
+        if (divisor === null || divisor === 0) return null;
+        value /= divisor;
+      } else {
+        return value;
+      }
+    }
+  }
+  factor() {
+    const ch = this.peek();
+    if (ch === void 0) return null;
+    if (ch === "(") {
+      this.pos++;
+      const value = this.expr();
+      if (value === null || this.peek() !== ")") return null;
+      this.pos++;
+      return value;
+    }
+    if (ch === "-") {
+      this.pos++;
+      const value = this.factor();
+      return value === null ? null : -value;
+    }
+    return this.numberWithUnit();
+  }
+  numberWithUnit() {
+    this.skipWs();
+    const start = this.pos;
+    while (this.pos < this.s.length && (/[0-9]/.test(this.s[this.pos]) || this.s[this.pos] === ".")) this.pos++;
+    if (this.pos === start) return null;
+    const n = Number(this.s.slice(start, this.pos));
+    if (!Number.isFinite(n)) return null;
+    const unitStart = this.pos;
+    while (this.pos < this.s.length && /[a-zA-Z]/.test(this.s[this.pos])) this.pos++;
+    const unit = this.s.slice(unitStart, this.pos);
+    switch (unit) {
+      case "":
+        return n;
+      case "px":
+        return n;
+      case "rem":
+        return n * 16;
+      default:
+        return null;
+    }
+  }
+};
+
+// src/layoutCalc.ts
+var PERCENT_CALC_TOKEN_RE = /^(w|h)-\[calc\(([^)]+)\)\]$/;
+function parsePercentRelativeCalc(token) {
+  const m = PERCENT_CALC_TOKEN_RE.exec(token);
+  if (!m) return null;
+  const property = m[1] === "w" ? "width" : "height";
+  const inner = m[2].replace(/_/g, " ").trim();
+  let mm = /^(-?[\d.]+)%\s*([+-])\s*(.+)$/.exec(inner);
+  if (mm) {
+    const percentCoefficient = Number(mm[1]);
+    const magnitude = reduceConstantMath(`calc(${mm[3].trim()})`);
+    if (!Number.isFinite(percentCoefficient) || magnitude === null) return null;
+    return { property, percentCoefficient, constantPx: mm[2] === "+" ? magnitude : -magnitude };
+  }
+  mm = /^(.+?)\s*([+-])\s*(-?[\d.]+)%$/.exec(inner);
+  if (mm) {
+    const constantPx = reduceConstantMath(`calc(${mm[1].trim()})`);
+    const percentMagnitude = Number(mm[3]);
+    if (constantPx === null || !Number.isFinite(percentMagnitude)) return null;
+    return { property, percentCoefficient: mm[2] === "+" ? percentMagnitude : -percentMagnitude, constantPx };
+  }
+  return null;
+}
+function resolvePercentRelativeCalc(basisPx, calc) {
+  return basisPx * calc.percentCoefficient / 100 + calc.constantPx;
+}
+
+// src/jsxRuntimeCore.ts
 var DYNAMIC_TOKEN_MATCH_RE = /var\(--([a-zA-Z0-9-]+)\)/g;
 function substituteDynamicTokens(classStrRaw) {
   if (!classStrRaw.includes("var(--")) return classStrRaw;
@@ -41,11 +217,27 @@ function substituteDynamicTokens(classStrRaw) {
     return value ?? whole;
   });
 }
+var PERCENT_RELATIVE_CALC_HINT_RE = /[wh]-\[calc\([^)]*%[^)]*\)\]/;
+function extractPercentRelativeCalcs(classStrRaw) {
+  const found = [];
+  for (const token of classStrRaw.split(/\s+/)) {
+    const parsed = parsePercentRelativeCalc(token);
+    if (parsed) found.push(parsed);
+  }
+  return found;
+}
+function stripPercentRelativeCalcTokens(classStrRaw) {
+  return classStrRaw.split(/\s+/).filter((token) => token && parsePercentRelativeCalc(token) === null).join(" ");
+}
 function makeElement(isStaticChildren, type, props, key) {
   return (isStaticChildren ? import_jsx_runtime.jsxs : import_jsx_runtime.jsx)(type, props, key);
 }
-function resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, pressed) {
-  const resolved = resolveStyle2(substituteDynamicTokens(classStrRaw), pressed);
+function resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, pressed, layoutOverrides) {
+  const cleaned = stripPercentRelativeCalcTokens(substituteDynamicTokens(classStrRaw));
+  const resolved = resolveStyle2(cleaned, pressed);
+  if (layoutOverrides) {
+    Object.assign(resolved, layoutOverrides);
+  }
   if (userStyle === void 0) {
     return resolved;
   }
@@ -76,6 +268,14 @@ function dynamicTokenKeySuffix(classStrRaw) {
   const values = matches.map((m) => (0, import_dynamicTokens.getDynamicToken)(m.slice("var(--".length, -1)) ?? "");
   return `:kb-dt-${values.join("|")}`;
 }
+function percentCalcKeySuffix(percentCalcs, measuredBasis) {
+  if (percentCalcs.length === 0) return "";
+  const values = percentCalcs.map((calc) => {
+    const basis = measuredBasis?.[calc.property];
+    return basis === void 0 ? "pending" : resolvePercentRelativeCalc(basis, calc);
+  });
+  return `:kb-pc-${values.join("|")}`;
+}
 function ReactiveElement({
   hostType,
   hostRest,
@@ -88,10 +288,33 @@ function ReactiveElement({
   (0, import_react.useSyncExternalStore)(import_darkModeStore.subscribeGlobalDarkMode, import_darkModeStore.getGlobalDarkMode);
   (0, import_react.useSyncExternalStore)(import_dynamicTokens.subscribeDynamicTokens, import_dynamicTokens.getDynamicTokensVersion);
   const { width } = (0, import_react_native.useWindowDimensions)();
-  const finalStyle = hostType === import_react_native.Pressable ? (state) => resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, state.pressed) : resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, false);
-  const suffix = darkModeKeySuffix(classStrRaw) + breakpointKeySuffix(classStrRaw, width) + dynamicTokenKeySuffix(classStrRaw);
+  const [measuredBasis, setMeasuredBasis] = (0, import_react.useState)(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 });
+  }, []);
+  const percentCalcs = extractPercentRelativeCalcs(classStrRaw);
+  let layoutOverrides;
+  let hostRestWithLayout = hostRest;
+  if (percentCalcs.length > 0) {
+    layoutOverrides = {};
+    for (const calc of percentCalcs) {
+      const basis = measuredBasis?.[calc.property];
+      layoutOverrides[calc.property] = basis === void 0 ? "100%" : resolvePercentRelativeCalc(basis, calc);
+    }
+    const userOnLayout = hostRest.onLayout;
+    hostRestWithLayout = {
+      ...hostRest,
+      onLayout: userOnLayout ? (e) => {
+        measure(e);
+        userOnLayout(e);
+      } : measure
+    };
+  }
+  const finalStyle = hostType === import_react_native.Pressable ? (state) => resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, state.pressed, layoutOverrides) : resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, false, layoutOverrides);
+  const suffix = darkModeKeySuffix(classStrRaw) + breakpointKeySuffix(classStrRaw, width) + dynamicTokenKeySuffix(classStrRaw) + percentCalcKeySuffix(percentCalcs, measuredBasis);
   const finalKey = suffix ? `${elementKey ?? ""}${suffix}` : elementKey;
-  return makeElement(isStaticChildren, hostType, { ...hostRest, style: finalStyle }, finalKey);
+  return makeElement(isStaticChildren, hostType, { ...hostRestWithLayout, style: finalStyle }, finalKey);
 }
 function processElement(resolveStyle2, type, rawProps, key, isStaticChildren) {
   if (type === null || typeof type === "symbol" || !rawProps) {
@@ -101,7 +324,7 @@ function processElement(resolveStyle2, type, rawProps, key, isStaticChildren) {
   if (typeof classStrRaw !== "string") {
     return makeElement(isStaticChildren, type, rawProps, key);
   }
-  if (DARK_MODIFIER_RE.test(classStrRaw) || BREAKPOINT_MODIFIER_RE.test(classStrRaw) || classStrRaw.includes("var(--")) {
+  if (DARK_MODIFIER_RE.test(classStrRaw) || BREAKPOINT_MODIFIER_RE.test(classStrRaw) || classStrRaw.includes("var(--") || PERCENT_RELATIVE_CALC_HINT_RE.test(classStrRaw)) {
     return (0, import_jsx_runtime.jsx)(
       ReactiveElement,
       { hostType: type, hostRest: rest, classStrRaw, userStyle, resolveStyle: resolveStyle2, elementKey: key, isStaticChildren },
@@ -1222,153 +1445,6 @@ function resolveUtilityNative(parsed, theme) {
   return resolveFlex(parsed, false) ?? resolve(parsed, theme) ?? resolve2(parsed, theme) ?? resolve3(parsed, theme) ?? resolveColorNative(parsed, theme) ?? resolveLeadingTrackingNative(parsed) ?? resolveTypographyNative(parsed) ?? nativeShadowDeclarations(parsed);
 }
 
-// src/jsEngine/calc.ts
-function reduceConstantMath(raw) {
-  const trimmed = raw.trim();
-  const calc = stripCall(trimmed, "calc");
-  if (calc !== null) {
-    return new Evaluator(calc).parseExprToEnd();
-  }
-  const clamp = stripCall(trimmed, "clamp");
-  if (clamp !== null) {
-    const args = splitTopLevelCommas(clamp);
-    if (args.length !== 3) return null;
-    const [min2, preferred, max2] = args.map((a) => new Evaluator(a).parseExprToEnd());
-    if (min2 === null || preferred === null || max2 === null) return null;
-    return Math.max(min2, Math.min(preferred, max2));
-  }
-  const min = stripCall(trimmed, "min");
-  if (min !== null) {
-    const values = splitTopLevelCommas(min).map((a) => new Evaluator(a).parseExprToEnd());
-    return values.some((v) => v === null) ? null : Math.min(...values);
-  }
-  const max = stripCall(trimmed, "max");
-  if (max !== null) {
-    const values = splitTopLevelCommas(max).map((a) => new Evaluator(a).parseExprToEnd());
-    return values.some((v) => v === null) ? null : Math.max(...values);
-  }
-  return null;
-}
-function stripCall(raw, name) {
-  if (!raw.startsWith(name)) return null;
-  const afterName = raw.slice(name.length).trimStart();
-  if (!afterName.startsWith("(") || !afterName.endsWith(")")) return null;
-  return afterName.slice(1, -1);
-}
-function splitTopLevelCommas(s) {
-  const parts = [];
-  let depth = 0;
-  let start = 0;
-  for (let i = 0; i < s.length; i++) {
-    const ch = s[i];
-    if (ch === "(") depth++;
-    else if (ch === ")") depth--;
-    else if (ch === "," && depth === 0) {
-      parts.push(s.slice(start, i).trim());
-      start = i + 1;
-    }
-  }
-  parts.push(s.slice(start).trim());
-  return parts;
-}
-var Evaluator = class {
-  constructor(s) {
-    this.pos = 0;
-    this.s = s;
-  }
-  parseExprToEnd() {
-    const value = this.expr();
-    if (value === null) return null;
-    this.skipWs();
-    return this.pos === this.s.length ? value : null;
-  }
-  skipWs() {
-    while (this.pos < this.s.length && /\s/.test(this.s[this.pos])) this.pos++;
-  }
-  peek() {
-    this.skipWs();
-    return this.s[this.pos];
-  }
-  expr() {
-    let value = this.term();
-    if (value === null) return null;
-    for (; ; ) {
-      const ch = this.peek();
-      if (ch === "+") {
-        this.pos++;
-        const rhs = this.term();
-        if (rhs === null) return null;
-        value += rhs;
-      } else if (ch === "-") {
-        this.pos++;
-        const rhs = this.term();
-        if (rhs === null) return null;
-        value -= rhs;
-      } else {
-        return value;
-      }
-    }
-  }
-  term() {
-    let value = this.factor();
-    if (value === null) return null;
-    for (; ; ) {
-      const ch = this.peek();
-      if (ch === "*") {
-        this.pos++;
-        const rhs = this.factor();
-        if (rhs === null) return null;
-        value *= rhs;
-      } else if (ch === "/") {
-        this.pos++;
-        const divisor = this.factor();
-        if (divisor === null || divisor === 0) return null;
-        value /= divisor;
-      } else {
-        return value;
-      }
-    }
-  }
-  factor() {
-    const ch = this.peek();
-    if (ch === void 0) return null;
-    if (ch === "(") {
-      this.pos++;
-      const value = this.expr();
-      if (value === null || this.peek() !== ")") return null;
-      this.pos++;
-      return value;
-    }
-    if (ch === "-") {
-      this.pos++;
-      const value = this.factor();
-      return value === null ? null : -value;
-    }
-    return this.numberWithUnit();
-  }
-  numberWithUnit() {
-    this.skipWs();
-    const start = this.pos;
-    while (this.pos < this.s.length && (/[0-9]/.test(this.s[this.pos]) || this.s[this.pos] === ".")) this.pos++;
-    if (this.pos === start) return null;
-    const n = Number(this.s.slice(start, this.pos));
-    if (!Number.isFinite(n)) return null;
-    const unitStart = this.pos;
-    while (this.pos < this.s.length && /[a-zA-Z]/.test(this.s[this.pos])) this.pos++;
-    const unit = this.s.slice(unitStart, this.pos);
-    switch (unit) {
-      case "":
-        return n;
-      case "px":
-        return n;
-      case "rem":
-        return n * 16;
-      default:
-        return null;
-    }
-  }
-};
-
 // src/jsEngine/resolveStyle.ts
 var RESPONSIVE_BREAKPOINTS = /* @__PURE__ */ new Set(["sm", "md", "lg", "xl", "2xl"]);
 function nativeModifierState(modifier, theme, colorScheme, pressed, width) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react-native",
-  "version": "1.0.0-beta.19",
+  "version": "1.0.0-beta.20",
   "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",