@kbach/react-native 1.0.0-beta.32 → 1.0.0-beta.34

package/dist/{clsx-BCXALPGh.d.ts → clsx-CxjWSCcU.d.ts}

@@ -5,17 +5,20 @@ import { ReactNode } from 'react';
 
 /**
  * A `kbach.config.js`-style theme customization — same shape as
- * @kbach/react's `KbachConfig`, minus mode-aware `{ light, dark }` color
- * entries in `extend.colors` specifically: aliasing/opacity math here only
- * ever operates on plain hex (`brand: 'blue-6'`, `brandSoft: 'brand/30'`),
- * matching `jsEngine/resolvers/color.ts`'s `lookupHex`'s own Plain-only
- * convention — a reference to an EXISTING color that happens to be
- * mode-aware (`theme.colors` can hold those now, for `useColors()`; see
- * `theme.ts`'s own `ColorEntry` doc comment) just doesn't resolve as an
- * alias, falling through to "literal CSS value" the same way an unknown
- * name would. A config object goes in, a resolved `ThemeConfig` comes out,
- * via one PURE function (`resolveKbachConfig`) — no plugins, no
- * live-update store, nothing to keep "in sync."
+ * @kbach/react's `KbachConfig`, minus @kbach/react's own PER-COLOR
+ * `{ light, dark }` object form in `extend.colors` specifically (real
+ * mode-aware colors here are written via the grouped `dark` key instead —
+ * see `KbachConfig.extend.colors`'s own doc comment below): aliasing/
+ * opacity math on an individual color value here only ever operates on
+ * plain hex (`brand: 'blue-6'`, `brandSoft: 'brand/30'`), matching
+ * `jsEngine/resolvers/color.ts`'s `lookupHex`'s own Plain-only convention
+ * — a reference to an EXISTING color that happens to be mode-aware
+ * (`theme.colors` can hold those, for `useColors()`; see `theme.ts`'s own
+ * `ColorEntry` doc comment) just doesn't resolve as an alias, falling
+ * through to "literal CSS value" the same way an unknown name would. A
+ * config object goes in, a resolved `ThemeConfig` comes out, via one PURE
+ * function (`resolveKbachConfig`) — no plugins, no live-update store,
+ * nothing to keep "in sync."
  */
 interface KbachConfig {
     darkMode?: ThemeConfig['darkMode'];
@@ -37,8 +40,26 @@ interface KbachConfig {
          * '#ff6b35', brandSoft: 'brand/30' }` — `brandSoft` resolves to
          * `brand`'s own value at 30% opacity). A string that doesn't match any
          * known color name is treated as a literal CSS value instead.
+         *
+         * `dark` is a reserved key, not a color name: a parallel map of
+         * dark-mode overrides for any of the OTHER names in this same object —
+         * `{ surface: 'gray-2', card: 'white', dark: { surface: 'gray-11',
+         * card: 'gray-9' } }` makes `surface`/`card` mode-aware
+         * (`{ light, dark }` entries in the resolved theme), while `brand`
+         * (never mentioned under `dark`) stays a plain, mode-independent
+         * color. A name under `dark` with no matching top-level (light) entry
+         * is skipped — mode-aware colors need both sides written out, and
+         * inventing a "light" value out of nowhere would be worse than just
+         * not creating the entry at all. References inside `dark` resolve
+         * against the built-in palette and OTHER entries within `dark` itself
+         * (not against the light-side custom colors) — the same
+         * "self-contained, ordering-independent-of-the-other-side" resolution
+         * the light side already gets, just mirrored.
          */
-        colors?: Record<string, string>;
+        colors?: {
+            [colorName: string]: string | Record<string, string> | undefined;
+            dark?: Record<string, string>;
+        };
         spacing?: Record<string, number>;
         screens?: Record<string, number>;
         /**

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { ColorEntry, ContainerConfig, ThemeConfig, defaultTheme, getTheme, setTheme } from './theme';
-export { C as ClassArray, a as ClassDictionary, b as ClassValue, c as ColorScale, d as ColorsAPI, K as KbachConfig, T as ThemeProvider, e as ThemeProviderProps, f as ThemeState, g as ThemeStorageAdapter, h as applyKbachConfig, i as clsx, r as resolveKbachConfig, u as useColors, j as useDynamicToken, k as useTheme } from './clsx-BCXALPGh.js';
+export { C as ClassArray, a as ClassDictionary, b as ClassValue, c as ColorScale, d as ColorsAPI, K as KbachConfig, T as ThemeProvider, e as ThemeProviderProps, f as ThemeState, g as ThemeStorageAdapter, h as applyKbachConfig, i as clsx, r as resolveKbachConfig, u as useColors, j as useDynamicToken, k as useTheme } from './clsx-CxjWSCcU.js';
 export { ThemeMode, getGlobalDarkMode, getGlobalThemeMode, setGlobalThemeMode, subscribeGlobalDarkMode, toggleGlobalDarkMode } from './darkModeStore';
 export { deleteDynamicToken, getDynamicToken, setDynamicToken, subscribeDynamicTokens } from './dynamicTokens';
 import 'react';

package/dist/index.js

@@ -1843,15 +1843,33 @@ function resolveColorEntry(value, lookup) {
   return opacity === void 0 ? base : applyOpacityToHex(base, opacity);
 }
 function resolveColors(extend, existing) {
-  const resolved = {};
-  const lookup = (name) => {
-    const found = resolved[name] ?? existing[name];
+  const { dark: darkExtend, ...lightExtend } = extend;
+  const resolvedLight = {};
+  const lookupLight = (name) => {
+    const found = resolvedLight[name] ?? existing[name];
     return typeof found === "string" ? found : void 0;
   };
-  for (const [name, value] of Object.entries(extend)) {
-    resolved[name] = resolveColorEntry(value, lookup);
+  for (const [name, value] of Object.entries(lightExtend)) {
+    if (typeof value !== "string") continue;
+    resolvedLight[name] = resolveColorEntry(value, lookupLight);
+  }
+  const result = { ...resolvedLight };
+  if (darkExtend) {
+    const resolvedDark = {};
+    const lookupDark = (name) => {
+      const found = resolvedDark[name] ?? existing[name];
+      return typeof found === "string" ? found : void 0;
+    };
+    for (const [name, value] of Object.entries(darkExtend)) {
+      resolvedDark[name] = resolveColorEntry(value, lookupDark);
+    }
+    for (const [name, darkValue] of Object.entries(resolvedDark)) {
+      const lightValue = resolvedLight[name];
+      if (lightValue === void 0) continue;
+      result[name] = { light: lightValue, dark: darkValue };
+    }
   }
-  return resolved;
+  return result;
 }
 function resolveKbachConfig(config) {
   let theme = { ...import_theme2.defaultTheme, ...config.theme };

package/dist/index.web.d.ts

@@ -1,5 +1,5 @@
 export { ColorEntry, ContainerConfig, ThemeConfig, defaultTheme, getTheme, setTheme } from './theme';
-export { C as ClassArray, a as ClassDictionary, b as ClassValue, c as ColorScale, d as ColorsAPI, K as KbachConfig, T as ThemeProvider, e as ThemeProviderProps, f as ThemeState, h as applyKbachConfig, i as clsx, r as resolveKbachConfig, u as useColors, j as useDynamicToken, k as useTheme } from './clsx-BCXALPGh.js';
+export { C as ClassArray, a as ClassDictionary, b as ClassValue, c as ColorScale, d as ColorsAPI, K as KbachConfig, T as ThemeProvider, e as ThemeProviderProps, f as ThemeState, h as applyKbachConfig, i as clsx, r as resolveKbachConfig, u as useColors, j as useDynamicToken, k as useTheme } from './clsx-CxjWSCcU.js';
 export { ThemeMode, getGlobalDarkMode, getGlobalThemeMode, setGlobalThemeMode, subscribeGlobalDarkMode, toggleGlobalDarkMode } from './darkModeStore';
 export { deleteDynamicToken, getDynamicToken, setDynamicToken, subscribeDynamicTokens } from './dynamicTokens';
 import 'react';

package/dist/index.web.js

@@ -271,15 +271,33 @@ function resolveColorEntry(value, lookup) {
   return opacity === void 0 ? base : applyOpacityToHex(base, opacity);
 }
 function resolveColors(extend, existing) {
-  const resolved = {};
-  const lookup = (name) => {
-    const found = resolved[name] ?? existing[name];
+  const { dark: darkExtend, ...lightExtend } = extend;
+  const resolvedLight = {};
+  const lookupLight = (name) => {
+    const found = resolvedLight[name] ?? existing[name];
     return typeof found === "string" ? found : void 0;
   };
-  for (const [name, value] of Object.entries(extend)) {
-    resolved[name] = resolveColorEntry(value, lookup);
+  for (const [name, value] of Object.entries(lightExtend)) {
+    if (typeof value !== "string") continue;
+    resolvedLight[name] = resolveColorEntry(value, lookupLight);
   }
-  return resolved;
+  const result = { ...resolvedLight };
+  if (darkExtend) {
+    const resolvedDark = {};
+    const lookupDark = (name) => {
+      const found = resolvedDark[name] ?? existing[name];
+      return typeof found === "string" ? found : void 0;
+    };
+    for (const [name, value] of Object.entries(darkExtend)) {
+      resolvedDark[name] = resolveColorEntry(value, lookupDark);
+    }
+    for (const [name, darkValue] of Object.entries(resolvedDark)) {
+      const lightValue = resolvedLight[name];
+      if (lightValue === void 0) continue;
+      result[name] = { light: lightValue, dark: darkValue };
+    }
+  }
+  return result;
 }
 function resolveKbachConfig(config) {
   let theme = { ...import_theme2.defaultTheme, ...config.theme };

package/dist/index.web.mjs

@@ -43,15 +43,33 @@ function resolveColorEntry(value, lookup) {
   return opacity === void 0 ? base : applyOpacityToHex(base, opacity);
 }
 function resolveColors(extend, existing) {
-  const resolved = {};
-  const lookup = (name) => {
-    const found = resolved[name] ?? existing[name];
+  const { dark: darkExtend, ...lightExtend } = extend;
+  const resolvedLight = {};
+  const lookupLight = (name) => {
+    const found = resolvedLight[name] ?? existing[name];
     return typeof found === "string" ? found : void 0;
   };
-  for (const [name, value] of Object.entries(extend)) {
-    resolved[name] = resolveColorEntry(value, lookup);
+  for (const [name, value] of Object.entries(lightExtend)) {
+    if (typeof value !== "string") continue;
+    resolvedLight[name] = resolveColorEntry(value, lookupLight);
   }
-  return resolved;
+  const result = { ...resolvedLight };
+  if (darkExtend) {
+    const resolvedDark = {};
+    const lookupDark = (name) => {
+      const found = resolvedDark[name] ?? existing[name];
+      return typeof found === "string" ? found : void 0;
+    };
+    for (const [name, value] of Object.entries(darkExtend)) {
+      resolvedDark[name] = resolveColorEntry(value, lookupDark);
+    }
+    for (const [name, darkValue] of Object.entries(resolvedDark)) {
+      const lightValue = resolvedLight[name];
+      if (lightValue === void 0) continue;
+      result[name] = { light: lightValue, dark: darkValue };
+    }
+  }
+  return result;
 }
 function resolveKbachConfig(config) {
   let theme = { ...defaultTheme, ...config.theme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react-native",
-  "version": "1.0.0-beta.32",
+  "version": "1.0.0-beta.34",
   "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",

package/src/babel-plugin.js

@@ -124,6 +124,36 @@ module.exports = function kbachReactNativeBabelPlugin(_babel, options) {
       const filename = file.opts && file.opts.filename;
       if (filename && filename.indexOf('node_modules') !== -1) return;
 
+      // Metro/Expo's own internal polyfills (the Node.js-external-require
+      // shim, the assets-registry shim, node:/weak-ref virtualizations, ...)
+      // are synthetic "virtual modules" with no real file on disk. Expo's
+      // own Metro config marks every one of these with an embedded NUL
+      // control character in its module ID (Rollup's/Metro's own
+      // convention for "this isn't a real file"). These never sit inside
+      // node_modules, so the check above doesn't catch them — and Metro
+      // places them directly in the bundle PRELUDE, entirely outside any
+      // wrapped module, where `require` isn't defined as a real function
+      // at all. Confirmed as a real, reproducible runtime crash (not a
+      // hypothetical): injecting this plugin's applyKbachConfig() require()
+      // call into that exact polyfill produced Expo's own "[runtime not
+      // ready]: ReferenceError: Property 'require' doesn't exist" at app
+      // startup, verified by exporting a real dev bundle and finding the
+      // offending, un-instrumented require() call sitting inside
+      // withMetroMultiPlatform.js's own external-require polyfill — a file
+      // this plugin was never meant to touch at all.
+      //
+      // The control character is NOT at the start of `filename`, so
+      // `startsWith`/`charCodeAt(0)` (what an earlier version of this
+      // check used) never matches — confirmed by actually logging Babel's
+      // real `filename` for this file, not assumed: Metro joins the
+      // project root onto the raw virtual module ID first, so the control
+      // character ends up in the MIDDLE of the full string, right after
+      // the trailing path separator, not at index 0. A search anywhere in
+      // the string (rather than just its start) is what actually catches
+      // it — see this file's own test suite for the exact filename shape
+      // this was verified against.
+      if (filename && filename.indexOf(String.fromCharCode(0)) !== -1) return;
+
       const comments = file.ast.comments || (file.ast.comments = []);
       const alreadySet = comments.some((c) => /@jsxImportSource|@jsxRuntime/.test(c.value));
       if (!alreadySet) {