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

package/dist/index.web.mjs

@@ -1,17 +1,21 @@
 import {
+  deleteDynamicToken,
+  getDynamicToken,
   getGlobalDarkMode,
   getGlobalThemeMode,
   seedDefaultMode,
+  setDynamicToken,
   setGlobalThemeMode,
+  subscribeDynamicTokens,
   subscribeGlobalDarkMode,
   toggleGlobalDarkMode
-} from "./chunk-XGQWM65X.mjs";
+} from "./chunk-45GOGUHJ.mjs";
 import {
   defaultTheme,
   getTheme,
   resolveClassName,
   setTheme
-} from "./chunk-3ED4FIO2.mjs";
+} from "./chunk-OGFB3OXS.mjs";
 
 // src/config.ts
 function parseHexRgb(hex) {
@@ -177,19 +181,30 @@ function useColors() {
   const { isDark } = useTheme();
   return makeColorsProxy(getTheme(), isDark);
 }
+
+// src/useDynamicToken.ts
+import { useSyncExternalStore as useSyncExternalStore2 } from "react";
+function useDynamicToken(name) {
+  return useSyncExternalStore2(subscribeDynamicTokens, () => getDynamicToken(name));
+}
 export {
   ThemeProvider,
   applyKbachConfig,
   defaultTheme,
+  deleteDynamicToken,
+  getDynamicToken,
   getGlobalDarkMode,
   getGlobalThemeMode,
   getTheme,
   resolveClassName,
   resolveKbachConfig,
+  setDynamicToken,
   setGlobalThemeMode,
   setTheme,
+  subscribeDynamicTokens,
   subscribeGlobalDarkMode,
   toggleGlobalDarkMode,
   useColors,
+  useDynamicToken,
   useTheme
 };

package/dist/jsx-dev-runtime.js

@@ -30,12 +30,21 @@ var import_jsx_runtime = require("react/jsx-runtime");
 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");
+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;
+  });
+}
 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(classStrRaw, pressed);
+  const resolved = resolveStyle2(substituteDynamicTokens(classStrRaw), pressed);
   if (userStyle === void 0) {
     return resolved;
   }
@@ -60,6 +69,12 @@ function breakpointKeySuffix(classStrRaw, width) {
   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 ReactiveElement({
   hostType,
   hostRest,
@@ -70,9 +85,10 @@ function ReactiveElement({
   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 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);
+  const suffix = darkModeKeySuffix(classStrRaw) + breakpointKeySuffix(classStrRaw, width) + dynamicTokenKeySuffix(classStrRaw);
   const finalKey = suffix ? `${elementKey ?? ""}${suffix}` : elementKey;
   return makeElement(isStaticChildren, hostType, { ...hostRest, style: finalStyle }, finalKey);
 }
@@ -84,7 +100,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)) {
+  if (DARK_MODIFIER_RE.test(classStrRaw) || BREAKPOINT_MODIFIER_RE.test(classStrRaw) || classStrRaw.includes("var(--")) {
     return (0, import_jsx_runtime.jsx)(
       ReactiveElement,
       { hostType: type, hostRest: rest, classStrRaw, userStyle, resolveStyle: resolveStyle2, elementKey: key, isStaticChildren },
@@ -1215,6 +1231,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) {
@@ -1284,25 +1447,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;
+  }
+  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 };
   }
-  return value;
+  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);
@@ -1323,13 +1502,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
@@ -1338,10 +1519,29 @@ function resolveStyle(classString, pressed = false) {
   const width = import_react_native2.Dimensions.get("window").width;
   const KbachModule = import_react_native2.TurboModuleRegistry.get("KbachModule");
   if (!KbachModule) {
-    return resolveStyleJs(classString, (0, import_theme2.getTheme)(), colorScheme, pressed, width);
+    const { style: style2, warnings: warnings2 } = resolveStyleJsWithWarnings(classString, (0, import_theme2.getTheme)(), colorScheme, pressed, width);
+    warnIfDev(classString, warnings2);
+    return style2;
   }
   const json = KbachModule.resolveStyle(classString, (0, import_theme2.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/jsx-runtime.tsx