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

package/README.md

@@ -172,6 +172,81 @@ dark mode — this palette's own convention is 1 = lightest, 12 = darkest, so
 that's the same visual weight relative to its own background, no manual
 `colors.blue[isDark ? 7 : 6]` needed.
 
+## Arbitrary math: `calc()`, `clamp()`, `min()`, `max()`
+
+```tsx
+<View className="p-[calc(16px+8px)]" />       // -> padding: 24
+<View className="w-[clamp(1rem,2rem,3rem)]" /> // -> width: 32
+```
+
+Resolves at **build/resolve time**, not runtime — every operand must be a
+constant `px`/`rem` length (or a bare number). This works because native has
+no CSS engine to evaluate a real `calc()` string at paint time, so the only
+way to support it at all is to compute the answer ourselves.
+
+A **percentage- or viewport-relative** expression (`calc(50%-0.5rem)`,
+`calc(10vw+8px)`) can't be reduced this way — it genuinely needs the
+parent's actual layout size, which doesn't exist until paint time on
+native. These already work fine on web (real CSS); on native the
+declaration is dropped and a `console.warn` explains why (dev builds only),
+rather than silently shipping an invalid value into the style object. Use a
+fraction utility (`w-1/2`) for relative sizing on native instead — see
+`resolvers/spacing.rs`'s `fraction_percent` — or resolve the value in JS.
+
+## Unknown-class warnings (typo detection)
+
+```tsx
+<View className="flexx-center" /> // real Kbach classes never have to guess — a typo warns
+```
+
+```
+Kbach: "flexx-center" doesn't match any known Kbach utility — typo? (skipped) (from className "flexx-center")
+```
+
+On native/dev-client builds, a class that doesn't match *any* Kbach
+utility on *any* platform gets a `console.warn` (dev builds only, printed
+once per unique message) instead of silently doing nothing — the same
+signal `@kbach/react`'s Vite plugin already gives you at build time on
+web, just at resolve time here instead. A real utility this engine simply
+doesn't support on native yet (`grid-cols-3`, `scale-150`, `blur`, ...)
+never warns — that's an intentional, documented platform gap (see
+`resolve_style.rs`'s own doc comment), not a typo, so it stays silent the
+same way it always has.
+
+Not available in Expo Go's pure-JS fallback engine today — that engine has
+no web-shaped resolver to check "is this a real Kbach utility at all"
+against, only the (smaller) native-supported subset, so it can't
+distinguish a genuine typo from a real-but-native-unsupported class
+without a much larger port. A real dev-client/CLI build always gets this
+check.
+
+## Dynamic tokens
+
+The native counterpart to a real CSS custom property — `var(--x)` already
+works in a `className` on Expo Web with zero help from this package (real
+CSS, resolved by the browser). This gives native the same className syntax:
+
+```tsx
+import { setDynamicToken, useDynamicToken } from '@kbach/react-native';
+
+setDynamicToken('sidebar-width', '240px'); // updates every subscribed element, on both platforms
+<View className="w-[var(--sidebar-width)]" />
+
+// Reading the raw value in JS, reactively:
+function Sidebar() {
+  const width = useDynamicToken('sidebar-width'); // '240px' | undefined
+}
+```
+
+On web, `setDynamicToken` writes the real CSS custom property to the DOM —
+every element using it repaints instantly via the browser's own CSS engine,
+no React re-render involved. On native, the className is substituted with
+the token's current value before every resolve, and an element referencing
+a token re-renders/repaints on its own when that specific token changes
+(same `key`-remount mechanism `dark:` and `sm:`/`md:`/... already use — see
+`jsxRuntimeCore.ts`'s own doc comments). An unregistered token name falls
+through to the same native invalid-value warning above.
+
 ## License
 
 MIT

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

@@ -1,6 +1,6 @@
 import {
   getTheme
-} from "./chunk-3ED4FIO2.mjs";
+} from "./chunk-OGFB3OXS.mjs";
 
 // src/darkModeStore.ts
 import { Appearance } from "react-native";
@@ -63,11 +63,45 @@ function seedDefaultMode(fallback) {
   notify();
 }
 
+// src/dynamicTokens.ts
+var tokens = /* @__PURE__ */ new Map();
+var listeners2 = /* @__PURE__ */ new Set();
+var version = 0;
+function applyToDom2(name, value) {
+  if (typeof document === "undefined") return;
+  document.documentElement.style.setProperty(`--${name}`, value);
+}
+function notify2() {
+  version++;
+  for (const listener of listeners2) listener();
+}
+function setDynamicToken(name, value) {
+  tokens.set(name, value);
+  applyToDom2(name, value);
+  notify2();
+}
+function getDynamicToken(name) {
+  return tokens.get(name);
+}
+function deleteDynamicToken(name) {
+  if (!tokens.delete(name)) return;
+  if (typeof document !== "undefined") document.documentElement.style.removeProperty(`--${name}`);
+  notify2();
+}
+function subscribeDynamicTokens(listener) {
+  listeners2.add(listener);
+  return () => listeners2.delete(listener);
+}
+
 export {
   getGlobalDarkMode,
   getGlobalThemeMode,
   setGlobalThemeMode,
   toggleGlobalDarkMode,
   subscribeGlobalDarkMode,
-  seedDefaultMode
+  seedDefaultMode,
+  setDynamicToken,
+  getDynamicToken,
+  deleteDynamicToken,
+  subscribeDynamicTokens
 };

package/dist/{chunk-6ML62O2R.mjs → chunk-MJWWZJMH.mjs}

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