@kbach/react-native 1.0.0-beta.15 → 1.0.0-beta.17

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 (35) hide show
  1. package/README.md +75 -0
  2. package/dist/{chunk-RBJXE32L.mjs → chunk-45GOGUHJ.mjs} +36 -2
  3. package/dist/{chunk-VD233W3L.mjs → chunk-MJWWZJMH.mjs} +1 -1
  4. package/dist/chunk-OGFB3OXS.mjs +552 -0
  5. package/dist/darkModeStore.d.ts +58 -0
  6. package/dist/dynamicTokens.d.ts +35 -0
  7. package/dist/dynamicTokens.js +75 -0
  8. package/dist/{index.d.mts → index.d.ts} +17 -1
  9. package/dist/index.js +223 -19
  10. package/dist/index.web.d.ts +18 -0
  11. package/dist/index.web.js +21 -1
  12. package/dist/index.web.mjs +184 -12
  13. package/dist/jsx-dev-runtime.js +222 -22
  14. package/dist/jsx-dev-runtime.web.js +2 -1
  15. package/dist/jsx-dev-runtime.web.mjs +18 -7
  16. package/dist/jsx-runtime.js +222 -22
  17. package/dist/jsx-runtime.web.js +1 -1
  18. package/dist/jsx-runtime.web.mjs +2 -3
  19. package/dist/theme.d.ts +54 -0
  20. package/dist/{useColors-C6jyCLuG.d.mts → useDynamicToken-Dr15c88t.d.ts} +16 -95
  21. package/package.json +1 -5
  22. package/dist/chunk-AXGAYOQ7.mjs +0 -192
  23. package/dist/chunk-EMZ47OSG.mjs +0 -100
  24. package/dist/chunk-HK6PDJJK.mjs +0 -367
  25. package/dist/chunk-JMNJCPGK.mjs +0 -1239
  26. package/dist/chunk-TDWBXJH5.mjs +0 -186
  27. package/dist/chunk-UNZ6PQVO.mjs +0 -14
  28. package/dist/index.mjs +0 -38
  29. package/dist/index.web.d.mts +0 -15
  30. package/dist/jsx-dev-runtime.mjs +0 -18
  31. package/dist/jsx-runtime.mjs +0 -15
  32. /package/dist/{jsx-dev-runtime.d.mts → jsx-dev-runtime.d.ts} +0 -0
  33. /package/dist/{jsx-dev-runtime.web.d.mts → jsx-dev-runtime.web.d.ts} +0 -0
  34. /package/dist/{jsx-runtime.d.mts → jsx-runtime.d.ts} +0 -0
  35. /package/dist/{jsx-runtime.web.d.mts → jsx-runtime.web.d.ts} +0 -0
