@kbach/react-native 1.0.0-beta.7 → 1.0.0-beta.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  resolveStyle
3
- } from "./chunk-FG5E4NLJ.mjs";
3
+ } from "./chunk-JR3BLUAV.mjs";
4
4
  import {
5
5
  createJsxFunctions
6
6
  } from "./chunk-DLIXI5OW.mjs";
@@ -0,0 +1,40 @@
1
+ import {
2
+ resolveClassName
3
+ } from "./chunk-JS5KIGAB.mjs";
4
+
5
+ // src/jsxRuntimeCoreWeb.ts
6
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
7
+ import { Fragment } from "react";
8
+ function makeElement(isStaticChildren, type, props, key) {
9
+ return (isStaticChildren ? _jsxs : _jsx)(type, props, key);
10
+ }
11
+ function processElement(resolveClassName2, type, rawProps, key, isStaticChildren) {
12
+ if (type === null || typeof type === "symbol" || !rawProps) {
13
+ return makeElement(isStaticChildren, type, rawProps ?? {}, key);
14
+ }
15
+ const { className: classStrRaw, dataSet: userDataSet, ...rest } = rawProps;
16
+ if (typeof classStrRaw !== "string") {
17
+ return makeElement(isStaticChildren, type, rawProps, key);
18
+ }
19
+ const resolved = resolveClassName2(classStrRaw);
20
+ const dataSet = { ...userDataSet, kb: resolved };
21
+ return makeElement(isStaticChildren, type, { ...rest, dataSet }, key);
22
+ }
23
+ function createJsxFunctionsWeb(resolveClassName2) {
24
+ function jsx2(type, props, key) {
25
+ return processElement(resolveClassName2, type, props, key, false);
26
+ }
27
+ function jsxs2(type, props, key) {
28
+ return processElement(resolveClassName2, type, props, key, true);
29
+ }
30
+ return { jsx: jsx2, jsxs: jsxs2 };
31
+ }
32
+
33
+ // src/jsx-runtime.web.tsx
34
+ var { jsx, jsxs } = createJsxFunctionsWeb(resolveClassName);
35
+
36
+ export {
37
+ Fragment,
38
+ jsx,
39
+ jsxs
40
+ };
@@ -0,0 +1,54 @@
1
+ // src/darkModeStore.ts
2
+ import { Appearance } from "react-native";
3
+ var listeners = /* @__PURE__ */ new Set();
4
+ function systemPrefersDark() {
5
+ return Appearance.getColorScheme() === "dark";
6
+ }
7
+ function resolveIsDark(m) {
8
+ return m === "system" ? systemPrefersDark() : m === "dark";
9
+ }
10
+ var mode = "system";
11
+ var isDark = resolveIsDark(mode);
12
+ var hasExplicitChoice = false;
13
+ var subscription = Appearance.addChangeListener(({ colorScheme }) => {
14
+ if (mode !== "system") return;
15
+ isDark = colorScheme === "dark";
16
+ notify();
17
+ });
18
+ function notify() {
19
+ for (const listener of listeners) listener();
20
+ }
21
+ function getGlobalDarkMode() {
22
+ return isDark;
23
+ }
24
+ function getGlobalThemeMode() {
25
+ return mode;
26
+ }
27
+ function setGlobalThemeMode(nextMode) {
28
+ mode = nextMode;
29
+ isDark = resolveIsDark(nextMode);
30
+ hasExplicitChoice = true;
31
+ notify();
32
+ }
33
+ function toggleGlobalDarkMode() {
34
+ setGlobalThemeMode(isDark ? "light" : "dark");
35
+ }
36
+ function subscribeGlobalDarkMode(listener) {
37
+ listeners.add(listener);
38
+ return () => listeners.delete(listener);
39
+ }
40
+ function seedDefaultMode(fallback) {
41
+ if (hasExplicitChoice || mode === fallback) return;
42
+ mode = fallback;
43
+ isDark = resolveIsDark(fallback);
44
+ notify();
45
+ }
46
+
47
+ export {
48
+ getGlobalDarkMode,
49
+ getGlobalThemeMode,
50
+ setGlobalThemeMode,
51
+ toggleGlobalDarkMode,
52
+ subscribeGlobalDarkMode,
53
+ seedDefaultMode
54
+ };
package/dist/index.d.mts CHANGED
@@ -1,19 +1,12 @@
1
- import * as react from 'react';
2
- import { ReactNode } from 'react';
3
-
4
- interface ThemeConfig {
5
- /** Plain hex only, this pass — e.g. "blue-6" -> "#2563eb" */
6
- colors: Record<string, string>;
7
- spacing: Record<string, number>;
8
- screens: Record<string, number>;
9
- darkMode: 'attribute' | 'class' | 'media';
10
- }
11
- declare const defaultTheme: ThemeConfig;
12
- declare function setTheme(theme: ThemeConfig): void;
13
- declare function getTheme(): ThemeConfig;
1
+ export { T as ThemeConfig, a as ThemeContextValue, b as ThemeMode, c as ThemeProvider, d as ThemeProviderProps, e as defaultTheme, g as getGlobalDarkMode, f as getGlobalThemeMode, h as getTheme, s as setGlobalThemeMode, i as setTheme, j as subscribeGlobalDarkMode, t as toggleGlobalDarkMode, u as useGlobalDarkMode, k as useTheme } from './ThemeContext-Dc5AC-m0.mjs';
2
+ import 'react';
14
3
 
