@choice-ui/react 1.9.7 → 1.9.8

package/dist/components/scroll-area/dist/index.d.ts

@@ -61,9 +61,9 @@ declare const ScrollArea: react.ForwardRefExoticComponent<ScrollAreaProps & reac
 };
 
 /**
- * Merged scroll state and visibility management hook
+ * Merged scroll state and visibility management hook - avoid duplicate scroll event listening
  */
-declare function useScrollStateAndVisibility(viewport: HTMLDivElement | null, content: HTMLDivElement | null): {
+declare function useScrollStateAndVisibility(viewport: HTMLDivElement | null): {
     scrollState: ScrollState;
     isHovering: boolean;
     isScrolling: boolean;
@@ -86,7 +86,7 @@ declare function useThumbStyle(scrollState: ScrollState, orientation: "vertical"
     top?: undefined;
 };
 /**
- * High-performance thumb drag hook
+ * 🚀 High-performance thumb drag hook - optimize drag responsiveness and performance
  */
 declare function useThumbDrag(viewport: HTMLDivElement | null, scrollState: ScrollState, orientation: "vertical" | "horizontal"): {
     isDragging: boolean;
@@ -102,4 +102,27 @@ declare function useHasOverflow(scrollState: ScrollState, orientation: "vertical
  */
 declare function useScrollbarShouldShow(type: ScrollbarVisibilityType, hasOverflow: boolean, isScrolling: boolean, isHovering: boolean): boolean;
 
-export { ScrollArea, type ScrollAreaProps, type ScrollbarProps, type ThumbProps, useHasOverflow, useScrollStateAndVisibility, useScrollbarShouldShow, useThumbDrag, useThumbStyle };
+interface PerformanceMetrics {
+    averageFrameTime: number;
+    droppedFrames: number;
+    maxFrameTime: number;
+    scrollEventFrequency: number;
+    updateFrequency: number;
+}
+interface PerformanceMonitorOptions {
+    enabled?: boolean;
+    frameTimeThreshold?: number;
+    logInterval?: number;
+}
+/**
+ * 🔍 ScrollArea performance monitoring Hook
+ *
+ * Used to monitor and diagnose scroll performance issues, including:
+ * - Frame rate monitoring
+ * - Event frequency statistics
+ * - Performance bottleneck detection
+ * - Real-time performance reporting
+ */
+declare function useScrollPerformanceMonitor(viewport: HTMLDivElement | null, options?: PerformanceMonitorOptions): PerformanceMetrics | null;
+
+export { ScrollArea, type ScrollAreaProps, type ScrollbarProps, type ThumbProps, useHasOverflow, useScrollPerformanceMonitor, useScrollStateAndVisibility, useScrollbarShouldShow, useThumbDrag, useThumbStyle };

package/dist/components/scroll-area/dist/index.js

@@ -1,29 +1,15 @@
 import { forwardRef, useState, useId, useMemo, createContext, useCallback, useRef, useEffect, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { tcv, tcx } from "../../../shared/utils/tcx/tcx.js";
-var ScrollAreaStateContext = createContext(null);
-var ScrollAreaConfigContext = createContext(null);
-var ERROR_MESSAGE = "ScrollArea compound components must be used within ScrollArea";
-function useScrollAreaStateContext() {
-  const context = useContext(ScrollAreaStateContext);
-  if (!context) {
-    throw new Error(ERROR_MESSAGE);
-  }
-  return context;
-}
-function useScrollAreaConfigContext() {
-  const context = useContext(ScrollAreaConfigContext);
+var ScrollAreaContext = createContext(null);
+function useScrollAreaContext() {
+  const context = useContext(ScrollAreaContext);
   if (!context) {
-    throw new Error(ERROR_MESSAGE);
+    throw new Error("ScrollArea compound components must be used within ScrollArea");
   }
   return context;
 }
-function useScrollAreaContext() {
-  const state = useScrollAreaStateContext();
-  const config = useScrollAreaConfigContext();
-  return { ...state, ...config };
-}
-function useScrollStateAndVisibility(viewport, content) {
+function useScrollStateAndVisibility(viewport) {
   const [scrollState, setScrollState] = useState({
     scrollLeft: 0,
     scrollTop: 0,
@@ -37,6 +23,8 @@ function useScrollStateAndVisibility(viewport, content) {
   const scrollTimeoutRef = useRef();
   const rafRef = useRef();
   const resizeObserverRef = useRef();
+  const mutationObserverRef = useRef();
+  const mutationTimeoutRef = useRef();
   const lastUpdateTimeRef = useRef(0);
   const minUpdateIntervalRef = useRef(16);
   const updateScrollState = useCallback(() => {
@@ -48,36 +36,36 @@ function useScrollStateAndVisibility(viewport, content) {
         cancelAnimationFrame(rafRef.current);
       }
       rafRef.current = requestAnimationFrame(() => {
-        rafRef.current = void 0;
         updateScrollState();
       });
       return;
     }
     if (rafRef.current) {
       cancelAnimationFrame(rafRef.current);
-      rafRef.current = void 0;
     }
-    const newState = {
-      scrollLeft: viewport.scrollLeft,
-      scrollTop: viewport.scrollTop,
-      scrollWidth: viewport.scrollWidth,
-      scrollHeight: viewport.scrollHeight,
-      clientWidth: viewport.clientWidth,
-      clientHeight: viewport.clientHeight
-    };
-    setScrollState((prevState) => {
-      const scrollLeftChanged = Math.abs(prevState.scrollLeft - newState.scrollLeft) > 0.5;
-      const scrollTopChanged = Math.abs(prevState.scrollTop - newState.scrollTop) > 0.5;
-      const scrollWidthChanged = prevState.scrollWidth !== newState.scrollWidth;
-      const scrollHeightChanged = prevState.scrollHeight !== newState.scrollHeight;
-      const clientWidthChanged = prevState.clientWidth !== newState.clientWidth;
-      const clientHeightChanged = prevState.clientHeight !== newState.clientHeight;
-      const hasChanges = scrollLeftChanged || scrollTopChanged || scrollWidthChanged || scrollHeightChanged || clientWidthChanged || clientHeightChanged;
-      if (hasChanges) {
-        lastUpdateTimeRef.current = now;
-        return newState;
-      }
-      return prevState;
+    rafRef.current = requestAnimationFrame(() => {
+      const newState = {
+        scrollLeft: viewport.scrollLeft,
+        scrollTop: viewport.scrollTop,
+        scrollWidth: viewport.scrollWidth,
+        scrollHeight: viewport.scrollHeight,
+        clientWidth: viewport.clientWidth,
+        clientHeight: viewport.clientHeight
+      };
+      setScrollState((prevState) => {
+        const scrollLeftChanged = Math.abs(prevState.scrollLeft - newState.scrollLeft) > 0.5;
+        const scrollTopChanged = Math.abs(prevState.scrollTop - newState.scrollTop) > 0.5;
+        const scrollWidthChanged = prevState.scrollWidth !== newState.scrollWidth;
+        const scrollHeightChanged = prevState.scrollHeight !== newState.scrollHeight;
+        const clientWidthChanged = prevState.clientWidth !== newState.clientWidth;
+        const clientHeightChanged = prevState.clientHeight !== newState.clientHeight;
+        const hasChanges = scrollLeftChanged || scrollTopChanged || scrollWidthChanged || scrollHeightChanged || clientWidthChanged || clientHeightChanged;
+        if (hasChanges) {
+          lastUpdateTimeRef.current = now;
+          return newState;
+        }
+        return prevState;
+      });
     });
   }, [viewport]);
   const delayedUpdateScrollState = useCallback(() => {
@@ -114,19 +102,54 @@ function useScrollStateAndVisibility(viewport, content) {
       passive: true,
       signal,
       capture: false
+      // Avoid unnecessary event capture
     });
     window.addEventListener("resize", handleResize, {
       passive: true,
       signal
     });
     if (window.ResizeObserver) {
-      resizeObserverRef.current = new ResizeObserver(() => {
-        updateScrollState();
+      resizeObserverRef.current = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          if (entry.target === viewport) {
+            updateScrollState();
+            break;
+          }
+        }
       });
       resizeObserverRef.current.observe(viewport);
-      if (content) {
-        resizeObserverRef.current.observe(content);
-      }
+    }
+    if (window.MutationObserver) {
+      mutationObserverRef.current = new MutationObserver((mutations) => {
+        const hasLayoutChanges = mutations.some((mutation) => {
+          if (mutation.type === "childList") {
+            return mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0;
+          }
+          if (mutation.type === "attributes") {
+            const attr = mutation.attributeName;
+            return attr === "style" || attr === "class";
+          }
+          return mutation.type === "characterData";
+        });
+        if (!hasLayoutChanges) return;
+        if (mutationTimeoutRef.current) {
+          clearTimeout(mutationTimeoutRef.current);
+        }
+        mutationTimeoutRef.current = window.setTimeout(() => {
+          updateScrollState();
+        }, 16);
+      });
+      mutationObserverRef.current.observe(viewport, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ["style", "class"],
+        // Only listen to attributes that affect layout
+        characterData: true,
+        characterDataOldValue: false,
+        // No need for old value, improve performance
+        attributeOldValue: false
+      });
     }
     delayedUpdateScrollState();
     return () => {
@@ -135,6 +158,10 @@ function useScrollStateAndVisibility(viewport, content) {
         clearTimeout(scrollTimeoutRef.current);
         scrollTimeoutRef.current = void 0;
       }
+      if (mutationTimeoutRef.current) {
+        clearTimeout(mutationTimeoutRef.current);
+        mutationTimeoutRef.current = void 0;
+      }
       if (rafRef.current) {
         cancelAnimationFrame(rafRef.current);
         rafRef.current = void 0;
@@ -143,8 +170,12 @@ function useScrollStateAndVisibility(viewport, content) {
         resizeObserverRef.current.disconnect();
         resizeObserverRef.current = void 0;
       }
+      if (mutationObserverRef.current) {
+        mutationObserverRef.current.disconnect();
+        mutationObserverRef.current = void 0;
+      }
     };
-  }, [viewport, content, handleScroll, delayedUpdateScrollState, updateScrollState]);
+  }, [viewport, handleScroll, delayedUpdateScrollState]);
   const handleMouseEnter = useCallback(() => setIsHovering(true), []);
   const handleMouseLeave = useCallback(() => setIsHovering(false), []);
   return {
@@ -198,13 +229,16 @@ function useThumbDrag(viewport, scrollState, orientation) {
   const isDragging = useRef(false);
   const startPos = useRef(0);
   const startScroll = useRef(0);
+  const rafId = useRef();
   const cleanupRef = useRef(null);
-  const scrollStateRef = useRef(scrollState);
-  scrollStateRef.current = scrollState;
   const dragContextRef = useRef(null);
   useEffect(() => {
     return () => {
       isDragging.current = false;
+      if (rafId.current) {
+        cancelAnimationFrame(rafId.current);
+        rafId.current = void 0;
+      }
       if (cleanupRef.current) {
         cleanupRef.current();
         cleanupRef.current = null;
@@ -214,21 +248,13 @@ function useThumbDrag(viewport, scrollState, orientation) {
   const handleMouseDown = useCallback(
     (e) => {
       if (!viewport) return;
-      const currentScrollState = scrollStateRef.current;
       const target = e.currentTarget;
       const scrollbar = target.closest('[role="scrollbar"]');
       if (!scrollbar) return;
       const scrollbarRect = scrollbar.getBoundingClientRect();
-      const scrollableRange = orientation === "vertical" ? Math.max(0, currentScrollState.scrollHeight - currentScrollState.clientHeight) : Math.max(0, currentScrollState.scrollWidth - currentScrollState.clientWidth);
+      const scrollableRange = orientation === "vertical" ? Math.max(0, scrollState.scrollHeight - scrollState.clientHeight) : Math.max(0, scrollState.scrollWidth - scrollState.clientWidth);
       const scrollbarRange = orientation === "vertical" ? scrollbarRect.height : scrollbarRect.width;
       if (scrollableRange <= 0 || scrollbarRange <= 0) return;
-      const thumbFraction = Math.max(
-        0.1,
-        orientation === "vertical" ? currentScrollState.clientHeight / currentScrollState.scrollHeight : currentScrollState.clientWidth / currentScrollState.scrollWidth
-      );
-      const thumbSizePixels = scrollbarRange * thumbFraction;
-      const effectiveTrackRange = scrollbarRange - thumbSizePixels;
-      if (effectiveTrackRange <= 0) return;
       dragContextRef.current = {
         scrollbarRect,
         scrollableRange,
@@ -236,26 +262,34 @@ function useThumbDrag(viewport, scrollState, orientation) {
       };
       isDragging.current = true;
       startPos.current = orientation === "vertical" ? e.clientY : e.clientX;
-      startScroll.current = orientation === "vertical" ? currentScrollState.scrollTop : currentScrollState.scrollLeft;
-      const scrollRatio = scrollableRange / effectiveTrackRange;
+      startScroll.current = orientation === "vertical" ? scrollState.scrollTop : scrollState.scrollLeft;
+      const scrollRatio = scrollableRange / scrollbarRange;
       const handleMouseMove = (e2) => {
         if (!isDragging.current || !viewport || !dragContextRef.current) return;
-        const currentPos = orientation === "vertical" ? e2.clientY : e2.clientX;
-        const delta = currentPos - startPos.current;
-        const scrollDelta = delta * scrollRatio;
-        const newScrollValue = Math.max(
-          0,
-          Math.min(startScroll.current + scrollDelta, dragContextRef.current.scrollableRange)
-        );
-        if (orientation === "vertical") {
-          viewport.scrollTop = newScrollValue;
-        } else {
-          viewport.scrollLeft = newScrollValue;
+        if (rafId.current) {
+          cancelAnimationFrame(rafId.current);
         }
+        rafId.current = requestAnimationFrame(() => {
+          const currentPos = orientation === "vertical" ? e2.clientY : e2.clientX;
+          const delta = currentPos - startPos.current;
+          const scrollDelta = delta * scrollRatio;
+          const newScrollValue = Math.max(
+            0,
+            Math.min(startScroll.current + scrollDelta, dragContextRef.current.scrollableRange)
+          );
+          if (orientation === "vertical") {
+            viewport.scrollTop = newScrollValue;
+          } else {
+            viewport.scrollLeft = newScrollValue;
+          }
+        });
       };
       const handleMouseUp = () => {
         isDragging.current = false;
         dragContextRef.current = null;
+        if (rafId.current) {
+          cancelAnimationFrame(rafId.current);
+        }
         document.removeEventListener("mousemove", handleMouseMove);
         document.removeEventListener("mouseup", handleMouseUp);
         cleanupRef.current = null;
@@ -269,7 +303,7 @@ function useThumbDrag(viewport, scrollState, orientation) {
       document.addEventListener("mouseup", handleMouseUp, { passive: true });
       e.preventDefault();
     },
-    [viewport, orientation]
+    [viewport, orientation, scrollState]
   );
   return {
     isDragging: isDragging.current,
@@ -575,8 +609,6 @@ var ScrollAreaScrollbar = forwardRef(
       scrollbarXId,
       scrollbarYId
     } = useScrollAreaContext();
-    const scrollStateRef = useRef(scrollState);
-    scrollStateRef.current = scrollState;
     const hasOverflow = useHasOverflow(scrollState, orientation);
     const shouldShow = useScrollbarShouldShow(type, hasOverflow, isScrolling, isHovering);
     const scrollPercentage = useMemo(() => {
@@ -587,23 +619,15 @@ var ScrollAreaScrollbar = forwardRef(
         const maxScroll = scrollState.scrollWidth - scrollState.clientWidth;
         return maxScroll > 0 ? Math.round(scrollState.scrollLeft / maxScroll * 100) : 0;
       }
-    }, [
-      orientation,
-      scrollState.scrollTop,
-      scrollState.scrollLeft,
-      scrollState.scrollHeight,
-      scrollState.clientHeight,
-      scrollState.scrollWidth,
-      scrollState.clientWidth
-    ]);
+    }, [scrollState, orientation]);
     const handleTrackClick = useCallback(
       (e) => {
         if (!viewport) return;
         if (e.target === e.currentTarget) {
-          handleScrollbarTrackClick(e, viewport, scrollStateRef.current, orientation);
+          handleScrollbarTrackClick(e, viewport, scrollState, orientation);
         }
       },
-      [viewport, orientation]
+      [viewport, scrollState, orientation]
     );
     const tv = useMemo(
       () => ScrollTv({
@@ -722,7 +746,7 @@ var ScrollAreaRoot = forwardRef(
     const viewportId = `scroll-viewport${reactId}`;
     const scrollbarXId = `scroll-x${reactId}`;
     const scrollbarYId = `scroll-y${reactId}`;
-    const { scrollState, isHovering, isScrolling, handleMouseEnter, handleMouseLeave } = useScrollStateAndVisibility(viewport, content);
+    const { scrollState, isHovering, isScrolling, handleMouseEnter, handleMouseLeave } = useScrollStateAndVisibility(viewport);
     const staticConfig = useMemo(
       () => ({
         orientation,
@@ -733,14 +757,11 @@ var ScrollAreaRoot = forwardRef(
       }),
       [orientation, scrollbarMode, hoverBoundary, variant, type]
     );
-    const stateValue = useMemo(
-      () => ({ scrollState, isHovering, isScrolling }),
-      [scrollState, isHovering, isScrolling]
-    );
-    const configValue = useMemo(
+    const contextValue = useMemo(
       () => ({
         content,
         orientation: staticConfig.orientation,
+        scrollState,
         scrollbarMode: staticConfig.scrollbarMode,
         hoverBoundary: staticConfig.hoverBoundary,
         scrollbarX,
@@ -756,6 +777,9 @@ var ScrollAreaRoot = forwardRef(
         variant: staticConfig.variant,
         viewport,
         type: staticConfig.type,
+        isHovering,
+        isScrolling,
+        // Add ID-related values
         rootId,
         viewportId,
         scrollbarXId,
@@ -763,11 +787,14 @@ var ScrollAreaRoot = forwardRef(
       }),
       [
         content,
+        scrollState,
         scrollbarX,
         scrollbarY,
         thumbX,
         thumbY,
         viewport,
+        isHovering,
+        isScrolling,
         staticConfig,
         rootId,
         viewportId,
@@ -832,7 +859,7 @@ var ScrollAreaRoot = forwardRef(
       }
       return scrollbars;
     }, [orientation]);
-    return /* @__PURE__ */ jsx(ScrollAreaConfigContext.Provider, { value: configValue, children: /* @__PURE__ */ jsx(ScrollAreaStateContext.Provider, { value: stateValue, children: /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(ScrollAreaContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
@@ -848,13 +875,13 @@ var ScrollAreaRoot = forwardRef(
           autoScrollbars
         ]
       }
-    ) }) });
+    ) });
   }
 );
 ScrollAreaRoot.displayName = "ScrollArea.Root";
 var ScrollAreaViewport = forwardRef(
   ({ className, children, ...props }, ref) => {
-    const { setViewport, orientation, viewportId } = useScrollAreaConfigContext();
+    const { setViewport, orientation, viewportId } = useScrollAreaContext();
     const scrollClass = useMemo(() => {
       switch (orientation) {
         case "horizontal":
@@ -891,7 +918,7 @@ var ScrollAreaViewport = forwardRef(
 ScrollAreaViewport.displayName = "ScrollArea.Viewport";
 var ScrollAreaContent = forwardRef(
   ({ as: As = "div", className, children, ...props }, ref) => {
-    const { setContent, orientation } = useScrollAreaConfigContext();
+    const { setContent, orientation } = useScrollAreaContext();
     const setRef = useCallback(
       (node) => {
         setContent(node);

package/dist/components/separator/dist/index.d.ts

@@ -2,10 +2,17 @@ import * as react from 'react';
 
 type SeparatorOrientation = "horizontal" | "vertical";
 interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Separator direction
+     * @default "horizontal"
+     */
     orientation?: SeparatorOrientation;
+    /**
+     * Whether to use decorative separator (not read by screen readers)
+     * @default false
+     */
     decorative?: boolean;
     variant?: "default" | "light" | "dark" | "reset";
-    children?: React.ReactNode;
 }
 /**
  * Separator - Separator component

package/dist/components/splitter/dist/index.d.ts

@@ -1 +1 @@
-export { Allotment as Splitter, AllotmentHandle as SplitterHandle, AllotmentProps as SplitterProps } from 'allotment';
+export { AllotmentProps, Allotment as Splitter, AllotmentHandle as SplitterHandle } from 'allotment';

package/dist/components/text-field/dist/index.d.ts

@@ -1,4 +1,3 @@
-import { Description } from '../../description/src';
 import { InputProps } from '../../input/src';
 import { Label } from '../../label/src';
 import { default as react__default, HTMLProps, ReactNode } from 'react';
@@ -11,11 +10,13 @@ interface FieldAddonProps extends HTMLProps<HTMLDivElement> {
 }
 declare const FieldAddon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<FieldAddonProps, "ref"> & react.RefAttributes<HTMLDivElement>>>;
 
+declare const FieldDescription: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<HTMLProps<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>>;
+
 interface TextFieldProps extends Omit<InputProps, "children"> {
     children?: ReactNode;
 }
 interface TextFieldComponent extends react__default.ForwardRefExoticComponent<TextFieldProps & react__default.RefAttributes<HTMLInputElement>> {
-    Description: typeof Description;
+    Description: typeof FieldDescription;
     Label: typeof Label;
     Prefix: typeof FieldAddon;
     Suffix: typeof FieldAddon;

package/dist/components/text-field/dist/index.js

@@ -1,7 +1,6 @@
-import { Description } from "../../description/dist/index.js";
 import { Input } from "../../input/dist/index.js";
 import { Label } from "../../label/dist/index.js";
-import { forwardRef, Children, isValidElement, useId, cloneElement, memo } from "react";
+import { forwardRef, memo, Children, isValidElement, useId, cloneElement } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { tcv, tcx } from "../../../shared/utils/tcx/tcx.js";
 var FieldAddon = memo(
@@ -18,6 +17,17 @@ var FieldAddon = memo(
   })
 );
 FieldAddon.displayName = "FieldAddon";
+var FieldDescription = memo(
+  forwardRef(function FieldDescription2(props, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        ...props
+      }
+    );
+  })
+);
 var TextFieldTv = tcv({
   slots: {
     container: ["flex min-w-0 flex-col items-start gap-2"],
@@ -31,7 +41,12 @@ var TextFieldTv = tcv({
     input: "[grid-area:input]",
     prefix: "[grid-area:prefix]",
     suffix: "[grid-area:suffix]",
-    description: ""
+    description: [
+      "text-body-medium mt-1",
+      "px-0.5",
+      "break-words whitespace-pre-wrap",
+      "text-secondary-foreground"
+    ]
   },
   variants: {
     variant: {
@@ -242,7 +257,7 @@ var TextField = Object.assign(TextFieldBase, {
   Prefix: PrefixComponent,
   Suffix: SuffixComponent,
   Label,
-  Description
+  Description: FieldDescription
 });
 export {
   TextField

package/dist/components/textarea/dist/index.js

@@ -507,9 +507,7 @@ var TextareaTv = tcv({
         container: "bg-gray-700",
         textarea: "text-white placeholder:text-white/40"
       },
-      reset: {
-        container: "rounded-none border-0"
-      }
+      reset: {}
     },
     resize: {
       auto: {},

package/dist/components/tooltip/dist/index.d.ts

@@ -10,7 +10,6 @@ interface TooltipProps {
     className?: string;
     content?: React.ReactNode;
     disabled?: boolean;
-    interactive?: boolean;
     offset?: number;
     onOpenChange?: (open: boolean) => void;
     open?: boolean;
@@ -24,7 +23,6 @@ interface TooltipProps {
     withArrow?: boolean;
 }
 interface TooltipContentProps extends React.HTMLProps<HTMLDivElement> {
-    interactive?: boolean;
     portalId?: string;
     variant?: "default" | "light";
     withArrow?: boolean;

package/dist/components/tooltip/dist/index.js

@@ -128,15 +128,7 @@ var TooltipArrow = forwardRef(function TooltipArrow2({ className, variant = "def
 });
 var TooltipContent = forwardRef(
   function TooltipContent2(props, propRef) {
-    const {
-      className,
-      withArrow = true,
-      variant = "default",
-      children,
-      portalId,
-      interactive = true,
-      ...rest
-    } = props;
+    const { className, withArrow = true, variant = "default", children, portalId, ...rest } = props;
     const state = useTooltipState();
     const ref = useMergeRefs([state.refs.setFloating, propRef]);
     const { isInstantPhase, currentId } = useDelayGroup(state.context, {
@@ -165,27 +157,19 @@ var TooltipContent = forwardRef(
     });
     const tv = useMemo(() => tooltipContentVariants({ variant }), [variant]);
     if (state.disabled || !isMounted) return null;
-    const floatingProps = state.getFloatingProps(rest);
     return /* @__PURE__ */ jsx(FloatingPortal, { id: portalId, children: /* @__PURE__ */ jsx(
       "div",
       {
         ref,
-        style: {
-          ...state.floatingStyles,
-          pointerEvents: interactive ? void 0 : "none"
-        },
-        ...floatingProps,
+        style: state.floatingStyles,
+        ...state.getFloatingProps(rest),
         className: "z-tooltip",
         children: /* @__PURE__ */ jsxs(
           "div",
           {
             className: tcx(tv.root({ className })),
             "data-state": state.open ? "open" : "closed",
-            style: {
-              ...styles,
-              pointerEvents: interactive ? void 0 : "none",
-              cursor: interactive ? void 0 : "default"
-            },
+            style: styles,
             children: [
               children,
               withArrow && /* @__PURE__ */ jsx(TooltipArrow, { variant })
@@ -288,8 +272,7 @@ function TooltipRoot(props) {
     withArrow = true,
     variant = "default",
     offset: offset2 = 8,
-    portalId = PORTAL_ROOT_ID,
-    interactive = true
+    portalId = PORTAL_ROOT_ID
   } = props;
   const tooltip = useTooltip({
     placement,
@@ -308,7 +291,6 @@ function TooltipRoot(props) {
           variant,
           portalId,
           className,
-          interactive,
           children: [
             content,
             shortcut && /* @__PURE__ */ jsx(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@choice-ui/react",
-  "version": "1.9.7",
+  "version": "1.9.8",
   "description": "A desktop-first React UI component library built for professional desktop applications with comprehensive documentation",
   "sideEffects": false,
   "type": "module",