@choice-ui/react 2.0.1 → 2.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/dist/components/button/dist/index.js +7 -0
  2. package/dist/components/checkbox/dist/index.d.ts +10 -1
  3. package/dist/components/checkbox/dist/index.js +49 -5
  4. package/dist/components/colors/dist/index.d.ts +39 -6
  5. package/dist/components/colors/src/color-image-paint/color-image-paint.js +2 -2
  6. package/dist/components/command/dist/index.d.ts +13 -0
  7. package/dist/components/dropdown/dist/index.d.ts +6 -0
  8. package/dist/components/dropdown/dist/index.js +20 -10
  9. package/dist/components/emoji-picker/dist/index.d.ts +29 -1
  10. package/dist/components/emoji-picker/dist/index.js +144 -42
  11. package/dist/components/form/src/adapters/range-adapter.js +2 -2
  12. package/dist/components/icon-button/dist/index.d.ts +1 -1
  13. package/dist/components/icon-button/dist/index.js +39 -0
  14. package/dist/components/list/dist/index.d.ts +1 -1
  15. package/dist/components/md-render/src/md-render.js +4 -0
  16. package/dist/components/md-render/src/types.d.ts +3 -0
  17. package/dist/components/menus/dist/index.d.ts +5 -0
  18. package/dist/components/menus/dist/index.js +32 -3
  19. package/dist/components/numeric-input/dist/index.d.ts +2 -0
  20. package/dist/components/numeric-input/dist/index.js +64 -24
  21. package/dist/components/numeric-input/src/hooks/use-input-interactions.d.ts +3 -1
  22. package/dist/components/numeric-input/src/hooks/use-input-interactions.js +7 -3
  23. package/dist/components/numeric-input/src/hooks/use-numeric-input.js +15 -4
  24. package/dist/components/numeric-input/src/numeric-input.js +5 -4
  25. package/dist/components/numeric-input/src/utils/value-comparator.js +1 -5
  26. package/dist/components/radio/dist/index.d.ts +9 -1
  27. package/dist/components/radio/dist/index.js +50 -6
  28. package/dist/components/range/dist/index.d.ts +276 -20
  29. package/dist/components/range/dist/index.js +1030 -602
  30. package/dist/components/scroll-area/dist/index.d.ts +4 -27
  31. package/dist/components/scroll-area/dist/index.js +96 -123
  32. package/dist/components/textarea/dist/index.js +3 -1
  33. package/dist/components/tooltip/dist/index.d.ts +2 -0
  34. package/dist/components/tooltip/dist/index.js +23 -5
  35. package/dist/components/virtual-select/dist/index.d.ts +48 -0
  36. package/package.json +19 -31
@@ -61,9 +61,9 @@ declare const ScrollArea: react.ForwardRefExoticComponent<ScrollAreaProps & reac
61
61
  };
62
62
 
63
63
  /**
64
- * Merged scroll state and visibility management hook - avoid duplicate scroll event listening
64
+ * Merged scroll state and visibility management hook
65
65
  */
