@agg-market/ui 0.0.1 → 0.0.4

package/dist/chunk-VLIJ7PQK.mjs

@@ -1,792 +0,0 @@
-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
-};