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

package/dist/jsx-dev-runtime.js

@@ -31,7 +31,6 @@ var import_react = require("react");
 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) {
@@ -206,157 +205,46 @@ function parsePercentRelativeCalc(token) {
 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;
-  return classStrRaw.replace(DYNAMIC_TOKEN_MATCH_RE, (whole, name) => {
-    const value = (0, import_dynamicTokens.getDynamicToken)(name);
-    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, layoutOverrides) {
-  const cleaned = stripPercentRelativeCalcTokens(substituteDynamicTokens(classStrRaw));
-  const resolved = resolveStyle2(cleaned, pressed);
-  if (layoutOverrides) {
-    Object.assign(resolved, layoutOverrides);
-  }
-  if (userStyle === void 0) {
-    return resolved;
-  }
-  if (typeof userStyle === "function") {
-    return [resolved, userStyle({ pressed })];
-  }
-  return [resolved, userStyle];
-}
-var DARK_MODIFIER_RE = /(^|\s)dark:/;
-var BREAKPOINT_MODIFIER_RE = /(^|\s)(sm|md|lg|xl|2xl):/;
-var BREAKPOINT_MODIFIER_MATCH_RE = /(?:^|\s)(sm|md|lg|xl|2xl):/g;
-function darkModeKeySuffix(classStrRaw) {
-  return DARK_MODIFIER_RE.test(classStrRaw) ? `:kb-dark-${(0, import_darkModeStore.getGlobalDarkMode)()}` : "";
-}
-function breakpointKeySuffix(classStrRaw, width) {
-  const matches = classStrRaw.match(BREAKPOINT_MODIFIER_MATCH_RE);
-  if (!matches) {
-    return "";
-  }
-  const screens = (0, import_theme.getTheme)().screens;
-  const present = Array.from(new Set(matches.map((m) => m.trim().slice(0, -1))));
-  const state = present.map((name) => screens[name] !== void 0 && width >= screens[name] ? "1" : "0").join("");
-  return `:kb-bp-${state}`;
-}
-function dynamicTokenKeySuffix(classStrRaw) {
-  const matches = classStrRaw.match(DYNAMIC_TOKEN_MATCH_RE);
-  if (!matches) return "";
-  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,
-  classStrRaw,
-  userStyle,
-  resolveStyle: resolveStyle2,
-  elementKey,
-  isStaticChildren
-}) {
-  (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 [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, { ...hostRestWithLayout, style: finalStyle }, finalKey);
-}
-function processElement(resolveStyle2, type, rawProps, key, isStaticChildren) {
-  if (type === null || typeof type === "symbol" || !rawProps) {
-    return makeElement(isStaticChildren, type, rawProps ?? {}, key);
-  }
-  const { className: classStrRaw, style: userStyle, ...rest } = rawProps;
-  if (typeof classStrRaw !== "string") {
-    return makeElement(isStaticChildren, type, rawProps, key);
-  }
-  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 },
-      key
-    );
-  }
-  const finalStyle = type === import_react_native.Pressable ? (state) => resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, state.pressed) : resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, false);
-  return makeElement(isStaticChildren, type, { ...rest, style: finalStyle }, key);
-}
-function createJsxFunctions(resolveStyle2) {
-  function jsx2(type, props, key) {
-    return processElement(resolveStyle2, type, props, key, false);
+var PERCENT_MIN_MAX_CLAMP_TOKEN_RE = /^(w|h)-\[(min|max|clamp)\(([^)]+)\)\]$/;
+function parseOperand(arg) {
+  const trimmed = arg.trim();
+  const pct = /^(-?[\d.]+)%$/.exec(trimmed);
+  if (pct) {
+    const percentCoefficient = Number(pct[1]);
+    return Number.isFinite(percentCoefficient) ? { percentCoefficient, constantPx: 0 } : null;
   }
-  function jsxs2(type, props, key) {
-    return processElement(resolveStyle2, type, props, key, true);
-  }
-  return { jsx: jsx2, jsxs: jsxs2 };
+  const constantPx = reduceConstantMath(`calc(${trimmed})`);
+  return constantPx === null ? null : { percentCoefficient: 0, constantPx };
 }
-function createJsxDEV(jsx2, jsxs2) {
-  return function jsxDEV2(type, props, key, isStaticChildren, source, self) {
-    const element = (isStaticChildren ? jsxs2 : jsx2)(type, props, key);
-    if (source && element && typeof element === "object" && Object.isExtensible(element)) {
-      element._source = source;
-      element._self = self;
+function parsePercentRelativeMinMaxClamp(token) {
+  const m = PERCENT_MIN_MAX_CLAMP_TOKEN_RE.exec(token);
+  if (!m) return null;
+  const property = m[1] === "w" ? "width" : "height";
+  const kind = m[2];
+  const args = splitTopLevelCommas(m[3].replace(/_/g, " "));
+  if (kind === "clamp" && args.length !== 3) return null;
+  if (kind !== "clamp" && args.length < 1) return null;
+  const operands = args.map(parseOperand);
+  if (operands.some((o) => o === null)) return null;
+  const resolved = operands;
+  if (!resolved.some((o) => o.percentCoefficient !== 0)) return null;
+  const resolveOperand = (o, basisPx) => basisPx * o.percentCoefficient / 100 + o.constantPx;
+  return {
+    property,
+    resolve(basisPx) {
+      const values = resolved.map((o) => resolveOperand(o, basisPx));
+      if (kind === "min") return Math.min(...values);
+      if (kind === "max") return Math.max(...values);
+      const [min, preferred, max] = values;
+      return Math.max(min, Math.min(preferred, max));
     }
-    return element;
   };
 }
-
-// src/nativeBridge.ts
-var import_react_native2 = require("react-native");
-var import_theme2 = require("./theme");
-var import_darkModeStore2 = require("./darkModeStore");
+function parsePercentRelativeExpr(token) {
+  const calc = parsePercentRelativeCalc(token);
+  if (calc) return { property: calc.property, resolve: (basisPx) => resolvePercentRelativeCalc(basisPx, calc) };
+  return parsePercentRelativeMinMaxClamp(token);
+}
 
 // src/jsEngine/parser.ts
 var VALUE_PREFIXES = [
@@ -445,11 +333,21 @@ var VALUE_PREFIXES = [
   "tracking-",
   "font-",
   "z-",
+  "inset-x-",
+  "inset-y-",
   "inset-",
   "top-",
   "right-",
   "bottom-",
   "left-",
+  "start-",
+  "end-",
+  "overflow-x-",
+  "overflow-y-",
+  "overscroll-x-",
+  "overscroll-y-",
+  "overscroll-",
+  "aspect-",
   "divide-color-",
   "space-x-",
   "space-y-",
@@ -604,6 +502,189 @@ function parseClass(token) {
   };
 }
 
+// src/jsxRuntimeCore.ts
+var DYNAMIC_TOKEN_MATCH_RE = /var\(--([a-zA-Z0-9-]+)\)/g;
+function substituteDynamicTokens(classStrRaw) {
+  if (!classStrRaw.includes("var(--")) return classStrRaw;
+  return classStrRaw.replace(DYNAMIC_TOKEN_MATCH_RE, (whole, name) => {
+    const value = (0, import_dynamicTokens.getDynamicToken)(name);
+    return value ?? whole;
+  });
+}
+var PERCENT_RELATIVE_CALC_HINT_RE = /[wh]-\[(calc|min|max|clamp)\([^)]*%[^)]*\)\]/;
+function extractPercentRelativeCalcs(classStrRaw) {
+  const found = [];
+  for (const token of classStrRaw.split(/\s+/)) {
+    const parsed = parsePercentRelativeExpr(token);
+    if (parsed) found.push(parsed);
+  }
+  return found;
+}
+function stripPercentRelativeCalcTokens(classStrRaw) {
+  return classStrRaw.split(/\s+/).filter((token) => token && parsePercentRelativeExpr(token) === null).join(" ");
+}
+var STATE_MODIFIER_NAMES = /* @__PURE__ */ new Set(["hover", "focus", "disabled"]);
+var STATE_MODIFIER_HINT_RE = /(^|\s|:)(hover|focus|disabled):/;
+function stripModifiers(parts, namesToStrip) {
+  const utility = parts[parts.length - 1] ?? "";
+  const modifiers = parts.slice(0, -1).filter((m) => !namesToStrip.has(m));
+  return [...modifiers, utility].join(":");
+}
+function substituteStateModifiers(classStrRaw, states) {
+  if (!STATE_MODIFIER_HINT_RE.test(classStrRaw)) return classStrRaw;
+  const kept = [];
+  for (const token of classStrRaw.split(/\s+/)) {
+    if (!token) continue;
+    const parts = splitRespectingBrackets(token);
+    const modifiers = parts.slice(0, -1);
+    const required = modifiers.filter((m) => STATE_MODIFIER_NAMES.has(m));
+    if (required.length === 0) {
+      kept.push(token);
+      continue;
+    }
+    if (required.every((m) => states[m])) {
+      kept.push(stripModifiers(parts, STATE_MODIFIER_NAMES));
+    }
+  }
+  return kept.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, layoutOverrides, states = { hover: false, focus: false, disabled: false }) {
+  const stateResolved = substituteStateModifiers(classStrRaw, states);
+  const cleaned = stripPercentRelativeCalcTokens(substituteDynamicTokens(stateResolved));
+  const resolved = resolveStyle2(cleaned, pressed);
+  if (layoutOverrides) {
+    Object.assign(resolved, layoutOverrides);
+  }
+  if (userStyle === void 0) {
+    return resolved;
+  }
+  if (typeof userStyle === "function") {
+    return [resolved, userStyle({ pressed })];
+  }
+  return [resolved, userStyle];
+}
+var DARK_MODIFIER_RE = /(^|\s|:)dark:/;
+var BREAKPOINT_MODIFIER_RE = /(^|\s|:)(sm|md|lg|xl|2xl):/;
+var HOVER_MODIFIER_RE = /(^|\s|:)hover:/;
+var FOCUS_MODIFIER_RE = /(^|\s|:)focus:/;
+function ReactiveElement({
+  hostType,
+  hostRest,
+  classStrRaw,
+  userStyle,
+  resolveStyle: resolveStyle2,
+  elementKey,
+  isStaticChildren
+}) {
+  (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 [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 [isHovered, setIsHovered] = (0, import_react.useState)(false);
+  const [isFocused, setIsFocused] = (0, import_react.useState)(false);
+  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%" : calc.resolve(basis);
+    }
+    const userOnLayout = hostRest.onLayout;
+    hostRestWithLayout = {
+      ...hostRest,
+      onLayout: userOnLayout ? (e) => {
+        measure(e);
+        userOnLayout(e);
+      } : measure
+    };
+  }
+  if (HOVER_MODIFIER_RE.test(classStrRaw)) {
+    const userOnHoverIn = hostRestWithLayout.onHoverIn;
+    const userOnHoverOut = hostRestWithLayout.onHoverOut;
+    hostRestWithLayout = {
+      ...hostRestWithLayout,
+      onHoverIn: (e) => {
+        setIsHovered(true);
+        userOnHoverIn?.(e);
+      },
+      onHoverOut: (e) => {
+        setIsHovered(false);
+        userOnHoverOut?.(e);
+      }
+    };
+  }
+  if (FOCUS_MODIFIER_RE.test(classStrRaw)) {
+    const userOnFocus = hostRestWithLayout.onFocus;
+    const userOnBlur = hostRestWithLayout.onBlur;
+    hostRestWithLayout = {
+      ...hostRestWithLayout,
+      onFocus: (e) => {
+        setIsFocused(true);
+        userOnFocus?.(e);
+      },
+      onBlur: (e) => {
+        setIsFocused(false);
+        userOnBlur?.(e);
+      }
+    };
+  }
+  const states = { hover: isHovered, focus: isFocused, disabled: hostRest.disabled === true };
+  const finalStyle = hostType === import_react_native.Pressable ? (state) => resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, state.pressed, layoutOverrides, states) : resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, false, layoutOverrides, states);
+  return makeElement(isStaticChildren, hostType, { ...hostRestWithLayout, style: finalStyle }, elementKey);
+}
+function processElement(resolveStyle2, type, rawProps, key, isStaticChildren) {
+  if (type === null || typeof type === "symbol" || !rawProps) {
+    return makeElement(isStaticChildren, type, rawProps ?? {}, key);
+  }
+  const { className: classStrRaw, style: userStyle, ...rest } = rawProps;
+  if (typeof classStrRaw !== "string") {
+    return makeElement(isStaticChildren, type, rawProps, key);
+  }
+  if (DARK_MODIFIER_RE.test(classStrRaw) || BREAKPOINT_MODIFIER_RE.test(classStrRaw) || HOVER_MODIFIER_RE.test(classStrRaw) || FOCUS_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 },
+      key
+    );
+  }
+  const staticStates = { hover: false, focus: false, disabled: rest.disabled === true };
+  const finalStyle = type === import_react_native.Pressable ? (state) => resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, state.pressed, void 0, staticStates) : resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, false, void 0, staticStates);
+  return makeElement(isStaticChildren, type, { ...rest, style: finalStyle }, key);
+}
+function createJsxFunctions(resolveStyle2) {
+  function jsx2(type, props, key) {
+    return processElement(resolveStyle2, type, props, key, false);
+  }
+  function jsxs2(type, props, key) {
+    return processElement(resolveStyle2, type, props, key, true);
+  }
+  return { jsx: jsx2, jsxs: jsxs2 };
+}
+function createJsxDEV(jsx2, jsxs2) {
+  return function jsxDEV2(type, props, key, isStaticChildren, source, self) {
+    const element = (isStaticChildren ? jsxs2 : jsx2)(type, props, key);
+    if (source && element && typeof element === "object" && Object.isExtensible(element)) {
+      element._source = source;
+      element._self = self;
+    }
+    return element;
+  };
+}
+
+// src/nativeBridge.ts
+var import_react_native2 = require("react-native");
+var import_theme = require("./theme");
+var import_darkModeStore2 = require("./darkModeStore");
+
 // src/jsEngine/shared.ts
 function decl(property, value) {
   return { property, value };
@@ -634,11 +715,42 @@ function resolveNegatableLength(theme, parsed) {
   if (px === 0) return "0px";
   return `-${px}px`;
 }
+function resolvePercent(parsed) {
+  if (parsed.negative) return null;
+  const value = parsed.value;
+  if (value === null) return null;
+  if (parsed.isArbitrary) return value;
+  const pct = Number(value);
+  if (!Number.isFinite(pct) || value.trim() === "") return null;
+  return String(pct / 100);
+}
 
 // src/jsEngine/resolvers/layout.ts
 function negateRaw(value, negative) {
   return negative ? `-${value}` : value;
 }
+function overflowAxisValue(property, value) {
+  switch (value) {
+    case "auto":
+    case "hidden":
+    case "clip":
+    case "visible":
+    case "scroll":
+      return [decl(property, value)];
+    default:
+      return null;
+  }
+}
+function overscrollValue(property, value) {
+  switch (value) {
+    case "auto":
+    case "contain":
+    case "none":
+      return [decl(property, value)];
+    default:
+      return null;
+  }
+}
 function resolve(parsed, theme) {
   switch (parsed.utility) {
     case "flex":
@@ -685,6 +797,12 @@ function resolve(parsed, theme) {
       return [decl("justify-content", "space-around")];
     case "justify-evenly":
       return [decl("justify-content", "space-evenly")];
+    case "justify-normal":
+      return [decl("justify-content", "normal")];
+    case "justify-stretch":
+      return [decl("justify-content", "stretch")];
+    case "content-normal":
+      return [decl("align-content", "normal")];
     case "content-start":
       return [decl("align-content", "flex-start")];
     case "content-end":
@@ -719,6 +837,18 @@ function resolve(parsed, theme) {
       return [decl("overflow", "scroll")];
     case "overflow-visible":
       return [decl("overflow", "visible")];
+    case "overflow-clip":
+      return [decl("overflow", "clip")];
+    case "overflow-x":
+      return parsed.value === null ? null : overflowAxisValue("overflow-x", parsed.value);
+    case "overflow-y":
+      return parsed.value === null ? null : overflowAxisValue("overflow-y", parsed.value);
+    case "overscroll":
+      return parsed.value === null ? null : overscrollValue("overscroll-behavior", parsed.value);
+    case "overscroll-x":
+      return parsed.value === null ? null : overscrollValue("overscroll-behavior-x", parsed.value);
+    case "overscroll-y":
+      return parsed.value === null ? null : overscrollValue("overscroll-behavior-y", parsed.value);
     case "static":
       return [decl("position", "static")];
     case "relative":
@@ -759,10 +889,43 @@ function resolve(parsed, theme) {
       const v = resolveNegatableLength(theme, parsed);
       return v === null ? null : [decl("inset", v)];
     }
-    case "aspect-square":
-      return [decl("aspect-ratio", "1 / 1")];
-    case "aspect-video":
-      return [decl("aspect-ratio", "16 / 9")];
+    case "inset-x": {
+      const v = resolveNegatableLength(theme, parsed);
+      return v === null ? null : [decl("left", v), decl("right", v)];
+    }
+    case "inset-y": {
+      const v = resolveNegatableLength(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);
+      return v === null ? null : [decl("inset-inline-start", v)];
+    }
+    case "end": {
+      const v = resolveNegatableLength(theme, parsed);
+      return v === null ? null : [decl("inset-inline-end", v)];
+    }
+    // "aspect-" is a registered VALUE_PREFIXES entry (parser.ts), so
+    // "aspect-square"/"aspect-video"/"aspect-auto"/arbitrary all arrive
+    // here as utility="aspect" + a value, mirroring layout.rs's own
+    // "aspect" arm.
+    case "aspect": {
+      const value = parsed.value;
+      if (value === null) return null;
+      if (parsed.isArbitrary) return [decl("aspect-ratio", value)];
+      switch (value) {
+        case "square":
+          return [decl("aspect-ratio", "1 / 1")];
+        case "video":
+          return [decl("aspect-ratio", "16 / 9")];
+        case "auto":
+          return [decl("aspect-ratio", "auto")];
+        default:
+          return null;
+      }
+    }
     default:
       return null;
   }
@@ -1289,6 +1452,16 @@ function textSize(key) {
       return "1.875rem";
     case "4xl":
       return "2.25rem";
+    case "5xl":
+      return "3rem";
+    case "6xl":
+      return "3.75rem";
+    case "7xl":
+      return "4.5rem";
+    case "8xl":
+      return "6rem";
+    case "9xl":
+      return "8rem";
     default:
       return null;
   }
@@ -1325,6 +1498,12 @@ function textAlign(key) {
       return "right";
     case "justify":
       return "justify";
+    // Logical alignment — same "no direction-tracking logic needed" reasoning
+    // as layout.rs's start/end inset properties.
+    case "start":
+      return "start";
+    case "end":
+      return "end";
     default:
       return null;
   }
@@ -1333,6 +1512,10 @@ function fontWeight(key) {
   switch (key) {
     case "thin":
       return "100";
+    case "extralight":
+      return "200";
+    case "light":
+      return "300";
     case "normal":
       return "400";
     case "medium":
@@ -1343,6 +1526,22 @@ function fontWeight(key) {
       return "700";
     case "extrabold":
       return "800";
+    case "black":
+      return "900";
+    default:
+      return null;
+  }
+}
+function fontFamilyValue(theme, key) {
+  const fromTheme = theme.fontFamily?.[key];
+  if (fromTheme !== void 0) return fromTheme;
+  switch (key) {
+    case "sans":
+      return 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"';
+    case "serif":
+      return 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif';
+    case "mono":
+      return 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace';
     default:
       return null;
   }
@@ -1385,12 +1584,21 @@ function nativeShadowDeclarations(parsed) {
 }
 
 // src/jsEngine/resolveUtilityNative.ts
-function resolveTypographyNative(parsed) {
+function firstFontName(stack) {
+  const first = stack.split(",")[0] ?? stack;
+  return first.trim().replace(/^["']|["']$/g, "");
+}
+function resolveTypographyNative(parsed, theme) {
   switch (parsed.utility) {
     case "font": {
       if (parsed.value === null) return null;
+      if (parsed.isArbitrary) {
+        return [decl("font-family", firstFontName(parsed.value))];
+      }
       const w = fontWeight(parsed.value);
-      return w === null ? null : [decl("font-weight", w)];
+      if (w !== null) return [decl("font-weight", w)];
+      const family = fontFamilyValue(theme, parsed.value);
+      return family === null ? null : [decl("font-family", firstFontName(family))];
     }
     case "uppercase":
       return [decl("text-transform", "uppercase")];
@@ -1450,8 +1658,13 @@ function resolveColorNative(parsed, theme) {
       return null;
   }
 }
+function resolveOpacityNative(parsed) {
+  if (parsed.utility !== "opacity") return null;
+  const v = resolvePercent(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) ?? 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);
 }
 
 // src/jsEngine/resolveStyle.ts
@@ -1508,6 +1721,7 @@ var NUMERIC_LENGTH_PROPS = /* @__PURE__ */ new Set([
   "shadow-opacity",
   "shadow-radius",
   "elevation",
+  "opacity",
   // Per-side border width + per-corner radius — see resolvers/border.ts's
   // new borderSideValue/borderAxisValue/resolveRadiusSide additions; RN's
   // style system wants plain numbers for these exactly like the generic
@@ -1595,11 +1809,11 @@ function resolveStyle(classString, pressed = false) {
   const width = import_react_native2.Dimensions.get("window").width;
   const KbachModule = import_react_native2.TurboModuleRegistry.get("KbachModule");
   if (!KbachModule) {
-    const { style: style2, warnings: warnings2 } = resolveStyleJsWithWarnings(classString, (0, import_theme2.getTheme)(), colorScheme, pressed, width);
+    const { style: style2, warnings: warnings2 } = resolveStyleJsWithWarnings(classString, (0, import_theme.getTheme)(), colorScheme, pressed, width);
     warnIfDev(classString, warnings2);
     return style2;
   }
-  const json = KbachModule.resolveStyle(classString, (0, import_theme2.getThemeJson)(), colorScheme, pressed, width);
+  const json = KbachModule.resolveStyle(classString, (0, import_theme.getThemeJson)(), colorScheme, pressed, width);
   const style = JSON.parse(json);
   const warnings = style.__kbachWarnings;
   if (warnings !== void 0) {