@choice-ui/react 1.9.3 → 1.9.6

package/dist/components/button/src/tv.js

@@ -246,6 +246,13 @@ const buttonTv = tcv({
       variant: "secondary",
       active: false,
       class: { button: "hover:bg-secondary-background" }
+    },
+    {
+      disabled: false,
+      loading: false,
+      variant: "secondary-destruct",
+      active: false,
+      class: { button: "hover:bg-danger-background/10" }
     }
   ],
   defaultVariants: {

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

@@ -43,6 +43,10 @@ interface CommandItemProps extends Omit<HTMLProps<HTMLDivElement>, "onSelect"> {
     keywords?: string[];
     onSelect?: (value: string) => void;
     prefixElement?: ReactNode;
+    /**
+     * When true, this item will be set as the selected item and scrolled into view.
+     */
+    selected?: boolean;
     shortcut?: {
         keys?: ReactNode;
         modifier?: KbdKey | KbdKey[] | undefined;
@@ -54,6 +58,9 @@ interface CommandItemProps extends Omit<HTMLProps<HTMLDivElement>, "onSelect"> {
 interface CommandListProps extends ScrollAreaProps {
     children: React.ReactNode;
     className?: string;
+    classNames?: {
+        content?: string;
+    };
     label?: string;
 }
 
@@ -106,6 +113,11 @@ interface CommandProps extends Omit<react__default.HTMLAttributes<HTMLDivElement
      * Event handler called when the selected item of the menu changes.
      */
     onChange?: (value: string) => void;
+    /**
+     * Optionally set to `true` to enable selection mode.
+     * When enabled, items with `selected` prop will be scrolled into view on mount.
+     */
+    selection?: boolean;
     /**
      * Optionally set to `false` to turn off the automatic filtering and sorting.
      * If `false`, you must conditionally render valid items based on the search query yourself.
@@ -140,6 +152,7 @@ type Context = {
     labelId: string;
     listId: string;
     listInnerRef: react__default.MutableRefObject<HTMLDivElement | null>;
+    selection?: boolean;
     size?: "default" | "large";
     store: Store;
     value: (id: string, value?: string, keywords?: string[]) => void;

package/dist/components/command/src/command.js

@@ -42,6 +42,7 @@ const Command = forwardRef((props, forwardedRef) => {
     onChange: onValueChange,
     filter,
     shouldFilter,
+    selection,
     loop,
     size = "default",
     variant = "default",
@@ -253,6 +254,7 @@ const Command = forwardRef((props, forwardedRef) => {
       propsRef,
       schedule,
       selectFirstItem,
+      selection,
       size,
       sort,
       state,

package/dist/components/command/src/components/command-item.d.ts

@@ -6,6 +6,10 @@ export interface CommandItemProps extends Omit<HTMLProps<HTMLDivElement>, "onSel
     keywords?: string[];
     onSelect?: (value: string) => void;
     prefixElement?: ReactNode;
+    /**
+     * When true, this item will be set as the selected item and scrolled into view.
+     */
+    selected?: boolean;
     shortcut?: {
         keys?: ReactNode;
         modifier?: KbdKey | KbdKey[] | undefined;

package/dist/components/command/src/components/command-item.js

@@ -16,6 +16,7 @@ const CommandItem = memo(
       forceMount,
       keywords,
       onSelect,
+      selected: selectedProp,
       value,
       children,
       prefixElement,
@@ -50,6 +51,11 @@ const CommandItem = memo(
     const stableKeywords = useMemo(() => keywords || [], [keywords]);
     const valueRef = useValue(id, ref, valueDeps, stableKeywords);
     const store = context.store;
+    useEffect(() => {
+      if (context.selection && selectedProp && valueRef.current) {
+        store.setState("value", valueRef.current);
+      }
+    }, [selectedProp]);
     const selected = useCommandState(
       (state) => Boolean(state.value && state.value === (valueRef == null ? void 0 : valueRef.current))
     );

package/dist/components/command/src/components/command-list.d.ts

@@ -2,6 +2,9 @@ import { ScrollAreaProps } from '../../../scroll-area/src';
 export interface CommandListProps extends ScrollAreaProps {
     children: React.ReactNode;
     className?: string;
+    classNames?: {
+        content?: string;
+    };
     label?: string;
 }
 export declare const CommandList: import('react').ForwardRefExoticComponent<CommandListProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/command/src/components/command-list.js

@@ -12,6 +12,9 @@ const CommandList = forwardRef((props, forwardedRef) => {
     label = "Suggestions",
     hoverBoundary = "none",
     scrollbarMode = "padding-b",
+    classNames = {
+      content: ""
+    },
     orientation,
     variant,
     type,
@@ -58,6 +61,7 @@ const CommandList = forwardRef((props, forwardedRef) => {
           },
           ...rest,
           className: tcx(tv.root({ className })),
+          style: context.selection ? { scrollPaddingBlock: 8 } : void 0,
           role: "listbox",
           tabIndex: -1,
           "aria-activedescendant": selectedItemId,
@@ -66,7 +70,7 @@ const CommandList = forwardRef((props, forwardedRef) => {
           children: /* @__PURE__ */ jsx(
             ScrollArea.Content,
             {
-              className: tcx(tv.content()),
+              className: tcx(tv.content(), classNames == null ? void 0 : classNames.content),
               ref: (el) => {
                 height.current = el;
                 if (context.listInnerRef) {

package/dist/components/command/src/context/create-command-context.d.ts

@@ -16,6 +16,7 @@ interface CreateCommandContextOptions {
     propsRef: React.MutableRefObject<CommandProps>;
     schedule: (id: string | number, cb: () => void) => void;
     selectFirstItem: () => void;
+    selection?: boolean;
     size?: "default" | "large";
     sort: () => void;
     state: React.MutableRefObject<State>;

package/dist/components/command/src/context/create-command-context.js

@@ -13,6 +13,7 @@ function createCommandContext(options) {
     propsRef,
     schedule,
     selectFirstItem,
+    selection,
     size,
     sort,
     state,
@@ -93,6 +94,7 @@ function createCommandContext(options) {
     inputId,
     labelId,
     listInnerRef,
+    selection,
     store,
     size,
     variant

package/dist/components/command/src/tv.js

@@ -7,7 +7,7 @@ const commandTv = tcv({
   variants: {
     variant: {
       default: {
-        root: "bg-default-background text-default-foreground",
+        root: "text-default-foreground",
         divider: "bg-default-boundary"
       },
       dark: {

package/dist/components/command/src/types.d.ts

@@ -27,6 +27,11 @@ export interface CommandProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
      * Event handler called when the selected item of the menu changes.
      */
     onChange?: (value: string) => void;
+    /**
+     * Optionally set to `true` to enable selection mode.
+     * When enabled, items with `selected` prop will be scrolled into view on mount.
+     */
+    selection?: boolean;
     /**
      * Optionally set to `false` to turn off the automatic filtering and sorting.
      * If `false`, you must conditionally render valid items based on the search query yourself.
@@ -61,6 +66,7 @@ export type Context = {
     labelId: string;
     listId: string;
     listInnerRef: React.MutableRefObject<HTMLDivElement | null>;
+    selection?: boolean;
     size?: "default" | "large";
     store: Store;
     value: (id: string, value?: string, keywords?: string[]) => void;

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 - avoid duplicate scroll event listening
+ * Merged scroll state and visibility management hook
  */
-declare function useScrollStateAndVisibility(viewport: HTMLDivElement | null): {
+declare function useScrollStateAndVisibility(viewport: HTMLDivElement | null, content: 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 - optimize drag responsiveness and performance
+ * High-performance thumb drag hook
  */
 declare function useThumbDrag(viewport: HTMLDivElement | null, scrollState: ScrollState, orientation: "vertical" | "horizontal"): {
     isDragging: boolean;
@@ -102,27 +102,4 @@ declare function useHasOverflow(scrollState: ScrollState, orientation: "vertical
  */
 declare function useScrollbarShouldShow(type: ScrollbarVisibilityType, hasOverflow: boolean, isScrolling: boolean, isHovering: boolean): boolean;
 
-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 };
+export { ScrollArea, type ScrollAreaProps, type ScrollbarProps, type ThumbProps, useHasOverflow, useScrollStateAndVisibility, useScrollbarShouldShow, useThumbDrag, useThumbStyle };

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

@@ -1,15 +1,29 @@
 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 ScrollAreaContext = createContext(null);
-function useScrollAreaContext() {
-  const context = useContext(ScrollAreaContext);
+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);
   if (!context) {
-    throw new Error("ScrollArea compound components must be used within ScrollArea");
+    throw new Error(ERROR_MESSAGE);
   }
   return context;
 }
-function useScrollStateAndVisibility(viewport) {
+function useScrollAreaContext() {
+  const state = useScrollAreaStateContext();
+  const config = useScrollAreaConfigContext();
+  return { ...state, ...config };
+}
+function useScrollStateAndVisibility(viewport, content) {
   const [scrollState, setScrollState] = useState({
     scrollLeft: 0,
     scrollTop: 0,
@@ -23,8 +37,6 @@ function useScrollStateAndVisibility(viewport) {
   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(() => {
@@ -36,36 +48,36 @@ function useScrollStateAndVisibility(viewport) {
         cancelAnimationFrame(rafRef.current);
       }
       rafRef.current = requestAnimationFrame(() => {
+        rafRef.current = void 0;
         updateScrollState();
       });
       return;
     }
     if (rafRef.current) {
       cancelAnimationFrame(rafRef.current);
+      rafRef.current = void 0;
     }
-    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;
-      });
+    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(() => {
@@ -102,54 +114,19 @@ function useScrollStateAndVisibility(viewport) {
       passive: true,
       signal,
       capture: false
-      // Avoid unnecessary event capture
     });
     window.addEventListener("resize", handleResize, {
       passive: true,
       signal
     });
     if (window.ResizeObserver) {
-      resizeObserverRef.current = new ResizeObserver((entries) => {
-        for (const entry of entries) {
-          if (entry.target === viewport) {
-            updateScrollState();
-            break;
-          }
-        }
+      resizeObserverRef.current = new ResizeObserver(() => {
+        updateScrollState();
       });
       resizeObserverRef.current.observe(viewport);
-    }
-    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
-      });
+      if (content) {
+        resizeObserverRef.current.observe(content);
+      }
     }
     delayedUpdateScrollState();
     return () => {
@@ -158,10 +135,6 @@ function useScrollStateAndVisibility(viewport) {
         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;
@@ -170,12 +143,8 @@ function useScrollStateAndVisibility(viewport) {
         resizeObserverRef.current.disconnect();
         resizeObserverRef.current = void 0;
       }
-      if (mutationObserverRef.current) {
-        mutationObserverRef.current.disconnect();
-        mutationObserverRef.current = void 0;
-      }
     };
-  }, [viewport, handleScroll, delayedUpdateScrollState]);
+  }, [viewport, content, handleScroll, delayedUpdateScrollState, updateScrollState]);
   const handleMouseEnter = useCallback(() => setIsHovering(true), []);
   const handleMouseLeave = useCallback(() => setIsHovering(false), []);
   return {
@@ -229,16 +198,13 @@ 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;
@@ -248,13 +214,21 @@ 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, scrollState.scrollHeight - scrollState.clientHeight) : Math.max(0, scrollState.scrollWidth - scrollState.clientWidth);
+      const scrollableRange = orientation === "vertical" ? Math.max(0, currentScrollState.scrollHeight - currentScrollState.clientHeight) : Math.max(0, currentScrollState.scrollWidth - currentScrollState.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,
@@ -262,34 +236,26 @@ function useThumbDrag(viewport, scrollState, orientation) {
       };
       isDragging.current = true;
       startPos.current = orientation === "vertical" ? e.clientY : e.clientX;
-      startScroll.current = orientation === "vertical" ? scrollState.scrollTop : scrollState.scrollLeft;
-      const scrollRatio = scrollableRange / scrollbarRange;
+      startScroll.current = orientation === "vertical" ? currentScrollState.scrollTop : currentScrollState.scrollLeft;
+      const scrollRatio = scrollableRange / effectiveTrackRange;
       const handleMouseMove = (e2) => {
         if (!isDragging.current || !viewport || !dragContextRef.current) return;
-        if (rafId.current) {
-          cancelAnimationFrame(rafId.current);
+        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;
         }
-        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;
@@ -303,7 +269,7 @@ function useThumbDrag(viewport, scrollState, orientation) {
       document.addEventListener("mouseup", handleMouseUp, { passive: true });
       e.preventDefault();
     },
-    [viewport, orientation, scrollState]
+    [viewport, orientation]
   );
   return {
     isDragging: isDragging.current,
@@ -609,6 +575,8 @@ 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(() => {
@@ -619,15 +587,23 @@ var ScrollAreaScrollbar = forwardRef(
         const maxScroll = scrollState.scrollWidth - scrollState.clientWidth;
         return maxScroll > 0 ? Math.round(scrollState.scrollLeft / maxScroll * 100) : 0;
       }
-    }, [scrollState, orientation]);
+    }, [
+      orientation,
+      scrollState.scrollTop,
+      scrollState.scrollLeft,
+      scrollState.scrollHeight,
+      scrollState.clientHeight,
+      scrollState.scrollWidth,
+      scrollState.clientWidth
+    ]);
     const handleTrackClick = useCallback(
       (e) => {
         if (!viewport) return;
         if (e.target === e.currentTarget) {
-          handleScrollbarTrackClick(e, viewport, scrollState, orientation);
+          handleScrollbarTrackClick(e, viewport, scrollStateRef.current, orientation);
         }
       },
-      [viewport, scrollState, orientation]
+      [viewport, orientation]
     );
     const tv = useMemo(
       () => ScrollTv({
@@ -746,7 +722,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);
+    const { scrollState, isHovering, isScrolling, handleMouseEnter, handleMouseLeave } = useScrollStateAndVisibility(viewport, content);
     const staticConfig = useMemo(
       () => ({
         orientation,
@@ -757,11 +733,14 @@ var ScrollAreaRoot = forwardRef(
       }),
       [orientation, scrollbarMode, hoverBoundary, variant, type]
     );
-    const contextValue = useMemo(
+    const stateValue = useMemo(
+      () => ({ scrollState, isHovering, isScrolling }),
+      [scrollState, isHovering, isScrolling]
+    );
+    const configValue = useMemo(
       () => ({
         content,
         orientation: staticConfig.orientation,
-        scrollState,
         scrollbarMode: staticConfig.scrollbarMode,
         hoverBoundary: staticConfig.hoverBoundary,
         scrollbarX,
@@ -777,9 +756,6 @@ var ScrollAreaRoot = forwardRef(
         variant: staticConfig.variant,
         viewport,
         type: staticConfig.type,
-        isHovering,
-        isScrolling,
-        // Add ID-related values
         rootId,
         viewportId,
         scrollbarXId,
@@ -787,14 +763,11 @@ var ScrollAreaRoot = forwardRef(
       }),
       [
         content,
-        scrollState,
         scrollbarX,
         scrollbarY,
         thumbX,
         thumbY,
         viewport,
-        isHovering,
-        isScrolling,
         staticConfig,
         rootId,
         viewportId,
@@ -859,7 +832,7 @@ var ScrollAreaRoot = forwardRef(
       }
       return scrollbars;
     }, [orientation]);
-    return /* @__PURE__ */ jsx(ScrollAreaContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(ScrollAreaConfigContext.Provider, { value: configValue, children: /* @__PURE__ */ jsx(ScrollAreaStateContext.Provider, { value: stateValue, children: /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
@@ -875,13 +848,13 @@ var ScrollAreaRoot = forwardRef(
           autoScrollbars
         ]
       }
-    ) });
+    ) }) });
   }
 );
 ScrollAreaRoot.displayName = "ScrollArea.Root";
 var ScrollAreaViewport = forwardRef(
   ({ className, children, ...props }, ref) => {
-    const { setViewport, orientation, viewportId } = useScrollAreaContext();
+    const { setViewport, orientation, viewportId } = useScrollAreaConfigContext();
     const scrollClass = useMemo(() => {
       switch (orientation) {
         case "horizontal":
@@ -918,7 +891,7 @@ var ScrollAreaViewport = forwardRef(
 ScrollAreaViewport.displayName = "ScrollArea.Viewport";
 var ScrollAreaContent = forwardRef(
   ({ as: As = "div", className, children, ...props }, ref) => {
-    const { setContent, orientation } = useScrollAreaContext();
+    const { setContent, orientation } = useScrollAreaConfigContext();
     const setRef = useCallback(
       (node) => {
         setContent(node);

package/dist/components/scroll-area/src/components/scroll-area-content.js

@@ -1,10 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback, useMemo } from "react";
-import { useScrollAreaContext } from "../context/scroll-area-context.js";
+import { useScrollAreaConfigContext } from "../context/scroll-area-context.js";
 import { tcx } from "../../../../shared/utils/tcx/tcx.js";
 const ScrollAreaContent = forwardRef(
   ({ as: As = "div", className, children, ...props }, ref) => {
-    const { setContent, orientation } = useScrollAreaContext();
+    const { setContent, orientation } = useScrollAreaConfigContext();
     const setRef = useCallback(
       (node) => {
         setContent(node);