@tutti-os/ui-system 0.0.3 → 0.0.4

package/dist/{chunk-XXE3UZ55.js → chunk-HJ43LQHW.js}

@@ -15,7 +15,7 @@ import {
   SuccessFilledIcon,
   WarningFilledIcon,
   WarningLinedIcon
-} from "./chunk-7Z4754GM.js";
+} from "./chunk-FVHI3UMS.js";
 import {
   cn
 } from "./chunk-DGPY4WP3.js";
@@ -1603,11 +1603,18 @@ function ResizableHandle({
 
 // src/components/scroll-area/scroll-area.tsx
 import * as React4 from "react";
-import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
 import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+var MIN_THUMB_SIZE_PX = 24;
 function ScrollArea({
   className,
   children,
+  onBlur,
+  onFocus,
+  onMouseEnter,
+  onMouseLeave,
+  scrollbarMode = "custom",
+  scrollHideDelay: _scrollHideDelay,
+  type,
   viewportClassName,
   viewportContentStyle,
   viewportProps,
@@ -1615,103 +1622,546 @@ function ScrollArea({
   viewportTestId,
   ...props
 }) {
+  const implementationProps = {
+    className,
+    onBlur,
+    onFocus,
+    onMouseEnter,
+    onMouseLeave,
+    scrollbarMode,
+    type,
+    viewportClassName,
+    viewportContentStyle,
+    viewportProps,
+    viewportRef,
+    viewportTestId,
+    ...props
+  };
+  if (scrollbarMode === "native") {
+    return /* @__PURE__ */ jsx16(NativeScrollArea, { ...implementationProps, children });
+  }
+  return /* @__PURE__ */ jsx16(CustomScrollArea, { ...implementationProps, children });
+}
+function NativeScrollArea({
+  className,
+  children,
+  onBlur,
+  onFocus,
+  onMouseEnter,
+  onMouseLeave,
+  scrollbarMode,
+  type,
+  viewportClassName,
+  viewportContentStyle,
+  viewportProps,
+  viewportRef,
+  viewportTestId,
+  ...props
+}) {
+  const alwaysVisible = type === "always" || type === "scroll" || hasAlwaysVisibleScrollbarSelector(className);
+  return /* @__PURE__ */ jsx16(
+    ScrollAreaFrame,
+    {
+      ...props,
+      className,
+      "data-scrollbar-mode": scrollbarMode,
+      onBlur,
+      onFocus,
+      onMouseEnter,
+      onMouseLeave,
+      alwaysVisible: false,
+      viewportClassName: cn(
+        nativeScrollbarClassName(alwaysVisible),
+        viewportClassName
+      ),
+      viewportContentStyle,
+      viewportProps,
+      viewportRef,
+      viewportTestId,
+      children
+    }
+  );
+}
+function CustomScrollArea({
+  className,
+  children,
+  onBlur,
+  onFocus,
+  onMouseEnter,
+  onMouseLeave,
+  scrollbarMode,
+  type,
+  viewportClassName,
+  viewportContentStyle,
+  viewportProps,
+  viewportRef,
+  viewportTestId,
+  ...props
+}) {
+  const localViewportRef = React4.useRef(null);
+  const contentRef = React4.useRef(null);
+  const [active, setActive] = React4.useState(false);
+  const alwaysVisible = type === "always" || type === "scroll" || hasAlwaysVisibleScrollbarSelector(className);
   return /* @__PURE__ */ jsxs7(
-    ScrollAreaPrimitive.Root,
+    ScrollAreaFrame,
     {
-      "data-slot": "scroll-area",
-      className: cn("group/scroll-area relative", className),
       ...props,
+      className,
+      contentRef,
+      "data-scrollbar-mode": scrollbarMode,
+      onBlur: (event) => {
+        onBlur?.(event);
+        if (!event.currentTarget.contains(event.relatedTarget)) {
+          setActive(false);
+        }
+      },
+      onFocus: (event) => {
+        onFocus?.(event);
+        setActive(true);
+      },
+      onMouseEnter: (event) => {
+        onMouseEnter?.(event);
+        setActive(true);
+      },
+      onMouseLeave: (event) => {
+        onMouseLeave?.(event);
+        setActive(false);
+      },
+      alwaysVisible,
+      viewportClassName: cn(
+        "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+        viewportClassName
+      ),
+      viewportContentStyle,
+      viewportProps,
+      viewportRef: setRefs(localViewportRef, viewportRef),
+      viewportTestId,
       children: [
-        /* @__PURE__ */ jsxs7(
-          ScrollAreaPrimitive.Viewport,
+        children,
+        /* @__PURE__ */ jsx16(
+          ScrollAreaScrollbar,
           {
-            ...viewportProps,
-            "data-slot": "scroll-area-viewport",
-            "data-testid": viewportTestId,
-            ref: viewportRef,
-            className: cn(
-              "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1",
-              viewportClassName
-            ),
-            children: [
-              viewportContentStyle ? /* @__PURE__ */ jsx16(ScrollAreaViewportContentStyleBridge, { style: viewportContentStyle }) : null,
-              children
-            ]
+            active: active || alwaysVisible,
+            contentRef,
+            orientation: "vertical",
+            viewportRef: localViewportRef
           }
-        ),
-        /* @__PURE__ */ jsx16(ScrollBar, {}),
-        /* @__PURE__ */ jsx16(ScrollAreaPrimitive.Corner, {})
+        )
       ]
     }
   );
 }
-function ScrollAreaViewportContentStyleBridge({
-  style
+function ScrollAreaFrame({
+  alwaysVisible,
+  children,
+  className,
+  contentRef,
+  viewportClassName,
+  viewportContentStyle,
+  viewportProps,
+  viewportRef,
+  viewportTestId,
+  ...props
 }) {
-  const markerRef = React4.useRef(null);
-  React4.useLayoutEffect(() => {
-    const contentElement = markerRef.current?.parentElement;
-    if (!contentElement) {
+  return /* @__PURE__ */ jsx16(
+    "div",
+    {
+      "data-slot": "scroll-area",
+      className: cn(
+        "group/scroll-area relative",
+        alwaysVisible ? "[&_[data-slot=scroll-area-scrollbar]]:opacity-100" : null,
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx16(
+        "div",
+        {
+          ...viewportProps,
+          "data-slot": "scroll-area-viewport",
+          "data-testid": viewportTestId,
+          ref: viewportRef,
+          className: cn(
+            "size-full overflow-auto rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1",
+            viewportClassName
+          ),
+          children: /* @__PURE__ */ jsx16(
+            "div",
+            {
+              ref: contentRef,
+              "data-slot": "scroll-area-content",
+              style: {
+                minWidth: "100%",
+                display: "table",
+                ...viewportContentStyle
+              },
+              children
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function ScrollAreaScrollbar({
+  active,
+  contentRef,
+  orientation,
+  viewportRef
+}) {
+  const trackRef = React4.useRef(null);
+  const thumbRef = React4.useRef(null);
+  const dragStateRef = React4.useRef(null);
+  const frameRef = React4.useRef(null);
+  const scrollableRef = React4.useRef(false);
+  const [dragging, setDragging] = React4.useState(false);
+  const [scrollable, setScrollable] = React4.useState(false);
+  const [trackActive, setTrackActive] = React4.useState(false);
+  const syncScrollbarState = React4.useCallback(() => {
+    const viewport = viewportRef.current;
+    const track = trackRef.current;
+    const thumb = thumbRef.current;
+    if (!viewport || !track || !thumb) {
+      updateScrollable(false, scrollableRef, setScrollable);
       return;
     }
-    const previousValues = /* @__PURE__ */ new Map();
-    for (const [property, value] of Object.entries(style)) {
-      const cssProperty = toCssPropertyName(property);
-      previousValues.set(cssProperty, {
-        value: contentElement.style.getPropertyValue(cssProperty),
-        priority: contentElement.style.getPropertyPriority(cssProperty)
-      });
-      if (value === void 0 || value === null) {
-        contentElement.style.removeProperty(cssProperty);
+    const viewportSize = orientation === "vertical" ? viewport.clientHeight : viewport.clientWidth;
+    const scrollSize = orientation === "vertical" ? viewport.scrollHeight : viewport.scrollWidth;
+    const scrollOffset = orientation === "vertical" ? viewport.scrollTop : viewport.scrollLeft;
+    const trackSize = orientation === "vertical" ? track.clientHeight : track.clientWidth;
+    const maxScrollOffset = Math.max(0, scrollSize - viewportSize);
+    if (viewportSize <= 0 || trackSize <= 0 || maxScrollOffset <= 0) {
+      updateScrollable(false, scrollableRef, setScrollable);
+      return;
+    }
+    const thumbSize = Math.min(
+      trackSize,
+      Math.max(
+        MIN_THUMB_SIZE_PX,
+        Math.round(viewportSize / scrollSize * trackSize)
+      )
+    );
+    const maxThumbOffset = Math.max(0, trackSize - thumbSize);
+    const thumbOffset = Math.round(
+      scrollOffset / maxScrollOffset * maxThumbOffset
+    );
+    if (orientation === "vertical") {
+      thumb.style.height = `${thumbSize}px`;
+      thumb.style.width = "";
+      thumb.style.transform = `translateY(${thumbOffset}px)`;
+    } else {
+      thumb.style.width = `${thumbSize}px`;
+      thumb.style.height = "";
+      thumb.style.transform = `translateX(${thumbOffset}px)`;
+    }
+    updateScrollable(true, scrollableRef, setScrollable);
+  }, [orientation, viewportRef]);
+  const scheduleSync = React4.useCallback(() => {
+    if (frameRef.current !== null) {
+      return;
+    }
+    frameRef.current = requestAnimationFrameSafely(() => {
+      frameRef.current = null;
+      syncScrollbarState();
+    });
+  }, [syncScrollbarState]);
+  const scrollViewportToThumbOffset = React4.useCallback(
+    (thumbOffset) => {
+      const viewport = viewportRef.current;
+      const track = trackRef.current;
+      const thumb = thumbRef.current;
+      if (!viewport || !track || !thumb) {
+        return;
+      }
+      const viewportSize = orientation === "vertical" ? viewport.clientHeight : viewport.clientWidth;
+      const scrollSize = orientation === "vertical" ? viewport.scrollHeight : viewport.scrollWidth;
+      const trackSize = orientation === "vertical" ? track.clientHeight : track.clientWidth;
+      const thumbSize = orientation === "vertical" ? thumb.offsetHeight : thumb.offsetWidth;
+      const maxScrollOffset = Math.max(0, scrollSize - viewportSize);
+      const maxThumbOffset = Math.max(0, trackSize - thumbSize);
+      if (maxScrollOffset <= 0 || maxThumbOffset <= 0) {
+        return;
+      }
+      const nextScrollOffset = clamp(thumbOffset, 0, maxThumbOffset) / maxThumbOffset * maxScrollOffset;
+      if (orientation === "vertical") {
+        viewport.scrollTop = nextScrollOffset;
       } else {
-        contentElement.style.setProperty(cssProperty, String(value));
+        viewport.scrollLeft = nextScrollOffset;
+      }
+      syncScrollbarState();
+    },
+    [orientation, syncScrollbarState, viewportRef]
+  );
+  const handleTrackPointerDown = React4.useCallback(
+    (event) => {
+      if (event.button !== 0 || !scrollableRef.current) {
+        return;
       }
+      const track = trackRef.current;
+      const thumb = thumbRef.current;
+      if (!track || !thumb || event.target === thumb) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      const trackRect = track.getBoundingClientRect();
+      const clientOffset = orientation === "vertical" ? event.clientY : event.clientX;
+      const trackStart = orientation === "vertical" ? trackRect.top : trackRect.left;
+      const thumbSize = orientation === "vertical" ? thumb.offsetHeight : thumb.offsetWidth;
+      scrollViewportToThumbOffset(clientOffset - trackStart - thumbSize / 2);
+    },
+    [orientation, scrollViewportToThumbOffset]
+  );
+  const handleThumbPointerDown = React4.useCallback(
+    (event) => {
+      if (event.button !== 0 || !scrollableRef.current) {
+        return;
+      }
+      const viewport = viewportRef.current;
+      const track = trackRef.current;
+      const thumb = thumbRef.current;
+      if (!viewport || !track || !thumb) {
+        return;
+      }
+      const viewportSize = orientation === "vertical" ? viewport.clientHeight : viewport.clientWidth;
+      const scrollSize = orientation === "vertical" ? viewport.scrollHeight : viewport.scrollWidth;
+      const trackSize = orientation === "vertical" ? track.clientHeight : track.clientWidth;
+      const thumbSize = orientation === "vertical" ? thumb.offsetHeight : thumb.offsetWidth;
+      const maxScrollOffset = Math.max(0, scrollSize - viewportSize);
+      const maxThumbOffset = Math.max(0, trackSize - thumbSize);
+      if (maxScrollOffset <= 0 || maxThumbOffset <= 0) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      dragStateRef.current = {
+        maxScrollOffset,
+        maxThumbOffset,
+        startClientOffset: orientation === "vertical" ? event.clientY : event.clientX,
+        startScrollOffset: orientation === "vertical" ? viewport.scrollTop : viewport.scrollLeft
+      };
+      setDragging(true);
+    },
+    [orientation, viewportRef]
+  );
+  React4.useEffect(() => {
+    if (!dragging) {
+      return;
     }
+    const handlePointerMove = (event) => {
+      const dragState = dragStateRef.current;
+      const viewport = viewportRef.current;
+      if (!dragState || !viewport) {
+        return;
+      }
+      const clientOffset = orientation === "vertical" ? event.clientY : event.clientX;
+      const nextThumbOffset = dragState.startScrollOffset / dragState.maxScrollOffset * dragState.maxThumbOffset + (clientOffset - dragState.startClientOffset);
+      const nextScrollOffset = clamp(nextThumbOffset, 0, dragState.maxThumbOffset) / dragState.maxThumbOffset * dragState.maxScrollOffset;
+      if (orientation === "vertical") {
+        viewport.scrollTop = nextScrollOffset;
+      } else {
+        viewport.scrollLeft = nextScrollOffset;
+      }
+      syncScrollbarState();
+    };
+    const handlePointerUp = () => {
+      dragStateRef.current = null;
+      setDragging(false);
+    };
+    window.addEventListener("pointermove", handlePointerMove);
+    window.addEventListener("pointerup", handlePointerUp);
     return () => {
-      for (const [cssProperty, previous] of previousValues) {
-        if (previous.value) {
-          contentElement.style.setProperty(
-            cssProperty,
-            previous.value,
-            previous.priority
-          );
-        } else {
-          contentElement.style.removeProperty(cssProperty);
-        }
+      window.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("pointerup", handlePointerUp);
+    };
+  }, [dragging, orientation, syncScrollbarState, viewportRef]);
+  React4.useEffect(() => {
+    const viewport = viewportRef.current;
+    if (!viewport) {
+      updateScrollable(false, scrollableRef, setScrollable);
+      return;
+    }
+    syncScrollbarState();
+    viewport.addEventListener("scroll", scheduleSync, { passive: true });
+    const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(scheduleSync) : null;
+    resizeObserver?.observe(viewport);
+    if (contentRef.current) {
+      resizeObserver?.observe(contentRef.current);
+    }
+    return () => {
+      if (frameRef.current !== null) {
+        cancelAnimationFrameSafely(frameRef.current);
+        frameRef.current = null;
       }
+      viewport.removeEventListener("scroll", scheduleSync);
+      resizeObserver?.disconnect();
     };
-  }, [style]);
-  return /* @__PURE__ */ jsx16("span", { ref: markerRef, "data-slot": "scroll-area-content-style-bridge", hidden: true });
-}
-function toCssPropertyName(property) {
-  return property.startsWith("--") ? property : property.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+  }, [contentRef, scheduleSync, syncScrollbarState, viewportRef]);
+  React4.useEffect(() => {
+    scheduleSync();
+  });
+  return /* @__PURE__ */ jsx16(
+    "div",
+    {
+      ref: trackRef,
+      "data-dragging": dragging ? "true" : "false",
+      "data-orientation": orientation,
+      "data-scrollable": scrollable ? "true" : "false",
+      "data-slot": "scroll-area-scrollbar",
+      "aria-hidden": "true",
+      className: scrollbarClassName(orientation),
+      style: scrollbarStyle({
+        active: active || dragging,
+        orientation,
+        scrollable
+      }),
+      onPointerEnter: () => setTrackActive(true),
+      onPointerLeave: () => setTrackActive(false),
+      onPointerDown: handleTrackPointerDown,
+      children: /* @__PURE__ */ jsx16(
+        "div",
+        {
+          ref: thumbRef,
+          "data-slot": "scroll-area-thumb",
+          className: thumbClassName(orientation),
+          style: thumbStyle({ active: trackActive || dragging, orientation }),
+          onPointerDown: handleThumbPointerDown
+        }
+      )
+    }
+  );
 }
 function ScrollBar({
   className,
+  forceMount: _forceMount,
   orientation = "vertical",
   ...props
 }) {
   return /* @__PURE__ */ jsx16(
-    ScrollAreaPrimitive.ScrollAreaScrollbar,
+    "div",
     {
       "data-slot": "scroll-area-scrollbar",
       "data-orientation": orientation,
-      orientation,
-      className: cn(
-        "group/scrollbar absolute z-10 flex touch-none p-[2px] opacity-0 transition-opacity duration-150 select-none group-hover/scroll-area:opacity-100 group-focus-within/scroll-area:opacity-100 data-[orientation=horizontal]:right-0 data-[orientation=horizontal]:bottom-0 data-[orientation=horizontal]:left-0 data-[orientation=horizontal]:h-2 data-[orientation=horizontal]:flex-col data-[orientation=vertical]:top-0 data-[orientation=vertical]:right-0 data-[orientation=vertical]:bottom-0 data-[orientation=vertical]:w-2",
-        className
-      ),
+      className: cn(scrollbarClassName(orientation), className),
+      style: scrollbarStyle({ active: false, orientation, scrollable: true }),
       ...props,
       children: /* @__PURE__ */ jsx16(
-        ScrollAreaPrimitive.ScrollAreaThumb,
+        "div",
         {
           "data-slot": "scroll-area-thumb",
-          className: "relative flex-1 rounded-full bg-[var(--transparency-block)] transition-colors duration-150 group-hover/scrollbar:bg-[var(--transparency-hover)]"
+          className: thumbClassName(orientation),
+          style: thumbStyle({ active: false, orientation })
         }
       )
     }
   );
 }
+function scrollbarClassName(orientation) {
+  return cn(
+    orientation === "horizontal" ? "data-[orientation=horizontal]:h-2" : "data-[orientation=vertical]:w-2"
+  );
+}
+function thumbClassName(orientation) {
+  return cn(
+    "rounded-full",
+    orientation === "horizontal" ? "top-[2px] bottom-[2px]" : "right-[2px] left-[2px]"
+  );
+}
+function nativeScrollbarClassName(alwaysVisible) {
+  return cn(
+    "[scrollbar-width:thin] [scrollbar-color:transparent_transparent]",
+    "[&::-webkit-scrollbar]:block [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar]:w-2",
+    "[&::-webkit-scrollbar-corner]:bg-transparent [&::-webkit-scrollbar-track]:bg-transparent",
+    "[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:border-2 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-transparent [&::-webkit-scrollbar-thumb]:bg-clip-content",
+    alwaysVisible ? "[scrollbar-color:var(--transparency-block)_transparent] [&::-webkit-scrollbar-thumb]:bg-[var(--transparency-block)] hover:[&::-webkit-scrollbar-thumb]:bg-[var(--transparency-hover)]" : "hover:[scrollbar-color:var(--transparency-block)_transparent] focus-within:[scrollbar-color:var(--transparency-block)_transparent] hover:[&::-webkit-scrollbar-thumb]:bg-[var(--transparency-block)] focus-within:[&::-webkit-scrollbar-thumb]:bg-[var(--transparency-block)]"
+  );
+}
+function scrollbarStyle({
+  active,
+  orientation,
+  scrollable
+}) {
+  return {
+    position: "absolute",
+    zIndex: 10,
+    display: "flex",
+    touchAction: "none",
+    padding: 2,
+    opacity: active && scrollable ? 1 : 0,
+    pointerEvents: scrollable ? "auto" : "none",
+    userSelect: "none",
+    transition: "opacity 150ms ease-in-out",
+    cursor: "pointer",
+    ...orientation === "horizontal" ? {
+      right: 0,
+      bottom: 0,
+      left: 0,
+      height: 8,
+      flexDirection: "column"
+    } : {
+      top: 0,
+      right: 0,
+      bottom: 0,
+      width: 8
+    }
+  };
+}
+function thumbStyle({
+  active,
+  orientation
+}) {
+  return {
+    position: "absolute",
+    minHeight: orientation === "vertical" ? MIN_THUMB_SIZE_PX : void 0,
+    minWidth: orientation === "horizontal" ? MIN_THUMB_SIZE_PX : void 0,
+    borderRadius: 999,
+    background: active ? "var(--transparency-hover)" : "var(--transparency-block)",
+    cursor: active ? "grabbing" : "grab",
+    transition: "background-color 150ms ease-in-out",
+    ...orientation === "horizontal" ? {
+      top: 2,
+      bottom: 2
+    } : {
+      right: 2,
+      left: 2
+    }
+  };
+}
+function hasAlwaysVisibleScrollbarSelector(className) {
+  return typeof className === "string" && className.includes("scroll-area-scrollbar") && className.includes("opacity-100");
+}
+function setRefs(localRef, forwardedRef) {
+  return (node) => {
+    localRef.current = node;
+    if (typeof forwardedRef === "function") {
+      forwardedRef(node);
+    } else if (forwardedRef) {
+      forwardedRef.current = node;
+    }
+  };
+}
+function updateScrollable(nextScrollable, scrollableRef, setScrollable) {
+  if (scrollableRef.current === nextScrollable) {
+    return;
+  }
+  scrollableRef.current = nextScrollable;
+  setScrollable(nextScrollable);
+}
+function requestAnimationFrameSafely(callback) {
+  if (typeof window.requestAnimationFrame === "function") {
+    return window.requestAnimationFrame(callback);
+  }
+  return window.setTimeout(() => callback(performance.now()), 16);
+}
+function cancelAnimationFrameSafely(frameId) {
+  if (typeof window.cancelAnimationFrame === "function") {
+    window.cancelAnimationFrame(frameId);
+    return;
+  }
+  window.clearTimeout(frameId);
+}
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
 
 // src/components/select/select.tsx
 import { Select as SelectPrimitive } from "radix-ui";
@@ -2472,7 +2922,7 @@ function TooltipContent({
 }
 
 // src/components/underline-tabs/underline-tabs.tsx
-import { useEffect as useEffect3, useLayoutEffect as useLayoutEffect3, useRef as useRef3, useState as useState3 } from "react";
+import { useEffect as useEffect4, useLayoutEffect as useLayoutEffect2, useRef as useRef3, useState as useState4 } from "react";
 import { jsx as jsx28, jsxs as jsxs11 } from "react/jsx-runtime";
 function UnderlineTabs({
   tabs,
@@ -2491,12 +2941,12 @@ function UnderlineTabs({
   const viewportRef = useRef3(null);
   const rowRef = useRef3(null);
   const buttonRefs = useRef3({});
-  const [indicatorStyle, setIndicatorStyle] = useState3({ left: 0, width: 0 });
-  const [overflow, setOverflow] = useState3({
+  const [indicatorStyle, setIndicatorStyle] = useState4({ left: 0, width: 0 });
+  const [overflow, setOverflow] = useState4({
     canScrollLeft: false,
     canScrollRight: false
   });
-  useLayoutEffect3(() => {
+  useLayoutEffect2(() => {
     const row = rowRef.current;
     const button = buttonRefs.current[value];
     if (!row || !button) {
@@ -2513,7 +2963,7 @@ function UnderlineTabs({
       (current) => current.left === nextStyle.left && current.width === nextStyle.width ? current : nextStyle
     );
   }, [tabs, value]);
-  useEffect3(() => {
+  useEffect4(() => {
     const viewport = viewportRef.current;
     if (!viewport) {
       return;
@@ -2803,7 +3253,7 @@ var ViewportMenuSurface = React6.forwardRef(function ViewportMenuSurface2({
 }, forwardedRef) {
   const surfaceRef = React6.useRef(null);
   const [measuredSize, setMeasuredSize] = React6.useState(null);
-  const setRefs = React6.useCallback(
+  const setRefs2 = React6.useCallback(
     (node) => {
       surfaceRef.current = node;
       assignRef(forwardedRef, node);
@@ -2940,7 +3390,7 @@ var ViewportMenuSurface = React6.forwardRef(function ViewportMenuSurface2({
       MenuSurface,
       {
         ...rest,
-        ref: setRefs,
+        ref: setRefs2,
         className,
         "data-slot": "viewport-menu-surface",
         style: {
@@ -3078,4 +3528,4 @@ export {
   UnderlineTabs,
   ViewportMenuSurface
 };
-//# sourceMappingURL=chunk-XXE3UZ55.js.map
+//# sourceMappingURL=chunk-HJ43LQHW.js.map