@kbach/react-native 1.0.0-beta.5 → 1.0.0-beta.51

package/dist/dynamicTokens.js

@@ -0,0 +1,75 @@
+"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/dynamicTokens.ts
+var dynamicTokens_exports = {};
+__export(dynamicTokens_exports, {
+  _resetForTests: () => _resetForTests,
+  deleteDynamicToken: () => deleteDynamicToken,
+  getDynamicToken: () => getDynamicToken,
+  getDynamicTokensVersion: () => getDynamicTokensVersion,
+  setDynamicToken: () => setDynamicToken,
+  subscribeDynamicTokens: () => subscribeDynamicTokens
+});
+module.exports = __toCommonJS(dynamicTokens_exports);
+var tokens = /* @__PURE__ */ new Map();
+var listeners = /* @__PURE__ */ new Set();
+var version = 0;
+function applyToDom(name, value) {
+  if (typeof document === "undefined") return;
+  document.documentElement.style.setProperty(`--${name}`, value);
+}
+function notify() {
+  version++;
+  for (const listener of listeners) listener();
+}
+function setDynamicToken(name, value) {
+  tokens.set(name, value);
+  applyToDom(name, value);
+  notify();
+}
+function getDynamicToken(name) {
+  return tokens.get(name);
+}
+function deleteDynamicToken(name) {
+  if (!tokens.delete(name)) return;
+  if (typeof document !== "undefined") document.documentElement.style.removeProperty(`--${name}`);
+  notify();
+}
+function subscribeDynamicTokens(listener) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+function getDynamicTokensVersion() {
+  return version;
+}
+function _resetForTests() {
+  tokens.clear();
+  listeners.clear();
+  version = 0;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  _resetForTests,
+  deleteDynamicToken,
+  getDynamicToken,
+  getDynamicTokensVersion,
+  setDynamicToken,
+  subscribeDynamicTokens
+});

package/dist/index.d.ts

@@ -1,161 +1,102 @@
-import * as react from 'react';
-import { ReactNode } from 'react';
-
-interface ThemeConfig {
-    /** Plain hex only, this pass — e.g. "blue-6" -> "#2563eb" */
-    colors: Record<string, string>;
-    spacing: Record<string, number>;
-    screens: Record<string, number>;
-    darkMode: 'attribute' | 'class' | 'media';
-}
-declare const defaultTheme: ThemeConfig;
-declare function setTheme(theme: ThemeConfig): void;
-declare function getTheme(): ThemeConfig;
+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-BLLSnqAa.js';
+export { ThemeMode, getGlobalDarkMode, getGlobalThemeMode, setGlobalThemeMode, subscribeGlobalDarkMode, toggleGlobalDarkMode } from './darkModeStore';
+export { deleteDynamicToken, getDynamicToken, setDynamicToken, subscribeDynamicTokens } from './dynamicTokens';
+import 'react';
 
+type StyleValue = string | number | {
+    width: number;
+    height: number;
+} | Array<Record<string, string | number>>;
 interface StyleObject {
-    [key: string]: string | number;
+    [key: string]: StyleValue;
 }
