@kbach/react-native 1.0.0-beta.1 → 1.0.0-beta.11

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.
Files changed (46) hide show
  1. package/README.md +87 -66
  2. package/android/build.gradle +36 -0
  3. package/android/src/main/AndroidManifest.xml +14 -0
  4. package/android/src/main/java/com/kbachnative/KbachModule.kt +83 -0
  5. package/android/src/main/java/com/kbachnative/KbachPackage.kt +54 -0
  6. package/android/src/main/jniLibs/arm64-v8a/libkbach_core_engine.so +0 -0
  7. package/android/src/main/jniLibs/x86_64/libkbach_core_engine.so +0 -0
  8. package/dist/chunk-4DQXTAM3.mjs +63 -0
  9. package/dist/chunk-5MU6PEXV.mjs +14 -0
  10. package/dist/chunk-H5Z24XX5.mjs +192 -0
  11. package/dist/{chunk-YHF3QLRL.mjs → chunk-HK6PDJJK.mjs} +61 -68
  12. package/dist/chunk-RBJXE32L.mjs +73 -0
  13. package/dist/chunk-TDWBXJH5.mjs +186 -0
  14. package/dist/chunk-XHL653X2.mjs +1211 -0
  15. package/dist/chunk-YOC3SHF5.mjs +40 -0
  16. package/dist/index.d.mts +37 -102
  17. package/dist/index.d.ts +37 -102
  18. package/dist/index.js +1411 -38
  19. package/dist/index.mjs +19 -61
  20. package/dist/index.web.d.mts +15 -0
  21. package/dist/index.web.d.ts +15 -0
  22. package/dist/index.web.js +829 -0
  23. package/dist/index.web.mjs +38 -0
  24. package/dist/jsx-dev-runtime.d.mts +3 -12
  25. package/dist/jsx-dev-runtime.d.ts +3 -12
  26. package/dist/jsx-dev-runtime.js +1313 -36
  27. package/dist/jsx-dev-runtime.mjs +9 -11
  28. package/dist/jsx-dev-runtime.web.d.mts +10 -0
  29. package/dist/jsx-dev-runtime.web.d.ts +10 -0
  30. package/dist/jsx-dev-runtime.web.js +659 -0
  31. package/dist/jsx-dev-runtime.web.mjs +18 -0
  32. package/dist/jsx-runtime.d.mts +3 -23
  33. package/dist/jsx-runtime.d.ts +3 -23
  34. package/dist/jsx-runtime.js +1304 -28
  35. package/dist/jsx-runtime.mjs +7 -3
  36. package/dist/jsx-runtime.web.d.mts +7 -0
  37. package/dist/jsx-runtime.web.d.ts +7 -0
  38. package/dist/jsx-runtime.web.js +602 -0
  39. package/dist/jsx-runtime.web.mjs +12 -0
  40. package/dist/useColors-C6jyCLuG.d.mts +239 -0
  41. package/dist/useColors-C6jyCLuG.d.ts +239 -0
  42. package/package.json +57 -8
  43. package/react-native.config.js +29 -0
  44. package/specs/NativeKbachModule.ts +31 -0
  45. package/src/babel-plugin.js +74 -2
  46. package/dist/chunk-SVMYVXY6.mjs +0 -44
