@xsolla/xui-b2c-side-navigation 0.156.0-pr297.1779158853

package/README.md

@@ -0,0 +1,3 @@
+# @xsolla/xui-b2c-side-navigation
+
+B2C side navigation for player-facing product surfaces.

package/native/index.d.mts

@@ -0,0 +1,48 @@
+import React$1, { ReactNode } from 'react';
+import { ThemeOverrideProps } from '@xsolla/xui-core';
+
+type SideNavigationMode = "expanded" | "collapsed";
+type SideNavigationItemState = "default" | "hover" | "active";
+interface SideNavigationItemData {
+    key: string;
+    label: string;
+    shortLabel?: string;
+    href?: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+    testID?: string;
+    accessibilityLabel?: string;
+    onPress?: () => void;
+}
+interface SideNavigationLinkProps {
+    item: SideNavigationItemData;
+    href?: string;
+    isActive: boolean;
+    disabled?: boolean;
+    onPress: () => void;
+    testID?: string;
+    children: ReactNode;
+}
+interface SideNavigationItemProps extends ThemeOverrideProps {
+    item: SideNavigationItemData;
+    mode?: SideNavigationMode;
+    state?: SideNavigationItemState;
+    isActive?: boolean;
+    onItemClick?: (item: SideNavigationItemData) => void;
+    linkComponent?: React.ComponentType<SideNavigationLinkProps>;
+}
+interface SideNavigationProps extends ThemeOverrideProps {
+    mode?: SideNavigationMode;
+    items: SideNavigationItemData[];
+    activeKey?: string;
+    onItemClick?: (item: SideNavigationItemData) => void;
+    linkComponent?: React.ComponentType<SideNavigationLinkProps>;
+    "aria-label"?: string;
+    testID?: string;
+}
+
+declare const SideNavigation: React$1.FC<SideNavigationProps>;
+
+declare const SideNavigationItem: React$1.FC<SideNavigationItemProps>;
+
+export { SideNavigation, SideNavigationItem, type SideNavigationItemData, type SideNavigationItemProps, type SideNavigationItemState, type SideNavigationLinkProps, type SideNavigationMode, type SideNavigationProps };

package/native/index.d.ts

@@ -0,0 +1,48 @@
+import React$1, { ReactNode } from 'react';
+import { ThemeOverrideProps } from '@xsolla/xui-core';
+
+type SideNavigationMode = "expanded" | "collapsed";
+type SideNavigationItemState = "default" | "hover" | "active";
+interface SideNavigationItemData {
+    key: string;
+    label: string;
+    shortLabel?: string;
+    href?: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+    testID?: string;
+    accessibilityLabel?: string;
+    onPress?: () => void;
+}
+interface SideNavigationLinkProps {
+    item: SideNavigationItemData;
+    href?: string;
+    isActive: boolean;
+    disabled?: boolean;
+    onPress: () => void;
+    testID?: string;
+    children: ReactNode;
+}
+interface SideNavigationItemProps extends ThemeOverrideProps {
+    item: SideNavigationItemData;
+    mode?: SideNavigationMode;
+    state?: SideNavigationItemState;
+    isActive?: boolean;
+    onItemClick?: (item: SideNavigationItemData) => void;
+    linkComponent?: React.ComponentType<SideNavigationLinkProps>;
+}
+interface SideNavigationProps extends ThemeOverrideProps {
+    mode?: SideNavigationMode;
+    items: SideNavigationItemData[];
+    activeKey?: string;
+    onItemClick?: (item: SideNavigationItemData) => void;
+    linkComponent?: React.ComponentType<SideNavigationLinkProps>;
+    "aria-label"?: string;
+    testID?: string;
+}
+
+declare const SideNavigation: React$1.FC<SideNavigationProps>;
+
+declare const SideNavigationItem: React$1.FC<SideNavigationItemProps>;
+
+export { SideNavigation, SideNavigationItem, type SideNavigationItemData, type SideNavigationItemProps, type SideNavigationItemState, type SideNavigationLinkProps, type SideNavigationMode, type SideNavigationProps };