4
+ type StyleValue = string | number | {
5
+ width: number;
6
+ height: number;
7
+ };
15
8
  interface StyleObject {
16
- [key: string]: string | number;
9
+ [key: string]: StyleValue;
17
10
  }
18
11
  /**
19
12
  * Calls the Rust engine via the KbachModule TurboModule (see
@@ -72,90 +65,20 @@ interface StyleObject {
72
65
  * re-render anything by itself — call RN's own `useWindowDimensions()`
73
66
  * somewhere in the tree for that (same role `useColorScheme()` plays for
74
67
  * `dark:` in apps/native-sandbox/App.tsx).
75
- */
76
- declare function resolveStyle(classString: string, pressed?: boolean): StyleObject;
77
-
78
- /**
79
- * Native port of @kbach/react's darkModeStore.ts — same architecture (a
80
- * single module-level store is the real source of truth;
81
- * ThemeProvider/useTheme are a thin, OPTIONAL wrapper around it; every
82
- * function here works standalone with no provider mounted anywhere), with
83
- * two real platform differences from the web version:
84
68
  *
85
- * 1. No persistence. There's no React-Native-builtin equivalent of
86
- * localStorage — adding one would mean forcing a real native dependency
87
- * (e.g. @react-native-async-storage/async-storage) on every consumer,
88
- * even ones that don't want it. The mode always starts at 'system' on a
89
- * fresh app launch. If you want persistence, read your own storage at
90
- * startup (before your first render) and call setGlobalThemeMode() with
91
- * the result — same "seed once, no built-in write-back" shape as
92
- * seedDefaultMode() below, just driven by your own storage instead of
93
- * one this package picks for you.
94
- * 2. No DOM to "apply" the resolved mode to. On web, applyToDom() flips a
95
- * class/attribute the generated CSS's `dark:` selectors match against.
96
- * On native there's no CSS at all — nativeBridge.ts's resolveStyle()
97
- * reads getGlobalDarkMode() directly on every call instead of querying
98
- * Appearance.getColorScheme() itself, which is what actually makes an
99
- * explicit override affect rendering (previously that function always
100
- * read the raw OS setting, so it had no way to reflect a user choice —
101
- * see nativeBridge.ts's own comment on this for why that's the one
102
- * genuinely fixed bug this change introduces, not just a new feature).
103
- */
104
- type ThemeMode = 'light' | 'dark' | 'system';
105
- declare function getGlobalDarkMode(): boolean;
106
- declare function getGlobalThemeMode(): ThemeMode;
107
- /** Explicit user choice — takes priority over any later `<ThemeProvider defaultMode>` seed (see `seedDefaultMode` below). Not persisted; see this module's own doc comment. */
108
- declare function setGlobalThemeMode(nextMode: ThemeMode): void;
109
- declare function toggleGlobalDarkMode(): void;
110
- declare function subscribeGlobalDarkMode(listener: () => void): () => void;
111
-
112
- /**
113
- * Reactive read of the global dark-mode store — works with or without a
114
- * `<ThemeProvider>` mounted anywhere in the tree, since it subscribes to
115
- * `darkModeStore.ts` directly. No server-snapshot argument (unlike
116
- * @kbach/react's web version) — React Native has no SSR concept at all,
117
- * so there's no third argument for `useSyncExternalStore` to need.
69
+ * Falls back to `./jsEngine` (a pure-JS, no-WASM/no-native reimplementation
70
+ * of this same resolution logic — see that directory's own doc comments)
71
+ * when `KbachModule` isn't registered at all — Expo Go, which can never
72
+ * load ANY custom native module (not even Expo's own Modules API), so the
73
+ * TurboModule this file otherwise depends on simply doesn't exist there.
74
+ * `TurboModuleRegistry.get` (not `.getEnforcing`, which throws) is what
75
+ * makes this detectable at all — `get` returns `null`/`undefined` instead.
76
+ * A real dev-client/CLI build always has the module registered, so this
77
+ * fallback only ever activates in Expo Go itself; everywhere else behaves
78
+ * exactly as before. The JS engine covers a strict subset of what the
79
+ * native/WASM engines resolve (see jsEngine/resolveUtilityNative.ts) — an
80
+ * intentional, documented parity gap, not a bug.
118
81
  */
