@kbach/react-native 1.0.0-beta.16 → 1.0.0-beta.17

package/dist/dynamicTokens.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Cross-platform runtime-settable style values — the native counterpart to
+ * a real CSS custom property. Real `var(--sidebar-width)` already works on
+ * Expo Web today with ZERO code here (raw CSS text, resolved by the
+ * browser's own engine — see `jsxRuntimeCoreWeb.ts`, which does no
+ * className rewriting at all). Native has no such thing: RN's style system
+ * needs an actual JS-computed value at render time, so this module exists
+ * to give `var(--x)` an equivalent that works there too — same
+ * "module-level store is the real source of truth, no Context required"
+ * architecture as `darkModeStore.ts`, and `setDynamicToken` ALSO writes the
+ * real CSS custom property to the DOM when one exists (mirroring that
+ * file's own `applyToDom`), so a single call updates both platforms
+ * identically: instantly via native CSS reactivity on web, via this
+ * store's subscribers (see `jsxRuntimeCore.ts`'s `ReactiveElement`, which
+ * substitutes a registered token's current value into the className
+ * string before every resolve) on native.
+ *
+ * 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.
+ */
+/** `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;
+declare function getDynamicToken(name: string): string | undefined;
+declare function deleteDynamicToken(name: string): void;
+declare function subscribeDynamicTokens(listener: () => void): () => void;
+declare function getDynamicTokensVersion(): number;
+/** Exported for tests only — resets every module-level field back to its as-if-just-imported state. */
+declare function _resetForTests(): void;
+
+export { _resetForTests, deleteDynamicToken, getDynamicToken, getDynamicTokensVersion, setDynamicToken, subscribeDynamicTokens };

package/dist/dynamicTokens.js

@@ -0,0 +1,75 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/dynamicTokens.ts
+var dynamicTokens_exports = {};
+__export(dynamicTokens_exports, {
+  _resetForTests: () => _resetForTests,
+  deleteDynamicToken: () => deleteDynamicToken,
+  getDynamicToken: () => getDynamicToken,
+  getDynamicTokensVersion: () => getDynamicTokensVersion,
+  setDynamicToken: () => setDynamicToken,
+  subscribeDynamicTokens: () => subscribeDynamicTokens
+});
+module.exports = __toCommonJS(dynamicTokens_exports);
+var tokens = /* @__PURE__ */ new Map();
+var listeners = /* @__PURE__ */ new Set();
+var version = 0;
+function applyToDom(name, value) {
+  if (typeof document === "undefined") return;
+  document.documentElement.style.setProperty(`--${name}`, value);
+}
+function notify() {
+  version++;
+  for (const listener of listeners) listener();
+}
+function setDynamicToken(name, value) {
+  tokens.set(name, value);
+  applyToDom(name, value);
+  notify();
+}
+function getDynamicToken(name) {
+  return tokens.get(name);
+}
+function deleteDynamicToken(name) {
+  if (!tokens.delete(name)) return;
+  if (typeof document !== "undefined") document.documentElement.style.removeProperty(`--${name}`);
+  notify();
+}
+function subscribeDynamicTokens(listener) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+function getDynamicTokensVersion() {
+  return version;
+}
+function _resetForTests() {
+  tokens.clear();
+  listeners.clear();
+  version = 0;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  _resetForTests,
+  deleteDynamicToken,
+  getDynamicToken,
+  getDynamicTokensVersion,
+  setDynamicToken,
+  subscribeDynamicTokens
+});

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export { ColorEntry, ContainerConfig, ThemeConfig, defaultTheme, getTheme, setTheme } from './theme';
-export { C as ColorScale, a as ColorsAPI, K as KbachConfig, T as ThemeProvider, b as ThemeProviderProps, c as ThemeState, d as applyKbachConfig, r as resolveKbachConfig, u as useColors, e as useTheme } from './useColors-Br8QhIlE.js';
+export { C as ColorScale, a as ColorsAPI, K as KbachConfig, T as ThemeProvider, b as ThemeProviderProps, c as ThemeState, d as applyKbachConfig, r as resolveKbachConfig, u as useColors, e as useDynamicToken, f as useTheme } from './useDynamicToken-Dr15c88t.js';
 export { ThemeMode, getGlobalDarkMode, getGlobalThemeMode, setGlobalThemeMode, subscribeGlobalDarkMode, toggleGlobalDarkMode } from './darkModeStore';
