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

package/dist/{chunk-MJWWZJMH.mjs → chunk-OS7EPBH5.mjs}

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

package/dist/{chunk-45GOGUHJ.mjs → chunk-TS2EEVOE.mjs}

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

package/dist/dynamicTokens.d.ts

@@ -18,10 +18,11 @@
  * Deliberately ONE listener set shared by every token, not per-token
  * subscriptions — same trade-off `darkModeStore.ts` already makes for
  * "any relevant change re-renders every subscribed element" simplicity.
- * `jsxRuntimeCore.ts`'s own key-suffix scoping (only the SPECIFIC token
- * names a given className references) is what keeps an unrelated token
- * change from forcing an unnecessary remount on an element that doesn't
- * use it, same shape as the responsive-breakpoint scoping already does.
+ * An unrelated token's change still re-renders every subscribed element
+ * (there's no per-token filtering), but `substituteDynamicTokens` in
+ * `jsxRuntimeCore.ts` re-reads each token's CURRENT value fresh on every
+ * one of those re-renders, so the resolved style stays correct regardless
+ * — the redundant re-render is a cheap, accepted trade-off, not a bug.
  */
 /** `name` is the bare token name, WITHOUT the leading `--` (matching how `getDynamicToken`/`var(--name)` substitution both address it). */
 declare function setDynamicToken(name: string, value: string): void;

package/dist/index.js

@@ -135,11 +135,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-",
@@ -324,11 +334,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":
@@ -375,6 +416,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":
@@ -409,6 +456,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":
@@ -449,10 +508,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;
   }
@@ -979,6 +1071,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;
   }
@@ -1015,6 +1117,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;
   }
@@ -1023,6 +1131,10 @@ function fontWeight(key) {
   switch (key) {
     case "thin":
       return "100";
+    case "extralight":
+      return "200";
+    case "light":
+      return "300";
     case "normal":
       return "400";
     case "medium":
@@ -1033,6 +1145,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;
   }
@@ -1075,12 +1203,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")];
@@ -1140,8 +1277,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/calc.ts
@@ -1345,6 +1487,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