-/**
- * Calls the Rust engine via the KbachModule TurboModule (see
- * apps/native-sandbox/android/.../KbachModule.kt and
- * packages/core-engine/src/resolve_style.rs) and returns a plain style
- * object ready for RN's `style` prop. Synchronous — no async init step,
- * unlike the web/WASM path, since JSI-backed TurboModule methods are
- * available as soon as the module is loaded.
- *
- * Reads `getGlobalDarkMode()` (darkModeStore.ts) fresh on every call (no
- * caching) so `dark:` resolves correctly whenever this runs. That store —
- * not a direct `Appearance.getColorScheme()` read, which this function
- * used prior to `<ThemeProvider>` support — is what makes an explicit
- * `setGlobalThemeMode('dark')`/`toggle()` override actually affect
- * rendering; the store itself falls back to tracking `Appearance` live
- * whenever the mode is `'system'` (its own default), so nothing regresses
- * for apps that never touch the override API at all. This function itself
- * has no subscription of its own, so nothing re-renders just because the
- * store's value changed — call `useGlobalDarkMode()` (or consume
- * `useTheme()`'s `isDark`) somewhere in the tree for that, NOT React
- * Native's own `useColorScheme()`, which only reflects the raw OS setting
- * and would miss an explicit override entirely.
- *
- * Phase 11 originally shipped with live in-place theme switching unverified
- * (a `uiMode` toggle triggered a re-render but `Appearance.getColorScheme()`
- * kept returning a stale value). Root-caused in Phase 12 while debugging an
- * unrelated `active:` failure: `apps/native-sandbox` has its own separate
- * `node_modules/react-native` (excluded from the npm workspace since Phase
- * 5), while `packages/react-native` resolved `react-native` hierarchically
- * up to a *different* copy at the repo root — two physical module
- * instances, so a `useColorScheme()` subscription and an
- * `Appearance.getColorScheme()` read were silently talking to two separate
- * copies of the Appearance module. Fixed by forcing a single instance via
- * `resolver.resolveRequest` in apps/native-sandbox/metro.config.js; live
- * theme switching (and `active:`, the bug that surfaced this) both verified
- * working after the fix — see Phase 12. Still relevant here: darkModeStore.ts
- * itself calls `Appearance.addChangeListener`, so the same dual-instance
- * failure mode would silently break the 'system' fallback path too if that
- * metro.config.js fix ever regressed.
- *
- * `pressed` gates the `active:` modifier — unlike `colorScheme`, there's no
- * system-level getter for "is this element currently pressed"; only RN's
- * `Pressable` ever knows this, so it's passed in directly by the caller
- * (jsx-runtime, from Pressable's own style-function callback) rather than
- * queried here. Defaults to `false` for every other element type.
- *
- * `width` gates `sm:`/`md:`/`lg:`/`xl:`/`2xl:` against the active theme's
- * `screens` scale (resolve_style.rs's `native_modifier_state`) — read fresh
- * from `Dimensions.get('window').width` on every call, the same "no
- * caching, no store" choice `colorScheme`/`pressed` already make, and for
- * the same reason: unlike dark mode there's no explicit-override concept to
- * preserve here (nobody manually overrides their screen width), so a plain
- * synchronous read is enough — no need for the subscribable store
- * darkModeStore.ts is for. As with `colorScheme`, this function has no
- * subscription of its own, so rotating/resizing the window doesn't
- * re-render anything by itself — call RN's own `useWindowDimensions()`
- * somewhere in the tree for that (same role `useColorScheme()` plays for
- * `dark:` in apps/native-sandbox/App.tsx).
- */
 declare function resolveStyle(classString: string, pressed?: boolean): StyleObject;
 
-/**
- * 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. No DOM to "apply" the resolved mode to. On web, applyToDom() flips a
- *    class/attribute the generated CSS's `dark:` selectors match against.
- *    On native there's no CSS at all — nativeBridge.ts's resolveStyle()
- *    reads getGlobalDarkMode() directly on every call instead of querying
- *    Appearance.getColorScheme() itself, which is what actually makes an
- *    explicit override affect rendering (previously that function always
- *    read the raw OS setting, so it had no way to reflect a user choice —
- *    see nativeBridge.ts's own comment on this for why that's the one
- *    genuinely fixed bug this change introduces, not just a new feature).
- */
-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;
-
-/**
- * Reactive read of the global dark-mode store — works with or without a
- * `<ThemeProvider>` mounted anywhere in the tree, since it subscribes to
- * `darkModeStore.ts` directly. No server-snapshot argument (unlike
- * @kbach/react's web version) — React Native has no SSR concept at all,
- * so there's no third argument for `useSyncExternalStore` to need.
- */
-declare function useGlobalDarkMode(): boolean;
+export { type StyleObject, resolveStyle };
 