119
- declare function useGlobalDarkMode(): boolean;
120
-
121
- interface ThemeProviderProps {
122
- children: ReactNode;
123
- /**
124
- * Applied once, on this provider's first mount, but ONLY if nothing has
125
- * made an explicit mode choice yet (see
126
- * `darkModeStore.ts::seedDefaultMode`) — an explicit prior choice always
127
- * wins over a component's own default. Unlike @kbach/react's web
128
- * version, there's no persisted value to check here — see
129
- * darkModeStore.ts's own doc comment on why this package doesn't persist
130
- * the mode across app launches.
131
- */
132
- defaultMode?: ThemeMode;
133
- }
134
- /**
135
- * Native port of @kbach/react's `ThemeProvider` — a thin, OPTIONAL React
136
- * Context wrapper around `darkModeStore.ts`'s single global store, not the
137
- * source of truth itself. Because the store is global, MULTIPLE mounted
138
- * providers share the exact same `mode`/`isDark` state rather than each
139
- * getting their own scoped value — mounting more than one is very likely a
140
- * mistake (each fighting over the same state via a different
141
- * `defaultMode`), so this warns once in dev, matching the web version's
142
- * identical guard.
143
- */
144
- declare function ThemeProvider({ children, defaultMode }: ThemeProviderProps): react.JSX.Element;
145
-
146
- interface ThemeContextValue {
147
- mode: ThemeMode;
148
- isDark: boolean;
149
- setMode: (mode: ThemeMode) => void;
150
- toggle: () => void;
151
- }
152
- /**
153
- * Requires a `<ThemeProvider>` ancestor — throws otherwise, since a
154
- * component that destructures `{ mode, setMode }` genuinely needs Context
155
- * (unlike a component that just wants the dark/light boolean, which should
156
- * reach for `useGlobalDarkMode()` instead and never needs a provider at
157
- * all).
158
- */
159
- declare function useTheme(): ThemeContextValue;
82
+ declare function resolveStyle(classString: string, pressed?: boolean): StyleObject;
160
83
 