package/native/index.js

@@ -0,0 +1,471 @@
+"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, {
+  SideNavigation: () => SideNavigation,
+  SideNavigationItem: () => SideNavigationItem
+});
+module.exports = __toCommonJS(index_exports);
+
+// ../../foundation/primitives-native/src/Box.tsx
+var import_react_native = require("react-native");
+var import_jsx_runtime = require("react/jsx-runtime");
+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,
+  flexDirection,
+  alignItems,
+  justifyContent,
+  position,
+  top,
+  bottom,
+  left,
+  right,
+  width,
+  minWidth,
+  minHeight,
+  maxWidth,
+  maxHeight,
+  flex,
+  overflow,
+  zIndex,
+  hoverStyle,
+  pressStyle,
+  style,
+  "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,
+    zIndex,
+    height,
+    width,
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight,
+    padding,
+    paddingHorizontal,
+    paddingVertical,
+    margin,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    flexDirection,
+    alignItems,
+    justifyContent,
+    position,
+    top,
+    bottom,
+    left,
+    right,
+    flex,
+    ...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,
+    className,
+    "data-testid": _dataTestId,
+    ...nativeRest
+  } = rest;
+  if (as === "img" && src) {
+    const imageStyle = {
+      width,
+      height,
+      borderRadius,
+      position,
+      top,
+      bottom,
+      left,
+      right,
+      ...style
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native.Image,
+      {
+        source: { uri: src },
+        style: imageStyle,
+        testID: finalTestID,
+        resizeMode: "cover",
+        ...nativeRest
+      }
+    );
+  }
+  if (onPress) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native.Pressable,
+      {
+        onPress,
+        onLayout,
+        onMoveShouldSetResponder,
+        onResponderGrant,
+        onResponderMove,
+        onResponderRelease,
+        onResponderTerminate,
+        style: ({ pressed }) => getContainerStyle(pressed),
+        testID: finalTestID,
+        ...nativeRest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_native.View,
+    {
+      style: getContainerStyle(),
+      testID: finalTestID,
+      onLayout,
+      onMoveShouldSetResponder,
+      onResponderGrant,
+      onResponderMove,
+      onResponderRelease,
+      onResponderTerminate,
+      ...nativeRest,
+      children
+    }
+  );
+};
+
+// ../../foundation/primitives-native/src/Text.tsx
+var import_react_native2 = require("react-native");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+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,
+  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__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_native2.Text,
+    {
+      style: baseStyle,
+      numberOfLines,
+      testID: id,
+      accessibilityRole,
+      children
+    }
+  );
+};
+
+// src/SideNavigationItem.tsx
+var import_react = __toESM(require("react"));
+var import_xui_core = require("@xsolla/xui-core");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ACTIVE_ICON_COLOR_FALLBACK = "#80eaff";
+var modeConfig = {
+  expanded: {
+    itemWidth: "100%",
+    minHeight: 56,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-start",
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+    gap: 12,
+    iconSize: 24,
+    labelFontSize: 16,
+    labelLineHeight: 20,
+    labelAlign: "left",
+    labelLines: 1
+  },
+  collapsed: {
+    itemWidth: 62,
+    minHeight: 56,
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 4,
+    paddingVertical: 8,
+    gap: 4,
+    iconSize: 24,
+    labelFontSize: 12,
+    labelLineHeight: 16,
+    labelAlign: "center",
+    labelLines: 2
+  }
+};
+var getDisplayLabel = (item, mode) => mode === "collapsed" ? item.shortLabel || item.label : item.label;
+var renderIcon = (icon, size, color) => {
+  if (!import_react.default.isValidElement(icon)) return icon;
+  return import_react.default.cloneElement(
+    icon,
+    {
+      size,
+      color
+    }
+  );
+};
+var SideNavigationItem = ({
+  item,
+  mode = "expanded",
+  state = "default",
+  isActive,
+  onItemClick,
+  linkComponent: LinkComponent,
+  themeMode,
+  themeProductContext = "b2c"
+}) => {
+  const { theme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
+  const config = modeConfig[mode];
+  const resolvedState = isActive || state === "active" ? "active" : state;
+  const isDisabled = Boolean(item.disabled);
+  const backgroundColor = resolvedState === "active" || resolvedState === "hover" ? theme.colors.overlay.mono : "transparent";
+  const borderColor = resolvedState === "active" ? theme.colors.border.secondary : "transparent";
+  const labelColor = theme.colors.content.primary;
+  const iconColor = resolvedState === "active" ? theme.colors.background.brand?.primary || ACTIVE_ICON_COLOR_FALLBACK : theme.colors.content.tertiary;
+  const handlePress = () => {
+    if (isDisabled) return;
+    item.onPress?.();
+    onItemClick?.(item);
+  };
+  const content = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    Box,
+    {
+      as: !LinkComponent && !isDisabled ? "button" : void 0,
+      width: config.itemWidth,
+      minHeight: config.minHeight,
+      flexDirection: config.flexDirection,
+      alignItems: config.alignItems,
+      justifyContent: config.justifyContent,
+      paddingHorizontal: config.paddingHorizontal,
+      paddingVertical: config.paddingVertical,
+      gap: config.gap,
+      backgroundColor,
+      borderColor,
+      borderWidth: resolvedState === "active" ? 1 : 0,
+      borderRadius: 8,
+      role: LinkComponent ? void 0 : "button",
+      "aria-label": item.accessibilityLabel || item.label,
+      "aria-current": resolvedState === "active" ? "page" : void 0,
+      "aria-disabled": isDisabled || void 0,
+      disabled: isDisabled,
+      onPress: !LinkComponent && !isDisabled ? handlePress : void 0,
+      hoverStyle: resolvedState === "default" ? { backgroundColor: theme.colors.overlay.mono } : void 0,
+      pressStyle: { backgroundColor: theme.colors.overlay.mono },
+      testID: item.testID || `side-navigation-item-${item.key}`,
+      children: [
+        item.icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          Box,
+          {
+            width: config.iconSize,
+            height: config.iconSize,
+            flexShrink: 0,
+            alignItems: "center",
+            justifyContent: "center",
+            children: renderIcon(item.icon, config.iconSize, iconColor)
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          Text,
+          {
+            color: labelColor,
+            fontFamily: theme.fonts.body,
+            fontSize: config.labelFontSize,
+            lineHeight: config.labelLineHeight,
+            fontWeight: "400",
+            textAlign: config.labelAlign,
+            numberOfLines: config.labelLines,
+            children: getDisplayLabel(item, mode)
+          }
+        )
+      ]
+    }
+  );
+  if (!LinkComponent) return content;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    LinkComponent,
+    {
+      item,
+      href: item.href,
+      isActive: resolvedState === "active",
+      disabled: isDisabled,
+      onPress: handlePress,
+      testID: item.testID || `side-navigation-link-${item.key}`,
+      children: content
+    }
+  );
+};
+
+// src/SideNavigation.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var modeConfig2 = {
+  expanded: {
+    width: 280,
+    alignItems: "stretch"
+  },
+  collapsed: {
+    width: 78,
+    alignItems: "center"
+  }
+};
+var SideNavigation = ({
+  mode = "expanded",
+  items = [],
+  activeKey,
+  onItemClick,
+  linkComponent,
+  "aria-label": ariaLabel = "Side navigation",
+  testID,
+  themeMode,
+  themeProductContext = "b2c"
+}) => {
+  const config = modeConfig2[mode];
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    Box,
+    {
+      as: "nav",
+      role: "navigation",
+      "aria-label": ariaLabel,
+      width: config.width,
+      flexDirection: "column",
+      alignItems: config.alignItems,
+      gap: 16,
+      paddingHorizontal: 8,
+      testID: testID || "side-navigation",
+      children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        SideNavigationItem,
+        {
+          item,
+          mode,
+          isActive: item.key === activeKey,
+          onItemClick,
+          linkComponent,
+          themeMode,
+          themeProductContext
+        },
+        item.key
+      ))
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SideNavigation,
+  SideNavigationItem
+});
+//# sourceMappingURL=index.js.map

