@kbach/react-native 1.0.0-beta.33 → 1.0.0-beta.35

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

@@ -849,6 +849,29 @@ function lookupHex(theme, key) {
   const entry = theme.colors[key];
   return typeof entry === "string" ? entry : null;
 }
+var MODE_AWARE_COLOR_PREFIXES = ["bg-", "text-", "border-"];
+function findModeAwareColor(base, theme) {
+  const important = base.startsWith("!") ? "!" : "";
+  const rest = important ? base.slice(1) : base;
+  for (const prefix of MODE_AWARE_COLOR_PREFIXES) {
+    if (!rest.startsWith(prefix)) continue;
+    const value = rest.slice(prefix.length);
+    const entry = theme.colors[value];
+    if (typeof entry === "object" && entry !== null) {
+      return { prefix: `${important}${prefix}`, light: entry.light, dark: entry.dark };
+    }
+  }
+  return null;
+}
+function substituteModeAwareColorToken(token, theme, colorScheme) {
+  const segments = token.split(":");
+  const base = segments.pop() ?? token;
+  const modifierPrefix = segments.length > 0 ? `${segments.join(":")}:` : "";
+  const found = findModeAwareColor(base, theme);
+  if (found === null) return token;
+  const hex = colorScheme === "dark" ? found.dark : found.light;
+  return `${modifierPrefix}${found.prefix}[${hex}]`;
+}
 function hexToRgb(hex) {
   const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
   if (!m) return null;
@@ -1721,7 +1744,8 @@ function resolveStyleJsWithWarnings(classString, theme, colorScheme, pressed, wi
   const warnings = [];
   let shadowOffset = null;
   const transformOps = /* @__PURE__ */ new Map();
-  for (const token of classString.split(/\s+/).filter(Boolean)) {
+  for (const rawToken of classString.split(/\s+/).filter(Boolean)) {
+    const token = substituteModeAwareColorToken(rawToken, theme, colorScheme);
     const parsed = parseClass(token);
     const allModifiersHold = parsed.modifiers.every(
       (m) => nativeModifierState(m, theme, colorScheme, pressed, width) === true
@@ -1843,15 +1867,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/dist/jsx-dev-runtime.js

@@ -1379,6 +1379,29 @@ function lookupHex(theme, key) {
   const entry = theme.colors[key];
   return typeof entry === "string" ? entry : null;
 }
+var MODE_AWARE_COLOR_PREFIXES = ["bg-", "text-", "border-"];
+function findModeAwareColor(base, theme) {
+  const important = base.startsWith("!") ? "!" : "";
+  const rest = important ? base.slice(1) : base;
+  for (const prefix of MODE_AWARE_COLOR_PREFIXES) {
+    if (!rest.startsWith(prefix)) continue;
+    const value = rest.slice(prefix.length);
+    const entry = theme.colors[value];
+    if (typeof entry === "object" && entry !== null) {
+      return { prefix: `${important}${prefix}`, light: entry.light, dark: entry.dark };
+    }
+  }
+  return null;
+}
+function substituteModeAwareColorToken(token, theme, colorScheme) {
+  const segments = token.split(":");
+  const base = segments.pop() ?? token;
+  const modifierPrefix = segments.length > 0 ? `${segments.join(":")}:` : "";
+  const found = findModeAwareColor(base, theme);
+  if (found === null) return token;
+  const hex = colorScheme === "dark" ? found.dark : found.light;
+  return `${modifierPrefix}${found.prefix}[${hex}]`;
+}
 function hexToRgb(hex) {
   const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
   if (!m) return null;
@@ -2104,7 +2127,8 @@ function resolveStyleJsWithWarnings(classString, theme, colorScheme, pressed, wi
   const warnings = [];
   let shadowOffset = null;
   const transformOps = /* @__PURE__ */ new Map();
-  for (const token of classString.split(/\s+/).filter(Boolean)) {
+  for (const rawToken of classString.split(/\s+/).filter(Boolean)) {
+    const token = substituteModeAwareColorToken(rawToken, theme, colorScheme);
     const parsed = parseClass(token);
     const allModifiersHold = parsed.modifiers.every(
       (m) => nativeModifierState(m, theme, colorScheme, pressed, width) === true

package/dist/jsx-runtime.js

@@ -1370,6 +1370,29 @@ function lookupHex(theme, key) {
   const entry = theme.colors[key];
   return typeof entry === "string" ? entry : null;
 }
+var MODE_AWARE_COLOR_PREFIXES = ["bg-", "text-", "border-"];
+function findModeAwareColor(base, theme) {
+  const important = base.startsWith("!") ? "!" : "";
+  const rest = important ? base.slice(1) : base;
+  for (const prefix of MODE_AWARE_COLOR_PREFIXES) {
+    if (!rest.startsWith(prefix)) continue;
+    const value = rest.slice(prefix.length);
+    const entry = theme.colors[value];
+    if (typeof entry === "object" && entry !== null) {
+      return { prefix: `${important}${prefix}`, light: entry.light, dark: entry.dark };
+    }
+  }
+  return null;
+}
+function substituteModeAwareColorToken(token, theme, colorScheme) {
+  const segments = token.split(":");
+  const base = segments.pop() ?? token;
+  const modifierPrefix = segments.length > 0 ? `${segments.join(":")}:` : "";
+  const found = findModeAwareColor(base, theme);
+  if (found === null) return token;
+  const hex = colorScheme === "dark" ? found.dark : found.light;
+  return `${modifierPrefix}${found.prefix}[${hex}]`;
+}
 function hexToRgb(hex) {
   const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
   if (!m) return null;
@@ -2095,7 +2118,8 @@ function resolveStyleJsWithWarnings(classString, theme, colorScheme, pressed, wi
   const warnings = [];
   let shadowOffset = null;
   const transformOps = /* @__PURE__ */ new Map();
-  for (const token of classString.split(/\s+/).filter(Boolean)) {
+  for (const rawToken of classString.split(/\s+/).filter(Boolean)) {
+    const token = substituteModeAwareColorToken(rawToken, theme, colorScheme);
     const parsed = parseClass(token);
     const allModifiersHold = parsed.modifiers.every(
       (m) => nativeModifierState(m, theme, colorScheme, pressed, width) === true

package/package.json

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