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

package/dist/jsx-runtime.web.mjs

@@ -2,9 +2,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-6QFPLRSP.mjs";
-import "./chunk-ZB2UU6EO.mjs";
-import "./chunk-HK6PDJJK.mjs";
+} from "./chunk-6ML62O2R.mjs";
+import "./chunk-3ED4FIO2.mjs";
 export {
   Fragment,
   jsx,

package/dist/theme.d.ts

@@ -0,0 +1,54 @@
+/**
+ * A plain hex value (static — same in both modes), or a `{ light, dark }`
+ * pair a caller sets manually in their own theme. Fully opt-in per color:
+ * nothing here picks a "dark variant" automatically. Only `useColors()`
+ * (a JS-value read, not a `className`) understands this shape — utility
+ * CLASS resolution (`bg-blue-6`) on native/Expo Go stays plain-string-only,
+ * same as it always was (dark mode for a CLASS is the separate `dark:`
+ * modifier, gated live at resolve time — see `resolve_style.rs`); a
+ * mode-aware entry referenced directly by a class name just doesn't
+ * resolve there, mirroring `resolvers/color.rs`'s own `lookup_hex`
+ * (`ColorValue::Plain` only, `ModeAware` -> `None`) exactly, same as it
+ * would on the web engine too.
+ */
+type ColorEntry = string | {
+    light: string;
+    dark: string;
+};
+/**
+ * Real Tailwind's `theme.container` config, mirroring
+ * `packages/core-engine/src/theme.rs`'s `ContainerConfig` exactly. `center`/
+ * `padding` DO reach native now (unlike the max-width breakpoint ladder,
+ * which is a `css.rs`-only concept with nothing to generate on native at
+ * all) — `resolvers::layout::resolve`'s `"container"` arm is shared by both
+ * dispatchers, and `margin`/`padding` are ordinary RN style properties.
+ */
+interface ContainerConfig {
+    center?: boolean;
+    padding?: string;
+}
+interface ThemeConfig {
+    colors: Record<string, ColorEntry>;
+    spacing: Record<string, number>;
+    screens: Record<string, number>;
+    /**
+     * e.g. "sans" -> "Inter, sans-serif". Optional, matching the Rust
+     * engine's own `#[serde(default)]`. Write it as a real web-shaped
+     * fallback stack even on this native-first package — native's own
+     * resolver strips it down to a single bare name at resolve time (RN's
+     * `fontFamily` prop can't take a fallback list — see
+     * `resolvers/mod.rs`'s `first_font_name`), so the SAME config still
+     * works unmodified on Expo Web, which needs the full stack.
+     */
+    fontFamily?: Record<string, string>;
+    darkMode: 'attribute' | 'class' | 'media';
+    /** Optional, matching `ContainerConfig`'s own `#[serde(default)]` on the Rust side. */
+    container?: ContainerConfig;
+}
+declare const defaultTheme: ThemeConfig;
+declare function setTheme(theme: ThemeConfig): void;
+declare function getTheme(): ThemeConfig;
+/** Memoized JSON serialization of the active theme — passed across the JNI boundary. */
+declare function getThemeJson(): string;
+
+export { type ColorEntry, type ContainerConfig, type ThemeConfig, defaultTheme, getTheme, getThemeJson, setTheme };

package/dist/{chunk-HK6PDJJK.mjs → theme.js}

@@ -1,3 +1,32 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/theme.ts
+var theme_exports = {};
+__export(theme_exports, {
+  defaultTheme: () => defaultTheme,
+  getTheme: () => getTheme,
+  getThemeJson: () => getThemeJson,
+  setTheme: () => setTheme
+});
+module.exports = __toCommonJS(theme_exports);
+
 // src/generatedPalette.ts
 var PALETTE = {
   "amber-1": "#fffbeb",
@@ -358,10 +387,10 @@ function getTheme() {
 function getThemeJson() {
   return activeThemeJson;
 }
-
-export {
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
   defaultTheme,
-  setTheme,
   getTheme,
-  getThemeJson
-};
+  getThemeJson,
+  setTheme
+});

package/dist/{useColors-C6jyCLuG.d.ts → useColors-Br8QhIlE.d.ts}

@@ -1,57 +1,8 @@
+import { ThemeConfig, ContainerConfig } from './theme';
+import { ThemeMode } from './darkModeStore';
 import * as react from 'react';
 import { ReactNode } from 'react';
 
-/**
- * A plain hex value (static — same in both modes), or a `{ light, dark }`
- * pair a caller sets manually in their own theme. Fully opt-in per color:
- * nothing here picks a "dark variant" automatically. Only `useColors()`
- * (a JS-value read, not a `className`) understands this shape — utility
- * CLASS resolution (`bg-blue-6`) on native/Expo Go stays plain-string-only,
- * same as it always was (dark mode for a CLASS is the separate `dark:`
- * modifier, gated live at resolve time — see `resolve_style.rs`); a
- * mode-aware entry referenced directly by a class name just doesn't
- * resolve there, mirroring `resolvers/color.rs`'s own `lookup_hex`
- * (`ColorValue::Plain` only, `ModeAware` -> `None`) exactly, same as it
- * would on the web engine too.
- */
-type ColorEntry = string | {
-    light: string;
-    dark: string;
-};
-/**
- * Real Tailwind's `theme.container` config, mirroring
- * `packages/core-engine/src/theme.rs`'s `ContainerConfig` exactly. `center`/
- * `padding` DO reach native now (unlike the max-width breakpoint ladder,
- * which is a `css.rs`-only concept with nothing to generate on native at
- * all) — `resolvers::layout::resolve`'s `"container"` arm is shared by both
- * dispatchers, and `margin`/`padding` are ordinary RN style properties.
- */
-interface ContainerConfig {
-    center?: boolean;
-    padding?: string;
-}
-interface ThemeConfig {
-    colors: Record<string, ColorEntry>;
-    spacing: Record<string, number>;
-    screens: Record<string, number>;
-    /**
-     * e.g. "sans" -> "Inter, sans-serif". Optional, matching the Rust
-     * engine's own `#[serde(default)]`. Write it as a real web-shaped
-     * fallback stack even on this native-first package — native's own
-     * resolver strips it down to a single bare name at resolve time (RN's
-     * `fontFamily` prop can't take a fallback list — see
-     * `resolvers/mod.rs`'s `first_font_name`), so the SAME config still
-     * works unmodified on Expo Web, which needs the full stack.
-     */
-    fontFamily?: Record<string, string>;
-    darkMode: 'attribute' | 'class' | 'media';
-    /** Optional, matching `ContainerConfig`'s own `#[serde(default)]` on the Rust side. */
-    container?: ContainerConfig;
-}
-declare const defaultTheme: ThemeConfig;
-declare function setTheme(theme: ThemeConfig): void;
-declare function getTheme(): ThemeConfig;
-
 /**
  * A `kbach.config.js`-style theme customization — same shape as
  * @kbach/react's `KbachConfig`, minus mode-aware `{ light, dark }` color
@@ -109,49 +60,6 @@ declare function resolveKbachConfig(config: KbachConfig): ThemeConfig;
 /** `resolveKbachConfig()` + `setTheme()` in one call — the usual entry point from app code. */
 declare function applyKbachConfig(config: KbachConfig): ThemeConfig;
 
-/**
- * Native port of @kbach/react's darkModeStore.ts — same architecture (a
- * single module-level store is the real source of truth;
- * ThemeProvider/useTheme are a thin, OPTIONAL wrapper around it; every
- * function here works standalone with no provider mounted anywhere), with
- * two real platform differences from the web version:
- *
- * 1. No persistence. There's no React-Native-builtin equivalent of
- *    localStorage — adding one would mean forcing a real native dependency
- *    (e.g. @react-native-async-storage/async-storage) on every consumer,
- *    even ones that don't want it. The mode always starts at 'system' on a
- *    fresh app launch. If you want persistence, read your own storage at
- *    startup (before your first render) and call setGlobalThemeMode() with
- *    the result — same "seed once, no built-in write-back" shape as
- *    seedDefaultMode() below, just driven by your own storage instead of
- *    one this package picks for you.
- * 2. `applyToDom` below IS needed here, unlike what an earlier version of
- *    this file's own comment claimed ("no DOM to apply the resolved mode
- *    to") — that reasoning only holds for real native (Android/iOS), where
- *    nativeBridge.ts's resolveStyle() reads getGlobalDarkMode() directly on
- *    every call, no DOM involved at all. This file is ALSO used by Expo
- *    Web, though (no `.web.ts` sibling — Metro has nothing to swap in), and
- *    Expo Web resolves `dark:` classes to REAL CSS with `[data-theme=
- *    "dark"]`-style selectors (see nativeBridge.web.ts) that only ever
- *    match if something writes that attribute to the DOM — nothing did,
- *    which is exactly why toggling the mode changed `useTheme()`'s own
- *    state (a consumer reading `mode`/`isDark` directly, e.g. for a label,
- *    updated correctly) while every `dark:`-prefixed style silently never
- *    applied. `typeof document === 'undefined'` is what makes one function
- *    safe on both platforms: real native's Hermes has no `document` global
- *    at all (not even `undefined` as a defined-but-empty value — genuinely
- *    unset, which `typeof` can check without throwing), so this always
- *    no-ops there, while Expo Web's react-native-web renders into a real
- *    browser DOM where it's needed.
- */
-type ThemeMode = 'light' | 'dark' | 'system';
-declare function getGlobalDarkMode(): boolean;
-declare function getGlobalThemeMode(): ThemeMode;
-/** Explicit user choice — takes priority over any later `<ThemeProvider defaultMode>` seed (see `seedDefaultMode` below). Not persisted; see this module's own doc comment. */
-declare function setGlobalThemeMode(nextMode: ThemeMode): void;
-declare function toggleGlobalDarkMode(): void;
-declare function subscribeGlobalDarkMode(listener: () => void): () => void;
-
 interface ThemeState {
     mode: ThemeMode;
     isDark: boolean;
@@ -236,4 +144,4 @@ type ColorsAPI = {
  */
 declare function useColors(): ColorsAPI;
 
-export { type ColorEntry as C, type KbachConfig as K, type ThemeConfig as T, type ColorScale as a, type ColorsAPI as b, type ContainerConfig as c, type ThemeMode as d, ThemeProvider as e, type ThemeProviderProps as f, type ThemeState as g, applyKbachConfig as h, defaultTheme as i, getGlobalDarkMode as j, getGlobalThemeMode as k, getTheme as l, setTheme as m, subscribeGlobalDarkMode as n, useTheme as o, resolveKbachConfig as r, setGlobalThemeMode as s, toggleGlobalDarkMode as t, 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, applyKbachConfig as d, useTheme as e, resolveKbachConfig as r, useColors as u };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react-native",
-  "version": "1.0.0-beta.14",
+  "version": "1.0.0-beta.16",
   "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",
@@ -37,7 +37,6 @@
   ],
   "source": "./src/index.ts",
   "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
@@ -51,7 +50,6 @@
         "import": "./dist/index.web.mjs",
         "require": "./dist/index.web.js"
       },
-      "import": "./dist/index.mjs",
       "require": "./dist/index.js"
     },
     "./jsx-runtime": {
@@ -65,7 +63,6 @@
         "import": "./dist/jsx-runtime.web.mjs",
         "require": "./dist/jsx-runtime.web.js"
       },
