@kbach/react-native 1.0.0-beta.6 → 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.
- package/README.md +154 -39
- package/dist/ThemeContext-Dc5AC-m0.d.mts +98 -0
- package/dist/ThemeContext-Dc5AC-m0.d.ts +98 -0
- package/dist/{chunk-AEVOM2NB.mjs → chunk-4BXM3QUV.mjs} +38 -57
- package/dist/{chunk-4KCCEMEN.mjs → chunk-CGU7UM2F.mjs} +1 -1
- package/dist/chunk-JR3BLUAV.mjs +1204 -0
- package/dist/chunk-JS5KIGAB.mjs +192 -0
- package/dist/{chunk-OJQAJLYT.mjs → chunk-KV3ZIXSH.mjs} +1 -1
- package/dist/chunk-OIW7OQWO.mjs +40 -0
- package/dist/chunk-Z664AKW7.mjs +54 -0
- package/dist/index.d.mts +21 -98
- package/dist/index.d.ts +21 -98
- package/dist/index.js +1219 -5
- package/dist/index.mjs +8 -6
- package/dist/index.web.d.mts +12 -4
- package/dist/index.web.d.ts +12 -4
- package/dist/index.web.js +101 -36
- package/dist/index.web.mjs +11 -9
- package/dist/jsx-dev-runtime.js +1223 -5
- package/dist/jsx-dev-runtime.mjs +4 -3
- package/dist/jsx-dev-runtime.web.js +108 -71
- package/dist/jsx-dev-runtime.web.mjs +4 -4
- package/dist/jsx-runtime.js +1223 -5
- package/dist/jsx-runtime.mjs +4 -3
- package/dist/jsx-runtime.web.js +93 -61
- package/dist/jsx-runtime.web.mjs +4 -6
- package/package.json +22 -4
- package/dist/chunk-5WK55Z56.mjs +0 -14
- package/dist/chunk-FG5E4NLJ.mjs +0 -18
- package/dist/chunk-T3HPTH62.mjs +0 -161
|
@@ -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
|
-
|
|
2
|
-
import
|
|
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]:
|
|
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
|
-
*
|
|
86
|
-
*
|
|
87
|
-
*
|
|
88
|
-
*
|
|
89
|
-
*
|
|
90
|
-
*
|
|
91
|
-
*
|
|
92
|
-
*
|
|
93
|
-
*
|
|
94
|
-
*
|
|
95
|
-
*
|
|
96
|
-
*
|
|
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
|
|
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,
|
|
84
|
+
export { type StyleObject, resolveStyle };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,19 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
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]:
|
|
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
|
-
*
|
|
86
|
-
*
|
|
87
|
-
*
|
|
88
|
-
*
|
|
89
|
-
*
|
|
90
|
-
*
|
|
91
|
-
*
|
|
92
|
-
*
|
|
93
|
-
*
|
|
94
|
-
*
|
|
95
|
-
*
|
|
96
|
-
*
|
|
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
|
|
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,
|
|
84
|
+
export { type StyleObject, resolveStyle };
|