@agg-market/ui 1.0.0 → 3.0.0

package/dist/tabs.js

@@ -1,12 +1,10 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -46,14 +44,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/primitives/tabs/index.tsx
@@ -64,10 +54,10 @@ __export(tabs_exports, {
 module.exports = __toCommonJS(tabs_exports);
 var import_react2 = require("react");
 var import_hooks2 = require("@agg-market/hooks");
-var DropdownMenu = __toESM(require("@radix-ui/react-dropdown-menu"));
 
-// src/constants.ts
-var AGG_ROOT_CLASS_NAME = "agg-root";
+// src/primitives/select/index.tsx
+var import_react = require("react");
+var import_hooks = require("@agg-market/hooks");
 
 // src/shared/utils.ts
 var cn = (...values) => values.filter(Boolean).join(" ");
@@ -141,14 +131,10 @@ var ArrowsToDotIcon = (_a) => {
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "path",
           {
-            d: "M8 2V5M8 11V14M2 8H5M11 8H14M3.76 3.76L5.9 5.9M10.1 10.1L12.24 12.24M12.24 3.76L10.1 5.9M5.9 10.1L3.76 12.24",
-            stroke: "currentColor",
-            strokeWidth: "1.25",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
+            d: "M8 6.66667C8.73667 6.66667 9.33333 7.26333 9.33333 8C9.33333 8.73667 8.73667 9.33333 8 9.33333C7.26333 9.33333 6.66667 8.73667 6.66667 8C6.66667 7.26333 7.26333 6.66667 8 6.66667ZM5.27867 7.05733L3.39267 5.17133C3.132 4.91067 2.71067 4.91067 2.45 5.17133C2.18933 5.432 2.18933 5.854 2.45 6.114L3.67467 7.33333H0.666667C0.298 7.33333 0 7.632 0 8C0 8.368 0.298 8.66667 0.666667 8.66667H3.662L2.44867 9.88667C2.18867 10.148 2.19 10.5693 2.45133 10.8293C2.71267 11.0893 3.13467 11.088 3.394 10.8267L5.27933 8.93133C5.79467 8.41467 5.79467 7.574 5.27933 7.05667L5.27867 7.05733ZM7.068 5.278C7.56133 5.79267 8.45 5.79267 8.94267 5.278L10.828 3.392C11.0887 3.13133 11.0887 2.70933 10.828 2.44933C10.5673 2.18867 10.146 2.18867 9.88533 2.44933L8.66667 3.674V0.666667C8.66667 0.298667 8.36867 0 8 0C7.63133 0 7.33333 0.298667 7.33333 0.666667V3.662L6.11333 2.44867C5.852 2.18867 5.43067 2.19 5.17067 2.45133C4.91067 2.71267 4.912 3.13467 5.17333 3.394L7.068 5.278ZM8.94267 10.7213C8.42667 10.2053 7.58533 10.2053 7.06867 10.72L5.17267 12.606C4.91133 12.866 4.91 13.2873 5.17 13.5487C5.42933 13.8093 5.85067 13.8113 6.11267 13.5513L7.33267 12.3307V15.3333C7.33267 15.702 7.63067 16 7.99933 16C8.368 16 8.666 15.702 8.666 15.3333V12.3307L9.88467 13.55C10.1453 13.8107 10.5667 13.8107 10.8273 13.55C11.088 13.2893 11.088 12.868 10.8273 12.6073L8.94267 10.7213ZM15.3333 7.33333H12.3307L13.55 6.114C13.8107 5.854 13.8107 5.432 13.55 5.17133C13.2893 4.91067 12.868 4.91067 12.6073 5.17133L10.7213 7.05733C10.2053 7.574 10.2047 8.41467 10.72 8.93133L12.606 10.8273C12.866 11.088 13.2873 11.09 13.5487 10.83C13.81 10.57 13.8113 10.1487 13.5513 9.88733L12.3307 8.66733H15.3333C15.702 8.66733 16 8.36867 16 8.00067C16 7.63267 15.702 7.334 15.3333 7.334V7.33333Z",
+            fill: "currentColor"
           }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "8", cy: "8", r: "1.5", fill: "currentColor" })
+        )
       ]
     })
   );
