@agg-market/ui 0.0.1

package/dist/chunk-VLIJ7PQK.mjs

@@ -0,0 +1,792 @@
+import {
+  Select
+} from "./chunk-6RRBINER.mjs";
+import {
+  Icon
+} from "./chunk-DA6KZWSK.mjs";
+import {
+  AGG_ROOT_CLASS_NAME,
+  __spreadProps,
+  __spreadValues,
+  cn,
+  getMotionClassName,
+  getScrollBehavior
+} from "./chunk-GC3QIIH7.mjs";
+
+// src/primitives/tabs/index.tsx
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useLabels, useSdkUiConfig } from "@agg/hooks";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+
+// src/primitives/tabs/tabs.utils.ts
+var findNextEnabledIndex = (items, startIndex, direction) => {
+  var _a;
+  if (items.length === 0)
+    return -1;
+  for (let step = 1; step <= items.length; step += 1) {
+    const nextIndex = (startIndex + direction * step + items.length) % items.length;
+    if (!((_a = items[nextIndex]) == null ? void 0 : _a.disabled))
+      return nextIndex;
+  }
+  return -1;
+};
+var findEdgeEnabledIndex = (items, direction) => {
+  var _a;
+  if (direction === 1) {
+    return items.findIndex((item) => !item.disabled);
+  }
+  for (let index = items.length - 1; index >= 0; index -= 1) {
+    if (!((_a = items[index]) == null ? void 0 : _a.disabled))
+      return index;
+  }
+  return -1;
+};
+var FALLBACK_TAB_WIDTH = 112;
+var FALLBACK_MORE_WIDTH = 56;
+var sumWidths = (indices, widths) => {
+  return [...indices].reduce((accumulator, index) => {
+    var _a;
+    return accumulator + ((_a = widths[index]) != null ? _a : 0);
+  }, 0);
+};
+var resolveTabsOverflowLayout = ({
+  items,
+  value,
+  containerWidth,
+  moreButtonWidth,
+  itemWidthByValue
+}) => {
+  var _a;
+  if (items.length === 0) {
+    return {
+      visibleItems: [],
+      hiddenItems: []
+    };
+  }
+  if (!Number.isFinite(containerWidth) || containerWidth <= 0) {
+    return {
+      visibleItems: items,
+      hiddenItems: []
+    };
+  }
+  const resolvedItemWidths = items.map((item) => {
+    var _a2;
+    const measuredWidth = (_a2 = itemWidthByValue.get(item.value)) != null ? _a2 : FALLBACK_TAB_WIDTH;
+    return Math.max(1, measuredWidth);
+  });
+  const totalItemsWidth = resolvedItemWidths.reduce((sum, width) => {
+    return sum + width;
+  }, 0);
+  if (totalItemsWidth <= containerWidth) {
+    return {
+      visibleItems: items,
+      hiddenItems: []
+    };
+  }
+  const reservedMoreWidth = Math.max(1, moreButtonWidth || FALLBACK_MORE_WIDTH);
+  const visibleIndices = /* @__PURE__ */ new Set();
+  let usedWidth = 0;
+  for (let index = 0; index < items.length; index += 1) {
+    const itemWidth = (_a = resolvedItemWidths[index]) != null ? _a : FALLBACK_TAB_WIDTH;
+    const hasRemainingItems = index < items.length - 1;
+    const requiredExtraWidth = hasRemainingItems ? reservedMoreWidth : 0;
+    if (usedWidth + itemWidth + requiredExtraWidth > containerWidth)
+      break;
+    visibleIndices.add(index);
+    usedWidth += itemWidth;
+  }
+  if (visibleIndices.size === 0) {
+    visibleIndices.add(0);
+  }
+  const activeIndex = items.findIndex((item) => item.value === value);
+  const isActiveHidden = activeIndex >= 0 && !visibleIndices.has(activeIndex);
+  if (isActiveHidden && activeIndex >= 0) {
+    visibleIndices.add(activeIndex);
+    while (visibleIndices.size > 1) {
+      const visibleWidth = sumWidths(visibleIndices, resolvedItemWidths);
+      if (visibleWidth + reservedMoreWidth <= containerWidth)
+        break;
+      const removableIndex = [...visibleIndices].sort((left, right) => right - left).find((index) => index !== activeIndex);
+      if (removableIndex == null)
+        break;
+      visibleIndices.delete(removableIndex);
+    }
+  }
+  return {
+    visibleItems: items.filter((_, index) => visibleIndices.has(index)),
+    hiddenItems: items.filter((_, index) => !visibleIndices.has(index))
+  };
+};
+
+// src/primitives/tabs/index.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var mobileTabsMediaQuery = "(max-width: 767px)";
+var getTabButtonClassName = ({
+  enableAnimations,
+  isBarVariant,
+  isActive,
+  isDisabled,
+  size
+}) => {
+  const isSmall = size === "s";
+  return cn(
+    "cursor-pointer disabled:cursor-not-allowed",
+    "relative inline-flex h-full shrink-0 items-center justify-center gap-2 font-agg-sans",
+    getMotionClassName(enableAnimations, "transition-colors motion-reduce:transition-none"),
+    isBarVariant ? cn(
+      "min-w-20 overflow-hidden border-r border-agg-separator last:border-r-0",
+      isSmall ? "px-3 text-agg-sm leading-agg-5" : "px-4 text-agg-base leading-agg-6"
+    ) : cn(isSmall ? "px-4 text-agg-sm leading-agg-5" : "px-5 text-agg-base leading-agg-6"),
+    isBarVariant && isActive && "font-agg-bold text-agg-primary",
+    isBarVariant && !isActive && "font-agg-normal text-agg-foreground",
+    !isBarVariant && isActive && "font-agg-bold text-agg-primary",
+    !isBarVariant && !isActive && "font-agg-normal text-agg-foreground",
+    isDisabled && "cursor-not-allowed opacity-60"
+  );
+};
+var getMeasureTabClassName = ({
+  isBarVariant,
+  size
+}) => {
+  const isSmall = size === "s";
+  return cn(
+    "relative inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap font-agg-sans",
+    isBarVariant ? cn(
+      "h-8 min-w-20 border-r border-agg-separator font-agg-bold",
+      isSmall ? "px-3 text-agg-sm leading-agg-5" : "px-4 text-agg-base leading-agg-6"
+    ) : cn(
+      "h-12 font-agg-bold",
+      isSmall ? "px-4 text-agg-sm leading-agg-5" : "px-5 text-agg-base leading-agg-6"
+    )
+  );
+};
+var getMoreButtonClassName = ({
+  enableAnimations,
+  isBarVariant,
+  size
+}) => {
+  const isSmall = size === "s";
+  return cn(
+    "cursor-pointer disabled:cursor-not-allowed",
+    "relative inline-flex shrink-0 items-center justify-center overflow-hidden font-agg-sans text-agg-foreground hover:bg-agg-secondary-hover",
+    getMotionClassName(enableAnimations, "transition-colors motion-reduce:transition-none"),
+    isBarVariant ? "h-8 rounded-r-agg-sm border border-agg-separator bg-agg-secondary px-2" : cn("h-12 bg-agg-secondary", isSmall ? "px-3 text-agg-sm" : "px-4 text-agg-base")
+  );
+};
+var Tabs = ({
+  items,
+  value,
+  onChange,
+  variant = "bar",
+  size = "m",
+  overflowBehavior,
+  overflowMenuAriaLabel,
+  ariaLabel,
+  className
+}) => {
+  const labels = useLabels();
+  const { enableAnimations, rootClassName } = useSdkUiConfig();
+  const buttonRefs = useRef([]);
+  const dragStateRef = useRef({
+    isPointerDown: false,
+    isDragging: false,
+    pointerId: null,
+    startClientX: 0,
+    startClientY: 0,
+    startScrollLeft: 0
+  });
+  const suppressClickRef = useRef(false);
+  const resolvedAriaLabel = ariaLabel != null ? ariaLabel : labels.common.tabsAria;
+  const resolvedOverflowMenuAriaLabel = overflowMenuAriaLabel != null ? overflowMenuAriaLabel : labels.common.hiddenTabsAria;
+  const [isMoreMenuOpen, setIsMoreMenuOpen] = useState(false);
+  const [isMobileViewport, setIsMobileViewport] = useState(false);
+  const [isDraggingTabs, setIsDraggingTabs] = useState(false);
+  const [activeUnderlineStyle, setActiveUnderlineStyle] = useState({
+    transform: "translateX(0px)",
+    width: 0,
+    opacity: 0
+  });
+  const [overflowLayout, setOverflowLayout] = useState({
+    visibleItems: items,
+    hiddenItems: []
+  });
+  const [scrollAffordanceState, setScrollAffordanceState] = useState({
+    showStart: false,
+    showEnd: false
+  });
+  const containerRef = useRef(null);
+  const tabListRef = useRef(null);
+  const moreButtonMeasureRef = useRef(null);
+  const tabMeasureRefs = useRef(/* @__PURE__ */ new Map());
+  const isBarVariant = variant === "bar";
+  const resolvedOverflowBehavior = useMemo(() => {
+    if (overflowBehavior)
+      return overflowBehavior;
+    if (!isBarVariant)
+      return "scroll";
+    return isMobileViewport ? "select" : "menu";
+  }, [isBarVariant, isMobileViewport, overflowBehavior]);
+  const shouldUseOverflowMenu = resolvedOverflowBehavior === "menu";
+  const shouldUseOverflowScroll = resolvedOverflowBehavior === "scroll";
+  const shouldUseOverflowSelect = resolvedOverflowBehavior === "select";
+  const handleMeasureTabRef = useCallback(
+    (tabValue, tabElement) => {
+      if (!tabElement) {
+        tabMeasureRefs.current.delete(tabValue);
+        return;
+      }
+      tabMeasureRefs.current.set(tabValue, tabElement);
+    },
+    []
+  );
+  useEffect(() => {
+    if (typeof window === "undefined")
+      return;
+    const mediaQueryList = window.matchMedia(mobileTabsMediaQuery);
+    const handleMediaQueryChange = (event) => {
+      setIsMobileViewport(event.matches);
+    };
+    handleMediaQueryChange(mediaQueryList);
+    if (typeof mediaQueryList.addEventListener === "function") {
+      mediaQueryList.addEventListener("change", handleMediaQueryChange);
+      return () => {
+        mediaQueryList.removeEventListener("change", handleMediaQueryChange);
+      };
+    }
+    mediaQueryList.addListener(handleMediaQueryChange);
+    return () => {
+      mediaQueryList.removeListener(handleMediaQueryChange);
+    };
+  }, []);
+  const handleRecalculateOverflow = useCallback(() => {
+    var _a, _b, _c, _d;
+    if (!shouldUseOverflowMenu) {
+      setOverflowLayout({
+        visibleItems: items,
+        hiddenItems: []
+      });
+      return;
+    }
+    const containerWidth = (_b = (_a = containerRef.current) == null ? void 0 : _a.clientWidth) != null ? _b : 0;
+    const moreButtonWidth = (_d = (_c = moreButtonMeasureRef.current) == null ? void 0 : _c.offsetWidth) != null ? _d : 0;
+    const itemWidthByValue = new Map(
+      items.map((item) => {
+        var _a2, _b2;
+        return [item.value, (_b2 = (_a2 = tabMeasureRefs.current.get(item.value)) == null ? void 0 : _a2.offsetWidth) != null ? _b2 : 0];
+      })
+    );
+    setOverflowLayout(
+      resolveTabsOverflowLayout({
+        items,
+        value,
+        containerWidth,
+        moreButtonWidth,
+        itemWidthByValue
+      })
+    );
+  }, [items, shouldUseOverflowMenu, value]);
+  useEffect(() => {
+    handleRecalculateOverflow();
+  }, [handleRecalculateOverflow]);
+  useEffect(() => {
+    if (!shouldUseOverflowMenu)
+      return;
+    const container = containerRef.current;
+    if (!container || typeof ResizeObserver === "undefined")
+      return;
+    const resizeObserver = new ResizeObserver(() => {
+      handleRecalculateOverflow();
+    });
+    resizeObserver.observe(container);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [handleRecalculateOverflow, shouldUseOverflowMenu]);
+  useEffect(() => {
+    if (overflowLayout.hiddenItems.length > 0)
+      return;
+    setIsMoreMenuOpen(false);
+  }, [overflowLayout.hiddenItems.length]);
+  const updateScrollAffordances = useCallback(() => {
+    if (!shouldUseOverflowScroll) {
+      setScrollAffordanceState({
+        showStart: false,
+        showEnd: false
+      });
+      return;
+    }
+    const tabListElement = tabListRef.current;
+    if (!tabListElement)
+      return;
+    const maxScrollLeft = tabListElement.scrollWidth - tabListElement.clientWidth;
+    setScrollAffordanceState({
+      showStart: tabListElement.scrollLeft > 4,
+      showEnd: maxScrollLeft - tabListElement.scrollLeft > 4
+    });
+  }, [shouldUseOverflowScroll]);
+  const renderedItems = shouldUseOverflowMenu ? overflowLayout.visibleItems : items;
+  const shouldShowMoreButton = shouldUseOverflowMenu && overflowLayout.hiddenItems.length > 0;
+  const selectItems = useMemo(() => {
+    return items.map((item) => ({
+      value: item.value,
+      label: item.label,
+      disabled: item.disabled
+    }));
+  }, [items]);
+  const isSelectDisabled = !items.some((item) => !item.disabled);
+  const handleSelect = (nextValue) => {
+    if (nextValue === value)
+      return;
+    onChange(nextValue);
+  };
+  const handleMoveFocus = (index) => {
+    var _a;
+    if (index < 0)
+      return;
+    const nextItem = renderedItems[index];
+    if (!nextItem)
+      return;
+    handleSelect(nextItem.value);
+    (_a = buttonRefs.current[index]) == null ? void 0 : _a.focus();
+  };
+  const handleKeyDown = (event, index) => {
+    switch (event.key) {
+      case "ArrowRight": {
+        event.preventDefault();
+        handleMoveFocus(findNextEnabledIndex(renderedItems, index, 1));
+        return;
+      }
+      case "ArrowLeft": {
+        event.preventDefault();
+        handleMoveFocus(findNextEnabledIndex(renderedItems, index, -1));
+        return;
+      }
+      case "Home": {
+        event.preventDefault();
+        handleMoveFocus(findEdgeEnabledIndex(renderedItems, 1));
+        return;
+      }
+      case "End": {
+        event.preventDefault();
+        handleMoveFocus(findEdgeEnabledIndex(renderedItems, -1));
+        return;
+      }
+      default:
+        return;
+    }
+  };
+  const activeHiddenItem = useMemo(() => {
+    if (!shouldUseOverflowMenu)
+      return void 0;
+    return overflowLayout.hiddenItems.find((item) => item.value === value);
+  }, [overflowLayout.hiddenItems, shouldUseOverflowMenu, value]);
+  const tabListClassName = cn(
+    "inline-flex items-stretch bg-agg-secondary",
+    shouldUseOverflowMenu ? "min-w-0 flex-1 overflow-hidden" : shouldUseOverflowScroll ? cn(
+      "overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+      getMotionClassName(enableAnimations, "scroll-smooth")
+    ) : "overflow-x-auto",
+    isBarVariant ? "h-8 rounded-agg-sm border border-agg-separator" : "h-12 border-b border-agg-separator -mb-[1px]",
+    shouldUseOverflowScroll && "select-none",
+    shouldUseOverflowScroll && !isBarVariant && "snap-x snap-mandatory",
+    shouldUseOverflowScroll && (isDraggingTabs ? "cursor-grabbing" : "cursor-grab"),
+    shouldShowMoreButton && isBarVariant && "rounded-r-none border-r-0"
+  );
+  const handleTabListWheel = (event) => {
+    if (!shouldUseOverflowScroll)
+      return;
+    const tabListElement = event.currentTarget;
+    if (tabListElement.scrollWidth <= tabListElement.clientWidth)
+      return;
+    if (Math.abs(event.deltaX) > Math.abs(event.deltaY))
+      return;
+    event.preventDefault();
+    tabListElement.scrollLeft += event.deltaY;
+  };
+  const handleTabListPointerDown = (event) => {
+    if (!shouldUseOverflowScroll)
+      return;
+    if (event.pointerType !== "mouse")
+      return;
+    if (event.button !== 0)
+      return;
+    const tabListElement = tabListRef.current;
+    if (!tabListElement)
+      return;
+    if (tabListElement.scrollWidth <= tabListElement.clientWidth)
+      return;
+    dragStateRef.current = {
+      isPointerDown: true,
+      isDragging: false,
+      pointerId: event.pointerId,
+      startClientX: event.clientX,
+      startClientY: event.clientY,
+      startScrollLeft: tabListElement.scrollLeft
+    };
+  };
+  const handleTabListPointerMove = (event) => {
+    if (!shouldUseOverflowScroll)
+      return;
+    const dragState = dragStateRef.current;
+    const tabListElement = tabListRef.current;
+    if (!dragState.isPointerDown)
+      return;
+    if (dragState.pointerId !== event.pointerId)
+      return;
+    if (!tabListElement)
+      return;
+    const deltaX = event.clientX - dragState.startClientX;
+    const deltaY = event.clientY - dragState.startClientY;
+    const horizontalDistance = Math.abs(deltaX);
+    const verticalDistance = Math.abs(deltaY);
+    const hasExceededDragThreshold = horizontalDistance > 10 && horizontalDistance > verticalDistance;
+    if (hasExceededDragThreshold && !dragState.isDragging) {
+      dragState.isDragging = true;
+      setIsDraggingTabs(true);
+      tabListElement.setPointerCapture(event.pointerId);
+    }
+    if (!dragState.isDragging)
+      return;
+    event.preventDefault();
+    tabListElement.scrollLeft = dragState.startScrollLeft - deltaX;
+  };
+  const handleEndTabListDrag = (event) => {
+    const dragState = dragStateRef.current;
+    const tabListElement = tabListRef.current;
+    if (!dragState.isPointerDown)
+      return;
+    if (dragState.pointerId !== event.pointerId)
+      return;
+    if (tabListElement == null ? void 0 : tabListElement.hasPointerCapture(event.pointerId)) {
+      tabListElement.releasePointerCapture(event.pointerId);
+    }
+    if (dragState.isDragging) {
+      suppressClickRef.current = true;
+      window.setTimeout(() => {
+        suppressClickRef.current = false;
+      }, 0);
+    }
+    dragStateRef.current = {
+      isPointerDown: false,
+      isDragging: false,
+      pointerId: null,
+      startClientX: 0,
+      startClientY: 0,
+      startScrollLeft: 0
+    };
+    setIsDraggingTabs(false);
+  };
+  const handleTabListClickCapture = (event) => {
+    if (!suppressClickRef.current)
+      return;
+    event.preventDefault();
+    event.stopPropagation();
+    suppressClickRef.current = false;
+  };
+  const handleSelectHiddenItem = (nextValue) => {
+    handleSelect(nextValue);
+    setIsMoreMenuOpen(false);
+  };
+  const updateActiveUnderline = useCallback(() => {
+    if (isBarVariant) {
+      setActiveUnderlineStyle({
+        transform: "translateX(0px)",
+        width: 0,
+        opacity: 0
+      });
+      return;
+    }
+    const activeIndex = renderedItems.findIndex((item) => item.value === value);
+    const activeButton = activeIndex >= 0 ? buttonRefs.current[activeIndex] : null;
+    if (!activeButton || !tabListRef.current) {
+      setActiveUnderlineStyle((currentStyle) => __spreadProps(__spreadValues({}, currentStyle), {
+        opacity: 0
+      }));
+      return;
+    }
+    setActiveUnderlineStyle({
+      transform: `translateX(${activeButton.offsetLeft}px)`,
+      width: activeButton.offsetWidth,
+      opacity: 1
+    });
+  }, [isBarVariant, renderedItems, value]);
+  useLayoutEffect(() => {
+    updateActiveUnderline();
+  }, [updateActiveUnderline]);
+  useEffect(() => {
+    if (isBarVariant || !shouldUseOverflowScroll)
+      return;
+    const tabListElement = tabListRef.current;
+    if (!tabListElement)
+      return;
+    const handleScroll = () => {
+      updateActiveUnderline();
+      updateScrollAffordances();
+    };
+    tabListElement.addEventListener("scroll", handleScroll, { passive: true });
+    updateScrollAffordances();
+    return () => {
+      tabListElement.removeEventListener("scroll", handleScroll);
+    };
+  }, [isBarVariant, shouldUseOverflowScroll, updateActiveUnderline, updateScrollAffordances]);
+  useEffect(() => {
+    if (!shouldUseOverflowScroll)
+      return;
+    updateScrollAffordances();
+  }, [renderedItems, shouldUseOverflowScroll, updateScrollAffordances, value]);
+  useEffect(() => {
+    if (isBarVariant && !shouldUseOverflowScroll)
+      return;
+    if (typeof ResizeObserver === "undefined")
+      return;
+    const tabListElement = tabListRef.current;
+    if (!tabListElement)
+      return;
+    const resizeObserver = new ResizeObserver(() => {
+      updateActiveUnderline();
+      updateScrollAffordances();
+    });
+    resizeObserver.observe(tabListElement);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [isBarVariant, shouldUseOverflowScroll, updateActiveUnderline, updateScrollAffordances]);
+  useEffect(() => {
+    if (!shouldUseOverflowScroll)
+      return;
+    const activeIndex = renderedItems.findIndex((item) => item.value === value);
+    const activeButton = activeIndex >= 0 ? buttonRefs.current[activeIndex] : null;
+    if (!activeButton)
+      return;
+    activeButton.scrollIntoView({
+      behavior: getScrollBehavior(enableAnimations),
+      block: "nearest",
+      inline: "nearest"
+    });
+  }, [enableAnimations, renderedItems, shouldUseOverflowScroll, value]);
+  if (shouldUseOverflowSelect) {
+    return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx(
+      Select,
+      {
+        ariaLabel,
+        className: "w-full",
+        disabled: isSelectDisabled,
+        items: selectItems,
+        onChange: handleSelect,
+        value
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: cn(
+        "relative inline-flex max-w-full items-stretch font-agg-sans bg-agg-secondary",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: tabListRef,
+            role: "tablist",
+            "aria-label": resolvedAriaLabel,
+            className: cn("relative", tabListClassName),
+            onClickCapture: handleTabListClickCapture,
+            onPointerCancel: handleEndTabListDrag,
+            onPointerDown: handleTabListPointerDown,
+            onPointerMove: handleTabListPointerMove,
+            onPointerUp: handleEndTabListDrag,
+            onWheel: handleTabListWheel,
+            children: [
+              renderedItems.map((item, index) => {
+                const isActive = item.value === value;
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    ref: (buttonElement) => {
+                      buttonRefs.current[index] = buttonElement;
+                    },
+                    type: "button",
+                    role: "tab",
+                    tabIndex: isActive ? 0 : -1,
+                    "aria-selected": isActive,
+                    "aria-label": item.label,
+                    disabled: item.disabled,
+                    onClick: () => handleSelect(item.value),
+                    onKeyDown: (event) => handleKeyDown(event, index),
+                    className: cn(
+                      getTabButtonClassName({
+                        enableAnimations,
+                        isBarVariant,
+                        isActive,
+                        isDisabled: !!item.disabled,
+                        size
+                      }),
+                      shouldUseOverflowScroll && !isBarVariant && "snap-start"
+                    ),
+                    children: [
+                      isBarVariant ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          "aria-hidden": true,
+                          className: cn(
+                            "pointer-events-none absolute inset-px origin-bottom rounded-[2px] bg-agg-secondary-hover",
+                            getMotionClassName(
+                              enableAnimations,
+                              "transition-[transform,opacity] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none"
+                            ),
+                            isActive ? "scale-y-100 opacity-100" : "scale-y-0 opacity-0"
+                          )
+                        }
+                      ) }) : null,
+                      item.icon ? /* @__PURE__ */ jsx("span", { className: "relative z-10 inline-flex shrink-0 items-center justify-center", children: item.icon }) : null,
+                      /* @__PURE__ */ jsx("span", { className: "relative z-10 truncate whitespace-nowrap [&::first-letter]:uppercase", children: item.label })
+                    ]
+                  },
+                  item.value
+                );
+              }),
+              !isBarVariant ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: cn(
+                    "pointer-events-none absolute bottom-0 left-0 rounded-t-agg-sm bg-agg-primary",
+                    getMotionClassName(
+                      enableAnimations,
+                      "transition-[transform,width,opacity] duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]"
+                    ),
+                    "h-[3px]"
+                  ),
+                  style: activeUnderlineStyle
+                }
+              ) : null
+            ]
+          }
+        ),
+        shouldUseOverflowScroll && !isBarVariant ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: cn(
+                "pointer-events-none absolute top-0 bottom-0 left-0 z-10 w-12 md:w-18 bg-gradient-to-r from-agg-secondary via-agg-secondary to-transparent",
+                getMotionClassName(enableAnimations, "transition-opacity duration-200"),
+                scrollAffordanceState.showStart ? "opacity-100" : "opacity-0"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: cn(
+                "pointer-events-none absolute top-0 right-0 bottom-0 z-10 w-12 md:w-18 bg-gradient-to-l from-agg-secondary via-agg-secondary to-transparent",
+                getMotionClassName(enableAnimations, "transition-opacity duration-200"),
+                scrollAffordanceState.showEnd ? "opacity-100" : "opacity-0"
+              )
+            }
+          )
+        ] }) : null,
+        shouldShowMoreButton ? /* @__PURE__ */ jsxs(DropdownMenu.Root, { open: isMoreMenuOpen, onOpenChange: setIsMoreMenuOpen, children: [
+          /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": resolvedOverflowMenuAriaLabel,
+              className: cn(
+                getMoreButtonClassName({
+                  enableAnimations,
+                  isBarVariant,
+                  size
+                }),
+                activeHiddenItem ? "font-agg-bold text-agg-primary" : "font-agg-normal text-agg-foreground"
+              ),
+              children: /* @__PURE__ */ jsx(Icon, { name: "dots-horizontal", size: isBarVariant ? "s" : "m", color: "currentColor" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx(
+            DropdownMenu.Content,
+            {
+              align: "end",
+              "aria-label": resolvedOverflowMenuAriaLabel,
+              className: cn(
+                AGG_ROOT_CLASS_NAME,
+                rootClassName,
+                "z-agg-dropdown mt-2 min-w-48 overflow-hidden rounded-agg-md border border-agg-separator bg-agg-secondary shadow-agg-popover outline-none"
+              ),
+              "data-agg-animations": enableAnimations ? "true" : "false",
+              sideOffset: 8,
+              children: overflowLayout.hiddenItems.map((item) => {
+                const isSelected = item.value === value;
+                return /* @__PURE__ */ jsxs(
+                  DropdownMenu.Item,
+                  {
+                    disabled: item.disabled,
+                    onSelect: () => handleSelectHiddenItem(item.value),
+                    className: cn(
+                      "cursor-pointer disabled:cursor-not-allowed",
+                      "flex w-full items-center gap-2 px-4 py-2 text-left text-agg-sm leading-agg-5 outline-none",
+                      getMotionClassName(enableAnimations, "transition-colors"),
+                      "focus:bg-agg-secondary-hover data-[highlighted]:bg-agg-secondary-hover",
+                      isSelected ? "font-agg-bold text-agg-primary" : "font-agg-normal text-agg-foreground",
+                      item.disabled && "cursor-not-allowed opacity-60"
+                    ),
+                    children: [
+                      item.icon ? /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0 items-center justify-center", children: item.icon }) : null,
+                      /* @__PURE__ */ jsx("span", { className: "truncate whitespace-nowrap [&::first-letter]:uppercase", children: item.label })
+                    ]
+                  },
+                  item.value
+                );
+              })
+            }
+          ) })
+        ] }) : null,
+        shouldUseOverflowMenu ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "pointer-events-none invisible fixed top-0 left-0 -z-10 h-0 overflow-hidden whitespace-nowrap",
+            children: [
+              items.map((item) => /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  ref: (tabElement) => handleMeasureTabRef(item.value, tabElement),
+                  className: getMeasureTabClassName({
+                    isBarVariant,
+                    size
+                  }),
+                  children: [
+                    item.icon ? /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0 items-center justify-center", children: item.icon }) : null,
+                    /* @__PURE__ */ jsx("span", { children: item.label })
+                  ]
+                },
+                `measure-${item.value}`
+              )),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  ref: moreButtonMeasureRef,
+                  className: getMoreButtonClassName({
+                    enableAnimations,
+                    isBarVariant,
+                    size
+                  }),
+                  children: /* @__PURE__ */ jsx(Icon, { name: "dots-horizontal", size: isBarVariant ? "s" : "m", color: "currentColor" })
+                }
+              )
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+};
+Tabs.displayName = "Tabs";
+
+export {
+  Tabs
+};