package/native/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/index.tsx","../../../../foundation/primitives-native/src/Box.tsx","../../../../foundation/primitives-native/src/Text.tsx","../../src/SideNavigationItem.tsx","../../src/SideNavigation.tsx"],"sourcesContent":["export { SideNavigation } from \"./SideNavigation\";\nexport { SideNavigationItem } from \"./SideNavigationItem\";\n\nexport type {\n  SideNavigationItemData,\n  SideNavigationItemProps,\n  SideNavigationItemState,\n  SideNavigationLinkProps,\n  SideNavigationMode,\n  SideNavigationProps,\n} from \"./types\";\n","import React from \"react\";\nimport {\n  View,\n  Pressable,\n  Image,\n  ViewStyle,\n  ImageStyle,\n  DimensionValue,\n  AnimatableNumericValue,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Box: React.FC<BoxProps> = ({\n  children,\n  onPress,\n  onLayout,\n  onMoveShouldSetResponder,\n  onResponderGrant,\n  onResponderMove,\n  onResponderRelease,\n  onResponderTerminate,\n  backgroundColor,\n  borderColor,\n  borderWidth,\n  borderBottomWidth,\n  borderBottomColor,\n  borderTopWidth,\n  borderTopColor,\n  borderLeftWidth,\n  borderLeftColor,\n  borderRightWidth,\n  borderRightColor,\n  borderRadius,\n  borderStyle,\n  height,\n  padding,\n  paddingHorizontal,\n  paddingVertical,\n  margin,\n  marginTop,\n  marginBottom,\n  marginLeft,\n  marginRight,\n  flexDirection,\n  alignItems,\n  justifyContent,\n  position,\n  top,\n  bottom,\n  left,\n  right,\n  width,\n  minWidth,\n  minHeight,\n  maxWidth,\n  maxHeight,\n  flex,\n  overflow,\n  zIndex,\n  hoverStyle,\n  pressStyle,\n  style,\n  \"data-testid\": dataTestId,\n  testID,\n  as,\n  src,\n  alt,\n  ...rest\n}) => {\n  const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n    backgroundColor:\n      pressed && pressStyle?.backgroundColor\n        ? pressStyle.backgroundColor\n        : backgroundColor,\n    borderColor,\n    borderWidth,\n    borderBottomWidth,\n    borderBottomColor,\n    borderTopWidth,\n    borderTopColor,\n    borderLeftWidth,\n    borderLeftColor,\n    borderRightWidth,\n    borderRightColor,\n    borderRadius: borderRadius as AnimatableNumericValue,\n    borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n    overflow,\n    zIndex,\n    height: height as DimensionValue,\n    width: width as DimensionValue,\n    minWidth: minWidth as DimensionValue,\n    minHeight: minHeight as DimensionValue,\n    maxWidth: maxWidth as DimensionValue,\n    maxHeight: maxHeight as DimensionValue,\n    padding: padding as DimensionValue,\n    paddingHorizontal: paddingHorizontal as DimensionValue,\n    paddingVertical: paddingVertical as DimensionValue,\n    margin: margin as DimensionValue,\n    marginTop: marginTop as DimensionValue,\n    marginBottom: marginBottom as DimensionValue,\n    marginLeft: marginLeft as DimensionValue,\n    marginRight: marginRight as DimensionValue,\n    flexDirection,\n    alignItems,\n    justifyContent,\n    position: position as ViewStyle[\"position\"],\n    top: top as DimensionValue,\n    bottom: bottom as DimensionValue,\n    left: left as DimensionValue,\n    right: right as DimensionValue,\n    flex,\n    ...(style as ViewStyle),\n  });\n\n  const finalTestID = dataTestId || testID;\n\n  // Destructure and drop web-only props from rest before passing to RN components\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const {\n    role,\n    tabIndex,\n    onKeyDown,\n    onKeyUp,\n    \"aria-label\": _ariaLabel,\n    \"aria-labelledby\": _ariaLabelledBy,\n    \"aria-current\": _ariaCurrent,\n    \"aria-disabled\": _ariaDisabled,\n    \"aria-live\": _ariaLive,\n    className,\n    \"data-testid\": _dataTestId,\n    ...nativeRest\n  } = rest as Record<string, unknown>;\n\n  // Handle as=\"img\" for React Native\n  if (as === \"img\" && src) {\n    const imageStyle: ImageStyle = {\n      width: width as DimensionValue,\n      height: height as DimensionValue,\n      borderRadius: borderRadius as number,\n      position: position as ImageStyle[\"position\"],\n      top: top as DimensionValue,\n      bottom: bottom as DimensionValue,\n      left: left as DimensionValue,\n      right: right as DimensionValue,\n      ...(style as ImageStyle),\n    };\n\n    return (\n      <Image\n        source={{ uri: src }}\n        style={imageStyle}\n        testID={finalTestID}\n        resizeMode=\"cover\"\n        {...nativeRest}\n      />\n    );\n  }\n\n  if (onPress) {\n    return (\n      <Pressable\n        onPress={onPress}\n        onLayout={onLayout}\n        onMoveShouldSetResponder={onMoveShouldSetResponder}\n        onResponderGrant={onResponderGrant}\n        onResponderMove={onResponderMove}\n        onResponderRelease={onResponderRelease}\n        onResponderTerminate={onResponderTerminate}\n        style={({ pressed }) => getContainerStyle(pressed)}\n        testID={finalTestID}\n        {...nativeRest}\n      >\n        {children}\n      </Pressable>\n    );\n  }\n\n  return (\n    <View\n      style={getContainerStyle()}\n      testID={finalTestID}\n      onLayout={onLayout}\n      onMoveShouldSetResponder={onMoveShouldSetResponder}\n      onResponderGrant={onResponderGrant}\n      onResponderMove={onResponderMove}\n      onResponderRelease={onResponderRelease}\n      onResponderTerminate={onResponderTerminate}\n      {...nativeRest}\n    >\n      {children}\n    </View>\n  );\n};\n","import React from \"react\";\nimport {\n  Text as RNText,\n  TextStyle,\n  AccessibilityRole,\n  StyleSheet,\n} from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst roleMap: Record<string, AccessibilityRole> = {\n  alert: \"alert\",\n  heading: \"header\",\n  button: \"button\",\n  link: \"link\",\n  text: \"text\",\n};\n\nconst parseNumericValue = (\n  value: string | number | undefined\n): number | undefined => {\n  if (value === undefined) return undefined;\n  if (typeof value === \"number\") return value;\n  const parsed = parseFloat(value);\n  return isNaN(parsed) ? undefined : parsed;\n};\n\nexport const Text: React.FC<TextProps> = ({\n  children,\n  color,\n  fontSize,\n  fontWeight,\n  fontFamily,\n  textAlign,\n  lineHeight,\n  numberOfLines,\n  id,\n  role,\n  style: styleProp,\n  ...props\n}) => {\n  let resolvedFontFamily = fontFamily\n    ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n    : undefined;\n\n  if (\n    resolvedFontFamily === \"Pilat Wide\" ||\n    resolvedFontFamily === \"Pilat Wide Bold\" ||\n    resolvedFontFamily === \"Aktiv Grotesk\"\n  ) {\n    resolvedFontFamily = undefined;\n  }\n\n  const incomingStyle = StyleSheet.flatten(styleProp) as TextStyle | undefined;\n\n  const baseStyle: TextStyle = {\n    color: color ?? incomingStyle?.color,\n    fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n    fontWeight: fontWeight as TextStyle[\"fontWeight\"],\n    fontFamily: resolvedFontFamily,\n    textDecorationLine: props.textDecoration as TextStyle[\"textDecorationLine\"],\n    textAlign: textAlign ?? incomingStyle?.textAlign,\n    lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),\n    marginTop: parseNumericValue(\n      incomingStyle?.marginTop as number | string | undefined\n    ),\n    marginBottom: parseNumericValue(\n      incomingStyle?.marginBottom as number | string | undefined\n    ),\n  };\n\n  const accessibilityRole = role ? roleMap[role] : undefined;\n\n  return (\n    <RNText\n      style={baseStyle}\n      numberOfLines={numberOfLines}\n      testID={id}\n      accessibilityRole={accessibilityRole}\n    >\n      {children}\n    </RNText>\n  );\n};\n","import React from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme } from \"@xsolla/xui-core\";\nimport type {\n  SideNavigationItemData,\n  SideNavigationItemProps,\n  SideNavigationMode,\n} from \"./types\";\n\nconst ACTIVE_ICON_COLOR_FALLBACK = \"#80eaff\";\n\nconst modeConfig = {\n  expanded: {\n    itemWidth: \"100%\",\n    minHeight: 56,\n    flexDirection: \"row\" as const,\n    alignItems: \"center\" as const,\n    justifyContent: \"flex-start\" as const,\n    paddingHorizontal: 16,\n    paddingVertical: 16,\n    gap: 12,\n    iconSize: 24,\n    labelFontSize: 16,\n    labelLineHeight: 20,\n    labelAlign: \"left\" as const,\n    labelLines: 1,\n  },\n  collapsed: {\n    itemWidth: 62,\n    minHeight: 56,\n    flexDirection: \"column\" as const,\n    alignItems: \"center\" as const,\n    justifyContent: \"center\" as const,\n    paddingHorizontal: 4,\n    paddingVertical: 8,\n    gap: 4,\n    iconSize: 24,\n    labelFontSize: 12,\n    labelLineHeight: 16,\n    labelAlign: \"center\" as const,\n    labelLines: 2,\n  },\n};\n\nconst getDisplayLabel = (\n  item: SideNavigationItemData,\n  mode: SideNavigationMode\n) => (mode === \"collapsed\" ? item.shortLabel || item.label : item.label);\n\nconst renderIcon = (icon: React.ReactNode, size: number, color: string) => {\n  if (!React.isValidElement(icon)) return icon;\n\n  return React.cloneElement(\n    icon as React.ReactElement<{ size?: number | string; color?: string }>,\n    {\n      size,\n      color,\n    }\n  );\n};\n\nexport const SideNavigationItem: React.FC<SideNavigationItemProps> = ({\n  item,\n  mode = \"expanded\",\n  state = \"default\",\n  isActive,\n  onItemClick,\n  linkComponent: LinkComponent,\n  themeMode,\n  themeProductContext = \"b2c\",\n}) => {\n  const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n  const config = modeConfig[mode];\n  const resolvedState = isActive || state === \"active\" ? \"active\" : state;\n  const isDisabled = Boolean(item.disabled);\n  const backgroundColor =\n    resolvedState === \"active\" || resolvedState === \"hover\"\n      ? theme.colors.overlay.mono\n      : \"transparent\";\n  const borderColor =\n    resolvedState === \"active\" ? theme.colors.border.secondary : \"transparent\";\n  const labelColor = theme.colors.content.primary;\n  const iconColor =\n    resolvedState === \"active\"\n      ? theme.colors.background.brand?.primary || ACTIVE_ICON_COLOR_FALLBACK\n      : theme.colors.content.tertiary;\n\n  const handlePress = () => {\n    if (isDisabled) return;\n    item.onPress?.();\n    onItemClick?.(item);\n  };\n\n  const content = (\n    <Box\n      as={!LinkComponent && !isDisabled ? \"button\" : undefined}\n      width={config.itemWidth}\n      minHeight={config.minHeight}\n      flexDirection={config.flexDirection}\n      alignItems={config.alignItems}\n      justifyContent={config.justifyContent}\n      paddingHorizontal={config.paddingHorizontal}\n      paddingVertical={config.paddingVertical}\n      gap={config.gap}\n      backgroundColor={backgroundColor}\n      borderColor={borderColor}\n      borderWidth={resolvedState === \"active\" ? 1 : 0}\n      borderRadius={8}\n      role={LinkComponent ? undefined : \"button\"}\n      aria-label={item.accessibilityLabel || item.label}\n      aria-current={resolvedState === \"active\" ? \"page\" : undefined}\n      aria-disabled={isDisabled || undefined}\n      disabled={isDisabled}\n      onPress={!LinkComponent && !isDisabled ? handlePress : undefined}\n      hoverStyle={\n        resolvedState === \"default\"\n          ? { backgroundColor: theme.colors.overlay.mono }\n          : undefined\n      }\n      pressStyle={{ backgroundColor: theme.colors.overlay.mono }}\n      testID={item.testID || `side-navigation-item-${item.key}`}\n    >\n      {item.icon && (\n        <Box\n          width={config.iconSize}\n          height={config.iconSize}\n          flexShrink={0}\n          alignItems=\"center\"\n          justifyContent=\"center\"\n        >\n          {renderIcon(item.icon, config.iconSize, iconColor)}\n        </Box>\n      )}\n      <Text\n        color={labelColor}\n        fontFamily={theme.fonts.body}\n        fontSize={config.labelFontSize}\n        lineHeight={config.labelLineHeight}\n        fontWeight=\"400\"\n        textAlign={config.labelAlign}\n        numberOfLines={config.labelLines}\n      >\n        {getDisplayLabel(item, mode)}\n      </Text>\n    </Box>\n  );\n\n  if (!LinkComponent) return content;\n\n  return (\n    <LinkComponent\n      item={item}\n      href={item.href}\n      isActive={resolvedState === \"active\"}\n      disabled={isDisabled}\n      onPress={handlePress}\n      testID={item.testID || `side-navigation-link-${item.key}`}\n    >\n      {content}\n    </LinkComponent>\n  );\n};\n","import React from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box } from \"@xsolla/xui-primitives\";\nimport type { SideNavigationProps } from \"./types\";\nimport { SideNavigationItem } from \"./SideNavigationItem\";\n\nconst modeConfig = {\n  expanded: {\n    width: 280,\n    alignItems: \"stretch\" as const,\n  },\n  collapsed: {\n    width: 78,\n    alignItems: \"center\" as const,\n  },\n};\n\nexport const SideNavigation: React.FC<SideNavigationProps> = ({\n  mode = \"expanded\",\n  items = [],\n  activeKey,\n  onItemClick,\n  linkComponent,\n  \"aria-label\": ariaLabel = \"Side navigation\",\n  testID,\n  themeMode,\n  themeProductContext = \"b2c\",\n}) => {\n  const config = modeConfig[mode];\n\n  return (\n    <Box\n      as=\"nav\"\n      role=\"navigation\"\n      aria-label={ariaLabel}\n      width={config.width}\n      flexDirection=\"column\"\n      alignItems={config.alignItems}\n      gap={16}\n      paddingHorizontal={8}\n      testID={testID || \"side-navigation\"}\n    >\n      {items.map((item) => (\n        <SideNavigationItem\n          key={item.key}\n          item={item}\n          mode={mode}\n          isActive={item.key === activeKey}\n          onItemClick={onItemClick}\n          linkComponent={linkComponent}\n          themeMode={themeMode}\n          themeProductContext={themeProductContext}\n        />\n      ))}\n    </Box>\n  );\n};\n"],"mappings":"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","names":["import_react_native","import_jsx_runtime","RNText","import_jsx_runtime","React","import_jsx_runtime","modeConfig"]}