@@ -1,100 +0,0 @@
1
- import {
2
- getGlobalDarkMode,
3
- subscribeGlobalDarkMode
4
- } from "./chunk-RBJXE32L.mjs";
5
- import {
6
- getTheme
7
- } from "./chunk-HK6PDJJK.mjs";
8
-
9
- // src/jsxRuntimeCore.ts
10
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
11
- import { Fragment, useSyncExternalStore } from "react";
12
- import { Pressable, useWindowDimensions } from "react-native";
13
- function makeElement(isStaticChildren, type, props, key) {
14
- return (isStaticChildren ? _jsxs : _jsx)(type, props, key);
15
- }
16
- function resolvedStyleFor(resolveStyle, classStrRaw, userStyle, pressed) {
17
- const resolved = resolveStyle(classStrRaw, pressed);
18
- if (userStyle === void 0) {
19
- return resolved;
20
- }
21
- if (typeof userStyle === "function") {
22
- return [resolved, userStyle({ pressed })];
23
- }
24
- return [resolved, userStyle];
25
- }
26
- var DARK_MODIFIER_RE = /(^|\s)dark:/;
27
- var BREAKPOINT_MODIFIER_RE = /(^|\s)(sm|md|lg|xl|2xl):/;
28
- var BREAKPOINT_MODIFIER_MATCH_RE = /(?:^|\s)(sm|md|lg|xl|2xl):/g;
29
- function darkModeKeySuffix(classStrRaw) {
30
- return DARK_MODIFIER_RE.test(classStrRaw) ? `:kb-dark-${getGlobalDarkMode()}` : "";
31
- }
32
- function breakpointKeySuffix(classStrRaw, width) {
33
- const matches = classStrRaw.match(BREAKPOINT_MODIFIER_MATCH_RE);
34
- if (!matches) {
35
- return "";
36
- }
37
- const screens = getTheme().screens;
38
- const present = Array.from(new Set(matches.map((m) => m.trim().slice(0, -1))));
39
- const state = present.map((name) => screens[name] !== void 0 && width >= screens[name] ? "1" : "0").join("");
40
- return `:kb-bp-${state}`;
41
- }
42
- function ReactiveElement({
43
- hostType,
44
- hostRest,
45
- classStrRaw,
46
- userStyle,
47
- resolveStyle,
48
- elementKey,
49
- isStaticChildren
50
- }) {
51
- useSyncExternalStore(subscribeGlobalDarkMode, getGlobalDarkMode);
52
- const { width } = useWindowDimensions();
53
- const finalStyle = hostType === Pressable ? (state) => resolvedStyleFor(resolveStyle, classStrRaw, userStyle, state.pressed) : resolvedStyleFor(resolveStyle, classStrRaw, userStyle, false);
54
- const suffix = darkModeKeySuffix(classStrRaw) + breakpointKeySuffix(classStrRaw, width);
55
- const finalKey = suffix ? `${elementKey ?? ""}${suffix}` : elementKey;
56
- return makeElement(isStaticChildren, hostType, { ...hostRest, style: finalStyle }, finalKey);
57
- }
58
- function processElement(resolveStyle, type, rawProps, key, isStaticChildren) {
59
- if (type === null || typeof type === "symbol" || !rawProps) {
60
- return makeElement(isStaticChildren, type, rawProps ?? {}, key);
61
- }
62
- const { className: classStrRaw, style: userStyle, ...rest } = rawProps;
63
- if (typeof classStrRaw !== "string") {
64
- return makeElement(isStaticChildren, type, rawProps, key);
65
- }
66
- if (DARK_MODIFIER_RE.test(classStrRaw) || BREAKPOINT_MODIFIER_RE.test(classStrRaw)) {
67
- return _jsx(
68
- ReactiveElement,
69
- { hostType: type, hostRest: rest, classStrRaw, userStyle, resolveStyle, elementKey: key, isStaticChildren },
70
- key
71
- );
72
- }
73
- const finalStyle = type === Pressable ? (state) => resolvedStyleFor(resolveStyle, classStrRaw, userStyle, state.pressed) : resolvedStyleFor(resolveStyle, classStrRaw, userStyle, false);
74
- return makeElement(isStaticChildren, type, { ...rest, style: finalStyle }, key);
75
- }
76
- function createJsxFunctions(resolveStyle) {
77
- function jsx(type, props, key) {
78
- return processElement(resolveStyle, type, props, key, false);
79
- }
80
- function jsxs(type, props, key) {
81
- return processElement(resolveStyle, type, props, key, true);
82
- }
83
- return { jsx, jsxs };
84
- }
85
- function createJsxDEV(jsx, jsxs) {
86
- return function jsxDEV(type, props, key, isStaticChildren, source, self) {
87
- const element = (isStaticChildren ? jsxs : jsx)(type, props, key);
88
- if (source && element && typeof element === "object" && Object.isExtensible(element)) {
89
- element._source = source;
90
- element._self = self;
91
- }
92
- return element;
93
- };
94
- }
95
-
96
- export {
97
- Fragment,
98
- createJsxFunctions,
99
- createJsxDEV
100
- };
@@ -1,367 +0,0 @@
1
- // src/generatedPalette.ts
2
- var PALETTE = {
3
- "amber-1": "#fffbeb",
4
- "amber-10": "#78350f",
5
- "amber-11": "#451a03",
6
- "amber-12": "#291002",
7
- "amber-2": "#fef3c7",
8
- "amber-3": "#fde68a",
9
- "amber-4": "#fcd34d",
10
- "amber-5": "#fbbf24",
11
- "amber-6": "#f59e0b",
12
- "amber-7": "#d97706",
13
- "amber-8": "#b45309",
14
- "amber-9": "#92400e",
15
- "black": "#000000",
16
- "blue-1": "#eff6ff",
17
- "blue-10": "#1e3a8a",
18
- "blue-11": "#172554",
19
- "blue-12": "#0d1633",
20
- "blue-2": "#dbeafe",
21
- "blue-3": "#bfdbfe",
22
- "blue-4": "#93c5fd",
23
- "blue-5": "#60a5fa",
24
- "blue-6": "#3b82f6",
25
- "blue-7": "#2563eb",
26
- "blue-8": "#1d4ed8",
27
- "blue-9": "#1e40af",
28
- "bronze": "#cd7f32",
29
- "coal": "#1c1c1c",
30
- "copper": "#b87333",
31
- "current": "currentColor",
32
- "cyan-1": "#ecfeff",
33
- "cyan-10": "#164e63",
34
- "cyan-11": "#083344",
35
- "cyan-12": "#041e28",
36
- "cyan-2": "#cffafe",
37
- "cyan-3": "#a5f3fc",
38
- "cyan-4": "#67e8f9",
39
- "cyan-5": "#22d3ee",
40
- "cyan-6": "#06b6d4",
41
- "cyan-7": "#0891b2",
42
- "cyan-8": "#0e7490",
43
- "cyan-9": "#155e75",
44
- "emerald-1": "#ecfdf5",
45
- "emerald-10": "#064e3b",
46
- "emerald-11": "#022c22",
47
- "emerald-12": "#011a14",
48
- "emerald-2": "#d1fae5",
49
- "emerald-3": "#a7f3d0",
50
- "emerald-4": "#6ee7b7",
51
- "emerald-5": "#34d399",
52
- "emerald-6": "#10b981",
53
- "emerald-7": "#059669",
54
- "emerald-8": "#047857",
55
- "emerald-9": "#065f46",
56
- "fuchsia-1": "#fdf4ff",
57
- "fuchsia-10": "#701a75",
58
- "fuchsia-11": "#4a044e",
59
- "fuchsia-12": "#2d022f",
60
- "fuchsia-2": "#fae8ff",
61
- "fuchsia-3": "#f5d0fe",
62
- "fuchsia-4": "#f0abfc",
63
- "fuchsia-5": "#e879f9",
64
- "fuchsia-6": "#d946ef",
65
- "fuchsia-7": "#c026d3",
66
- "fuchsia-8": "#a21caf",
67
- "fuchsia-9": "#86198f",
68
- "gold": "#d4af37",
69
- "gray-1": "#f9fafb",
70
- "gray-10": "#111827",
71
- "gray-11": "#030712",
72
- "gray-12": "#020409",
73
- "gray-2": "#f3f4f6",
74
- "gray-3": "#e5e7eb",
75
- "gray-4": "#d1d5db",
76
- "gray-5": "#9ca3af",
77
- "gray-6": "#6b7280",
78
- "gray-7": "#4b5563",
79
- "gray-8": "#374151",
80
- "gray-9": "#1f2937",
81
- "green-1": "#f0fdf4",
82
- "green-10": "#14532d",
83
- "green-11": "#052e16",
84
- "green-12": "#031b0d",
85
- "green-2": "#dcfce7",
86
- "green-3": "#bbf7d0",
87
- "green-4": "#86efac",
88
- "green-5": "#4ade80",
89
- "green-6": "#22c55e",
90
- "green-7": "#16a34a",
91
- "green-8": "#15803d",
92
- "green-9": "#166534",
93
- "indigo-1": "#eef2ff",
94
- "indigo-10": "#312e81",
95
- "indigo-11": "#1e1b4b",
96
- "indigo-12": "#12102d",
97
- "indigo-2": "#e0e7ff",
98
- "indigo-3": "#c7d2fe",
99
- "indigo-4": "#a5b4fc",
100
- "indigo-5": "#818cf8",
101
- "indigo-6": "#6366f1",
102
- "indigo-7": "#4f46e5",
103
- "indigo-8": "#4338ca",
104
- "indigo-9": "#3730a3",
105
- "lime-1": "#f7fee7",
106
- "lime-10": "#365314",
107
- "lime-11": "#1a2e05",
108
- "lime-12": "#0f1b03",
109
- "lime-2": "#ecfccb",
110
- "lime-3": "#d9f99d",
111
- "lime-4": "#bef264",
112
- "lime-5": "#a3e635",
113
- "lime-6": "#84cc16",
114
- "lime-7": "#65a30d",
115
- "lime-8": "#4d7c0f",
116
- "lime-9": "#3f6212",
117
- "neutral-1": "#fafafa",
118
- "neutral-10": "#171717",
119
- "neutral-11": "#0a0a0a",
120
- "neutral-12": "#050505",
121
- "neutral-2": "#f5f5f5",
122
- "neutral-3": "#e5e5e5",
123
- "neutral-4": "#d4d4d4",
124
- "neutral-5": "#a3a3a3",
125
- "neutral-6": "#737373",
126
- "neutral-7": "#525252",
127
- "neutral-8": "#404040",
128
- "neutral-9": "#262626",
129
- "orange-1": "#fff7ed",
130
- "orange-10": "#7c2d12",
131
- "orange-11": "#431407",
132
- "orange-12": "#270c04",
133
- "orange-2": "#ffedd5",
134
- "orange-3": "#fed7aa",
135
- "orange-4": "#fdba74",
136
- "orange-5": "#fb923c",
137
- "orange-6": "#f97316",
138
- "orange-7": "#ea580c",
139
- "orange-8": "#c2410c",
140
- "orange-9": "#9a3412",
141
- "pink-1": "#fdf2f8",
142
- "pink-10": "#831843",
143
- "pink-11": "#500724",
144
- "pink-12": "#300415",
145
- "pink-2": "#fce7f3",
146
- "pink-3": "#fbcfe8",
147
- "pink-4": "#f9a8d4",
148
- "pink-5": "#f472b6",
149
- "pink-6": "#ec4899",
150
- "pink-7": "#db2777",
151
- "pink-8": "#be185d",
152
- "pink-9": "#9d174d",
153
- "purple-1": "#faf5ff",
154
- "purple-10": "#581c87",
155
- "purple-11": "#3b0764",
156
- "purple-12": "#23043c",
157
- "purple-2": "#f3e8ff",
158
- "purple-3": "#e9d5ff",
159
- "purple-4": "#d8b4fe",
160
- "purple-5": "#c084fc",
161
- "purple-6": "#a855f7",
162
- "purple-7": "#9333ea",
163
- "purple-8": "#7e22ce",
164
- "purple-9": "#6b21a8",
165
- "red-1": "#fef2f2",
166
- "red-10": "#7f1d1d",
167
- "red-11": "#450a0a",
168
- "red-12": "#280606",
169
- "red-2": "#fee2e2",
170
- "red-3": "#fecaca",
171
- "red-4": "#fca5a5",
172
- "red-5": "#f87171",
173
- "red-6": "#ef4444",
174
- "red-7": "#dc2626",
175
- "red-8": "#b91c1c",
176
- "red-9": "#991b1b",
177
- "rose-1": "#fff1f2",
178
- "rose-10": "#881337",
179
- "rose-11": "#4c0519",
180
- "rose-12": "#2d030e",
181
- "rose-2": "#ffe4e6",
182
- "rose-3": "#fecdd3",
183
- "rose-4": "#fda4af",
184
- "rose-5": "#fb7185",
185
- "rose-6": "#f43f5e",
186
- "rose-7": "#e11d48",
187
- "rose-8": "#be123c",
188
- "rose-9": "#9f1239",
189
- "silver": "#c0c0c0",
190
- "sky-1": "#f0f9ff",
191
- "sky-10": "#0c4a6e",
192
- "sky-11": "#082f49",
193
- "sky-12": "#041b2b",
194
- "sky-2": "#e0f2fe",
195
- "sky-3": "#bae6fd",
196
- "sky-4": "#7dd3fc",
197
- "sky-5": "#38bdf8",
198
- "sky-6": "#0ea5e9",
199
- "sky-7": "#0284c7",
200
- "sky-8": "#0369a1",
201
- "sky-9": "#075985",
202
- "slate-1": "#f8fafc",
203
- "slate-10": "#0f172a",
204
- "slate-11": "#020617",
205
- "slate-12": "#01020a",
206
- "slate-2": "#f1f5f9",
207
- "slate-3": "#e2e8f0",
208
- "slate-4": "#cbd5e1",
209
- "slate-5": "#94a3b8",
210
- "slate-6": "#64748b",
211
- "slate-7": "#475569",
212
- "slate-8": "#334155",
213
- "slate-9": "#1e293b",
214
- "stone-1": "#fafaf9",
215
- "stone-10": "#1c1917",
216
- "stone-11": "#0c0a09",
217
- "stone-12": "#070605",
218
- "stone-2": "#f5f5f4",
219
- "stone-3": "#e7e5e4",
220
- "stone-4": "#d6d3d1",
221
- "stone-5": "#a8a29e",
222
- "stone-6": "#78716c",
223
- "stone-7": "#57534e",
224
- "stone-8": "#44403c",
225
- "stone-9": "#292524",
226
- "teal-1": "#f0fdfa",
227
- "teal-10": "#134e4a",
228
- "teal-11": "#042f2e",
229
- "teal-12": "#021c1b",
230
- "teal-2": "#ccfbf1",
231
- "teal-3": "#99f6e4",
232
- "teal-4": "#5eead4",
233
- "teal-5": "#2dd4bf",
234
- "teal-6": "#14b8a6",
235
- "teal-7": "#0d9488",
236
- "teal-8": "#0f766e",
237
- "teal-9": "#115e59",
238
- "transparent": "transparent",
239
- "violet-1": "#f5f3ff",
240
- "violet-10": "#4c1d95",
241
- "violet-11": "#2e1065",
242
- "violet-12": "#1c0a3d",
243
- "violet-2": "#ede9fe",
244
- "violet-3": "#ddd6fe",
245
- "violet-4": "#c4b5fd",
246
- "violet-5": "#a78bfa",
247
- "violet-6": "#8b5cf6",
248
- "violet-7": "#7c3aed",
249
- "violet-8": "#6d28d9",
250
- "violet-9": "#5b21b6",
251
- "white": "#ffffff",
252
- "yellow-1": "#fefce8",
253
- "yellow-10": "#713f12",
254
- "yellow-11": "#422006",
255
- "yellow-12": "#271304",
256
- "yellow-2": "#fef9c3",
257
- "yellow-3": "#fef08a",
258
- "yellow-4": "#fde047",
259
- "yellow-5": "#facc15",
260
- "yellow-6": "#eab308",
261
- "yellow-7": "#ca8a04",
262
- "yellow-8": "#a16207",
263
- "yellow-9": "#854d0e",
264
- "zinc-1": "#fafafa",
265
- "zinc-10": "#18181b",
266
- "zinc-11": "#09090b",
267
- "zinc-12": "#050506",
268
- "zinc-2": "#f4f4f5",
269
- "zinc-3": "#e4e4e7",
270
- "zinc-4": "#d4d4d8",
271
- "zinc-5": "#a1a1aa",
272
- "zinc-6": "#71717a",
273
- "zinc-7": "#52525b",
274
- "zinc-8": "#3f3f46",
275
- "zinc-9": "#27272a"
276
- };
277
-
278
- // src/theme.ts
279
- var defaultTheme = {
280
- colors: PALETTE,
281
- // Real Tailwind's default spacing scale in full — every step is exactly
282
- // `n * 4px`, including the fractional `.5` steps (`1.5` -> 6px, `2.5` ->
283
- // 10px, `3.5` -> 14px) and the "px" literal (a bare 1px). Only the
284
- // "usual stops", though — `jsEngine/shared.ts`'s `spacingPx` (and the
285
- // native Rust dispatcher's own `spacing_px`) falls back to Tailwind v4's
286
- // live `n * 4px` formula for any bare numeric step not listed here
287
- // (`p-0.25`, `w-13`, ...), so this table names the common values and
288
- // gives a theme override something to target, not the full resolvable
289
- // set. Mirrors @kbach/react's theme.ts exactly.
290
- spacing: {
291
- "0": 0,
292
- "px": 1,
293
- "0.5": 2,
294
- "1": 4,
295
- "1.5": 6,
296
- "2": 8,
297
- "2.5": 10,
298
- "3": 12,
299
- "3.5": 14,
300
- "4": 16,
301
- "5": 20,
302
- "6": 24,
303
- "7": 28,
304
- "8": 32,
305
- "9": 36,
306
- "10": 40,
307
- "11": 44,
308
- "12": 48,
309
- "14": 56,
310
- "16": 64,
311
- "20": 80,
312
- "24": 96,
313
- "28": 112,
314
- "32": 128,
315
- "36": 144,
316
- "40": 160,
317
- "44": 176,
318
- "48": 192,
319
- "52": 208,
320
- "56": 224,
321
- "60": 240,
322
- "64": 256,
323
- "72": 288,
324
- "80": 320,
325
- "96": 384
326
- },
327
- screens: {
328
- sm: 640,
329
- md: 768,
330
- lg: 1024,
331
- xl: 1280,
332
- "2xl": 1536
333
- },
334
- // Byte-for-byte the same three stacks
335
- // packages/core-engine/src/resolvers/typography.rs's `font_family_value`
336
- // falls back to. On native these three still effectively no-op (see
337
- // `first_font_name`'s own doc comment for why a generic CSS keyword
338
- // isn't a real loadable font) — only a caller-configured custom name
339
- // changes native rendering; Expo Web uses the full stack as-is.
340
- fontFamily: {
341
- sans: 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
342
- serif: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
343
- mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
344
- },
345
- darkMode: "attribute",
346
- // Empty by default, matching real Tailwind's own defaults.
347
- container: {}
348
- };
349
- var activeTheme = defaultTheme;
350
- var activeThemeJson = JSON.stringify(defaultTheme);
351
- function setTheme(theme) {
352
- activeTheme = theme;
353
- activeThemeJson = JSON.stringify(theme);
354
- }
355
- function getTheme() {
356
- return activeTheme;
357
- }
358
- function getThemeJson() {
359
- return activeThemeJson;
360
- }
361
-
362
- export {
363
- defaultTheme,
364
- setTheme,
365
- getTheme,
366
- getThemeJson
367
- };