161
- export { type StyleObject, type ThemeConfig, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, defaultTheme, getGlobalDarkMode, getGlobalThemeMode, getTheme, resolveStyle, setGlobalThemeMode, setTheme, subscribeGlobalDarkMode, toggleGlobalDarkMode, useGlobalDarkMode, useTheme };
84
+ export { type StyleObject, resolveStyle };
package/dist/index.d.ts CHANGED
@@ -1,19 +1,12 @@
1
- import * as react from 'react';
2
- import { ReactNode } from 'react';
3
-
4
- interface ThemeConfig {
5
- /** Plain hex only, this pass — e.g. "blue-6" -> "#2563eb" */
6
- colors: Record<string, string>;
7
- spacing: Record<string, number>;
8
- screens: Record<string, number>;
9
- darkMode: 'attribute' | 'class' | 'media';
10
- }
11
- declare const defaultTheme: ThemeConfig;
12
- declare function setTheme(theme: ThemeConfig): void;
13
- declare function getTheme(): ThemeConfig;
1
+ export { T as ThemeConfig, a as ThemeContextValue, b as ThemeMode, c as ThemeProvider, d as ThemeProviderProps, e as defaultTheme, g as getGlobalDarkMode, f as getGlobalThemeMode, h as getTheme, s as setGlobalThemeMode, i as setTheme, j as subscribeGlobalDarkMode, t as toggleGlobalDarkMode, u as useGlobalDarkMode, k as useTheme } from './ThemeContext-Dc5AC-m0.js';
2
+ import 'react';
14
3
 
4
+ type StyleValue = string | number | {
5
+ width: number;
6
+ height: number;
7
+ };
15
8
  interface StyleObject {
16
- [key: string]: string | number;
9
+ [key: string]: StyleValue;
17
10
  }
18
11
  /**
19
12
  * Calls the Rust engine via the KbachModule TurboModule (see
@@ -72,90 +65,20 @@ interface StyleObject {
72
65
  * re-render anything by itself — call RN's own `useWindowDimensions()`
73
66
  * somewhere in the tree for that (same role `useColorScheme()` plays for
74
67
  * `dark:` in apps/native-sandbox/App.tsx).
75
- */
76
- declare function resolveStyle(classString: string, pressed?: boolean): StyleObject;
77
-
78
- /**
79
- * Native port of @kbach/react's darkModeStore.ts — same architecture (a
80
- * single module-level store is the real source of truth;
81
- * ThemeProvider/useTheme are a thin, OPTIONAL wrapper around it; every
82
- * function here works standalone with no provider mounted anywhere), with
83
- * two real platform differences from the web version:
84
68
  *
85
- * 1. No persistence. There's no React-Native-builtin equivalent of
86
- * localStorage — adding one would mean forcing a real native dependency
87
- * (e.g. @react-native-async-storage/async-storage) on every consumer,
88
- * even ones that don't want it. The mode always starts at 'system' on a
89
- * fresh app launch. If you want persistence, read your own storage at
90
- * startup (before your first render) and call setGlobalThemeMode() with
91
- * the result — same "seed once, no built-in write-back" shape as
92
- * seedDefaultMode() below, just driven by your own storage instead of
93
- * one this package picks for you.
94
- * 2. No DOM to "apply" the resolved mode to. On web, applyToDom() flips a
95
- * class/attribute the generated CSS's `dark:` selectors match against.
96
- * On native there's no CSS at all — nativeBridge.ts's resolveStyle()
97
- * reads getGlobalDarkMode() directly on every call instead of querying
98
- * Appearance.getColorScheme() itself, which is what actually makes an
99
- * explicit override affect rendering (previously that function always
100
- * read the raw OS setting, so it had no way to reflect a user choice —
101
- * see nativeBridge.ts's own comment on this for why that's the one
102
- * genuinely fixed bug this change introduces, not just a new feature).
103
- */
104
- type ThemeMode = 'light' | 'dark' | 'system';
105
- declare function getGlobalDarkMode(): boolean;
106
- declare function getGlobalThemeMode(): ThemeMode;
107
- /** Explicit user choice — takes priority over any later `<ThemeProvider defaultMode>` seed (see `seedDefaultMode` below). Not persisted; see this module's own doc comment. */
108
- declare function setGlobalThemeMode(nextMode: ThemeMode): void;
109
- declare function toggleGlobalDarkMode(): void;
110
- declare function subscribeGlobalDarkMode(listener: () => void): () => void;
111
-
112
- /**
113
- * Reactive read of the global dark-mode store — works with or without a
114
- * `<ThemeProvider>` mounted anywhere in the tree, since it subscribes to
115
- * `darkModeStore.ts` directly. No server-snapshot argument (unlike
116
- * @kbach/react's web version) — React Native has no SSR concept at all,
117
- * so there's no third argument for `useSyncExternalStore` to need.
69
+ * Falls back to `./jsEngine` (a pure-JS, no-WASM/no-native reimplementation
70
+ * of this same resolution logic — see that directory's own doc comments)
71
+ * when `KbachModule` isn't registered at all — Expo Go, which can never
72
+ * load ANY custom native module (not even Expo's own Modules API), so the
73
+ * TurboModule this file otherwise depends on simply doesn't exist there.
74
+ * `TurboModuleRegistry.get` (not `.getEnforcing`, which throws) is what
75
+ * makes this detectable at all — `get` returns `null`/`undefined` instead.
76
+ * A real dev-client/CLI build always has the module registered, so this
77
+ * fallback only ever activates in Expo Go itself; everywhere else behaves
78
+ * exactly as before. The JS engine covers a strict subset of what the
79
+ * native/WASM engines resolve (see jsEngine/resolveUtilityNative.ts) — an
80
+ * intentional, documented parity gap, not a bug.
118
81
  */
