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

package/README.md

@@ -173,8 +173,26 @@ optional, for seeding a startup default. Outside React, use
 `getGlobalDarkMode()`/`toggleGlobalDarkMode()` instead.
 
 Follows the OS setting live until overridden, and isn't persisted across
-app launches (no built-in storage dependency). To persist, read your own
-storage at startup and call `setGlobalThemeMode()` before your first render.
+app launches by default (no forced storage dependency). To persist, pass
+any async key-value store exposing `getItem`/`setItem` as `<ThemeProvider
+persist>` — `@react-native-async-storage/async-storage`'s default export
+already matches this shape exactly:
+
+```tsx
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { ThemeProvider } from '@kbach/react-native';
+
+<ThemeProvider persist={AsyncStorage}>
+  <App />
+</ThemeProvider>;
+```
+
+The persisted mode (if any) is read once on mount and wins over
+`defaultMode`; every later explicit choice is written back automatically.
+`false` by default — this package still never imports a storage library
+itself, so nothing changes for apps that don't opt in. Prefer wiring your
+own storage manually instead? `setGlobalThemeMode()` before your first
+render still works exactly as before.
 
 ## Reading colors as values
 
@@ -222,12 +240,15 @@ way — no such unit exists on native at all. It already works fine on web
 (real CSS); on native the declaration is dropped and a `console.warn`
 explains why (dev builds only).
 
-**Percentage-relative width/height** (`calc(100%-3rem)`, `calc(50%+16px)`)
-IS supported, differently: since native has no way to know "100% of what"
-ahead of time, this measures the element's own real layout instead —
+**Percentage-relative width/height** (`calc(100%-3rem)`, `calc(50%+16px)`,
+`min(50%,20rem)`, `max(1rem,5%)`, `clamp(16rem,50%,32rem)`) IS supported,
+differently: since native has no way to know "100% of what" ahead of time,
+this measures the element's own real layout instead —
 
 ```tsx
 <View className="w-[calc(100%_-_3rem)]" />
+<View className="w-[min(50%,20rem)]" />        // half the parent, capped at a fixed size
+<View className="w-[clamp(16rem,50%,32rem)]" />
 ```
 
 Renders once at a plain `100%` (a real RN percentage, resolved correctly by
@@ -236,9 +257,14 @@ event, then immediately corrects to the actual computed number once
 measured — a genuine one-frame measure-then-snap, not instant math like the
 constant-only case above, and it keeps re-measuring on every layout (screen
 rotation, parent resize, ...) rather than freezing after the first value.
-Scoped to exactly one percentage term plus one constant term on `width`/
-`height` only — `calc(50%-50%)`, other properties, or anything with `*`/`/`
-falls through to the same drop-and-warn behavior as before.
+Scoped narrowly, same "reduce fully or bail" philosophy as the constant-only
+case: `calc()` takes exactly one percentage term plus one constant term;
+`min()`/`max()` take two or more comma-separated arguments, each EITHER a
+plain percentage or a constant px/rem expression (not both mixed in one
+argument — `min(50%-1rem,20rem)` is out of scope); `clamp()` takes exactly
+three. `width`/`height` only in every case — other properties, or anything
+that doesn't reduce fully, falls through to the same drop-and-warn behavior
+as before.
 
 **Arbitrary values can't contain literal spaces** — this is a pre-existing
 rule (real Tailwind has the same one), not specific to `calc()`: a space

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 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 useDynamicToken, f as useTheme } from './useDynamicToken-Dr15c88t.js';
+export { C as ColorScale, a as ColorsAPI, K as KbachConfig, T as ThemeProvider, b as ThemeProviderProps, c as ThemeState, d as ThemeStorageAdapter, e as applyKbachConfig, r as resolveKbachConfig, u as useColors, f as useDynamicToken, g as useTheme } from './useDynamicToken-DAHQob1u.js';
 export { ThemeMode, getGlobalDarkMode, getGlobalThemeMode, setGlobalThemeMode, subscribeGlobalDarkMode, toggleGlobalDarkMode } from './darkModeStore';
 export { deleteDynamicToken, getDynamicToken, setDynamicToken, subscribeDynamicTokens } from './dynamicTokens';
 import 'react';

