@kbach/react 0.5.47 → 0.5.48
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/dist/{chunk-NIBECTRQ.mjs → chunk-BKSXIWL7.mjs} +8 -7
- package/dist/chunk-YZNSWFJT.mjs +544 -0
- package/dist/index.d.mts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +121 -24
- package/dist/index.mjs +30 -16
- package/dist/jsx-dev-runtime.js +116 -29
- package/dist/jsx-dev-runtime.mjs +2 -3
- package/dist/jsx-runtime.d.mts +12 -1
- package/dist/jsx-runtime.d.ts +12 -1
- package/dist/jsx-runtime.js +125 -31
- package/dist/jsx-runtime.mjs +6 -5
- package/dist/vite-plugin.js +29 -18
- package/dist/vite-plugin.mjs +22 -12
- package/package.json +1 -1
- package/dist/chunk-LCK5OGHT.mjs +0 -226
- package/dist/chunk-U3GY5Y6J.mjs +0 -232
|
@@ -716,7 +716,12 @@ function resolveColor(value, colors, isArbitrary) {
|
|
|
716
716
|
}
|
|
717
717
|
}
|
|
718
718
|
if (!hex) return null;
|
|
719
|
-
if (!opacityPart)
|
|
719
|
+
if (!opacityPart) {
|
|
720
|
+
if (!isWeb && hex.startsWith("#") && hex.length === 9) {
|
|
721
|
+
return hexToRgba(hex, Math.round(parseInt(hex.slice(7, 9), 16) / 255 * 1e3) / 1e3);
|
|
722
|
+
}
|
|
723
|
+
return hex;
|
|
724
|
+
}
|
|
720
725
|
let alpha;
|
|
721
726
|
if (opacityPart.startsWith("[") && opacityPart.endsWith("]")) {
|
|
722
727
|
const v = parseFloat(opacityPart.slice(1, -1));
|
|
@@ -2279,12 +2284,6 @@ var RESOLVERS = {
|
|
|
2279
2284
|
function resolveUtility(parsed, theme) {
|
|
2280
2285
|
if (!parsed.value) {
|
|
2281
2286
|
if (parsed.utility in PLUGIN_STANDALONE) return PLUGIN_STANDALONE[parsed.utility] ?? null;
|
|
2282
|
-
if (parsed.utility === "grd" || parsed.utility === "grid") {
|
|
2283
|
-
return getEffectiveIsWeb() ? { display: "grid" } : null;
|
|
2284
|
-
}
|
|
2285
|
-
if (parsed.utility === "inline-grid") {
|
|
2286
|
-
return getEffectiveIsWeb() ? { display: "inline-grid" } : null;
|
|
2287
|
-
}
|
|
2288
2287
|
if (parsed.utility in getStandalone()) return getStandalone()[parsed.utility] ?? null;
|
|
2289
2288
|
}
|
|
2290
2289
|
const resolver = PLUGIN_RESOLVERS[parsed.utility] ?? RESOLVERS[parsed.utility];
|
|
@@ -2941,6 +2940,8 @@ function buildConfig(userConfig) {
|
|
|
2941
2940
|
};
|
|
2942
2941
|
clearPluginUtilities();
|
|
2943
2942
|
clearPluginModifiers();
|
|
2943
|
+
const _store = getConfigStore();
|
|
2944
|
+
for (const k of Object.keys(_store.customVariants)) delete _store.customVariants[k];
|
|
2944
2945
|
const pluginAPI = makePluginAPI(resolved.theme);
|
|
2945
2946
|
for (const plugin of resolved.plugins) {
|
|
2946
2947
|
plugin(pluginAPI);
|
|
@@ -0,0 +1,544 @@
|
|
|
1
|
+
import {
|
|
2
|
+
flatten,
|
|
3
|
+
getActiveBreakpoints,
|
|
4
|
+
getConfig,
|
|
5
|
+
getDefaultFontFamily,
|
|
6
|
+
getGlobalWidth,
|
|
7
|
+
getInteractiveModifiers,
|
|
8
|
+
getModeModifiers,
|
|
9
|
+
getResponsiveModifiers,
|
|
10
|
+
isNative,
|
|
11
|
+
isRuntimeCSSDisabled,
|
|
12
|
+
isWeb,
|
|
13
|
+
normalizeClassString,
|
|
14
|
+
resolve,
|
|
15
|
+
subscribeGlobalWidth
|
|
16
|
+
} from "./chunk-BKSXIWL7.mjs";
|
|
17
|
+
|
|
18
|
+
// src/jsx-runtime.tsx
|
|
19
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
20
|
+
import { Fragment } from "react";
|
|
21
|
+
|
|
22
|
+
// src/core/darkModeStore.ts
|
|
23
|
+
var KEY = "__kbach_dark_store__";
|
|
24
|
+
function getStore() {
|
|
25
|
+
const g = globalThis;
|
|
26
|
+
if (!g[KEY]) {
|
|
27
|
+
g[KEY] = { isDark: false, lastNotified: false, subscribers: /* @__PURE__ */ new Set() };
|
|
28
|
+
}
|
|
29
|
+
return g[KEY];
|
|
30
|
+
}
|
|
31
|
+
function syncGlobalDarkMode(isDark) {
|
|
32
|
+
getStore().isDark = isDark;
|
|
33
|
+
}
|
|
34
|
+
function setGlobalDarkMode(isDark) {
|
|
35
|
+
const store = getStore();
|
|
36
|
+
store.isDark = isDark;
|
|
37
|
+
if (store.lastNotified === isDark) return;
|
|
38
|
+
store.lastNotified = isDark;
|
|
39
|
+
for (const sub of store.subscribers) sub();
|
|
40
|
+
}
|
|
41
|
+
function getGlobalDarkMode() {
|
|
42
|
+
return getStore().isDark;
|
|
43
|
+
}
|
|
44
|
+
function subscribeGlobalDarkMode(callback) {
|
|
45
|
+
const store = getStore();
|
|
46
|
+
store.subscribers.add(callback);
|
|
47
|
+
return () => store.subscribers.delete(callback);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
// src/InteractiveWrapper.tsx
|
|
51
|
+
import React3, { forwardRef, useState, useCallback, useMemo } from "react";
|
|
52
|
+
|
|
53
|
+
// src/useGlobalDarkMode.ts
|
|
54
|
+
import React from "react";
|
|
55
|
+
var useSyncExternalStore = React.useSyncExternalStore ?? function useSyncExternalStoreFallback(subscribe, getSnapshot, _getServerSnapshot) {
|
|
56
|
+
const [, forceUpdate] = React.useReducer((n) => n + 1, 0);
|
|
57
|
+
React.useEffect(() => subscribe(forceUpdate), [subscribe]);
|
|
58
|
+
return getSnapshot();
|
|
59
|
+
};
|
|
60
|
+
function useGlobalDarkMode() {
|
|
61
|
+
return useSyncExternalStore(
|
|
62
|
+
subscribeGlobalDarkMode,
|
|
63
|
+
getGlobalDarkMode,
|
|
64
|
+
() => false
|
|
65
|
+
// SSR: default light
|
|
66
|
+
);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
// src/useGlobalWidth.ts
|
|
70
|
+
import React2 from "react";
|
|
71
|
+
var useSyncExternalStore2 = React2.useSyncExternalStore ?? function useSyncExternalStoreFallback2(subscribe, getSnapshot, _getServerSnapshot) {
|
|
72
|
+
const [, forceUpdate] = React2.useReducer((n) => n + 1, 0);
|
|
73
|
+
React2.useEffect(() => subscribe(forceUpdate), [subscribe]);
|
|
74
|
+
return getSnapshot();
|
|
75
|
+
};
|
|
76
|
+
var NOOP_SUB = (_) => () => {
|
|
77
|
+
};
|
|
78
|
+
var ZERO_SNAP = () => 0;
|
|
79
|
+
var EMPTY_BREAKPOINTS = /* @__PURE__ */ new Set();
|
|
80
|
+
var _webListeners = null;
|
|
81
|
+
var _webRaf = 0;
|
|
82
|
+
function _webResizeHandler() {
|
|
83
|
+
cancelAnimationFrame(_webRaf);
|
|
84
|
+
_webRaf = requestAnimationFrame(() => {
|
|
85
|
+
if (_webListeners) for (const cb of _webListeners) cb();
|
|
86
|
+
});
|
|
87
|
+
}
|
|
88
|
+
function subscribeWebWidth(cb) {
|
|
89
|
+
if (typeof window === "undefined") return () => {
|
|
90
|
+
};
|
|
91
|
+
if (!_webListeners) {
|
|
92
|
+
_webListeners = /* @__PURE__ */ new Set();
|
|
93
|
+
window.addEventListener("resize", _webResizeHandler);
|
|
94
|
+
}
|
|
95
|
+
_webListeners.add(cb);
|
|
96
|
+
return () => {
|
|
97
|
+
_webListeners.delete(cb);
|
|
98
|
+
if (_webListeners.size === 0) {
|
|
99
|
+
window.removeEventListener("resize", _webResizeHandler);
|
|
100
|
+
cancelAnimationFrame(_webRaf);
|
|
101
|
+
_webListeners = null;
|
|
102
|
+
}
|
|
103
|
+
};
|
|
104
|
+
}
|
|
105
|
+
function getWebWidth() {
|
|
106
|
+
return typeof window !== "undefined" ? window.innerWidth : 0;
|
|
107
|
+
}
|
|
108
|
+
function useGlobalWidth() {
|
|
109
|
+
return useSyncExternalStore2(
|
|
110
|
+
isWeb ? subscribeWebWidth : subscribeGlobalWidth,
|
|
111
|
+
isWeb ? getWebWidth : getGlobalWidth,
|
|
112
|
+
ZERO_SNAP
|
|
113
|
+
);
|
|
114
|
+
}
|
|
115
|
+
function useConditionalWidth(active) {
|
|
116
|
+
return useSyncExternalStore2(
|
|
117
|
+
active ? isWeb ? subscribeWebWidth : subscribeGlobalWidth : NOOP_SUB,
|
|
118
|
+
active ? isWeb ? getWebWidth : getGlobalWidth : ZERO_SNAP,
|
|
119
|
+
ZERO_SNAP
|
|
120
|
+
);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
// src/shared-utils.ts
|
|
124
|
+
function hasResponsiveBuckets(resolved) {
|
|
125
|
+
const responsiveMods = getResponsiveModifiers();
|
|
126
|
+
for (const key of Object.keys(resolved)) {
|
|
127
|
+
if (key === "base") continue;
|
|
128
|
+
for (const mod of key.split(":")) {
|
|
129
|
+
if (responsiveMods.has(mod)) return true;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
return false;
|
|
133
|
+
}
|
|
134
|
+
function hasInteractiveBuckets(resolved) {
|
|
135
|
+
const interactiveMods = getInteractiveModifiers();
|
|
136
|
+
for (const key of Object.keys(resolved)) {
|
|
137
|
+
if (key === "base") continue;
|
|
138
|
+
for (const mod of key.split(":")) {
|
|
139
|
+
if (interactiveMods.has(mod)) return true;
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
return false;
|
|
143
|
+
}
|
|
144
|
+
var EMPTY_BREAKPOINTS2 = /* @__PURE__ */ new Set();
|
|
145
|
+
|
|
146
|
+
// src/InteractiveWrapper.tsx
|
|
147
|
+
function chain(original, extra) {
|
|
148
|
+
return (...args) => {
|
|
149
|
+
original?.(...args);
|
|
150
|
+
extra();
|
|
151
|
+
};
|
|
152
|
+
}
|
|
153
|
+
var InteractiveWrapper = forwardRef(
|
|
154
|
+
function InteractiveWrapper2({
|
|
155
|
+
Component,
|
|
156
|
+
resolvedStyle,
|
|
157
|
+
className,
|
|
158
|
+
style: styleProp,
|
|
159
|
+
onPressIn,
|
|
160
|
+
onPressOut,
|
|
161
|
+
onPointerDown,
|
|
162
|
+
onPointerUp,
|
|
163
|
+
onPointerLeave,
|
|
164
|
+
onMouseEnter,
|
|
165
|
+
onMouseLeave,
|
|
166
|
+
onFocus,
|
|
167
|
+
onBlur,
|
|
168
|
+
...rest
|
|
169
|
+
}, ref) {
|
|
170
|
+
const isDark = useGlobalDarkMode();
|
|
171
|
+
const needsWidth = hasResponsiveBuckets(resolvedStyle);
|
|
172
|
+
const width = useConditionalWidth(needsWidth);
|
|
173
|
+
const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
|
|
174
|
+
const [pressed, setPressed] = useState(false);
|
|
175
|
+
const [hovered, setHovered] = useState(false);
|
|
176
|
+
const [focused, setFocused] = useState(false);
|
|
177
|
+
const handlePressIn = useCallback(chain(onPressIn, () => setPressed(true)), [onPressIn]);
|
|
178
|
+
const handlePressOut = useCallback(chain(onPressOut, () => setPressed(false)), [onPressOut]);
|
|
179
|
+
const handlePointerDown = useCallback(chain(onPointerDown, () => setPressed(true)), [onPointerDown]);
|
|
180
|
+
const handlePointerUp = useCallback(chain(onPointerUp, () => setPressed(false)), [onPointerUp]);
|
|
181
|
+
const handlePointerLeave = useCallback(chain(onPointerLeave, () => setPressed(false)), [onPointerLeave]);
|
|
182
|
+
const handleMouseEnter = useCallback(chain(onMouseEnter, () => setHovered(true)), [onMouseEnter]);
|
|
183
|
+
const handleMouseLeave = useCallback(chain(onMouseLeave, () => setHovered(false)), [onMouseLeave]);
|
|
184
|
+
const handleFocus = useCallback(chain(onFocus, () => setFocused(true)), [onFocus]);
|
|
185
|
+
const handleBlur = useCallback(chain(onBlur, () => setFocused(false)), [onBlur]);
|
|
186
|
+
const computedStyle = useMemo(
|
|
187
|
+
() => {
|
|
188
|
+
const s = flatten(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused, disabled: !!rest.disabled, checked: !!rest.checked }, breakpoints);
|
|
189
|
+
delete s.__divideX;
|
|
190
|
+
delete s.__divideY;
|
|
191
|
+
delete s.__divideColor;
|
|
192
|
+
delete s.__divideStyle;
|
|
193
|
+
delete s.__keyframe;
|
|
194
|
+
if (typeof Component !== "string") {
|
|
195
|
+
if (s.display === "grid" || s.display === "inline-grid") delete s.display;
|
|
196
|
+
delete s.gridTemplateColumns;
|
|
197
|
+
delete s.gridTemplateRows;
|
|
198
|
+
delete s.gridColumn;
|
|
199
|
+
delete s.gridRow;
|
|
200
|
+
delete s.gridArea;
|
|
201
|
+
delete s.gridColumnStart;
|
|
202
|
+
delete s.gridColumnEnd;
|
|
203
|
+
delete s.gridRowStart;
|
|
204
|
+
delete s.gridRowEnd;
|
|
205
|
+
delete s.gridAutoFlow;
|
|
206
|
+
delete s.gridAutoColumns;
|
|
207
|
+
delete s.gridAutoRows;
|
|
208
|
+
delete s.placeItems;
|
|
209
|
+
delete s.placeContent;
|
|
210
|
+
delete s.justifyItems;
|
|
211
|
+
delete s.placeSelf;
|
|
212
|
+
delete s.justifySelf;
|
|
213
|
+
if (s.position === "sticky" || s.position === "fixed" || s.position === "static") {
|
|
214
|
+
delete s.position;
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
return s;
|
|
218
|
+
},
|
|
219
|
+
[resolvedStyle, isDark, pressed, hovered, focused, width]
|
|
220
|
+
// eslint-disable-line react-hooks/exhaustive-deps
|
|
221
|
+
);
|
|
222
|
+
const skipComputedInline = isWeb || !isNative && typeof Component === "string";
|
|
223
|
+
const finalStyle = skipComputedInline ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
|
|
224
|
+
const { children, ...restWithoutChildren } = rest;
|
|
225
|
+
const componentProps = {
|
|
226
|
+
ref,
|
|
227
|
+
...restWithoutChildren,
|
|
228
|
+
style: finalStyle,
|
|
229
|
+
...!isNative && className ? { className } : {},
|
|
230
|
+
// onPressIn / onPressOut are React Native-only.
|
|
231
|
+
// On web, onPointerDown/Up drive the pressed state instead (covers mouse + touch).
|
|
232
|
+
...!isNative ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
|
|
233
|
+
onMouseEnter: handleMouseEnter,
|
|
234
|
+
onMouseLeave: handleMouseLeave,
|
|
235
|
+
onFocus: handleFocus,
|
|
236
|
+
onBlur: handleBlur
|
|
237
|
+
};
|
|
238
|
+
return Array.isArray(children) ? React3.createElement(Component, componentProps, ...children) : React3.createElement(Component, componentProps, children);
|
|
239
|
+
}
|
|
240
|
+
);
|
|
241
|
+
InteractiveWrapper.displayName = "Kbach.InteractiveWrapper";
|
|
242
|
+
|
|
243
|
+
// src/DarkWrapper.tsx
|
|
244
|
+
import React4, { useMemo as useMemo2 } from "react";
|
|
245
|
+
var DarkWrapper = React4.forwardRef(
|
|
246
|
+
function DarkWrapper2({ Component, resolvedStyle, style: styleProp, children, ...rest }, ref) {
|
|
247
|
+
const isDark = useGlobalDarkMode();
|
|
248
|
+
const needsWidth = hasResponsiveBuckets(resolvedStyle);
|
|
249
|
+
const width = useConditionalWidth(needsWidth);
|
|
250
|
+
const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS2;
|
|
251
|
+
const isNonStringComponent = typeof Component !== "string";
|
|
252
|
+
const computedStyle = useMemo2(() => {
|
|
253
|
+
const s = flatten(resolvedStyle, isDark, {}, breakpoints);
|
|
254
|
+
stripInternalMarkers(s);
|
|
255
|
+
if (isNonStringComponent) stripWebOnlyProps(s);
|
|
256
|
+
return s;
|
|
257
|
+
}, [resolvedStyle, isDark, width, isNonStringComponent]);
|
|
258
|
+
const skipComputedInline = isWeb || !isNative && typeof Component === "string";
|
|
259
|
+
const finalStyle = skipComputedInline ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
|
|
260
|
+
const props = { ref, ...rest, style: finalStyle };
|
|
261
|
+
return Array.isArray(children) ? React4.createElement(Component, props, ...children) : React4.createElement(Component, props, children);
|
|
262
|
+
}
|
|
263
|
+
);
|
|
264
|
+
DarkWrapper.displayName = "Kbach.DarkWrapper";
|
|
265
|
+
function stripInternalMarkers(s) {
|
|
266
|
+
delete s.__divideX;
|
|
267
|
+
delete s.__divideY;
|
|
268
|
+
delete s.__divideColor;
|
|
269
|
+
delete s.__divideStyle;
|
|
270
|
+
delete s.__keyframe;
|
|
271
|
+
}
|
|
272
|
+
function stripWebOnlyProps(s) {
|
|
273
|
+
if (s.display === "grid" || s.display === "inline-grid") delete s.display;
|
|
274
|
+
delete s.gridTemplateColumns;
|
|
275
|
+
delete s.gridTemplateRows;
|
|
276
|
+
delete s.gridColumn;
|
|
277
|
+
delete s.gridRow;
|
|
278
|
+
delete s.gridArea;
|
|
279
|
+
delete s.gridColumnStart;
|
|
280
|
+
delete s.gridColumnEnd;
|
|
281
|
+
delete s.gridRowStart;
|
|
282
|
+
delete s.gridRowEnd;
|
|
283
|
+
delete s.gridAutoFlow;
|
|
284
|
+
delete s.gridAutoColumns;
|
|
285
|
+
delete s.gridAutoRows;
|
|
286
|
+
delete s.placeItems;
|
|
287
|
+
delete s.placeContent;
|
|
288
|
+
delete s.justifyItems;
|
|
289
|
+
delete s.placeSelf;
|
|
290
|
+
delete s.justifySelf;
|
|
291
|
+
if (s.position === "sticky" || s.position === "fixed" || s.position === "static") {
|
|
292
|
+
delete s.position;
|
|
293
|
+
}
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
// src/jsx-runtime.tsx
|
|
297
|
+
var _cachedDefaultFont = void 0;
|
|
298
|
+
var _defaultFontVersion = 0;
|
|
299
|
+
var _lastFontVersion = -1;
|
|
300
|
+
function _invalidateDefaultFontCache() {
|
|
301
|
+
_defaultFontVersion++;
|
|
302
|
+
}
|
|
303
|
+
function getCachedDefaultFont() {
|
|
304
|
+
if (_lastFontVersion !== _defaultFontVersion) {
|
|
305
|
+
_cachedDefaultFont = getDefaultFontFamily();
|
|
306
|
+
_lastFontVersion = _defaultFontVersion;
|
|
307
|
+
}
|
|
308
|
+
return _cachedDefaultFont;
|
|
309
|
+
}
|
|
310
|
+
var _bucketModsCache = /* @__PURE__ */ new WeakMap();
|
|
311
|
+
function bucketMods(resolved) {
|
|
312
|
+
const cached = _bucketModsCache.get(resolved);
|
|
313
|
+
if (cached) return cached;
|
|
314
|
+
const interactiveMods = getInteractiveModifiers();
|
|
315
|
+
const modeMods = getModeModifiers();
|
|
316
|
+
const responsiveMods = getResponsiveModifiers();
|
|
317
|
+
let interactive = false;
|
|
318
|
+
let modeOrResponsive = false;
|
|
319
|
+
for (const key of Object.keys(resolved)) {
|
|
320
|
+
if (key === "base") continue;
|
|
321
|
+
for (const mod of key.split(":")) {
|
|
322
|
+
if (!interactive && interactiveMods.has(mod)) interactive = true;
|
|
323
|
+
if (!modeOrResponsive && (modeMods.has(mod) || responsiveMods.has(mod))) modeOrResponsive = true;
|
|
324
|
+
}
|
|
325
|
+
if (interactive && modeOrResponsive) break;
|
|
326
|
+
}
|
|
327
|
+
const result = { interactive, modeOrResponsive };
|
|
328
|
+
_bucketModsCache.set(resolved, result);
|
|
329
|
+
return result;
|
|
330
|
+
}
|
|
331
|
+
var CONSUMED_PROPS = /* @__PURE__ */ new Set(["className", "kb", "__kbachStyles", "__kbachClasses"]);
|
|
332
|
+
function omitConsumed(props) {
|
|
333
|
+
const out = {};
|
|
334
|
+
for (const key of Object.keys(props)) {
|
|
335
|
+
if (!CONSUMED_PROPS.has(key)) out[key] = props[key];
|
|
336
|
+
}
|
|
337
|
+
return out;
|
|
338
|
+
}
|
|
339
|
+
function mergeStyle(computed, userStyle) {
|
|
340
|
+
if (!userStyle) return computed;
|
|
341
|
+
if (Array.isArray(userStyle)) return Object.assign({}, computed, ...userStyle);
|
|
342
|
+
return { ...computed, ...userStyle };
|
|
343
|
+
}
|
|
344
|
+
function makeElement(isStaticChildren, type, props, key) {
|
|
345
|
+
return (isStaticChildren ? _jsxs : _jsx)(type, props, key);
|
|
346
|
+
}
|
|
347
|
+
function stripInternalMarkers2(s) {
|
|
348
|
+
delete s.__divideX;
|
|
349
|
+
delete s.__divideY;
|
|
350
|
+
delete s.__divideColor;
|
|
351
|
+
delete s.__divideStyle;
|
|
352
|
+
delete s.__keyframe;
|
|
353
|
+
}
|
|
354
|
+
function stripWebOnlyInlineProps(s) {
|
|
355
|
+
if (s.display === "grid" || s.display === "inline-grid") delete s.display;
|
|
356
|
+
delete s.gridTemplateColumns;
|
|
357
|
+
delete s.gridTemplateRows;
|
|
358
|
+
delete s.gridColumn;
|
|
359
|
+
delete s.gridRow;
|
|
360
|
+
delete s.gridArea;
|
|
361
|
+
delete s.gridColumnStart;
|
|
362
|
+
delete s.gridColumnEnd;
|
|
363
|
+
delete s.gridRowStart;
|
|
364
|
+
delete s.gridRowEnd;
|
|
365
|
+
delete s.gridAutoFlow;
|
|
366
|
+
delete s.gridAutoColumns;
|
|
367
|
+
delete s.gridAutoRows;
|
|
368
|
+
delete s.placeItems;
|
|
369
|
+
delete s.placeContent;
|
|
370
|
+
delete s.justifyItems;
|
|
371
|
+
delete s.placeSelf;
|
|
372
|
+
delete s.justifySelf;
|
|
373
|
+
if (s.position === "sticky" || s.position === "fixed" || s.position === "static") {
|
|
374
|
+
delete s.position;
|
|
375
|
+
}
|
|
376
|
+
}
|
|
377
|
+
var _rnToHtml = {
|
|
378
|
+
View: "div",
|
|
379
|
+
SafeAreaView: "div",
|
|
380
|
+
KeyboardAvoidingView: "div",
|
|
381
|
+
ScrollView: "div",
|
|
382
|
+
VirtualizedList: "div",
|
|
383
|
+
Text: "span",
|
|
384
|
+
Pressable: "div",
|
|
385
|
+
TouchableOpacity: "div",
|
|
386
|
+
TouchableHighlight: "div",
|
|
387
|
+
TouchableWithoutFeedback: "div",
|
|
388
|
+
TouchableNativeFeedback: "div"
|
|
389
|
+
};
|
|
390
|
+
var _userWebTypeMap = /* @__PURE__ */ new Map();
|
|
391
|
+
var _webTypeCache = /* @__PURE__ */ new WeakMap();
|
|
392
|
+
function registerWebElement(rnComponent, htmlTag) {
|
|
393
|
+
if (typeof rnComponent !== "object" && typeof rnComponent !== "function") return;
|
|
394
|
+
_userWebTypeMap.set(rnComponent, htmlTag);
|
|
395
|
+
_webTypeCache.delete(rnComponent);
|
|
396
|
+
}
|
|
397
|
+
function getWebTag(type) {
|
|
398
|
+
if (typeof type === "string") return null;
|
|
399
|
+
if (type === null || typeof type !== "function" && typeof type !== "object") return null;
|
|
400
|
+
const obj = type;
|
|
401
|
+
if (_userWebTypeMap.has(obj)) return _userWebTypeMap.get(obj);
|
|
402
|
+
if (_webTypeCache.has(obj)) return _webTypeCache.get(obj);
|
|
403
|
+
const name = obj.displayName ?? obj.name;
|
|
404
|
+
const tag = name ? _rnToHtml[name] ?? null : null;
|
|
405
|
+
_webTypeCache.set(obj, tag);
|
|
406
|
+
return tag;
|
|
407
|
+
}
|
|
408
|
+
var _rnOnlyProps = /* @__PURE__ */ new Set([
|
|
409
|
+
"onLongPress",
|
|
410
|
+
"delayLongPress",
|
|
411
|
+
"activeOpacity",
|
|
412
|
+
"underlayColor",
|
|
413
|
+
"hitSlop",
|
|
414
|
+
"pressRetentionOffset",
|
|
415
|
+
"accessible",
|
|
416
|
+
"accessibilityState",
|
|
417
|
+
"accessibilityLiveRegion",
|
|
418
|
+
"importantForAccessibility",
|
|
419
|
+
"nativeID",
|
|
420
|
+
"collapsable",
|
|
421
|
+
"needsOffscreenAlphaCompositing",
|
|
422
|
+
"renderToHardwareTextureAndroid",
|
|
423
|
+
"shouldRasterizeIOS",
|
|
424
|
+
"pointerEvents"
|
|
425
|
+
// RN prop — values differ from HTML pointer-events CSS
|
|
426
|
+
]);
|
|
427
|
+
var _pressableDisplayNames = /* @__PURE__ */ new Set([
|
|
428
|
+
"Pressable",
|
|
429
|
+
"TouchableOpacity",
|
|
430
|
+
"TouchableHighlight",
|
|
431
|
+
"TouchableWithoutFeedback",
|
|
432
|
+
"TouchableNativeFeedback"
|
|
433
|
+
]);
|
|
434
|
+
function transformToWebProps(originalName, props) {
|
|
435
|
+
const out = {};
|
|
436
|
+
const isPressable = _pressableDisplayNames.has(originalName);
|
|
437
|
+
for (const [k, v] of Object.entries(props)) {
|
|
438
|
+
if (_rnOnlyProps.has(k)) continue;
|
|
439
|
+
if (k === "onPress") {
|
|
440
|
+
if (!("onClick" in props)) out.onClick = v;
|
|
441
|
+
continue;
|
|
442
|
+
}
|
|
443
|
+
if (k === "accessibilityLabel") {
|
|
444
|
+
if (out["aria-label"] == null) out["aria-label"] = v;
|
|
445
|
+
continue;
|
|
446
|
+
}
|
|
447
|
+
if (k === "accessibilityRole") {
|
|
448
|
+
if (out.role == null) out.role = v;
|
|
449
|
+
continue;
|
|
450
|
+
}
|
|
451
|
+
if (k === "testID") {
|
|
452
|
+
if (out["data-testid"] == null) out["data-testid"] = v;
|
|
453
|
+
continue;
|
|
454
|
+
}
|
|
455
|
+
out[k] = v;
|
|
456
|
+
}
|
|
457
|
+
if (isPressable && !out.role) out.role = "button";
|
|
458
|
+
return out;
|
|
459
|
+
}
|
|
460
|
+
function processElement(type, rawProps, key, isStaticChildren) {
|
|
461
|
+
if (typeof type === "symbol") return makeElement(isStaticChildren, type, rawProps ?? {}, key);
|
|
462
|
+
const webTag = isWeb ? getWebTag(type) : null;
|
|
463
|
+
const effectiveType = webTag ?? type;
|
|
464
|
+
const originalName = webTag ? type?.displayName ?? type?.name : void 0;
|
|
465
|
+
if (!rawProps) return _jsx(effectiveType, null, key);
|
|
466
|
+
const workingProps = webTag && originalName ? transformToWebProps(originalName, rawProps) : rawProps;
|
|
467
|
+
const { className, kb: kbProp, __kbachStyles, __kbachClasses } = workingProps;
|
|
468
|
+
const classStr = className ?? kbProp ?? __kbachClasses;
|
|
469
|
+
if (!isNative && isRuntimeCSSDisabled() && classStr && !__kbachStyles) {
|
|
470
|
+
const { style: userStyle2, ...passProps2 } = omitConsumed(workingProps);
|
|
471
|
+
return makeElement(isStaticChildren, effectiveType, {
|
|
472
|
+
...passProps2,
|
|
473
|
+
className: normalizeClassString(classStr),
|
|
474
|
+
...userStyle2 !== void 0 ? { style: userStyle2 } : {}
|
|
475
|
+
}, key);
|
|
476
|
+
}
|
|
477
|
+
if (!classStr && !__kbachStyles) {
|
|
478
|
+
const defaultFont = getCachedDefaultFont();
|
|
479
|
+
if (!defaultFont) return makeElement(isStaticChildren, effectiveType, workingProps, key);
|
|
480
|
+
const { style: userStyle2, ...passProps2 } = omitConsumed(workingProps);
|
|
481
|
+
const finalStyle2 = userStyle2 ? Array.isArray(userStyle2) ? { fontFamily: defaultFont, ...Object.assign({}, ...userStyle2) } : { fontFamily: defaultFont, ...userStyle2 } : { fontFamily: defaultFont };
|
|
482
|
+
return makeElement(isStaticChildren, effectiveType, { ...passProps2, style: finalStyle2 }, key);
|
|
483
|
+
}
|
|
484
|
+
const config = getConfig();
|
|
485
|
+
const resolved = __kbachStyles ?? (classStr ? resolve(classStr, config.theme, config.darkMode) : {});
|
|
486
|
+
const { style: userStyle, ...passProps } = omitConsumed(workingProps);
|
|
487
|
+
const { interactive, modeOrResponsive } = bucketMods(resolved);
|
|
488
|
+
if (interactive) {
|
|
489
|
+
return _jsx(InteractiveWrapper, {
|
|
490
|
+
Component: effectiveType,
|
|
491
|
+
resolvedStyle: resolved,
|
|
492
|
+
...!isNative && classStr ? { className: normalizeClassString(classStr) } : {},
|
|
493
|
+
style: userStyle,
|
|
494
|
+
...passProps
|
|
495
|
+
}, key);
|
|
496
|
+
}
|
|
497
|
+
if (modeOrResponsive) {
|
|
498
|
+
return _jsx(DarkWrapper, {
|
|
499
|
+
Component: effectiveType,
|
|
500
|
+
resolvedStyle: resolved,
|
|
501
|
+
...!isNative && classStr ? { className: normalizeClassString(classStr) } : {},
|
|
502
|
+
style: userStyle,
|
|
503
|
+
...passProps
|
|
504
|
+
}, key);
|
|
505
|
+
}
|
|
506
|
+
const skipComputedInline = isWeb || !isNative && typeof effectiveType === "string";
|
|
507
|
+
let finalStyle;
|
|
508
|
+
if (!skipComputedInline) {
|
|
509
|
+
const computedStyle = flatten(resolved, false);
|
|
510
|
+
stripInternalMarkers2(computedStyle);
|
|
511
|
+
if (typeof effectiveType !== "string") stripWebOnlyInlineProps(computedStyle);
|
|
512
|
+
finalStyle = mergeStyle(computedStyle, userStyle);
|
|
513
|
+
} else {
|
|
514
|
+
finalStyle = userStyle ?? void 0;
|
|
515
|
+
}
|
|
516
|
+
return makeElement(isStaticChildren, effectiveType, {
|
|
517
|
+
...passProps,
|
|
518
|
+
style: finalStyle,
|
|
519
|
+
...!isNative && classStr ? { className: normalizeClassString(classStr) } : {}
|
|
520
|
+
}, key);
|
|
521
|
+
}
|
|
522
|
+
function jsx(type, props, key) {
|
|
523
|
+
return processElement(type, props, key, false);
|
|
524
|
+
}
|
|
525
|
+
function jsxs(type, props, key) {
|
|
526
|
+
return processElement(type, props, key, true);
|
|
527
|
+
}
|
|
528
|
+
|
|
529
|
+
export {
|
|
530
|
+
syncGlobalDarkMode,
|
|
531
|
+
setGlobalDarkMode,
|
|
532
|
+
EMPTY_BREAKPOINTS,
|
|
533
|
+
useGlobalWidth,
|
|
534
|
+
useConditionalWidth,
|
|
535
|
+
hasResponsiveBuckets,
|
|
536
|
+
hasInteractiveBuckets,
|
|
537
|
+
useGlobalDarkMode,
|
|
538
|
+
InteractiveWrapper,
|
|
539
|
+
Fragment,
|
|
540
|
+
_invalidateDefaultFontCache,
|
|
541
|
+
registerWebElement,
|
|
542
|
+
jsx,
|
|
543
|
+
jsxs
|
|
544
|
+
};
|
package/dist/index.d.mts
CHANGED
|
@@ -2,6 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import React__default, { ReactNode, ComponentType, ForwardRefExoticComponent } from 'react';
|
|
3
3
|
import { T as ThemeColors, a as ThemeConfig, P as ParsedClass, R as ResolvedStyle, S as StyleValue, F as FrameworkConfig, b as ResolvedConfig, c as ThemeMode } from './types-D-24rbXu.mjs';
|
|
4
4
|
export { d as PluginAPI } from './types-D-24rbXu.mjs';
|
|
5
|
+
export { registerWebElement } from './jsx-runtime.mjs';
|
|
5
6
|
|
|
6
7
|
declare const defaultColors: ThemeColors;
|
|
7
8
|
declare const defaultTheme: ThemeConfig;
|
package/dist/index.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import React__default, { ReactNode, ComponentType, ForwardRefExoticComponent } from 'react';
|
|
3
3
|
import { T as ThemeColors, a as ThemeConfig, P as ParsedClass, R as ResolvedStyle, S as StyleValue, F as FrameworkConfig, b as ResolvedConfig, c as ThemeMode } from './types-D-24rbXu.js';
|
|
4
4
|
export { d as PluginAPI } from './types-D-24rbXu.js';
|
|
5
|
+
export { registerWebElement } from './jsx-runtime.js';
|
|
5
6
|
|
|
6
7
|
declare const defaultColors: ThemeColors;
|
|
7
8
|
declare const defaultTheme: ThemeConfig;
|