@kbach/react 0.5.15 → 0.5.16

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.
@@ -1,15 +1,17 @@
1
1
  import {
2
2
  EMPTY_BREAKPOINTS,
3
3
  InteractiveWrapper,
4
+ useConditionalWidth,
5
+ useGlobalDarkMode
6
+ } from "./chunk-RMZIFMWE.mjs";
7
+ import {
4
8
  flatten,
5
9
  getActiveBreakpoints,
6
10
  getConfig,
7
11
  getDefaultFontFamily,
8
12
  isWeb,
9
- resolve,
10
- useConditionalWidth,
11
- useGlobalDarkMode
12
- } from "./chunk-NBGURNUD.mjs";
13
+ resolve
14
+ } from "./chunk-SHQPNCQ7.mjs";
13
15
 
14
16
  // src/jsx-runtime.tsx
15
17
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -0,0 +1,224 @@
1
+ import {
2
+ flatten,
3
+ getActiveBreakpoints,
4
+ getGlobalWidth,
5
+ isWeb,
6
+ subscribeGlobalWidth
7
+ } from "./chunk-SHQPNCQ7.mjs";
8
+
9
+ // src/core/darkModeStore.ts
10
+ var KEY = "__kbach_dark_store__";
11
+ function getStore() {
12
+ const g = globalThis;
13
+ if (!g[KEY]) {
14
+ g[KEY] = { isDark: false, lastNotified: false, subscribers: /* @__PURE__ */ new Set() };
15
+ }
16
+ return g[KEY];
17
+ }
18
+ function syncGlobalDarkMode(isDark) {
19
+ getStore().isDark = isDark;
20
+ }
21
+ function setGlobalDarkMode(isDark) {
22
+ const store = getStore();
23
+ store.isDark = isDark;
24
+ if (store.lastNotified === isDark) return;
25
+ store.lastNotified = isDark;
26
+ for (const sub of store.subscribers) sub();
27
+ }
28
+ function getGlobalDarkMode() {
29
+ return getStore().isDark;
30
+ }
31
+ function subscribeGlobalDarkMode(callback) {
32
+ const store = getStore();
33
+ store.subscribers.add(callback);
34
+ return () => store.subscribers.delete(callback);
35
+ }
36
+
37
+ // src/useGlobalDarkMode.ts
38
+ import React from "react";
39
+ var useSyncExternalStore = React.useSyncExternalStore ?? function useSyncExternalStoreFallback(subscribe, getSnapshot, _getServerSnapshot) {
40
+ const [, forceUpdate] = React.useReducer((n) => n + 1, 0);
41
+ React.useEffect(() => subscribe(forceUpdate), [subscribe]);
42
+ return getSnapshot();
43
+ };
44
+ function useGlobalDarkMode() {
45
+ return useSyncExternalStore(
46
+ subscribeGlobalDarkMode,
47
+ getGlobalDarkMode,
48
+ () => false
49
+ // SSR: default light
50
+ );
51
+ }
52
+
53
+ // src/InteractiveWrapper.tsx
54
+ import React3, { forwardRef, useState, useCallback, useMemo } from "react";
55
+
56
+ // src/useGlobalWidth.ts
57
+ import React2 from "react";
58
+ var useSyncExternalStore2 = React2.useSyncExternalStore ?? function useSyncExternalStoreFallback2(subscribe, getSnapshot, _getServerSnapshot) {
59
+ const [, forceUpdate] = React2.useReducer((n) => n + 1, 0);
60
+ React2.useEffect(() => subscribe(forceUpdate), [subscribe]);
61
+ return getSnapshot();
62
+ };
63
+ var NOOP_SUB = (_) => () => {
64
+ };
65
+ var ZERO_SNAP = () => 0;
66
+ var EMPTY_BREAKPOINTS = /* @__PURE__ */ new Set();
67
+ var _webListeners = null;
68
+ var _webRaf = 0;
69
+ function _webResizeHandler() {
70
+ cancelAnimationFrame(_webRaf);
71
+ _webRaf = requestAnimationFrame(() => {
72
+ if (_webListeners) for (const cb of _webListeners) cb();
73
+ });
74
+ }
75
+ function subscribeWebWidth(cb) {
76
+ if (typeof window === "undefined") return () => {
77
+ };
78
+ if (!_webListeners) {
79
+ _webListeners = /* @__PURE__ */ new Set();
80
+ window.addEventListener("resize", _webResizeHandler);
81
+ }
82
+ _webListeners.add(cb);
83
+ return () => {
84
+ _webListeners.delete(cb);
85
+ if (_webListeners.size === 0) {
86
+ window.removeEventListener("resize", _webResizeHandler);
87
+ cancelAnimationFrame(_webRaf);
88
+ _webListeners = null;
89
+ }
90
+ };
91
+ }
92
+ function getWebWidth() {
93
+ return typeof window !== "undefined" ? window.innerWidth : 0;
94
+ }
95
+ function useGlobalWidth() {
96
+ return useSyncExternalStore2(
97
+ isWeb ? subscribeWebWidth : subscribeGlobalWidth,
98
+ isWeb ? getWebWidth : getGlobalWidth,
99
+ ZERO_SNAP
100
+ );
101
+ }
102
+ function useConditionalWidth(active) {
103
+ return useSyncExternalStore2(
104
+ active ? isWeb ? subscribeWebWidth : subscribeGlobalWidth : NOOP_SUB,
105
+ active ? isWeb ? getWebWidth : getGlobalWidth : ZERO_SNAP,
106
+ ZERO_SNAP
107
+ );
108
+ }
109
+
110
+ // src/InteractiveWrapper.tsx
111
+ function chain(original, extra) {
112
+ return (...args) => {
113
+ original?.(...args);
114
+ extra();
115
+ };
116
+ }
117
+ var RESPONSIVE_MODS = /* @__PURE__ */ new Set(["sm", "md", "lg", "xl", "2xl"]);
118
+ function hasResponsiveBuckets(resolved) {
119
+ for (const key of Object.keys(resolved)) {
120
+ if (key === "base") continue;
121
+ for (const mod of key.split(":")) {
122
+ if (RESPONSIVE_MODS.has(mod)) return true;
123
+ }
124
+ }
125
+ return false;
126
+ }
127
+ var InteractiveWrapper = forwardRef(
128
+ function InteractiveWrapper2({
129
+ Component,
130
+ resolvedStyle,
131
+ className,
132
+ style: styleProp,
133
+ onPressIn,
134
+ onPressOut,
135
+ onPointerDown,
136
+ onPointerUp,
137
+ onPointerLeave,
138
+ onMouseEnter,
139
+ onMouseLeave,
140
+ onFocus,
141
+ onBlur,
142
+ ...rest
143
+ }, ref) {
144
+ const isDark = useGlobalDarkMode();
145
+ const needsWidth = hasResponsiveBuckets(resolvedStyle);
146
+ const width = useConditionalWidth(needsWidth);
147
+ const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
148
+ const [pressed, setPressed] = useState(false);
149
+ const [hovered, setHovered] = useState(false);
150
+ const [focused, setFocused] = useState(false);
151
+ const handlePressIn = useCallback(chain(onPressIn, () => setPressed(true)), [onPressIn]);
152
+ const handlePressOut = useCallback(chain(onPressOut, () => setPressed(false)), [onPressOut]);
153
+ const handlePointerDown = useCallback(chain(onPointerDown, () => setPressed(true)), [onPointerDown]);
154
+ const handlePointerUp = useCallback(chain(onPointerUp, () => setPressed(false)), [onPointerUp]);
155
+ const handlePointerLeave = useCallback(chain(onPointerLeave, () => setPressed(false)), [onPointerLeave]);
156
+ const handleMouseEnter = useCallback(chain(onMouseEnter, () => setHovered(true)), [onMouseEnter]);
157
+ const handleMouseLeave = useCallback(chain(onMouseLeave, () => setHovered(false)), [onMouseLeave]);
158
+ const handleFocus = useCallback(chain(onFocus, () => setFocused(true)), [onFocus]);
159
+ const handleBlur = useCallback(chain(onBlur, () => setFocused(false)), [onBlur]);
160
+ const computedStyle = useMemo(
161
+ () => {
162
+ const s = flatten(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused }, breakpoints);
163
+ delete s.__divideX;
164
+ delete s.__divideY;
165
+ delete s.__divideColor;
166
+ delete s.__divideStyle;
167
+ delete s.__keyframe;
168
+ if (typeof Component !== "string") {
169
+ if (s.display === "grid" || s.display === "inline-grid") delete s.display;
170
+ delete s.gridTemplateColumns;
171
+ delete s.gridTemplateRows;
172
+ delete s.gridColumn;
173
+ delete s.gridRow;
174
+ delete s.gridArea;
175
+ delete s.gridColumnStart;
176
+ delete s.gridColumnEnd;
177
+ delete s.gridRowStart;
178
+ delete s.gridRowEnd;
179
+ delete s.gridAutoFlow;
180
+ delete s.gridAutoColumns;
181
+ delete s.gridAutoRows;
182
+ delete s.placeItems;
183
+ delete s.placeContent;
184
+ delete s.justifyItems;
185
+ delete s.placeSelf;
186
+ delete s.justifySelf;
187
+ if (s.position === "sticky" || s.position === "fixed" || s.position === "static") {
188
+ delete s.position;
189
+ }
190
+ }
191
+ return s;
192
+ },
193
+ [resolvedStyle, isDark, pressed, hovered, focused, width]
194
+ // eslint-disable-line react-hooks/exhaustive-deps
195
+ );
196
+ const finalStyle = styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
197
+ const { children, ...restWithoutChildren } = rest;
198
+ const componentProps = {
199
+ ref,
200
+ ...restWithoutChildren,
201
+ style: finalStyle,
202
+ ...isWeb && className ? { className } : {},
203
+ // onPressIn / onPressOut are React Native-only.
204
+ // On web, onPointerDown/Up drive the pressed state instead (covers mouse + touch).
205
+ ...isWeb ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
206
+ onMouseEnter: handleMouseEnter,
207
+ onMouseLeave: handleMouseLeave,
208
+ onFocus: handleFocus,
209
+ onBlur: handleBlur
210
+ };
211
+ return Array.isArray(children) ? React3.createElement(Component, componentProps, ...children) : React3.createElement(Component, componentProps, children);
212
+ }
213
+ );
214
+ InteractiveWrapper.displayName = "Kbach.InteractiveWrapper";
215
+
216
+ export {
217
+ syncGlobalDarkMode,
218
+ setGlobalDarkMode,
219
+ EMPTY_BREAKPOINTS,
220
+ useGlobalWidth,
221
+ useConditionalWidth,
222
+ useGlobalDarkMode,
223
+ InteractiveWrapper
224
+ };
@@ -3098,18 +3098,19 @@ function buildDivideDecls(styles) {
3098
3098
  if ("__divideStyle" in styles) parts.push(`border-style: ${String(styles.__divideStyle)}`);
3099
3099
  return parts.join("; ");
3100
3100
  }