@@ -0,0 +1,40 @@
1
+ import {
2
+ resolveClassName
3
+ } from "./chunk-H5Z24XX5.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
+ };
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 { 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.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
@@ -32,10 +25,9 @@ interface StyleObject {
32
25
  * whenever the mode is `'system'` (its own default), so nothing regresses
33
26
  * for apps that never touch the override API at all. This function itself
34
27
  * 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.
28
+ * store's value changed — call `useTheme()` (its `isDark`) somewhere in
29
+ * the tree for that, NOT React Native's own `useColorScheme()`, which only
30
+ * reflects the raw OS setting and would miss an explicit override entirely.
39
31
  *
40
32
  * Phase 11 originally shipped with live in-place theme switching unverified
41
33
  * (a `uiMode` toggle triggered a re-render but `Appearance.getColorScheme()`
@@ -59,90 +51,33 @@ interface StyleObject {
59
51
  * `Pressable` ever knows this, so it's passed in directly by the caller
60
52
  * (jsx-runtime, from Pressable's own style-function callback) rather than
61
53
  * queried here. Defaults to `false` for every other element type.
62
- */
63
- declare function resolveStyle(classString: string, pressed?: boolean): StyleObject;
64
-
65
- /**
66
- * Native port of @kbach/react's darkModeStore.ts — same architecture (a
67
- * single module-level store is the real source of truth;
68
- * ThemeProvider/useTheme are a thin, OPTIONAL wrapper around it; every
69
- * function here works standalone with no provider mounted anywhere), with
70
- * two real platform differences from the web version:
71
54
  *
72
- * 1. No persistence. There's no React-Native-builtin equivalent of
73
- * localStorage — adding one would mean forcing a real native dependency
74
- * (e.g. @react-native-async-storage/async-storage) on every consumer,
75
- * even ones that don't want it. The mode always starts at 'system' on a
76
- * fresh app launch. If you want persistence, read your own storage at
77
- * startup (before your first render) and call setGlobalThemeMode() with
78
- * the result — same "seed once, no built-in write-back" shape as
79
- * seedDefaultMode() below, just driven by your own storage instead of
80
- * one this package picks for you.
81
- * 2. No DOM to "apply" the resolved mode to. On web, applyToDom() flips a
82
- * class/attribute the generated CSS's `dark:` selectors match against.
83
- * On native there's no CSS at all — nativeBridge.ts's resolveStyle()
84
- * reads getGlobalDarkMode() directly on every call instead of querying
85
- * Appearance.getColorScheme() itself, which is what actually makes an
86
- * explicit override affect rendering (previously that function always
87
- * read the raw OS setting, so it had no way to reflect a user choice —
88
- * see nativeBridge.ts's own comment on this for why that's the one
89
- * genuinely fixed bug this change introduces, not just a new feature).
90
- */
91
- type ThemeMode = 'light' | 'dark' | 'system';
92
- declare function getGlobalDarkMode(): boolean;
93
- declare function getGlobalThemeMode(): ThemeMode;
94
- /** Explicit user choice — takes priority over any later `<ThemeProvider defaultMode>` seed (see `seedDefaultMode` below). Not persisted; see this module's own doc comment. */
95
- declare function setGlobalThemeMode(nextMode: ThemeMode): void;
96
- declare function toggleGlobalDarkMode(): void;
97
- declare function subscribeGlobalDarkMode(listener: () => void): () => void;
98
-
99
- /**
100
- * Reactive read of the global dark-mode store — works with or without a
101
- * `<ThemeProvider>` mounted anywhere in the tree, since it subscribes to
102
- * `darkModeStore.ts` directly. No server-snapshot argument (unlike
103
- * @kbach/react's web version) — React Native has no SSR concept at all,
104
- * so there's no third argument for `useSyncExternalStore` to need.
105
- */
106
- declare function useGlobalDarkMode(): boolean;
107
-
108
- interface ThemeProviderProps {
109
- children: ReactNode;
110
- /**
111
- * Applied once, on this provider's first mount, but ONLY if nothing has
112
- * made an explicit mode choice yet (see
113
- * `darkModeStore.ts::seedDefaultMode`) — an explicit prior choice always
114
- * wins over a component's own default. Unlike @kbach/react's web
115
- * version, there's no persisted value to check here — see
116
- * darkModeStore.ts's own doc comment on why this package doesn't persist
117
- * the mode across app launches.
118
- */
119
- defaultMode?: ThemeMode;
120
- }
121
- /**
122
- * Native port of @kbach/react's `ThemeProvider` — a thin, OPTIONAL React
123
- * Context wrapper around `darkModeStore.ts`'s single global store, not the
124
- * source of truth itself. Because the store is global, MULTIPLE mounted
125
- * providers share the exact same `mode`/`isDark` state rather than each
126
- * getting their own scoped value — mounting more than one is very likely a
127
- * mistake (each fighting over the same state via a different
128
- * `defaultMode`), so this warns once in dev, matching the web version's
129
- * identical guard.
130
- */
131
- declare function ThemeProvider({ children, defaultMode }: ThemeProviderProps): react.JSX.Element;
132
-
133
- interface ThemeContextValue {
134
- mode: ThemeMode;
135
- isDark: boolean;
136
- setMode: (mode: ThemeMode) => void;
137
- toggle: () => void;
138
- }
139
- /**
140
- * Requires a `<ThemeProvider>` ancestor — throws otherwise, since a
141
- * component that destructures `{ mode, setMode }` genuinely needs Context
142
- * (unlike a component that just wants the dark/light boolean, which should
143
- * reach for `useGlobalDarkMode()` instead and never needs a provider at
144
- * all).
55
+ * `width` gates `sm:`/`md:`/`lg:`/`xl:`/`2xl:` against the active theme's
56
+ * `screens` scale (resolve_style.rs's `native_modifier_state`) — read fresh
57
+ * from `Dimensions.get('window').width` on every call, the same "no
58
+ * caching, no store" choice `colorScheme`/`pressed` already make, and for
59
+ * the same reason: unlike dark mode there's no explicit-override concept to
60
+ * preserve here (nobody manually overrides their screen width), so a plain
61
+ * synchronous read is enough — no need for the subscribable store
62
+ * darkModeStore.ts is for. As with `colorScheme`, this function has no
63
+ * subscription of its own, so rotating/resizing the window doesn't
64
+ * re-render anything by itself — call RN's own `useWindowDimensions()`
65
+ * somewhere in the tree for that (same role `useColorScheme()` plays for
66
+ * `dark:` in apps/native-sandbox/App.tsx).
67
+ *
68
+ * Falls back to `./jsEngine` (a pure-JS, no-WASM/no-native reimplementation
69
+ * of this same resolution logic — see that directory's own doc comments)
70
+ * when `KbachModule` isn't registered at all — Expo Go, which can never
71
+ * load ANY custom native module (not even Expo's own Modules API), so the
72
+ * TurboModule this file otherwise depends on simply doesn't exist there.
73
+ * `TurboModuleRegistry.get` (not `.getEnforcing`, which throws) is what
74
+ * makes this detectable at all — `get` returns `null`/`undefined` instead.
75
+ * A real dev-client/CLI build always has the module registered, so this
76
+ * fallback only ever activates in Expo Go itself; everywhere else behaves
77
+ * exactly as before. The JS engine covers a strict subset of what the
78
+ * native/WASM engines resolve (see jsEngine/resolveUtilityNative.ts) — an
79
+ * intentional, documented parity gap, not a bug.
145
80
  */
146
- declare function useTheme(): ThemeContextValue;
81
+ declare function resolveStyle(classString: string, pressed?: boolean): StyleObject;
147
82
 
148
- export { type StyleObject, type ThemeConfig, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, defaultTheme, getGlobalDarkMode, getGlobalThemeMode, getTheme, resolveStyle, setGlobalThemeMode, setTheme, subscribeGlobalDarkMode, toggleGlobalDarkMode, useGlobalDarkMode, useTheme };
83
+ 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 { 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';
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
@@ -32,10 +25,9 @@ interface StyleObject {
32
25
  * whenever the mode is `'system'` (its own default), so nothing regresses
33
26
  * for apps that never touch the override API at all. This function itself
34
27
  * 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.
28
+ * store's value changed — call `useTheme()` (its `isDark`) somewhere in
29
+ * the tree for that, NOT React Native's own `useColorScheme()`, which only
30
+ * reflects the raw OS setting and would miss an explicit override entirely.
39
31
  *
40
32
  * Phase 11 originally shipped with live in-place theme switching unverified
41
33
  * (a `uiMode` toggle triggered a re-render but `Appearance.getColorScheme()`
@@ -59,90 +51,33 @@ interface StyleObject {
59
51
  * `Pressable` ever knows this, so it's passed in directly by the caller
60
52
  * (jsx-runtime, from Pressable's own style-function callback) rather than
61
53
  * queried here. Defaults to `false` for every other element type.
62
- */
63
- declare function resolveStyle(classString: string, pressed?: boolean): StyleObject;
64
-
65
- /**
66
- * Native port of @kbach/react's darkModeStore.ts — same architecture (a
67
- * single module-level store is the real source of truth;
68
- * ThemeProvider/useTheme are a thin, OPTIONAL wrapper around it; every
69
- * function here works standalone with no provider mounted anywhere), with
70
- * two real platform differences from the web version:
71
54
  *
72
- * 1. No persistence. There's no React-Native-builtin equivalent of
73
- * localStorage — adding one would mean forcing a real native dependency
74
- * (e.g. @react-native-async-storage/async-storage) on every consumer,
75
- * even ones that don't want it. The mode always starts at 'system' on a
76
- * fresh app launch. If you want persistence, read your own storage at
77
- * startup (before your first render) and call setGlobalThemeMode() with
78
- * the result — same "seed once, no built-in write-back" shape as
79
- * seedDefaultMode() below, just driven by your own storage instead of
80
- * one this package picks for you.
81
- * 2. No DOM to "apply" the resolved mode to. On web, applyToDom() flips a
82
- * class/attribute the generated CSS's `dark:` selectors match against.
83
- * On native there's no CSS at all — nativeBridge.ts's resolveStyle()
84
- * reads getGlobalDarkMode() directly on every call instead of querying
85
- * Appearance.getColorScheme() itself, which is what actually makes an
86
- * explicit override affect rendering (previously that function always
87
- * read the raw OS setting, so it had no way to reflect a user choice —
88
- * see nativeBridge.ts's own comment on this for why that's the one
89
- * genuinely fixed bug this change introduces, not just a new feature).
90
- */
91
- type ThemeMode = 'light' | 'dark' | 'system';
92
- declare function getGlobalDarkMode(): boolean;
93
- declare function getGlobalThemeMode(): ThemeMode;
94
- /** Explicit user choice — takes priority over any later `<ThemeProvider defaultMode>` seed (see `seedDefaultMode` below). Not persisted; see this module's own doc comment. */
95
- declare function setGlobalThemeMode(nextMode: ThemeMode): void;
96
- declare function toggleGlobalDarkMode(): void;
97
- declare function subscribeGlobalDarkMode(listener: () => void): () => void;
98
-
99
- /**
100
- * Reactive read of the global dark-mode store — works with or without a
101
- * `<ThemeProvider>` mounted anywhere in the tree, since it subscribes to
102
- * `darkModeStore.ts` directly. No server-snapshot argument (unlike
103
- * @kbach/react's web version) — React Native has no SSR concept at all,
104
- * so there's no third argument for `useSyncExternalStore` to need.
105
- */
106
- declare function useGlobalDarkMode(): boolean;
107
-
108
- interface ThemeProviderProps {
109
- children: ReactNode;
110
- /**
111
- * Applied once, on this provider's first mount, but ONLY if nothing has
112
- * made an explicit mode choice yet (see
113
- * `darkModeStore.ts::seedDefaultMode`) — an explicit prior choice always
114
- * wins over a component's own default. Unlike @kbach/react's web
115
- * version, there's no persisted value to check here — see
116
- * darkModeStore.ts's own doc comment on why this package doesn't persist
117
- * the mode across app launches.
118
- */
119
- defaultMode?: ThemeMode;
120
- }
121
- /**
122
- * Native port of @kbach/react's `ThemeProvider` — a thin, OPTIONAL React
123
- * Context wrapper around `darkModeStore.ts`'s single global store, not the
124
- * source of truth itself. Because the store is global, MULTIPLE mounted
125
- * providers share the exact same `mode`/`isDark` state rather than each
126
- * getting their own scoped value — mounting more than one is very likely a
127
- * mistake (each fighting over the same state via a different
128
- * `defaultMode`), so this warns once in dev, matching the web version's
129
- * identical guard.
130
- */
131
- declare function ThemeProvider({ children, defaultMode }: ThemeProviderProps): react.JSX.Element;
132
-
133
- interface ThemeContextValue {
134
- mode: ThemeMode;
135
- isDark: boolean;
136
- setMode: (mode: ThemeMode) => void;
137
- toggle: () => void;
138
- }
139
- /**
140
- * Requires a `<ThemeProvider>` ancestor — throws otherwise, since a
141
- * component that destructures `{ mode, setMode }` genuinely needs Context
142
- * (unlike a component that just wants the dark/light boolean, which should
143
- * reach for `useGlobalDarkMode()` instead and never needs a provider at
144
- * all).
55
+ * `width` gates `sm:`/`md:`/`lg:`/`xl:`/`2xl:` against the active theme's
56
+ * `screens` scale (resolve_style.rs's `native_modifier_state`) — read fresh
57
+ * from `Dimensions.get('window').width` on every call, the same "no
58
+ * caching, no store" choice `colorScheme`/`pressed` already make, and for
59
+ * the same reason: unlike dark mode there's no explicit-override concept to
60
+ * preserve here (nobody manually overrides their screen width), so a plain
61
+ * synchronous read is enough — no need for the subscribable store
62
+ * darkModeStore.ts is for. As with `colorScheme`, this function has no
63
+ * subscription of its own, so rotating/resizing the window doesn't
64
+ * re-render anything by itself — call RN's own `useWindowDimensions()`
65
+ * somewhere in the tree for that (same role `useColorScheme()` plays for
66
+ * `dark:` in apps/native-sandbox/App.tsx).
67
+ *
68
+ * Falls back to `./jsEngine` (a pure-JS, no-WASM/no-native reimplementation
69
+ * of this same resolution logic — see that directory's own doc comments)
70
+ * when `KbachModule` isn't registered at all — Expo Go, which can never
71
+ * load ANY custom native module (not even Expo's own Modules API), so the
72
+ * TurboModule this file otherwise depends on simply doesn't exist there.
73
+ * `TurboModuleRegistry.get` (not `.getEnforcing`, which throws) is what
74
+ * makes this detectable at all — `get` returns `null`/`undefined` instead.
75
+ * A real dev-client/CLI build always has the module registered, so this
76
+ * fallback only ever activates in Expo Go itself; everywhere else behaves
77
+ * exactly as before. The JS engine covers a strict subset of what the
78
+ * native/WASM engines resolve (see jsEngine/resolveUtilityNative.ts) — an
79
+ * intentional, documented parity gap, not a bug.
145
80
  */
146
- declare function useTheme(): ThemeContextValue;
81
+ declare function resolveStyle(classString: string, pressed?: boolean): StyleObject;
147
82
 
148
- export { type StyleObject, type ThemeConfig, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, defaultTheme, getGlobalDarkMode, getGlobalThemeMode, getTheme, resolveStyle, setGlobalThemeMode, setTheme, subscribeGlobalDarkMode, toggleGlobalDarkMode, useGlobalDarkMode, useTheme };
83
+ export { type StyleObject, resolveStyle };