@agg-market/ui 5.0.0 → 7.0.0

package/dist/chunk-S3H63TQ5.mjs

@@ -1,537 +0,0 @@
-import {
-  Select
-} from "./chunk-YJA5VQW6.mjs";
-import {
-  __spreadProps,
-  __spreadValues,
-  cn,
-  getMotionClassName,
-  getScrollBehavior
-} from "./chunk-GJ4U5NCE.mjs";
-
-// src/primitives/tabs/index.tsx
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { useLabels, useSdkUiConfig } from "@agg-market/hooks";
-
-// 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;
-};
-
-// src/primitives/tabs/index.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var mobileTabsMediaQuery = "(max-width: 512px)";
-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",
-    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"
-    ) : 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 Tabs = ({
-  items,
-  value,
-  onChange,
-  variant = "bar",
-  size = "m",
-  overflowBehavior,
-  ariaLabel,
-  className,
-  classNames
-}) => {
-  const labels = useLabels();
-  const { enableAnimations } = 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 [isMobileViewport, setIsMobileViewport] = useState(false);
-  const [isDraggingTabs, setIsDraggingTabs] = useState(false);
-  const [activeUnderlineStyle, setActiveUnderlineStyle] = useState({
-    transform: "translateX(0px)",
-    width: 0,
-    opacity: 0
-  });
-  const [scrollAffordanceState, setScrollAffordanceState] = useState({
-    showStart: false,
-    showEnd: false
-  });
-  const tabListRef = useRef(null);
-  const isBarVariant = variant === "bar";
-  const resolvedOverflowBehavior = useMemo(() => {
-    if (overflowBehavior)
-      return overflowBehavior;
-    if (!isBarVariant)
-      return "scroll";
-    return isMobileViewport ? "select" : "scroll";
-  }, [isBarVariant, isMobileViewport, overflowBehavior]);
-  const shouldUseOverflowScroll = resolvedOverflowBehavior === "scroll";
-  const shouldUseOverflowSelect = resolvedOverflowBehavior === "select";
-  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 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 = items;
-  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 == null ? void 0 : event.key) {
-      case "ArrowRight": {
-        event == null ? void 0 : event.preventDefault();
-        handleMoveFocus(findNextEnabledIndex(renderedItems, index, 1));
-        return;
-      }
-      case "ArrowLeft": {
-        event == null ? void 0 : event.preventDefault();
-        handleMoveFocus(findNextEnabledIndex(renderedItems, index, -1));
-        return;
-      }
-      case "Home": {
-        event == null ? void 0 : event.preventDefault();
-        handleMoveFocus(findEdgeEnabledIndex(renderedItems, 1));
-        return;
-      }
-      case "End": {
-        event == null ? void 0 : event.preventDefault();
-        handleMoveFocus(findEdgeEnabledIndex(renderedItems, -1));
-        return;
-      }
-      default:
-        return;
-    }
-  };
-  const tabListClassName = cn(
-    "inline-flex items-stretch bg-agg-secondary",
-    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")
-  );
-  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 == null ? void 0 : event.preventDefault();
-    event == null ? void 0 : event.stopPropagation();
-    suppressClickRef.current = 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 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;
-    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__ */ jsx("div", { className: cn("w-full", className, classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ jsx(
-      Select,
-      {
-        ariaLabel,
-        className: "w-full",
-        disabled: isSelectDisabled,
-        items: selectItems,
-        onChange: handleSelect,
-        value
-      }
-    ) });
-  }
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "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__ */ jsxs(
-          "div",
-          {
-            ref: tabListRef,
-            role: "tablist",
-            "aria-label": resolvedAriaLabel,
-            className: cn("relative", tabListClassName, classNames == null ? void 0 : classNames.tabList),
-            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: (e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      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-in-out"
-                    ),
-                    "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-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"
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              "aria-hidden": true,
-              className: cn(
-                "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
-      ]
-    }
-  );
-};
-Tabs.displayName = "Tabs";
-
-export {
-  Tabs
-};