package/dist/index.js

@@ -1680,9 +1680,13 @@ function useTheme() {
 var import_react2 = require("react");
 var import_darkModeStore3 = require("./darkModeStore");
 var import_jsx_runtime = require("react/jsx-runtime");
+var PERSIST_STORAGE_KEY = "kbach-theme";
+function isThemeMode(value) {
+  return value === "light" || value === "dark" || value === "system";
+}
 var mountedProviderCount = 0;
 var warnedMultipleProviders = false;
-function ThemeProvider({ children, defaultMode = "system" }) {
+function ThemeProvider({ children, defaultMode = "system", persist = false }) {
   (0, import_react2.useEffect)(() => {
     mountedProviderCount++;
     if (mountedProviderCount > 1 && !warnedMultipleProviders) {
@@ -1699,8 +1703,29 @@ function ThemeProvider({ children, defaultMode = "system" }) {
   (0, import_react2.useEffect)(() => {
     if (seeded.current) return;
     seeded.current = true;
-    (0, import_darkModeStore3.seedDefaultMode)(defaultMode);
+    if (!persist) {
+      (0, import_darkModeStore3.seedDefaultMode)(defaultMode);
+      return;
+    }
+    let cancelled = false;
+    persist.getItem(PERSIST_STORAGE_KEY).then((stored) => {
+      if (cancelled) return;
+      if (isThemeMode(stored)) (0, import_darkModeStore3.seedDefaultMode)(stored);
+      else (0, import_darkModeStore3.seedDefaultMode)(defaultMode);
+    }).catch(() => {
+      if (!cancelled) (0, import_darkModeStore3.seedDefaultMode)(defaultMode);
+    });
+    return () => {
+      cancelled = true;
+    };
   }, []);
+  (0, import_react2.useEffect)(() => {
+    if (!persist) return;
+    return (0, import_darkModeStore3.subscribeGlobalDarkMode)(() => {
+      persist.setItem(PERSIST_STORAGE_KEY, (0, import_darkModeStore3.getGlobalThemeMode)()).catch(() => {
+      });
+    });
+  }, [persist]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
 }
 

package/dist/index.web.d.ts

@@ -1,5 +1,5 @@
 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 useDynamicToken, f as useTheme } from './useDynamicToken-Dr15c88t.js';
+export { C as ColorScale, a as ColorsAPI, K as KbachConfig, T as ThemeProvider, b as ThemeProviderProps, c as ThemeState, e as applyKbachConfig, r as resolveKbachConfig, u as useColors, f as useDynamicToken, g as useTheme } from './useDynamicToken-DAHQob1u.js';
 export { ThemeMode, getGlobalDarkMode, getGlobalThemeMode, setGlobalThemeMode, subscribeGlobalDarkMode, toggleGlobalDarkMode } from './darkModeStore';
 export { deleteDynamicToken, getDynamicToken, setDynamicToken, subscribeDynamicTokens } from './dynamicTokens';
 import 'react';

package/dist/index.web.js

@@ -311,9 +311,13 @@ function useTheme() {
 var import_react2 = require("react");
 var import_darkModeStore2 = require("./darkModeStore");
 var import_jsx_runtime = require("react/jsx-runtime");
+var PERSIST_STORAGE_KEY = "kbach-theme";
+function isThemeMode(value) {
+  return value === "light" || value === "dark" || value === "system";
+}
 var mountedProviderCount = 0;
 var warnedMultipleProviders = false;
-function ThemeProvider({ children, defaultMode = "system" }) {
+function ThemeProvider({ children, defaultMode = "system", persist = false }) {
   (0, import_react2.useEffect)(() => {
     mountedProviderCount++;
     if (mountedProviderCount > 1 && !warnedMultipleProviders) {
@@ -330,8 +334,29 @@ function ThemeProvider({ children, defaultMode = "system" }) {
   (0, import_react2.useEffect)(() => {
     if (seeded.current) return;
     seeded.current = true;
-    (0, import_darkModeStore2.seedDefaultMode)(defaultMode);
+    if (!persist) {
+      (0, import_darkModeStore2.seedDefaultMode)(defaultMode);
+      return;
+    }
+    let cancelled = false;
+    persist.getItem(PERSIST_STORAGE_KEY).then((stored) => {
+      if (cancelled) return;
+      if (isThemeMode(stored)) (0, import_darkModeStore2.seedDefaultMode)(stored);
+      else (0, import_darkModeStore2.seedDefaultMode)(defaultMode);
+    }).catch(() => {
+      if (!cancelled) (0, import_darkModeStore2.seedDefaultMode)(defaultMode);
+    });
+    return () => {
+      cancelled = true;
+    };
   }, []);
+  (0, import_react2.useEffect)(() => {
+    if (!persist) return;
+    return (0, import_darkModeStore2.subscribeGlobalDarkMode)(() => {
+      persist.setItem(PERSIST_STORAGE_KEY, (0, import_darkModeStore2.getGlobalThemeMode)()).catch(() => {
+      });
+    });
+  }, [persist]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
 }
 

package/dist/index.web.mjs

@@ -94,9 +94,13 @@ function useTheme() {
 // src/ThemeProvider.tsx
 import { useEffect, useRef } from "react";
 import { Fragment, jsx } from "react/jsx-runtime";
+var PERSIST_STORAGE_KEY = "kbach-theme";
+function isThemeMode(value) {
+  return value === "light" || value === "dark" || value === "system";
+}
 var mountedProviderCount = 0;
 var warnedMultipleProviders = false;
-function ThemeProvider({ children, defaultMode = "system" }) {
+function ThemeProvider({ children, defaultMode = "system", persist = false }) {
   useEffect(() => {
     mountedProviderCount++;
     if (mountedProviderCount > 1 && !warnedMultipleProviders) {
@@ -113,8 +117,29 @@ function ThemeProvider({ children, defaultMode = "system" }) {
   useEffect(() => {
     if (seeded.current) return;
     seeded.current = true;
-    seedDefaultMode(defaultMode);
+    if (!persist) {
+      seedDefaultMode(defaultMode);
+      return;
+    }
+    let cancelled = false;
+    persist.getItem(PERSIST_STORAGE_KEY).then((stored) => {
+      if (cancelled) return;
+      if (isThemeMode(stored)) seedDefaultMode(stored);
+      else seedDefaultMode(defaultMode);
+    }).catch(() => {
+      if (!cancelled) seedDefaultMode(defaultMode);
+    });
+    return () => {
+      cancelled = true;
+    };
   }, []);
+  useEffect(() => {
+    if (!persist) return;
+    return subscribeGlobalDarkMode(() => {
+      persist.setItem(PERSIST_STORAGE_KEY, getGlobalThemeMode()).catch(() => {
+      });
+    });
+  }, [persist]);
   return /* @__PURE__ */ jsx(Fragment, { children });
 }
 

package/dist/jsx-dev-runtime.js

@@ -205,6 +205,46 @@ function parsePercentRelativeCalc(token) {
 function resolvePercentRelativeCalc(basisPx, calc) {
   return basisPx * calc.percentCoefficient / 100 + calc.constantPx;
 }
+var PERCENT_MIN_MAX_CLAMP_TOKEN_RE = /^(w|h)-\[(min|max|clamp)\(([^)]+)\)\]$/;
+function parseOperand(arg) {
+  const trimmed = arg.trim();
+  const pct = /^(-?[\d.]+)%$/.exec(trimmed);
+  if (pct) {
+    const percentCoefficient = Number(pct[1]);
+    return Number.isFinite(percentCoefficient) ? { percentCoefficient, constantPx: 0 } : null;
+  }
+  const constantPx = reduceConstantMath(`calc(${trimmed})`);
+  return constantPx === null ? null : { percentCoefficient: 0, constantPx };
+}
+function parsePercentRelativeMinMaxClamp(token) {
+  const m = PERCENT_MIN_MAX_CLAMP_TOKEN_RE.exec(token);
+  if (!m) return null;
+  const property = m[1] === "w" ? "width" : "height";
+  const kind = m[2];
+  const args = splitTopLevelCommas(m[3].replace(/_/g, " "));
+  if (kind === "clamp" && args.length !== 3) return null;
+  if (kind !== "clamp" && args.length < 1) return null;
+  const operands = args.map(parseOperand);
+  if (operands.some((o) => o === null)) return null;
+  const resolved = operands;
+  if (!resolved.some((o) => o.percentCoefficient !== 0)) return null;
+  const resolveOperand = (o, basisPx) => basisPx * o.percentCoefficient / 100 + o.constantPx;
+  return {
+    property,
+    resolve(basisPx) {
+      const values = resolved.map((o) => resolveOperand(o, basisPx));
+      if (kind === "min") return Math.min(...values);
+      if (kind === "max") return Math.max(...values);
+      const [min, preferred, max] = values;
+      return Math.max(min, Math.min(preferred, max));
+    }
+  };
+}
+function parsePercentRelativeExpr(token) {
+  const calc = parsePercentRelativeCalc(token);
+  if (calc) return { property: calc.property, resolve: (basisPx) => resolvePercentRelativeCalc(basisPx, calc) };
+  return parsePercentRelativeMinMaxClamp(token);
+}
 
 // src/jsEngine/parser.ts
 var VALUE_PREFIXES = [
@@ -471,17 +511,17 @@ function substituteDynamicTokens(classStrRaw) {
     return value ?? whole;
   });
 }
-var PERCENT_RELATIVE_CALC_HINT_RE = /[wh]-\[calc\([^)]*%[^)]*\)\]/;
+var PERCENT_RELATIVE_CALC_HINT_RE = /[wh]-\[(calc|min|max|clamp)\([^)]*%[^)]*\)\]/;
 function extractPercentRelativeCalcs(classStrRaw) {
   const found = [];
   for (const token of classStrRaw.split(/\s+/)) {
-    const parsed = parsePercentRelativeCalc(token);
+    const parsed = parsePercentRelativeExpr(token);
     if (parsed) found.push(parsed);
   }
   return found;
 }
 function stripPercentRelativeCalcTokens(classStrRaw) {
-  return classStrRaw.split(/\s+/).filter((token) => token && parsePercentRelativeCalc(token) === null).join(" ");
+  return classStrRaw.split(/\s+/).filter((token) => token && parsePercentRelativeExpr(token) === null).join(" ");
 }
 var STATE_MODIFIER_NAMES = /* @__PURE__ */ new Set(["hover", "focus", "disabled"]);
 var STATE_MODIFIER_HINT_RE = /(^|\s|:)(hover|focus|disabled):/;
@@ -556,7 +596,7 @@ function ReactiveElement({
     layoutOverrides = {};
     for (const calc of percentCalcs) {
       const basis = measuredBasis?.[calc.property];
-      layoutOverrides[calc.property] = basis === void 0 ? "100%" : resolvePercentRelativeCalc(basis, calc);
+      layoutOverrides[calc.property] = basis === void 0 ? "100%" : calc.resolve(basis);
     }
     const userOnLayout = hostRest.onLayout;
     hostRestWithLayout = {

package/dist/jsx-runtime.js

@@ -206,6 +206,46 @@ function parsePercentRelativeCalc(token) {
 function resolvePercentRelativeCalc(basisPx, calc) {
   return basisPx * calc.percentCoefficient / 100 + calc.constantPx;
 }
+var PERCENT_MIN_MAX_CLAMP_TOKEN_RE = /^(w|h)-\[(min|max|clamp)\(([^)]+)\)\]$/;
+function parseOperand(arg) {
+  const trimmed = arg.trim();
+  const pct = /^(-?[\d.]+)%$/.exec(trimmed);
+  if (pct) {
+    const percentCoefficient = Number(pct[1]);
+    return Number.isFinite(percentCoefficient) ? { percentCoefficient, constantPx: 0 } : null;
+  }
+  const constantPx = reduceConstantMath(`calc(${trimmed})`);
+  return constantPx === null ? null : { percentCoefficient: 0, constantPx };
+}
+function parsePercentRelativeMinMaxClamp(token) {
+  const m = PERCENT_MIN_MAX_CLAMP_TOKEN_RE.exec(token);
+  if (!m) return null;
+  const property = m[1] === "w" ? "width" : "height";
+  const kind = m[2];
+  const args = splitTopLevelCommas(m[3].replace(/_/g, " "));
+  if (kind === "clamp" && args.length !== 3) return null;
+  if (kind !== "clamp" && args.length < 1) return null;
+  const operands = args.map(parseOperand);
+  if (operands.some((o) => o === null)) return null;
+  const resolved = operands;
+  if (!resolved.some((o) => o.percentCoefficient !== 0)) return null;
+  const resolveOperand = (o, basisPx) => basisPx * o.percentCoefficient / 100 + o.constantPx;
+  return {
+    property,
+    resolve(basisPx) {
+      const values = resolved.map((o) => resolveOperand(o, basisPx));
+      if (kind === "min") return Math.min(...values);
+      if (kind === "max") return Math.max(...values);
+      const [min, preferred, max] = values;
+      return Math.max(min, Math.min(preferred, max));
+    }
+  };
+}
+function parsePercentRelativeExpr(token) {
+  const calc = parsePercentRelativeCalc(token);
+  if (calc) return { property: calc.property, resolve: (basisPx) => resolvePercentRelativeCalc(basisPx, calc) };
+  return parsePercentRelativeMinMaxClamp(token);
+}
 
 // src/jsEngine/parser.ts
 var VALUE_PREFIXES = [
@@ -472,17 +512,17 @@ function substituteDynamicTokens(classStrRaw) {
     return value ?? whole;
   });
 }
-var PERCENT_RELATIVE_CALC_HINT_RE = /[wh]-\[calc\([^)]*%[^)]*\)\]/;
+var PERCENT_RELATIVE_CALC_HINT_RE = /[wh]-\[(calc|min|max|clamp)\([^)]*%[^)]*\)\]/;
 function extractPercentRelativeCalcs(classStrRaw) {
   const found = [];
   for (const token of classStrRaw.split(/\s+/)) {
-    const parsed = parsePercentRelativeCalc(token);
+    const parsed = parsePercentRelativeExpr(token);
     if (parsed) found.push(parsed);
   }
   return found;
 }
 function stripPercentRelativeCalcTokens(classStrRaw) {
-  return classStrRaw.split(/\s+/).filter((token) => token && parsePercentRelativeCalc(token) === null).join(" ");
+  return classStrRaw.split(/\s+/).filter((token) => token && parsePercentRelativeExpr(token) === null).join(" ");
 }
 var STATE_MODIFIER_NAMES = /* @__PURE__ */ new Set(["hover", "focus", "disabled"]);
 var STATE_MODIFIER_HINT_RE = /(^|\s|:)(hover|focus|disabled):/;
@@ -557,7 +597,7 @@ function ReactiveElement({
     layoutOverrides = {};
     for (const calc of percentCalcs) {
       const basis = measuredBasis?.[calc.property];
-      layoutOverrides[calc.property] = basis === void 0 ? "100%" : resolvePercentRelativeCalc(basis, calc);
+      layoutOverrides[calc.property] = basis === void 0 ? "100%" : calc.resolve(basis);
     }
     const userOnLayout = hostRest.onLayout;
     hostRestWithLayout = {

package/dist/{useDynamicToken-Dr15c88t.d.ts → useDynamicToken-DAHQob1u.d.ts}

@@ -80,18 +80,49 @@ interface ThemeState {
  */
 declare function useTheme(): ThemeState;
 
+/**
+ * The exact shape `@react-native-async-storage/async-storage`'s default
+ * export already has — pass it directly as `persist`. Any other async
+ * key-value store (MMKV, SecureStore, a custom backend, ...) works too, as
+ * long as it exposes these two methods with this signature. Kept minimal
+ * on purpose: `ThemeProvider` never imports a storage library itself (see
+ * `darkModeStore.ts`'s own doc comment on why this package forces no real
+ * native dependency on consumers who don't want persistence) — deliberately
+ * NOT a `boolean`-only option that reaches for AsyncStorage internally,
+ * since Metro resolves every `require()`/`import` target at BUNDLE time
+ * regardless of try/catch, so a library-internal "if installed, use it"
+ * check can't actually degrade gracefully when the package is absent — an
+ * injected adapter sidesteps that entirely.
+ */
+interface ThemeStorageAdapter {
+    getItem(key: string): Promise<string | null>;
+    setItem(key: string, value: string): Promise<void>;
+}
 interface ThemeProviderProps {
     children: ReactNode;
     /**
      * Applied once, on this provider's first mount, but ONLY if nothing has
      * made an explicit mode choice yet (see
      * `darkModeStore.ts::seedDefaultMode`) — an explicit prior choice always
-     * wins over a component's own default. Unlike @kbach/react's web
-     * version, there's no persisted value to check here — see
-     * darkModeStore.ts's own doc comment on why this package doesn't persist
-     * the mode across app launches.
+     * wins over a component's own default. If `persist` is also set and a
+     * persisted mode is found, the persisted mode wins over this fallback.
      */
     defaultMode?: ThemeMode;
+    /**
+     * Opt-in persistence across app launches — `false` by default (this
+     * package never persists on its own; see `darkModeStore.ts`'s doc
+     * comment). Pass a storage adapter to enable it:
+     * ```tsx
+     * import AsyncStorage from '@react-native-async-storage/async-storage';
+     * <ThemeProvider persist={AsyncStorage}>...
+     * ```
+     * The persisted value (if any) is read once on mount and applied via the
+     * same "don't clobber a real choice already in flight" guard
+     * `seedDefaultMode`/`defaultMode` uses; every later explicit mode change
+     * is written back automatically for as long as this provider stays
+     * mounted.
+     */
+    persist?: ThemeStorageAdapter | false;
 }
 /**
  * Optional — `useTheme()` reads `darkModeStore.ts`'s global store directly
@@ -107,7 +138,7 @@ interface ThemeProviderProps {
  * state — mounting more than one is very likely a mistake, so this warns
  * once in dev.
  */
-declare function ThemeProvider({ children, defaultMode }: ThemeProviderProps): react.JSX.Element;
+declare function ThemeProvider({ children, defaultMode, persist }: ThemeProviderProps): react.JSX.Element;
 
 interface ColorScale {
     /** `colors.blue[6]` -> raw value */
@@ -157,4 +188,4 @@ declare function useColors(): ColorsAPI;
  */
 declare function useDynamicToken(name: string): string | undefined;
 
-export { type ColorScale as C, type KbachConfig as K, ThemeProvider as T, type ColorsAPI as a, type ThemeProviderProps as b, type ThemeState as c, applyKbachConfig as d, useDynamicToken as e, useTheme as f, resolveKbachConfig as r, useColors as u };
+export { type ColorScale as C, type KbachConfig as K, ThemeProvider as T, type ColorsAPI as a, type ThemeProviderProps as b, type ThemeState as c, type ThemeStorageAdapter as d, applyKbachConfig as e, useDynamicToken as f, useTheme as g, resolveKbachConfig as r, useColors as u };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react-native",
-  "version": "1.0.0-beta.21",
+  "version": "1.0.0-beta.22",
   "description": "Kbach's utility-class styling engine for React Native — the same class names as @kbach/react, resolved to a StyleSheet-ready style object via a Kotlin/JNI TurboModule (native), the same WASM engine @kbach/react uses (Expo Web / react-native-web), or a pure-JS fallback engine (Expo Go). Ships its own native Android module — one npm install, no separate native package. Beta. Native is Android-only (no iOS bridge yet); works with the React Native CLI, an Expo dev client, AND Expo Go (a reduced-coverage pure-JS fallback, since Expo Go can't load any custom native module).",
   "keywords": [
     "css",