@kbach/react-native 1.0.0-beta.5 → 1.0.0-beta.50
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/AGENTS.md +347 -0
- package/README.md +143 -137
- package/android/src/main/jniLibs/arm64-v8a/libkbach_core_engine.so +0 -0
- package/android/src/main/jniLibs/x86_64/libkbach_core_engine.so +0 -0
- package/dist/chunk-3KLOVONL.mjs +564 -0
- package/dist/chunk-SC3L5I7H.mjs +40 -0
- package/dist/chunk-XOH25F3E.mjs +112 -0
- package/dist/clsx-BLLSnqAa.d.ts +277 -0
- package/dist/darkModeStore.d.ts +73 -0
- package/dist/darkModeStore.js +118 -0
- package/dist/dynamicTokens.d.ts +53 -0
- package/dist/dynamicTokens.js +75 -0
- package/dist/index.d.ts +92 -151
- package/dist/index.js +2119 -393
- package/dist/index.web.d.ts +101 -4
- package/dist/index.web.js +438 -401
- package/dist/index.web.mjs +268 -14
- package/dist/jsx-dev-runtime.js +2238 -332
- package/dist/jsx-dev-runtime.web.js +207 -361
- package/dist/jsx-dev-runtime.web.mjs +19 -7
- package/dist/jsx-runtime.js +2238 -332
- package/dist/jsx-runtime.web.js +191 -353
- package/dist/jsx-runtime.web.mjs +3 -6
- package/dist/theme.d.ts +54 -0
- package/dist/{chunk-AEVOM2NB.mjs → theme.js} +86 -61
- package/package.json +44 -14
- package/src/babel-plugin.js +144 -2
- package/dist/chunk-4KCCEMEN.mjs +0 -66
- package/dist/chunk-DLIXI5OW.mjs +0 -53
- package/dist/chunk-FG5E4NLJ.mjs +0 -18
- package/dist/chunk-KSDFO34H.mjs +0 -32
- package/dist/chunk-OJQAJLYT.mjs +0 -14
- package/dist/chunk-ZUE6SCTE.mjs +0 -14
- package/dist/index.d.mts +0 -161
- package/dist/index.mjs +0 -32
- package/dist/index.web.d.mts +0 -7
- package/dist/jsx-dev-runtime.d.mts +0 -10
- package/dist/jsx-dev-runtime.mjs +0 -17
- package/dist/jsx-dev-runtime.web.d.mts +0 -10
- package/dist/jsx-runtime.d.mts +0 -7
- package/dist/jsx-runtime.mjs +0 -14
- package/dist/jsx-runtime.web.d.mts +0 -7
package/dist/chunk-OJQAJLYT.mjs
DELETED
package/dist/chunk-ZUE6SCTE.mjs
DELETED
package/dist/index.d.mts
DELETED
|
@@ -1,161 +0,0 @@
|
|
|
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;
|
|
14
|
-
|
|
15
|
-
interface StyleObject {
|
|
16
|
-
[key: string]: string | number;
|
|
17
|
-
}
|
|
18
|
-
/**
|
|
19
|
-
* Calls the Rust engine via the KbachModule TurboModule (see
|
|
20
|
-
* apps/native-sandbox/android/.../KbachModule.kt and
|
|
21
|
-
* packages/core-engine/src/resolve_style.rs) and returns a plain style
|
|
22
|
-
* object ready for RN's `style` prop. Synchronous — no async init step,
|
|
23
|
-
* unlike the web/WASM path, since JSI-backed TurboModule methods are
|
|
24
|
-
* available as soon as the module is loaded.
|
|
25
|
-
*
|
|
26
|
-
* Reads `getGlobalDarkMode()` (darkModeStore.ts) fresh on every call (no
|
|
27
|
-
* caching) so `dark:` resolves correctly whenever this runs. That store —
|
|
28
|
-
* not a direct `Appearance.getColorScheme()` read, which this function
|
|
29
|
-
* used prior to `<ThemeProvider>` support — is what makes an explicit
|
|
30
|
-
* `setGlobalThemeMode('dark')`/`toggle()` override actually affect
|
|
31
|
-
* rendering; the store itself falls back to tracking `Appearance` live
|
|
32
|
-
* whenever the mode is `'system'` (its own default), so nothing regresses
|
|
33
|
-
* for apps that never touch the override API at all. This function itself
|
|
34
|
-
* has no subscription of its own, so nothing re-renders just because the
|
|
35
|
-
* store's value changed — call `useGlobalDarkMode()` (or consume
|
|
36
|
-
* `useTheme()`'s `isDark`) somewhere in the tree for that, NOT React
|
|
37
|
-
* Native's own `useColorScheme()`, which only reflects the raw OS setting
|
|
38
|
-
* and would miss an explicit override entirely.
|
|
39
|
-
*
|
|
40
|
-
* Phase 11 originally shipped with live in-place theme switching unverified
|
|
41
|
-
* (a `uiMode` toggle triggered a re-render but `Appearance.getColorScheme()`
|
|
42
|
-
* kept returning a stale value). Root-caused in Phase 12 while debugging an
|
|
43
|
-
* unrelated `active:` failure: `apps/native-sandbox` has its own separate
|
|
44
|
-
* `node_modules/react-native` (excluded from the npm workspace since Phase
|
|
45
|
-
* 5), while `packages/react-native` resolved `react-native` hierarchically
|
|
46
|
-
* up to a *different* copy at the repo root — two physical module
|
|
47
|
-
* instances, so a `useColorScheme()` subscription and an
|
|
48
|
-
* `Appearance.getColorScheme()` read were silently talking to two separate
|
|
49
|
-
* copies of the Appearance module. Fixed by forcing a single instance via
|
|
50
|
-
* `resolver.resolveRequest` in apps/native-sandbox/metro.config.js; live
|
|
51
|
-
* theme switching (and `active:`, the bug that surfaced this) both verified
|
|
52
|
-
* working after the fix — see Phase 12. Still relevant here: darkModeStore.ts
|
|
53
|
-
* itself calls `Appearance.addChangeListener`, so the same dual-instance
|
|
54
|
-
* failure mode would silently break the 'system' fallback path too if that
|
|
55
|
-
* metro.config.js fix ever regressed.
|
|
56
|
-
*
|
|
57
|
-
* `pressed` gates the `active:` modifier — unlike `colorScheme`, there's no
|
|
58
|
-
* system-level getter for "is this element currently pressed"; only RN's
|
|
59
|
-
* `Pressable` ever knows this, so it's passed in directly by the caller
|
|
60
|
-
* (jsx-runtime, from Pressable's own style-function callback) rather than
|
|
61
|
-
* queried here. Defaults to `false` for every other element type.
|
|
62
|
-
*
|
|
63
|
-
* `width` gates `sm:`/`md:`/`lg:`/`xl:`/`2xl:` against the active theme's
|
|
64
|
-
* `screens` scale (resolve_style.rs's `native_modifier_state`) — read fresh
|
|
65
|
-
* from `Dimensions.get('window').width` on every call, the same "no
|
|
66
|
-
* caching, no store" choice `colorScheme`/`pressed` already make, and for
|
|
67
|
-
* the same reason: unlike dark mode there's no explicit-override concept to
|
|
68
|
-
* preserve here (nobody manually overrides their screen width), so a plain
|
|
69
|
-
* synchronous read is enough — no need for the subscribable store
|
|
70
|
-
* darkModeStore.ts is for. As with `colorScheme`, this function has no
|
|
71
|
-
* subscription of its own, so rotating/resizing the window doesn't
|
|
72
|
-
* re-render anything by itself — call RN's own `useWindowDimensions()`
|
|
73
|
-
* somewhere in the tree for that (same role `useColorScheme()` plays for
|
|
74
|
-
* `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
|
-
*
|
|
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.
|
|
118
|
-
*/
|
|
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;
|
|
160
|
-
|
|
161
|
-
export { type StyleObject, type ThemeConfig, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, defaultTheme, getGlobalDarkMode, getGlobalThemeMode, getTheme, resolveStyle, setGlobalThemeMode, setTheme, subscribeGlobalDarkMode, toggleGlobalDarkMode, useGlobalDarkMode, useTheme };
|
package/dist/index.mjs
DELETED
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
ThemeProvider,
|
|
3
|
-
useGlobalDarkMode,
|
|
4
|
-
useTheme
|
|
5
|
-
} from "./chunk-4KCCEMEN.mjs";
|
|
6
|
-
import {
|
|
7
|
-
resolveStyle
|
|
8
|
-
} from "./chunk-FG5E4NLJ.mjs";
|
|
9
|
-
import {
|
|
10
|
-
defaultTheme,
|
|
11
|
-
getGlobalDarkMode,
|
|
12
|
-
getGlobalThemeMode,
|
|
13
|
-
getTheme,
|
|
14
|
-
setGlobalThemeMode,
|
|
15
|
-
setTheme,
|
|
16
|
-
subscribeGlobalDarkMode,
|
|
17
|
-
toggleGlobalDarkMode
|
|
18
|
-
} from "./chunk-AEVOM2NB.mjs";
|
|
19
|
-
export {
|
|
20
|
-
ThemeProvider,
|
|
21
|
-
defaultTheme,
|
|
22
|
-
getGlobalDarkMode,
|
|
23
|
-
getGlobalThemeMode,
|
|
24
|
-
getTheme,
|
|
25
|
-
resolveStyle,
|
|
26
|
-
setGlobalThemeMode,
|
|
27
|
-
setTheme,
|
|
28
|
-
subscribeGlobalDarkMode,
|
|
29
|
-
toggleGlobalDarkMode,
|
|
30
|
-
useGlobalDarkMode,
|
|
31
|
-
useTheme
|
|
32
|
-
};
|
package/dist/index.web.d.mts
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { StyleObject } from './index.mjs';
|
|
2
|
-
export { ThemeConfig, ThemeContextValue, ThemeMode, ThemeProvider, ThemeProviderProps, defaultTheme, getGlobalDarkMode, getGlobalThemeMode, getTheme, setGlobalThemeMode, setTheme, subscribeGlobalDarkMode, toggleGlobalDarkMode, useGlobalDarkMode, useTheme } from './index.mjs';
|
|
3
|
-
import 'react';
|
|
4
|
-
|
|
5
|
-
declare function resolveStyle(classString: string, pressed?: boolean): StyleObject;
|
|
6
|
-
|
|
7
|
-
export { StyleObject, resolveStyle };
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import * as react from 'react';
|
|
2
|
-
export { Fragment } from 'react';
|
|
3
|
-
|
|
4
|
-
declare const jsxDEV: (type: unknown, props: Record<string, unknown> | null, key?: string, isStaticChildren?: boolean, source?: {
|
|
5
|
-
fileName: string;
|
|
6
|
-
lineNumber: number;
|
|
7
|
-
columnNumber: number;
|
|
8
|
-
}, self?: unknown) => react.ReactElement;
|
|
9
|
-
|
|
10
|
-
export { jsxDEV };
|
package/dist/jsx-dev-runtime.mjs
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
jsx,
|
|
3
|
-
jsxs
|
|
4
|
-
} from "./chunk-OJQAJLYT.mjs";
|
|
5
|
-
import "./chunk-FG5E4NLJ.mjs";
|
|
6
|
-
import {
|
|
7
|
-
Fragment,
|
|
8
|
-
createJsxDEV
|
|
9
|
-
} from "./chunk-DLIXI5OW.mjs";
|
|
10
|
-
import "./chunk-AEVOM2NB.mjs";
|
|
11
|
-
|
|
12
|
-
// src/jsx-dev-runtime.tsx
|
|
13
|
-
var jsxDEV = createJsxDEV(jsx, jsxs);
|
|
14
|
-
export {
|
|
15
|
-
Fragment,
|
|
16
|
-
jsxDEV
|
|
17
|
-
};
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import * as react from 'react';
|
|
2
|
-
export { Fragment } from 'react';
|
|
3
|
-
|
|
4
|
-
declare const jsxDEV: (type: unknown, props: Record<string, unknown> | null, key?: string, isStaticChildren?: boolean, source?: {
|
|
5
|
-
fileName: string;
|
|
6
|
-
lineNumber: number;
|
|
7
|
-
columnNumber: number;
|
|
8
|
-
}, self?: unknown) => react.ReactElement;
|
|
9
|
-
|
|
10
|
-
export { jsxDEV };
|
package/dist/jsx-runtime.d.mts
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import * as react from 'react';
|
|
2
|
-
export { Fragment, JSX } from 'react';
|
|
3
|
-
|
|
4
|
-
declare const jsx: (type: unknown, props: Record<string, unknown> | null, key?: string) => react.ReactElement;
|
|
5
|
-
declare const jsxs: (type: unknown, props: Record<string, unknown> | null, key?: string) => react.ReactElement;
|
|
6
|
-
|
|
7
|
-
export { jsx, jsxs };
|
package/dist/jsx-runtime.mjs
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import * as react from 'react';
|
|
2
|
-
export { Fragment, JSX } from 'react';
|
|
3
|
-
|
|
4
|
-
declare const jsx: (type: unknown, props: Record<string, unknown> | null, key?: string) => react.ReactElement;
|
|
5
|
-
declare const jsxs: (type: unknown, props: Record<string, unknown> | null, key?: string) => react.ReactElement;
|
|
6
|
-
|
|
7
|
-
export { jsx, jsxs };
|