@choice-ui/react 1.3.10

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

@@ -0,0 +1,972 @@
+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);
+  if (!context) {
+    throw new Error("ScrollArea compound components must be used within ScrollArea");
+  }
+  return context;
+}
+function useScrollStateAndVisibility(viewport) {
+  const [scrollState, setScrollState] = useState({
+    scrollLeft: 0,
+    scrollTop: 0,
+    scrollWidth: 0,
+    scrollHeight: 0,
+    clientWidth: 0,
+    clientHeight: 0
+  });
+  const [isHovering, setIsHovering] = useState(false);
+  const [isScrolling, setIsScrolling] = useState(false);
+  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(() => {
+    if (!viewport) return;
+    const now = performance.now();
+    const timeSinceLastUpdate = now - lastUpdateTimeRef.current;
+    if (timeSinceLastUpdate < minUpdateIntervalRef.current) {
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+      }
+      rafRef.current = requestAnimationFrame(() => {
+        updateScrollState();
+      });
+      return;
+    }
+    if (rafRef.current) {
+      cancelAnimationFrame(rafRef.current);
+    }
+    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(() => {
+    setTimeout(() => {
+      updateScrollState();
+    }, 0);
+  }, [updateScrollState]);
+  const handleScroll = useCallback(() => {
+    const now = performance.now();
+    const timeSinceLastScroll = now - (lastUpdateTimeRef.current || 0);
+    if (timeSinceLastScroll < 8) {
+      minUpdateIntervalRef.current = 32;
+    } else if (timeSinceLastScroll > 100) {
+      minUpdateIntervalRef.current = 16;
+    }
+    updateScrollState();
+    setIsScrolling(true);
+    if (scrollTimeoutRef.current) {
+      clearTimeout(scrollTimeoutRef.current);
+    }
+    scrollTimeoutRef.current = window.setTimeout(() => {
+      setIsScrolling(false);
+      minUpdateIntervalRef.current = 16;
+    }, 1e3);
+  }, [updateScrollState]);
+  useEffect(() => {
+    if (!viewport) return;
+    const handleResize = () => {
+      updateScrollState();
+    };
+    const abortController = new AbortController();
+    const signal = abortController.signal;
+    viewport.addEventListener("scroll", handleScroll, {
+      passive: true,
+      signal,
+      capture: false
+      // 避免不必要的事件捕获
+    });
+    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.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"],
+        // 只监听影响布局的属性
+        characterData: true,
+        characterDataOldValue: false,
+        // 不需要旧值，提升性能
+        attributeOldValue: false
+      });
+    }
+    delayedUpdateScrollState();
+    return () => {
+      abortController.abort();
+      if (scrollTimeoutRef.current) {
+        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;
+      }
+      if (resizeObserverRef.current) {
+        resizeObserverRef.current.disconnect();
+        resizeObserverRef.current = void 0;
+      }
+      if (mutationObserverRef.current) {
+        mutationObserverRef.current.disconnect();
+        mutationObserverRef.current = void 0;
+      }
+    };
+  }, [viewport, handleScroll, delayedUpdateScrollState]);
+  const handleMouseEnter = useCallback(() => setIsHovering(true), []);
+  const handleMouseLeave = useCallback(() => setIsHovering(false), []);
+  return {
+    scrollState,
+    isHovering,
+    isScrolling,
+    handleMouseEnter,
+    handleMouseLeave
+  };
+}
+function useThumbStyle(scrollState, orientation) {
+  return useMemo(() => {
+    if (orientation === "vertical") {
+      const hasValidDimensions = scrollState.scrollHeight > 0 && scrollState.clientHeight > 0 && Number.isFinite(scrollState.scrollHeight) && Number.isFinite(scrollState.clientHeight) && Number.isFinite(scrollState.scrollTop);
+      if (!hasValidDimensions || scrollState.scrollHeight <= scrollState.clientHeight + 1) {
+        return { height: "0%", top: "0%" };
+      }
+      const scrollableHeight = scrollState.scrollHeight - scrollState.clientHeight;
+      const scrollRatio = Math.max(0, Math.min(1, scrollState.scrollTop / scrollableHeight));
+      const thumbHeight = Math.max(10, scrollState.clientHeight / scrollState.scrollHeight * 100);
+      const thumbTop = scrollRatio * (100 - thumbHeight);
+      return {
+        height: `${thumbHeight}%`,
+        top: `${Math.max(0, Math.min(thumbTop, 100 - thumbHeight))}%`
+      };
+    } else {
+      const hasValidDimensions = scrollState.scrollWidth > 0 && scrollState.clientWidth > 0 && Number.isFinite(scrollState.scrollWidth) && Number.isFinite(scrollState.clientWidth) && Number.isFinite(scrollState.scrollLeft);
+      if (!hasValidDimensions || scrollState.scrollWidth <= scrollState.clientWidth + 1) {
+        return { width: "0%", left: "0%" };
+      }
+      const scrollableWidth = scrollState.scrollWidth - scrollState.clientWidth;
+      const scrollRatio = Math.max(0, Math.min(1, scrollState.scrollLeft / scrollableWidth));
+      const thumbWidth = Math.max(10, scrollState.clientWidth / scrollState.scrollWidth * 100);
+      const thumbLeft = scrollRatio * (100 - thumbWidth);
+      return {
+        width: `${thumbWidth}%`,
+        left: `${Math.max(0, Math.min(thumbLeft, 100 - thumbWidth))}%`
+      };
+    }
+  }, [
+    scrollState.scrollLeft,
+    scrollState.scrollTop,
+    scrollState.scrollWidth,
+    scrollState.scrollHeight,
+    scrollState.clientWidth,
+    scrollState.clientHeight,
+    orientation
+  ]);
+}
+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 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;
+      }
+    };
+  }, []);
+  const handleMouseDown = useCallback(
+    (e) => {
+      if (!viewport) return;
+      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 scrollbarRange = orientation === "vertical" ? scrollbarRect.height : scrollbarRect.width;
+      if (scrollableRange <= 0 || scrollbarRange <= 0) return;
+      dragContextRef.current = {
+        scrollbarRect,
+        scrollableRange,
+        scrollbarRange
+      };
+      isDragging.current = true;
+      startPos.current = orientation === "vertical" ? e.clientY : e.clientX;
+      startScroll.current = orientation === "vertical" ? scrollState.scrollTop : scrollState.scrollLeft;
+      const scrollRatio = scrollableRange / scrollbarRange;
+      const handleMouseMove = (e2) => {
+        if (!isDragging.current || !viewport || !dragContextRef.current) return;
+        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;
+      };
+      const cleanup = () => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+      cleanupRef.current = cleanup;
+      document.addEventListener("mousemove", handleMouseMove, { passive: true });
+      document.addEventListener("mouseup", handleMouseUp, { passive: true });
+      e.preventDefault();
+    },
+    [viewport, orientation, scrollState]
+  );
+  return {
+    isDragging: isDragging.current,
+    handleMouseDown
+  };
+}
+function useHasOverflow(scrollState, orientation) {
+  return useMemo(() => {
+    if (orientation === "vertical") {
+      const hasValidDimensions = scrollState.scrollHeight > 0 && scrollState.clientHeight > 0 && Number.isFinite(scrollState.scrollHeight) && Number.isFinite(scrollState.clientHeight);
+      if (!hasValidDimensions) {
+        return false;
+      }
+      return scrollState.scrollHeight > scrollState.clientHeight + 1;
+    } else {
+      const hasValidDimensions = scrollState.scrollWidth > 0 && scrollState.clientWidth > 0 && Number.isFinite(scrollState.scrollWidth) && Number.isFinite(scrollState.clientWidth);
+      if (!hasValidDimensions) {
+        return false;
+      }
+      return scrollState.scrollWidth > scrollState.clientWidth + 1;
+    }
+  }, [
+    scrollState.scrollHeight,
+    scrollState.clientHeight,
+    scrollState.scrollWidth,
+    scrollState.clientWidth,
+    orientation
+  ]);
+}
+function useScrollbarShouldShow(type, hasOverflow, isScrolling, isHovering) {
+  return useMemo(() => {
+    switch (type) {
+      case "always":
+        return true;
+      case "auto":
+        return hasOverflow;
+      case "scroll":
+        return hasOverflow && isScrolling;
+      case "hover":
+        return hasOverflow && (isScrolling || isHovering);
+      default:
+        return hasOverflow;
+    }
+  }, [type, hasOverflow, isScrolling, isHovering]);
+}
+var ScrollTv = tcv({
+  slots: {
+    root: "relative h-full min-h-0 overflow-hidden",
+    scrollbar: ["flex touch-none select-none", "transition-colors duration-[100ms] ease-out"],
+    thumb: [
+      "relative rounded-md",
+      "z-5 before:absolute before:top-1/2 before:left-1/2 before:h-full before:min-h-5 before:w-full before:min-w-5",
+      "before:-translate-x-1/2 before:-translate-y-1/2",
+      "backdrop-blur-xs"
+    ],
+    corner: "min-h-0 overflow-hidden"
+  },
+  variants: {
+    orientation: {
+      vertical: {
+        scrollbar: "w-2.5 border-l border-transparent",
+        thumb: "w-1.25"
+      },
+      horizontal: {
+        scrollbar: "h-2.5 border-t border-transparent",
+        thumb: "h-1.25"
+      }
+    },
+    variant: {
+      default: {
+        thumb: "bg-default-foreground/10 hover:bg-default-foreground/20"
+      },
+      light: {
+        thumb: "bg-black/10 hover:bg-black/20"
+      },
+      dark: {
+        thumb: "bg-white/20 hover:bg-white/30"
+      }
+    },
+    scrollbarMode: {
+      default: {
+        scrollbar: "p-0.5"
+      },
+      "large-y": {},
+      "large-t": {},
+      "large-b": {},
+      "large-x": {},
+      "large-l": {},
+      "large-r": {}
+    },
+    hoverBoundary: {
+      none: {},
+      hover: {}
+    }
+  },
+  compoundVariants: [
+    // hoverBoundary: "hover"
+    {
+      orientation: "vertical",
+      hoverBoundary: "hover",
+      variant: "default",
+      class: {
+        scrollbar: "hover:border-l-default-boundary"
+      }
+    },
+    {
+      orientation: "horizontal",
+      hoverBoundary: "hover",
+      variant: "default",
+      class: {
+        scrollbar: "hover:border-t-default-boundary"
+      }
+    },
+    {
+      orientation: "vertical",
+      hoverBoundary: "hover",
+      variant: "light",
+      class: {
+        scrollbar: "hover:border-l-gray-200"
+      }
+    },
+    {
+      orientation: "horizontal",
+      hoverBoundary: "hover",
+      variant: "light",
+      class: {
+        scrollbar: "hover:border-t-gray-200"
+      }
+    },
+    {
+      orientation: "vertical",
+      hoverBoundary: "hover",
+      variant: "dark",
+      class: {
+        scrollbar: "hover:border-l-gray-600"
+      }
+    },
+    {
+      orientation: "horizontal",
+      hoverBoundary: "hover",
+      variant: "dark",
+      class: {
+        scrollbar: "hover:border-t-gray-600"
+      }
+    },
+    {
+      orientation: "vertical",
+      scrollbarMode: "large-y",
+      class: {
+        scrollbar: "px-0.5 py-2"
+      }
+    },
+    {
+      orientation: "vertical",
+      scrollbarMode: "large-t",
+      class: {
+        scrollbar: "px-0.5 pt-2"
+      }
+    },
+    {
+      orientation: "vertical",
+      scrollbarMode: "large-b",
+      class: {
+        scrollbar: "px-0.5 pb-2"
+      }
+    },
+    {
+      orientation: "horizontal",
+      scrollbarMode: "large-x",
+      class: {
+        scrollbar: "px-2 py-0.5"
+      }
+    },
+    {
+      orientation: "horizontal",
+      scrollbarMode: "large-l",
+      class: {
+        scrollbar: "py-0.5 pl-2"
+      }
+    },
+    {
+      orientation: "horizontal",
+      scrollbarMode: "large-r",
+      class: {
+        scrollbar: "py-0.5 pr-2"
+      }
+    },
+    {
+      hoverBoundary: "hover",
+      variant: "default",
+      class: {
+        scrollbar: "hover:bg-default-background"
+      }
+    },
+    {
+      hoverBoundary: "hover",
+      variant: "light",
+      class: {
+        scrollbar: "hover:bg-white"
+      }
+    },
+    {
+      hoverBoundary: "hover",
+      variant: "dark",
+      class: {
+        scrollbar: "hover:bg-menu-background"
+      }
+    }
+  ],
+  defaultVariants: {
+    hoverBoundary: "hover",
+    orientation: "vertical",
+    variant: "default",
+    scrollbarMode: "default"
+  }
+});
+function handleScrollbarTrackClick(e, viewport, scrollState, orientation) {
+  const rect = e.currentTarget.getBoundingClientRect();
+  if (orientation === "vertical") {
+    const clickY = e.clientY - rect.top;
+    const scrollRatio = clickY / rect.height;
+    const maxScrollTop = scrollState.scrollHeight - scrollState.clientHeight;
+    viewport.scrollTop = scrollRatio * maxScrollTop;
+  } else {
+    const clickX = e.clientX - rect.left;
+    const scrollRatio = clickX / rect.width;
+    const maxScrollLeft = scrollState.scrollWidth - scrollState.clientWidth;
+    viewport.scrollLeft = scrollRatio * maxScrollLeft;
+  }
+}
+function getScrollbarPositionStyle(orientation) {
+  if (orientation === "vertical") {
+    return {
+      position: "absolute",
+      top: 0,
+      right: 0,
+      height: "100%"
+    };
+  } else {
+    return {
+      position: "absolute",
+      bottom: 0,
+      left: 0,
+      width: "100%"
+    };
+  }
+}
+function shouldShowCorner(scrollState) {
+  const hasVerticalOverflow = scrollState.scrollHeight > scrollState.clientHeight;
+  const hasHorizontalOverflow = scrollState.scrollWidth > scrollState.clientWidth;
+  return hasVerticalOverflow && hasHorizontalOverflow;
+}
+var ScrollAreaCorner = forwardRef(
+  ({ className, ...props }, ref) => {
+    const { scrollState, scrollbarMode, variant } = useScrollAreaContext();
+    const tvConfig = useMemo(
+      () => ScrollTv({
+        variant,
+        scrollbarMode,
+        orientation: "vertical"
+      }),
+      [variant, scrollbarMode]
+    );
+    const cornerStyle = useMemo(
+      () => ({
+        position: "absolute",
+        bottom: 0,
+        right: 0,
+        width: "10px",
+        height: "10px"
+      }),
+      []
+    );
+    if (!shouldShowCorner(scrollState)) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: tcx(tvConfig.corner(), className),
+        style: cornerStyle,
+        role: "presentation",
+        "aria-hidden": "true",
+        ...props
+      }
+    );
+  }
+);
+ScrollAreaCorner.displayName = "ScrollArea.Corner";
+var ScrollAreaScrollbar = forwardRef(
+  ({ className, orientation = "vertical", ...props }, ref) => {
+    const {
+      viewport,
+      scrollState,
+      scrollbarMode,
+      hoverBoundary,
+      variant,
+      type,
+      isHovering,
+      isScrolling,
+      setScrollbarX,
+      setScrollbarY,
+      viewportId,
+      scrollbarXId,
+      scrollbarYId
+    } = useScrollAreaContext();
+    const hasOverflow = useHasOverflow(scrollState, orientation);
+    const shouldShow = useScrollbarShouldShow(type, hasOverflow, isScrolling, isHovering);
+    const scrollPercentage = useMemo(() => {
+      if (orientation === "vertical") {
+        const maxScroll = scrollState.scrollHeight - scrollState.clientHeight;
+        return maxScroll > 0 ? Math.round(scrollState.scrollTop / maxScroll * 100) : 0;
+      } else {
+        const maxScroll = scrollState.scrollWidth - scrollState.clientWidth;
+        return maxScroll > 0 ? Math.round(scrollState.scrollLeft / maxScroll * 100) : 0;
+      }
+    }, [scrollState, orientation]);
+    const handleTrackClick = useCallback(
+      (e) => {
+        if (!viewport) return;
+        if (e.target === e.currentTarget) {
+          handleScrollbarTrackClick(e, viewport, scrollState, orientation);
+        }
+      },
+      [viewport, scrollState, orientation]
+    );
+    const tvConfig = useMemo(
+      () => ScrollTv({
+        variant,
+        scrollbarMode,
+        orientation,
+        hoverBoundary
+      }),
+      [variant, scrollbarMode, orientation, hoverBoundary]
+    );
+    const setRef = useCallback(
+      (node) => {
+        if (orientation === "vertical") {
+          setScrollbarY(node);
+        } else {
+          setScrollbarX(node);
+        }
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [orientation, setScrollbarX, setScrollbarY, ref]
+    );
+    if (!shouldShow) return null;
+    const scrollbarId = orientation === "vertical" ? scrollbarYId : scrollbarXId;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: setRef,
+        id: scrollbarId,
+        className: tcx(tvConfig.scrollbar(), className),
+        style: getScrollbarPositionStyle(orientation),
+        onClick: handleTrackClick,
+        role: "scrollbar",
+        "aria-controls": viewportId,
+        "aria-orientation": orientation,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuenow": scrollPercentage,
+        "aria-valuetext": `${scrollPercentage}% scrolled ${orientation}ly`,
+        "aria-label": `${orientation} scrollbar`,
+        ...props
+      }
+    );
+  }
+);
+ScrollAreaScrollbar.displayName = "ScrollArea.Scrollbar";
+var ScrollAreaThumb = forwardRef(
+  ({ className, orientation = "vertical", ...props }, ref) => {
+    const { viewport, scrollState, scrollbarMode, variant, setThumbX, setThumbY } = useScrollAreaContext();
+    const { handleMouseDown } = useThumbDrag(viewport, scrollState, orientation);
+    const thumbStyle = useThumbStyle(scrollState, orientation);
+    const tvConfig = useMemo(
+      () => ScrollTv({
+        variant,
+        scrollbarMode,
+        orientation
+      }),
+      [variant, scrollbarMode, orientation]
+    );
+    const setRef = useCallback(
+      (node) => {
+        if (orientation === "vertical") {
+          setThumbY(node);
+        } else {
+          setThumbX(node);
+        }
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [orientation, setThumbX, setThumbY, ref]
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: setRef,
+        className: tcx(tvConfig.thumb(), className),
+        style: thumbStyle,
+        onMouseDown: handleMouseDown,
+        role: "button",
+        "aria-label": `${orientation} scroll thumb`,
+        "aria-hidden": "true",
+        ...props
+      }
+    );
+  }
+);
+ScrollAreaThumb.displayName = "ScrollArea.Thumb";
+var ScrollAreaRoot = forwardRef(
+  ({
+    className,
+    children,
+    orientation = "vertical",
+    scrollbarMode = "default",
+    hoverBoundary = "hover",
+    variant = "default",
+    type = "hover",
+    id,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    ...props
+  }, ref) => {
+    const [content, setContent] = useState(null);
+    const [viewport, setViewport] = useState(null);
+    const [scrollbarX, setScrollbarX] = useState(null);
+    const [scrollbarY, setScrollbarY] = useState(null);
+    const [thumbX, setThumbX] = useState(null);
+    const [thumbY, setThumbY] = useState(null);
+    const reactId = useId();
+    const rootId = id || `scroll-area${reactId}`;
+    const viewportId = `scroll-viewport${reactId}`;
+    const scrollbarXId = `scroll-x${reactId}`;
+    const scrollbarYId = `scroll-y${reactId}`;
+    const { scrollState, isHovering, isScrolling, handleMouseEnter, handleMouseLeave } = useScrollStateAndVisibility(viewport);
+    const staticConfig = useMemo(
+      () => ({
+        orientation,
+        scrollbarMode,
+        hoverBoundary,
+        variant,
+        type
+      }),
+      [orientation, scrollbarMode, hoverBoundary, variant, type]
+    );
+    const contextValue = useMemo(
+      () => ({
+        content,
+        orientation: staticConfig.orientation,
+        scrollState,
+        scrollbarMode: staticConfig.scrollbarMode,
+        hoverBoundary: staticConfig.hoverBoundary,
+        scrollbarX,
+        scrollbarY,
+        setContent,
+        setScrollbarX,
+        setScrollbarY,
+        setThumbX,
+        setThumbY,
+        setViewport,
+        thumbX,
+        thumbY,
+        variant: staticConfig.variant,
+        viewport,
+        type: staticConfig.type,
+        isHovering,
+        isScrolling,
+        // 添加 ID 相关的值
+        rootId,
+        viewportId,
+        scrollbarXId,
+        scrollbarYId
+      }),
+      [
+        content,
+        scrollState,
+        scrollbarX,
+        scrollbarY,
+        thumbX,
+        thumbY,
+        viewport,
+        isHovering,
+        isScrolling,
+        staticConfig,
+        rootId,
+        viewportId,
+        scrollbarXId,
+        scrollbarYId
+      ]
+    );
+    const tvConfig = useMemo(
+      () => ScrollTv({
+        variant,
+        scrollbarMode,
+        orientation: orientation === "both" ? "vertical" : orientation,
+        hoverBoundary
+      }),
+      [variant, scrollbarMode, orientation, hoverBoundary]
+    );
+    const scrollPosition = useMemo(() => {
+      const maxScrollTop = Math.max(0, scrollState.scrollHeight - scrollState.clientHeight);
+      const maxScrollLeft = Math.max(0, scrollState.scrollWidth - scrollState.clientWidth);
+      return {
+        top: maxScrollTop > 0 ? scrollState.scrollTop / maxScrollTop : 0,
+        left: maxScrollLeft > 0 ? scrollState.scrollLeft / maxScrollLeft : 0
+      };
+    }, [
+      scrollState.scrollTop,
+      scrollState.scrollLeft,
+      scrollState.scrollHeight,
+      scrollState.clientHeight,
+      scrollState.scrollWidth,
+      scrollState.clientWidth
+    ]);
+    const isRenderProp = typeof children === "function";
+    const renderedChildren = isRenderProp ? children(scrollPosition) : children;
+    const autoScrollbars = useMemo(() => {
+      const scrollbars = [];
+      if (orientation === "vertical" || orientation === "both") {
+        scrollbars.push(
+          /* @__PURE__ */ jsx(
+            ScrollAreaScrollbar,
+            {
+              orientation: "vertical",
+              children: /* @__PURE__ */ jsx(ScrollAreaThumb, { orientation: "vertical" })
+            },
+            "vertical"
+          )
+        );
+      }
+      if (orientation === "horizontal" || orientation === "both") {
+        scrollbars.push(
+          /* @__PURE__ */ jsx(
+            ScrollAreaScrollbar,
+            {
+              orientation: "horizontal",
+              children: /* @__PURE__ */ jsx(ScrollAreaThumb, { orientation: "horizontal" })
+            },
+            "horizontal"
+          )
+        );
+      }
+      if (orientation === "both") {
+        scrollbars.push(/* @__PURE__ */ jsx(ScrollAreaCorner, {}, "corner"));
+      }
+      return scrollbars;
+    }, [orientation]);
+    return /* @__PURE__ */ jsx(ScrollAreaContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        id: rootId,
+        className: tcx(tvConfig.root(), className),
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        ...props,
+        children: [
+          renderedChildren,
+          autoScrollbars
+        ]
+      }
+    ) });
+  }
+);
+ScrollAreaRoot.displayName = "ScrollArea.Root";
+var ScrollAreaViewport = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const { setViewport, orientation, viewportId } = useScrollAreaContext();
+    const scrollClass = useMemo(() => {
+      switch (orientation) {
+        case "horizontal":
+          return "overflow-x-auto overflow-y-hidden";
+        case "both":
+          return "overflow-auto";
+        default:
+          return "overflow-y-auto overflow-x-hidden";
+      }
+    }, [orientation]);
+    const setRef = useCallback(
+      (node) => {
+        setViewport(node);
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [setViewport, ref]
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: setRef,
+        id: viewportId,
+        className: tcx("scrollbar-hide h-full w-full", scrollClass, className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+ScrollAreaViewport.displayName = "ScrollArea.Viewport";
+var ScrollAreaContent = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const { setContent, orientation } = useScrollAreaContext();
+    const setRef = useCallback(
+      (node) => {
+        setContent(node);
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [setContent, ref]
+    );
+    const sizeClasses = useMemo(() => {
+      switch (orientation) {
+        case "vertical":
+          return "w-fit min-w-full";
+        case "horizontal":
+          return "h-fit min-h-full";
+        case "both":
+          return "";
+        default:
+          return "w-fit min-w-full";
+      }
+    }, [orientation]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: setRef,
+        className: tcx(sizeClasses, className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+ScrollAreaContent.displayName = "ScrollArea.Content";
+var ScrollArea = Object.assign(ScrollAreaRoot, {
+  Root: ScrollAreaRoot,
+  Viewport: ScrollAreaViewport,
+  Content: ScrollAreaContent,
+  Scrollbar: ScrollAreaScrollbar,
+  Thumb: ScrollAreaThumb,
+  Corner: ScrollAreaCorner
+});
+export {
+  ScrollArea,
+  useHasOverflow,
+  useScrollStateAndVisibility,
+  useScrollbarShouldShow,
+  useThumbDrag,
+  useThumbStyle
+};