66
- declare function useScrollStateAndVisibility(viewport: HTMLDivElement | null): {
66
+ declare function useScrollStateAndVisibility(viewport: HTMLDivElement | null, content: HTMLDivElement | null): {
67
67
  scrollState: ScrollState;
68
68
  isHovering: boolean;
69
69
  isScrolling: boolean;
@@ -86,7 +86,7 @@ declare function useThumbStyle(scrollState: ScrollState, orientation: "vertical"
86
86
  top?: undefined;
87
87
  };
88
88
  /**
89
- * 🚀 High-performance thumb drag hook - optimize drag responsiveness and performance
89
+ * High-performance thumb drag hook
90
90
  */
91
91
  declare function useThumbDrag(viewport: HTMLDivElement | null, scrollState: ScrollState, orientation: "vertical" | "horizontal"): {
92
92
  isDragging: boolean;
@@ -102,27 +102,4 @@ declare function useHasOverflow(scrollState: ScrollState, orientation: "vertical
102
102
  */
103
103
  declare function useScrollbarShouldShow(type: ScrollbarVisibilityType, hasOverflow: boolean, isScrolling: boolean, isHovering: boolean): boolean;
104
104
 
105
- interface PerformanceMetrics {
106
- averageFrameTime: number;
107
- droppedFrames: number;
108
- maxFrameTime: number;
109
- scrollEventFrequency: number;
110
- updateFrequency: number;
111
- }
112
- interface PerformanceMonitorOptions {
113
- enabled?: boolean;
114
- frameTimeThreshold?: number;
115
- logInterval?: number;
116
- }
117
- /**
118
- * 🔍 ScrollArea performance monitoring Hook
119
- *
120
- * Used to monitor and diagnose scroll performance issues, including:
121
- * - Frame rate monitoring
122
- * - Event frequency statistics
123
- * - Performance bottleneck detection
124
- * - Real-time performance reporting
125
- */
126
- declare function useScrollPerformanceMonitor(viewport: HTMLDivElement | null, options?: PerformanceMonitorOptions): PerformanceMetrics | null;
127
-
128
- export { ScrollArea, type ScrollAreaProps, type ScrollbarProps, type ThumbProps, useHasOverflow, useScrollPerformanceMonitor, useScrollStateAndVisibility, useScrollbarShouldShow, useThumbDrag, useThumbStyle };
105
+ export { ScrollArea, type ScrollAreaProps, type ScrollbarProps, type ThumbProps, useHasOverflow, useScrollStateAndVisibility, useScrollbarShouldShow, useThumbDrag, useThumbStyle };
@@ -1,15 +1,29 @@
1
1
  import { forwardRef, useState, useId, useMemo, createContext, useCallback, useRef, useEffect, useContext } from "react";
2
2
  import { jsx, jsxs } from "react/jsx-runtime";
3
3
  import { tcv, tcx } from "../../../shared/utils/tcx/tcx.js";
4
- var ScrollAreaContext = createContext(null);
5
- function useScrollAreaContext() {
6
- const context = useContext(ScrollAreaContext);
4
+ var ScrollAreaStateContext = createContext(null);
5
+ var ScrollAreaConfigContext = createContext(null);
6
+ var ERROR_MESSAGE = "ScrollArea compound components must be used within ScrollArea";
7
+ function useScrollAreaStateContext() {
8
+ const context = useContext(ScrollAreaStateContext);
9
+ if (!context) {
10
+ throw new Error(ERROR_MESSAGE);
11
+ }
12
+ return context;
13
+ }
14
+ function useScrollAreaConfigContext() {
15
+ const context = useContext(ScrollAreaConfigContext);
7
16
  if (!context) {
8
- throw new Error("ScrollArea compound components must be used within ScrollArea");
17
+ throw new Error(ERROR_MESSAGE);
9
18
  }
10
19
  return context;
11
20
  }
12
- function useScrollStateAndVisibility(viewport) {
21
+ function useScrollAreaContext() {
22
+ const state = useScrollAreaStateContext();
23
+ const config = useScrollAreaConfigContext();
24
+ return { ...state, ...config };
25
+ }
26
+ function useScrollStateAndVisibility(viewport, content) {
13
27
  const [scrollState, setScrollState] = useState({
14
28
  scrollLeft: 0,
15
29
  scrollTop: 0,
@@ -23,8 +37,6 @@ function useScrollStateAndVisibility(viewport) {
23
37
  const scrollTimeoutRef = useRef();
24
38
  const rafRef = useRef();
25
39
  const resizeObserverRef = useRef();
26
- const mutationObserverRef = useRef();
27
- const mutationTimeoutRef = useRef();
28
40
  const lastUpdateTimeRef = useRef(0);
29
41
  const minUpdateIntervalRef = useRef(16);
30
42
  const updateScrollState = useCallback(() => {
@@ -36,36 +48,36 @@ function useScrollStateAndVisibility(viewport) {
36
48
  cancelAnimationFrame(rafRef.current);
37
49
  }
38
50
  rafRef.current = requestAnimationFrame(() => {
51
+ rafRef.current = void 0;
39
52
  updateScrollState();
40
53
  });
41
54
  return;
42
55
  }
43
56
  if (rafRef.current) {
44
57
  cancelAnimationFrame(rafRef.current);
58
+ rafRef.current = void 0;
45
59
  }
46
- rafRef.current = requestAnimationFrame(() => {
47
- const newState = {
48
- scrollLeft: viewport.scrollLeft,
49
- scrollTop: viewport.scrollTop,
50
- scrollWidth: viewport.scrollWidth,
51
- scrollHeight: viewport.scrollHeight,
52
- clientWidth: viewport.clientWidth,
53
- clientHeight: viewport.clientHeight
54
- };
55
- setScrollState((prevState) => {
56
- const scrollLeftChanged = Math.abs(prevState.scrollLeft - newState.scrollLeft) > 0.5;
57
- const scrollTopChanged = Math.abs(prevState.scrollTop - newState.scrollTop) > 0.5;
58
- const scrollWidthChanged = prevState.scrollWidth !== newState.scrollWidth;
59
- const scrollHeightChanged = prevState.scrollHeight !== newState.scrollHeight;
60
- const clientWidthChanged = prevState.clientWidth !== newState.clientWidth;
61
- const clientHeightChanged = prevState.clientHeight !== newState.clientHeight;
62
- const hasChanges = scrollLeftChanged || scrollTopChanged || scrollWidthChanged || scrollHeightChanged || clientWidthChanged || clientHeightChanged;
63
- if (hasChanges) {
64
- lastUpdateTimeRef.current = now;
65
- return newState;
66
- }
67
- return prevState;
68
- });
60
+ const newState = {
61
+ scrollLeft: viewport.scrollLeft,
62
+ scrollTop: viewport.scrollTop,
63
+ scrollWidth: viewport.scrollWidth,
64
+ scrollHeight: viewport.scrollHeight,
65
+ clientWidth: viewport.clientWidth,
66
+ clientHeight: viewport.clientHeight
67
+ };
68
+ setScrollState((prevState) => {
69
+ const scrollLeftChanged = Math.abs(prevState.scrollLeft - newState.scrollLeft) > 0.5;
70
+ const scrollTopChanged = Math.abs(prevState.scrollTop - newState.scrollTop) > 0.5;
71
+ const scrollWidthChanged = prevState.scrollWidth !== newState.scrollWidth;
72
+ const scrollHeightChanged = prevState.scrollHeight !== newState.scrollHeight;
73
+ const clientWidthChanged = prevState.clientWidth !== newState.clientWidth;
74
+ const clientHeightChanged = prevState.clientHeight !== newState.clientHeight;
75
+ const hasChanges = scrollLeftChanged || scrollTopChanged || scrollWidthChanged || scrollHeightChanged || clientWidthChanged || clientHeightChanged;
76
+ if (hasChanges) {
77
+ lastUpdateTimeRef.current = now;
78
+ return newState;
79
+ }
80
+ return prevState;
69
81
  });
70
82
  }, [viewport]);
71
83
  const delayedUpdateScrollState = useCallback(() => {
@@ -102,54 +114,19 @@ function useScrollStateAndVisibility(viewport) {
102
114
  passive: true,
103
115
  signal,
104
116
  capture: false
105
- // Avoid unnecessary event capture
106
117
  });
107
118
  window.addEventListener("resize", handleResize, {
108
119
  passive: true,
109
120
  signal
110
121
  });
111
122
  if (window.ResizeObserver) {
112
- resizeObserverRef.current = new ResizeObserver((entries) => {
113
- for (const entry of entries) {
114
- if (entry.target === viewport) {
115
- updateScrollState();
116
- break;
117
- }
118
- }
123
+ resizeObserverRef.current = new ResizeObserver(() => {
124
+ updateScrollState();
119
125
  });
120
126
  resizeObserverRef.current.observe(viewport);
121
- }
122
- if (window.MutationObserver) {
123
- mutationObserverRef.current = new MutationObserver((mutations) => {
124
- const hasLayoutChanges = mutations.some((mutation) => {
125
- if (mutation.type === "childList") {
126
- return mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0;
127
- }
128
- if (mutation.type === "attributes") {
129
- const attr = mutation.attributeName;
130
- return attr === "style" || attr === "class";
131
- }
132
- return mutation.type === "characterData";
133
- });
134
- if (!hasLayoutChanges) return;
135
- if (mutationTimeoutRef.current) {
136
- clearTimeout(mutationTimeoutRef.current);
137
- }
138
- mutationTimeoutRef.current = window.setTimeout(() => {
139
- updateScrollState();
140
- }, 16);
141
- });
142
- mutationObserverRef.current.observe(viewport, {
143
- childList: true,
144
- subtree: true,
145
- attributes: true,
146
- attributeFilter: ["style", "class"],
147
- // Only listen to attributes that affect layout
148
- characterData: true,
149
- characterDataOldValue: false,
150
- // No need for old value, improve performance
151
- attributeOldValue: false
152
- });
127
+ if (content) {
128
+ resizeObserverRef.current.observe(content);
129
+ }
153
130
  }
154
131
  delayedUpdateScrollState();
155
132
  return () => {
@@ -158,10 +135,6 @@ function useScrollStateAndVisibility(viewport) {
158
135
  clearTimeout(scrollTimeoutRef.current);
159
136
  scrollTimeoutRef.current = void 0;
160
137
  }
161
- if (mutationTimeoutRef.current) {
162
- clearTimeout(mutationTimeoutRef.current);
163
- mutationTimeoutRef.current = void 0;
164
- }
165
138
  if (rafRef.current) {
166
139
  cancelAnimationFrame(rafRef.current);
167
140
  rafRef.current = void 0;
@@ -170,12 +143,8 @@ function useScrollStateAndVisibility(viewport) {
170
143
  resizeObserverRef.current.disconnect();
171
144
  resizeObserverRef.current = void 0;
172
145
  }
173
- if (mutationObserverRef.current) {
174
- mutationObserverRef.current.disconnect();
175
- mutationObserverRef.current = void 0;
176
- }
177
146
  };
178
- }, [viewport, handleScroll, delayedUpdateScrollState]);
147
+ }, [viewport, content, handleScroll, delayedUpdateScrollState, updateScrollState]);
179
148
  const handleMouseEnter = useCallback(() => setIsHovering(true), []);
180
149
  const handleMouseLeave = useCallback(() => setIsHovering(false), []);
181
150
  return {
@@ -229,16 +198,13 @@ function useThumbDrag(viewport, scrollState, orientation) {
229
198
  const isDragging = useRef(false);
230
199
  const startPos = useRef(0);
231
200
  const startScroll = useRef(0);
232
- const rafId = useRef();
233
201
  const cleanupRef = useRef(null);
202
+ const scrollStateRef = useRef(scrollState);
203
+ scrollStateRef.current = scrollState;
234
204
  const dragContextRef = useRef(null);
235
205
  useEffect(() => {
236
206
  return () => {
237
207
  isDragging.current = false;
238
- if (rafId.current) {
239
- cancelAnimationFrame(rafId.current);
240
- rafId.current = void 0;
241
- }
242
208
  if (cleanupRef.current) {
243
209
  cleanupRef.current();
244
210
  cleanupRef.current = null;
@@ -248,13 +214,21 @@ function useThumbDrag(viewport, scrollState, orientation) {
248
214
  const handleMouseDown = useCallback(
249
215
  (e) => {
250
216
  if (!viewport) return;
217
+ const currentScrollState = scrollStateRef.current;
251
218
  const target = e.currentTarget;
252
219
  const scrollbar = target.closest('[role="scrollbar"]');
253
220
  if (!scrollbar) return;
254
221
  const scrollbarRect = scrollbar.getBoundingClientRect();
255
- const scrollableRange = orientation === "vertical" ? Math.max(0, scrollState.scrollHeight - scrollState.clientHeight) : Math.max(0, scrollState.scrollWidth - scrollState.clientWidth);
222
+ const scrollableRange = orientation === "vertical" ? Math.max(0, currentScrollState.scrollHeight - currentScrollState.clientHeight) : Math.max(0, currentScrollState.scrollWidth - currentScrollState.clientWidth);
256
223
  const scrollbarRange = orientation === "vertical" ? scrollbarRect.height : scrollbarRect.width;
257
224
  if (scrollableRange <= 0 || scrollbarRange <= 0) return;
225
+ const thumbFraction = Math.max(
226
+ 0.1,
227
+ orientation === "vertical" ? currentScrollState.clientHeight / currentScrollState.scrollHeight : currentScrollState.clientWidth / currentScrollState.scrollWidth
228
+ );
229
+ const thumbSizePixels = scrollbarRange * thumbFraction;
230
+ const effectiveTrackRange = scrollbarRange - thumbSizePixels;
231
+ if (effectiveTrackRange <= 0) return;
258
232
  dragContextRef.current = {
259
233
  scrollbarRect,
260
234
  scrollableRange,
@@ -262,34 +236,26 @@ function useThumbDrag(viewport, scrollState, orientation) {
262
236
  };
263
237
  isDragging.current = true;
264
238
  startPos.current = orientation === "vertical" ? e.clientY : e.clientX;
265
- startScroll.current = orientation === "vertical" ? scrollState.scrollTop : scrollState.scrollLeft;
266
- const scrollRatio = scrollableRange / scrollbarRange;
239
+ startScroll.current = orientation === "vertical" ? currentScrollState.scrollTop : currentScrollState.scrollLeft;
240
+ const scrollRatio = scrollableRange / effectiveTrackRange;
267
241
  const handleMouseMove = (e2) => {
268
242
  if (!isDragging.current || !viewport || !dragContextRef.current) return;
269
- if (rafId.current) {
270
- cancelAnimationFrame(rafId.current);
243
+ const currentPos = orientation === "vertical" ? e2.clientY : e2.clientX;
244
+ const delta = currentPos - startPos.current;
245
+ const scrollDelta = delta * scrollRatio;
246
+ const newScrollValue = Math.max(
247
+ 0,
248
+ Math.min(startScroll.current + scrollDelta, dragContextRef.current.scrollableRange)
249
+ );
250
+ if (orientation === "vertical") {
251
+ viewport.scrollTop = newScrollValue;
252
+ } else {
253
+ viewport.scrollLeft = newScrollValue;
271
254
  }
272
- rafId.current = requestAnimationFrame(() => {
273
- const currentPos = orientation === "vertical" ? e2.clientY : e2.clientX;
274
- const delta = currentPos - startPos.current;
275
- const scrollDelta = delta * scrollRatio;
276
- const newScrollValue = Math.max(
277
- 0,
278
- Math.min(startScroll.current + scrollDelta, dragContextRef.current.scrollableRange)
279
- );
280
- if (orientation === "vertical") {
281
- viewport.scrollTop = newScrollValue;
282
- } else {
283
- viewport.scrollLeft = newScrollValue;
284
- }
285
- });
286
255
  };
287
256
  const handleMouseUp = () => {
288
257
  isDragging.current = false;
289
258
  dragContextRef.current = null;
290
- if (rafId.current) {
291
- cancelAnimationFrame(rafId.current);
292
- }
293
259
  document.removeEventListener("mousemove", handleMouseMove);
294
260
  document.removeEventListener("mouseup", handleMouseUp);
295
261
  cleanupRef.current = null;
@@ -303,7 +269,7 @@ function useThumbDrag(viewport, scrollState, orientation) {
303
269
  document.addEventListener("mouseup", handleMouseUp, { passive: true });
304
270
  e.preventDefault();
305
271
  },
306
- [viewport, orientation, scrollState]
272
+ [viewport, orientation]
307
273
  );
308
274
  return {
309
275
  isDragging: isDragging.current,
@@ -609,6 +575,8 @@ var ScrollAreaScrollbar = forwardRef(
609
575
  scrollbarXId,
610
576
  scrollbarYId
611
577
  } = useScrollAreaContext();
578
+ const scrollStateRef = useRef(scrollState);
579
+ scrollStateRef.current = scrollState;
612
580
  const hasOverflow = useHasOverflow(scrollState, orientation);
613
581
  const shouldShow = useScrollbarShouldShow(type, hasOverflow, isScrolling, isHovering);
614
582
  const scrollPercentage = useMemo(() => {
@@ -619,15 +587,23 @@ var ScrollAreaScrollbar = forwardRef(
619
587
  const maxScroll = scrollState.scrollWidth - scrollState.clientWidth;
620
588
  return maxScroll > 0 ? Math.round(scrollState.scrollLeft / maxScroll * 100) : 0;
621
589
  }
622
- }, [scrollState, orientation]);
590
+ }, [
591
+ orientation,
592
+ scrollState.scrollTop,
593
+ scrollState.scrollLeft,
594
+ scrollState.scrollHeight,
595
+ scrollState.clientHeight,
596
+ scrollState.scrollWidth,
597
+ scrollState.clientWidth
598
+ ]);
623
599
  const handleTrackClick = useCallback(
624
600
  (e) => {
625
601
  if (!viewport) return;
626
602
  if (e.target === e.currentTarget) {
627
- handleScrollbarTrackClick(e, viewport, scrollState, orientation);
603
+ handleScrollbarTrackClick(e, viewport, scrollStateRef.current, orientation);
628
604
  }
629
605
  },
630
- [viewport, scrollState, orientation]
606
+ [viewport, orientation]
631
607
  );
632
608
  const tv = useMemo(
633
609
  () => ScrollTv({
@@ -746,7 +722,7 @@ var ScrollAreaRoot = forwardRef(
746
722
  const viewportId = `scroll-viewport${reactId}`;
747
723
  const scrollbarXId = `scroll-x${reactId}`;
748
724
  const scrollbarYId = `scroll-y${reactId}`;
749
- const { scrollState, isHovering, isScrolling, handleMouseEnter, handleMouseLeave } = useScrollStateAndVisibility(viewport);
725
+ const { scrollState, isHovering, isScrolling, handleMouseEnter, handleMouseLeave } = useScrollStateAndVisibility(viewport, content);
750
726
  const staticConfig = useMemo(
751
727
  () => ({
752
728
  orientation,
@@ -757,11 +733,14 @@ var ScrollAreaRoot = forwardRef(
757
733
  }),
758
734
  [orientation, scrollbarMode, hoverBoundary, variant, type]
759
735
  );
760
- const contextValue = useMemo(
736
+ const stateValue = useMemo(
737
+ () => ({ scrollState, isHovering, isScrolling }),
738
+ [scrollState, isHovering, isScrolling]
739
+ );
740
+ const configValue = useMemo(
761
741
  () => ({
762
742
  content,
763
743
  orientation: staticConfig.orientation,
764
- scrollState,
765
744
  scrollbarMode: staticConfig.scrollbarMode,
766
745
  hoverBoundary: staticConfig.hoverBoundary,
767
746
  scrollbarX,
@@ -777,9 +756,6 @@ var ScrollAreaRoot = forwardRef(
777
756
  variant: staticConfig.variant,
778
757
  viewport,
779
758
  type: staticConfig.type,
780
- isHovering,
781
- isScrolling,
782
- // Add ID-related values
783
759
  rootId,
784
760
  viewportId,
785
761
  scrollbarXId,
@@ -787,14 +763,11 @@ var ScrollAreaRoot = forwardRef(
787
763
  }),
788
764
  [
789
765
  content,
790
- scrollState,
791
766
  scrollbarX,
792
767
  scrollbarY,
793
768
  thumbX,
794
769
  thumbY,
795
770
  viewport,
796
- isHovering,
797
- isScrolling,
798
771
  staticConfig,
799
772
  rootId,
800
773
  viewportId,
@@ -859,7 +832,7 @@ var ScrollAreaRoot = forwardRef(
859
832
  }
860
833
  return scrollbars;
861
834
  }, [orientation]);
862
- return /* @__PURE__ */ jsx(ScrollAreaContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
835
+ return /* @__PURE__ */ jsx(ScrollAreaConfigContext.Provider, { value: configValue, children: /* @__PURE__ */ jsx(ScrollAreaStateContext.Provider, { value: stateValue, children: /* @__PURE__ */ jsxs(
863
836
  "div",
864
837
  {
865
838
  ref,
@@ -875,13 +848,13 @@ var ScrollAreaRoot = forwardRef(
875
848
  autoScrollbars
876
849
  ]
877
850
  }
878
- ) });
851
+ ) }) });
879
852
  }
880
853
  );
881
854
  ScrollAreaRoot.displayName = "ScrollArea.Root";
882
855
  var ScrollAreaViewport = forwardRef(
883
856
  ({ className, children, ...props }, ref) => {
884
- const { setViewport, orientation, viewportId } = useScrollAreaContext();
857
+ const { setViewport, orientation, viewportId } = useScrollAreaConfigContext();
885
858
  const scrollClass = useMemo(() => {
886
859
  switch (orientation) {
887
860
  case "horizontal":
@@ -918,7 +891,7 @@ var ScrollAreaViewport = forwardRef(
918
891
  ScrollAreaViewport.displayName = "ScrollArea.Viewport";
919
892
  var ScrollAreaContent = forwardRef(
920
893
  ({ as: As = "div", className, children, ...props }, ref) => {
921
- const { setContent, orientation } = useScrollAreaContext();
894
+ const { setContent, orientation } = useScrollAreaConfigContext();
922
895
  const setRef = useCallback(
923
896
  (node) => {
924
897
  setContent(node);
@@ -507,7 +507,9 @@ var TextareaTv = tcv({
507
507
  container: "bg-gray-700",
508
508
  textarea: "text-white placeholder:text-white/40"
509
509
  },
510
- reset: {}
510
+ reset: {
511
+ container: "rounded-none border-0"
512
+ }
511
513
  },
512
514
  resize: {
513
515
  auto: {},
@@ -10,6 +10,7 @@ interface TooltipProps {
10
10
  className?: string;
11
11
  content?: React.ReactNode;
12
12
  disabled?: boolean;
13
+ interactive?: boolean;
13
14
  offset?: number;
14
15
  onOpenChange?: (open: boolean) => void;
15
16
  open?: boolean;
@@ -23,6 +24,7 @@ interface TooltipProps {
23
24
  withArrow?: boolean;
24
25
  }
25
26
  interface TooltipContentProps extends React.HTMLProps<HTMLDivElement> {
27
+ interactive?: boolean;
26
28
  portalId?: string;
27
29
  variant?: "default" | "light";
28
30
  withArrow?: boolean;
@@ -128,7 +128,15 @@ var TooltipArrow = forwardRef(function TooltipArrow2({ className, variant = "def
128
128
  });
129
129
  var TooltipContent = forwardRef(
130
130
  function TooltipContent2(props, propRef) {
131
- const { className, withArrow = true, variant = "default", children, portalId, ...rest } = props;
131
+ const {
132
+ className,
133
+ withArrow = true,
134
+ variant = "default",
135
+ children,
136
+ portalId,
137
+ interactive = true,
138
+ ...rest
139
+ } = props;
132
140
  const state = useTooltipState();
133
141
  const ref = useMergeRefs([state.refs.setFloating, propRef]);
134
142
  const { isInstantPhase, currentId } = useDelayGroup(state.context, {
@@ -157,19 +165,27 @@ var TooltipContent = forwardRef(
157
165
  });
158
166
  const tv = useMemo(() => tooltipContentVariants({ variant }), [variant]);
159
167
  if (state.disabled || !isMounted) return null;
168
+ const floatingProps = state.getFloatingProps(rest);
160
169
  return /* @__PURE__ */ jsx(FloatingPortal, { id: portalId, children: /* @__PURE__ */ jsx(
161
170
  "div",
162
171
  {
163
172
  ref,
164
- style: state.floatingStyles,
165
- ...state.getFloatingProps(rest),
173
+ style: {
174
+ ...state.floatingStyles,
175
+ pointerEvents: interactive ? void 0 : "none"
176
+ },
177
+ ...floatingProps,
166
178
  className: "z-tooltip",
167
179
  children: /* @__PURE__ */ jsxs(
168
180
  "div",
169
181
  {
170
182
  className: tcx(tv.root({ className })),
171
183
  "data-state": state.open ? "open" : "closed",
172
- style: styles,
184
+ style: {
185
+ ...styles,
186
+ pointerEvents: interactive ? void 0 : "none",
187
+ cursor: interactive ? void 0 : "default"
188
+ },
173
189
  children: [
174
190
  children,
175
191
  withArrow && /* @__PURE__ */ jsx(TooltipArrow, { variant })
@@ -272,7 +288,8 @@ function TooltipRoot(props) {
272
288
  withArrow = true,
273
289
  variant = "default",
274
290
  offset: offset2 = 8,
275
- portalId = PORTAL_ROOT_ID
291
+ portalId = PORTAL_ROOT_ID,
292
+ interactive = true
276
293
  } = props;
277
294
  const tooltip = useTooltip({
278
295
  placement,
@@ -291,6 +308,7 @@ function TooltipRoot(props) {
291
308
  variant,
292
309
  portalId,
293
310
  className,
311
+ interactive,
294
312
  children: [
295
313
  content,
296
314
  shortcut && /* @__PURE__ */ jsx(
@@ -0,0 +1,48 @@
1
+ import { MenuContextContent, MenuDivider, MenuEmpty, MenuContextItem, MenuSearch, MenuTrigger, MenuValue } from '../../menus/src';
2
+ import { FloatingFocusManagerProps } from '@floating-ui/react';
3
+ import { default as React } from 'react';
4
+ interface VirtualSelectOption<T = unknown> {
5
+ value: string;
6
+ label: string;
7
+ disabled?: boolean;
8
+ data?: T;
9
+ }
10
+ interface VirtualSelectProps<T = unknown> {
11
+ className?: string;
12
+ closeOnEscape?: boolean;
13
+ disabled?: boolean;
14
+ emptyText?: string;
15
+ focusManagerProps?: Partial<FloatingFocusManagerProps>;
16
+ matchTriggerWidth?: boolean;
17
+ maxHeight?: number;
18
+ onChange?: (value: string) => void;
19
+ onOpenChange?: (open: boolean) => void;
20
+ open?: boolean;
21
+ options: VirtualSelectOption<T>[];
22
+ overscan?: number;
23
+ placeholder?: string;
24
+ placement?: "bottom-start" | "bottom-end";
25
+ portalId?: string;
26
+ readOnly?: boolean;
27
+ renderOption?: (option: VirtualSelectOption<T>, isSelected: boolean) => React.ReactNode;
28
+ renderValue?: (option: VirtualSelectOption<T> | null) => React.ReactNode;
29
+ root?: HTMLElement | null;
30
+ searchPlaceholder?: string;
31
+ size?: "default" | "large";
32
+ value?: string | null;
33
+ variant?: "default" | "light" | "reset";
34
+ }
35
+ interface VirtualSelectComponentType {
36
+ <T = unknown>(props: VirtualSelectProps<T>): React.ReactElement | null;
37
+ displayName?: string;
38
+ Content: typeof MenuContextContent;
39
+ Divider: typeof MenuDivider;
40
+ Empty: typeof MenuEmpty;
41
+ Item: typeof MenuContextItem;
42
+ Search: typeof MenuSearch;
43
+ Trigger: typeof MenuTrigger;
44
+ Value: typeof MenuValue;
45
+ }
46
+ declare const VirtualSelect: VirtualSelectComponentType;
47
+
48
+ export { VirtualSelect, type VirtualSelectOption, type VirtualSelectProps };