@kbach/react 0.5.48 → 0.5.51
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-6YN6SRMN.mjs +239 -0
- package/dist/{chunk-BKSXIWL7.mjs → chunk-JBV2R655.mjs} +5 -3
- package/dist/{chunk-YZNSWFJT.mjs → chunk-JVTA5SC3.mjs} +94 -305
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +98 -73
- package/dist/index.mjs +11 -5
- package/dist/jsx-dev-runtime.js +89 -82
- package/dist/jsx-dev-runtime.mjs +3 -2
- package/dist/jsx-runtime.d.mts +2 -12
- package/dist/jsx-runtime.d.ts +2 -12
- package/dist/jsx-runtime.js +94 -87
- package/dist/jsx-runtime.mjs +5 -3
- package/dist/vite-plugin.mjs +1 -1
- package/dist/web-substitute-CfpYFnE7.d.mts +22 -0
- package/dist/web-substitute-CfpYFnE7.d.ts +22 -0
- package/package.json +1 -1
|
@@ -0,0 +1,239 @@
|
|
|
1
|
+
import {
|
|
2
|
+
EMPTY_BREAKPOINTS2 as EMPTY_BREAKPOINTS,
|
|
3
|
+
InteractiveWrapper,
|
|
4
|
+
getWebTag,
|
|
5
|
+
hasResponsiveBuckets,
|
|
6
|
+
transformToWebProps,
|
|
7
|
+
useConditionalWidth,
|
|
8
|
+
useGlobalDarkMode
|
|
9
|
+
} from "./chunk-JVTA5SC3.mjs";
|
|
10
|
+
import {
|
|
11
|
+
flatten,
|
|
12
|
+
getActiveBreakpoints,
|
|
13
|
+
getConfig,
|
|
14
|
+
getDefaultFontFamily,
|
|
15
|
+
getInteractiveModifiers,
|
|
16
|
+
getModeModifiers,
|
|
17
|
+
getResponsiveModifiers,
|
|
18
|
+
isNative,
|
|
19
|
+
isRuntimeCSSDisabled,
|
|
20
|
+
isWeb,
|
|
21
|
+
normalizeClassString,
|
|
22
|
+
resolve
|
|
23
|
+
} from "./chunk-JBV2R655.mjs";
|
|
24
|
+
|
|
25
|
+
// src/jsx-runtime.tsx
|
|
26
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
27
|
+
import { Fragment } from "react";
|
|
28
|
+
|
|
29
|
+
// src/DarkWrapper.tsx
|
|
30
|
+
import React, { useMemo } from "react";
|
|
31
|
+
var DarkWrapper = React.forwardRef(
|
|
32
|
+
function DarkWrapper2({ Component, resolvedStyle, style: styleProp, children, ...rest }, ref) {
|
|
33
|
+
const isDark = useGlobalDarkMode();
|
|
34
|
+
const needsWidth = hasResponsiveBuckets(resolvedStyle);
|
|
35
|
+
const width = useConditionalWidth(needsWidth);
|
|
36
|
+
const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
|
|
37
|
+
const isNonStringComponent = typeof Component !== "string";
|
|
38
|
+
const computedStyle = useMemo(() => {
|
|
39
|
+
if (isWeb) return {};
|
|
40
|
+
const s = flatten(resolvedStyle, isDark, {}, breakpoints);
|
|
41
|
+
stripInternalMarkers(s);
|
|
42
|
+
if (isNonStringComponent) stripWebOnlyProps(s);
|
|
43
|
+
return s;
|
|
44
|
+
}, [resolvedStyle, isDark, width, isNonStringComponent]);
|
|
45
|
+
const skipComputedInline = isWeb || !isNative && typeof Component === "string";
|
|
46
|
+
const finalStyle = skipComputedInline ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
|
|
47
|
+
const props = { ref, ...rest, style: finalStyle };
|
|
48
|
+
return Array.isArray(children) ? React.createElement(Component, props, ...children) : React.createElement(Component, props, children);
|
|
49
|
+
}
|
|
50
|
+
);
|
|
51
|
+
DarkWrapper.displayName = "Kbach.DarkWrapper";
|
|
52
|
+
function stripInternalMarkers(s) {
|
|
53
|
+
delete s.__divideX;
|
|
54
|
+
delete s.__divideY;
|
|
55
|
+
delete s.__divideColor;
|
|
56
|
+
delete s.__divideStyle;
|
|
57
|
+
delete s.__keyframe;
|
|
58
|
+
}
|
|
59
|
+
function stripWebOnlyProps(s) {
|
|
60
|
+
if (s.display === "grid" || s.display === "inline-grid") delete s.display;
|
|
61
|
+
delete s.gridTemplateColumns;
|
|
62
|
+
delete s.gridTemplateRows;
|
|
63
|
+
delete s.gridColumn;
|
|
64
|
+
delete s.gridRow;
|
|
65
|
+
delete s.gridArea;
|
|
66
|
+
delete s.gridColumnStart;
|
|
67
|
+
delete s.gridColumnEnd;
|
|
68
|
+
delete s.gridRowStart;
|
|
69
|
+
delete s.gridRowEnd;
|
|
70
|
+
delete s.gridAutoFlow;
|
|
71
|
+
delete s.gridAutoColumns;
|
|
72
|
+
delete s.gridAutoRows;
|
|
73
|
+
delete s.placeItems;
|
|
74
|
+
delete s.placeContent;
|
|
75
|
+
delete s.justifyItems;
|
|
76
|
+
delete s.placeSelf;
|
|
77
|
+
delete s.justifySelf;
|
|
78
|
+
if (s.position === "sticky" || s.position === "fixed" || s.position === "static") {
|
|
79
|
+
delete s.position;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
// src/jsx-runtime.tsx
|
|
84
|
+
var _cachedDefaultFont = void 0;
|
|
85
|
+
var _defaultFontVersion = 0;
|
|
86
|
+
var _lastFontVersion = -1;
|
|
87
|
+
function _invalidateDefaultFontCache() {
|
|
88
|
+
_defaultFontVersion++;
|
|
89
|
+
}
|
|
90
|
+
function getCachedDefaultFont() {
|
|
91
|
+
if (_lastFontVersion !== _defaultFontVersion) {
|
|
92
|
+
_cachedDefaultFont = getDefaultFontFamily();
|
|
93
|
+
_lastFontVersion = _defaultFontVersion;
|
|
94
|
+
}
|
|
95
|
+
return _cachedDefaultFont;
|
|
96
|
+
}
|
|
97
|
+
var _bucketModsCache = /* @__PURE__ */ new WeakMap();
|
|
98
|
+
function bucketMods(resolved) {
|
|
99
|
+
const cached = _bucketModsCache.get(resolved);
|
|
100
|
+
if (cached) return cached;
|
|
101
|
+
const interactiveMods = getInteractiveModifiers();
|
|
102
|
+
const modeMods = getModeModifiers();
|
|
103
|
+
const responsiveMods = getResponsiveModifiers();
|
|
104
|
+
let interactive = false;
|
|
105
|
+
let modeOrResponsive = false;
|
|
106
|
+
for (const key of Object.keys(resolved)) {
|
|
107
|
+
if (key === "base") continue;
|
|
108
|
+
for (const mod of key.split(":")) {
|
|
109
|
+
if (!interactive && interactiveMods.has(mod)) interactive = true;
|
|
110
|
+
if (!modeOrResponsive && (modeMods.has(mod) || responsiveMods.has(mod))) modeOrResponsive = true;
|
|
111
|
+
}
|
|
112
|
+
if (interactive && modeOrResponsive) break;
|
|
113
|
+
}
|
|
114
|
+
const result = { interactive, modeOrResponsive };
|
|
115
|
+
_bucketModsCache.set(resolved, result);
|
|
116
|
+
return result;
|
|
117
|
+
}
|
|
118
|
+
var CONSUMED_PROPS = /* @__PURE__ */ new Set(["className", "kb", "__kbachStyles", "__kbachClasses"]);
|
|
119
|
+
function omitConsumed(props) {
|
|
120
|
+
const out = {};
|
|
121
|
+
for (const key of Object.keys(props)) {
|
|
122
|
+
if (!CONSUMED_PROPS.has(key)) out[key] = props[key];
|
|
123
|
+
}
|
|
124
|
+
return out;
|
|
125
|
+
}
|
|
126
|
+
function mergeStyle(computed, userStyle) {
|
|
127
|
+
if (!userStyle) return computed;
|
|
128
|
+
if (Array.isArray(userStyle)) return Object.assign({}, computed, ...userStyle);
|
|
129
|
+
return { ...computed, ...userStyle };
|
|
130
|
+
}
|
|
131
|
+
function makeElement(isStaticChildren, type, props, key) {
|
|
132
|
+
return (isStaticChildren ? _jsxs : _jsx)(type, props, key);
|
|
133
|
+
}
|
|
134
|
+
function stripInternalMarkers2(s) {
|
|
135
|
+
delete s.__divideX;
|
|
136
|
+
delete s.__divideY;
|
|
137
|
+
delete s.__divideColor;
|
|
138
|
+
delete s.__divideStyle;
|
|
139
|
+
delete s.__keyframe;
|
|
140
|
+
}
|
|
141
|
+
function stripWebOnlyInlineProps(s) {
|
|
142
|
+
if (s.display === "grid" || s.display === "inline-grid") delete s.display;
|
|
143
|
+
delete s.gridTemplateColumns;
|
|
144
|
+
delete s.gridTemplateRows;
|
|
145
|
+
delete s.gridColumn;
|
|
146
|
+
delete s.gridRow;
|
|
147
|
+
delete s.gridArea;
|
|
148
|
+
delete s.gridColumnStart;
|
|
149
|
+
delete s.gridColumnEnd;
|
|
150
|
+
delete s.gridRowStart;
|
|
151
|
+
delete s.gridRowEnd;
|
|
152
|
+
delete s.gridAutoFlow;
|
|
153
|
+
delete s.gridAutoColumns;
|
|
154
|
+
delete s.gridAutoRows;
|
|
155
|
+
delete s.placeItems;
|
|
156
|
+
delete s.placeContent;
|
|
157
|
+
delete s.justifyItems;
|
|
158
|
+
delete s.placeSelf;
|
|
159
|
+
delete s.justifySelf;
|
|
160
|
+
if (s.position === "sticky" || s.position === "fixed" || s.position === "static") {
|
|
161
|
+
delete s.position;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
function processElement(type, rawProps, key, isStaticChildren) {
|
|
165
|
+
if (typeof type === "symbol") return makeElement(isStaticChildren, type, rawProps ?? {}, key);
|
|
166
|
+
const webTag = isWeb ? getWebTag(type) : null;
|
|
167
|
+
const effectiveType = webTag ?? type;
|
|
168
|
+
const originalName = webTag ? type?.displayName ?? type?.name : void 0;
|
|
169
|
+
if (!rawProps) return _jsx(effectiveType, null, key);
|
|
170
|
+
const workingProps = webTag && originalName ? transformToWebProps(originalName, rawProps) : rawProps;
|
|
171
|
+
const { className, kb: kbProp, __kbachStyles, __kbachClasses } = workingProps;
|
|
172
|
+
const classStr = className ?? kbProp ?? __kbachClasses;
|
|
173
|
+
if (!isNative && isRuntimeCSSDisabled() && classStr && !__kbachStyles) {
|
|
174
|
+
const { style: userStyle2, ...passProps2 } = omitConsumed(workingProps);
|
|
175
|
+
return makeElement(isStaticChildren, effectiveType, {
|
|
176
|
+
...passProps2,
|
|
177
|
+
className: normalizeClassString(classStr),
|
|
178
|
+
...userStyle2 !== void 0 ? { style: userStyle2 } : {}
|
|
179
|
+
}, key);
|
|
180
|
+
}
|
|
181
|
+
if (!classStr && !__kbachStyles) {
|
|
182
|
+
if (isWeb) return makeElement(isStaticChildren, effectiveType, omitConsumed(workingProps), key);
|
|
183
|
+
const defaultFont = getCachedDefaultFont();
|
|
184
|
+
if (!defaultFont) return makeElement(isStaticChildren, effectiveType, workingProps, key);
|
|
185
|
+
const { style: userStyle2, ...passProps2 } = omitConsumed(workingProps);
|
|
186
|
+
const finalStyle2 = userStyle2 ? Array.isArray(userStyle2) ? { fontFamily: defaultFont, ...Object.assign({}, ...userStyle2) } : { fontFamily: defaultFont, ...userStyle2 } : { fontFamily: defaultFont };
|
|
187
|
+
return makeElement(isStaticChildren, effectiveType, { ...passProps2, style: finalStyle2 }, key);
|
|
188
|
+
}
|
|
189
|
+
const config = getConfig();
|
|
190
|
+
const resolved = !isWeb && __kbachStyles != null ? __kbachStyles : classStr ? resolve(classStr, config.theme, config.darkMode) : {};
|
|
191
|
+
const { style: userStyle, ...passProps } = omitConsumed(workingProps);
|
|
192
|
+
const { interactive, modeOrResponsive } = bucketMods(resolved);
|
|
193
|
+
if (interactive) {
|
|
194
|
+
return _jsx(InteractiveWrapper, {
|
|
195
|
+
Component: effectiveType,
|
|
196
|
+
resolvedStyle: resolved,
|
|
197
|
+
...!isNative && classStr ? { className: normalizeClassString(classStr) } : {},
|
|
198
|
+
style: userStyle,
|
|
199
|
+
...passProps
|
|
200
|
+
}, key);
|
|
201
|
+
}
|
|
202
|
+
if (modeOrResponsive) {
|
|
203
|
+
return _jsx(DarkWrapper, {
|
|
204
|
+
Component: effectiveType,
|
|
205
|
+
resolvedStyle: resolved,
|
|
206
|
+
...!isNative && classStr ? { className: normalizeClassString(classStr) } : {},
|
|
207
|
+
style: userStyle,
|
|
208
|
+
...passProps
|
|
209
|
+
}, key);
|
|
210
|
+
}
|
|
211
|
+
const skipComputedInline = isWeb || !isNative && typeof effectiveType === "string";
|
|
212
|
+
let finalStyle;
|
|
213
|
+
if (!skipComputedInline) {
|
|
214
|
+
const computedStyle = flatten(resolved, false);
|
|
215
|
+
stripInternalMarkers2(computedStyle);
|
|
216
|
+
if (typeof effectiveType !== "string") stripWebOnlyInlineProps(computedStyle);
|
|
217
|
+
finalStyle = mergeStyle(computedStyle, userStyle);
|
|
218
|
+
} else {
|
|
219
|
+
finalStyle = userStyle ?? void 0;
|
|
220
|
+
}
|
|
221
|
+
return makeElement(isStaticChildren, effectiveType, {
|
|
222
|
+
...passProps,
|
|
223
|
+
style: finalStyle,
|
|
224
|
+
...!isNative && classStr ? { className: normalizeClassString(classStr) } : {}
|
|
225
|
+
}, key);
|
|
226
|
+
}
|
|
227
|
+
function jsx(type, props, key) {
|
|
228
|
+
return processElement(type, props, key, false);
|
|
229
|
+
}
|
|
230
|
+
function jsxs(type, props, key) {
|
|
231
|
+
return processElement(type, props, key, true);
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
export {
|
|
235
|
+
Fragment,
|
|
236
|
+
_invalidateDefaultFontCache,
|
|
237
|
+
jsx,
|
|
238
|
+
jsxs
|
|
239
|
+
};
|
|
@@ -2805,9 +2805,11 @@ function flatten(resolved, isDark, state = {}, breakpoints = /* @__PURE__ */ new
|
|
|
2805
2805
|
Object.assign(result, styles);
|
|
2806
2806
|
}
|
|
2807
2807
|
}
|
|
2808
|
-
|
|
2809
|
-
|
|
2810
|
-
|
|
2808
|
+
if (isNative) {
|
|
2809
|
+
const defaultFont = getDefaultFontFamily();
|
|
2810
|
+
if (defaultFont && !("fontFamily" in result)) {
|
|
2811
|
+
result.fontFamily = defaultFont;
|
|
2812
|
+
}
|
|
2811
2813
|
}
|
|
2812
2814
|
if (!isNative) {
|
|
2813
2815
|
const r = result;
|
|
@@ -1,23 +1,13 @@
|
|
|
1
1
|
import {
|
|
2
2
|
flatten,
|
|
3
3
|
getActiveBreakpoints,
|
|
4
|
-
getConfig,
|
|
5
|
-
getDefaultFontFamily,
|
|
6
4
|
getGlobalWidth,
|
|
7
5
|
getInteractiveModifiers,
|
|
8
|
-
getModeModifiers,
|
|
9
6
|
getResponsiveModifiers,
|
|
10
7
|
isNative,
|
|
11
|
-
isRuntimeCSSDisabled,
|
|
12
8
|
isWeb,
|
|
13
|
-
normalizeClassString,
|
|
14
|
-
resolve,
|
|
15
9
|
subscribeGlobalWidth
|
|
16
|
-
} from "./chunk-
|
|
17
|
-
|
|
18
|
-
// src/jsx-runtime.tsx
|
|
19
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
20
|
-
import { Fragment } from "react";
|
|
10
|
+
} from "./chunk-JBV2R655.mjs";
|
|
21
11
|
|
|
22
12
|
// src/core/darkModeStore.ts
|
|
23
13
|
var KEY = "__kbach_dark_store__";
|
|
@@ -47,8 +37,90 @@ function subscribeGlobalDarkMode(callback) {
|
|
|
47
37
|
return () => store.subscribers.delete(callback);
|
|
48
38
|
}
|
|
49
39
|
|
|
50
|
-
// src/
|
|
51
|
-
|
|
40
|
+
// src/web-substitute.ts
|
|
41
|
+
var _rnToHtml = {
|
|
42
|
+
View: "div",
|
|
43
|
+
SafeAreaView: "div",
|
|
44
|
+
KeyboardAvoidingView: "div",
|
|
45
|
+
ScrollView: "div",
|
|
46
|
+
VirtualizedList: "div",
|
|
47
|
+
Text: "span",
|
|
48
|
+
Pressable: "div",
|
|
49
|
+
TouchableOpacity: "div",
|
|
50
|
+
TouchableHighlight: "div",
|
|
51
|
+
TouchableWithoutFeedback: "div",
|
|
52
|
+
TouchableNativeFeedback: "div"
|
|
53
|
+
};
|
|
54
|
+
var _userMap = /* @__PURE__ */ new Map();
|
|
55
|
+
var _cache = /* @__PURE__ */ new WeakMap();
|
|
56
|
+
function registerWebElement(rnComponent, htmlTag) {
|
|
57
|
+
if (typeof rnComponent !== "object" && typeof rnComponent !== "function") return;
|
|
58
|
+
_userMap.set(rnComponent, htmlTag);
|
|
59
|
+
_cache.delete(rnComponent);
|
|
60
|
+
}
|
|
61
|
+
function getWebTag(type) {
|
|
62
|
+
if (typeof type === "string") return null;
|
|
63
|
+
if (type === null || typeof type !== "function" && typeof type !== "object") return null;
|
|
64
|
+
const obj = type;
|
|
65
|
+
if (_userMap.has(obj)) return _userMap.get(obj);
|
|
66
|
+
if (_cache.has(obj)) return _cache.get(obj);
|
|
67
|
+
const name = obj.displayName ?? obj.name;
|
|
68
|
+
const tag = name ? _rnToHtml[name] ?? null : null;
|
|
69
|
+
_cache.set(obj, tag);
|
|
70
|
+
return tag;
|
|
71
|
+
}
|
|
72
|
+
var _rnOnlyProps = /* @__PURE__ */ new Set([
|
|
73
|
+
"onLongPress",
|
|
74
|
+
"delayLongPress",
|
|
75
|
+
"activeOpacity",
|
|
76
|
+
"underlayColor",
|
|
77
|
+
"hitSlop",
|
|
78
|
+
"pressRetentionOffset",
|
|
79
|
+
"accessible",
|
|
80
|
+
"accessibilityState",
|
|
81
|
+
"accessibilityLiveRegion",
|
|
82
|
+
"importantForAccessibility",
|
|
83
|
+
"nativeID",
|
|
84
|
+
"collapsable",
|
|
85
|
+
"needsOffscreenAlphaCompositing",
|
|
86
|
+
"renderToHardwareTextureAndroid",
|
|
87
|
+
"shouldRasterizeIOS",
|
|
88
|
+
"pointerEvents"
|
|
89
|
+
// RN and HTML values differ
|
|
90
|
+
]);
|
|
91
|
+
var _pressableNames = /* @__PURE__ */ new Set([
|
|
92
|
+
"Pressable",
|
|
93
|
+
"TouchableOpacity",
|
|
94
|
+
"TouchableHighlight",
|
|
95
|
+
"TouchableWithoutFeedback",
|
|
96
|
+
"TouchableNativeFeedback"
|
|
97
|
+
]);
|
|
98
|
+
function transformToWebProps(originalName, props) {
|
|
99
|
+
const out = {};
|
|
100
|
+
const isPressable = _pressableNames.has(originalName);
|
|
101
|
+
for (const [k, v] of Object.entries(props)) {
|
|
102
|
+
if (_rnOnlyProps.has(k)) continue;
|
|
103
|
+
if (k === "onPress") {
|
|
104
|
+
if (!("onClick" in props)) out.onClick = v;
|
|
105
|
+
continue;
|
|
106
|
+
}
|
|
107
|
+
if (k === "accessibilityLabel") {
|
|
108
|
+
if (out["aria-label"] == null) out["aria-label"] = v;
|
|
109
|
+
continue;
|
|
110
|
+
}
|
|
111
|
+
if (k === "accessibilityRole") {
|
|
112
|
+
if (out.role == null) out.role = v;
|
|
113
|
+
continue;
|
|
114
|
+
}
|
|
115
|
+
if (k === "testID") {
|
|
116
|
+
if (out["data-testid"] == null) out["data-testid"] = v;
|
|
117
|
+
continue;
|
|
118
|
+
}
|
|
119
|
+
out[k] = v;
|
|
120
|
+
}
|
|
121
|
+
if (isPressable && !out.role) out.role = "button";
|
|
122
|
+
return out;
|
|
123
|
+
}
|
|
52
124
|
|
|
53
125
|
// src/useGlobalDarkMode.ts
|
|
54
126
|
import React from "react";
|
|
@@ -66,6 +138,9 @@ function useGlobalDarkMode() {
|
|
|
66
138
|
);
|
|
67
139
|
}
|
|
68
140
|
|
|
141
|
+
// src/InteractiveWrapper.tsx
|
|
142
|
+
import React3, { forwardRef, useState, useCallback, useMemo } from "react";
|
|
143
|
+
|
|
69
144
|
// src/useGlobalWidth.ts
|
|
70
145
|
import React2 from "react";
|
|
71
146
|
var useSyncExternalStore2 = React2.useSyncExternalStore ?? function useSyncExternalStoreFallback2(subscribe, getSnapshot, _getServerSnapshot) {
|
|
@@ -185,6 +260,7 @@ var InteractiveWrapper = forwardRef(
|
|
|
185
260
|
const handleBlur = useCallback(chain(onBlur, () => setFocused(false)), [onBlur]);
|
|
186
261
|
const computedStyle = useMemo(
|
|
187
262
|
() => {
|
|
263
|
+
if (isWeb) return {};
|
|
188
264
|
const s = flatten(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused, disabled: !!rest.disabled, checked: !!rest.checked }, breakpoints);
|
|
189
265
|
delete s.__divideX;
|
|
190
266
|
delete s.__divideY;
|
|
@@ -240,292 +316,6 @@ var InteractiveWrapper = forwardRef(
|
|
|
240
316
|
);
|
|
241
317
|
InteractiveWrapper.displayName = "Kbach.InteractiveWrapper";
|
|
242
318
|
|
|
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
319
|
export {
|
|
530
320
|
syncGlobalDarkMode,
|
|
531
321
|
setGlobalDarkMode,
|
|
@@ -534,11 +324,10 @@ export {
|
|
|
534
324
|
useConditionalWidth,
|
|
535
325
|
hasResponsiveBuckets,
|
|
536
326
|
hasInteractiveBuckets,
|
|
537
|
-
|
|
538
|
-
InteractiveWrapper,
|
|
539
|
-
Fragment,
|
|
540
|
-
_invalidateDefaultFontCache,
|
|
327
|
+
EMPTY_BREAKPOINTS2,
|
|
541
328
|
registerWebElement,
|
|
542
|
-
|
|
543
|
-
|
|
329
|
+
getWebTag,
|
|
330
|
+
transformToWebProps,
|
|
331
|
+
useGlobalDarkMode,
|
|
332
|
+
InteractiveWrapper
|
|
544
333
|
};
|