3101
- function injectClassRule(cls, bucketKey, styles, darkMode, important = false) {
3101
+ function buildClassCSSRules(cls, bucketKey, styles, darkMode, important, screens) {
3102
+ const rules = [];
3102
3103
  if ("__keyframe" in styles && typeof styles.__keyframe === "string") {
3103
- injectRule(styles.__keyframe);
3104
+ rules.push(styles.__keyframe);
3104
3105
  }
3105
3106
  const isDivide = "__divideX" in styles || "__divideY" in styles || "__divideColor" in styles || "__divideStyle" in styles;
3106
3107
  const escaped = escapeCSSSelector(cls);
3107
3108
  const childSuffix = isDivide ? " > * + *" : "";
3108
3109
  if (bucketKey === "base") {
3109
3110
  const baseCssDecls = isDivide ? buildDivideDecls(styles) : styleValueToCSS(styles, important);
3110
- if (!baseCssDecls) return;
3111
- injectRule(`.${escaped}${childSuffix} { ${baseCssDecls} }`);
3112
- return;
3111
+ if (!baseCssDecls) return rules;
3112
+ rules.push(`.${escaped}${childSuffix} { ${baseCssDecls} }`);
3113
+ return rules;
3113
3114
  }
3114
3115
  const mods = bucketKey.split(":");
3115
3116
  const responsiveMods = mods.filter((m) => RESPONSIVE_MODS.has(m));
@@ -3139,7 +3140,7 @@ function injectClassRule(cls, bucketKey, styles, darkMode, important = false) {
3139
3140
  ]);
3140
3141
  const needsImportant = important || hasPrint || mediaMods.length > 0 || dirMods.length > 0 || ancestorMods.length > 0 || pseudoMods.some((m) => CSS_ONLY_PSEUDOS.has(m));
3141
3142
  const cssDecls = isDivide ? buildDivideDecls(styles) : styleValueToCSS(styles, needsImportant);
3142
- if (!cssDecls) return;
3143
+ if (!cssDecls) return rules;
3143
3144
  let rule;
3144
3145
  if (hasDark) {
3145
3146
  if (darkMode === "media") {
@@ -3160,20 +3161,28 @@ function injectClassRule(cls, bucketKey, styles, darkMode, important = false) {
3160
3161
  } else {
3161
3162
  rule = `${selector} { ${cssDecls} }`;
3162
3163
  }
3163
- if (hasPrint) {
3164
- rule = `@media print { ${rule} }`;
3165
- }
3166
- for (const m of mediaMods) {
3167
- rule = `@media ${MEDIA_MODS[m]} { ${rule} }`;
3168
- }
3164
+ if (hasPrint) rule = `@media print { ${rule} }`;
3165
+ for (const m of mediaMods) rule = `@media ${MEDIA_MODS[m]} { ${rule} }`;
3169
3166
  if (responsiveMods.length > 0) {
3170
- const screens = getGlobalScreens();
3171
3167
  const minWidth = Math.max(...responsiveMods.map((m) => screens[m] ?? 0));
3172
- if (minWidth > 0) {
3173
- rule = `@media (min-width: ${minWidth}px) { ${rule} }`;
3174
- }
3168
+ if (minWidth > 0) rule = `@media (min-width: ${minWidth}px) { ${rule} }`;
3169
+ }
3170
+ rules.push(rule);
3171
+ return rules;
3172
+ }
3173
+ function injectClassRule(cls, bucketKey, styles, darkMode, important = false) {
3174
+ const cssRules = buildClassCSSRules(cls, bucketKey, styles, darkMode, important, getGlobalScreens());
3175
+ for (const r of cssRules) injectRule(r);
3176
+ }
3177
+ function generateClassCSS(classString, theme, darkMode = "attribute", screens = {}) {
3178
+ const rules = [];
3179
+ for (const parsed of parseClasses(classString)) {
3180
+ const styles = resolveUtility(parsed, theme);
3181
+ if (!styles) continue;
3182
+ const bucketKey = parsed.modifiers.length === 0 ? "base" : parsed.modifiers.join(":");
3183
+ rules.push(...buildClassCSSRules(parsed.original, bucketKey, styles, darkMode, parsed.important, screens));
3175
3184
  }
3176
- injectRule(rule);
3185
+ return rules.join("\n");
3177
3186
  }
3178
3187
  var RN_ONLY_PROPS = /* @__PURE__ */ new Set([
3179
3188
  "shadowColor",
@@ -3512,213 +3521,6 @@ var customVariants = new Proxy(
3512
3521
  }
3513
3522
  );
3514
3523
 
3515
- // src/core/darkModeStore.ts
3516
- var KEY = "__kbach_dark_store__";
3517
- function getStore2() {
3518
- const g = globalThis;
3519
- if (!g[KEY]) {
3520
- g[KEY] = { isDark: false, lastNotified: false, subscribers: /* @__PURE__ */ new Set() };
3521
- }
3522
- return g[KEY];
3523
- }
3524
- function syncGlobalDarkMode(isDark) {
3525
- getStore2().isDark = isDark;
3526
- }
3527
- function setGlobalDarkMode(isDark) {
3528
- const store = getStore2();
3529
- store.isDark = isDark;
3530
- if (store.lastNotified === isDark) return;
3531
- store.lastNotified = isDark;
3532
- for (const sub of store.subscribers) sub();
3533
- }
3534
- function getGlobalDarkMode() {
3535
- return getStore2().isDark;
3536
- }
3537
- function subscribeGlobalDarkMode(callback) {
3538
- const store = getStore2();
3539
- store.subscribers.add(callback);
3540
- return () => store.subscribers.delete(callback);
3541
- }
3542
-
3543
- // src/useGlobalDarkMode.ts
3544
- import React from "react";
3545
- var useSyncExternalStore = React.useSyncExternalStore ?? function useSyncExternalStoreFallback(subscribe, getSnapshot, _getServerSnapshot) {
3546
- const [, forceUpdate] = React.useReducer((n) => n + 1, 0);
3547
- React.useEffect(() => subscribe(forceUpdate), [subscribe]);
3548
- return getSnapshot();
3549
- };
3550
- function useGlobalDarkMode() {
3551
- return useSyncExternalStore(
3552
- subscribeGlobalDarkMode,
3553
- getGlobalDarkMode,
3554
- () => false
3555
- // SSR: default light
3556
- );
3557
- }
3558
-
3559
- // src/InteractiveWrapper.tsx
3560
- import React3, { forwardRef, useState, useCallback, useMemo } from "react";
3561
-
3562
- // src/useGlobalWidth.ts
3563
- import React2 from "react";
3564
- var useSyncExternalStore2 = React2.useSyncExternalStore ?? function useSyncExternalStoreFallback2(subscribe, getSnapshot, _getServerSnapshot) {
3565
- const [, forceUpdate] = React2.useReducer((n) => n + 1, 0);
3566
- React2.useEffect(() => subscribe(forceUpdate), [subscribe]);
3567
- return getSnapshot();
3568
- };
3569
- var NOOP_SUB = (_) => () => {
3570
- };
3571
- var ZERO_SNAP = () => 0;
3572
- var EMPTY_BREAKPOINTS = /* @__PURE__ */ new Set();
3573
- var _webListeners = null;
3574
- var _webRaf = 0;
3575
- function _webResizeHandler() {
3576
- cancelAnimationFrame(_webRaf);
3577
- _webRaf = requestAnimationFrame(() => {
3578
- if (_webListeners) for (const cb of _webListeners) cb();
3579
- });
3580
- }
3581
- function subscribeWebWidth(cb) {
3582
- if (typeof window === "undefined") return () => {
3583
- };
3584
- if (!_webListeners) {
3585
- _webListeners = /* @__PURE__ */ new Set();
3586
- window.addEventListener("resize", _webResizeHandler);
3587
- }
3588
- _webListeners.add(cb);
3589
- return () => {
3590
- _webListeners.delete(cb);
3591
- if (_webListeners.size === 0) {
3592
- window.removeEventListener("resize", _webResizeHandler);
3593
- cancelAnimationFrame(_webRaf);
3594
- _webListeners = null;
3595
- }
3596
- };
3597
- }
3598
- function getWebWidth() {
3599
- return typeof window !== "undefined" ? window.innerWidth : 0;
3600
- }
3601
- function useGlobalWidth() {
3602
- return useSyncExternalStore2(
3603
- isWeb ? subscribeWebWidth : subscribeGlobalWidth,
3604
- isWeb ? getWebWidth : getGlobalWidth,
3605
- ZERO_SNAP
3606
- );
3607
- }
3608
- function useConditionalWidth(active) {
3609
- return useSyncExternalStore2(
3610
- active ? isWeb ? subscribeWebWidth : subscribeGlobalWidth : NOOP_SUB,
3611
- active ? isWeb ? getWebWidth : getGlobalWidth : ZERO_SNAP,
3612
- ZERO_SNAP
3613
- );
3614
- }
3615
-
3616
- // src/InteractiveWrapper.tsx
3617
- function chain(original, extra) {
3618
- return (...args) => {
3619
- original?.(...args);
3620
- extra();
3621
- };
3622
- }
3623
- var RESPONSIVE_MODS2 = /* @__PURE__ */ new Set(["sm", "md", "lg", "xl", "2xl"]);
3624
- function hasResponsiveBuckets(resolved) {
3625
- for (const key of Object.keys(resolved)) {
3626
- if (key === "base") continue;
3627
- for (const mod of key.split(":")) {
3628
- if (RESPONSIVE_MODS2.has(mod)) return true;
3629
- }
3630
- }
3631
- return false;
3632
- }
3633
- var InteractiveWrapper = forwardRef(
3634
- function InteractiveWrapper2({
3635
- Component,
3636
- resolvedStyle,
3637
- className,
3638
- style: styleProp,
3639
- onPressIn,
3640
- onPressOut,
3641
- onPointerDown,
3642
- onPointerUp,
3643
- onPointerLeave,
3644
- onMouseEnter,
3645
- onMouseLeave,
3646
- onFocus,
3647
- onBlur,
3648
- ...rest
3649
- }, ref) {
3650
- const isDark = useGlobalDarkMode();
3651
- const needsWidth = hasResponsiveBuckets(resolvedStyle);
3652
- const width = useConditionalWidth(needsWidth);
3653
- const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
3654
- const [pressed, setPressed] = useState(false);
3655
- const [hovered, setHovered] = useState(false);
3656
- const [focused, setFocused] = useState(false);
3657
- const handlePressIn = useCallback(chain(onPressIn, () => setPressed(true)), [onPressIn]);
3658
- const handlePressOut = useCallback(chain(onPressOut, () => setPressed(false)), [onPressOut]);
3659
- const handlePointerDown = useCallback(chain(onPointerDown, () => setPressed(true)), [onPointerDown]);
3660
- const handlePointerUp = useCallback(chain(onPointerUp, () => setPressed(false)), [onPointerUp]);
3661
- const handlePointerLeave = useCallback(chain(onPointerLeave, () => setPressed(false)), [onPointerLeave]);
3662
- const handleMouseEnter = useCallback(chain(onMouseEnter, () => setHovered(true)), [onMouseEnter]);
3663
- const handleMouseLeave = useCallback(chain(onMouseLeave, () => setHovered(false)), [onMouseLeave]);
3664
- const handleFocus = useCallback(chain(onFocus, () => setFocused(true)), [onFocus]);
3665
- const handleBlur = useCallback(chain(onBlur, () => setFocused(false)), [onBlur]);
3666
- const computedStyle = useMemo(
3667
- () => {
3668
- const s = flatten(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused }, breakpoints);
3669
- delete s.__divideX;
3670
- delete s.__divideY;
3671
- delete s.__divideColor;
3672
- delete s.__divideStyle;
3673
- delete s.__keyframe;
3674
- if (typeof Component !== "string") {
3675
- if (s.display === "grid" || s.display === "inline-grid") delete s.display;
3676
- delete s.gridTemplateColumns;
3677
- delete s.gridTemplateRows;
3678
- delete s.gridColumn;
3679
- delete s.gridRow;
3680
- delete s.gridArea;
3681
- delete s.gridColumnStart;
3682
- delete s.gridColumnEnd;
3683
- delete s.gridRowStart;
3684
- delete s.gridRowEnd;
3685
- delete s.gridAutoFlow;
3686
- delete s.gridAutoColumns;
3687
- delete s.gridAutoRows;
3688
- delete s.placeItems;
3689
- delete s.placeContent;
3690
- delete s.justifyItems;
3691
- delete s.placeSelf;
3692
- delete s.justifySelf;
3693
- if (s.position === "sticky" || s.position === "fixed" || s.position === "static") {
3694
- delete s.position;
3695
- }
3696
- }
3697
- return s;
3698
- },
3699
- [resolvedStyle, isDark, pressed, hovered, focused, width]
3700
- // eslint-disable-line react-hooks/exhaustive-deps
3701
- );
3702
- const finalStyle = styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
3703
- const { children, ...restWithoutChildren } = rest;
3704
- const componentProps = {
3705
- ref,
3706
- ...restWithoutChildren,
3707
- style: finalStyle,
3708
- ...isWeb && className ? { className } : {},
3709
- // onPressIn / onPressOut are React Native-only.
3710
- // On web, onPointerDown/Up drive the pressed state instead (covers mouse + touch).
3711
- ...isWeb ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
3712
- onMouseEnter: handleMouseEnter,
3713
- onMouseLeave: handleMouseLeave,
3714
- onFocus: handleFocus,
3715
- onBlur: handleBlur
3716
- };
3717
- return Array.isArray(children) ? React3.createElement(Component, componentProps, ...children) : React3.createElement(Component, componentProps, children);
3718
- }
3719
- );
3720
- InteractiveWrapper.displayName = "Kbach.InteractiveWrapper";
3721
-
3722
3524
  export {
3723
3525
  __require,
3724
3526
  defaultColors,
@@ -3729,20 +3531,16 @@ export {
3729
3531
  syncGlobalWidth,
3730
3532
  syncGlobalScreens,
3731
3533
  setGlobalWidth,
3534
+ getGlobalWidth,
3535
+ subscribeGlobalWidth,
3732
3536
  getActiveBreakpoints,
3733
3537
  getDefaultFontFamily,
3538
+ generateClassCSS,
3734
3539
  resolve,
3735
3540
  flatten,
3736
3541
  getConfig,
3737
3542
  buildConfig,
3738
3543
  onConfigChange,
3739
3544
  updateConfig,
3740
- initConfig,
3741
- syncGlobalDarkMode,
3742
- setGlobalDarkMode,
3743
- EMPTY_BREAKPOINTS,
3744
- useGlobalWidth,
3745
- useConditionalWidth,
3746
- useGlobalDarkMode,
3747
- InteractiveWrapper
3545
+ initConfig
3748
3546
  };
package/dist/index.d.mts CHANGED
@@ -1,74 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import React__default, { ReactNode, ComponentType, ForwardRefExoticComponent } from 'react';
3
-
4
- type ThemeMode = 'light' | 'dark' | 'system';
5
- interface StyleValue {
6
- [key: string]: string | number | undefined | null | StyleValue | unknown[];
7
- }
8
- interface ParsedClass {
9
- /** The original class string, e.g. "dark:hover:bg-[#fff]" */
10
- original: string;
11
- /** Up to 3 modifier prefixes, e.g. ['dark', 'hover'] */
12
- modifiers: string[];
13
- /** Whether a leading `-` was present for negative values */
14
- negative: boolean;
15
- /** Whether a leading `!` was present — applies !important to all CSS declarations */
16
- important: boolean;
17
- /** The utility name, e.g. 'bg', 'p', 'text' */
18
- utility: string;
19
- /** The resolved value, e.g. 'white', '#fff', '4' */
20
- value: string;
21
- /** Whether the value was specified with bracket notation [value] */
22
- isArbitrary: boolean;
23
- }
24
- interface ResolvedStyle {
25
- /** Base styles applied unconditionally */
26
- base?: StyleValue;
27
- /** Styles keyed by modifier or modifier combo, e.g. 'dark', 'hover', 'dark:hover' */
28
- [modifierKey: string]: StyleValue | undefined;
29
- }
30
- type ColorShades = Record<string, string>;
31
- type ThemeColors = Record<string, string | ColorShades>;
32
- type ThemeSpacing = Record<string, number | string>;
33
- interface ThemeConfig {
34
- colors: ThemeColors;
35
- spacing: ThemeSpacing;
36
- fontSize: Record<string, number | string>;
37
- fontFamily: Record<string, string | string[]>;
38
- fontWeight: Record<string, string | number>;
39
- borderRadius: Record<string, number | string>;
40
- borderWidth: Record<string, number>;
41
- opacity: Record<string, number>;
42
- lineHeight: Record<string, number | string>;
43
- letterSpacing: Record<string, number | string>;
44
- zIndex: Record<string, number | string>;
45
- flex: Record<string, number>;
46
- shadow: Record<string, StyleValue>;
47
- screens: Record<string, string | number>;
48
- [key: string]: unknown;
49
- }
50
- type DarkMode = 'attribute' | 'class' | 'media';
51
- interface PluginAPI {
52
- addUtility(name: string, styles: StyleValue): void;
53
- addVariant(name: string, selector: string): void;
54
- theme(path: string, defaultValue?: unknown): unknown;
55
- e(className: string): string;
56
- }
57
- interface FrameworkConfig {
58
- darkMode?: DarkMode;
59
- theme?: Partial<ThemeConfig>;
60
- /** Additive theme extension — accepts either `extend.theme.X` or `extend.X` directly. */
61
- extend?: {
62
- theme?: Partial<ThemeConfig>;
63
- } & Partial<ThemeConfig>;
64
- plugins?: Array<(api: PluginAPI) => void>;
65
- content?: string[];
66
- }
67
- interface ResolvedConfig {
68
- darkMode: DarkMode;
69
- theme: ThemeConfig;
70
- plugins: Array<(api: PluginAPI) => void>;
71
- }
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-CV5vXnSH.mjs';
4
+ export { d as PluginAPI } from './types-CV5vXnSH.mjs';
72
5
 
73
6
  declare const defaultColors: ThemeColors;
74
7
  declare const defaultTheme: ThemeConfig;
@@ -368,4 +301,4 @@ declare function kb(classString: string, isDark?: boolean): StyleValue | string;
368
301
  */
369
302
  declare function cx(...classes: Array<string | false | null | undefined>): string;
370
303
 
371
- export { type ColorScale, type ColorsAPI, type FrameworkConfig, type InteractionState, InteractiveWrapper, type InteractiveWrapperProps, type ParsedClass, type PluginAPI, type ResolvedConfig, type ResolvedStyle, type StyleValue, type StyledProps, type ThemeConfig, ThemeContext, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, type ToggleVariant, buildConfig, cx, defaultColors, defaultTheme, flatten, getConfig, initConfig, kb, parseClass, parseClasses, resolve, styled, updateConfig, useBreakpoint, useColors, useGlobalDarkMode, useIsDark, useResolvedStyle, useResponsive, useStyles, useTheme, wrapColors };
304
+ export { type ColorScale, type ColorsAPI, FrameworkConfig, type InteractionState, InteractiveWrapper, type InteractiveWrapperProps, ParsedClass, ResolvedConfig, ResolvedStyle, StyleValue, type StyledProps, ThemeConfig, ThemeContext, type ThemeContextValue, ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, type ToggleVariant, buildConfig, cx, defaultColors, defaultTheme, flatten, getConfig, initConfig, kb, parseClass, parseClasses, resolve, styled, updateConfig, useBreakpoint, useColors, useGlobalDarkMode, useIsDark, useResolvedStyle, useResponsive, useStyles, useTheme, wrapColors };