@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.
@@ -716,7 +716,12 @@ function resolveColor(value, colors, isArbitrary) {
716
716
  }
717
717
  }
718
718
  if (!hex) return null;
719
- if (!opacityPart) return hex;
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;