-      "import": "./dist/jsx-runtime.mjs",
       "require": "./dist/jsx-runtime.js"
     },
     "./jsx-dev-runtime": {
@@ -79,14 +76,13 @@
         "import": "./dist/jsx-dev-runtime.web.mjs",
         "require": "./dist/jsx-dev-runtime.web.js"
       },
-      "import": "./dist/jsx-dev-runtime.mjs",
       "require": "./dist/jsx-dev-runtime.js"
     },
     "./babel-plugin": "./src/babel-plugin.js"
   },
   "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
+    "build": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\" && tsup",
+    "dev": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\" && tsup --watch",
     "test": "vitest run --passWithNoTests",
     "lint": "tsc --noEmit",
     "generate:colors": "node ../core-engine/scripts/generate-palette.mjs src/generatedPalette.ts",

package/dist/chunk-H57O3BJO.mjs

@@ -1,84 +0,0 @@
-import {
-  getGlobalDarkMode,
-  subscribeGlobalDarkMode
-} from "./chunk-RBJXE32L.mjs";
-
-// src/jsxRuntimeCore.ts
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useSyncExternalStore } from "react";
-import { Pressable } from "react-native";
-function makeElement(isStaticChildren, type, props, key) {
-  return (isStaticChildren ? _jsxs : _jsx)(type, props, key);
-}
-function resolvedStyleFor(resolveStyle, classStrRaw, userStyle, pressed) {
-  const resolved = resolveStyle(classStrRaw, pressed);
-  if (userStyle === void 0) {
-    return resolved;
-  }
-  if (typeof userStyle === "function") {
-    return [resolved, userStyle({ pressed })];
-  }
-  return [resolved, userStyle];
-}
-var DARK_MODIFIER_RE = /(^|\s)dark:/;
-function darkModeKeySuffix(classStrRaw) {
-  return DARK_MODIFIER_RE.test(classStrRaw) ? `:kb-dark-${getGlobalDarkMode()}` : "";
-}
-function DarkAwareElement({
-  hostType,
-  hostRest,
-  classStrRaw,
-  userStyle,
-  resolveStyle,
-  elementKey,
-  isStaticChildren
-}) {
-  useSyncExternalStore(subscribeGlobalDarkMode, getGlobalDarkMode);
-  const finalStyle = hostType === Pressable ? (state) => resolvedStyleFor(resolveStyle, classStrRaw, userStyle, state.pressed) : resolvedStyleFor(resolveStyle, classStrRaw, userStyle, false);
-  const suffix = darkModeKeySuffix(classStrRaw);
-  const finalKey = suffix ? `${elementKey ?? ""}${suffix}` : elementKey;
-  return makeElement(isStaticChildren, hostType, { ...hostRest, style: finalStyle }, finalKey);
-}
-function processElement(resolveStyle, type, rawProps, key, isStaticChildren) {
-  if (type === null || typeof type === "symbol" || !rawProps) {
-    return makeElement(isStaticChildren, type, rawProps ?? {}, key);
-  }
-  const { className: classStrRaw, style: userStyle, ...rest } = rawProps;
-  if (typeof classStrRaw !== "string") {
-    return makeElement(isStaticChildren, type, rawProps, key);
-  }
-  if (DARK_MODIFIER_RE.test(classStrRaw)) {
-    return _jsx(
-      DarkAwareElement,
-      { hostType: type, hostRest: rest, classStrRaw, userStyle, resolveStyle, elementKey: key, isStaticChildren },
-      key
-    );
-  }
-  const finalStyle = type === Pressable ? (state) => resolvedStyleFor(resolveStyle, classStrRaw, userStyle, state.pressed) : resolvedStyleFor(resolveStyle, classStrRaw, userStyle, false);
-  return makeElement(isStaticChildren, type, { ...rest, style: finalStyle }, key);
-}
-function createJsxFunctions(resolveStyle) {
-  function jsx(type, props, key) {
-    return processElement(resolveStyle, type, props, key, false);
-  }
-  function jsxs(type, props, key) {
-    return processElement(resolveStyle, type, props, key, true);
-  }
-  return { jsx, jsxs };
-}
-function createJsxDEV(jsx, jsxs) {
-  return function jsxDEV(type, props, key, isStaticChildren, source, self) {
-    const element = (isStaticChildren ? jsxs : jsx)(type, props, key);
-    if (source && element && typeof element === "object" && Object.isExtensible(element)) {
-      element._source = source;
-      element._self = self;
-    }
-    return element;
-  };
-}
-
-export {
-  Fragment,
-  createJsxFunctions,
-  createJsxDEV
-};