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

package/dist/index.web.mjs

@@ -1,38 +1,210 @@
 import {
-  ThemeProvider,
-  applyKbachConfig,
-  resolveKbachConfig,
-  useColors,
-  useTheme
-} from "./chunk-TDWBXJH5.mjs";
-import {
-  resolveClassName
-} from "./chunk-AXGAYOQ7.mjs";
-import {
+  deleteDynamicToken,
+  getDynamicToken,
   getGlobalDarkMode,
   getGlobalThemeMode,
+  seedDefaultMode,
+  setDynamicToken,
   setGlobalThemeMode,
+  subscribeDynamicTokens,
   subscribeGlobalDarkMode,
   toggleGlobalDarkMode
-} from "./chunk-RBJXE32L.mjs";
+} from "./chunk-45GOGUHJ.mjs";
 import {
   defaultTheme,
   getTheme,
+  resolveClassName,
   setTheme
-} from "./chunk-HK6PDJJK.mjs";
+} from "./chunk-OGFB3OXS.mjs";
+
+// src/config.ts
+function parseHexRgb(hex) {
+  const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m) return null;
+  let h = m[1];
+  if (h.length === 3) h = h.split("").map((c) => c + c).join("");
+  const n = parseInt(h, 16);
+  return [n >> 16 & 255, n >> 8 & 255, n & 255];
+}
+function applyOpacityToHex(hex, opacityText) {
+  const rgb = parseHexRgb(hex);
+  if (!rgb) return hex;
+  const a = Number(opacityText) / 100;
+  const clamped = Number.isFinite(a) ? Math.min(1, Math.max(0, a)) : 1;
+  return `rgba(${rgb.join(",")},${clamped})`;
+}
+function resolveColorEntry(value, lookup) {
+  const slash = value.indexOf("/");
+  const name = slash === -1 ? value : value.slice(0, slash);
+  const opacity = slash === -1 ? void 0 : value.slice(slash + 1);
+  const base = lookup(name);
+  if (base === void 0) return value;
+  return opacity === void 0 ? base : applyOpacityToHex(base, opacity);
+}
+function resolveColors(extend, existing) {
+  const resolved = {};
+  const lookup = (name) => {
+    const found = resolved[name] ?? existing[name];
+    return typeof found === "string" ? found : void 0;
+  };
+  for (const [name, value] of Object.entries(extend)) {
+    resolved[name] = resolveColorEntry(value, lookup);
+  }
+  return resolved;
+}
+function resolveKbachConfig(config) {
+  let theme = { ...defaultTheme, ...config.theme };
+  if (config.extend?.colors) {
+    theme = { ...theme, colors: { ...theme.colors, ...resolveColors(config.extend.colors, theme.colors) } };
+  }
+  if (config.extend?.spacing) {
+    theme = { ...theme, spacing: { ...theme.spacing, ...config.extend.spacing } };
+  }
+  if (config.extend?.screens) {
+    theme = { ...theme, screens: { ...theme.screens, ...config.extend.screens } };
+  }
+  if (config.extend?.fontFamily) {
+    theme = { ...theme, fontFamily: { ...theme.fontFamily, ...config.extend.fontFamily } };
+  }
+  if (config.extend?.container) {
+    theme = { ...theme, container: { ...theme.container, ...config.extend.container } };
+  }
+  if (config.darkMode) {
+    theme = { ...theme, darkMode: config.darkMode };
+  }
+  return theme;
+}
+function applyKbachConfig(config) {
+  const theme = resolveKbachConfig(config);
+  setTheme(theme);
+  return theme;
+}
+
+// src/useTheme.ts
+import { useMemo, useSyncExternalStore } from "react";
+function useTheme() {
+  const isDark = useSyncExternalStore(subscribeGlobalDarkMode, getGlobalDarkMode);
+  const mode = useSyncExternalStore(subscribeGlobalDarkMode, getGlobalThemeMode);
+  return useMemo(
+    () => ({ mode, isDark, setMode: setGlobalThemeMode, toggle: toggleGlobalDarkMode }),
+    [mode, isDark]
+  );
+}
+
+// src/ThemeProvider.tsx
+import { useEffect, useRef } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+var mountedProviderCount = 0;
+var warnedMultipleProviders = false;
+function ThemeProvider({ children, defaultMode = "system" }) {
+  useEffect(() => {
+    mountedProviderCount++;
+    if (mountedProviderCount > 1 && !warnedMultipleProviders) {
+      warnedMultipleProviders = true;
+      console.warn(
+        "[kbach] Multiple <ThemeProvider> instances are mounted at once. Dark-mode state is one global store useTheme() reads everywhere, not scoped per-provider, so their defaultMode seeds will fight over the same state."
+      );
+    }
+    return () => {
+      mountedProviderCount--;
+    };
+  }, []);
+  const seeded = useRef(false);
+  useEffect(() => {
+    if (seeded.current) return;
+    seeded.current = true;
+    seedDefaultMode(defaultMode);
+  }, []);
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+
+// src/useColors.ts
+function parseHexRgb2(hex) {
+  const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m) return null;
+  let h = m[1];
+  if (h.length === 3) h = h.split("").map((c) => c + c).join("");
+  const n = parseInt(h, 16);
+  return [n >> 16 & 255, n >> 8 & 255, n & 255];
+}
+function applyOpacity(color, opacity) {
+  const a = Math.max(0, Math.min(1, opacity / 100));
+  if (color.startsWith("#")) {
+    const rgb = parseHexRgb2(color);
+    return rgb ? `rgba(${rgb.join(",")},${a})` : color;
+  }
+  if (color.startsWith("rgb(")) return color.replace("rgb(", "rgba(").replace(")", `,${a})`);
+  if (color.startsWith("rgba(")) return color.replace(/,\s*[\d.]+\)$/, `,${a})`);
+  return color;
+}
+function resolveEntry(entry, isDark) {
+  return typeof entry === "string" ? entry : isDark ? entry.dark : entry.light;
+}
+function makeColorsProxy(theme, isDark) {
+  const alpha = (color, opacity) => opacity === void 0 ? color : applyOpacity(color, opacity);
+  const cache = /* @__PURE__ */ new Map();
+  function resolveNamed(key) {
+    let name = key;
+    let opacity;
+    if (key.includes("/")) {
+      const slash = key.indexOf("/");
+      name = key.slice(0, slash);
+      opacity = Number(key.slice(slash + 1));
+    }
+    const entry = theme.colors[name];
+    if (entry === void 0) return void 0;
+    const value = resolveEntry(entry, isDark);
+    return opacity === void 0 ? value : applyOpacity(value, opacity);
+  }
+  function makeFamilyProxy(family) {
+    return new Proxy({}, {
+      get(_, prop) {
+        const key = String(prop);
+        if (key === "then") return void 0;
+        return resolveNamed(`${family}-${key}`);
+      }
+    });
+  }
+  return new Proxy({ alpha }, {
+    get(_, prop) {
+      const key = String(prop);
+      if (key === "then") return void 0;
+      if (key === "alpha") return alpha;
+      const direct = resolveNamed(key);
+      if (direct !== void 0) return direct;
+      if (!cache.has(key)) cache.set(key, makeFamilyProxy(key));
+      return cache.get(key);
+    }
+  });
+}
+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