119
- declare function useGlobalDarkMode(): boolean;
120
-
121
- interface ThemeProviderProps {
122
- children: ReactNode;
123
- /**
124
- * Applied once, on this provider's first mount, but ONLY if nothing has
125
- * made an explicit mode choice yet (see
126
- * `darkModeStore.ts::seedDefaultMode`) — an explicit prior choice always
127
- * wins over a component's own default. Unlike @kbach/react's web
128
- * version, there's no persisted value to check here — see
129
- * darkModeStore.ts's own doc comment on why this package doesn't persist
130
- * the mode across app launches.
131
- */
132
- defaultMode?: ThemeMode;
133
- }
134
- /**
135
- * Native port of @kbach/react's `ThemeProvider` — a thin, OPTIONAL React
136
- * Context wrapper around `darkModeStore.ts`'s single global store, not the
137
- * source of truth itself. Because the store is global, MULTIPLE mounted
138
- * providers share the exact same `mode`/`isDark` state rather than each
139
- * getting their own scoped value — mounting more than one is very likely a
140
- * mistake (each fighting over the same state via a different
141
- * `defaultMode`), so this warns once in dev, matching the web version's
142
- * identical guard.
143
- */
144
- declare function ThemeProvider({ children, defaultMode }: ThemeProviderProps): react.JSX.Element;
145
-
146
- interface ThemeContextValue {
147
- mode: ThemeMode;
148
- isDark: boolean;
149
- setMode: (mode: ThemeMode) => void;
150
- toggle: () => void;
151
- }
152
- /**
153
- * Requires a `<ThemeProvider>` ancestor — throws otherwise, since a
154
- * component that destructures `{ mode, setMode }` genuinely needs Context
155
- * (unlike a component that just wants the dark/light boolean, which should
156
- * reach for `useGlobalDarkMode()` instead and never needs a provider at
157
- * all).
158
- */
159
- declare function useTheme(): ThemeContextValue;
82
+ declare function resolveStyle(classString: string, pressed?: boolean): StyleObject;
160
83
 
161
- export { type StyleObject, type ThemeConfig, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, defaultTheme, getGlobalDarkMode, getGlobalThemeMode, getTheme, resolveStyle, setGlobalThemeMode, setTheme, subscribeGlobalDarkMode, toggleGlobalDarkMode, useGlobalDarkMode, useTheme };
84
+ export { type StyleObject, resolveStyle };