@xsolla/xui-segmented 0.220.0 → 0.221.0

package/native/index.mjs

@@ -357,30 +357,64 @@ var Segmented = ({
   id,
   testID,
   fullWidth = false,
+  overflow = "ellipsis",
   themeMode,
   themeProductContext
 }) => {
   const { theme } = useResolvedTheme({ themeMode, themeProductContext });
   const sizeStyles = theme.sizing.segmented(size);
+  const isWrap = overflow === "wrap";
   const containerId = id ? `${id}-container` : void 0;
   const itemRefs = useRef([]);
   const containerRef = useRef(null);
-  const [indicatorStyle, setIndicatorStyle] = useState({ left: 0, width: 0, initialized: false });
-  useEffect(() => {
+  const [indicatorStyle, setIndicatorStyle] = useState({
+    left: 0,
+    top: 0,
+    width: 0,
+    height: 0,
+    initialized: false
+  });
+  const activeIndex = items.findIndex((item) => item.id === activeId);
+  const updateIndicator = useCallback(() => {
     if (!isWeb) return;
-    const activeIndex = items.findIndex((item) => item.id === activeId);
     const activeItemEl = itemRefs.current[activeIndex];
     const containerEl = containerRef.current;
-    if (activeItemEl && containerEl) {
-      const containerRect = containerEl.getBoundingClientRect();
-      const itemRect = activeItemEl.getBoundingClientRect();
-      setIndicatorStyle({
-        left: itemRect.left - containerRect.left,
-        width: itemRect.width,
-        initialized: true
-      });
-    }
-  }, [activeId, items]);
+    if (!activeItemEl || !containerEl) return;
+    const containerRect = containerEl.getBoundingClientRect();
+    const itemRect = activeItemEl.getBoundingClientRect();
+    const next = {
+      left: itemRect.left - containerRect.left - containerEl.clientLeft,
+      top: itemRect.top - containerRect.top - containerEl.clientTop,
+      width: itemRect.width,
+      height: itemRect.height
+    };
+    setIndicatorStyle(
+      (prev) => prev.initialized && prev.left === next.left && prev.top === next.top && prev.width === next.width && prev.height === next.height ? prev : { ...next, initialized: true }
+    );
+  }, [activeIndex]);
+  useEffect(() => {
+    if (!isWeb) return;
+    updateIndicator();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => updateIndicator());
+    if (containerRef.current) observer.observe(containerRef.current);
+    itemRefs.current.slice(0, items.length).forEach((el) => {
+      if (el) observer.observe(el);
+    });
+    return () => observer.disconnect();
+  }, [updateIndicator, items.length, overflow, size, fullWidth]);
+  useEffect(() => {
+    if (!isWeb || typeof document === "undefined") return;
+    const fonts = document.fonts;
+    if (!fonts) return;
+    let cancelled = false;
+    fonts.ready.then(() => {
+      if (!cancelled) updateIndicator();
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [updateIndicator]);
   const enabledIndices = items.map((item, index) => !item.disabled ? index : -1).filter((i) => i !== -1);
   const focusItem = useCallback((index) => {
     const element = itemRefs.current[index];
@@ -421,6 +455,9 @@ var Segmented = ({
     },
     [enabledIndices, focusItem, onChange, items]
   );
+  const disableColors = theme.colors.control.disable;
+  const isActiveItemDisabled = items.find((item) => item.id === activeId)?.disabled === true;
+  const indicatorBg = isActiveItemDisabled ? disableColors.bgActive : theme.colors.control.segmented.bgActive;
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -431,11 +468,12 @@ var Segmented = ({
         containerRef.current = el;
       },
       flexDirection: "row",
-      alignItems: "center",
+      alignItems: "stretch",
       flexShrink: 0,
       position: "relative",
       width: fullWidth ? "100%" : "fit-content",
-      height: sizeStyles.height,
+      maxWidth: "100%",
+      minHeight: sizeStyles.height,
       backgroundColor: theme.colors.control.segmented.bg,
       borderRadius: sizeStyles.containerRadius,
       padding: sizeStyles.containerPadding,
@@ -449,13 +487,14 @@ var Segmented = ({
           {
             position: "absolute",
             zIndex: 0,
-            height: sizeStyles.itemHeight,
-            backgroundColor: theme.colors.control.segmented.bgActive,
+            backgroundColor: indicatorBg,
             borderRadius: sizeStyles.itemRadius,
             style: {
               left: indicatorStyle.left,
+              top: indicatorStyle.top,
               width: indicatorStyle.width,
-              transition: "left 200ms ease-out, width 200ms ease-out",
+              height: indicatorStyle.height,
+              transition: "left 200ms ease-out, top 200ms ease-out, width 200ms ease-out, height 200ms ease-out",
               pointerEvents: "none"
             },
             "aria-hidden": true
@@ -470,7 +509,7 @@ var Segmented = ({
               onChange(item.id);
             }
           };
-          const textColor = isDisabled ? theme.colors.control.segmented.textDisable : theme.colors.control.segmented.text;
+          const textColor = isDisabled ? isActive ? disableColors.contentActive : theme.colors.control.segmented.textDisable : theme.colors.control.segmented.text;
           return /* @__PURE__ */ jsxs(
             Box,
             {
@@ -488,17 +527,18 @@ var Segmented = ({
               onPress: handlePress,
               onKeyDown: (e) => handleKeyDown(e, index),
               flex: fullWidth ? 1 : void 0,
-              flexShrink: 0,
+              flexShrink: 1,
+              minWidth: 0,
               position: "relative",
               zIndex: 1,
-              height: sizeStyles.itemHeight,
+              minHeight: sizeStyles.itemHeight,
               paddingHorizontal: sizeStyles.itemPaddingHorizontal,
               paddingVertical: sizeStyles.itemPaddingVertical,
               flexDirection: "row",
               alignItems: "center",
               justifyContent: "center",
               gap: sizeStyles.gap,
-              backgroundColor: !isWeb && isActive ? theme.colors.control.segmented.bgActive : "transparent",
+              backgroundColor: !isWeb && isActive ? indicatorBg : "transparent",
               borderRadius: sizeStyles.itemRadius,
               cursor: isDisabled ? "not-allowed" : "pointer",
               hoverStyle: !isDisabled && !isActive ? {
@@ -510,17 +550,32 @@ var Segmented = ({
                 outlineOffset: -2
               },
               children: [
-                item.icon && /* @__PURE__ */ jsx4(Icon, { size: sizeStyles.iconSize, color: textColor, "aria-hidden": true, children: item.icon }),
-                /* @__PURE__ */ jsx4(
+                item.icon && /* @__PURE__ */ jsx4(Box, { flexShrink: 0, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx4(Icon, { size: sizeStyles.iconSize, color: textColor, "aria-hidden": true, children: item.icon }) }),
+                isWrap ? /* @__PURE__ */ jsx4(
+                  Text,
+                  {
+                    color: textColor,
+                    fontSize: sizeStyles.fontSize,
+                    lineHeight: sizeStyles.lineHeight,
+                    fontWeight: "500",
+                    textAlign: "center",
+                    whiteSpace: "normal",
+                    style: isWeb ? {
+                      minWidth: 0,
+                      overflowWrap: "anywhere",
+                      textWrap: "balance"
+                    } : void 0,
+                    children: item.label
+                  }
+                ) : /* @__PURE__ */ jsx4(
                   Text,
                   {
                     color: textColor,
                     fontSize: sizeStyles.fontSize,
                     fontWeight: "500",
                     textAlign: "center",
-                    whiteSpace: "nowrap",
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
+                    numberOfLines: 1,
+                    title: item.label,
                     children: item.label
                   }
                 )

package/native/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Segmented.tsx","../../../../foundation/primitives-native/src/Box.tsx","../../../../foundation/primitives-native/src/Text.tsx","../../../../foundation/primitives-native/src/Icon.tsx","../../../../foundation/primitives-native/src/index.tsx"],"sourcesContent":["import React, { useCallback, useRef, useState, useEffect } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text, Icon, isWeb } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme, type ThemeOverrideProps } from \"@xsolla/xui-core\";\n\nexport interface SegmentedItemType {\n  /** Unique identifier for the item */\n  id: string;\n  /** Display label for the item */\n  label: string;\n  /** Optional icon to display */\n  icon?: React.ReactNode;\n  /** Whether the item is disabled */\n  disabled?: boolean;\n  /** Accessible label for screen readers */\n  \"aria-label\"?: string;\n}\n\nexport interface SegmentedProps extends ThemeOverrideProps {\n  /** Array of items */\n  items: SegmentedItemType[];\n  /** ID of the currently active item */\n  activeId?: string;\n  /** Callback when an item is selected */\n  onChange?: (id: string) => void;\n  /** Size variant */\n  size?: \"xl\" | \"lg\" | \"md\" | \"sm\";\n  id?: string;\n  testID?: string;\n  /** Full width of the container */\n  fullWidth?: boolean;\n}\n\n/**\n * Segmented - A control for switching between related views or filters\n */\nexport const Segmented: React.FC<SegmentedProps> = ({\n  items,\n  activeId,\n  onChange,\n  size = \"md\",\n  id,\n  testID,\n  fullWidth = false,\n  themeMode,\n  themeProductContext,\n}) => {\n  const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n  const sizeStyles = theme.sizing.segmented(size);\n\n  const containerId = id ? `${id}-container` : undefined;\n  const itemRefs = useRef<(HTMLElement | null)[]>([]);\n  const containerRef = useRef<HTMLElement | null>(null);\n\n  // Indicator position for animation (web only)\n  const [indicatorStyle, setIndicatorStyle] = useState<{\n    left: number;\n    width: number;\n    initialized: boolean;\n  }>({ left: 0, width: 0, initialized: false });\n\n  // Update indicator position when active item changes (web only)\n  useEffect(() => {\n    if (!isWeb) return;\n\n    const activeIndex = items.findIndex((item) => item.id === activeId);\n    const activeItemEl = itemRefs.current[activeIndex];\n    const containerEl = containerRef.current;\n\n    if (activeItemEl && containerEl) {\n      const containerRect = containerEl.getBoundingClientRect();\n      const itemRect = activeItemEl.getBoundingClientRect();\n\n      setIndicatorStyle({\n        left: itemRect.left - containerRect.left,\n        width: itemRect.width,\n        initialized: true,\n      });\n    }\n  }, [activeId, items]);\n\n  const enabledIndices = items\n    .map((item, index) => (!item.disabled ? index : -1))\n    .filter((i) => i !== -1);\n\n  const focusItem = useCallback((index: number) => {\n    const element = itemRefs.current[index];\n    if (element) {\n      element.focus();\n    }\n  }, []);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent, currentIndex: number) => {\n      const currentEnabledIndex = enabledIndices.indexOf(currentIndex);\n\n      switch (e.key) {\n        case \"ArrowRight\":\n        case \"ArrowDown\":\n          e.preventDefault();\n          {\n            const nextEnabledIndex =\n              currentEnabledIndex < enabledIndices.length - 1\n                ? enabledIndices[currentEnabledIndex + 1]\n                : enabledIndices[0];\n            focusItem(nextEnabledIndex);\n          }\n          break;\n\n        case \"ArrowLeft\":\n        case \"ArrowUp\":\n          e.preventDefault();\n          {\n            const prevEnabledIndex =\n              currentEnabledIndex > 0\n                ? enabledIndices[currentEnabledIndex - 1]\n                : enabledIndices[enabledIndices.length - 1];\n            focusItem(prevEnabledIndex);\n          }\n          break;\n\n        case \"Enter\":\n        case \" \":\n          e.preventDefault();\n          if (onChange && !items[currentIndex].disabled) {\n            onChange(items[currentIndex].id);\n          }\n          break;\n\n        default:\n          break;\n      }\n    },\n    [enabledIndices, focusItem, onChange, items]\n  );\n\n  return (\n    <Box\n      id={containerId}\n      role=\"radiogroup\"\n      testID={testID}\n      ref={(el: HTMLElement | null) => {\n        containerRef.current = el;\n      }}\n      flexDirection=\"row\"\n      alignItems=\"center\"\n      flexShrink={0}\n      position=\"relative\"\n      width={fullWidth ? \"100%\" : \"fit-content\"}\n      height={sizeStyles.height}\n      backgroundColor={theme.colors.control.segmented.bg}\n      borderRadius={sizeStyles.containerRadius}\n      padding={sizeStyles.containerPadding}\n      borderWidth={1}\n      borderColor={theme.colors.border.secondary}\n      borderStyle=\"solid\"\n      overflow=\"hidden\"\n    >\n      {/* Sliding indicator (web only) */}\n      {isWeb && indicatorStyle.initialized && (\n        <Box\n          position=\"absolute\"\n          zIndex={0}\n          height={sizeStyles.itemHeight}\n          backgroundColor={theme.colors.control.segmented.bgActive}\n          borderRadius={sizeStyles.itemRadius}\n          style={{\n            left: indicatorStyle.left,\n            width: indicatorStyle.width,\n            transition: \"left 200ms ease-out, width 200ms ease-out\",\n            pointerEvents: \"none\",\n          }}\n          aria-hidden\n        />\n      )}\n      {items.map((item, index) => {\n        const isActive = item.id === activeId;\n        const isDisabled = item.disabled;\n        const itemId = id ? `${id}-item-${item.id}` : undefined;\n\n        const handlePress = () => {\n          if (!isDisabled && onChange) {\n            onChange(item.id);\n          }\n        };\n\n        const textColor = isDisabled\n          ? theme.colors.control.segmented.textDisable\n          : theme.colors.control.segmented.text;\n\n        return (\n          <Box\n            key={item.id}\n            as=\"button\"\n            role=\"radio\"\n            id={itemId}\n            aria-checked={isActive}\n            aria-disabled={isDisabled}\n            aria-label={item[\"aria-label\"] || item.label}\n            tabIndex={isActive ? 0 : -1}\n            disabled={isDisabled}\n            ref={(el: HTMLElement | null) => {\n              itemRefs.current[index] = el;\n            }}\n            onPress={handlePress}\n            onKeyDown={(e: React.KeyboardEvent) => handleKeyDown(e, index)}\n            flex={fullWidth ? 1 : undefined}\n            flexShrink={0}\n            position=\"relative\"\n            zIndex={1}\n            height={sizeStyles.itemHeight}\n            paddingHorizontal={sizeStyles.itemPaddingHorizontal}\n            paddingVertical={sizeStyles.itemPaddingVertical}\n            flexDirection=\"row\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            gap={sizeStyles.gap}\n            backgroundColor={\n              !isWeb && isActive\n                ? theme.colors.control.segmented.bgActive\n                : \"transparent\"\n            }\n            borderRadius={sizeStyles.itemRadius}\n            cursor={isDisabled ? \"not-allowed\" : \"pointer\"}\n            hoverStyle={\n              !isDisabled && !isActive\n                ? {\n                    backgroundColor: theme.colors.control.segmented.bgHover,\n                  }\n                : undefined\n            }\n            focusStyle={{\n              outlineColor: theme.colors.border.brand,\n              outlineWidth: 2,\n              outlineOffset: -2,\n            }}\n          >\n            {item.icon && (\n              <Icon size={sizeStyles.iconSize} color={textColor} aria-hidden>\n                {item.icon}\n              </Icon>\n            )}\n            <Text\n              color={textColor}\n              fontSize={sizeStyles.fontSize}\n              fontWeight=\"500\"\n              textAlign=\"center\"\n              whiteSpace=\"nowrap\"\n              overflow=\"hidden\"\n              textOverflow=\"ellipsis\"\n            >\n              {item.label}\n            </Text>\n          </Box>\n        );\n      })}\n    </Box>\n  );\n};\n\nSegmented.displayName = \"Segmented\";\n","import React from \"react\";\nimport {\n  View,\n  Pressable,\n  Image,\n  ViewStyle,\n  ImageStyle,\n  DimensionValue,\n  AnimatableNumericValue,\n  AccessibilityRole,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nconst roleToAccessibilityRole: Record<string, AccessibilityRole> = {\n  button: \"button\",\n  link: \"link\",\n  img: \"image\",\n  image: \"image\",\n  summary: \"summary\",\n  switch: \"switch\",\n  checkbox: \"checkbox\",\n  radio: \"radio\",\n  heading: \"header\",\n  text: \"text\",\n  search: \"search\",\n  alert: \"alert\",\n  none: \"none\",\n  presentation: \"none\",\n  progressbar: \"progressbar\",\n  scrollbar: \"scrollbar\",\n  adjustable: \"adjustable\",\n  tab: \"tab\",\n  menu: \"menu\",\n  menuitem: \"menuitem\",\n  list: \"list\",\n  timer: \"timer\",\n};\n\n/** RN ViewStyle.gap is typed as number (Yoga gap), not DimensionValue. */\nconst toGapValue = (gap: number | string | undefined): number | undefined => {\n  if (gap === undefined) return undefined;\n  if (typeof gap === \"number\") return gap;\n  const pxMatch = /^(\\d+(?:\\.\\d+)?)px$/.exec(gap);\n  if (pxMatch) return Number(pxMatch[1]);\n  const asNumber = Number(gap);\n  return Number.isFinite(asNumber) ? asNumber : undefined;\n};\n\n/**\n * Yoga has no inline formatting context, so RN's ViewStyle.display only\n * accepts \"flex\" | \"none\". Every inline-ish web value collapses to a plain\n * flex container — the box already fills only its content on native, which is\n * what those callers wanted on web anyway. Returning undefined (rather than\n * \"flex\") leaves RN's own default in place.\n */\nconst toNativeDisplay = (\n  display: BoxProps[\"display\"]\n): ViewStyle[\"display\"] => (display === \"none\" ? \"none\" : undefined);\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  display,\n  flexDirection,\n  flexWrap,\n  alignItems,\n  justifyContent,\n  alignSelf,\n  position,\n  top,\n  bottom,\n  left,\n  right,\n  width,\n  minWidth,\n  minHeight,\n  maxWidth,\n  maxHeight,\n  flex,\n  flexShrink,\n  gap,\n  overflow,\n  opacity,\n  zIndex,\n  hoverStyle,\n  pressStyle,\n  style,\n  disabled,\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    opacity: opacity ?? (disabled ? 0.5 : undefined),\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    display: toNativeDisplay(display),\n    flexDirection,\n    flexWrap,\n    alignItems,\n    justifyContent,\n    alignSelf,\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    flexShrink,\n    gap: toGapValue(gap),\n    ...(style as ViewStyle),\n  });\n\n  const finalTestID = dataTestId || testID;\n\n  // Map web a11y props; drop the rest of the web-only attributes before\n  // spreading onto RN hosts (unknown props warn at runtime).\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    \"aria-busy\": ariaBusy,\n    className,\n    \"data-testid\": _dataTestId,\n    cursor: _cursor,\n    type: _type,\n    ...nativeRest\n  } = rest as Record<string, unknown>;\n\n  const accessibilityRole =\n    (typeof role === \"string\" && roleToAccessibilityRole[role]) ||\n    (as === \"button\" ? \"button\" : undefined);\n  const isDisabled = Boolean(disabled || ariaDisabled);\n  const accessibilityState = {\n    disabled: isDisabled || undefined,\n    busy: Boolean(ariaBusy) || undefined,\n  };\n  const accessibilityLiveRegion =\n    ariaLive === \"polite\" || ariaLive === \"assertive\" ? ariaLive : undefined;\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        accessibilityLabel={typeof ariaLabel === \"string\" ? ariaLabel : alt}\n        resizeMode=\"cover\"\n        {...nativeRest}\n      />\n    );\n  }\n\n  // Prefer Pressable whenever the node is interactive or explicitly a button,\n  // so disabled / aria-disabled controls stay in the a11y tree as buttons.\n  if (onPress || as === \"button\") {\n    return (\n      <Pressable\n        onPress={!isDisabled && onPress ? onPress : undefined}\n        disabled={isDisabled}\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        accessibilityRole={accessibilityRole}\n        accessibilityLabel={\n          typeof ariaLabel === \"string\" ? ariaLabel : undefined\n        }\n        accessibilityState={accessibilityState}\n        accessibilityLiveRegion={accessibilityLiveRegion}\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      accessibilityRole={accessibilityRole}\n      accessibilityLabel={typeof ariaLabel === \"string\" ? ariaLabel : undefined}\n      accessibilityState={accessibilityState}\n      accessibilityLiveRegion={accessibilityLiveRegion}\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  testID,\n  \"data-testid\": dataTestId,\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={dataTestId || testID || id}\n      accessibilityRole={accessibilityRole}\n    >\n      {children}\n    </RNText>\n  );\n};\n","import React from \"react\";\nimport { View, ViewStyle } from \"react-native\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Icon: React.FC<IconProps> = ({\n  children,\n  color,\n  size,\n  testID,\n  \"data-testid\": dataTestId,\n}) => {\n  const style: ViewStyle = {\n    width: typeof size === \"number\" ? size : undefined,\n    height: typeof size === \"number\" ? size : undefined,\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  };\n\n  // On native, we try to pass the color down to children (like Text primitives)\n  // to mimic the CSS inheritance behavior of the web version.\n  const childrenWithProps = React.Children.map(children, (child) => {\n    if (React.isValidElement(child)) {\n      return React.cloneElement(child, {\n        color: child.props.color || color,\n        // Also pass size if child seems to be an icon that needs it\n        size: child.props.size || size,\n      });\n    }\n    return child;\n  });\n\n  return (\n    <View style={style} testID={dataTestId || testID}>\n      {childrenWithProps}\n    </View>\n  );\n};\n","export * from \"./Box\";\nexport * from \"./Text\";\nexport * from \"./Spinner\";\nexport * from \"./Icon\";\nexport * from \"./Divider\";\nexport * from \"./Input\";\nexport * from \"./TextArea\";\nexport * from \"./LinearGradient\";\n\nexport const isWeb = false;\nexport const isNative = true;\n"],"mappings":"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","names":["jsx","View","jsx","jsx"]}
+{"version":3,"sources":["../../src/Segmented.tsx","../../../../foundation/primitives-native/src/Box.tsx","../../../../foundation/primitives-native/src/Text.tsx","../../../../foundation/primitives-native/src/Icon.tsx","../../../../foundation/primitives-native/src/index.tsx"],"sourcesContent":["import React, { useCallback, useRef, useState, useEffect } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text, Icon, isWeb } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme, type ThemeOverrideProps } from \"@xsolla/xui-core\";\n\nexport interface SegmentedItemType {\n  /** Unique identifier for the item */\n  id: string;\n  /** Display label for the item */\n  label: string;\n  /** Optional icon to display */\n  icon?: React.ReactNode;\n  /** Whether the item is disabled */\n  disabled?: boolean;\n  /** Accessible label for screen readers */\n  \"aria-label\"?: string;\n}\n\n/**\n * How a label that does not fit its segment is handled.\n * - `\"ellipsis\"`: stays on one line and is truncated with `…`. The full label\n *   is shown as a native tooltip on web. Control height never changes.\n * - `\"wrap\"`: wraps onto as many lines as it needs (balanced on web). The\n *   control grows in height only when a label actually wraps.\n */\nexport type SegmentedOverflow = \"ellipsis\" | \"wrap\";\n\nexport interface SegmentedProps extends ThemeOverrideProps {\n  /** Array of items */\n  items: SegmentedItemType[];\n  /** ID of the currently active item */\n  activeId?: string;\n  /** Callback when an item is selected */\n  onChange?: (id: string) => void;\n  /** Size variant */\n  size?: \"xl\" | \"lg\" | \"md\" | \"sm\";\n  id?: string;\n  testID?: string;\n  /** Full width of the container */\n  fullWidth?: boolean;\n  /**\n   * How labels that don't fit are handled: `\"ellipsis\"` truncates on one line\n   * (full text in a tooltip on web), `\"wrap\"` wraps the label and lets the\n   * control grow in height. Short labels render identically in both modes.\n   * @default \"ellipsis\"\n   */\n  overflow?: SegmentedOverflow;\n}\n\ninterface IndicatorStyle {\n  left: number;\n  top: number;\n  width: number;\n  height: number;\n  initialized: boolean;\n}\n\n/**\n * Segmented - A control for switching between related views or filters\n */\nexport const Segmented: React.FC<SegmentedProps> = ({\n  items,\n  activeId,\n  onChange,\n  size = \"md\",\n  id,\n  testID,\n  fullWidth = false,\n  overflow = \"ellipsis\",\n  themeMode,\n  themeProductContext,\n}) => {\n  const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n  const sizeStyles = theme.sizing.segmented(size);\n  const isWrap = overflow === \"wrap\";\n\n  const containerId = id ? `${id}-container` : undefined;\n  const itemRefs = useRef<(HTMLElement | null)[]>([]);\n  const containerRef = useRef<HTMLElement | null>(null);\n\n  // Indicator position for animation (web only)\n  const [indicatorStyle, setIndicatorStyle] = useState<IndicatorStyle>({\n    left: 0,\n    top: 0,\n    width: 0,\n    height: 0,\n    initialized: false,\n  });\n\n  const activeIndex = items.findIndex((item) => item.id === activeId);\n\n  // Measure the active item and move the indicator onto it (web only).\n  // Positions are relative to the container's padding box (what\n  // `position: absolute` resolves against), so the container border is\n  // subtracted via clientLeft/clientTop.\n  const updateIndicator = useCallback(() => {\n    if (!isWeb) return;\n\n    const activeItemEl = itemRefs.current[activeIndex];\n    const containerEl = containerRef.current;\n    if (!activeItemEl || !containerEl) return;\n\n    const containerRect = containerEl.getBoundingClientRect();\n    const itemRect = activeItemEl.getBoundingClientRect();\n\n    const next = {\n      left: itemRect.left - containerRect.left - containerEl.clientLeft,\n      top: itemRect.top - containerRect.top - containerEl.clientTop,\n      width: itemRect.width,\n      height: itemRect.height,\n    };\n\n    setIndicatorStyle((prev) =>\n      prev.initialized &&\n      prev.left === next.left &&\n      prev.top === next.top &&\n      prev.width === next.width &&\n      prev.height === next.height\n        ? prev\n        : { ...next, initialized: true }\n    );\n  }, [activeIndex]);\n\n  // Re-measure when the active item changes, and whenever the container or\n  // any item resizes afterwards (web font swap, viewport resize, label wrap).\n  useEffect(() => {\n    if (!isWeb) return;\n\n    updateIndicator();\n\n    if (typeof ResizeObserver === \"undefined\") return;\n\n    const observer = new ResizeObserver(() => updateIndicator());\n    if (containerRef.current) observer.observe(containerRef.current);\n    itemRefs.current.slice(0, items.length).forEach((el) => {\n      if (el) observer.observe(el);\n    });\n\n    return () => observer.disconnect();\n  }, [updateIndicator, items.length, overflow, size, fullWidth]);\n\n  // Web fonts can finish loading after the first measurement.\n  useEffect(() => {\n    if (!isWeb || typeof document === \"undefined\") return;\n    const fonts = (document as Document & { fonts?: FontFaceSet }).fonts;\n    if (!fonts) return;\n\n    let cancelled = false;\n    fonts.ready.then(() => {\n      if (!cancelled) updateIndicator();\n    });\n    return () => {\n      cancelled = true;\n    };\n  }, [updateIndicator]);\n\n  const enabledIndices = items\n    .map((item, index) => (!item.disabled ? index : -1))\n    .filter((i) => i !== -1);\n\n  const focusItem = useCallback((index: number) => {\n    const element = itemRefs.current[index];\n    if (element) {\n      element.focus();\n    }\n  }, []);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent, currentIndex: number) => {\n      const currentEnabledIndex = enabledIndices.indexOf(currentIndex);\n\n      switch (e.key) {\n        case \"ArrowRight\":\n        case \"ArrowDown\":\n          e.preventDefault();\n          {\n            const nextEnabledIndex =\n              currentEnabledIndex < enabledIndices.length - 1\n                ? enabledIndices[currentEnabledIndex + 1]\n                : enabledIndices[0];\n            focusItem(nextEnabledIndex);\n          }\n          break;\n\n        case \"ArrowLeft\":\n        case \"ArrowUp\":\n          e.preventDefault();\n          {\n            const prevEnabledIndex =\n              currentEnabledIndex > 0\n                ? enabledIndices[currentEnabledIndex - 1]\n                : enabledIndices[enabledIndices.length - 1];\n            focusItem(prevEnabledIndex);\n          }\n          break;\n\n        case \"Enter\":\n        case \" \":\n          e.preventDefault();\n          if (onChange && !items[currentIndex].disabled) {\n            onChange(items[currentIndex].id);\n          }\n          break;\n\n        default:\n          break;\n      }\n    },\n    [enabledIndices, focusItem, onChange, items]\n  );\n\n  // XUITSD-68: a disabled item that is also the active one has no\n  // segmented-specific tokens in Figma, so the indicator and its label use the\n  // shared control.disable active pair. Disabled inactive items keep\n  // control.segmented.textDisable.\n  const disableColors = theme.colors.control.disable;\n  const isActiveItemDisabled =\n    items.find((item) => item.id === activeId)?.disabled === true;\n  const indicatorBg = isActiveItemDisabled\n    ? disableColors.bgActive\n    : theme.colors.control.segmented.bgActive;\n\n  return (\n    <Box\n      id={containerId}\n      role=\"radiogroup\"\n      testID={testID}\n      ref={(el: HTMLElement | null) => {\n        containerRef.current = el;\n      }}\n      flexDirection=\"row\"\n      alignItems=\"stretch\"\n      flexShrink={0}\n      position=\"relative\"\n      width={fullWidth ? \"100%\" : \"fit-content\"}\n      maxWidth=\"100%\"\n      minHeight={sizeStyles.height}\n      backgroundColor={theme.colors.control.segmented.bg}\n      borderRadius={sizeStyles.containerRadius}\n      padding={sizeStyles.containerPadding}\n      borderWidth={1}\n      borderColor={theme.colors.border.secondary}\n      borderStyle=\"solid\"\n      overflow=\"hidden\"\n    >\n      {/* Sliding indicator (web only) */}\n      {isWeb && indicatorStyle.initialized && (\n        <Box\n          position=\"absolute\"\n          zIndex={0}\n          backgroundColor={indicatorBg}\n          borderRadius={sizeStyles.itemRadius}\n          style={{\n            left: indicatorStyle.left,\n            top: indicatorStyle.top,\n            width: indicatorStyle.width,\n            height: indicatorStyle.height,\n            transition:\n              \"left 200ms ease-out, top 200ms ease-out, width 200ms ease-out, height 200ms ease-out\",\n            pointerEvents: \"none\",\n          }}\n          aria-hidden\n        />\n      )}\n      {items.map((item, index) => {\n        const isActive = item.id === activeId;\n        const isDisabled = item.disabled;\n        const itemId = id ? `${id}-item-${item.id}` : undefined;\n\n        const handlePress = () => {\n          if (!isDisabled && onChange) {\n            onChange(item.id);\n          }\n        };\n\n        const textColor = isDisabled\n          ? isActive\n            ? disableColors.contentActive\n            : theme.colors.control.segmented.textDisable\n          : theme.colors.control.segmented.text;\n\n        return (\n          <Box\n            key={item.id}\n            as=\"button\"\n            role=\"radio\"\n            id={itemId}\n            aria-checked={isActive}\n            aria-disabled={isDisabled}\n            aria-label={item[\"aria-label\"] || item.label}\n            tabIndex={isActive ? 0 : -1}\n            disabled={isDisabled}\n            ref={(el: HTMLElement | null) => {\n              itemRefs.current[index] = el;\n            }}\n            onPress={handlePress}\n            onKeyDown={(e: React.KeyboardEvent) => handleKeyDown(e, index)}\n            flex={fullWidth ? 1 : undefined}\n            flexShrink={1}\n            minWidth={0}\n            position=\"relative\"\n            zIndex={1}\n            minHeight={sizeStyles.itemHeight}\n            paddingHorizontal={sizeStyles.itemPaddingHorizontal}\n            paddingVertical={sizeStyles.itemPaddingVertical}\n            flexDirection=\"row\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            gap={sizeStyles.gap}\n            backgroundColor={!isWeb && isActive ? indicatorBg : \"transparent\"}\n            borderRadius={sizeStyles.itemRadius}\n            cursor={isDisabled ? \"not-allowed\" : \"pointer\"}\n            hoverStyle={\n              !isDisabled && !isActive\n                ? {\n                    backgroundColor: theme.colors.control.segmented.bgHover,\n                  }\n                : undefined\n            }\n            focusStyle={{\n              outlineColor: theme.colors.border.brand,\n              outlineWidth: 2,\n              outlineOffset: -2,\n            }}\n          >\n            {item.icon && (\n              <Box flexShrink={0} alignItems=\"center\" justifyContent=\"center\">\n                <Icon size={sizeStyles.iconSize} color={textColor} aria-hidden>\n                  {item.icon}\n                </Icon>\n              </Box>\n            )}\n            {isWrap ? (\n              <Text\n                color={textColor}\n                fontSize={sizeStyles.fontSize}\n                lineHeight={sizeStyles.lineHeight}\n                fontWeight=\"500\"\n                textAlign=\"center\"\n                whiteSpace=\"normal\"\n                style={\n                  isWeb\n                    ? ({\n                        minWidth: 0,\n                        overflowWrap: \"anywhere\",\n                        textWrap: \"balance\",\n                      } as React.CSSProperties)\n                    : undefined\n                }\n              >\n                {item.label}\n              </Text>\n            ) : (\n              <Text\n                color={textColor}\n                fontSize={sizeStyles.fontSize}\n                fontWeight=\"500\"\n                textAlign=\"center\"\n                numberOfLines={1}\n                title={item.label}\n              >\n                {item.label}\n              </Text>\n            )}\n          </Box>\n        );\n      })}\n    </Box>\n  );\n};\n\nSegmented.displayName = \"Segmented\";\n","import React from \"react\";\nimport {\n  View,\n  Pressable,\n  Image,\n  ViewStyle,\n  ImageStyle,\n  DimensionValue,\n  AnimatableNumericValue,\n  AccessibilityRole,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nconst roleToAccessibilityRole: Record<string, AccessibilityRole> = {\n  button: \"button\",\n  link: \"link\",\n  img: \"image\",\n  image: \"image\",\n  summary: \"summary\",\n  switch: \"switch\",\n  checkbox: \"checkbox\",\n  radio: \"radio\",\n  heading: \"header\",\n  text: \"text\",\n  search: \"search\",\n  alert: \"alert\",\n  none: \"none\",\n  presentation: \"none\",\n  progressbar: \"progressbar\",\n  scrollbar: \"scrollbar\",\n  adjustable: \"adjustable\",\n  tab: \"tab\",\n  menu: \"menu\",\n  menuitem: \"menuitem\",\n  list: \"list\",\n  timer: \"timer\",\n};\n\n/** RN ViewStyle.gap is typed as number (Yoga gap), not DimensionValue. */\nconst toGapValue = (gap: number | string | undefined): number | undefined => {\n  if (gap === undefined) return undefined;\n  if (typeof gap === \"number\") return gap;\n  const pxMatch = /^(\\d+(?:\\.\\d+)?)px$/.exec(gap);\n  if (pxMatch) return Number(pxMatch[1]);\n  const asNumber = Number(gap);\n  return Number.isFinite(asNumber) ? asNumber : undefined;\n};\n\n/**\n * Yoga has no inline formatting context, so RN's ViewStyle.display only\n * accepts \"flex\" | \"none\". Every inline-ish web value collapses to a plain\n * flex container — the box already fills only its content on native, which is\n * what those callers wanted on web anyway. Returning undefined (rather than\n * \"flex\") leaves RN's own default in place.\n */\nconst toNativeDisplay = (\n  display: BoxProps[\"display\"]\n): ViewStyle[\"display\"] => (display === \"none\" ? \"none\" : undefined);\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  display,\n  flexDirection,\n  flexWrap,\n  alignItems,\n  justifyContent,\n  alignSelf,\n  position,\n  top,\n  bottom,\n  left,\n  right,\n  width,\n  minWidth,\n  minHeight,\n  maxWidth,\n  maxHeight,\n  flex,\n  flexShrink,\n  gap,\n  overflow,\n  opacity,\n  zIndex,\n  hoverStyle,\n  pressStyle,\n  style,\n  disabled,\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    opacity: opacity ?? (disabled ? 0.5 : undefined),\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    display: toNativeDisplay(display),\n    flexDirection,\n    flexWrap,\n    alignItems,\n    justifyContent,\n    alignSelf,\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    flexShrink,\n    gap: toGapValue(gap),\n    ...(style as ViewStyle),\n  });\n\n  const finalTestID = dataTestId || testID;\n\n  // Map web a11y props; drop the rest of the web-only attributes before\n  // spreading onto RN hosts (unknown props warn at runtime).\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    \"aria-busy\": ariaBusy,\n    className,\n    \"data-testid\": _dataTestId,\n    cursor: _cursor,\n    type: _type,\n    ...nativeRest\n  } = rest as Record<string, unknown>;\n\n  const accessibilityRole =\n    (typeof role === \"string\" && roleToAccessibilityRole[role]) ||\n    (as === \"button\" ? \"button\" : undefined);\n  const isDisabled = Boolean(disabled || ariaDisabled);\n  const accessibilityState = {\n    disabled: isDisabled || undefined,\n    busy: Boolean(ariaBusy) || undefined,\n  };\n  const accessibilityLiveRegion =\n    ariaLive === \"polite\" || ariaLive === \"assertive\" ? ariaLive : undefined;\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        accessibilityLabel={typeof ariaLabel === \"string\" ? ariaLabel : alt}\n        resizeMode=\"cover\"\n        {...nativeRest}\n      />\n    );\n  }\n\n  // Prefer Pressable whenever the node is interactive or explicitly a button,\n  // so disabled / aria-disabled controls stay in the a11y tree as buttons.\n  if (onPress || as === \"button\") {\n    return (\n      <Pressable\n        onPress={!isDisabled && onPress ? onPress : undefined}\n        disabled={isDisabled}\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        accessibilityRole={accessibilityRole}\n        accessibilityLabel={\n          typeof ariaLabel === \"string\" ? ariaLabel : undefined\n        }\n        accessibilityState={accessibilityState}\n        accessibilityLiveRegion={accessibilityLiveRegion}\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      accessibilityRole={accessibilityRole}\n      accessibilityLabel={typeof ariaLabel === \"string\" ? ariaLabel : undefined}\n      accessibilityState={accessibilityState}\n      accessibilityLiveRegion={accessibilityLiveRegion}\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  testID,\n  \"data-testid\": dataTestId,\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={dataTestId || testID || id}\n      accessibilityRole={accessibilityRole}\n    >\n      {children}\n    </RNText>\n  );\n};\n","import React from \"react\";\nimport { View, ViewStyle } from \"react-native\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Icon: React.FC<IconProps> = ({\n  children,\n  color,\n  size,\n  testID,\n  \"data-testid\": dataTestId,\n}) => {\n  const style: ViewStyle = {\n    width: typeof size === \"number\" ? size : undefined,\n    height: typeof size === \"number\" ? size : undefined,\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  };\n\n  // On native, we try to pass the color down to children (like Text primitives)\n  // to mimic the CSS inheritance behavior of the web version.\n  const childrenWithProps = React.Children.map(children, (child) => {\n    if (React.isValidElement(child)) {\n      return React.cloneElement(child, {\n        color: child.props.color || color,\n        // Also pass size if child seems to be an icon that needs it\n        size: child.props.size || size,\n      });\n    }\n    return child;\n  });\n\n  return (\n    <View style={style} testID={dataTestId || testID}>\n      {childrenWithProps}\n    </View>\n  );\n};\n","export * from \"./Box\";\nexport * from \"./Text\";\nexport * from \"./Spinner\";\nexport * from \"./Icon\";\nexport * from \"./Divider\";\nexport * from \"./Input\";\nexport * from \"./TextArea\";\nexport * from \"./LinearGradient\";\n\nexport const isWeb = false;\nexport const isNative = true;\n"],"mappings":"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","names":["jsx","View","jsx","jsx"]}

package/package.json

@@ -1,25 +1,31 @@
 {
   "name": "@xsolla/xui-segmented",
-  "version": "0.220.0",
+  "version": "0.221.0",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",
   "scripts": {
     "build": "yarn build:web && yarn build:native",
     "build:web": "PLATFORM=web tsup",
-    "build:native": "PLATFORM=native tsup"
+    "build:native": "PLATFORM=native tsup",
+    "test": "vitest"
   },
   "dependencies": {
-    "@xsolla/xui-badge": "0.220.0",
-    "@xsolla/xui-core": "0.220.0",
-    "@xsolla/xui-primitives-core": "0.220.0"
+    "@xsolla/xui-badge": "0.221.0",
+    "@xsolla/xui-core": "0.221.0",
+    "@xsolla/xui-primitives-core": "0.221.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
     "styled-components": ">=4"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^14.1.2",
     "@vitest/coverage-v8": "^4.0.18",
+    "jsdom": "^24.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "tsup": "^8.0.0",
     "vitest": "^4.0.18"
   },

package/web/index.d.mts

@@ -13,6 +13,14 @@ interface SegmentedItemType {
     /** Accessible label for screen readers */
     "aria-label"?: string;
 }
+/**
+ * How a label that does not fit its segment is handled.
+ * - `"ellipsis"`: stays on one line and is truncated with `…`. The full label
+ *   is shown as a native tooltip on web. Control height never changes.
+ * - `"wrap"`: wraps onto as many lines as it needs (balanced on web). The
+ *   control grows in height only when a label actually wraps.
+ */
+type SegmentedOverflow = "ellipsis" | "wrap";
 interface SegmentedProps extends ThemeOverrideProps {
     /** Array of items */
     items: SegmentedItemType[];
@@ -26,10 +34,17 @@ interface SegmentedProps extends ThemeOverrideProps {
     testID?: string;
     /** Full width of the container */
     fullWidth?: boolean;
+    /**
+     * How labels that don't fit are handled: `"ellipsis"` truncates on one line
+     * (full text in a tooltip on web), `"wrap"` wraps the label and lets the
+     * control grow in height. Short labels render identically in both modes.
+     * @default "ellipsis"
+     */
+    overflow?: SegmentedOverflow;
 }
 /**
  * Segmented - A control for switching between related views or filters
  */
 declare const Segmented: React.FC<SegmentedProps>;
 
-export { Segmented, type SegmentedItemType, type SegmentedProps };
+export { Segmented, type SegmentedItemType, type SegmentedOverflow, type SegmentedProps };

package/web/index.d.ts

@@ -13,6 +13,14 @@ interface SegmentedItemType {
     /** Accessible label for screen readers */
     "aria-label"?: string;
 }
+/**
+ * How a label that does not fit its segment is handled.
+ * - `"ellipsis"`: stays on one line and is truncated with `…`. The full label
+ *   is shown as a native tooltip on web. Control height never changes.
+ * - `"wrap"`: wraps onto as many lines as it needs (balanced on web). The
+ *   control grows in height only when a label actually wraps.
+ */
+type SegmentedOverflow = "ellipsis" | "wrap";
 interface SegmentedProps extends ThemeOverrideProps {
     /** Array of items */
     items: SegmentedItemType[];
@@ -26,10 +34,17 @@ interface SegmentedProps extends ThemeOverrideProps {
     testID?: string;
     /** Full width of the container */
     fullWidth?: boolean;
+    /**
+     * How labels that don't fit are handled: `"ellipsis"` truncates on one line
+     * (full text in a tooltip on web), `"wrap"` wraps the label and lets the
+     * control grow in height. Short labels render identically in both modes.
+     * @default "ellipsis"
+     */
+    overflow?: SegmentedOverflow;
 }
 /**
  * Segmented - A control for switching between related views or filters
  */
 declare const Segmented: React.FC<SegmentedProps>;
 
-export { Segmented, type SegmentedItemType, type SegmentedProps };
+export { Segmented, type SegmentedItemType, type SegmentedOverflow, type SegmentedProps };

package/web/index.js

@@ -416,30 +416,64 @@ var Segmented = ({
   id,
   testID,
   fullWidth = false,
+  overflow = "ellipsis",
   themeMode,
   themeProductContext
 }) => {
   const { theme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
   const sizeStyles = theme.sizing.segmented(size);
+  const isWrap = overflow === "wrap";
   const containerId = id ? `${id}-container` : void 0;
   const itemRefs = (0, import_react3.useRef)([]);
   const containerRef = (0, import_react3.useRef)(null);
-  const [indicatorStyle, setIndicatorStyle] = (0, import_react3.useState)({ left: 0, width: 0, initialized: false });
-  (0, import_react3.useEffect)(() => {
+  const [indicatorStyle, setIndicatorStyle] = (0, import_react3.useState)({
+    left: 0,
+    top: 0,
+    width: 0,
+    height: 0,
+    initialized: false
+  });
+  const activeIndex = items.findIndex((item) => item.id === activeId);
+  const updateIndicator = (0, import_react3.useCallback)(() => {
     if (!isWeb) return;
-    const activeIndex = items.findIndex((item) => item.id === activeId);
     const activeItemEl = itemRefs.current[activeIndex];
     const containerEl = containerRef.current;
-    if (activeItemEl && containerEl) {
-      const containerRect = containerEl.getBoundingClientRect();
-      const itemRect = activeItemEl.getBoundingClientRect();
-      setIndicatorStyle({
-        left: itemRect.left - containerRect.left,
-        width: itemRect.width,
-        initialized: true
-      });
-    }
-  }, [activeId, items]);
+    if (!activeItemEl || !containerEl) return;
+    const containerRect = containerEl.getBoundingClientRect();
+    const itemRect = activeItemEl.getBoundingClientRect();
+    const next = {
+      left: itemRect.left - containerRect.left - containerEl.clientLeft,
+      top: itemRect.top - containerRect.top - containerEl.clientTop,
+      width: itemRect.width,
+      height: itemRect.height
+    };
+    setIndicatorStyle(
+      (prev) => prev.initialized && prev.left === next.left && prev.top === next.top && prev.width === next.width && prev.height === next.height ? prev : { ...next, initialized: true }
+    );
+  }, [activeIndex]);
+  (0, import_react3.useEffect)(() => {
+    if (!isWeb) return;
+    updateIndicator();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => updateIndicator());
+    if (containerRef.current) observer.observe(containerRef.current);
+    itemRefs.current.slice(0, items.length).forEach((el) => {
+      if (el) observer.observe(el);
+    });
+    return () => observer.disconnect();
+  }, [updateIndicator, items.length, overflow, size, fullWidth]);
+  (0, import_react3.useEffect)(() => {
+    if (!isWeb || typeof document === "undefined") return;
+    const fonts = document.fonts;
+    if (!fonts) return;
+    let cancelled = false;
+    fonts.ready.then(() => {
+      if (!cancelled) updateIndicator();
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [updateIndicator]);
   const enabledIndices = items.map((item, index2) => !item.disabled ? index2 : -1).filter((i) => i !== -1);
   const focusItem = (0, import_react3.useCallback)((index2) => {
     const element = itemRefs.current[index2];
@@ -480,6 +514,9 @@ var Segmented = ({
     },
     [enabledIndices, focusItem, onChange, items]
   );
+  const disableColors = theme.colors.control.disable;
+  const isActiveItemDisabled = items.find((item) => item.id === activeId)?.disabled === true;
+  const indicatorBg = isActiveItemDisabled ? disableColors.bgActive : theme.colors.control.segmented.bgActive;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     Box,
     {
@@ -490,11 +527,12 @@ var Segmented = ({
         containerRef.current = el;
       },
       flexDirection: "row",
-      alignItems: "center",
+      alignItems: "stretch",
       flexShrink: 0,
       position: "relative",
       width: fullWidth ? "100%" : "fit-content",
-      height: sizeStyles.height,
+      maxWidth: "100%",
+      minHeight: sizeStyles.height,
       backgroundColor: theme.colors.control.segmented.bg,
       borderRadius: sizeStyles.containerRadius,
       padding: sizeStyles.containerPadding,
@@ -508,13 +546,14 @@ var Segmented = ({
           {
             position: "absolute",
             zIndex: 0,
-            height: sizeStyles.itemHeight,
-            backgroundColor: theme.colors.control.segmented.bgActive,
+            backgroundColor: indicatorBg,
             borderRadius: sizeStyles.itemRadius,
             style: {
               left: indicatorStyle.left,
+              top: indicatorStyle.top,
               width: indicatorStyle.width,
-              transition: "left 200ms ease-out, width 200ms ease-out",
+              height: indicatorStyle.height,
+              transition: "left 200ms ease-out, top 200ms ease-out, width 200ms ease-out, height 200ms ease-out",
               pointerEvents: "none"
             },
             "aria-hidden": true
@@ -529,7 +568,7 @@ var Segmented = ({
               onChange(item.id);
             }
           };
-          const textColor = isDisabled ? theme.colors.control.segmented.textDisable : theme.colors.control.segmented.text;
+          const textColor = isDisabled ? isActive ? disableColors.contentActive : theme.colors.control.segmented.textDisable : theme.colors.control.segmented.text;
           return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
             Box,
             {
@@ -547,17 +586,18 @@ var Segmented = ({
               onPress: handlePress,
               onKeyDown: (e) => handleKeyDown(e, index2),
               flex: fullWidth ? 1 : void 0,
-              flexShrink: 0,
+              flexShrink: 1,
+              minWidth: 0,
               position: "relative",
               zIndex: 1,
-              height: sizeStyles.itemHeight,
+              minHeight: sizeStyles.itemHeight,
               paddingHorizontal: sizeStyles.itemPaddingHorizontal,
               paddingVertical: sizeStyles.itemPaddingVertical,
               flexDirection: "row",
               alignItems: "center",
               justifyContent: "center",
               gap: sizeStyles.gap,
-              backgroundColor: !isWeb && isActive ? theme.colors.control.segmented.bgActive : "transparent",
+              backgroundColor: !isWeb && isActive ? indicatorBg : "transparent",
               borderRadius: sizeStyles.itemRadius,
               cursor: isDisabled ? "not-allowed" : "pointer",
               hoverStyle: !isDisabled && !isActive ? {
@@ -569,17 +609,32 @@ var Segmented = ({
                 outlineOffset: -2
               },
               children: [
-                item.icon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { size: sizeStyles.iconSize, color: textColor, "aria-hidden": true, children: item.icon }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                item.icon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Box, { flexShrink: 0, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { size: sizeStyles.iconSize, color: textColor, "aria-hidden": true, children: item.icon }) }),
+                isWrap ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  Text,
+                  {
+                    color: textColor,
+                    fontSize: sizeStyles.fontSize,
+                    lineHeight: sizeStyles.lineHeight,
+                    fontWeight: "500",
+                    textAlign: "center",
+                    whiteSpace: "normal",
+                    style: isWeb ? {
+                      minWidth: 0,
+                      overflowWrap: "anywhere",
+                      textWrap: "balance"
+                    } : void 0,
+                    children: item.label
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   Text,
                   {
                     color: textColor,
                     fontSize: sizeStyles.fontSize,
                     fontWeight: "500",
                     textAlign: "center",
-                    whiteSpace: "nowrap",
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
+                    numberOfLines: 1,
+                    title: item.label,
                     children: item.label
                   }
                 )