@xsolla/xui-b2c-top-navigation 0.0.0-stage → 0.223.0

package/native/index.js

@@ -0,0 +1,957 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  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/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  TopNavigation: () => TopNavigation
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/TopNavigation.tsx
+var import_react3 = __toESM(require("react"));
+
+// ../../foundation/primitives-native/src/Box.tsx
+var import_react = __toESM(require("react"));
+var import_react_native = require("react-native");
+var roleToAccessibilityRole = {
+  button: "button",
+  link: "link",
+  img: "image",
+  image: "image",
+  summary: "summary",
+  switch: "switch",
+  checkbox: "checkbox",
+  radio: "radio",
+  heading: "header",
+  text: "text",
+  search: "search",
+  alert: "alert",
+  none: "none",
+  presentation: "none",
+  progressbar: "progressbar",
+  scrollbar: "scrollbar",
+  adjustable: "adjustable",
+  tab: "tab",
+  menu: "menu",
+  menuitem: "menuitem",
+  list: "list",
+  timer: "timer"
+};
+var toGapValue = (gap) => {
+  if (gap === void 0) return void 0;
+  if (typeof gap === "number") return gap;
+  const pxMatch = /^(\d+(?:\.\d+)?)px$/.exec(gap);
+  if (pxMatch) return Number(pxMatch[1]);
+  const asNumber = Number(gap);
+  return Number.isFinite(asNumber) ? asNumber : void 0;
+};
+var toNativeDisplay = (display) => display === "none" ? "none" : void 0;
+var Box = ({
+  children,
+  onPress,
+  onLayout,
+  onMoveShouldSetResponder,
+  onResponderGrant,
+  onResponderMove,
+  onResponderRelease,
+  onResponderTerminate,
+  backgroundColor,
+  borderColor,
+  borderWidth,
+  borderBottomWidth,
+  borderBottomColor,
+  borderTopWidth,
+  borderTopColor,
+  borderLeftWidth,
+  borderLeftColor,
+  borderRightWidth,
+  borderRightColor,
+  borderRadius,
+  borderStyle,
+  height,
+  padding,
+  paddingHorizontal,
+  paddingVertical,
+  margin,
+  marginTop,
+  marginBottom,
+  marginLeft,
+  marginRight,
+  display,
+  flexDirection,
+  flexWrap,
+  alignItems,
+  justifyContent,
+  alignSelf,
+  position,
+  top,
+  bottom,
+  left,
+  right,
+  width,
+  minWidth,
+  minHeight,
+  maxWidth,
+  maxHeight,
+  flex,
+  flexShrink,
+  gap,
+  overflow,
+  opacity,
+  zIndex,
+  hoverStyle,
+  pressStyle,
+  style,
+  disabled,
+  "data-testid": dataTestId,
+  testID,
+  as,
+  src,
+  alt,
+  ...rest
+}) => {
+  const getContainerStyle = (pressed) => ({
+    backgroundColor: pressed && pressStyle?.backgroundColor ? pressStyle.backgroundColor : backgroundColor,
+    borderColor,
+    borderWidth,
+    borderBottomWidth,
+    borderBottomColor,
+    borderTopWidth,
+    borderTopColor,
+    borderLeftWidth,
+    borderLeftColor,
+    borderRightWidth,
+    borderRightColor,
+    borderRadius,
+    borderStyle,
+    overflow,
+    opacity: opacity ?? (disabled ? 0.5 : void 0),
+    zIndex,
+    height,
+    width,
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight,
+    padding,
+    paddingHorizontal,
+    paddingVertical,
+    margin,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    display: toNativeDisplay(display),
+    flexDirection,
+    flexWrap,
+    alignItems,
+    justifyContent,
+    alignSelf,
+    position,
+    top,
+    bottom,
+    left,
+    right,
+    flex,
+    flexShrink,
+    gap: toGapValue(gap),
+    ...style
+  });
+  const finalTestID = dataTestId || testID;
+  const {
+    role,
+    tabIndex,
+    onKeyDown,
+    onKeyUp,
+    "aria-label": ariaLabel,
+    "aria-labelledby": _ariaLabelledBy,
+    "aria-current": _ariaCurrent,
+    "aria-disabled": ariaDisabled,
+    "aria-live": ariaLive,
+    "aria-busy": ariaBusy,
+    className,
+    "data-testid": _dataTestId,
+    cursor: _cursor,
+    type: _type,
+    ...nativeRest
+  } = rest;
+  const accessibilityRole = typeof role === "string" && roleToAccessibilityRole[role] || (as === "button" ? "button" : void 0);
+  const isDisabled = Boolean(disabled || ariaDisabled);
+  const accessibilityState = {
+    disabled: isDisabled || void 0,
+    busy: Boolean(ariaBusy) || void 0
+  };
+  const accessibilityLiveRegion = ariaLive === "polite" || ariaLive === "assertive" ? ariaLive : void 0;
+  if (as === "img" && src) {
+    const imageStyle = {
+      width,
+      height,
+      borderRadius,
+      position,
+      top,
+      bottom,
+      left,
+      right,
+      ...style
+    };
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_react_native.Image,
+      {
+        source: { uri: src },
+        style: imageStyle,
+        testID: finalTestID,
+        accessibilityLabel: typeof ariaLabel === "string" ? ariaLabel : alt,
+        resizeMode: "cover",
+        ...nativeRest
+      }
+    );
+  }
+  if (onPress || as === "button") {
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_react_native.Pressable,
+      {
+        onPress: !isDisabled && onPress ? onPress : void 0,
+        disabled: isDisabled,
+        onLayout,
+        onMoveShouldSetResponder,
+        onResponderGrant,
+        onResponderMove,
+        onResponderRelease,
+        onResponderTerminate,
+        style: ({ pressed }) => getContainerStyle(pressed),
+        testID: finalTestID,
+        accessibilityRole,
+        accessibilityLabel: typeof ariaLabel === "string" ? ariaLabel : void 0,
+        accessibilityState,
+        accessibilityLiveRegion,
+        ...nativeRest
+      },
+      children
+    );
+  }
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_react_native.View,
+    {
+      style: getContainerStyle(),
+      testID: finalTestID,
+      onLayout,
+      onMoveShouldSetResponder,
+      onResponderGrant,
+      onResponderMove,
+      onResponderRelease,
+      onResponderTerminate,
+      accessibilityRole,
+      accessibilityLabel: typeof ariaLabel === "string" ? ariaLabel : void 0,
+      accessibilityState,
+      accessibilityLiveRegion,
+      ...nativeRest
+    },
+    children
+  );
+};
+
+// ../../foundation/primitives-native/src/Text.tsx
+var import_react2 = __toESM(require("react"));
+var import_react_native2 = require("react-native");
+var roleMap = {
+  alert: "alert",
+  heading: "header",
+  button: "button",
+  link: "link",
+  text: "text"
+};
+var parseNumericValue = (value) => {
+  if (value === void 0) return void 0;
+  if (typeof value === "number") return value;
+  const parsed = parseFloat(value);
+  return isNaN(parsed) ? void 0 : parsed;
+};
+var Text = ({
+  children,
+  color,
+  fontSize,
+  fontWeight,
+  fontFamily,
+  textAlign,
+  lineHeight,
+  numberOfLines,
+  id,
+  role,
+  testID,
+  "data-testid": dataTestId,
+  style: styleProp,
+  ...props
+}) => {
+  let resolvedFontFamily = fontFamily ? fontFamily.split(",")[0].replace(/['"]/g, "").trim() : void 0;
+  if (resolvedFontFamily === "Pilat Wide" || resolvedFontFamily === "Pilat Wide Bold" || resolvedFontFamily === "Aktiv Grotesk") {
+    resolvedFontFamily = void 0;
+  }
+  const incomingStyle = import_react_native2.StyleSheet.flatten(styleProp);
+  const baseStyle = {
+    color: color ?? incomingStyle?.color,
+    fontSize: typeof fontSize === "number" ? fontSize : void 0,
+    fontWeight,
+    fontFamily: resolvedFontFamily,
+    textDecorationLine: props.textDecoration,
+    textAlign: textAlign ?? incomingStyle?.textAlign,
+    lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),
+    marginTop: parseNumericValue(
+      incomingStyle?.marginTop
+    ),
+    marginBottom: parseNumericValue(
+      incomingStyle?.marginBottom
+    )
+  };
+  const accessibilityRole = role ? roleMap[role] : void 0;
+  return /* @__PURE__ */ import_react2.default.createElement(
+    import_react_native2.Text,
+    {
+      style: baseStyle,
+      numberOfLines,
+      testID: dataTestId || testID || id,
+      accessibilityRole
+    },
+    children
+  );
+};
+
+// src/TopNavigation.tsx
+var import_xui_core = require("@xsolla/xui-core");
+var import_xui_avatar = require("@xsolla/xui-avatar");
+var import_xui_breadcrumbs = require("@xsolla/xui-breadcrumbs");
+var import_xui_button = require("@xsolla/xui-button");
+var import_xui_context_menu = require("@xsolla/xui-context-menu");
+var import_xui_icons_base = require("@xsolla/xui-icons-base");
+var BAR_HEIGHT = 88;
+var BAR_PADDING_VERTICAL = 24;
+var CLUSTER_GAP = 40;
+var MENU_GAP = 24;
+var ACCOUNT_GAP = 8;
+var WINDOWS_LOGO_GAP = 88;
+var LOGO_HEIGHT = 40;
+var NAV_ICON_SIZE = 20;
+var BACK_ICON_SIZE = 18;
+var CURRENCY_ICON_SIZE = 18;
+var MENU_DIVIDER_HEIGHT = 16;
+var ICON_SLIDE_MS = 360;
+var ICON_SLIDE_EASE = "cubic-bezier(0.22, 1, 0.36, 1)";
+var prefersReducedMotion = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react3.useLayoutEffect : import_react3.useEffect;
+var isDarkMode = (mode) => !(mode ?? "dark").includes("light");
+var tintIcon = (icon, color, size) => {
+  if (!import_react3.default.isValidElement(icon)) return icon;
+  const existing = icon.props;
+  return import_react3.default.cloneElement(
+    icon,
+    {
+      size: existing.size ?? size,
+      color,
+      "aria-hidden": true
+    }
+  );
+};
+var MaximizeGlyph = ({
+  size = NAV_ICON_SIZE,
+  color
+}) => /* @__PURE__ */ import_react3.default.createElement(
+  Box,
+  {
+    width: Math.round(size * 0.7),
+    height: Math.round(size * 0.7),
+    borderWidth: 1.5,
+    borderColor: color,
+    borderRadius: 2
+  }
+);
+var ActiveIcon = ({ icon, color, phase, play, travel }) => {
+  const moving = phase === "in" || phase === "out";
+  const collapsed = phase === "out" && play || phase === "in" && !play;
+  const offset = phase === "out" && play ? travel : phase === "in" && !play ? -travel : 0;
+  return /* @__PURE__ */ import_react3.default.createElement(
+    Box,
+    {
+      height: NAV_ICON_SIZE,
+      flexShrink: 0,
+      alignItems: "center",
+      justifyContent: "center",
+      overflow: "visible",
+      "aria-hidden": true,
+      style: {
+        width: collapsed ? 0 : NAV_ICON_SIZE,
+        marginRight: collapsed ? 0 : 4,
+        transform: `translateX(${offset}px)`,
+        opacity: collapsed ? 0 : 1,
+        pointerEvents: "none",
+        transition: moving ? `transform ${ICON_SLIDE_MS}ms ${ICON_SLIDE_EASE}, opacity ${ICON_SLIDE_MS}ms ${ICON_SLIDE_EASE}, width ${ICON_SLIDE_MS}ms ${ICON_SLIDE_EASE}, margin-right ${ICON_SLIDE_MS}ms ${ICON_SLIDE_EASE}` : void 0
+      }
+    },
+    tintIcon(icon, color, NAV_ICON_SIZE)
+  );
+};
+var NavPoint = ({
+  item,
+  isActive,
+  isOpen,
+  iconSlide,
+  iconPlaying,
+  registerAnchor,
+  theme,
+  themeMode,
+  themeProductContext,
+  onOpenChange,
+  onPress,
+  onSelect,
+  linkComponent: LinkComponent
+}) => {
+  const [hovered, setHovered] = (0, import_react3.useState)(false);
+  const hasMenu = Boolean(item.children?.length);
+  const isDisabled = Boolean(item.disabled);
+  const emphasized = isActive || hovered || isOpen;
+  const color = emphasized ? theme.colors.content.brand.secondary : theme.colors.content.secondary;
+  const body = theme.typographyTokens.basic["body-sm"];
+  const iconPhase = item.icon === void 0 || item.icon === null ? "off" : iconSlide?.to === item.key ? "in" : iconSlide?.from === item.key ? "out" : isActive ? "rest" : "off";
+  const showIcon = iconPhase !== "off";
+  const anchorRef = (0, import_react3.useCallback)(
+    (node) => {
+      registerAnchor(item.key, node);
+    },
+    [item.key, registerAnchor]
+  );
+  const trigger = /* @__PURE__ */ import_react3.default.createElement(
+    Box,
+    {
+      as: !LinkComponent || hasMenu ? "button" : void 0,
+      type: !LinkComponent || hasMenu ? "button" : void 0,
+      position: "relative",
+      zIndex: iconPhase === "out" ? 2 : iconPhase === "in" ? 1 : void 0,
+      flexDirection: "row",
+      alignItems: "center",
+      paddingVertical: !hasMenu && !showIcon ? 2 : 0,
+      cursor: isDisabled ? "not-allowed" : "pointer",
+      "aria-label": item.accessibilityLabel || item.label,
+      "aria-current": isActive && !hasMenu ? "page" : void 0,
+      "aria-disabled": isDisabled || void 0,
+      disabled: isDisabled,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      onPress: !isDisabled && !hasMenu && !LinkComponent ? onPress : void 0,
+      testID: item.testID || `top-navigation-item-${item.key}`
+    },
+    item.icon !== void 0 && item.icon !== null && /* @__PURE__ */ import_react3.default.createElement(
+      Box,
+      {
+        ref: anchorRef,
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: 0,
+        height: 0,
+        "aria-hidden": true
+      }
+    ),
+    showIcon && /* @__PURE__ */ import_react3.default.createElement(
+      ActiveIcon,
+      {
+        icon: item.icon,
+        color: theme.colors.content.brand.secondary,
+        phase: iconPhase,
+        play: iconPlaying,
+        travel: iconSlide?.travel ?? 0
+      }
+    ),
+    /* @__PURE__ */ import_react3.default.createElement(
+      Text,
+      {
+        color,
+        fontFamily: theme.fonts.body,
+        fontSize: body.fontSize,
+        lineHeight: body.lineHeight,
+        fontWeight: String(body.accent?.fontWeight ?? 500),
+        numberOfLines: 1
+      },
+      item.label
+    ),
+    hasMenu && /* @__PURE__ */ import_react3.default.createElement(Box, { marginLeft: 4, alignItems: "center" }, isOpen ? /* @__PURE__ */ import_react3.default.createElement(import_xui_icons_base.ChevronUp, { size: NAV_ICON_SIZE, color, "aria-hidden": true }) : /* @__PURE__ */ import_react3.default.createElement(import_xui_icons_base.ChevronDown, { size: NAV_ICON_SIZE, color, "aria-hidden": true }))
+  );
+  const content = LinkComponent && !hasMenu ? /* @__PURE__ */ import_react3.default.createElement(
+    LinkComponent,
+    {
+      item,
+      href: item.href,
+      isActive,
+      disabled: isDisabled,
+      onPress,
+      testID: item.testID || `top-navigation-link-${item.key}`
+    },
+    trigger
+  ) : trigger;
+  if (!hasMenu) return content;
+  return /* @__PURE__ */ import_react3.default.createElement(
+    import_xui_context_menu.ContextMenu,
+    {
+      isOpen,
+      onOpenChange,
+      placement: "bottom-start",
+      offset: 0,
+      trigger: content,
+      "aria-label": item.label,
+      themeMode,
+      themeProductContext,
+      items: item.children.map((child) => ({
+        type: "option",
+        label: child.label,
+        disabled: child.disabled,
+        onSelect: () => onSelect(child)
+      })),
+      testID: `top-navigation-menu-${item.key}`
+    }
+  );
+};
+var Currencies = ({ currencies, theme }) => {
+  const body = theme.typographyTokens.basic["body-sm"];
+  const radius = theme.shape.button.sm.borderRadius;
+  return /* @__PURE__ */ import_react3.default.createElement(
+    Box,
+    {
+      role: "group",
+      "aria-label": "Currencies",
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 8,
+      paddingHorizontal: 8,
+      paddingVertical: 11,
+      borderRadius: radius,
+      position: "relative",
+      style: { backdropFilter: "blur(6px)" },
+      testID: "top-navigation-currencies"
+    },
+    /* @__PURE__ */ import_react3.default.createElement(
+      Box,
+      {
+        position: "absolute",
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        backgroundColor: theme.colors.background.neutral.secondary,
+        opacity: 0.5,
+        borderRadius: radius
+      }
+    ),
+    currencies.map((currency, index) => /* @__PURE__ */ import_react3.default.createElement(
+      Box,
+      {
+        key: `${currency.amount}-${index}`,
+        as: currency.onPress ? "button" : void 0,
+        type: currency.onPress ? "button" : void 0,
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 4,
+        zIndex: 1,
+        cursor: currency.onPress ? "pointer" : void 0,
+        "aria-label": currency.accessibilityLabel,
+        onPress: currency.onPress,
+        testID: `top-navigation-currency-${index}`
+      },
+      currency.icon && /* @__PURE__ */ import_react3.default.createElement(
+        Box,
+        {
+          width: CURRENCY_ICON_SIZE,
+          height: CURRENCY_ICON_SIZE,
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        currency.icon
+      ),
+      /* @__PURE__ */ import_react3.default.createElement(
+        Text,
+        {
+          color: theme.colors.content.primary,
+          fontFamily: theme.fonts.body,
+          fontSize: body.fontSize,
+          lineHeight: body.lineHeight,
+          fontWeight: String(body.fontWeight),
+          numberOfLines: 1
+        },
+        currency.amount
+      )
+    ))
+  );
+};
+var AccountAvatar = ({ user, themeMode, themeProductContext }) => {
+  const showInitials = !user.src && Boolean(user.text);
+  const icon = showInitials ? void 0 : user.icon ?? /* @__PURE__ */ import_react3.default.createElement(import_xui_icons_base.User, { variant: "solid", "aria-hidden": true });
+  return /* @__PURE__ */ import_react3.default.createElement(
+    import_xui_avatar.Avatar,
+    {
+      size: "sm",
+      square: true,
+      tone: "brand",
+      badge: false,
+      src: user.src,
+      text: showInitials ? user.text : void 0,
+      icon: user.src ? void 0 : icon,
+      disableHover: !user.onPress,
+      "aria-label": user.onPress ? `Account: ${user.name}` : user.name,
+      onClick: user.onPress,
+      testID: "top-navigation-avatar",
+      themeMode,
+      themeProductContext
+    }
+  );
+};
+var WindowControls = ({ controls, themeMode, themeProductContext }) => /* @__PURE__ */ import_react3.default.createElement(
+  Box,
+  {
+    role: "group",
+    "aria-label": "Window controls",
+    flexDirection: "row",
+    alignItems: "center",
+    flexShrink: 0,
+    testID: "top-navigation-window-controls"
+  },
+  /* @__PURE__ */ import_react3.default.createElement(
+    import_xui_button.IconButton,
+    {
+      size: "sm",
+      variant: "tertiary",
+      tone: "mono",
+      icon: /* @__PURE__ */ import_react3.default.createElement(import_xui_icons_base.Minus, null),
+      "aria-label": "Minimize window",
+      disabled: !controls.onMinimize,
+      onPress: controls.onMinimize,
+      testID: "top-navigation-window-minimize",
+      themeMode,
+      themeProductContext
+    }
+  ),
+  /* @__PURE__ */ import_react3.default.createElement(
+    import_xui_button.IconButton,
+    {
+      size: "sm",
+      variant: "tertiary",
+      tone: "mono",
+      icon: /* @__PURE__ */ import_react3.default.createElement(MaximizeGlyph, null),
+      "aria-label": "Maximize window",
+      disabled: !controls.onMaximize,
+      onPress: controls.onMaximize,
+      testID: "top-navigation-window-maximize",
+      themeMode,
+      themeProductContext
+    }
+  ),
+  /* @__PURE__ */ import_react3.default.createElement(
+    import_xui_button.IconButton,
+    {
+      size: "sm",
+      variant: "tertiary",
+      tone: "mono",
+      icon: /* @__PURE__ */ import_react3.default.createElement(import_xui_icons_base.Remove, null),
+      "aria-label": "Close window",
+      disabled: !controls.onClose,
+      onPress: controls.onClose,
+      testID: "top-navigation-window-close",
+      themeMode,
+      themeProductContext
+    }
+  )
+);
+var TopNavigation = ({
+  platform = "web",
+  logo,
+  items = [],
+  extraItems = [],
+  activeKey,
+  onItemClick,
+  linkComponent,
+  showMenu = true,
+  currencies,
+  user,
+  showAccount = true,
+  breadcrumbs = [],
+  onBack,
+  windowControls,
+  "aria-label": ariaLabel = "Main navigation",
+  testID,
+  themeMode,
+  themeProductContext = "b2c"
+}) => {
+  const { theme, mode } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
+  const [openKey, setOpenKey] = (0, import_react3.useState)(null);
+  const [iconMotion, setIconMotion] = (0, import_react3.useState)({ slide: null, playing: false });
+  const iconSlide = iconMotion.slide;
+  const iconPlaying = iconMotion.playing;
+  const previousKey = (0, import_react3.useRef)(activeKey);
+  const iconPositions = (0, import_react3.useRef)(/* @__PURE__ */ new Map());
+  const iconAnchors = (0, import_react3.useRef)(/* @__PURE__ */ new Map());
+  const itemsRef = (0, import_react3.useRef)(items);
+  const extraItemsRef = (0, import_react3.useRef)(extraItems);
+  itemsRef.current = items;
+  extraItemsRef.current = extraItems;
+  const isWindows = platform === "windows";
+  const isDark = isDarkMode(mode);
+  const registerAnchor = (0, import_react3.useCallback)(
+    (key, node) => {
+      if (node) iconAnchors.current.set(key, node);
+      else iconAnchors.current.delete(key);
+    },
+    []
+  );
+  const recordIconPositions = () => {
+    const next = /* @__PURE__ */ new Map();
+    iconAnchors.current.forEach((node, key) => {
+      if (typeof node.getBoundingClientRect !== "function") return;
+      next.set(key, node.getBoundingClientRect().left);
+    });
+    iconPositions.current = next;
+  };
+  useIsomorphicLayoutEffect(() => {
+    const from = previousKey.current;
+    if (from !== activeKey) {
+      const fromX = from ? iconPositions.current.get(from) : void 0;
+      const toX = activeKey ? iconPositions.current.get(activeKey) : void 0;
+      previousKey.current = activeKey;
+      if (from && activeKey && fromX !== void 0 && !prefersReducedMotion() && (toX === void 0 || Math.abs(toX - fromX) >= 1)) {
+        const keys = [...itemsRef.current, ...extraItemsRef.current].map(
+          (item) => item.key
+        );
+        const fallback = (keys.indexOf(activeKey) >= keys.indexOf(from) ? 1 : -1) * 28;
+        setIconMotion({
+          playing: false,
+          slide: {
+            from,
+            to: activeKey,
+            travel: toX === void 0 ? fallback : toX - fromX
+          }
+        });
+        return;
+      }
+      setIconMotion(
+        (current) => current.slide === null && !current.playing ? current : { slide: null, playing: false }
+      );
+    }
+    if (!iconSlide) recordIconPositions();
+  }, [activeKey, iconSlide]);
+  (0, import_react3.useEffect)(() => {
+    if (!iconSlide) return;
+    const frame = requestAnimationFrame(() => {
+      setIconMotion(
+        (current) => current.slide ? { slide: current.slide, playing: true } : current
+      );
+    });
+    const timeout = setTimeout(() => {
+      setIconMotion({ slide: null, playing: false });
+    }, ICON_SLIDE_MS + 40);
+    return () => {
+      cancelAnimationFrame(frame);
+      clearTimeout(timeout);
+    };
+  }, [iconSlide]);
+  const resolvedLogo = typeof logo === "function" ? logo({ isDark }) : logo ?? null;
+  const handlePress = (item) => {
+    setOpenKey(null);
+    item.onPress?.();
+    onItemClick?.(item);
+  };
+  const renderPoint = (item) => /* @__PURE__ */ import_react3.default.createElement(
+    NavPoint,
+    {
+      key: item.key,
+      item,
+      isActive: item.key === activeKey,
+      isOpen: openKey === item.key,
+      iconSlide,
+      iconPlaying,
+      registerAnchor,
+      theme,
+      themeMode,
+      themeProductContext,
+      onOpenChange: (open) => setOpenKey(open ? item.key : null),
+      onPress: () => handlePress(item),
+      onSelect: handlePress,
+      linkComponent
+    }
+  );
+  const menu = showMenu && (items.length > 0 || extraItems.length > 0) ? /* @__PURE__ */ import_react3.default.createElement(
+    Box,
+    {
+      as: "nav",
+      "aria-label": ariaLabel,
+      flexDirection: "row",
+      alignItems: "center",
+      flexShrink: 1,
+      minWidth: 0,
+      gap: MENU_GAP,
+      testID: "top-navigation-menu"
+    },
+    items.map(renderPoint),
+    items.length > 0 && extraItems.length > 0 && /* @__PURE__ */ import_react3.default.createElement(
+      Box,
+      {
+        role: "separator",
+        "aria-orientation": "vertical",
+        width: 1,
+        height: MENU_DIVIDER_HEIGHT,
+        backgroundColor: theme.colors.border.secondary,
+        testID: "top-navigation-menu-divider"
+      }
+    ),
+    extraItems.map(renderPoint)
+  ) : null;
+  const account = showAccount && (currencies && currencies.length > 0 || user) ? /* @__PURE__ */ import_react3.default.createElement(
+    Box,
+    {
+      flexDirection: "row",
+      alignItems: "center",
+      flexShrink: 0,
+      gap: ACCOUNT_GAP,
+      testID: "top-navigation-account"
+    },
+    currencies && currencies.length > 0 && /* @__PURE__ */ import_react3.default.createElement(Currencies, { currencies, theme }),
+    user && /* @__PURE__ */ import_react3.default.createElement(
+      AccountAvatar,
+      {
+        user,
+        themeMode,
+        themeProductContext
+      }
+    )
+  ) : null;
+  const windowsTrail = isWindows && (onBack || breadcrumbs.length > 0) ? /* @__PURE__ */ import_react3.default.createElement(
+    Box,
+    {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 4,
+      paddingVertical: 2,
+      testID: "top-navigation-windows-trail"
+    },
+    onBack && /* @__PURE__ */ import_react3.default.createElement(
+      Box,
+      {
+        as: "button",
+        type: "button",
+        "aria-label": "Go back",
+        cursor: "pointer",
+        onPress: onBack,
+        testID: "top-navigation-back"
+      },
+      /* @__PURE__ */ import_react3.default.createElement(
+        import_xui_icons_base.ArrowLeft,
+        {
+          size: BACK_ICON_SIZE,
+          color: theme.colors.content.primary,
+          "aria-hidden": true
+        }
+      )
+    ),
+    breadcrumbs.length > 0 && /* @__PURE__ */ import_react3.default.createElement(
+      import_xui_breadcrumbs.Breadcrumbs,
+      {
+        size: "md",
+        items: breadcrumbs.map((crumb) => ({
+          label: crumb.label,
+          href: crumb.href,
+          onClick: crumb.onPress
+        })),
+        testID: "top-navigation-breadcrumbs",
+        themeMode,
+        themeProductContext
+      }
+    )
+  ) : null;
+  return /* @__PURE__ */ import_react3.default.createElement(
+    Box,
+    {
+      as: "header",
+      width: "100%",
+      minWidth: 0,
+      maxWidth: 2560,
+      flex: 1,
+      height: BAR_HEIGHT,
+      flexDirection: "row",
+      alignItems: "center",
+      paddingVertical: BAR_PADDING_VERTICAL,
+      backgroundColor: theme.colors.background.secondary,
+      "data-platform": platform,
+      testID: testID || "top-navigation"
+    },
+    (resolvedLogo || windowsTrail) && /* @__PURE__ */ import_react3.default.createElement(
+      Box,
+      {
+        flexShrink: windowsTrail ? 1 : 0,
+        minWidth: windowsTrail ? 0 : void 0,
+        flexDirection: "row",
+        alignItems: "center",
+        gap: windowsTrail ? WINDOWS_LOGO_GAP : 0
+      },
+      resolvedLogo && /* @__PURE__ */ import_react3.default.createElement(
+        Box,
+        {
+          height: LOGO_HEIGHT,
+          justifyContent: "center",
+          flexShrink: 0,
+          testID: "top-navigation-logo"
+        },
+        resolvedLogo
+      ),
+      windowsTrail && /* @__PURE__ */ import_react3.default.createElement(Box, { flexShrink: 1, minWidth: 0, overflow: "hidden" }, windowsTrail)
+    ),
+    /* @__PURE__ */ import_react3.default.createElement(
+      Box,
+      {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        gap: CLUSTER_GAP,
+        flexShrink: 1,
+        minWidth: 0,
+        overflow: "hidden",
+        marginLeft: "auto"
+      },
+      menu,
+      account,
+      isWindows && windowControls && /* @__PURE__ */ import_react3.default.createElement(
+        WindowControls,
+        {
+          controls: windowControls,
+          themeMode,
+          themeProductContext
+        }
+      )
+    )
+  );
+};
+TopNavigation.displayName = "TopNavigation";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TopNavigation
+});
+//# sourceMappingURL=index.js.map