+export { deleteDynamicToken, getDynamicToken, setDynamicToken, subscribeDynamicTokens } from './dynamicTokens';
 import 'react';
 
 type StyleValue = string | number | {
@@ -79,6 +80,19 @@ interface StyleObject {
  * exactly as before. The JS engine covers a strict subset of what the
  * native/WASM engines resolve (see jsEngine/resolveUtilityNative.ts) — an
  * intentional, documented parity gap, not a bug.
+ *
+ * An arbitrary value that couldn't be resolved to something RN's style
+ * system can actually use (an unreduced percentage/viewport-relative
+ * `calc()`, a raw `var(...)`, ...) is dropped from the returned style —
+ * never passed through as an invalid string — and surfaced via
+ * `console.warn` here (dev builds only, mirroring RN's own convention for
+ * this kind of non-fatal correctness warning) rather than failing
+ * silently. The native/JNI path embeds these under a `"__kbachWarnings"`
+ * key in the same JSON `resolve_style_json` already returns (see that
+ * function's own doc comment for why — reusing the one JSON round-trip
+ * rather than adding a second FFI call); the jsEngine fallback returns
+ * them directly via `resolveStyleJsWithWarnings`. Both paths converge here
+ * so call sites never need to know which engine actually resolved anything.
  */
 declare function resolveStyle(classString: string, pressed?: boolean): StyleObject;
 

package/dist/index.js

@@ -23,16 +23,21 @@ __export(src_exports, {
   ThemeProvider: () => ThemeProvider,
   applyKbachConfig: () => applyKbachConfig,
   defaultTheme: () => import_theme4.defaultTheme,
+  deleteDynamicToken: () => import_dynamicTokens2.deleteDynamicToken,
+  getDynamicToken: () => import_dynamicTokens2.getDynamicToken,
   getGlobalDarkMode: () => import_darkModeStore4.getGlobalDarkMode,
   getGlobalThemeMode: () => import_darkModeStore4.getGlobalThemeMode,
   getTheme: () => import_theme4.getTheme,
   resolveKbachConfig: () => resolveKbachConfig,
   resolveStyle: () => resolveStyle,
+  setDynamicToken: () => import_dynamicTokens2.setDynamicToken,
   setGlobalThemeMode: () => import_darkModeStore4.setGlobalThemeMode,
   setTheme: () => import_theme4.setTheme,
+  subscribeDynamicTokens: () => import_dynamicTokens2.subscribeDynamicTokens,
   subscribeGlobalDarkMode: () => import_darkModeStore4.subscribeGlobalDarkMode,
   toggleGlobalDarkMode: () => import_darkModeStore4.toggleGlobalDarkMode,
   useColors: () => useColors,
+  useDynamicToken: () => useDynamicToken,
   useTheme: () => useTheme
 });
 module.exports = __toCommonJS(src_exports);
@@ -1139,6 +1144,153 @@ 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) {
@@ -1208,25 +1360,41 @@ var NUMERIC_LENGTH_PROPS = /* @__PURE__ */ new Set([
   "outline-width",
   "outline-offset"
 ]);
+function isPlainPercentage(value) {
+  if (!value.endsWith("%")) return false;
+  let digits = value.slice(0, -1);
+  if (digits.startsWith("-")) digits = digits.slice(1);
+  return digits.length > 0 && /^[0-9.]+$/.test(digits);
+}
 function rnStyleValue(property, value) {
-  if (NUMERIC_LENGTH_PROPS.has(property)) {
-    let px = null;
-    if (value.endsWith("px")) {
-      const n = Number(value.slice(0, -2));
-      px = Number.isFinite(n) ? n : null;
-    } else if (value.endsWith("rem")) {
-      const n = Number(value.slice(0, -3));
-      px = Number.isFinite(n) ? n * 16 : null;
-    } else {
-      const n = Number(value);
-      px = value.trim() !== "" && Number.isFinite(n) ? n : null;
-    }
-    if (px !== null) return px;
+  if (!NUMERIC_LENGTH_PROPS.has(property)) {
+    return { value, warning: null };
+  }
+  let px = null;
+  if (value.endsWith("px")) {
+    const n = Number(value.slice(0, -2));
+    px = Number.isFinite(n) ? n : null;
+  } else if (value.endsWith("rem")) {
+    const n = Number(value.slice(0, -3));
+    px = Number.isFinite(n) ? n * 16 : null;
+  } else {
+    const n = Number(value);
+    px = value.trim() !== "" && Number.isFinite(n) ? n : null;
   }
-  return value;
+  if (px !== null) return { value: px, warning: null };
+  if (isPlainPercentage(value)) {
+    return { value, warning: null };
+  }
+  const reduced = reduceConstantMath(value);
+  if (reduced !== null) {
+    return { value: reduced, warning: null };
+  }
+  const warning = `Kbach: "${value}" is not a valid native value for "${property}" \u2014 dropped. calc()/clamp()/min()/max() only resolve on native when every operand is a constant px/rem length (no %, vw, vh, var(), or other viewport/CSS-variable units \u2014 those need real layout/DOM, which doesn't exist on native at paint time). Use a plain px/rem calc, a fraction utility (e.g. w-1/2), or resolve this value in JS instead.`;
+  return { value: null, warning };
 }
-function resolveStyleJs(classString, theme, colorScheme, pressed, width) {
+function resolveStyleJsWithWarnings(classString, theme, colorScheme, pressed, width) {
   const style = {};
+  const warnings = [];
   let shadowOffset = null;
   for (const token of classString.split(/\s+/).filter(Boolean)) {
     const parsed = parseClass(token);
@@ -1247,13 +1415,15 @@ function resolveStyleJs(classString, theme, colorScheme, pressed, width) {
         shadowOffset[d.property === "shadow-offset-x" ? "width" : "height"] = n;
         continue;
       }
-      style[kebabToCamel(d.property)] = rnStyleValue(d.property, d.value);
+      const { value, warning } = rnStyleValue(d.property, d.value);
+      if (warning !== null) warnings.push(warning);
+      if (value !== null) style[kebabToCamel(d.property)] = value;
     }
   }
   if (shadowOffset !== null) {
     style.shadowOffset = { width: shadowOffset.width ?? 0, height: shadowOffset.height ?? 0 };
   }
-  return style;
+  return { style, warnings };
 }
 
 // src/nativeBridge.ts
@@ -1262,10 +1432,29 @@ function resolveStyle(classString, pressed = false) {
   const width = import_react_native.Dimensions.get("window").width;
   const KbachModule = import_react_native.TurboModuleRegistry.get("KbachModule");
   if (!KbachModule) {
-    return resolveStyleJs(classString, (0, import_theme.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_theme.getThemeJson)(), colorScheme, pressed, width);
-  return JSON.parse(json);
+  const style = JSON.parse(json);
+  const warnings = style.__kbachWarnings;
+  if (warnings !== void 0) {
+    delete style.__kbachWarnings;
+    warnIfDev(classString, warnings);
+  }
+  return style;
+}
+var warnedMessages = /* @__PURE__ */ new Set();
+function warnIfDev(classString, warnings) {
+  if (warnings.length === 0) return;
+  if (typeof __DEV__ !== "undefined" && !__DEV__) return;
+  for (const warning of warnings) {
+    const message = `${warning} (from className "${classString}")`;
+    if (warnedMessages.has(message)) continue;
+    warnedMessages.add(message);
+    console.warn(message);
+  }
 }
 
 // src/config.ts
@@ -1439,20 +1628,35 @@ function useColors() {
   const { isDark } = useTheme();
   return makeColorsProxy((0, import_theme3.getTheme)(), isDark);
 }
+
+// src/index.ts
+var import_dynamicTokens2 = require("./dynamicTokens");
+
+// src/useDynamicToken.ts
+var import_react3 = require("react");
+var import_dynamicTokens = require("./dynamicTokens");
+function useDynamicToken(name) {
+  return (0, import_react3.useSyncExternalStore)(import_dynamicTokens.subscribeDynamicTokens, () => (0, import_dynamicTokens.getDynamicToken)(name));
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ThemeProvider,
   applyKbachConfig,
   defaultTheme,
+  deleteDynamicToken,
+  getDynamicToken,
   getGlobalDarkMode,
   getGlobalThemeMode,
   getTheme,
   resolveKbachConfig,
   resolveStyle,
+  setDynamicToken,
   setGlobalThemeMode,
   setTheme,
+  subscribeDynamicTokens,
   subscribeGlobalDarkMode,
   toggleGlobalDarkMode,
   useColors,
+  useDynamicToken,
   useTheme
 });

package/dist/index.web.d.ts

@@ -1,6 +1,7 @@
 export { ColorEntry, ContainerConfig, ThemeConfig, defaultTheme, getTheme, setTheme } from './theme';
-export { C as ColorScale, a as ColorsAPI, K as KbachConfig, T as ThemeProvider, b as ThemeProviderProps, c as ThemeState, d as applyKbachConfig, r as resolveKbachConfig, u as useColors, e as useTheme } from './useColors-Br8QhIlE.js';
+export { C as ColorScale, a as ColorsAPI, K as KbachConfig, T as ThemeProvider, b as ThemeProviderProps, c as ThemeState, d as applyKbachConfig, r as resolveKbachConfig, u as useColors, e as useDynamicToken, f as useTheme } from './useDynamicToken-Dr15c88t.js';
 export { ThemeMode, getGlobalDarkMode, getGlobalThemeMode, setGlobalThemeMode, subscribeGlobalDarkMode, toggleGlobalDarkMode } from './darkModeStore';
+export { deleteDynamicToken, getDynamicToken, setDynamicToken, subscribeDynamicTokens } from './dynamicTokens';
 import 'react';
 
 /**