-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.
-     */
-    defaultMode?: ThemeMode;
-}
 /**
- * Native port of @kbach/react's `ThemeProvider` — a thin, OPTIONAL React
- * Context wrapper around `darkModeStore.ts`'s single global store, not the
- * source of truth itself. Because the store is global, MULTIPLE mounted
- * providers share the exact same `mode`/`isDark` state rather than each
- * getting their own scoped value — mounting more than one is very likely a
- * mistake (each fighting over the same state via a different
- * `defaultMode`), so this warns once in dev, matching the web version's
- * identical guard.
+ * Ambient module augmentation adding `className?: string` to React
+ * Native's own component prop types — without this, `<View
+ * className="...">` type-checks fine at RUNTIME (the babel plugin/
+ * jsx-runtime accept `className` on ANY host element regardless of its
+ * declared prop type — see jsxRuntimeCore.ts's own `processElement` doc
+ * comment) but fails `tsc`/editor type-checking, since `ViewProps`/
+ * `TextProps`/etc. (react-native's own types) have no `className` field at
+ * all. Confirmed as a real, reported gap: nothing in this package shipped
+ * this augmentation before, so a React Native CLI project running `tsc`
+ * (or just seeing red squiggles in-editor) hit "Property 'className' does
+ * not exist on type ... ViewProps ..." on every styled element.
+ *
+ * A plain `.d.ts` file has no effect on its own unless something actually
+ * pulls it into a consumer's type-checking. A side-effect `import
+ * './rnClassNameTypes'` from index.ts was the first thing tried here, but
+ * tsup's dts rollup (rollup-plugin-dts) tree-shakes a side-effect-only
+ * import with nothing it can trace a type reference through — confirmed by
+ * hand that this wasn't even consistent (survived one build, silently
+ * vanished from an immediately-following clean rebuild of the identical
+ * source). `scripts/append-classname-types.mjs` appends this file's own
+ * text onto the end of the built `dist/index.d.ts`/`dist/index.web.d.ts`
+ * directly as a deterministic post-build step instead — see that script's
+ * own doc comment. Anyone who imports ANYTHING from '@kbach/react-native'
+ * gets it with no extra tsconfig step needed either way. Same underlying
+ * problem (and the interface-merge half of this fix) nativewind — a React
+ * Native styling library solving this identical className-typing problem —
+ * also has to solve.
+ *
+ * Every interface below is `export interface XProps extends Readonly<...>
+ * {}` in react-native's own generated types (RN >= ~0.81's Flow-to-TS
+ * generation, `types_generated/`) — an otherwise-empty body, so merging a
+ * member in is exactly as safe as against a hand-written interface.
+ * Deliberately NOT listed here: `ImageProps`, `TouchableOpacityProps`,
+ * `ModalProps` — these are `export type X = Readonly<...>` TYPE ALIASES in
+ * the same generated types, which TypeScript cannot declaration-merge into
+ * at all (confirmed by hand: attempting it is a flat "Duplicate identifier"
+ * compile error, not a silent no-op). They don't need an entry anyway —
+ * confirmed against a real `tsc` run (RN 0.87) that `className` on
+ * `Image`/`TouchableOpacity`/`TouchableHighlight`/`Modal`/`SafeAreaView`
+ * ALL already type-check cleanly once `ViewProps` and
+ * `TouchableWithoutFeedbackProps` below are augmented — each of those
+ * components' real prop type composes one or the other somewhere in its
+ * own `Omit<...> & ...` chain (`SafeAreaView` in particular turned out to
+ * reuse `ViewProps` directly, with no separate props type of its own at
+ * all), so the merged `className` field flows through without needing its
+ * own dedicated entry.
  */
-declare function ThemeProvider({ children, defaultMode }: ThemeProviderProps): react.JSX.Element;
+export {};
 
-interface ThemeContextValue {
-    mode: ThemeMode;
-    isDark: boolean;
-    setMode: (mode: ThemeMode) => void;
-    toggle: () => void;
+declare module 'react-native' {
+  interface ViewProps {
+    className?: string;
+  }
+  interface TextProps {
+    className?: string;
+  }
+  interface ScrollViewProps {
+    className?: string;
+  }
+  interface PressableProps {
+    className?: string;
+  }
+  interface TextInputProps {
+    className?: string;
+  }
+  interface TouchableHighlightProps {
+    className?: string;
+  }
+  interface TouchableWithoutFeedbackProps {
+    className?: string;
+  }
+  interface SwitchProps {
+    className?: string;
+  }
+  interface KeyboardAvoidingViewProps {
+    className?: string;
+  }
+  interface FlatListProps<ItemT> {
+    className?: string;
+  }
+  interface SectionListProps<ItemT, SectionT> {
+    className?: string;
+  }
 }
-/**
- * Requires a `<ThemeProvider>` ancestor — throws otherwise, since a
- * component that destructures `{ mode, setMode }` genuinely needs Context
- * (unlike a component that just wants the dark/light boolean, which should
- * reach for `useGlobalDarkMode()` instead and never needs a provider at
- * all).
- */
-declare function useTheme(): ThemeContextValue;
-
-export { type StyleObject, type ThemeConfig, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, defaultTheme, getGlobalDarkMode, getGlobalThemeMode, getTheme, resolveStyle, setGlobalThemeMode, setTheme, subscribeGlobalDarkMode, toggleGlobalDarkMode, useGlobalDarkMode, useTheme };