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

package/dist/{chunk-6QFPLRSP.mjs → chunk-6ML62O2R.mjs}

@@ -1,6 +1,6 @@
 import {
   resolveClassName
-} from "./chunk-ZB2UU6EO.mjs";
+} from "./chunk-3ED4FIO2.mjs";
 
 // src/jsxRuntimeCoreWeb.ts
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/dist/{chunk-RBJXE32L.mjs → chunk-XGQWM65X.mjs}

@@ -1,6 +1,6 @@
 import {
   getTheme
-} from "./chunk-HK6PDJJK.mjs";
+} from "./chunk-3ED4FIO2.mjs";
 
 // src/darkModeStore.ts
 import { Appearance } from "react-native";

package/dist/darkModeStore.d.ts

@@ -0,0 +1,58 @@
+/**
+ * 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;
+/**
+ * Applies `fallback` as the initial mode, but ONLY if nothing has made an
+ * explicit choice yet — called once by `<ThemeProvider defaultMode>` on
+ * mount, never exported for direct use elsewhere. Unlike the web store,
+ * there's no persisted-value check here (nothing to check); the only
+ * thing that can beat a seed is a `setGlobalThemeMode()` call that
+ * happened first (e.g. your own storage-restore logic run before the
+ * provider mounts).
+ */
+declare function seedDefaultMode(fallback: ThemeMode): void;
+/** Exported for tests only — resets every module-level field back to its as-if-just-imported state. */
+declare function _resetForTests(): void;
+/** Exported for tests only — removes the Appearance change subscription so a test's mock doesn't leak into the next one. */
+declare function _unsubscribeForTests(): void;
+
+export { type ThemeMode, _resetForTests, _unsubscribeForTests, getGlobalDarkMode, getGlobalThemeMode, seedDefaultMode, setGlobalThemeMode, subscribeGlobalDarkMode, toggleGlobalDarkMode };

package/dist/darkModeStore.js

@@ -0,0 +1,112 @@
+"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/darkModeStore.ts
+var darkModeStore_exports = {};
+__export(darkModeStore_exports, {
+  _resetForTests: () => _resetForTests,
+  _unsubscribeForTests: () => _unsubscribeForTests,
+  getGlobalDarkMode: () => getGlobalDarkMode,
+  getGlobalThemeMode: () => getGlobalThemeMode,
+  seedDefaultMode: () => seedDefaultMode,
+  setGlobalThemeMode: () => setGlobalThemeMode,
+  subscribeGlobalDarkMode: () => subscribeGlobalDarkMode,
+  toggleGlobalDarkMode: () => toggleGlobalDarkMode
+});
+module.exports = __toCommonJS(darkModeStore_exports);
+var import_react_native = require("react-native");
+var import_theme = require("./theme");
+var listeners = /* @__PURE__ */ new Set();
+function systemPrefersDark() {
+  return import_react_native.Appearance.getColorScheme() === "dark";
+}
+function resolveIsDark(m) {
+  return m === "system" ? systemPrefersDark() : m === "dark";
+}
+function applyToDom(dark) {
+  if (typeof document === "undefined") return;
+  const root = document.documentElement;
+  const strategy = (0, import_theme.getTheme)().darkMode;
+  if (strategy === "class") {
+    root.classList.toggle("dark", dark);
+    root.classList.toggle("light", !dark);
+  } else if (strategy === "attribute") {
+    root.setAttribute("data-theme", dark ? "dark" : "light");
+  }
+}
+var mode = "system";
+var isDark = resolveIsDark(mode);
+applyToDom(isDark);
+var hasExplicitChoice = false;
+var subscription = import_react_native.Appearance.addChangeListener(({ colorScheme }) => {
+  if (mode !== "system") return;
+  isDark = colorScheme === "dark";
+  applyToDom(isDark);
+  notify();
+});
+function notify() {
+  for (const listener of listeners) listener();
+}
+function getGlobalDarkMode() {
+  return isDark;
+}
+function getGlobalThemeMode() {
+  return mode;
+}
+function setGlobalThemeMode(nextMode) {
+  mode = nextMode;
+  isDark = resolveIsDark(nextMode);
+  hasExplicitChoice = true;
+  applyToDom(isDark);
+  notify();
+}
+function toggleGlobalDarkMode() {
+  setGlobalThemeMode(isDark ? "light" : "dark");
+}
+function subscribeGlobalDarkMode(listener) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+function seedDefaultMode(fallback) {
+  if (hasExplicitChoice || mode === fallback) return;
+  mode = fallback;
+  isDark = resolveIsDark(fallback);
+  applyToDom(isDark);
+  notify();
+}
+function _resetForTests() {
+  mode = "system";
+  isDark = resolveIsDark(mode);
+  hasExplicitChoice = false;
+  listeners.clear();
+}
+function _unsubscribeForTests() {
+  subscription.remove();
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  _resetForTests,
+  _unsubscribeForTests,
+  getGlobalDarkMode,
+  getGlobalThemeMode,
+  seedDefaultMode,
+  setGlobalThemeMode,
+  subscribeGlobalDarkMode,
+  toggleGlobalDarkMode
+});

package/dist/index.d.ts

@@ -1,4 +1,6 @@
-export { C as ColorEntry, a as ColorScale, b as ColorsAPI, c as ContainerConfig, K as KbachConfig, T as ThemeConfig, d as ThemeMode, e as ThemeProvider, f as ThemeProviderProps, g as ThemeState, h as applyKbachConfig, i as defaultTheme, j as getGlobalDarkMode, k as getGlobalThemeMode, l as getTheme, r as resolveKbachConfig, s as setGlobalThemeMode, m as setTheme, n as subscribeGlobalDarkMode, t as toggleGlobalDarkMode, u as useColors, o as useTheme } from './useColors-C6jyCLuG.js';
+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 useTheme } from './useColors-Br8QhIlE.js';
+export { ThemeMode, getGlobalDarkMode, getGlobalThemeMode, setGlobalThemeMode, subscribeGlobalDarkMode, toggleGlobalDarkMode } from './darkModeStore';
 import 'react';
 
 type StyleValue = string | number | {