@@ -682,14 +668,9 @@ InfoIcon.displayName = "InfoIcon";
 
 // src/primitives/icon/icon.constants.ts
 var iconSizeClasses = {
-  xxs: "h-2 w-2",
-  xs: "h-3 w-3",
-  s: "h-4 w-4",
-  ms: "h-5 w-5",
-  m: "h-6 w-6",
-  l: "h-8 w-8",
-  xl: "h-10 w-10",
-  xxl: "h-12 w-12"
+  small: "h-4 w-4",
+  medium: "h-6 w-6",
+  large: "h-8 w-8"
 };
 
 // src/primitives/icon/svg/check-badge.tsx
@@ -1395,7 +1376,7 @@ var Icon = (_a) => {
   var _b = _a, {
     name,
     color,
-    size = "m",
+    size = "medium",
     className = "text-agg-primary",
     style
   } = _b, props = __objRest(_b, [
@@ -1408,13 +1389,18 @@ var Icon = (_a) => {
   const Component = iconRegistry[name];
   const resolvedStyle = resolveIconStyle(color, style);
   const resolvedClassName = cn(iconSizeClasses[size], className);
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Component, __spreadValues({ color, className: resolvedClassName, style: resolvedStyle }, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    Component,
+    __spreadValues({
+      color,
+      className: cn("group/agg-icon", resolvedClassName),
+      style: resolvedStyle
+    }, props)
+  );
 };
 Icon.displayName = "Icon";
 
 // src/primitives/select/index.tsx
-var import_react = require("react");
-var import_hooks = require("@agg-market/hooks");
 var import_jsx_runtime43 = require("react/jsx-runtime");
 var Select = ({
   items,
@@ -1436,7 +1422,7 @@ var Select = ({
     if (!isOpen)
       return;
     const handlePointerDown = (e) => {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
+      if (containerRef.current && !containerRef.current.contains(e == null ? void 0 : e.target)) {
         close();
       }
     };
@@ -1447,7 +1433,7 @@ var Select = ({
     if (!isOpen)
       return;
     const handleKey = (e) => {
-      if (e.key === "Escape")
+      if ((e == null ? void 0 : e.key) === "Escape")
         close();
     };
     document.addEventListener("keydown", handleKey);
@@ -1456,7 +1442,7 @@ var Select = ({
   const isDisabled = disabled || !hasEnabledItems;
   const selectedItem = items.find((item) => item.value === value);
   if (!hasAnyIcon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("label", { className: cn("relative inline-flex w-full", className), children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("label", { className: cn("group/agg-select", "relative inline-flex w-full", className), children: [
       /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
         "select",
         {
@@ -1465,7 +1451,7 @@ var Select = ({
             "w-full appearance-none rounded-agg-md border border-agg-separator bg-agg-secondary px-4 py-2 pr-10 font-agg-sans text-agg-sm leading-agg-5 text-agg-foreground outline-none",
             getMotionClassName(
               enableAnimations,
-              "transition-[border-color,box-shadow] duration-200 ease-out"
+              "transition-[border-color,box-shadow] duration-200 ease-in-out"
             ),
             "focus:border-agg-primary focus:ring-2 focus:ring-agg-primary/15",
             "disabled:cursor-not-allowed disabled:opacity-60"
@@ -1476,88 +1462,95 @@ var Select = ({
           children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("option", { value: item.value, disabled: item.disabled, children: item.label }, item.value))
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "pointer-events-none absolute inset-y-0 right-3 inline-flex items-center justify-center text-agg-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Icon, { name: "chevron-down", size: "s", color: "currentColor" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "pointer-events-none absolute inset-y-0 right-3 inline-flex items-center justify-center text-agg-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Icon, { name: "chevron-down", size: "small", color: "currentColor" }) })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { ref: containerRef, className: cn("relative inline-flex w-full", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
-      "button",
-      {
-        type: "button",
-        "aria-label": ariaLabel != null ? ariaLabel : labels.common.selectAria,
-        "aria-expanded": isOpen,
-        "aria-haspopup": "listbox",
-        disabled: isDisabled,
-        className: cn(
-          "w-full rounded-agg-md border border-agg-separator bg-agg-secondary px-4 py-2 pr-10 font-agg-sans text-agg-sm leading-agg-5 text-agg-foreground outline-none",
-          "flex items-center gap-2 text-left",
-          getMotionClassName(
-            enableAnimations,
-            "transition-[border-color,box-shadow] duration-200 ease-out"
-          ),
-          "focus:border-agg-primary focus:ring-2 focus:ring-agg-primary/15",
-          "disabled:cursor-not-allowed disabled:opacity-60"
-        ),
-        onClick: () => setIsOpen((prev) => !prev),
-        children: [
-          (selectedItem == null ? void 0 : selectedItem.iconUrl) ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-            "img",
-            {
-              src: selectedItem.iconUrl,
-              alt: "",
-              className: "h-4 w-4 shrink-0 rounded-sm object-contain"
-            }
-          ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "flex-1 truncate", children: (_a = selectedItem == null ? void 0 : selectedItem.label) != null ? _a : "" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "pointer-events-none absolute inset-y-0 right-3 inline-flex items-center justify-center text-agg-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Icon, { name: "chevron-down", size: "s", color: "currentColor" }) }),
-    isOpen ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-      "div",
-      {
-        role: "listbox",
-        "aria-label": ariaLabel != null ? ariaLabel : labels.common.selectAria,
-        className: "absolute top-full left-0 z-50 mt-1 w-full overflow-hidden rounded-agg-md border border-agg-separator bg-agg-secondary shadow-lg",
-        children: items.map((item) => {
-          const isSelected = item.value === value;
-          return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
-            "button",
-            {
-              type: "button",
-              role: "option",
-              "aria-selected": isSelected,
-              disabled: item.disabled,
-              className: cn(
-                "flex w-full items-center gap-2 px-4 py-2 text-left text-agg-sm leading-agg-5 outline-none",
-                "hover:bg-agg-secondary-hover focus-visible:bg-agg-secondary-hover",
-                isSelected ? "font-agg-bold text-agg-primary" : "font-agg-normal text-agg-foreground",
-                item.disabled && "cursor-not-allowed opacity-60"
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      className: cn("group/agg-select", "relative inline-flex w-full", className),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+          "button",
+          {
+            type: "button",
+            "aria-label": ariaLabel != null ? ariaLabel : labels.common.selectAria,
+            "aria-expanded": isOpen,
+            "aria-haspopup": "listbox",
+            disabled: isDisabled,
+            className: cn(
+              "w-full rounded-agg-md border border-agg-separator bg-agg-secondary px-4 py-2 pr-10 font-agg-sans text-agg-sm leading-agg-5 text-agg-foreground outline-none",
+              "flex items-center gap-2 text-left",
+              getMotionClassName(
+                enableAnimations,
+                "transition-[border-color,box-shadow] duration-200 ease-in-out"
               ),
-              onClick: () => {
-                if (!item.disabled) {
-                  onChange(item.value);
-                  close();
+              "focus:border-agg-primary focus:ring-2 focus:ring-agg-primary/15",
+              "disabled:cursor-not-allowed disabled:opacity-60"
+            ),
+            onClick: () => setIsOpen((prev) => !prev),
+            children: [
+              (selectedItem == null ? void 0 : selectedItem.iconUrl) ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                "img",
+                {
+                  src: selectedItem.iconUrl,
+                  alt: "",
+                  className: "h-4 w-4 shrink-0 rounded-sm object-contain"
                 }
-              },
-              children: [
-                item.iconUrl ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-                  "img",
-                  {
-                    src: item.iconUrl,
-                    alt: "",
-                    className: "h-4 w-4 shrink-0 rounded-sm object-contain"
-                  }
-                ) : null,
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "truncate", children: item.label })
-              ]
-            },
-            item.value
-          );
-        })
-      }
-    ) : null
-  ] });
+              ) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "flex-1 truncate", children: (_a = selectedItem == null ? void 0 : selectedItem.label) != null ? _a : "" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "pointer-events-none absolute inset-y-0 right-3 inline-flex items-center justify-center text-agg-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Icon, { name: "chevron-down", size: "small", color: "currentColor" }) }),
+        isOpen ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          "div",
+          {
+            role: "listbox",
+            "aria-label": ariaLabel != null ? ariaLabel : labels.common.selectAria,
+            className: "absolute top-full left-0 z-50 mt-1 w-full overflow-hidden rounded-agg-md border border-agg-separator bg-agg-secondary shadow-lg",
+            children: items.map((item) => {
+              const isSelected = item.value === value;
+              return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  role: "option",
+                  "aria-selected": isSelected,
+                  disabled: item.disabled,
+                  className: cn(
+                    "flex w-full items-center gap-2 px-4 py-2 text-left text-agg-sm leading-agg-5 outline-none",
+                    "hover:bg-agg-secondary-hover focus-visible:bg-agg-secondary-hover",
+                    isSelected ? "font-agg-bold text-agg-primary" : "font-agg-normal text-agg-foreground",
+                    item.disabled && "cursor-not-allowed opacity-60"
+                  ),
+                  onClick: () => {
+                    if (!item.disabled) {
+                      onChange(item.value);
+                      close();
+                    }
+                  },
+                  children: [
+                    item.iconUrl ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                      "img",
+                      {
+                        src: item.iconUrl,
+                        alt: "",
+                        className: "h-4 w-4 shrink-0 rounded-sm object-contain"
+                      }
+                    ) : null,
+                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "truncate", children: item.label })
+                  ]
+                },
+                item.value
+              );
+            })
+          }
+        ) : null
+      ]
+    }
+  );
 };
 Select.displayName = "Select";
 
@@ -1584,86 +1577,10 @@ var findEdgeEnabledIndex = (items, direction) => {
   }
   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
 var import_jsx_runtime44 = require("react/jsx-runtime");
-var mobileTabsMediaQuery = "(max-width: 767px)";
+var mobileTabsMediaQuery = "(max-width: 512px)";
 var getTabButtonClassName = ({
   enableAnimations,
   isBarVariant,
@@ -1675,7 +1592,11 @@ var getTabButtonClassName = ({
   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 ? "hover:text-agg-foreground hover:bg-agg-secondary-hover" : "hover:text-agg-foreground hover:font-bold",
+    getMotionClassName(
+      enableAnimations,
+      "transition-[colors] duration-300 ease-in-out 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"
@@ -1687,35 +1608,6 @@ var getTabButtonClassName = ({
     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,
@@ -1723,12 +1615,12 @@ var Tabs = ({
   variant = "bar",
   size = "m",
   overflowBehavior,
-  overflowMenuAriaLabel,
   ariaLabel,
-  className
+  className,
+  classNames
 }) => {
   const labels = (0, import_hooks2.useLabels)();
-  const { enableAnimations, rootClassName } = (0, import_hooks2.useSdkUiConfig)();
+  const { enableAnimations } = (0, import_hooks2.useSdkUiConfig)();
   const buttonRefs = (0, import_react2.useRef)([]);
   const dragStateRef = (0, import_react2.useRef)({
     isPointerDown: false,
@@ -1740,8 +1632,6 @@ var Tabs = ({
   });
   const suppressClickRef = (0, import_react2.useRef)(false);
   const resolvedAriaLabel = ariaLabel != null ? ariaLabel : labels.common.tabsAria;
-  const resolvedOverflowMenuAriaLabel = overflowMenuAriaLabel != null ? overflowMenuAriaLabel : labels.common.hiddenTabsAria;
-  const [isMoreMenuOpen, setIsMoreMenuOpen] = (0, import_react2.useState)(false);
   const [isMobileViewport, setIsMobileViewport] = (0, import_react2.useState)(false);
   const [isDraggingTabs, setIsDraggingTabs] = (0, import_react2.useState)(false);
   const [activeUnderlineStyle, setActiveUnderlineStyle] = (0, import_react2.useState)({
@@ -1749,39 +1639,21 @@ var Tabs = ({
     width: 0,
     opacity: 0
   });
-  const [overflowLayout, setOverflowLayout] = (0, import_react2.useState)({
-    visibleItems: items,
-    hiddenItems: []
-  });
   const [scrollAffordanceState, setScrollAffordanceState] = (0, import_react2.useState)({
     showStart: false,
     showEnd: false
   });
-  const containerRef = (0, import_react2.useRef)(null);
   const tabListRef = (0, import_react2.useRef)(null);
-  const moreButtonMeasureRef = (0, import_react2.useRef)(null);
-  const tabMeasureRefs = (0, import_react2.useRef)(/* @__PURE__ */ new Map());
   const isBarVariant = variant === "bar";
   const resolvedOverflowBehavior = (0, import_react2.useMemo)(() => {
     if (overflowBehavior)
       return overflowBehavior;
     if (!isBarVariant)
       return "scroll";
-    return isMobileViewport ? "select" : "menu";
+    return isMobileViewport ? "select" : "scroll";
   }, [isBarVariant, isMobileViewport, overflowBehavior]);
-  const shouldUseOverflowMenu = resolvedOverflowBehavior === "menu";
   const shouldUseOverflowScroll = resolvedOverflowBehavior === "scroll";
   const shouldUseOverflowSelect = resolvedOverflowBehavior === "select";
-  const handleMeasureTabRef = (0, import_react2.useCallback)(
-    (tabValue, tabElement) => {
-      if (!tabElement) {
-        tabMeasureRefs.current.delete(tabValue);
-        return;
-      }
-      tabMeasureRefs.current.set(tabValue, tabElement);
-    },
-    []
-  );
   (0, import_react2.useEffect)(() => {
     if (typeof window === "undefined")
       return;
@@ -1801,55 +1673,6 @@ var Tabs = ({
       mediaQueryList.removeListener(handleMediaQueryChange);
     };
   }, []);
-  const handleRecalculateOverflow = (0, import_react2.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]);
-  (0, import_react2.useEffect)(() => {
-    handleRecalculateOverflow();
-  }, [handleRecalculateOverflow]);
-  (0, import_react2.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]);
-  (0, import_react2.useEffect)(() => {
-    if (overflowLayout.hiddenItems.length > 0)
-      return;
-    setIsMoreMenuOpen(false);
-  }, [overflowLayout.hiddenItems.length]);
   const updateScrollAffordances = (0, import_react2.useCallback)(() => {
     if (!shouldUseOverflowScroll) {
       setScrollAffordanceState({
@@ -1867,8 +1690,7 @@ var Tabs = ({
       showEnd: maxScrollLeft - tabListElement.scrollLeft > 4
     });
   }, [shouldUseOverflowScroll]);
-  const renderedItems = shouldUseOverflowMenu ? overflowLayout.visibleItems : items;
-  const shouldShowMoreButton = shouldUseOverflowMenu && overflowLayout.hiddenItems.length > 0;
+  const renderedItems = items;
   const selectItems = (0, import_react2.useMemo)(() => {
     return items.map((item) => ({
       value: item.value,
@@ -1893,24 +1715,24 @@ var Tabs = ({
     (_a = buttonRefs.current[index]) == null ? void 0 : _a.focus();
   };
   const handleKeyDown = (event, index) => {
-    switch (event.key) {
+    switch (event == null ? void 0 : event.key) {
       case "ArrowRight": {
-        event.preventDefault();
+        event == null ? void 0 : event.preventDefault();
         handleMoveFocus(findNextEnabledIndex(renderedItems, index, 1));
         return;
       }
       case "ArrowLeft": {
-        event.preventDefault();
+        event == null ? void 0 : event.preventDefault();
         handleMoveFocus(findNextEnabledIndex(renderedItems, index, -1));
         return;
       }
       case "Home": {
-        event.preventDefault();
+        event == null ? void 0 : event.preventDefault();
         handleMoveFocus(findEdgeEnabledIndex(renderedItems, 1));
         return;
       }
       case "End": {
-        event.preventDefault();
+        event == null ? void 0 : event.preventDefault();
         handleMoveFocus(findEdgeEnabledIndex(renderedItems, -1));
         return;
       }
@@ -1918,22 +1740,16 @@ var Tabs = ({
         return;
     }
   };
-  const activeHiddenItem = (0, import_react2.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(
+    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"
+    shouldUseOverflowScroll && (isDraggingTabs ? "cursor-grabbing" : "cursor-grab")
   );
   const handleTabListWheel = (event) => {
     if (!shouldUseOverflowScroll)
@@ -2022,14 +1838,10 @@ var Tabs = ({
   const handleTabListClickCapture = (event) => {
     if (!suppressClickRef.current)
       return;
-    event.preventDefault();
-    event.stopPropagation();
+    event == null ? void 0 : event.preventDefault();
+    event == null ? void 0 : event.stopPropagation();
     suppressClickRef.current = false;
   };
-  const handleSelectHiddenItem = (nextValue) => {
-    handleSelect(nextValue);
-    setIsMoreMenuOpen(false);
-  };
   const updateActiveUnderline = (0, import_react2.useCallback)(() => {
     if (isBarVariant) {
       setActiveUnderlineStyle({
@@ -2097,18 +1909,34 @@ var Tabs = ({
   (0, import_react2.useEffect)(() => {
     if (!shouldUseOverflowScroll)
       return;
+    const tabListElement = tabListRef.current;
+    if (!tabListElement)
+      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"
+    if (tabListElement.scrollWidth - tabListElement.clientWidth <= 1)
+      return;
+    const currentScrollLeft = tabListElement.scrollLeft;
+    const currentScrollRight = currentScrollLeft + tabListElement.clientWidth;
+    const activeButtonLeft = activeButton.offsetLeft;
+    const activeButtonRight = activeButtonLeft + activeButton.offsetWidth;
+    let nextScrollLeft = currentScrollLeft;
+    if (activeButtonLeft < currentScrollLeft) {
+      nextScrollLeft = activeButtonLeft;
+    } else if (activeButtonRight > currentScrollRight) {
+      nextScrollLeft = activeButtonRight - tabListElement.clientWidth;
+    }
+    if (Math.abs(nextScrollLeft - currentScrollLeft) < 1)
+      return;
+    tabListElement.scrollTo({
+      left: Math.max(0, nextScrollLeft),
+      behavior: getScrollBehavior(enableAnimations)
     });
   }, [enableAnimations, renderedItems, shouldUseOverflowScroll, value]);
   if (shouldUseOverflowSelect) {
-    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: cn("w-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: cn("w-full", className, classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       Select,
       {
         ariaLabel,
@@ -2123,10 +1951,12 @@ var Tabs = ({
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
     "div",
     {
-      ref: containerRef,
       className: cn(
-        "relative inline-flex max-w-full items-stretch font-agg-sans bg-agg-secondary",
-        className
+        "group/agg-tabs",
+        "relative max-w-full items-stretch font-agg-sans bg-agg-secondary",
+        "inline-flex",
+        className,
+        classNames == null ? void 0 : classNames.root
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
@@ -2135,7 +1965,7 @@ var Tabs = ({
             ref: tabListRef,
             role: "tablist",
             "aria-label": resolvedAriaLabel,
-            className: cn("relative", tabListClassName),
+            className: cn("relative", tabListClassName, classNames == null ? void 0 : classNames.tabList),
             onClickCapture: handleTabListClickCapture,
             onPointerCancel: handleEndTabListDrag,
             onPointerDown: handleTabListPointerDown,
@@ -2157,7 +1987,11 @@ var Tabs = ({
                     "aria-selected": isActive,
                     "aria-label": item.label,
                     disabled: item.disabled,
-                    onClick: () => handleSelect(item.value),
+                    onClick: (e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      handleSelect(item.value);
+                    },
                     onKeyDown: (event) => handleKeyDown(event, index),
                     className: cn(
                       getTabButtonClassName({
@@ -2199,7 +2033,7 @@ var Tabs = ({
                     "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)]"
+                      "transition-[transform,width,opacity] duration-300 ease-in-out"
                     ),
                     "h-[3px]"
                   ),
@@ -2215,7 +2049,7 @@ var Tabs = ({
             {
               "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",
+                "pointer-events-none absolute top-0 bottom-0 left-8 z-10 w-12 md:w-18 bg-linear-to-r from-agg-secondary via-agg-secondary to-transparent",
                 getMotionClassName(enableAnimations, "transition-opacity duration-200"),
                 scrollAffordanceState.showStart ? "opacity-100" : "opacity-0"
               )
@@ -2226,104 +2060,13 @@ var Tabs = ({
             {
               "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",
+                "pointer-events-none absolute top-0 right-8 bottom-0 z-10 w-12 md:w-18 bg-linear-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__ */ (0, import_jsx_runtime44.jsxs)(DropdownMenu.Root, { open: isMoreMenuOpen, onOpenChange: setIsMoreMenuOpen, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime44.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__ */ (0, import_jsx_runtime44.jsx)(Icon, { name: "dots-horizontal", size: isBarVariant ? "s" : "m", color: "currentColor" })
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DropdownMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime44.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__ */ (0, import_jsx_runtime44.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__ */ (0, import_jsx_runtime44.jsx)("span", { className: "inline-flex shrink-0 items-center justify-center", children: item.icon }) : null,
-                      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "truncate whitespace-nowrap [&::first-letter]:uppercase", children: item.label })
-                    ]
-                  },
-                  item.value
-                );
-              })
-            }
-          ) })
-        ] }) : null,
-        shouldUseOverflowMenu ? /* @__PURE__ */ (0, import_jsx_runtime44.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__ */ (0, import_jsx_runtime44.jsxs)(
-                "span",
-                {
-                  ref: (tabElement) => handleMeasureTabRef(item.value, tabElement),
-                  className: getMeasureTabClassName({
-                    isBarVariant,
-                    size
-                  }),
-                  children: [
-                    item.icon ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "inline-flex shrink-0 items-center justify-center", children: item.icon }) : null,
-                    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { children: item.label })
-                  ]
-                },
-                `measure-${item.value}`
-              )),
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                "span",
-                {
-                  ref: moreButtonMeasureRef,
-                  className: getMoreButtonClassName({
-                    enableAnimations,
-                    isBarVariant,
-                    size
-                  }),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Icon, { name: "dots-horizontal", size: isBarVariant ? "s" : "m", color: "currentColor" })
-                }
-              )
-            ]
-          }
-        ) : null
+        ] }) : null
       ]
     }
   );